forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Stepper] Refactor Stepper to address mui#3725
- Loading branch information
1 parent
887297d
commit 3348130
Showing
22 changed files
with
1,152 additions
and
1,102 deletions.
There are no files selected for viewing
182 changes: 63 additions & 119 deletions
182
docs/src/app/components/pages/components/Stepper/HorizontalLinearStepper.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,138 +1,82 @@ | ||
| import React from 'react'; | ||
| import Stepper from 'material-ui/Stepper'; | ||
| import Step from 'material-ui/Stepper/HorizontalStep'; | ||
| import Paper from 'material-ui/Paper'; | ||
| import FontIcon from 'material-ui/FontIcon'; | ||
| import { | ||
| Step, | ||
| Stepper, | ||
| StepButton, | ||
| StepLabel, | ||
| } from 'material-ui/Stepper'; | ||
| // import FontIcon from 'material-ui/FontIcon'; | ||
| import RaisedButton from 'material-ui/RaisedButton'; | ||
| import FlatButton from 'material-ui/FlatButton'; | ||
|
|
||
| const HorizontalStepper = React.createClass({ | ||
| getInitialState() { | ||
| return { | ||
| activeStep: -1, | ||
| lastActiveStep: 0, | ||
| }; | ||
| }, | ||
| class HorizontalLinearStepper extends React.Component { | ||
|
|
||
| handleStepHeaderTouch(currentStep) { | ||
| const { | ||
| lastActiveStep, | ||
| activeStep, | ||
| state = { | ||
| stepIndex: 1, | ||
| }; | ||
|
|
||
| } = this.state; | ||
|
|
||
| if (currentStep > lastActiveStep) { | ||
| return; | ||
| handleNext = () => { | ||
| const {stepIndex} = this.state; | ||
| if (stepIndex < 2) { | ||
| this.setState({stepIndex: stepIndex + 1}); | ||
| } | ||
| }; | ||
|
|
||
| this.setState({ | ||
| activeStep: currentStep, | ||
| lastActiveStep: Math.max(lastActiveStep, activeStep), | ||
| }); | ||
| }, | ||
|
|
||
| updateCompletedSteps(currentStep) { | ||
| return currentStep < this.state.lastActiveStep; | ||
| }, | ||
|
|
||
| createIcon(step) { | ||
| if (step.props.isCompleted) { | ||
| return ( | ||
| <FontIcon className="material-icons" style={{fontSize: 14}}> | ||
| done | ||
| </FontIcon> | ||
| ); | ||
| handlePrev = () => { | ||
| const {stepIndex} = this.state; | ||
| if (stepIndex > 0) { | ||
| this.setState({stepIndex: stepIndex - 1}); | ||
| } | ||
| }; | ||
|
|
||
| return <span>{step.props.orderStepLabel}</span>; | ||
| }, | ||
|
|
||
| handleTouchTap() { | ||
| const { | ||
| activeStep, | ||
| lastActiveStep, | ||
| } = this.state; | ||
|
|
||
| this.setState({ | ||
| activeStep: activeStep + 1, | ||
| lastActiveStep: Math.max(lastActiveStep, activeStep + 1), | ||
| }); | ||
| }, | ||
| getStepContent(stepIndex) { | ||
| switch (stepIndex) { | ||
| case 0: | ||
| return 'Select campaign settings...'; | ||
| case 1: | ||
| return 'What is an ad group anyways?'; | ||
| case 2: | ||
| return 'This is the bit I really care about!'; | ||
| default: | ||
| return 'You\'re a long way from home sonny jim!'; | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| const {stepIndex} = this.state; | ||
| const contentStyle = {margin: '0 16px'}; | ||
|
|
||
| return ( | ||
| <Paper style={{width: 500, margin: 'auto'}}> | ||
| <div style={{ | ||
| textAlign: 'center', | ||
| padding: 10, | ||
| fontSize: 20, | ||
| }} | ||
| > | ||
| Material-UI User Group Registration | ||
| </div> | ||
| <Stepper | ||
| horizontal={true} | ||
| activeStep={this.state.activeStep} | ||
| onStepHeaderTouch={this.handleStepHeaderTouch} | ||
| updateCompletedStatus={this.updateCompletedSteps} | ||
| createIcon={this.createIcon} | ||
| > | ||
| <Step | ||
| orderStepLabel="1" | ||
| stepLabel="User account" | ||
| actions={[ | ||
| <RaisedButton | ||
| key={0} | ||
| label="Continue" | ||
| primary={true} | ||
| onTouchTap={this.handleTouchTap} | ||
| />, | ||
| <FlatButton key={1} label="Cancel" />, | ||
| ]} | ||
| > | ||
| <div style={{padding: 20}}> | ||
| Please create an account, or login with your account details. | ||
| </div> | ||
| <div> | ||
| <Stepper activeStep={stepIndex}> | ||
| <Step> | ||
| <StepButton>Select campaign settings</StepButton> | ||
| </Step> | ||
| <Step | ||
| orderStepLabel="2" | ||
| stepLabel="Event registration" | ||
| actions={[ | ||
| <RaisedButton | ||
| key={0} | ||
| label="Continue" | ||
| primary={true} | ||
| onTouchTap={this.handleTouchTap} | ||
| />, | ||
| <FlatButton key={1} label="Cancel" />, | ||
| ]} | ||
| > | ||
| <div style={{padding: 20}}> | ||
| Please sign up for the event you wish to attend. | ||
| </div> | ||
| <Step> | ||
| <StepLabel>Create an ad group</StepLabel> | ||
| </Step> | ||
|
|
||
| <Step | ||
| orderStepLabel="3" | ||
| stepLabel="Payment" | ||
| actions={[ | ||
| <RaisedButton | ||
| key={0} | ||
| label="Finish" | ||
| primary={true} | ||
| onTouchTap={this.handleTouchTap} | ||
| />, | ||
| <FlatButton key={1} label="Cancel" />, | ||
| ]} | ||
| > | ||
| <div style={{padding: 20}}> | ||
| Please provide your credit card details. | ||
| </div> | ||
| <Step> | ||
| <StepButton>Create an ad</StepButton> | ||
| </Step> | ||
| </Stepper> | ||
| </Paper> | ||
| <div style={contentStyle}> | ||
| {this.getStepContent(stepIndex)} | ||
| <div style={{marginTop: 12}}> | ||
| <FlatButton | ||
| label="Back" | ||
| onTouchTap={this.handlePrev} | ||
| style={{marginRight: 12}} | ||
| /> | ||
| <RaisedButton | ||
| label="Next" | ||
| primary={true} | ||
| onTouchTap={this.handleNext} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }, | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| export default HorizontalStepper; | ||
| export default HorizontalLinearStepper; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.