@ttk/component/es/datePicker/index.js

ttk组件库

import { _ as _objectWithoutProperties } from '../objectWithoutProperties-0c3c7796.js';
import { _ as _inherits, a as _getPrototypeOf, b as _possibleConstructorReturn, c as _classCallCheck, d as _createClass } from '../getPrototypeOf-b95655c5.js';
import { _ as _extends } from '../extends-b1af4ff7.js';
import { _ as _defineProperty } from '../defineProperty-847730aa.js';
import React__default from 'react';
import { DatePicker } from 'antd';
import classNames from 'classnames';
import moment from 'moment';
import '../_commonjsHelpers-471920d6.js';

var _excluded = ["mode", "value", "showTime", "onOpenChange", "onChange", "onOk"],
    _excluded2 = ["mode", "value", "onOpenChange", "onPanelChange", "onChange"],
    _excluded3 = ["mode", "value", "format", "onOpenChange", "onPanelChange", "onChange", "onOk"],
    _excluded4 = ["mode", "value", "onOpenChange", "onPanelChange", "onChange", "onOk"],
    _excluded5 = ["mode", "value", "onOpenChange", "onChange"];

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function momentToString(v, format) {
  if (!v) return v;
  return moment(v).format(format);
}

function DatePickerComponent(props) {
  var className = classNames(_defineProperty({
    'mk-datepicker': true
  }, props.className, !!props.className));
  return /*#__PURE__*/React__default.createElement(DatePicker, _extends({}, props, {
    className: className
  }));
}

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

  var _super = _createSuper(TimerPicker);

  function TimerPicker(props) {
    var _this;

    _classCallCheck(this, TimerPicker);

    _this = _super.call(this, props);

    _this.onOpenChange = function (open) {
      if (!open) {
        var newState = {
          open: open
        };

        if (_this.lastVaule) {
          newState.value = moment(_this.lastVaule, _this.props.format || 'HH:mm:ss');

          if (_this.props.onChange) {
            _this.props.onChange(newState.value, _this.lastVaule);
          }

          _this.lastVaule = null;
        } // 弹窗关闭时，设置回原始值


        _this.setState(newState);
      } else {
        _this.lastVaule = _this.props.value;

        _this.setState({
          open: open
        }, _this.openTimerPicker);
      }

      if (_this.props.onOpenChange) {
        _this.props.onOpenChange(open);
      }
    };

    _this.openTimerPicker = function () {
      if (_this.state.open) {
        var timeBtn = document.querySelector('.ant-calendar-time-picker-btn');

        if (timeBtn) {
          _this.setTimeBtn(timeBtn);
        } else {
          _this.interval = setInterval(function () {
            var timeBtn = document.querySelector('.ant-calendar-time-picker-btn');

            if (timeBtn) {
              _this.setTimeBtn(timeBtn);

              clearInterval(_this.interval);
            }
          }, 16);
        }
      }
    };

    _this.setTimeBtn = function (timeBtn) {
      if (timeBtn.style.visibility !== 'hidden') {
        timeBtn.style.visibility = 'hidden';
      }
    };

    _this.onChange = function (date, dateString) {
      console.log(date, dateString);

      _this.setState({
        value: date
      });

      if (_this.props.onChange) {
        _this.props.onChange(date, dateString);
      }
    };

    _this.onOk = function (date) {
      _this.lastVaule = null;
      var dateString = date.format(_this.props.format || 'HH:mm:ss');

      _this.setState({
        value: date
      });

      if (_this.props.onOk) {
        _this.props.onOk(date, dateString);
      }
    };

    _this.lastVaule = null; // 上次打开picker的value，用于非“确定”关闭时，设置回原值

    _this.state = {
      open: false,
      value: moment(props.value, props.format || 'HH:mm:ss')
    };
    return _this;
  }

  _createClass(TimerPicker, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if ('value' in nextProps) {
        this.setState({
          value: moment(nextProps.value, nextProps.format || 'HH:mm:ss')
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var className = classNames(_defineProperty({
        'mk-timer-picker': true
      }, this.props.className, !!this.props.className));
      var _this$state = this.state,
          value = _this$state.value,
          open = _this$state.open; // 这里声明了未使用的props，是为了避免...rest覆盖，不要删掉

      var _this$props = this.props;
          _this$props.mode;
          _this$props.value;
          _this$props.showTime;
          _this$props.onOpenChange;
          _this$props.onChange;
          _this$props.onOk;
          var rest = _objectWithoutProperties(_this$props, _excluded);

      return /*#__PURE__*/React__default.createElement(DatePicker, _extends({
        value: value,
        open: open,
        mode: "time",
        format: "HH:mm:ss",
        showTime: true,
        onOpenChange: this.onOpenChange,
        onChange: this.onChange,
        onOk: this.onOk
      }, rest, {
        className: className
      }));
    }
  }]);

  return TimerPicker;
}(React__default.Component);

var YearPicker = /*#__PURE__*/function (_React$Component2) {
  _inherits(YearPicker, _React$Component2);

  var _super2 = _createSuper(YearPicker);

  function YearPicker(props) {
    var _this2;

    _classCallCheck(this, YearPicker);

    _this2 = _super2.call(this, props);

    _this2.onOpenChange = function (open) {
      _this2.setState({
        open: open
      });

      if (_this2.props.onOpenChange) {
        _this2.props.onOpenChange(open);
      }
    };

    _this2.onPanelChange = function (value, mode) {
      if (mode) {
        // 先设值，使切换模式后DatePicker内日期显示正常，再设置回原值
        _this2.setState({
          value: value,
          mode: mode
        }, function () {
          _this2.setState({
            value: _this2.props.value
          });
        });
      } else {
        // mode为空，选择了年
        _this2.setState({
          value: value,
          open: false
        });

        if (_this2.props.onChange) {
          _this2.props.onChange(value, momentToString(value, _this2.props.format || 'YYYY'));
        }
      }

      if (_this2.props.onPanelChange) {
        _this2.props.onPanelChange(value, mode);
      }
    };

    _this2.onChange = function (date, dateString) {
      _this2.setState({
        value: date
      });

      if (_this2.props.onChange) {
        _this2.props.onChange(date, dateString);
      }
    };

    _this2.state = {
      mode: 'year',
      open: false,
      value: props.value
    };
    return _this2;
  }

  _createClass(YearPicker, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if ('value' in nextProps) {
        this.setState({
          value: nextProps.value
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var className = classNames(_defineProperty({
        'mk-yearpicker': true
      }, this.props.className, !!this.props.className));
      var _this$state2 = this.state,
          mode = _this$state2.mode,
          open = _this$state2.open,
          value = _this$state2.value;

      var _this$props2 = this.props;
          _this$props2.mode;
          _this$props2.value;
          _this$props2.onOpenChange;
          _this$props2.onPanelChange;
          _this$props2.onChange;
          var rest = _objectWithoutProperties(_this$props2, _excluded2);

      return /*#__PURE__*/React__default.createElement(DatePicker, _extends({
        value: value,
        open: open,
        mode: mode,
        format: "YYYY",
        onOpenChange: this.onOpenChange,
        onPanelChange: this.onPanelChange,
        onChange: this.onChange
      }, rest, {
        className: className
      }));
    }
  }]);

  return YearPicker;
}(React__default.Component);

var MonthRangePicker = /*#__PURE__*/function (_React$Component3) {
  _inherits(MonthRangePicker, _React$Component3);

  var _super3 = _createSuper(MonthRangePicker);

  function MonthRangePicker(props) {
    var _this3;

    _classCallCheck(this, MonthRangePicker);

    _this3 = _super3.call(this, props);

    _this3.onOpenChange = function (open) {
      if (!open) {
        // 弹窗关闭时，设置回原始值
        _this3.setState({
          value: _this3.props.value
        });
      } else {
        _this3.dismissTimeBtn();
      }

      if (_this3.props.onOpenChange) {
        _this3.props.onOpenChange(open);
      }
    };

    _this3.onPanelChange = function (value, mode) {
      _this3.setState({
        value: value,
        mode: [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]]
      });

      if (_this3.props.onPanelChange) {
        _this3.props.onPanelChange(value, mode);
      }
    };

    _this3.dismissTimeBtn = function () {
      var timeBtn = document.querySelector('.ant-calendar-time-picker-btn');

      if (timeBtn) {
        timeBtn.style.visibility = 'hidden';
      } else {
        _this3.interval = setInterval(function () {
          var timeBtn = document.querySelector('.ant-calendar-time-picker-btn');

          if (timeBtn) {
            timeBtn.style.visibility = 'hidden';
            clearInterval(_this3.interval);
          }
        }, 16);
      }
    };

    _this3.onChange = function (dates, dateStrings) {
      _this3.setState({
        value: dates
      });

      if (_this3.props.onChange) {
        _this3.props.onChange(dates, dateStrings);
      }
    };

    _this3.onOk = function (dates) {
      if (_this3.props.onChange) {
        _this3.props.onChange(dates, [momentToString(dates[0], _this3.props.format || 'YYYY-MM'), momentToString(dates[1], _this3.props.format || 'YYYY-MM')]);
      }
    };

    _this3.state = {
      mode: ['month', 'month'],
      value: props.value || []
    };
    return _this3;
  }

  _createClass(MonthRangePicker, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if ('value' in nextProps) {
        this.setState({
          value: nextProps.value || []
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var className = classNames(_defineProperty({
        'mk-month-range-picker': true
      }, this.props.className, !!this.props.className));
      var _this$state3 = this.state,
          mode = _this$state3.mode,
          value = _this$state3.value;

      var _this$props3 = this.props;
          _this$props3.mode;
          _this$props3.value;
          var format = _this$props3.format;
          _this$props3.onOpenChange;
          _this$props3.onPanelChange;
          _this$props3.onChange;
          _this$props3.onOk;
          var rest = _objectWithoutProperties(_this$props3, _excluded3);

      return /*#__PURE__*/React__default.createElement(DatePicker.RangePicker, _extends({
        value: value,
        mode: mode,
        format: format || "YYYY-MM",
        showTime: true,
        onOpenChange: this.onOpenChange,
        onPanelChange: this.onPanelChange,
        onChange: this.onChange,
        onOk: this.onOk
      }, rest, {
        className: className
      }));
    }
  }]);

  return MonthRangePicker;
}(React__default.Component);

var YearRangePicker = /*#__PURE__*/function (_React$Component4) {
  _inherits(YearRangePicker, _React$Component4);

  var _super4 = _createSuper(YearRangePicker);

  function YearRangePicker(props) {
    var _this4;

    _classCallCheck(this, YearRangePicker);

    _this4 = _super4.call(this, props);

    _this4.onOpenChange = function (open) {
      if (!open) {
        // 弹窗关闭时，设置回原始值
        _this4.setState({
          value: _this4.props.value
        });
      } else {
        _this4.dismissTimeBtn();
      }

      _this4.setState({
        open: open
      });

      if (_this4.props.onOpenChange) {
        _this4.props.onOpenChange(open);
      }
    };

    _this4.onPanelChange = function (value, mode) {
      _this4.setState({
        value: value,
        mode: mode
      }, function () {
        _this4.setState({
          mode: [mode[0] === null ? 'year' : mode[0], mode[1] === null ? 'year' : mode[1]]
        });
      });

      if (_this4.props.onPanelChange) {
        _this4.props.onPanelChange(value, mode);
      }
    };

    _this4.dismissTimeBtn = function () {
      var timeBtn = document.querySelector('.ant-calendar-time-picker-btn');

      if (timeBtn) {
        timeBtn.style.visibility = 'hidden';
      } else {
        _this4.interval = setInterval(function () {
          var timeBtn = document.querySelector('.ant-calendar-time-picker-btn');

          if (timeBtn) {
            timeBtn.style.visibility = 'hidden';
            clearInterval(_this4.interval);
          }
        }, 16);
      }
    };

    _this4.onChange = function (dates, dateStrings) {
      _this4.setState({
        value: dates
      });

      if (_this4.props.onChange) {
        _this4.props.onChange(dates, dateStrings);
      }
    };

    _this4.onOk = function (dates) {
      if (_this4.props.onChange) {
        if (dates[0].isAfter(dates[1])) {
          dates.reverse();
        }

        _this4.props.onChange(dates, [momentToString(dates[0], _this4.props.format || 'YYYY'), momentToString(dates[1], _this4.props.format || 'YYYY')]);
      }
    };

    _this4.state = {
      mode: ['year', 'year'],
      value: props.value || []
    };
    return _this4;
  }

  _createClass(YearRangePicker, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if ('value' in nextProps) {
        this.setState({
          value: nextProps.value || []
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var className = classNames(_defineProperty({
        'mk-year-range-picker': true
      }, this.props.className, !!this.props.className));
      var _this$state4 = this.state,
          mode = _this$state4.mode,
          value = _this$state4.value;

      var _this$props4 = this.props;
          _this$props4.mode;
          _this$props4.value;
          _this$props4.onOpenChange;
          _this$props4.onPanelChange;
          _this$props4.onChange;
          _this$props4.onOk;
          var rest = _objectWithoutProperties(_this$props4, _excluded4);

      return /*#__PURE__*/React__default.createElement(DatePicker.RangePicker, _extends({
        value: value,
        mode: mode,
        format: "YYYY",
        showTime: true,
        onOpenChange: this.onOpenChange,
        onPanelChange: this.onPanelChange,
        onChange: this.onChange,
        onOk: this.onOk
      }, rest, {
        className: className
      }));
    }
  }]);

  return YearRangePicker;
}(React__default.Component);

var TimerRangePicker = /*#__PURE__*/function (_React$Component5) {
  _inherits(TimerRangePicker, _React$Component5);

  var _super5 = _createSuper(TimerRangePicker);

  function TimerRangePicker(props) {
    var _this5;

    _classCallCheck(this, TimerRangePicker);

    _this5 = _super5.call(this, props);

    _this5.timeStringsToMoment = function (dateStrings) {
      var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'HH:mm:ss';
      var values = [];

      if (Array.isArray(dateStrings) && dateStrings.length === 2) {
        values.push(moment(dateStrings[0], format));
        values.push(moment(dateStrings[1], format));
      }

      return values;
    };

    _this5.momentToTimeStrings = function (dates) {
      var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'HH:mm:ss';
      var values = [];

      if (Array.isArray(dates) && dates.length === 2) {
        values.push(dates[0].format(format));
        values.push(dates[1].format(format));
      }

      return values;
    };

    _this5.onOpenChange = function (open) {
      _this5.setState({
        open: open
      }, _this5.openTimerPicker);

      if (_this5.props.onOpenChange) {
        _this5.props.onOpenChange(open);
      }
    };

    _this5.openTimerPicker = function () {
      if (_this5.state.open) {
        var timeBtn = document.querySelector('.ant-calendar-time-picker-btn');

        if (timeBtn) {
          _this5.setTimeBtn(timeBtn);
        } else {
          _this5.interval = setInterval(function () {
            var timeBtn = document.querySelector('.ant-calendar-time-picker-btn');

            if (timeBtn) {
              _this5.setTimeBtn(timeBtn);

              clearInterval(_this5.interval);
            }
          }, 16);
        }
      }
    };

    _this5.setTimeBtn = function (timeBtn) {
      if (timeBtn.style.visibility !== 'hidden') {
        timeBtn.click();
        timeBtn.style.visibility = 'hidden';
      }
    };

    _this5.onOk = function (dates) {
      if (dates[0].isAfter(dates[1])) {
        dates.reverse();
      }

      _this5.setState({
        value: dates
      });

      if (_this5.props.onChange) {
        _this5.props.onChange(dates, _this5.momentToTimeStrings(dates, _this5.props.format));
      }
    };

    _this5.state = {
      open: false,
      value: _this5.timeStringsToMoment(props.value, props.format)
    };
    return _this5;
  }

  _createClass(TimerRangePicker, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if ('value' in nextProps) {
        this.setState({
          value: this.timeStringsToMoment(nextProps.value, nextProps.format)
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var className = classNames(_defineProperty({
        'mk-timer-range-picker': true
      }, this.props.className, !!this.props.className));
      var _this$state5 = this.state,
          value = _this$state5.value,
          open = _this$state5.open;

      var _this$props5 = this.props;
          _this$props5.mode;
          _this$props5.value;
          _this$props5.onOpenChange;
          _this$props5.onChange;
          var rest = _objectWithoutProperties(_this$props5, _excluded5);

      return /*#__PURE__*/React__default.createElement(DatePicker.RangePicker, _extends({
        value: value,
        open: open,
        format: "HH:mm:ss",
        showTime: true,
        onOpenChange: this.onOpenChange,
        onOk: this.onOk
      }, rest, {
        className: className
      }));
    }
  }]);

  return TimerRangePicker;
}(React__default.Component);

DatePickerComponent.TimerRangePicker = TimerRangePicker;
DatePickerComponent.MonthRangePicker = MonthRangePicker;
DatePickerComponent.YearRangePicker = YearRangePicker;
DatePickerComponent.TimerPicker = TimerPicker;
DatePickerComponent.YearPicker = YearPicker;
DatePickerComponent.MonthPicker = DatePicker.MonthPicker;
DatePickerComponent.RangePicker = DatePicker.RangePicker;
DatePickerComponent.momentToString = momentToString;
DatePickerComponent.moment = moment;

export { DatePickerComponent as default };