{"size": 2623, "ext": "js", "max_stars_repo_path": "app/containers/SelectNumber/index.js", "max_stars_repo_name": "Princess310/antd-demo", "max_stars_repo_stars_event_min_datetime": "2017-06-07T07:20:33.000Z", "max_stars_repo_stars_event_max_datetime": "2020-08-03T07:03:42.000Z", "max_issues_repo_path": "app/containers/SelectNumber/index.js", "max_issues_repo_name": "Princess310/antd-demo", "max_issues_repo_issues_event_min_datetime": "2019-07-27T09:08:10.000Z", "max_issues_repo_issues_event_max_datetime": "2019-07-27T09:08:10.000Z", "max_forks_repo_path": "app/containers/SelectNumber/index.js", "max_forks_repo_name": "Princess310/antd-demo", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 3, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 24.980952381, "max_line_length": 131, "alphanum_fraction": 0.6309569196}
/*
 *
 * SelectNumber
 *
 * path --> selectNumber
 */

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import pallete from 'styles/colors';
import { browserHistory } from 'react-router';

import { NavBar, Icon, Accordion, List, Radio } from 'antd-mobile';

import { loadPublishParams, fetchBusinessNumber } from 'containers/BusinessPage/actions';
import { makeSelectPublishParams, makeSelectBusinessNumber } from 'containers/BusinessPage/selectors';

const RadioItem = Radio.RadioItem;
export class SelectNumber extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    const { publishParams } = this.props;

    this.state = {
      selected: publishParams.number ? publishParams.number : {},
    };
  }

  componentWillMount() {
    const { numberList, getNumber } = this.props;

    if (!numberList) {
      getNumber();
    }
  }

  handleSelect = (item) => {
    this.props.setNumber({
      number: item,
    });
    browserHistory.goBack();
  }

  render() {
    const { selected } = this.state;
    const { numberList } = this.props;
    return (
      <div>
        <NavBar
          mode="light"
          iconName={false}
          leftContent={<Icon type={require('icons/ali/返回.svg')} size="sm" color={pallete.theme} />}
          onLeftClick={() => browserHistory.goBack()}
        >
          选择需求数量
        </NavBar>
        <List>
          {numberList && numberList.map((i, index) => (
            <RadioItem key={i.id} checked={selected.id ? selected.id === i.id : index === 0} onChange={() => this.handleSelect(i)}>
              {i.value === '' ? i.unit : i.value}
            </RadioItem>
          ))}
        </List>
      </div>
    );
  }
}

SelectNumber.propTypes = {
  /**
   * action: get the number info from backend
   */
  getNumber: PropTypes.func,
  /**
   * action: set the number for reducer
   */
  setNumber: PropTypes.func,
  /**
   * reducer: the publish params
   */
  publishParams: PropTypes.object,
  /**
   * reducer: the number list
   */
  numberList: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.array,
  ]),
};

const mapStateToProps = createStructuredSelector({
  numberList: makeSelectBusinessNumber(),
  publishParams: makeSelectPublishParams(),
});

function mapDispatchToProps(dispatch) {
  return {
    getNumber: () => dispatch(fetchBusinessNumber()),
    setNumber: (params) => dispatch(loadPublishParams(params)),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(SelectNumber);
