@txdfe/at/lib/time-picker/range-picker.js

一个设计体系组件库

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _moment = _interopRequireDefault(require("moment"));
var _panel = _interopRequireDefault(require("./panel"));
var _input = _interopRequireDefault(require("../input"));
var _overlay = _interopRequireDefault(require("../overlay"));
var _zhCn = _interopRequireDefault(require("../locale/zh-cn"));
var _utils = require("./utils");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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); }
var Popup = _overlay["default"].Popup;
var timePickerLocale = _zhCn["default"].TimePicker;
var noop = function noop() {};
var getFormatValues = function getFormatValues(values, format) {
  if (!Array.isArray(values)) {
    return [null, null];
  }
  return [(0, _utils.formatDateValue)(values[0], format), (0, _utils.formatDateValue)(values[1], format)];
};
var RangePicker = /*#__PURE__*/function (_React$Component) {
  function RangePicker(props) {
    var _this;
    _classCallCheck(this, RangePicker);
    _this = _callSuper(this, RangePicker, [props]);
    _defineProperty(_this, "onMouseOver", function () {
      _this.setState({
        isHover: true
      });
    });
    _defineProperty(_this, "onMouseOut", function () {
      _this.setState({
        isHover: false
      });
    });
    _defineProperty(_this, "onVisibleChange", function (visible, type) {
      if (!('visible' in _this.props)) {
        _this.setState({
          visible: visible
        });
      }
      _this.props.onVisibleChange(visible, type);
    });
    _defineProperty(_this, "onSelectStartTime", function (value) {
      var _this$state = _this.state,
        startValue = _this$state.startValue,
        endValue = _this$state.endValue;
      if (!('value' in _this.props)) {
        _this.setState({
          startValue: value,
          startInputing: false
        });
      }
      if (!startValue || startValue && value.valueOf() !== startValue.valueOf()) {
        _this.onValueChange([value, endValue]);
      }
    });
    _defineProperty(_this, "onSelectEndTime", function (value) {
      var _this$state2 = _this.state,
        startValue = _this$state2.startValue,
        endValue = _this$state2.endValue;
      if (!('value' in _this.props)) {
        _this.setState({
          endValue: value,
          endInputing: false
        });
      }
      if (!endValue || endValue && value.valueOf() !== endValue.valueOf()) {
        _this.onValueChange([startValue, value]);
      }
    });
    _defineProperty(_this, "onValueChange", function (v) {
      var format = _this.props.format;
      var ret = _this.inputAsString ? [v[0].format(format), v[1].format(format)] : v;
      _this.props.onChange(ret);
    });
    _defineProperty(_this, "onClearValue", function () {
      _this.setState({
        startValue: '',
        endValue: '',
        startInputStr: '',
        endInputStr: ''
      });
      var ret = _this.inputAsString ? ['', ''] : [null, null];
      _this.props.onChange(ret);
    });
    _defineProperty(_this, "onTriggerChange", function (v, e, eventType) {
      if (!('value' in _this.props)) {
        if (eventType === 'clear') {
          e.stopPropagation();
          _this.onClearValue();
        }
      } else if (eventType === 'clear') {
        // 受控状态下用户点击 clear
        e.stopPropagation();
        var ret = _this.inputAsString ? ['', ''] : [null, null];
        _this.props.onChange(ret);
      }
    });
    _defineProperty(_this, "onStartInputChange", function (value) {
      if (!('value' in _this.props)) {
        _this.setState({
          startInputing: true,
          startInputStr: value
        });
      }
    });
    _defineProperty(_this, "onEndInputChange", function (value) {
      if (!('value' in _this.props)) {
        _this.setState({
          endInputing: true,
          endInputStr: value
        });
      }
    });
    _defineProperty(_this, "onStartInputBlur", function () {
      var _this$state3 = _this.state,
        startValue = _this$state3.startValue,
        startInputStr = _this$state3.startInputStr,
        endValue = _this$state3.endValue;
      if (!startValue && startInputStr) {
        var format = _this.props.format;
        var parsed = (0, _moment["default"])(startInputStr, format, true);
        if (parsed.isValid()) {
          _this.setState({
            startValue: parsed,
            startInputStr: ''
          });
          _this.onValueChange([parsed, endValue]);
        }
        _this.setState({
          startInputing: false
        });
      }
    });
    _defineProperty(_this, "onEndInputBlur", function () {
      var _this$state4 = _this.state,
        startValue = _this$state4.startValue,
        endInputStr = _this$state4.endInputStr,
        endValue = _this$state4.endValue;
      if (!endValue && endInputStr) {
        var format = _this.props.format;
        var parsed = (0, _moment["default"])(endInputStr, format, true);
        if (parsed.isValid()) {
          _this.setState({
            endValue: parsed,
            endInputStr: ''
          });
          _this.onValueChange([startValue, parsed]);
        }
        _this.setState({
          endInputing: false
        });
      }
    });
    _defineProperty(_this, "renderTrigger", function () {
      var _this$props = _this.props,
        prefix = _this$props.prefix,
        size = _this$props.size,
        locale = _this$props.locale,
        disabled = _this$props.disabled,
        format = _this$props.format;
      var _this$state5 = _this.state,
        startValue = _this$state5.startValue,
        endValue = _this$state5.endValue,
        startInputStr = _this$state5.startInputStr,
        endInputStr = _this$state5.endInputStr,
        startInputing = _this$state5.startInputing,
        endInputing = _this$state5.endInputing;
      var startInputValue = startInputing ? startInputStr : startValue && startValue.format(format) || '';
      var endInputValue = endInputing ? endInputStr : endValue && endValue.format(format) || '';
      return /*#__PURE__*/_react["default"].createElement("div", {
        tabIndex: disabled ? null : 0
      }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
        size: size,
        readOnly: true,
        disabled: disabled,
        placeholder: locale.startPlaceholder,
        onChange: _this.onTrigger,
        value: startInputValue,
        hasBorder: false,
        className: "".concat(prefix, "time-range-picker-trigger-start-input")
      }), /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefix, "time-range-picker-trigger-separator")
      }, "~"), /*#__PURE__*/_react["default"].createElement(_input["default"], {
        size: size,
        readOnly: true,
        disabled: disabled,
        placeholder: locale.endPlaceholder,
        value: endInputValue,
        hasBorder: false,
        hint: "clock",
        hasClear: true,
        onChange: _this.onTriggerChange,
        className: "".concat(prefix, "time-range-picker-trigger-start-input")
      }));
    });
    _defineProperty(_this, "renderTimePanel", function () {
      var _this$props2 = _this.props,
        prefix = _this$props2.prefix,
        locale = _this$props2.locale,
        disabled = _this$props2.disabled,
        disabledHours = _this$props2.disabledHours,
        disabledMinutes = _this$props2.disabledMinutes,
        disabledSeconds = _this$props2.disabledSeconds,
        format = _this$props2.format,
        hourStep = _this$props2.hourStep,
        minuteStep = _this$props2.minuteStep,
        secondStep = _this$props2.secondStep;
      var _this$state6 = _this.state,
        startValue = _this$state6.startValue,
        endValue = _this$state6.endValue,
        startInputStr = _this$state6.startInputStr,
        endInputStr = _this$state6.endInputStr,
        startInputing = _this$state6.startInputing,
        endInputing = _this$state6.endInputing;
      var startInputValue = startInputing ? startInputStr : startValue && startValue.format(format) || '';
      var endInputValue = endInputing ? endInputStr : endValue && endValue.format(format) || '';
      var showSecond = format.indexOf('s') > -1;
      var sharedTimePickerProps = {
        prefix: prefix,
        locale: locale,
        disabled: disabled,
        showSecond: showSecond,
        hourStep: hourStep,
        minuteStep: minuteStep,
        secondStep: secondStep
      };
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "time-range-picker-panel")
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefix, "time-range-picker-panel-header")
      }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
        size: "xs",
        onChange: _this.onStartInputChange,
        onBlur: _this.onStartInputBlur,
        onPressEnter: _this.onStartInputBlur,
        disabled: disabled,
        value: startInputValue,
        placeholder: format,
        className: "".concat(prefix, "time-range-picker-panel-start-input")
      }), /*#__PURE__*/_react["default"].createElement("span", {
        className: "".concat(prefix, "time-range-picker-trigger-separator")
      }, "~"), /*#__PURE__*/_react["default"].createElement(_input["default"], {
        size: "xs",
        onChange: _this.onEndInputChange,
        onBlur: _this.onEndInputBlur,
        onPressEnter: _this.onEndInputBlur,
        disabled: disabled,
        value: endInputValue,
        placeholder: format,
        className: "".concat(prefix, "time-range-picker-panel-end-input")
      })), /*#__PURE__*/_react["default"].createElement(_panel["default"], _extends({}, sharedTimePickerProps, {
        disabledHours: disabledHours[0],
        disabledMinutes: disabledMinutes[0],
        disabledSeconds: disabledSeconds[0],
        className: "".concat(prefix, "time-range-picker-start-panel"),
        value: startValue,
        onSelect: _this.onSelectStartTime
      })), /*#__PURE__*/_react["default"].createElement(_panel["default"], _extends({}, sharedTimePickerProps, {
        disabledHours: disabledHours[1],
        disabledMinutes: disabledMinutes[1],
        disabledSeconds: disabledSeconds[1],
        className: "".concat(prefix, "time-range-picker-end-panel"),
        value: endValue,
        onSelect: _this.onSelectEndTime
      })));
    });
    var val = props.value || props.defaultValue;
    var _value = getFormatValues(val, props.format);
    _this.inputAsString = val && typeof val[0] === 'string' && typeof val[1] === 'string';
    _this.state = {
      startInputStr: '',
      endInputStr: '',
      startInputing: false,
      endInputing: false,
      visible: props.visible || props.defaultVisible,
      startValue: _value[0] || '',
      endValue: _value[1] || '',
      isHover: false
    };
    return _this;
  }
  _inherits(RangePicker, _React$Component);
  return _createClass(RangePicker, [{
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      if (this.props.visible !== nextProps.visible) {
        this.setState({
          visible: nextProps.visible
        });
      }
      if (this.props.value !== nextProps.value) {
        var value = getFormatValues(nextProps.value, nextProps.format);
        this.setState({
          startValue: value[0],
          endValue: value[1]
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$state7 = this.state,
        visible = _this$state7.visible,
        isHover = _this$state7.isHover;
      var _this$props3 = this.props,
        prefix = _this$props3.prefix,
        followTrigger = _this$props3.followTrigger,
        popupProps = _this$props3.popupProps,
        popupContainer = _this$props3.popupContainer,
        popupAlign = _this$props3.popupAlign,
        popupTriggerType = _this$props3.popupTriggerType,
        popupStyle = _this$props3.popupStyle,
        popupClassName = _this$props3.popupClassName,
        disabled = _this$props3.disabled,
        style = _this$props3.style,
        className = _this$props3.className;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: (0, _classnames["default"])(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefix, "time-range-picker"), true), "".concat(prefix, "time-range-picker-active"), visible && !disabled), "".concat(prefix, "time-range-picker-hover"), isHover && !disabled), "".concat(prefix, "time-range-picker-disabled"), disabled), "className", className)),
        style: style,
        onMouseOver: this.onMouseOver,
        onMouseOut: this.onMouseOut
      }, /*#__PURE__*/_react["default"].createElement(Popup, _extends({}, popupProps, {
        offset: [0, 4],
        closable: false,
        trigger: this.renderTrigger(),
        triggerType: popupTriggerType,
        followTrigger: followTrigger,
        container: popupContainer,
        disabled: disabled,
        visible: visible,
        onVisibleChange: this.onVisibleChange,
        align: popupAlign,
        style: popupStyle,
        className: popupClassName
      }), this.renderTimePanel()));
    }
  }]);
}(_react["default"].Component);
_defineProperty(RangePicker, "propTypes", {
  /**
   * 设置trigger的className
   */
  className: _propTypes["default"].string,
  /**
   * 设置trigger的style
   */
  style: _propTypes["default"].object,
  /**
   * 设置trigger的style
   */
  size: _propTypes["default"].oneOf(['small', 'medium']),
  /**
   * 设置组件className前缀
   */
  prefix: _propTypes["default"].string,
  /**
   * 语言包
   */
  locale: _propTypes["default"].object,
  /**
   * 弹层是否默认可见，初始化时有效
   */
  defaultVisible: _propTypes["default"].bool,
  /**
   * 弹层是否可见，受控
   */
  visible: _propTypes["default"].bool,
  /**
   * 弹层显隐回调
   */
  onVisibleChange: _propTypes["default"].func,
  /**
   * 默认值，moment或字符串数组，非受控
   */
  defaultValue: _propTypes["default"].array,
  /**
   * moment或字符串数组，受控
   */
  value: _propTypes["default"].array,
  /**
   * 整体值发生变化时触发的回调方法
   */
  onChange: _propTypes["default"].func,
  /**
   * 时间格式
   */
  format: _propTypes["default"].string,
  /**
   * 小时选择步长
   */
  hourStep: _propTypes["default"].number,
  /**
   * 分钟选择步长
   */
  minuteStep: _propTypes["default"].number,
  /**
   * 秒选择步长
   */
  secondStep: _propTypes["default"].number,
  /**
   * 禁用的小时，数组
   * @return {Boolean} 是否禁用
   */
  disabledHours: _propTypes["default"].arrayOf(_propTypes["default"].func),
  /**
   * 禁用的分钟，数组
   * @return {Boolean} 是否禁用
   */
  disabledMinutes: _propTypes["default"].arrayOf(_propTypes["default"].func),
  /**
   * 禁用的秒，数组
   * @return {Boolean} 是否禁用
   */
  disabledSeconds: _propTypes["default"].arrayOf(_propTypes["default"].func),
  /**
   * 弹层容器
   * @param {Object} target 目标节点
   * @return {ReactNode} 容器节点
   */
  popupContainer: _propTypes["default"].func,
  /**
   * 弹层对齐方式, 详情见Overlay 文档
   */
  popupAlign: _propTypes["default"].string,
  /**
   * 弹层触发方式
   */
  popupTriggerType: _propTypes["default"].oneOf(['click', 'hover']),
  /**
   * 弹层自定义样式
   */
  popupStyle: _propTypes["default"].object,
  /**
   * 弹层自定义样式类
   */
  popupClassName: _propTypes["default"].string,
  /**
   * 弹层属性
   */
  popupProps: _propTypes["default"].object,
  /**
   * 是否跟随滚动
   */
  followTrigger: _propTypes["default"].bool,
  /**
   * 是否禁用
   */
  disabled: _propTypes["default"].bool
});
_defineProperty(RangePicker, "defaultProps", {
  prefix: 'next-',
  size: 'medium',
  onVisibleChange: noop,
  onChange: noop,
  format: 'HH:mm:ss',
  locale: timePickerLocale,
  hourStep: 1,
  minuteStep: 1,
  secondStep: 1,
  disabled: false,
  disabledHours: [function () {
    return false;
  }, function () {
    return false;
  }],
  disabledMinutes: [function () {
    return false;
  }, function () {
    return false;
  }],
  disabledSeconds: [function () {
    return false;
  }, function () {
    return false;
  }],
  popupAlign: 'tl bl',
  popupTriggerType: 'click'
});
var _default = exports["default"] = RangePicker;