Step components added and changing between them

Author: hazzo

.idea/workspace.xml

@@ -8,7 +8,8 @@
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "react-scripts": "1.0.17"
+    "react-scripts": "1.0.17",
+    "react-transition-group": "^2.2.1"
   },
   "scripts": {
     "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",

package-lock.json

@@ -5,7 +5,7 @@ import 'bootstrap/dist/css/bootstrap.css';
 
 import '../publish_component/Stepper'
 import Stepper from '../publish_component/Stepper';
-import DummyData from '../publish_component/DummyData'
+import DummyData from './DummyData'
 
 class App extends Component {
     constructor(props) {
@@ -19,8 +19,8 @@ class App extends Component {
     render() {
         return (
             <div className="container-fluid App no-gutters">
-                <div className="row" style={{marginBottom: '2rem'}}>
-                    <div className="col no-gutters">
+                <div className="row no-gutters" style={{marginBottom: '2rem'}}>
+                    <div className="col">
                         <header className="App-header">
                             <img src={logo} className="App-logo" alt="logo"/>
                             <h1 className="App-title">Welcome to React</h1>

package.json

@@ -1,18 +1,20 @@
-
-
+import StepOne from './StepOne'
+import StepTwo from './StepTwo'
 
 export default [
     {
         icon: 'mail',
         name: 'first',
         title: 'Sample title 1',
-        subtitle: 'Subtitle sample'
+        subtitle: 'Subtitle sample',
+        component: StepOne
 
     },
     {
         icon: 'report_problem',
         name: 'second',
         title: 'Sample title 2',
-        subtitle: 'Subtitle sample'
+        subtitle: 'Subtitle sample',
+        component: StepTwo
     }
 ]

src/demo/App.js

@@ -0,0 +1,28 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+
+class StepOne extends Component {
+    render() {
+        return (
+            <div style={{padding: '2rem 3rem', textAlign: 'left'}}>
+                <div className="form-group">
+                    <label>Email address</label>
+                    <input type="email" className="form-control" placeholder="Enter email"/>
+                    <small className="form-text text-muted">We'll never share your email with anyone else.</small>
+                </div>
+                <div className="form-group">
+                    <label>Password</label>
+                    <input type="password" className="form-control" placeholder="Password"/>
+                </div>
+                <div className="form-check">
+                    <label className="form-check-label">
+                        <input type="checkbox" className="form-check-input"/>
+                        Check me out
+                    </label>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default StepOne

src/publish_component/DummyData.js renamed to src/demo/DummyData.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+
+class StepTwo extends Component {
+    render() {
+        return (
+            <div style={{padding: '2rem 3rem', textAlign: 'left'}}>
+                TEST
+            </div>
+        )
+    }
+}
+
+export default StepTwo

src/demo/StepOne.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import { CSSTransition } from 'react-transition-group'
 
 //Styles
 import './Stepper.css'
@@ -18,11 +19,79 @@ class Stepper extends Component {
             previousStep: {},
             nextButton: {},
             canContinue: false,
-            finalStep: false
+            finalStep: false,
+            transition: false
+        };
+
+        // Binding Methods
+        this.activateStep = this.activateStep.bind(this);
+        this.nextStep = this.nextStep.bind(this);
+        this.backStep = this.backStep.bind(this);
+    }
+
+    activateStep(index, back = false) {
+        if (this.props.steps[index]) {
+            // Setting states
+            this.setState((prevState, props) => ({
+                previousStep: prevState.currentStep,
+                currentStep: {
+                    name: props.steps[index].name,
+                    index: index
+                }
+            }));
+
+            if (index + 1 === this.props.steps.length) {
+                this.setState({finalStep: true})
+            } else {
+                this.setState({finalStep: false})
+            }
+
+            if (!back) {
+                // this.$emit('completed-step', this.previousStep);
+            }
         }
+        // this.$emit('active-step', this.currentStep);
+    }
+
+    nextStep() {
+        if (this.state.canContinue) {
+            if (this.state.finalStep) {
+                // this.$emit('stepper-finished', this.currentStep);
+            }
+            let currentIndex = this.state.currentStep.index + 1;
+            this.activateStep(currentIndex);
+
+        }
+        this.setState((prevState) => ({
+            nextButton: {[prevState.currentStep.name]: true},
+            canContinue: false
+        }));
+        this.forceUpdate();
+    }
+
+    backStep() {
+        // this.$emit('clicking-back');
+        let currentIndex = this.state.currentStep.index - 1;
+        if (currentIndex >= 0) {
+            this.activateStep(currentIndex, true);
+        }
+    }
+
+    componentWillMount() {
+        // Initiate stepper
+        this.activateStep(0);
+        this.props.steps.forEach((step) => {
+            this.setState({
+                nextButton: {[step.name]: false}
+            })
+        });
     }
 
     render() {
+
+        // Store component in variable
+        const StepComponent = this.props.steps[this.state.currentStep.index].component;
+
         return (
             <div className="stepper-box">
                 <div className="top">
@@ -34,9 +103,9 @@ class Stepper extends Component {
                                     currentIndex={this.state.currentStep.index}/>
 
                         {/*Loops through indicator to show based on step amount*/}
-                        {this.props.steps.map( (step, index, array) =>
+                        {this.props.steps.map((step, index, array) =>
                             <StepIndicator step={step} index={index} stepsLength={array.length}
-                                           currentStep={this.state.currentStep}/>
+                                           currentStep={this.state.currentStep} key={step.name}/>
                         )}
 
                         <TopButtons show={this.props.topButtons} previous={false}
@@ -45,7 +114,25 @@ class Stepper extends Component {
                 </div>
 
                 <div className="content">
+                    <CSSTransition in={this.state.transition}>
+                        <StepComponent/>
+                    </CSSTransition>
+                </div>
 
+
+                <div className={['bottom', (this.state.currentStep.index > 0) ? '' : 'only-next'].join(' ')}>
+                    {this.state.currentStep.index > 0 && (
+                        <div className="stepper-button previous" onClick={this.backStep}>
+                            <i className="material-icons">keyboard_arrow_left</i>
+                            <span>Back</span>
+                        </div>
+                    )}
+                    <div className={['stepper-button next', !this.state.canContinue ? 'deactivated' : ''].join(' ')}
+                         onClick={this.nextStep}
+                    >
+                        <span>Next</span>
+                        <i className="material-icons">keyboard_arrow_right</i>
+                    </div>
                 </div>
             </div>
         )

src/demo/StepTwo.js

@@ -6,7 +6,7 @@ class TopButtons extends Component {
         // Render if current step index > 0
         let topButton = null;
         if (this.props.show) {
-            if(this.props.previous) {
+            if (this.props.previous) {
                 if (this.props.currentIndex > 0) {
                     topButton =
                         <div className={['stepper-button-top', this.props.previous ? 'previous' : 'next'].join(' ')}>