update: adjust stepper component to using material-ui v3

src/common/pages/Vouchers/Stepper/index.js

@@ -1,26 +1,40 @@
 import {inject, observer} from "mobx-react";
+import PropTypes from 'prop-types';
 import React from "react";
 import './style.scss';
-import {
-  Step,
-  Stepper,
-  StepLabel,
-} from 'material-ui/Stepper';
+import Button from '@material-ui/core/Button';
 import RaisedButton from 'material-ui/RaisedButton';
 import FlatButton from 'material-ui/FlatButton';
 import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
-import {Divider} from "material-ui";
+import {Divider} from "@material-ui/core";
 import CheckoutVouchers from "../Checkout";
 import PaymentVouchers from "../Payment";
 import {LINKS} from "../../../routes";
 import {notification, Modal} from "antd";
 import FinishVouchers from "../Finish";
+import { withStyles } from '@material-ui/core/styles';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
 
 const confirm = Modal.confirm;
 
+const styles = theme => ({
+  button: {
+    margin: theme.spacing.unit,
+  },
+  input: {
+    display: 'none',
+  },
+  divider: {
+    marginBottom: 10,
+    marginTop: 10,
+  }
+});
+
 @inject('appstate')
 @observer
-export default class VoucherStepperComponent extends React.Component {
+export class VoucherStepper extends React.Component {
 
   constructor(props) {
     super(props);
@@ -38,7 +52,7 @@ export default class VoucherStepperComponent extends React.Component {
   componentWillMount() {
     if(!this.vouchersStore.dataItems.name){
       // alert('jalan')
-      this.props.history.push(LINKS.VOUCHERS);
+      this.props.history.push(LINKS.DASHBOARD);
     }
     // alert('engga')
   }
@@ -94,19 +108,24 @@ export default class VoucherStepperComponent extends React.Component {
   };
 
   renderButton = () => {
+    const {classes} = this.props;
     return(
       <div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: 12,}}>
-        <FlatButton
-          label="Back"
-          disabled={this.state.stepIndex === 2}
-          onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev}
-          style={{marginRight: 12}}
-        />
-        <RaisedButton
-          label={this.state.stepIndex === 2 ? 'Finish' : 'Next'}
-          primary={true}
-          onClick={this.handleNext}
-        />
+        {/*<FlatButton*/}
+          {/*label="Back"*/}
+          {/*disabled={this.state.stepIndex === 2}*/}
+          {/*onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev}*/}
+          {/*style={{marginRight: 12}}*/}
+        {/*/>*/}
+        <Button disabled={this.state.stepIndex === 2} onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev} className={classes.button}>Back</Button>
+        <Button variant="contained" color="primary" className={classes.button} onClick={this.handleNext}>
+          {this.state.stepIndex === 2 ? 'Finish' : 'Next'}
+        </Button>
+        {/*<RaisedButton*/}
+          {/*label={this.state.stepIndex === 2 ? 'Finish' : 'Next'}*/}
+          {/*primary={true}*/}
+          {/*onClick={this.handleNext}*/}
+        {/*/>*/}
       </div>
     );
   };
@@ -126,6 +145,7 @@ export default class VoucherStepperComponent extends React.Component {
 
   render() {
     const {finished, stepIndex} = this.state;
+    const {classes} = this.props;
     const contentStyle = {margin: '0 16px'};
 
     if(!this.vouchersStore.dataItems.name){
@@ -158,25 +178,10 @@ export default class VoucherStepperComponent extends React.Component {
               <StepLabel>Finish</StepLabel>
             </Step>
           </Stepper>
-          <Divider style={{marginBottom:10,marginTop:10}} />
+          <Divider component="div" className={classes.divider} />
+          {/*<Divider style={{marginBottom:10,marginTop:10}} />*/}
           <div style={contentStyle}>
-            {finished ? (
-              <p>
-                <a
-                  href="#"
-                  onClick={(event) => {
-                    event.preventDefault();
-                    this.setState({stepIndex: 0, finished: false});
-                  }}
-                >
-                  Click here
-                </a> to reset the example.
-              </p>
-            ) : (
-              <div>
-                <p>{this.getStepContent(stepIndex)}</p>
-              </div>
-            )}
+            {this.getStepContent(stepIndex)}
           </div>
         </div>
       </div>
@@ -184,3 +189,9 @@ export default class VoucherStepperComponent extends React.Component {
   }
 
 }
+
+VoucherStepper.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(VoucherStepper);

src/common/pages/Vouchers/Stepper/style.scss

@@ -1,9 +1,13 @@
 .stepper{
   margin-top: 5vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  //background-color: #fff;
   .divider-container{
-    max-width: 65vw;
+    max-width: 75vw;
   }
   .stepper-container{
-    max-width: 65vw;
+    max-width: 75vw;
   }
 }