Added the a validation function that can be override for each steps.

caribouflex · Jan 9, 2018 · e448436 · e448436 · caribouflex · Jan 9, 2018
1 parent 375595f
commit e448436
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 23 deletions.
diff --git a/caribou-step.html b/caribou-step.html
@@ -34,15 +34,17 @@
 
 Custom property | Description | Default
 ----------------|-------------|----------
-    `--step-connector-line-color` | Color of the line that connect the steps | `#BDBDBD` 
-    `--step-saved-label-color` | Color of the label once it's saved | `#424242`
-    `--step-active-label-color`| Color of the label when the step is active | `#424242`
-    `--step-label-color`| Initial color of the label | `#E0E0E0`
-    `--step-badge-height`| The height of the badge (without border) | `18px`
-    `--step-badge-width`| The width of the badge (without border) | `18px`
-    `--step-save-badge-color`| Color of the badge once the step is saved | `--primary-color`
-    `--step-badge-color`| Initial color of the badge | `#9E9E9E`
-    `--step-badge-content-color`| Color of the number and the icon inside the badge | `#FFFFFF`
+`--step-connector-line-color` | Color of the line that connect the steps | `#BDBDBD` 
+`--step-saved-label-color` | Color of the label once it's saved | `#424242`
+`--step-active-label-color`| Color of the label when the step is active | `#424242`
+`--step-label-color`| Initial color of the label | `#E0E0E0`
+`--step-badge-height`| The height of the badge (without border) | `18px`
+`--step-badge-width`| The width of the badge (without border) | `18px`
+`--step-save-badge-color`| Color of the badge once the step is saved | `--primary-color`
+`--step-badge-color`| Initial color of the badge | `#9E9E9E`
+`--step-badge-content-color`| Color of the number and the icon inside the badge | `#FFFFFF`
+
+
 -->
 <dom-module id="caribou-step">
     <template>
@@ -143,6 +145,10 @@
                 background-color: var(--step-badge-color, #9E9E9E);
                 color: var(--step-badge-content-color, #FFFFFF);
             }
+
+            caribou-step-action-buttons paper-button {
+                @apply --button-style;
+            }
         </style>
 
         <paper-button on-tap="_toggle">
@@ -187,6 +193,13 @@
              * @param {Object} detail empty
              */
 
+            /**
+             * Fired when the step is invalid to the validation the user defined.
+             *
+             * @event step-invalid
+             * @param {Object} detail empty
+             */
+
             static get is() {
                 return 'caribou-step';
             }
@@ -317,7 +330,14 @@
                         this.parentElement.setNextStep(this);
                 }
             }
-
+
+            fireInvalidStep() {
+                this.dispatchEvent(new CustomEvent('step-invalid', {
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+
         }
 
         window.customElements.define(CaribouStepElement.is, CaribouStepElement);

diff --git a/caribou-stepper-step-property-mixin.html b/caribou-stepper-step-property-mixin.html
@@ -138,6 +138,10 @@
                 this.parentElement._registerStep(this);
             }
 
+            validate(){
+                return true;
+            }
+
             /**
              * This function is used to know if the property 'openFirstStepOnStartup' is set to true.
              * @private

diff --git a/caribou-stepper.html b/caribou-stepper.html
@@ -159,11 +159,15 @@
              * Then it will open the next step if there is one.
              */
             openNextStep() {
-                this.activeStep.saveStep();
-                this.activeStep.toggleStep();
-                this.removeActiveStep();
-                if (this.nextStep !== null)
-                    this.nextStep.toggleStep();
+                if (this.activeStep.validate()) {
+                    this.activeStep.saveStep();
+                    this.activeStep.toggleStep();
+                    this.removeActiveStep();
+                    if (this.nextStep !== null)
+                        this.nextStep.toggleStep();
+                } else {
+                    this.activeStep.fireInvalidStep();
+                }
             }
 
             /**

diff --git a/demo/index.html b/demo/index.html
@@ -16,7 +16,12 @@
 
   <custom-style>
     <style is="custom-style" include="demo-pages-shared-styles">
-
+      #stepper1step1 {
+        --button-style: {
+          text-transform: capitalize;
+          background-color: lightgrey;
+        }
+      }
     </style>
   </custom-style>
 </head>
@@ -27,7 +32,8 @@ <h3>Basic caribou-stepper demo</h3>
     <demo-snippet>
       <template>
         <caribou-stepper id="stepper" open-first-step-on-startup>
-          <caribou-step id="stepper1step1"  editable label="Step 1" back-button back-label="Back to the previous">
+          <caribou-step id="stepper1step1" editable label="Step 1" back-button back-label="Back to the previous">
+            <input type="checkbox" id="checkboxValid">Check to continue.
             <div style="width:100%;height:200px;background-color:lightgreen">Content 1</div>
           </caribou-step>
           <caribou-step id="stepper1step2" label="Step 2" skip-button optional back-button back-label="<--">
@@ -42,16 +48,13 @@ <h3>Basic caribou-stepper demo</h3>
           function reset() {
             document.querySelector("#stepper").reset();
           }
+          document.querySelector("#stepper1step1").validate = function () {
+            return document.querySelector("#checkboxValid").checked;
+          }
         </script>
       </template>
     </demo-snippet>
   </div>
-  <button onclick="reset">reset</button>
-  <script>
-    function reset() {
-      document.querySelector("#stepper").reset();
-    }
-  </script>
 </body>
 
 </html>