All files / components/steps index.js

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react'
import PropTypes from 'prop-types'
import StyledSteps from './styledSteps'
 
class Steps extends React.Component {
 
  constructor(props) {
    super(props)
    this.state = { selected: props.selected }
  }
 
  componentWillReceiveProps(nextProps) {
    if (nextProps.selected !== this.props.selected) {
      this.setState({
        selected: nextProps.selected,
      })
    }
  }
 
  handleClick(index, event) {
    event.preventDefault()
 
    if(this.props.blockedSteps === false) {
      this.props.onChangeStep && this.props.onChangeStep(index);
      this.setState({
        selected: index,
      })
    }
  }
 
  _renderTitles() {
    const children = React.Children.toArray(this.props.children)
 
    return (
      <ul className="steps__labels">
        {children.map((child, indexChildren) => {
          const activeClass = (this.state.selected === indexChildren ? 'active' : '')
          const completedClass = (child.props.completed === true ? 'completed ' : '')
          return (
            <li key={indexChildren} className={`${completedClass} ${activeClass}`}>
              <a className="steps__labels__link"
                href="#"
                 onClick={this.handleClick.bind(this, indexChildren)}
              >
                {
                  child.props.icon &&
                  <img className="steps__labels__link__image" src={child.props.icon} alt={child.props.label} />
                }
                <div className="numberTab">{indexChildren+1}</div>
                <p className="labelTab">{child.props.label}</p>
              </a>
            </li>
          );
        })}
      </ul>
    );
  }
 
  _renderContent () {
    const children = React.Children.toArray(this.props.children)
 
    return (
      <div className="steps__content">
        {children[this.state.selected]}
      </div>
    );
  }
 
  render () {
    return (
    <StyledSteps blockedSteps={this.props.blockedSteps} offsetTop={this.props.offsetTop}>
      <div className="steps">
        {this._renderTitles()}
        {this._renderContent()}
      </div>
    </StyledSteps>
    );
  }
}
 
Steps.propTypes = {
  selected: PropTypes.number,
  offsetTop: PropTypes.string,
  blockedSteps: PropTypes.bool,
  children: PropTypes.oneOfType([
    PropTypes.array,
    PropTypes.element
  ]).isRequired,
  onChangeStep: PropTypes.func
}
 
Steps.defaultProps = {
    selected: 0,
    offsetTop: '150px',
    blockedSteps: false
}
 
 
export default Steps