All files / src/components/Step Step.react.js

100% Statements 14/14
75% Branches 6/8
100% Functions 4/4
100% Lines 14/14

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;