@alifd/meet-react/lib/date-picker/drawer-picker/base-range-picker.js

Fusion Mobile React UI System Component

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _tslib = require("tslib");
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _dayjs = _interopRequireDefault(require("dayjs"));
var _view = _interopRequireDefault(require("../../view"));
var _selectDrawer = _interopRequireDefault(require("../../select-drawer"));
var _form = require("../../form");
var _date = require("../../utils/date");
var _utils = require("../../utils");
var _utils2 = require("../../time-picker/utils");
var _utils3 = require("../utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var DEFAULT_START_TIME = new Date('1970-01-01');
var DEFAULT_END_TIME = new Date('2100-12-31');
var BaseRangePicker = /*#__PURE__*/function (_Component) {
  _inheritsLoose(BaseRangePicker, _Component);
  function BaseRangePicker(props) {
    var _this = _Component.call(this, props) || this;
    _this.getPickerValidRange = function (step) {
      if (step === void 0) {
        step = 0;
      }
      var _this$props$validRang = _this.props.validRange,
        validRange = _this$props$validRang === void 0 ? [] : _this$props$validRang;
      if (step === 0) {
        return [(0, _date.toDate)(validRange[0] || DEFAULT_START_TIME), (0, _date.toDate)(validRange[1] || DEFAULT_END_TIME)];
      } else {
        return [(0, _date.toDate)(_this.state.pickerValue[0] || validRange[0] || DEFAULT_START_TIME), (0, _date.toDate)(validRange[1] || DEFAULT_END_TIME)];
      }
    };
    _this.handleChange = function (value) {
      var step = _this.state.step;
      if (step === 0) {
        _this.handleFirstStepChange(value);
      } else {
        _this.handleSecondStepChange(value);
      }
    };
    _this.handleFirstStepChange = function (value) {
      var pickerValue = _this.state.pickerValue;
      _this.setState({
        pickerValue: [value, pickerValue[1]]
      });
    };
    _this.handleSecondStepChange = function (value) {
      var pickerValue = _this.state.pickerValue;
      _this.setState({
        pickerValue: [pickerValue[0], value]
      });
    };
    _this.handleOk = function () {
      var _this$props = _this.props,
        onOk = _this$props.onOk,
        onChange = _this$props.onChange;
      var pickerValue = _this.state.pickerValue;
      var step = _this.state.step;
      var value = pickerValue;
      var _ref = pickerValue || [],
        startDate = _ref[0],
        endDate = _ref[1];
      if (startDate && endDate && (0, _dayjs.default)(startDate).isAfter(endDate)) {
        value = [startDate, startDate];
      }
      if (step === 1 && !('value' in _this.props)) {
        _this.setState({
          value: value
        });
      }
      if (step === 0) {
        _this.scrollTo(1);
        return false;
      }
      _this.scrollTo(0);
      if (!('value' in _this.props)) {
        _this.setState({
          value: value
        });
      }
      if ((0, _utils.isFunction)(onOk)) {
        onOk(value);
      }
      if ((0, _utils.isFunction)(onChange)) {
        onChange(value);
      }
      return true;
    };
    _this.handleCancel = function (reason) {
      var onCancel = _this.props.onCancel;
      var step = _this.state.step;
      if (reason === 'cancel-button' && step === 1) {
        _this.scrollTo(0);
        return false;
      }
      _this.scrollTo(0, 250);
      if ((0, _utils.isFunction)(onCancel)) {
        onCancel(reason);
      }
      _this.setState({
        pickerValue: _this.getPickerValue(_this.props)
      });
      return true;
    };
    _this.handleClear = function () {
      var _this$props2 = _this.props,
        onClear = _this$props2.onClear,
        onChange = _this$props2.onChange;
      if (!('value' in _this.props)) {
        _this.setState({
          value: null
        });
      }
      if (onClear) {
        onClear();
      }
      if (onChange) {
        onChange(null);
      }
    };
    _this.state = {
      step: 0,
      value: props.value || props.defaultValue || null,
      pickerValue: _this.getPickerValue(props)
    };
    return _this;
  }
  var _proto = BaseRangePicker.prototype;
  _proto.getPickerValue = function getPickerValue(props) {
    var _a;
    var value = props.value,
      defaultValue = props.defaultValue;
    var today = (0, _dayjs.default)().startOf(this.rangeType).toDate();
    if ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) {
      var _this$state$value = this.state.value,
        start = _this$state$value[0],
        end = _this$state$value[1];
      return [start || today, end || today];
    }
    if (value) {
      var _start = value[0],
        _end = value[1];
      return [_start || today, _end || today];
    }
    if (defaultValue) {
      var _start2 = defaultValue[0],
        _end2 = defaultValue[1];
      return [_start2 || today, _end2 || today];
    }
    return [today, today];
  };
  _proto.scrollTo = function scrollTo(step, wait) {
    var _this2 = this;
    if (wait) {
      setTimeout(function () {
        _this2.setState({
          step: step
        });
      }, wait);
    } else {
      this.setState({
        step: step
      });
    }
  };
  _proto.componentDidUpdate = function componentDidUpdate() {
    var _a, _b;
    if ('value' in this.props) {
      var _this$props3 = this.props,
        value = _this$props3.value,
        defaultValue = _this$props3.defaultValue;
      var newValue = value || defaultValue;
      if (!newValue && this.state.value) {
        this.setState({
          value: null
        });
        return;
      }
      if (!Array.isArray(newValue) || newValue === this.state.value) {
        return;
      }
      var d1 = (0, _date.toDate)(newValue[0]);
      var d2 = (0, _date.toDate)(newValue[1]);
      if (!(0, _date.isValidDate)(d1) || !(0, _date.isValidDate)(d2)) {
        return;
      }
      var newValueDate = [d1, d2];
      if (!this.state.value) {
        this.setState({
          value: newValueDate,
          pickerValue: newValueDate
        });
        return;
      }
      if (d1.getTime() === ((_a = (0, _date.toDate)(this.state.value[0])) === null || _a === void 0 ? void 0 : _a.getTime()) && d2.getTime() === ((_b = (0, _date.toDate)(this.state.value[1])) === null || _b === void 0 ? void 0 : _b.getTime())) {
        return;
      }
      this.setState({
        value: newValueDate,
        pickerValue: newValueDate
      });
    }
  };
  _proto.render = function render() {
    var _this3 = this;
    var _this$state = this.state,
      value = _this$state.value,
      step = _this$state.step,
      pickerValue = _this$state.pickerValue;
    var _a = this.props,
      _a$prefix = _a.prefix,
      prefix = _a$prefix === void 0 ? 'mt-' : _a$prefix,
      iconType = _a.iconType,
      placeholder = _a.placeholder,
      alignProp = _a.align,
      sizeProp = _a.size,
      disabled = _a.disabled,
      readOnly = _a.readOnly,
      hasClear = _a.hasClear,
      locale = _a.locale,
      others = (0, _tslib.__rest)(_a, ["prefix", "iconType", "placeholder", "align", "size", "disabled", "readOnly", "hasClear", "locale"]);
    var clsPrefix = prefix + "datepicker-";
    var showNext = step === 0;
    var showPrev = step === 1;
    return /*#__PURE__*/(0, _react.createElement)(_form.ItemContext.Consumer, null, function (context) {
      var _classNames;
      var isInsideForm = context.isInsideForm,
        contentAlign = context.contentAlign,
        contextSize = context.size;
      var align = alignProp || (isInsideForm ? contentAlign : 'left');
      var size = sizeProp || (isInsideForm ? contextSize : 'medium');
      var useRangeLocale = locale ? locale.ok && locale.cancel : null;
      return /*#__PURE__*/(0, _react.createElement)(_selectDrawer.default, _extends({}, others, {
        locale: useRangeLocale ? locale : undefined,
        prefix: prefix,
        content: value ? (0, _date.formatDate)((0, _dayjs.default)(value[0]), _this3.format) + " - " + (0, _date.formatDate)((0, _dayjs.default)(value[1]), _this3.format) : '',
        align: align,
        size: size,
        hasClear: hasClear,
        iconType: iconType,
        placeholder: placeholder,
        disabled: disabled,
        readOnly: readOnly,
        onOk: _this3.handleOk,
        onCancel: _this3.handleCancel,
        onClear: _this3.handleClear,
        drawerTitle: showNext && locale ? locale.selectStartTime : locale.selectEndTime,
        okText: showNext && locale ? locale.next : null,
        cancelText: showPrev && locale ? locale.prev : null
      }), /*#__PURE__*/(0, _react.createElement)(_view.default, {
        className: clsPrefix + "container"
      }, /*#__PURE__*/(0, _react.createElement)(_view.default, {
        className: (0, _classnames.default)(clsPrefix + "range", (_classNames = {}, _classNames[clsPrefix + "range--next"] = showPrev, _classNames))
      }, _this3.renderFirstChild(pickerValue[0], _this3.getPickerValidRange(0), _this3.handleFirstStepChange), _this3.renderSecondChild(pickerValue[1], _this3.getPickerValidRange(1), _this3.handleSecondStepChange))));
    });
  };
  _createClass(BaseRangePicker, [{
    key: "rangeType",
    get: function get() {
      return 'second';
    }
  }, {
    key: "timeFormat",
    get: function get() {
      var showTime = this.props.showTime;
      return typeof showTime === 'object' && showTime.format ? showTime.format : _utils2.DEFAULT_FORMAT;
    }
  }, {
    key: "format",
    get: function get() {
      var showTime = this.props.showTime;
      var format = this.props.format || 'YYYY-MM-DD';
      return showTime && !(0, _utils3.withTime)(format) ? format + " " + this.timeFormat : format;
    }
  }]);
  return BaseRangePicker;
}(_react.Component);
var _default = exports.default = BaseRangePicker;