{"size": 2845, "ext": "js", "max_stars_repo_path": "src/components/datePicker/RangePicker.js", "max_stars_repo_name": "olivianate/quark-ui", "max_stars_repo_stars_event_min_datetime": "2017-05-02T05:31:31.000Z", "max_stars_repo_stars_event_max_datetime": "2021-04-05T11:23:11.000Z", "max_issues_repo_path": "src/components/datePicker/RangePicker.js", "max_issues_repo_name": "olivianate/quark-ui", "max_issues_repo_issues_event_min_datetime": "2017-06-07T07:19:08.000Z", "max_issues_repo_issues_event_max_datetime": "2018-08-30T09:05:30.000Z", "max_forks_repo_path": "src/components/datePicker/RangePicker.js", "max_forks_repo_name": "olivianate/quark-ui", "max_forks_repo_forks_event_min_datetime": "2017-04-25T07:25:27.000Z", "max_forks_repo_forks_event_max_datetime": "2018-01-08T01:20:23.000Z"}
{"max_stars_count": 4, "max_issues_count": 32, "max_forks_count": 16, "avg_line_length": 24.525862069, "max_line_length": 76, "alphanum_fraction": 0.6063268893}
/**
 * RangePicker Component
 * @author ryan.bian
 */
import { PureComponent } from 'react';
import moment from 'moment';
import assign from 'object-assign';
import momentPropTypes from 'react-moment-proptypes';
import PropTypes from 'prop-types';
import styles from './DatePicker.css';
import Picker from './Picker';
import { defaultProps, propTypes } from './props';
import Input from '../input';

class RangePicker extends PureComponent {

  static displayName = 'RangePicker'

  static defaultProps = assign({}, defaultProps, {
    fieldWidth: 100,
  })

  // https://facebook.github.io/react/docs/typechecking-with-proptypes.html
  static propTypes = assign({}, propTypes, {
    value: PropTypes.arrayOf(momentPropTypes.momentObj),
    defaultValue: PropTypes.arrayOf(momentPropTypes.momentObj),
  })

  constructor(props) {
    super(props);
    const value = props.value || props.defaultValue || [moment(), moment()];
    this.state = {
      rangeValue: value,
      paneVisible: false,
    };
  }

  handleClickField = () => {
    this.setState({
      paneVisible: true,
    });
  }

  handlePickerVisibleChange = (visible) => {
    this.setState({
      paneVisible: visible,
    });
  }

  changeDateInternal = (rangeValue) => {
    if (typeof this.props.value !== 'undefined') {
      // 受控组件
      this.props.onChange(rangeValue);
    } else {
      // 非受控组件
      this.setState({
        rangeValue: rangeValue.slice(0),
      });
      this.props.onChange(rangeValue);
    }
  }

  render() {
    const { disabled, format, fieldSize, fieldWidth } = this.props;
    const { rangeValue, paneVisible } = this.state;
    const pickerProps = {
      rangeDate: rangeValue,
      type: 'range',
      changeDate: this.changeDateInternal,
      paneVisible,
      onVisibleChange: this.handlePickerVisibleChange,
    };
    const fieldStyle = {};
    const field = {
      // type: 'text',
      disabled,
      size: fieldSize,
      onClick: this.handleClickField,
    };
    if (fieldWidth) {
      assign(fieldStyle, {
        width: fieldWidth,
      });
    }
    const startField = assign({}, field, {
      key: 'startDate',
      value: rangeValue[0].format(format),
      style: assign({}, fieldStyle, {
        borderTopRightRadius: 0,
        borderBottomRightRadius: 0,
        borderRight: '0 none',
      }),
    });
    const endField = assign({}, field, {
      key: 'endDate',
      value: rangeValue[1].format(format),
      style: assign({}, fieldStyle, {
        borderTopLeftRadius: 0,
        borderBottomLeftRadius: 0,
        borderLeft: '0 none',
      }),
    });
    const inputs = [
      <Input {...startField} />,
      <Input {...endField} />,
    ];
    return disabled ? <div>{inputs}</div> : (
      <Picker {...pickerProps}>
        {inputs}
      </Picker>
    );
  }
}

export default RangePicker;
