Merge pull request #5 from rahsheen/migrate-to-hooks

Migrate to hooks

demo/src/index.js

@@ -1,6 +1,6 @@
-import React, { Component } from "react";
-import { render } from "react-dom";
-import Wizard from "../../src/";
+import React, { Component } from "react"
+import { render } from "react-dom"
+import { Wizard } from "../../src/"
 
 class Demo extends Component {
   render() {
@@ -9,38 +9,38 @@ class Demo extends Component {
         <h1>@rahsheen/React-Wizard Demo</h1>
         <Wizard>
           <Wizard.Step>
-            {({ nextStep, prevStep }) => {
+            {({ nextStep, prevStep, currentIndex }) => {
               return (
                 <div>
-                  <h2>Foo</h2>
+                  <h2>Foo {currentIndex}</h2>
                   <button onClick={prevStep}>Back</button>
                   <button onClick={nextStep}>Next</button>
                 </div>
-              );
+              )
             }}
           </Wizard.Step>
           <Wizard.Step>
-            {({ nextStep, prevStep }) => (
+            {({ nextStep, prevStep, currentIndex }) => (
               <div>
-                <h2>Bar</h2>
+                <h2>Bar {currentIndex}</h2>
                 <button onClick={prevStep}>Back</button>
                 <button onClick={nextStep}>Next</button>
               </div>
             )}
           </Wizard.Step>
           <Wizard.Step>
-            {({ nextStep, prevStep }) => (
+            {({ nextStep, prevStep, currentIndex }) => (
               <div>
-                <h2>Baz</h2>
+                <h2>Baz {currentIndex}</h2>
                 <button onClick={prevStep}>Back</button>
                 <button onClick={nextStep}>Next</button>
               </div>
             )}
           </Wizard.Step>
         </Wizard>
       </div>
-    );
+    )
   }
 }
 
-render(<Demo />, document.querySelector("#demo"));
+render(<Demo />, document.querySelector("#demo"))

package.json

@@ -27,13 +27,13 @@
   },
   "devDependencies": {
     "nwb": "0.23.x",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
-    "semantic-release": "^15.9.16",
-    "travis-deploy-once": "^5.0.9"
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
+    "semantic-release": "^15.13.3",
+    "travis-deploy-once": "^5.0.11"
   },
-  "author": "",
-  "homepage": "",
+  "author": "Rahsheen A. Porter",
+  "homepage": "https://rporter.tech",
   "license": "MIT",
   "repository": {
     "type": "git",

src/Step.js

@@ -1,26 +1,9 @@
-import React, { PureComponent } from "react";
+import React, { PureComponent } from "react"
 
 export default class Step extends PureComponent {
   render() {
-    const {
-      children,
-      currentIndex,
-      isLast,
-      prevStep,
-      nextStep,
-      onChangeValue,
-      onSubmit,
-      values
-    } = this.props;
+    const { children, ...rest } = this.props
 
-    return children({
-      onChangeValue,
-      values,
-      prevStep,
-      nextStep,
-      currentIndex,
-      isLast,
-      onSubmit
-    });
+    return children({ ...rest })
   }
 }

src/Wizard.js

@@ -0,0 +1,43 @@
+import React from "react"
+import { Step, useWizard } from "."
+
+const Wizard = props => {
+  const { children, initialValues } = props
+
+  if (!children) return null
+
+  const {
+    nextStep,
+    prevStep,
+    index,
+    onChangeValue,
+    onSubmit,
+    values
+  } = useWizard({
+    initialValues,
+    size: children.length,
+    onSubmit: props.onSubmit
+  })
+
+  const enabledSteps = React.Children.toArray(children).filter(
+    child => !child.props.disabled
+  )
+
+  let currentElement = enabledSteps[index]
+
+  return Boolean(currentElement)
+    ? React.cloneElement(currentElement, {
+        currentIndex: index,
+        prevStep,
+        nextStep,
+        onChangeValue,
+        onSubmit,
+        values,
+        isLast: index === children.length - 1
+      })
+    : null
+}
+
+Wizard.Step = props => <Step {...props} />
+
+export default Wizard

src/index.js

@@ -1,65 +1,5 @@
-import React, { PureComponent } from "react";
-import Step from "./Step";
+import useWizard from "./useWizard"
+import Wizard from "./Wizard"
+import Step from "./Step"
 
-class Wizard extends PureComponent {
-  static Step = props => <Step {...props} />;
-  state = {
-    index: 0,
-    values: {
-      ...this.props.initialValues
-    }
-  };
-
-  _prevStep = () => {
-    if (this.state.index <= 0) return;
-    this.setState(prevState => ({
-      index: prevState.index - 1
-    }));
-  };
-
-  _nextStep = () => {
-    if (this.state.index >= this.props.children.length - 1) {
-      return;
-    }
-
-    this.setState(prevState => ({
-      index: prevState.index + 1
-    }));
-  };
-
-  _onChangeValue = (name, value) => {
-    this.setState(prevState => ({
-      values: {
-        ...prevState.values,
-        [name]: value
-      }
-    }));
-  };
-
-  _onSubmit = () => {
-    this.props.onSubmit(this.state.values);
-  };
-
-  render() {
-    const { children } = this.props;
-    const enabledSteps = React.Children.toArray(children).filter(
-      child => !child.props.disabled
-    );
-
-    return enabledSteps.map((c, i) => {
-      return i === this.state.index
-        ? React.cloneElement(c, {
-            currentIndex: this.state.index,
-            prevStep: this._prevStep,
-            nextStep: this._nextStep,
-            onChangeValue: this._onChangeValue,
-            onSubmit: this._onSubmit,
-            isLast: this.state.index === this.props.children.length - 1,
-            values: this.state.values
-          })
-        : null;
-    });
-  }
-}
-
-export default Wizard;
+export { Wizard, useWizard, Step }

src/useWizard.js

@@ -0,0 +1,42 @@
+import { useState } from "react"
+
+function useWizard({
+  initialValues = {},
+  size = 2,
+  onSubmit: onSubmitWizard = () => {}
+} = {}) {
+  const [index, setIndex] = useState(0)
+  const [values, setValues] = useState({ ...initialValues })
+
+  const onSubmit = () => {
+    onSubmitWizard(values)
+  }
+
+  const prevStep = () => {
+    if (index <= 0) return
+    setIndex(index - 1)
+  }
+
+  const nextStep = () => {
+    if (index >= size - 1) return
+    setIndex(index + 1)
+  }
+
+  const onChangeValue = (name, value) => {
+    setValues({
+      ...values,
+      [name]: value
+    })
+  }
+
+  return {
+    nextStep,
+    prevStep,
+    index,
+    onChangeValue,
+    onSubmit,
+    values
+  }
+}
+
+export default useWizard

tests/Wizard-test.js

@@ -0,0 +1,47 @@
+import expect from "expect"
+import React from "react"
+import { render, unmountComponentAtNode } from "react-dom"
+
+import { Wizard } from "src/"
+
+describe("Wizard", () => {
+  let node
+
+  beforeEach(() => {
+    node = document.createElement("div")
+  })
+
+  afterEach(() => {
+    unmountComponentAtNode(node)
+  })
+
+  it("displays a welcome message", () => {
+    render(
+      <Wizard>
+        <Wizard.Step>{() => <h2>>@rahsheen/React-Wizard</h2>}</Wizard.Step>
+      </Wizard>,
+      node,
+      () => {
+        expect(node.innerHTML).toContain("React-Wizard")
+      }
+    )
+  })
+
+  it("does not render without children", () => {
+    render(<Wizard />, node, () => {
+      expect(node.children.length).toBe(0)
+    })
+  })
+
+  it("does not render future steps", () => {
+    const structure = (
+      <Wizard>
+        <Wizard.Step>{() => <h2>>@rahsheen/React-Wizard</h2>}</Wizard.Step>
+        <Wizard.Step>{() => <h2>Step 2</h2>}</Wizard.Step>
+      </Wizard>
+    )
+    render(structure, node, () => {
+      expect(node.innerHTML).toNotContain("Step 2")
+    })
+  })
+})