Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | 1x 3x 3x 2x 1x 1x 1x 2x 1x 1x 1x 5x 5x 1x | // @flow import React, { Component } from 'react'; import { Step as MuiStep, StepLabel } from 'material-ui/Stepper'; import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import getMuiTheme from 'material-ui/styles/getMuiTheme'; type Props = { /** Sets the step as active */ active?: boolean, /** Mark the step as completed */ completed?: boolean, /** Step ID */ id: string, icon?: string | number, /** Dash callback to update props on the server */ setProps?: (props: { active?: boolean, completed?: boolean }) => void, /** The text to display for this step */ stepLabelText?: string, /** Override the inline-style of the root element */ style?: Object, }; type State = { active: boolean, completed: boolean, }; const defaultProps = { active: false, completed: false, icon: '', setProps: () => {}, stepLabelText: '', style: {}, }; export default class Step extends Component<Props, State> { constructor(props: Props) { super(props); this.state = { active: this.props.active, completed: this.props.completed, }; } componentWillReceiveProps(nextProps: Props): void { if (nextProps.completed !== this.state.completed) { this.setState({completed: nextProps.completed}); Eif (this.props.setProps) this.props.setProps({completed: nextProps.completed}); } if (nextProps.active !== this.state.active) { this.setState({active: nextProps.active}); Eif (this.props.setProps) this.props.setProps({active: nextProps.active}); } } render() { const { id, icon, stepLabelText, style } = this.props; return ( <div id={id}> <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}> <MuiStep active={this.state.active} completed={this.state.completed} > <StepLabel style={style} icon={icon}> {stepLabelText} </StepLabel> </MuiStep> </MuiThemeProvider> </div> ); } } Step.defaultProps = defaultProps; |