Added disabled steps

mu29 · Apr 23, 2017 · 619d743 · 619d743
1 parent d9df1ea
commit 619d743
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/example/example.js b/example/example.js
@@ -23,7 +23,7 @@ class App extends Component {
           console.log('onClick', 2)
         }
       }, {
-        title: 'Step Three',
+        title: 'Step Three (Disabled)',
         href: 'http://example3.com',
         onClick: (e) => {
           e.preventDefault()
@@ -55,7 +55,7 @@ class App extends Component {
 
     return (
       <div>
-        <Stepper steps={ steps } activeStep={ currentStep } />
+        <Stepper steps={ steps } activeStep={ currentStep } disabledSteps={ [2] } />
         <div style={ buttonStyle } onClick={ this.onClickNext }>Next</div>
       </div>
     );

diff --git a/lib/Stepper.js b/lib/Stepper.js
@@ -30,6 +30,7 @@ var styles = {
 function Stepper(_ref) {
   var activeStep = _ref.activeStep,
       steps = _ref.steps,
+      disabledSteps = _ref.disabledSteps,
       activeColor = _ref.activeColor,
       completeColor = _ref.completeColor,
       defaultColor = _ref.defaultColor,
@@ -56,8 +57,8 @@ function Stepper(_ref) {
           title: step.title,
           href: step.href,
           onClick: step.onClick,
-          active: index === activeStep,
-          completed: index < activeStep,
+          active: !(disabledSteps || []).includes(index) && index === activeStep,
+          completed: !(disabledSteps || []).includes(index) && index < activeStep,
           first: index === 0,
           isLast: index === steps.length - 1,
           index: index,

diff --git a/src/Stepper.js b/src/Stepper.js
@@ -16,7 +16,7 @@ const styles = {
 };
 
 function Stepper({
-  activeStep, steps,
+  activeStep, steps, disabledSteps,
   activeColor, completeColor, defaultColor, circleFontColor,
   activeTitleColor, completeTitleColor, defaultTitleColor,
   size, circleFontSize, titleFontSize,
@@ -32,8 +32,8 @@ function Stepper({
             title={step.title}
             href={step.href}
             onClick={step.onClick}
-            active={index === activeStep}
-            completed={index < activeStep}
+            active={!(disabledSteps || []).includes(index) && index === activeStep}
+            completed={!(disabledSteps || []).includes(index) && index < activeStep}
             first={index === 0}
             isLast={index === steps.length - 1}
             index={index}