Merge pull request #3238 from bettyblocks/Add-disable-option-to-stepp…

…er-PFR-718 feat: add disable option
bettyblocks · Nov 16, 2023 · 47ac8c6 · 47ac8c6
2 parents 7048377 + 8e83cdc
commit 47ac8c6
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/src/components/step.js b/src/components/step.js
@@ -7,7 +7,7 @@
     const { env, useText } = B;
     const isDev = env === 'dev';
     const isEmpty = children.length === 0;
-    const { label, icon, dataComponentAttribute } = options || {};
+    const { label, icon, disabled, dataComponentAttribute } = options || {};
     const { setStepLabelData, active, isFirstRender } = parent;
 
     const StepContent =
@@ -33,9 +33,10 @@
           ...prev,
           [`label${index}`]: label,
           [`icon${index}`]: icon,
+          [`disabled${index}`]: disabled,
         }));
       }
-    }, [setStepLabelData, index, label, icon]);
+    }, [setStepLabelData, index, label, icon, disabled]);
 
     return isDev ? <div className={classes.wrapper}>{StepCmp}</div> : StepCmp;
   })(),

diff --git a/src/components/stepper.js b/src/components/stepper.js
@@ -85,6 +85,7 @@
             const {
               label = stepLabelData[`label${index}`] || [`Step ${index + 1}`],
               icon = stepLabelData[`icon${index}`] || 'None',
+              disabled = stepLabelData[`disabled${index}`] || false,
             } = childOptions;
             const isActive = index === activeStep || allSteps;
             const labelText = useText(label);
@@ -132,6 +133,7 @@
                   <StepButton
                     classes={{ root: classes.stepButton }}
                     onClick={handleStep(index)}
+                    disabled={disabled}
                   >
                     <StepLabel
                       classes={{ root: classes.stepLabel }}

diff --git a/src/prefabs/structures/Step/options/index.ts b/src/prefabs/structures/Step/options/index.ts
@@ -1,4 +1,4 @@
-import { variable, icon } from '@betty-blocks/component-sdk';
+import { toggle, variable, icon } from '@betty-blocks/component-sdk';
 import { advanced } from '../../advanced';
 
 export const categories = [
@@ -22,6 +22,7 @@ export const stepOptions = {
       showOnDrop: true,
     },
   }),
+  disabled: toggle('Disabled', { value: false }),
 
   ...advanced('Step'),
 };