fix(ProgressStepBar): add validate activeStepIndex (#3784)

closes #3774
consta-design-system · Oct 16, 2024 · a32b963 · a32b963
1 parent d0929e9
commit a32b963
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git a/src/components/ProgressStepBar/ProgressStepBar.tsx b/src/components/ProgressStepBar/ProgressStepBar.tsx
@@ -31,6 +31,7 @@ import {
   progressStepBarPropDirectionDefault,
   ProgressStepBarProps,
   progressStepBarPropSizeDefault,
+  validateVisibleIndex,
   withDefaultGetters,
 } from './helpers';
 import { ProgressStepBarItem } from './ProgressStepBarItem/ProgressStepBarItem';
@@ -49,7 +50,7 @@ function ProgressStepBarRender<ITEM = ProgressStepBarItemDefault>(
     direction = progressStepBarPropDirectionDefault,
     size = progressStepBarPropSizeDefault,
     className,
-    activeStepIndex,
+    activeStepIndex: activeStepIndexProp,
     onItemClick,
     getItemContent,
     getItemLabel,
@@ -63,6 +64,11 @@ function ProgressStepBarRender<ITEM = ProgressStepBarItemDefault>(
     ...otherProps
   } = usePropsHandler(COMPONENT_NAME, withDefaultGetters(props), containerRef);
 
+  const activeStepIndex = validateVisibleIndex(
+    steps.length,
+    activeStepIndexProp,
+  );
+
   const [visibleIndex, setVisibleIndex] = useState<number>(
     activeStepIndex || 0,
   );

diff --git a/src/components/ProgressStepBar/helpers.ts b/src/components/ProgressStepBar/helpers.ts
@@ -251,3 +251,18 @@ export const calculateLines = (
 
   return sizes;
 };
+
+export const validateVisibleIndex = (
+  lenght: number,
+  index: number | undefined,
+) => {
+  if (!index) {
+    return index;
+  }
+
+  if (index < 0) {
+    return undefined;
+  }
+
+  return Math.min(index, lenght - 1);
+};
diff --git a/src/hooks/useScrollElements/useScrollElements.tsx b/src/hooks/useScrollElements/useScrollElements.tsx
@@ -1,5 +1,7 @@
 import React, { createRef, useMemo } from 'react';
 
+import { useDebounce } from '##/hooks/useDebounce';
+
 type UseScrollElementsResult = {
   refs: React.RefObject<HTMLElement>[];
   scrollTo: (index: number) => void;
@@ -18,23 +20,29 @@ export function useScrollElements<ITEM>(
     return refArray;
   }, [items]);
 
-  const scrollTo = (index: number) => {
+  const scrollTo = useDebounce((index: number) => {
     const currentRef = refs[Math.max(index, 0)];
-    const container = currentRef.current?.parentElement;
-    if (currentRef.current && container) {
+    const container = currentRef?.current?.parentElement;
+    if (currentRef?.current && container) {
       const defaultPadding =
         getComputedStyle(container).position !== 'relative'
           ? container.offsetLeft
           : 0;
+
       let scrollLeft = currentRef.current.offsetLeft - defaultPadding;
+
       if (index <= 0) {
         scrollLeft = 0;
       } else if (index === refs.length - 1) {
         scrollLeft = container.scrollWidth;
       }
-      container.scrollLeft = scrollLeft;
+
+      container.scrollTo({
+        left: scrollLeft,
+        behavior: 'smooth',
+      });
     }
-  };
+  }, 20);
 
   return {
     refs,