Add ProgressGroup demo

nwplus · Jul 17, 2018 · a9fcbda · a9fcbda
1 parent 1ce9f46
commit a9fcbda
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 38 deletions.
diff --git a/web/components/demo/index.js b/web/components/demo/index.js
@@ -4,33 +4,45 @@ import { SecondaryButton, PrimaryButton, ProgressGroup } from '../input/buttons'
 
 const ButtonCallback = e => console.log(`${e.currentTarget.textContent} button clicked!`);
 
-const FrontEndComponents = () => (
-  <div>
-    <p>Buttons</p>
-    <br />
-    <div>
-      <PrimaryButton text="Primary" onClick={ButtonCallback} />
-      &nbsp;
-      <SecondaryButton text="Secondary" onClick={ButtonCallback} />
-    </div>
-    <br />
-    <div>
-      <PrimaryButton text="Primary" onClick={ButtonCallback} disabled />
-      &nbsp;
-      <SecondaryButton text="Secondary" onClick={ButtonCallback} disabled />
-    </div>
-    <br />
-    <div>
-      <ProgressGroup
-        activeIndex={1}
-        steps={[
-          { text: '1', onClick: ButtonCallback },
-          { text: '2', onClick: ButtonCallback },
-          { text: '3', onClick: ButtonCallback, disabled: true },
-          { text: '4', onClick: ButtonCallback, disabled: true },
-        ]} />
-    </div>
-  </div>
-);
+class FrontEndComponents extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      active: 3,
+    };
+  }
+
+  switchProgress = e => this.setState({ active: parseInt(e.currentTarget.textContent, 10) - 1 })
+
+  render() {
+    const { active } = this.state;
+    return (
+      <div>
+        <p>Buttons</p>
+        <br />
+        <div>
+          <PrimaryButton text="Primary" onClick={ButtonCallback} />
+          &nbsp;
+          <SecondaryButton text="Secondary" onClick={ButtonCallback} />
+        </div>
+        <br />
+        <div>
+          <PrimaryButton text="Primary" onClick={ButtonCallback} disabled />
+          &nbsp;
+          <SecondaryButton text="Secondary" onClick={ButtonCallback} disabled />
+        </div>
+        <br />
+        <div>
+          <ProgressGroup
+            count={10}
+            onClick={this.switchProgress}
+            activeIndex={active}
+            lastValidIndex={7}
+          />
+        </div>
+      </div>
+    );
+  }
+}
 
 export default FrontEndComponents;
diff --git a/web/components/input/buttons/ProgressGroup/index.js b/web/components/input/buttons/ProgressGroup/index.js
@@ -4,20 +4,19 @@ import PropTypes from 'prop-types';
 const ProgressGroup = ({ count, onClick, activeIndex, lastValidIndex }) => {
   const buttons = [];
   for (let i = 0; i < count; i += 1) {
-    const active = (i === activeIndex);
+    const isActive = (i === activeIndex);
     buttons.push(
-      <span key={i}>
-        <button
-          onClick={onClick}
-          type="button"
-          className={`
+      <button
+        key={i}
+        onClick={onClick}
+        type="button"
+        className={`
             progress-step
-            ${active ? 'active' : ''} 
+            ${isActive ? 'active' : ''} 
             ${i > lastValidIndex ? 'disabled' : ''}
           `}>
-          { i + 1 }
-        </button>
-      </span>
+        { i + 1 }
+      </button>
     );
   }
   return buttons;