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

beisencloud pc react components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = undefined;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp, _initialiseProps;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _gregorianCalendar = require('gregorian-calendar');

var _gregorianCalendar2 = _interopRequireDefault(_gregorianCalendar);

var _RangeCalendar = require('./rc-calendar/lib/RangeCalendar');

var _RangeCalendar2 = _interopRequireDefault(_RangeCalendar);

var _Picker = require('./rc-calendar/lib/Picker');

var _Picker2 = _interopRequireDefault(_Picker);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var RangePicker = (_temp = _class = function (_React$Component) {
  (0, _inherits3.default)(RangePicker, _React$Component);

  function RangePicker(props) {
    (0, _classCallCheck3.default)(this, RangePicker);

    var _this = (0, _possibleConstructorReturn3.default)(this, (RangePicker.__proto__ || (0, _getPrototypeOf2.default)(RangePicker)).call(this, props));

    _initialiseProps.call(_this);

    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;
  }

  (0, _createClass3.default)(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]){
        //   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.rangeNow;
      locale.lang.today = locale.lang.rangeToday;

      var defaultCalendarValue = new _gregorianCalendar2.default(locale);
      defaultCalendarValue.setTime(Date.now());

      var _props = this.props,
          disabledDate = _props.disabledDate,
          showTime = _props.showTime,
          getCalendarContainer = _props.getCalendarContainer,
          transitionName = _props.transitionName,
          disabled = _props.disabled,
          popupStyle = _props.popupStyle,
          align = _props.align,
          style = _props.style,
          onOk = _props.onOk;

      var state = this.state;

      var calendarClassName = (0, _classnames2.default)((0, _defineProperty3.default)({}, '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 = _react2.default.createElement(_RangeCalendar2.default, (0, _extends3.default)({
        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 = _react2.default.createElement('span', { className: 'ant-calendar-picker-icon pc-sys-arrowdown-nomal-svg' });

      if (props.showStatus == 'search' || props.showStatus == 'searchBtn') {
        icon = _react2.default.createElement('span', { className: 'icon-label' });
        showClassName = 'date-time-search-status ';
      }
      var showStatus = this.props.showStatus;
      return _react2.default.createElement(
        'span',
        { className: showClassName + props.pickerClass, style: style },
        _react2.default.createElement(
          _Picker2.default,
          (0, _extends3.default)({
            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];
            if (showStatus == 'searchBtn') {
              return _react2.default.createElement('span', { className: 'search-btn sys-icon-gongzuorili' });
            } else {
              return _react2.default.createElement(
                'span',
                { className: props.pickerInputClass, disabled: disabled },
                _react2.default.createElement('input', {
                  disabled: disabled,
                  value: start ? props.getFormatter().format(start) : '',
                  placeholder: startPlaceholder,
                  className: 'ant-calendar-range-picker-input',
                  onFocus: props.onFocus
                }),
                _react2.default.createElement(
                  'span',
                  { className: 'ant-calendar-range-picker-separator' },
                  ' ~ '
                ),
                _react2.default.createElement('input', {
                  disabled: disabled,
                  value: end ? props.getFormatter().format(end) : '',
                  placeholder: endPlaceholder,
                  className: 'ant-calendar-range-picker-input',
                  onFocus: props.onFocus
                }),
                icon
              );
            }
          }
        )
      );
    }
  }]);
  return RangePicker;
}(_react2.default.Component), _class.defaultProps = {
  defaultValue: []
}, _initialiseProps = function _initialiseProps() {
  var _this3 = this;

  this.handleChange = function (value) {
    var props = _this3.props;
    if (!('value' in props)) {
      _this3.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 = _this3;
    if (e.target.className.indexOf('ant-calendar-range-picker') < 0) {
      // self.props.onBlur();
    }
  };
}, _temp);
exports.default = RangePicker;
module.exports = exports['default'];