import React from "react"; import ReactDOM from "react-dom"; import { Form, Label, Input, Button } from "semantic-ui-react"; /////////////////////////////////////////////////////////////////////////////// class FormWizard extends React.Component { constructor(props) { super(props); this.state = { activeStepIndex: 0 }; } getTotalSteps = children => { let totalSteps = 0; for (let child of children) { if (child.type.name === "StepList") { totalSteps = child.props.children.length - 1; } } this.setState({ totalSteps: totalSteps }); }; submitHandler = () => { alert("Form submitted!"); }; componentDidMount() { this.getTotalSteps(this.props.children); } render() { const children = React.Children.map(this.props.children, child => { if (child.type.name === "StepList") { return React.cloneElement(child, { activeStepIndex: this.state.activeStepIndex }); } else if (child.type.name === "ButtonList") { return React.cloneElement(child, { activeStepIndex: this.state.activeStepIndex, totalSteps: this.state.totalSteps, handleSubmit: () => this.submitHandler(), onNextStep: () => { this.setState({ activeStepIndex: this.state.activeStepIndex + 1 }); }, onPreviousStep: () => { this.setState({ activeStepIndex: this.state.activeStepIndex - 1 }); } }); } else { return child; } }); return ; } } ////////////////////////////////////////////////////////////////////////////// class StepList extends React.Component { render() { const { activeStepIndex } = this.props; const children = React.Children.map(this.props.children, (child, index) => { return React.cloneElement(child, { isActive: index === activeStepIndex }); }); return children; } } class ButtonList extends React.Component { render() { const { activeStepIndex, totalSteps } = this.props; const children = React.Children.map(this.props.children, (child, index) => { if (child.type.name === "Previous") { return React.cloneElement(child, { isPreviousActive: activeStepIndex > 0 ? true : false, goToPreviousStep: () => this.props.onPreviousStep() }); } else if (child.type.name === "Next") { return React.cloneElement(child, { isNextActive: activeStepIndex < totalSteps ? true : false, goToNextStep: () => this.props.onNextStep() }); } else if (child.type.name === "Submit") { return React.cloneElement(child, { isLastStep: activeStepIndex == totalSteps, handleSubmit: () => this.props.handleSubmit() }); } }); return children; } } /////////////////////////////////////////////////////////////////////////////// const Step = props => { if (props.isActive) { return {props.render()}; } return null; }; const Previous = props => { if (props.isPreviousActive) { return ( ); } return null; }; const Next = props => { if (props.isNextActive) { return ( ); } return null; }; const Submit = props => { if (props.isLastStep) { return ( ); } return null; }; //////////////////////////////////////////////////////////////////////////////// const RegistrationFields = () => { return ( ); }; const BillingFields = () => { return ( ); }; const MailingFields = () => { return ( ); }; /////////////////////////////////////////////////////////////////////////////// class Demo extends React.Component { render() { return (

); } } export default Demo; ReactDOM.render(, document.getElementById("root"));

n4yl5n9vp0