import React, {PropTypes} from 'react'; import cx from 'classnames'; import s from './style.les'; class NewStepsBar extends React.Component { constructor(props) { super(props); this.state = {} } componentDidMount() { } componentWillReceiveProps(nextProps) { } componentWillUnmount() { } render() { /* * current number 0 <current < 步骤数目减一 * steps obj 父元素传过来的带有title属性的数组对象,形如: * const steps = [ {'title':'基础信息'}, {'title':'职位要求'}, {'title':'面试设置'}, {'title':'招聘专员设置'}, {'title':'发布'} ]; * * hasTitle bool 是否在滚动条下方显示title名称 * */ const {current, steps, hasTitle} = this.props; const len = Number(steps.length - 1); let percent = current == len ? '100%' : (Number(1 + current * 2) * 100) / (len * 2) + '%'; return ( <div style={{ padding: '40px 50px 40px', height: '40px', margin: '0', overflow: 'hidden', position: 'relative' }}> {/* 进度条*/} <div className={cx(s.step_line)} style={{ display: 'inline-block', width: '100%', height: '2px', backgroundColor: '#DBDBDB', boxSizing: 'border-box' }}> {/* 进度条覆盖*/} <div className={cx(s.step_line_upon)} style={{ display: 'inline-block', width: `${percent}`, transition: 'width .5s', height: '2px', backgroundColor: '#4880FF', position: 'relative', top: '-11px', boxSizing: 'border-box' }}> </div> </div> <div style={{ display: 'inline-block', width: `100%`, position: 'absolute', top: '0', left: '0', right: '0', zIndex: '20', height: '40px', boxSizing: 'border-box' }}> {steps.map((data, i)=> { return ( <div key={i}> {current >= i ? <span className={cx(s.stepProgress_box)} style={{ left: `${(Number(i * 2) * 100) / (len * 2) + '%'}`, marginLeft: `${i == 0 ? '50px' : (i == len&&i!=0? '-80px' : '0')}`, }}> {i + 1} <span style={{ position: 'absolute', overflowX: 'hidden', width: '200px', top: '30px', left: '-85px', color: '#4880FF', fontSize: '14px' }}> {hasTitle == true ? data.title : ''} </span> </span> : <span className={cx(s.stepWait_box)} style={{ left: `${(Number(i * 2) * 100) / (len * 2) + '%'}`, marginLeft: `${(i == len ? '-80px' : '0')}`, }}> {i + 1} <span style={{ position: 'absolute', overflowX: 'hidden', width: '200px', top: '30px', left: '-85px', fontSize: '14px' }}> {hasTitle == true ? data.title : ''} </span> </span> } </div> ) })} </div> </div> ) } } export default NewStepsBar;