enhance(StepProgress): add possibility to define asymmetric step offs…

…ets (#70)
uzh-bf · Oct 26, 2023 · e0d2cad · e0d2cad
1 parent 55a9715
commit e0d2cad
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 30 deletions.
diff --git a/src/StepProgress.stories.tsx b/src/StepProgress.stories.tsx
@@ -24,7 +24,8 @@ export const WithOffset = () => {
     <StepProgress
       value={value}
       max={20}
-      displayOffset={7}
+      displayOffsetLeft={7}
+      displayOffsetRight={7}
       onItemClick={(val) => setValue(val)}
     />
   )
@@ -77,11 +78,44 @@ export const StatusOffset = () => {
         setValue(val)
       }}
       items={statusItems}
-      displayOffset={2}
+      displayOffsetLeft={2}
+      displayOffsetRight={2}
     />
   )
 }
 
+export const AsymmetricOffset = () => {
+  const [value, setValue] = useState(5)
+  const [value2, setValue2] = useState(2)
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        This demo contains two examples with asymchronous offset, one with 3
+        elements to the left and zero to the right and the second one with 1
+        element to the left and 5 to the right
+      </div>
+      <StepProgress
+        value={value}
+        onItemClick={(val, _) => {
+          setValue(val)
+        }}
+        items={statusItems}
+        displayOffsetLeft={3}
+        displayOffsetRight={0}
+      />
+      <StepProgress
+        value={value2}
+        onItemClick={(val, _) => {
+          setValue2(val)
+        }}
+        items={statusItems}
+        displayOffsetLeft={1}
+        displayOffsetRight={5}
+      />
+    </div>
+  )
+}
+
 export const CustomFormatter = () => {
   const [value, setValue] = useState(6)
 

diff --git a/src/StepProgress.tsx b/src/StepProgress.tsx
@@ -59,7 +59,8 @@ interface StepProgressBaseProps {
   }
   value: number
   onItemClick: (ix: number, item?: StepItem) => void
-  displayOffset?: number
+  displayOffsetLeft?: number
+  displayOffsetRight?: number
   className?: {
     override?: string
     root?: string
@@ -89,7 +90,8 @@ export interface StepProgressItemProps extends StepProgressBaseProps {
  * @param max - The maximum value of the progress bar.
  * @param items - The array of items that are displayed in the step progress bar.
  * @param onItemClick - The function that is called when an item is clicked.
- * @param displayOffset - The number that determines the maximum number of elements that are shown to the left and right of the current value on the step progress bar.
+ * @param displayOffsetLeft - The number that determines the maximum number of elements that are shown to the left of the current value on the step progress bar.
+ * @param displayOffsetRight - The number that determines the maximum number of elements that are shown to the right of the current value on the step progress bar.
  * @param className - The optional className object allows you to override the default styling.
  * @param formatter - The optional formatter function allows you to override the rendering of each item.
  * @return Step progress component
@@ -101,7 +103,8 @@ export function StepProgress({
   max,
   items,
   onItemClick,
-  displayOffset,
+  displayOffsetLeft,
+  displayOffsetRight,
   className,
   formatter = defaultFormatter,
 }: StepProgressProps | StepProgressItemProps) {
@@ -118,18 +121,19 @@ export function StepProgress({
       data-cy={data?.cy}
       data-test={data?.test}
     >
-      {displayOffset && value - displayOffset > 0 && (
-        <button
-          className={twMerge(
-            className?.override,
-            'rounded-l px-3 py-1 hover:bg-primary-20 hover:text-primary',
-            !items && 'bg-primary-60 text-white'
-          )}
-          onClick={() => onItemClick(value - 1, items && items[value - 1])}
-        >
-          <FontAwesomeIcon icon={faChevronLeft} />
-        </button>
-      )}
+      {typeof displayOffsetLeft !== 'undefined' &&
+        value - displayOffsetLeft > 0 && (
+          <button
+            className={twMerge(
+              className?.override,
+              'rounded-l px-3 py-1 hover:bg-primary-20 hover:text-primary',
+              !items && 'bg-primary-60 text-white'
+            )}
+            onClick={() => onItemClick(value - 1, items && items[value - 1])}
+          >
+            <FontAwesomeIcon icon={faChevronLeft} />
+          </button>
+        )}
       {elements.map((element, ix) => {
         const formattedElement = formatter({ element, ix })
         return (
@@ -141,8 +145,12 @@ export function StepProgress({
               ix === length - 1 && 'rounded-r',
               value > ix && !items && 'bg-primary-60 text-white',
               value === ix && 'bg-gray-400 font-bold text-white',
-              displayOffset && ix < value - displayOffset && 'hidden',
-              displayOffset && ix > value + displayOffset && 'hidden',
+              typeof displayOffsetLeft !== 'undefined' &&
+                ix < value - displayOffsetLeft &&
+                'hidden',
+              typeof displayOffsetRight !== 'undefined' &&
+                ix > value + displayOffsetRight &&
+                'hidden',
               formattedElement.className,
               value === ix && 'bg-opacity-100'
             )}
@@ -152,17 +160,18 @@ export function StepProgress({
           </button>
         )
       })}
-      {displayOffset && length > value + displayOffset + 1 && (
-        <button
-          className={twMerge(
-            className?.override,
-            'rounded-r px-3 py-1 hover:bg-primary-20 hover:text-primary'
-          )}
-          onClick={() => onItemClick(value + 1, items && items[value + 1])}
-        >
-          <FontAwesomeIcon icon={faChevronRight} />
-        </button>
-      )}
+      {typeof displayOffsetRight !== 'undefined' &&
+        length > value + displayOffsetRight + 1 && (
+          <button
+            className={twMerge(
+              className?.override,
+              'rounded-r px-3 py-1 hover:bg-primary-20 hover:text-primary'
+            )}
+            onClick={() => onItemClick(value + 1, items && items[value + 1])}
+          >
+            <FontAwesomeIcon icon={faChevronRight} />
+          </button>
+        )}
     </div>
   )
 }