shineout/css/DatePicker/Range.js

Shein 前端组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _immer = _interopRequireDefault(require("immer"));

var _component = require("../component");

var _shallowEqual = _interopRequireDefault(require("../utils/shallowEqual"));

var _utils = _interopRequireDefault(require("./utils"));

var _locale = require("../locale");

var _paramUtils = _interopRequireDefault(require("./paramUtils"));

var _Picker = _interopRequireDefault(require("./Picker"));

var _styles = require("./styles");

var _Quick = _interopRequireDefault(require("./Quick"));

var DefaultValue = {
  value: []
};

var Range =
/*#__PURE__*/
function (_PureComponent) {
  (0, _inheritsLoose2.default)(Range, _PureComponent);

  function Range(props) {
    var _this;

    _this = _PureComponent.call(this, props) || this;
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "pickers", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleFirstChange", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleSecondChange", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "bindFirstPicker", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "bindSecondPicker", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleDisabledStart", void 0);
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleDisabledEnd", void 0);
    _this.state = {
      rangeDate: props.value
    };
    _this.pickers = [];
    _this.handleChange = _this.handleChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    _this.handleFirstChange = _this.handleChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 0);
    _this.handleSecondChange = _this.handleChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 1);
    _this.handleDayHover = _this.handleDayHover.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    _this.bindFirstPicker = _this.bindPicker.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 0);
    _this.bindSecondPicker = _this.bindPicker.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 1);
    _this.handleDisabledStart = _this.handleDisabled.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'start');
    _this.handleDisabledEnd = _this.handleDisabled.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'end');
    _this.changeDateSmart = _this.changeDateSmart.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    _this.handleQuick = _this.handleQuick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    return _this;
  }

  var _proto = Range.prototype;

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    var rangeDate = this.state.rangeDate;

    if (rangeDate.length !== 1 && !(0, _shallowEqual.default)(prevProps.value, this.props.value) && !(0, _shallowEqual.default)(this.state.rangeDate, this.props.value)) {
      // eslint-disable-next-line
      this.setState({
        rangeDate: this.props.value
      });
    }
  };

  _proto.getOptions = function getOptions() {
    var timeZone = this.props.timeZone;
    return {
      timeZone: timeZone,
      weekStartsOn: (0, _locale.getLocale)('startOfWeek')
    };
  };

  _proto.bindPicker = function bindPicker(index, el) {
    this.pickers[index] = el;
  };

  _proto.resetRange = function resetRange(rangeDate) {
    this.setState({
      rangeDate: rangeDate
    });
  };

  _proto.handleDayHover = function handleDayHover(date) {
    // will never in
    if (this.state.rangeDate.length === 1) {
      _utils.default.cloneTime(date, this.props.value[1], this.props.format, this.getOptions()); // this.setState({ hover: date })

    }
  };

  _proto.changeDateSmart = function changeDateSmart(rangeDate) {
    if (!rangeDate[0] || !rangeDate[1]) return;
    var s = rangeDate[0],
        e = rangeDate[1];
    var range = this.props.range;

    if (typeof range === 'number') {
      if (_utils.default.compareAsc(s, _utils.default.addSeconds(e, -range, this.getOptions())) < 0) rangeDate[1] = _utils.default.addSeconds(s, range, this.getOptions());
    }

    if (_utils.default.compareAsc(s, e) > 0) {
      var sWitheTime = _utils.default.toDate(s, this.getOptions());

      sWitheTime = _utils.default.setTime(sWitheTime, e, this.getOptions());
      rangeDate[1] = _utils.default.compareAsc(s, sWitheTime) > 0 ? s : sWitheTime;
    }
  } // Be consistent with the parent onChange, expand first params: index
  ;

  _proto.handleChange = function handleChange(index, date, change, _blur, _isEnd, _isQuickSelect, areaType) {
    var _this2 = this;

    var newDate = date ? _utils.default.toDate(date, this.getOptions()) : '';
    var _this$props = this.props,
        type = _this$props.type,
        range = _this$props.range,
        min = _this$props.min,
        max = _this$props.max;

    var handleOnChangeParams = _paramUtils.default.handleOnChangeParams(areaType);

    if (!change) {
      var _this$props2;

      var current = (0, _immer.default)(this.props.current, function (draft) {
        draft[index] = newDate;
      });

      (_this$props2 = this.props).onChange.apply(_this$props2, handleOnChangeParams(current));

      return;
    }

    if (areaType === 'time') {
      var endChangedDate;
      this.setState((0, _immer.default)(function (draft) {
        draft.rangeDate[index] = newDate;
        var _draft$rangeDate = draft.rangeDate,
            s = _draft$rangeDate[0],
            e = _draft$rangeDate[1];

        if (index !== 0) {
          if (s && s.getHours() === e.getHours()) {
            if (_utils.default.compareAsc(s, e) === 1) {
              e.setMinutes(s.getMinutes());
            }
          }

          return;
        }

        if (range && _utils.default.compareAsc(s, e) === 1) {
          endChangedDate = newDate;
          draft.rangeDate[1] = endChangedDate;
        }

        if (typeof range === 'number' && _utils.default.compareAsc(s, _utils.default.addSeconds(e, -range, _this2.getOptions())) < 0) {
          endChangedDate = _utils.default.addSeconds(s, range, _this2.getOptions());
          draft.rangeDate[1] = endChangedDate;
        }
      }), function () {
        var _this2$props;

        var current = (0, _immer.default)(_this2.props.value, function (draft) {
          draft[index] = newDate;
          if (endChangedDate) draft[1] = endChangedDate;
          draft[1 - index] = draft[1 - index] || '';
        });

        (_this2$props = _this2.props).onChange.apply(_this2$props, handleOnChangeParams(current, true));
      });
      return;
    }

    if (type === 'month') {
      var _this$props3;

      // eslint-disable-next-line
      var rangeDate = [].concat(this.state.rangeDate);
      rangeDate[index] = newDate;
      rangeDate[1 - index] = rangeDate[1 - index] || '';
      this.changeDateSmart(rangeDate);
      this.setState({
        rangeDate: rangeDate
      });

      (_this$props3 = this.props).onChange.apply(_this$props3, handleOnChangeParams(rangeDate, true, true, index === 1));

      return;
    }

    newDate = _utils.default.cloneTime(newDate, this.props.value[index], undefined, this.getOptions());

    if (min && _utils.default.compareAsc(newDate, min) <= 0) {
      newDate = _utils.default.setTime(newDate, min, this.getOptions());
    }

    if (max && _utils.default.compareAsc(newDate, max) >= 0) {
      newDate = _utils.default.setTime(newDate, max, this.getOptions());
    }

    this.setState((0, _immer.default)(function (draft) {
      draft.rangeDate[index] = newDate;
      draft.rangeDate[1 - index] = draft.rangeDate[1 - index] || '';

      _this2.changeDateSmart(draft.rangeDate);

      draft.hover = undefined;
    }), function () {
      var _this2$props2;

      // only 'datetime' don not need close, 'time is up'
      (_this2$props2 = _this2.props).onChange.apply(_this2$props2, handleOnChangeParams(_this2.state.rangeDate, true, type !== 'datetime', index === 1));
    });
  };

  _proto.handleDisabled = function handleDisabled(type, date) {
    var disabled = this.props.disabled;
    var rangeDate = this.state.rangeDate;

    if (disabled) {
      return disabled.apply(void 0, [date, type].concat(rangeDate));
    }

    return false;
  };

  _proto.handleQuick = function handleQuick(quick) {
    var _this$props4;

    this.setState({
      rangeDate: quick.value
    });

    (_this$props4 = this.props).onChange.apply(_this$props4, _paramUtils.default.quickHandleChangeParams(quick.value, true, false, false, quick));
  };

  _proto.render = function render() {
    // min & max can not to child
    var _this$props5 = this.props,
        current = _this$props5.current,
        value = _this$props5.value,
        range = _this$props5.range,
        children = _this$props5.children,
        min = _this$props5.min,
        max = _this$props5.max,
        quicks = _this$props5.quicks,
        props = (0, _objectWithoutPropertiesLoose2.default)(_this$props5, ["current", "value", "range", "children", "min", "max", "quicks"]);
    var rangeDate = [].concat(this.state.rangeDate);
    return _react.default.createElement("div", {
      className: (0, _styles.datepickerClass)('range-picker')
    }, _react.default.createElement(_Quick.default, (0, _extends2.default)({}, this.props, {
      current: this.state.rangeDate,
      onChange: this.handleQuick
    })), _react.default.createElement(_Picker.default, (0, _extends2.default)({}, props, {
      pos: "start",
      disabled: this.handleDisabledStart,
      index: 0,
      min: min,
      max: max,
      current: current[0],
      range: typeof range === 'number' ? range : undefined,
      rangeDate: rangeDate,
      rangeTemp: rangeDate[0],
      onChange: this.handleFirstChange,
      onChangeSync: this.handleChange,
      onDayHover: this.handleDayHover,
      ref: this.bindFirstPicker,
      value: _utils.default.toDateWithFormat(value[0], props.format, undefined, this.getOptions()),
      showTimePicker: value.length === 2
    })), _react.default.createElement(_Picker.default, (0, _extends2.default)({}, props, {
      disabled: this.handleDisabledEnd,
      index: 1,
      min: rangeDate[0] ? rangeDate[0] : min,
      max: max,
      current: current[1],
      range: typeof range === 'number' ? range : undefined,
      rangeDate: rangeDate,
      rangeTemp: rangeDate[0],
      onChange: this.handleSecondChange,
      onChangeSync: this.handleChange,
      onDayHover: this.handleDayHover,
      ref: this.bindSecondPicker,
      value: _utils.default.toDateWithFormat(value[1], props.format, undefined, this.getOptions()),
      showTimePicker: value.length === 2
    })));
  };

  return Range;
}(_component.PureComponent);

(0, _defineProperty2.default)(Range, "defaultProps", DefaultValue);
var _default = Range;
exports.default = _default;