-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Stepper] Add new component #3132
Merged
Merged
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
132 changes: 132 additions & 0 deletions
132
docs/src/app/components/pages/components/Stepper/HorizontalLinearStepper.jsx
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 |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| import React from 'react'; | ||
|
|
||
| import Stepper from 'material-ui/lib/Stepper/Stepper'; | ||
| import Step from 'material-ui/Stepper/HorizontalStep'; | ||
|
|
||
| import Paper from 'material-ui/lib/paper'; | ||
| import FontIcon from 'material-ui/lib/font-icon'; | ||
| import RaisedButton from 'material-ui/lib/raised-button'; | ||
| import FlatButton from 'material-ui/lib/flat-button'; | ||
|
|
||
| const HorizontalStepper = React.createClass({ | ||
| getInitialState() { | ||
| return { | ||
| activeStepIndex: -1, | ||
| lastActiveStepIndex: 0, | ||
| }; | ||
| }, | ||
|
|
||
| selectStep(stepIndex) { | ||
| const { | ||
| lastActiveStepIndex, | ||
| activeStepIndex, | ||
|
|
||
| } = this.state; | ||
|
|
||
| if (stepIndex > lastActiveStepIndex) { | ||
| return; | ||
| } | ||
|
|
||
| this.setState({ | ||
| activeStepIndex: stepIndex, | ||
| lastActiveStepIndex: Math.max(lastActiveStepIndex, activeStepIndex), | ||
| }); | ||
| }, | ||
|
|
||
| updateCompletedSteps(stepIndex) { | ||
| return stepIndex < this.state.lastActiveStepIndex; | ||
| }, | ||
|
|
||
| createIcon(step) { | ||
| if (step.props.isCompleted) { | ||
| return ( | ||
| <FontIcon className="material-icons" style={{fontSize: 14}}> | ||
| done | ||
| </FontIcon> | ||
| ); | ||
| } | ||
|
|
||
| return <span>{step.props.orderStepLabel}</span>; | ||
| }, | ||
|
|
||
| continue() { | ||
| const { | ||
| activeStepIndex, | ||
| lastActiveStepIndex, | ||
| } = this.state; | ||
|
|
||
| this.setState({ | ||
| activeStepIndex: activeStepIndex + 1, | ||
| lastActiveStepIndex: Math.max(lastActiveStepIndex, activeStepIndex + 1), | ||
| }); | ||
| }, | ||
|
|
||
| render() { | ||
| return ( | ||
| <Paper style={{width: 500, margin: 'auto'}}> | ||
| <div style={{ | ||
| textAlign: 'center', | ||
| padding: 10, | ||
| fontSize: 20, | ||
| }} | ||
| > | ||
| How to say goodbye to your 'css' | ||
| </div> | ||
| <Stepper | ||
| horizontal={true} | ||
| activeStepIndex={this.state.activeStepIndex} | ||
| onStepHeaderTouch={this.selectStep} | ||
| updateCompletedStatusOfStep={this.updateCompletedSteps} | ||
| createIcon={this.createIcon} | ||
| > | ||
| <Step | ||
| orderStepLabel="1" | ||
| stepLabel="Spending all your time on coding" | ||
| controlButtonsGroup={[ | ||
| <RaisedButton key={0} label="Continue" primary={true} | ||
| onClick={this.continue} | ||
| />, | ||
| <FlatButton key={1} label="Cancel" />, | ||
| ]} | ||
| > | ||
| <div style={{padding: 20}}> | ||
| Don't take your time on your 'css'. And then you will see what will happen. | ||
| </div> | ||
| </Step> | ||
| <Step | ||
| orderStepLabel="2" | ||
| stepLabel="Be poor 'programmer' with your 'css'" | ||
| controlButtonsGroup={[ | ||
| <RaisedButton key={0} label="Continue" primary={true} | ||
| onClick={this.continue} | ||
| />, | ||
| <FlatButton key={1} label="Cancel" />, | ||
| ]} | ||
| > | ||
| <div style={{padding: 20}}> | ||
| You don't update your knowledge and you will be out of date. You no longer understand | ||
| your 'css'. Then you will see what will happen | ||
| </div> | ||
| </Step> | ||
|
|
||
| <Step | ||
| orderStepLabel="3" | ||
| stepLabel="Say goodbye" | ||
| controlButtonsGroup={[ | ||
| <RaisedButton key={0} label="Finish" primary={true} | ||
| onClick={this.continue} | ||
| />, | ||
| <FlatButton key={1} label="Cancel" />, | ||
| ]} | ||
| > | ||
| <div style={{padding: 20}}> | ||
| Good bye | ||
| </div> | ||
| </Step> | ||
| </Stepper> | ||
| </Paper> | ||
| ); | ||
| }, | ||
| }); | ||
|
|
||
| export default HorizontalStepper; |
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 |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import React from 'react'; | ||
|
|
||
| import CodeExample from '../../../CodeExample'; | ||
| import PropTypeDescription from '../../../PropTypeDescription'; | ||
| import MarkdownElement from '../../../MarkdownElement'; | ||
|
|
||
| import stepperReadmeText from './README'; | ||
|
|
||
| import VerticalLinearStepper from './VerticalLinearStepper'; | ||
| import VerticalNonLinearStepper from './VerticalNonLinearStepper'; | ||
| import VerticalLinearStepperWithOptionalStep from './VerticalLinearStepperWithOptionalStep'; | ||
| import VerticalLinearStepperCode from '!raw!./VerticalLinearStepper'; | ||
| import VerticalLinearStepperWithOptionalStepCode from '!raw!./VerticalLinearStepperWithOptionalStep'; | ||
| import VerticalNonLinearStepperCode from '!raw!./VerticalNonLinearStepper'; | ||
|
|
||
| import HorizontalLinearStepper from './HorizontalLinearStepper'; | ||
| import HorizontalLinearStepperCode from '!raw!./HorizontalLinearStepper'; | ||
|
|
||
| import stepperCode from '!raw!material-ui/lib/Stepper/Stepper'; | ||
| import verticalStepCode from '!raw!material-ui/lib/Stepper/VerticalStep'; | ||
| import horizontalStepCode from '!raw!material-ui/lib/Stepper/HorizontalStep'; | ||
|
|
||
|
|
||
| const descriptions = { | ||
| verticalLinearStepper: 'As for the vertical linear stepper, it requires steps be completed in specific order', | ||
| verticalLinearStepperWithOptionalStep: 'Set the `optional` property to `true` for optional steps.' | ||
| + 'Pass a custom label view through `stepLabel` property to show' | ||
| + ' the difference between optional step and normal step.', | ||
| verticalNonLinearStepper: 'As for the vertical non linear stepper, steps can be completed in any order.', | ||
| horizontalLinearStepper: 'As for the horizontal linear stepper, it is the same with vertical linear stepper.', | ||
| }; | ||
|
|
||
|
|
||
| const styles = { | ||
| stepperWrapper: { | ||
| marginBottom: 50, | ||
| }, | ||
| }; | ||
|
|
||
| const StepperPage = () => ( | ||
| <div> | ||
| <MarkdownElement text={stepperReadmeText} /> | ||
| <CodeExample | ||
| title="Vertical linear step example" | ||
| description={descriptions.verticalLinearStepper} | ||
| code={VerticalLinearStepperCode} | ||
| > | ||
| <div style={styles.stepperWrapper}> | ||
| <VerticalLinearStepper /> | ||
| </div> | ||
| </CodeExample> | ||
|
|
||
| <CodeExample | ||
| title="Optional step example" | ||
| description={descriptions.verticalLinearStepperWithOptionalStep} | ||
| code={VerticalLinearStepperWithOptionalStepCode} | ||
| > | ||
| <div style={styles.stepperWrapper}> | ||
| <VerticalLinearStepperWithOptionalStep /> | ||
| </div> | ||
| </CodeExample> | ||
|
|
||
| <CodeExample | ||
| title="Non linear example" | ||
| description={descriptions.verticalNonLinearStepper} | ||
| code={VerticalNonLinearStepperCode} | ||
| > | ||
| <div style={styles.stepperWrapper}> | ||
| <VerticalNonLinearStepper /> | ||
| </div> | ||
| </CodeExample> | ||
|
|
||
| <CodeExample | ||
| title="Horizontal linear step example" | ||
| description={descriptions.horizontalLinearStepper} | ||
| code={HorizontalLinearStepperCode} | ||
| > | ||
| <div style={styles.stepperWrapper}> | ||
| <HorizontalLinearStepper /> | ||
| </div> | ||
| </CodeExample> | ||
|
|
||
| <PropTypeDescription code={stepperCode} /> | ||
| <PropTypeDescription code={verticalStepCode} /> | ||
| <PropTypeDescription code={horizontalStepCode} /> | ||
| </div> | ||
| ); | ||
|
|
||
| export default StepperPage; |
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 |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| ## Stepper | ||
| A [stepper](https://www.google.com/design/spec/components/steppers.html) | ||
| is an interface for users to show numbered steps or for navigation. It just provides | ||
| views, not handling logic (when the step is active, or when the step is completed, or how to move | ||
| to the next step). We delegate that to the parent component. We just pass `activeStepIndex` | ||
| to show which step is active. | ||
| ### Examples |
137 changes: 137 additions & 0 deletions
137
docs/src/app/components/pages/components/Stepper/VerticalLinearStepper.jsx
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 |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| import React from 'react'; | ||
|
|
||
| import Stepper from 'material-ui/lib/Stepper/Stepper'; | ||
| import Step from 'material-ui/Stepper/VerticalStep'; | ||
|
|
||
| import Paper from 'material-ui/lib/paper'; | ||
| import FontIcon from 'material-ui/lib/font-icon'; | ||
| import RaisedButton from 'material-ui/lib/raised-button'; | ||
| import FlatButton from 'material-ui/lib/flat-button'; | ||
|
|
||
| const VerticalLinearStepper = React.createClass({ | ||
| getInitialState() { | ||
| return { | ||
| activeStepIndex: -1, | ||
| lastActiveStepIndex: 0, | ||
| }; | ||
| }, | ||
|
|
||
| selectStep(stepIndex) { | ||
| const { | ||
| lastActiveStepIndex, | ||
| activeStepIndex, | ||
|
|
||
| } = this.state; | ||
|
|
||
| if (stepIndex > lastActiveStepIndex) { | ||
| return; | ||
| } | ||
|
|
||
| this.setState({ | ||
| activeStepIndex: stepIndex, | ||
| lastActiveStepIndex: Math.max(lastActiveStepIndex, activeStepIndex), | ||
| }); | ||
| }, | ||
|
|
||
| updateCompletedSteps(stepIndex) { | ||
| return stepIndex < this.state.lastActiveStepIndex; | ||
| }, | ||
|
|
||
| continue() { | ||
| const { | ||
| activeStepIndex, | ||
| lastActiveStepIndex, | ||
| } = this.state; | ||
|
|
||
| this.setState({ | ||
| activeStepIndex: activeStepIndex + 1, | ||
| lastActiveStepIndex: Math.max(lastActiveStepIndex, activeStepIndex + 1), | ||
| }); | ||
| }, | ||
|
|
||
| createIcon(step) { | ||
| if (step.props.isCompleted) { | ||
| return ( | ||
| <FontIcon className="material-icons" style={{fontSize: 14}}> | ||
| done | ||
| </FontIcon> | ||
| ); | ||
| } | ||
|
|
||
| return <span>{step.props.orderStepLabel}</span>; | ||
| }, | ||
|
|
||
| render() { | ||
| return ( | ||
| <Paper style={{width: 500, margin: 'auto'}}> | ||
| <div style={{ | ||
| textAlign: 'center', | ||
| padding: 10, | ||
| fontSize: 20, | ||
| }} | ||
| > | ||
| How to find the real "css" of your life | ||
| </div> | ||
| <Stepper | ||
| activeStepIndex={this.state.activeStepIndex} | ||
| onStepHeaderTouch={this.selectStep} | ||
| updateCompletedStatusOfStep={this.updateCompletedSteps} | ||
| createIcon={this.createIcon} | ||
| > | ||
| <Step | ||
| orderStepLabel="1" | ||
| stepLabel="Stop coding" | ||
| controlButtonsGroup={[ | ||
| <RaisedButton key={0} label="Continue" primary={true} | ||
| onClick={this.continue} | ||
| />, | ||
| <FlatButton key={1} label="Cancel" />, | ||
| ]} | ||
| > | ||
| <div> | ||
| If you code everyday, you may just know css for web not for your life. | ||
| So stoping coding first.<br></br> | ||
| If you agree, let 's press Continue | ||
| </div> | ||
| </Step> | ||
| <Step | ||
| orderStepLabel="2" | ||
| stepLabel="Get away your computer" | ||
| controlButtonsGroup={[ | ||
| <RaisedButton key={0} label="Continue" primary={true} | ||
| onClick={this.continue} | ||
| />, | ||
| <FlatButton key={1} label="Cancel" />, | ||
| ]} | ||
| > | ||
| <div> | ||
| The important thing is getting away your computer. If you follow | ||
| the step 1, but you should still sit in front of the computer, you | ||
| can't find <i>destination css</i> for your life. <br></br> | ||
| So if you agree, let's press continue | ||
| </div> | ||
| </Step> | ||
|
|
||
| <Step | ||
| orderStepLabel="3" | ||
| stepLabel="Finally, go out and start a new journey" | ||
| controlButtonsGroup={[ | ||
| <RaisedButton key={0} label="Finish" primary={true} | ||
| onClick={this.continue} | ||
| />, | ||
| <FlatButton key={1} label="Cancel" />, | ||
| ]} | ||
| > | ||
| <div style={{height: 50}}> | ||
| Start your new journey in real life and find your real "css" for your | ||
| life. Hope you find out soon. | ||
| Press Finish if you find out. | ||
| </div> | ||
| </Step> | ||
| </Stepper> | ||
| </Paper> | ||
| ); | ||
| }, | ||
| }); | ||
|
|
||
| export default VerticalLinearStepper; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we use ES6 classes?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let me change it 👍 It will be shorter