@beisen-platform/date-time/lib/RangePicker.js

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import React from 'react';
import GregorianCalendar from 'gregorian-calendar';
import RangeCalendar from './rc-calendar/lib/RangeCalendar';
import RcDatePicker from './rc-calendar/lib/Picker';
import classNames from 'classnames';
import ArrowDownIcon from '@beisen-platform/react-icons/lib/icons/ArrowdownNomal.js';

var RangePicker =
/*#__PURE__*/
function (_React$Component) {
  _inherits(RangePicker, _React$Component);

  function RangePicker(_props) {
    var _this;

    _classCallCheck(this, RangePicker);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(RangePicker).call(this, _props));

    _this.handleChange = function (value) {
      var props = _this.props;

      if (!('value' in props)) {
        _this.setState({
          value: value
        });
      }

      var startDate = value[0] ? new Date(value[0].getTime()) : null;
      var endDate = value[1] ? new Date(value[1].getTime()) : null;
      var startDateString = value[0] ? props.getFormatter().format(value[0]) : '';
      var endDateString = value[1] ? props.getFormatter().format(value[1]) : '';
      props.onChange([startDate, endDate], [startDateString, endDateString]);
    };

    _this.handleKeyUp = function (e) {
      var self = _assertThisInitialized(_this);

      if (e.target.className.indexOf('ant-calendar-range-picker') < 0) {// self.props.onBlur();
      }
    };

    var _this$props = _this.props,
        _value = _this$props.value,
        defaultValue = _this$props.defaultValue,
        parseDateFromValue = _this$props.parseDateFromValue;
    var start = _value && _value[0] || defaultValue[0];
    var end = _value && _value[1] || defaultValue[1];
    _this.state = {
      value: [parseDateFromValue(start), parseDateFromValue(end)]
    };
    return _this;
  }

  _createClass(RangePicker, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      document.addEventListener('keyup', this.handleKeyUp);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      document.removeEventListener('keyup', this.handleKeyUp);
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if ('value' in nextProps) {
        var value = nextProps.value || [];

        if (!value[0] || !value[1]) {
          return;
        }

        if (value[0].length == 1 || value[1].length == 1) {
          return;
        }

        var start = nextProps.parseDateFromValue(value[0]);
        var end = nextProps.parseDateFromValue(value[1]);
        this.setState({
          value: [start, end]
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var props = this.props;
      var locale = props.locale; // 以下两行代码
      // 给没有初始值的日期选择框提供本地化信息
      // 否则会以周日开始排

      locale.lang.now = "回到此刻";
      locale.lang.today = "回到今天";
      var defaultCalendarValue = new GregorianCalendar(locale);
      defaultCalendarValue.setTime(Date.now());
      var _this$props2 = this.props,
          disabledDate = _this$props2.disabledDate,
          showTime = _this$props2.showTime,
          getCalendarContainer = _this$props2.getCalendarContainer,
          transitionName = _this$props2.transitionName,
          disabled = _this$props2.disabled,
          popupStyle = _this$props2.popupStyle,
          align = _this$props2.align,
          style = _this$props2.style,
          onOk = _this$props2.onOk;
      var state = this.state;
      var calendarClassName = classNames(_defineProperty({}, 'ant-calendar-time', showTime));
      var pickerChangeHandler = {
        onChange: this.handleChange
      };
      var calendarHandler = {
        onOk: this.handleChange
      };

      if (props.timePicker) {
        pickerChangeHandler.onChange = function (value) {
          // Click clear button
          if (value === null || value.length === 0) {
            _this2.handleChange(value);
          }
        };
      } else {
        calendarHandler = {};
      }

      var startPlaceholder = 'startPlaceholder' in this.props ? props.startPlaceholder : locale.lang.rangePlaceholder[0];
      var endPlaceholder = 'endPlaceholder' in props ? props.endPlaceholder : locale.lang.rangePlaceholder[1];
      var calendar = React.createElement(RangeCalendar, _extends({
        type: props.type,
        prefixCls: "ant-calendar",
        showOk: true,
        className: calendarClassName,
        timePicker: props.timePicker,
        disabledDate: disabledDate,
        dateInputPlaceholder: [startPlaceholder, endPlaceholder],
        locale: locale.lang,
        onOk: onOk,
        defaultValue: [defaultCalendarValue, defaultCalendarValue]
      }, calendarHandler));
      var showClassName = '',
          icon = React.createElement("span", {
        className: "ant-calendar-picker-icon arrowdown-nomal-svg"
      }, React.createElement(ArrowDownIcon, {
        width: 11,
        height: 6
      }));

      if (props.showStatus == 'search') {
        icon = React.createElement("span", {
          className: "icon-label"
        });
        showClassName = 'date-time-search-status ';
      }

      var showStatus = this.props.showStatus;
      return React.createElement("span", {
        className: showClassName + props.pickerClass,
        style: style
      }, React.createElement(RcDatePicker, _extends({
        transitionName: transitionName,
        type: props.type,
        disabled: disabled,
        showStatus: showStatus,
        calendar: calendar,
        value: state.value,
        open: props.open,
        disabledDate: disabledDate,
        prefixCls: "ant-calendar-picker-container",
        style: popupStyle,
        align: align,
        getCalendarContainer: getCalendarContainer,
        onOpen: props.toggleOpen,
        onClose: props.toggleOpen
      }, pickerChangeHandler), function (_ref) {
        var value = _ref.value;
        var start = value[0];
        var end = value[1];
        return React.createElement("span", {
          className: props.pickerInputClass,
          disabled: disabled
        }, React.createElement("input", {
          disabled: disabled,
          value: start ? props.getFormatter().format(start) : '',
          placeholder: startPlaceholder,
          className: "ant-calendar-range-picker-input",
          onFocus: props.onFocus
        }), React.createElement("span", {
          className: "ant-calendar-range-picker-separator"
        }, " ~ "), React.createElement("input", {
          disabled: disabled,
          value: end ? props.getFormatter().format(end) : '',
          placeholder: endPlaceholder,
          className: "ant-calendar-range-picker-input",
          onFocus: props.onFocus
        }), icon);
      }));
    }
  }]);

  return RangePicker;
}(React.Component);

RangePicker.defaultProps = {
  defaultValue: []
};
export { RangePicker as default };