@chaoswise/ui 3.0.15 → 3.0.16

package/lib/TimeRangeSlider/index.js

@@ -0,0 +1,562 @@
+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); }
+import _Popover from "@chaoswise/ui/lib/Popover";
+import _Input from "@chaoswise/ui/lib/Input";
+import _message from "@chaoswise/ui/lib/message";
+var _excluded = ["timeDomain", "number", "unit", "isRecently", "value"],
+  _excluded2 = ["value", "timeDomain", "number", "unit", "isRecently"];
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return 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); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { forwardRef, useState, useEffect, useMemo, useRef, useImperativeHandle } from "react";
+import { CloseOutlined } from "@ant-design/icons";
+import PropTypes from "prop-types";
+import classnames from "classnames";
+import TimeSpan from "./TimeSpan";
+import TimeRangeSliderCmp from "./TimeRangeSliderCmp";
+import Refresh from "./Refresh";
+import CalendarSvg from "./assets/Calendar";
+import useConfigContext from "../useConfigContext";
+import { echoInputValue, getUnit, judgeType, getChangeUnitDate, isInvalidDate, funcValueChangeArrayValue, getCorrectValue, getFinalDateOption, getTruthDateCount, isLessThanMinTimeSpan, isExceedMaxTimeSpan, isWithinTimeSpan, getYears, computedRecentlyValue } from "./utils";
+import { formatMessage } from "../utils";
+import useStyle from "./styles/index.style";
+import { useIntl } from "../locales";
+var TimeRangeSlider = /*#__PURE__*/forwardRef(function (props, ref) {
+  var defaultValue = props.defaultValue,
+    value = props.value,
+    classNameWrapper = props.classNameWrapper,
+    _props$onChange = props.onChange,
+    _onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+    _props$onInitChange = props.onInitChange,
+    _onInitChange = _props$onInitChange === void 0 ? function () {} : _props$onInitChange,
+    _props$refreshOption = props.refreshOption,
+    refreshOption = _props$refreshOption === void 0 ? {} : _props$refreshOption,
+    _props$timeSpanOption = props.timeSpanOption,
+    timeSpanOption = _props$timeSpanOption === void 0 ? {} : _props$timeSpanOption,
+    inputPrefixIcon = props.inputPrefixIcon,
+    _props$format = props.format,
+    format = _props$format === void 0 ? "YYYY/MM/DD HH:mm:ss" : _props$format,
+    forceRenderTitle = props.forceRenderTitle,
+    _props$timeSliderOpti = props.timeSliderOption,
+    timeSliderOption = _props$timeSliderOpti === void 0 ? {} : _props$timeSliderOpti;
+  var _refreshOption$onAuto = refreshOption.onAutoRefresh,
+    onAutoRefresh = _refreshOption$onAuto === void 0 ? function () {} : _refreshOption$onAuto,
+    _refreshOption$onAuto2 = refreshOption.onAutoRefreshChange,
+    onAutoRefreshChange = _refreshOption$onAuto2 === void 0 ? function () {} : _refreshOption$onAuto2,
+    _refreshOption$delay = refreshOption.delay,
+    delay = _refreshOption$delay === void 0 ? 5000 : _refreshOption$delay,
+    openAutoRefresh = refreshOption.openAutoRefresh,
+    _refreshOption$showAu = refreshOption.showAutoRefresh,
+    showAutoRefresh = _refreshOption$showAu === void 0 ? true : _refreshOption$showAu,
+    _refreshOption$isRece = refreshOption.isRecentlyOpenRefresh,
+    isRecentlyOpenRefresh = _refreshOption$isRece === void 0 ? true : _refreshOption$isRece;
+  var _timeSpanOption$timeS = timeSpanOption.timeSpanBoundaryStart,
+    timeSpanBoundaryStart = _timeSpanOption$timeS === void 0 ? 10 * 60 : _timeSpanOption$timeS,
+    _timeSpanOption$timeS2 = timeSpanOption.timeSpanBoundary,
+    timeSpanBoundary = _timeSpanOption$timeS2 === void 0 ? 24 * 60 * 60 : _timeSpanOption$timeS2,
+    _timeSpanOption$days = timeSpanOption.days,
+    days = _timeSpanOption$days === void 0 ? 30 : _timeSpanOption$days;
+  var intl = useIntl();
+  var _ref = (intl === null || intl === void 0 ? void 0 : intl.options) || {},
+    _ref$currentLocale = _ref.currentLocale,
+    locale = _ref$currentLocale === void 0 ? "zh_CN" : _ref$currentLocale;
+  var _useConfigContext = useConfigContext(),
+    getPrefixCls = _useConfigContext.getPrefixCls;
+  var prefixCls = getPrefixCls();
+  var _useStyle = useStyle("".concat(prefixCls, "-time-range-slider")),
+    _useStyle2 = _slicedToArray(_useStyle, 3),
+    wrapCSSVar = _useStyle2[0],
+    hashId = _useStyle2[1],
+    cssVarCls = _useStyle2[2];
+  // 输入框是否获取焦点
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocus = _useState2[0],
+    setIsFocus = _useState2[1];
+  // 输入框回填内容
+  var _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
+  // 当前默认时间项
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dateValue = _useState6[0],
+    setDateValue = _useState6[1];
+  // 记录切换之后的时间项
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    recordDateValue = _useState8[0],
+    setRecordDateValue = _useState8[1];
+  // 自动刷新状态是否开启
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isAutoRefresh = _useState10[0],
+    setIsAutoRefresh = _useState10[1];
+  // 特殊时间选择器外壳容器
+  var calendarRef = useRef(null);
+  // 定时器计数
+  var timeRef = useRef(null);
+  var isInputRef = useRef(false); // 标记，输入框非默认值，输入内容
+  var isClickAutoRefresh = useRef(false); // 标记 点击自动刷新按钮
+  // 输入框处理聚焦失焦
+  var inputRef = useRef(null);
+  // 含有刷新组件暴露的方法
+  var refreshRef = useRef(null);
+  var isHandleClickRef = useRef(true);
+  // 组件内部方法抛出
+  useImperativeHandle(ref, function () {
+    var _refreshRef$current;
+    return {
+      onStop: onStop,
+      onRefresh: (_refreshRef$current = refreshRef.current) === null || _refreshRef$current === void 0 ? void 0 : _refreshRef$current.onRefresh,
+      onClickAutoRefresh: onClickAutoRefresh
+    };
+  });
+  // 初始时记录当前时间项
+  useEffect(function () {
+    var dateValue = {};
+    if (value) {
+      dateValue = value;
+    } else if (defaultValue) {
+      dateValue = defaultValue;
+    }
+    var _dateValue = dateValue,
+      values = _dateValue.value;
+    var _judgeType = judgeType(dateValue),
+      _judgeType2 = _slicedToArray(_judgeType, 2),
+      isRule = _judgeType2[0],
+      captureUnit = _judgeType2[1];
+    if (!isRule && !values) {
+      setIsAutoRefresh(true);
+    }
+    var initValue = dateValue;
+    if (isRule) {
+      initValue = _objectSpread(_objectSpread({}, initValue), {}, {
+        isRecently: true,
+        value: getChangeUnitDate(captureUnit[0], captureUnit[1]),
+        number: captureUnit[0],
+        unit: captureUnit[1] === "mo" ? "M" : captureUnit[1]
+      });
+    } else if (values) {
+      initValue = _objectSpread(_objectSpread({}, initValue), {}, {
+        isRecently: false,
+        value: funcValueChangeArrayValue(values)
+      });
+    }
+    _onInitChange(initValue);
+    setDateValue(dateValue);
+  }, []);
+  useEffect(function () {
+    if (value) {
+      setRecordDateValue(value);
+    } else if (defaultValue) {
+      setRecordDateValue(defaultValue);
+    }
+  }, [defaultValue, value]);
+  var enableAutoRefresh = useMemo(function () {
+    return openAutoRefresh !== undefined ? openAutoRefresh : isAutoRefresh;
+  }, [openAutoRefresh, isAutoRefresh]);
+  // 输入框回显
+  useEffect(function () {
+    setInputValue(echoInputValue(recordDateValue, isFocus, locale, format, forceRenderTitle, enableAutoRefresh, timeSpanBoundary));
+  }, [recordDateValue, isFocus, locale, format, forceRenderTitle, enableAutoRefresh, timeSpanBoundary]);
+  useEffect(function () {
+    var _judgeType3 = judgeType(recordDateValue),
+      _judgeType4 = _slicedToArray(_judgeType3, 1),
+      isRule = _judgeType4[0];
+    var isHasDate = !isRule && !recordDateValue.value ? false : true;
+    var _isAutoRefresh = enableAutoRefresh;
+    if (isHasDate) {
+      if (!isRecentlyOpenRefresh) {
+        if (!isRule) {
+          if (enableAutoRefresh) {
+            onAutoRefreshChange(false);
+            _isAutoRefresh = false;
+          }
+        } else {
+          if (isRule && isClickAutoRefresh.current) {
+            if (!enableAutoRefresh) {
+              onAutoRefreshChange(true);
+              _isAutoRefresh = true;
+            }
+          }
+        }
+        isClickAutoRefresh.current = false;
+      } else {
+        if (isRule) {
+          if (!enableAutoRefresh) {
+            onAutoRefreshChange(true);
+            _isAutoRefresh = true;
+          }
+        } else {
+          if (enableAutoRefresh) {
+            onAutoRefreshChange(false);
+            _isAutoRefresh = false;
+          }
+        }
+      }
+      setIsAutoRefresh(_isAutoRefresh);
+    } else {
+      isClickAutoRefresh.current = false;
+    }
+  }, [recordDateValue, isRecentlyOpenRefresh]);
+  useEffect(function () {
+    var values = recordDateValue.value;
+    var _judgeType5 = judgeType(recordDateValue),
+      _judgeType6 = _slicedToArray(_judgeType5, 3),
+      isRule = _judgeType6[0],
+      captureUnit = _judgeType6[1],
+      recordUnit = _judgeType6[2];
+    if (enableAutoRefresh && isRule && showAutoRefresh) {
+      timeRef.current = setInterval(function () {
+        var _values = [];
+        if (values) {
+          _values = computedRecentlyValue(values);
+        } else {
+          _values = getChangeUnitDate(captureUnit[0], captureUnit[1]);
+        }
+        var newValue = _objectSpread(_objectSpread({}, recordDateValue), {}, {
+          timeDomain: recordUnit,
+          number: captureUnit[0],
+          unit: captureUnit[1] === "mo" ? "M" : captureUnit[1],
+          value: _values,
+          isRecently: true
+        });
+        onAutoRefresh(newValue);
+      }, delay);
+    }
+    if (enableAutoRefresh && !isRule && !values && showAutoRefresh) {
+      timeRef.current = setInterval(function () {
+        onAutoRefresh(recordDateValue);
+      }, delay);
+    }
+    return function () {
+      clearInterval(timeRef.current);
+    };
+  }, [enableAutoRefresh, recordDateValue, delay, showAutoRefresh]);
+  var _recordDateValue = useMemo(function () {
+    var values = recordDateValue.value;
+    var _judgeType7 = judgeType(recordDateValue),
+      _judgeType8 = _slicedToArray(_judgeType7, 2),
+      isRule = _judgeType8[0],
+      captureUnit = _judgeType8[1];
+    var initValue = recordDateValue;
+    if (isRule) {
+      initValue = _objectSpread(_objectSpread({}, initValue), {}, {
+        isRecently: true,
+        value: getChangeUnitDate(captureUnit[0], captureUnit[1]),
+        number: captureUnit[0],
+        unit: captureUnit[1] === "mo" ? "M" : captureUnit[1]
+      });
+    } else if (values) {
+      initValue = _objectSpread(_objectSpread({}, initValue), {}, {
+        isRecently: false,
+        value: funcValueChangeArrayValue(values)
+      });
+    }
+    return initValue;
+  }, [recordDateValue]);
+  // 日期是否存在
+  var _useMemo = useMemo(function () {
+      // 不符合最近时间格式和没有日期数据返回false
+      var values = recordDateValue.value;
+      var _judgeType9 = judgeType(recordDateValue),
+        _judgeType10 = _slicedToArray(_judgeType9, 2),
+        isRule = _judgeType10[0],
+        captureUnit = _judgeType10[1];
+      values = funcValueChangeArrayValue(values);
+      var isHasDate = true;
+      var isRightDisabled = false;
+      var isDisabledEnlargeBtn = false;
+      var years = getYears(timeSpanBoundary);
+      if (isRule) {
+        isRightDisabled = true;
+        if (!values) {
+          values = getChangeUnitDate(captureUnit[0], captureUnit[1]);
+        }
+        if (captureUnit[1] === "y" && Number(captureUnit[0]) >= years) {
+          isDisabledEnlargeBtn = true;
+        }
+      }
+      if (!isRule && !values) {
+        isHasDate = false;
+      }
+      return [isHasDate, values, isRightDisabled, isDisabledEnlargeBtn];
+    }, [recordDateValue, timeSpanBoundary]),
+    _useMemo2 = _slicedToArray(_useMemo, 4),
+    isHasDate = _useMemo2[0],
+    _defaultValue = _useMemo2[1],
+    isRightDisabled = _useMemo2[2],
+    isDisabledEnlargeBtn = _useMemo2[3];
+  // 点击空白处日历切换
+  useEffect(function () {
+    document.addEventListener("click", clickBody);
+    return function () {
+      document.removeEventListener("click", clickBody);
+    };
+  }, [_defaultValue]);
+  // 日历模式下点击body
+  var clickBody = function clickBody(e) {
+    // 点击bodyfasle
+    var targetInput = calendarRef.current.querySelector(".".concat(prefixCls, "-time-range-slider-box-wrapper"));
+    var customPopoverDom = calendarRef.current.querySelector(".custom-popover-wrapper");
+    if (targetInput && customPopoverDom) {
+      if (!targetInput.contains(e.target) && !customPopoverDom.contains(e.target) && isHandleClickRef.current) {
+        // 点击弹窗和输入框以外的区域触发(非点击不触发move事件)
+        setIsFocus(false);
+      }
+    }
+  };
+  // 恢复默认配置
+  var onRecover = function onRecover() {
+    var values = dateValue.value,
+      key = dateValue.key;
+    var returnValue = _objectSpread(_objectSpread({}, dateValue), {}, {
+      value: funcValueChangeArrayValue(values)
+    });
+    returnValue = getCorrectValue(returnValue, key);
+    _onChange(returnValue);
+    if (!value) {
+      setRecordDateValue(returnValue);
+    }
+  };
+  // 输入框前缀图标,
+  var inputPrefix = /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-time-range-slider-prefix-wrapper"),
+    onClick: function onClick() {
+      setIsFocus(false);
+    }
+  }, inputPrefixIcon ? inputPrefixIcon : /*#__PURE__*/React.createElement(CalendarSvg, {
+    className: "".concat(prefixCls, "-time-range-slider-prefix-icon")
+  }));
+  var timeDomain = recordDateValue.timeDomain,
+    number = recordDateValue.number,
+    unit = recordDateValue.unit,
+    isRecently = recordDateValue.isRecently,
+    values = recordDateValue.value,
+    rest = _objectWithoutProperties(recordDateValue, _excluded);
+  var _values = dateValue.value,
+    _timeDomain = dateValue.timeDomain,
+    _number = dateValue.number,
+    _unit = dateValue.unit,
+    _isRecently = dateValue.isRecently,
+    dateValueRest = _objectWithoutProperties(dateValue, _excluded2);
+  // 输入框获取焦点
+  var onInputFocus = function onInputFocus(e) {
+    e.persist();
+    setIsFocus(true);
+    setTimeout(function () {
+      // 全选文本
+      e.target.select();
+    }, 100);
+  };
+  // 外部获取ref停止自动刷新
+  var onStop = function onStop() {
+    if (enableAutoRefresh) {
+      var _refreshRef$current2, _refreshRef$current3;
+      ((_refreshRef$current2 = refreshRef.current) === null || _refreshRef$current2 === void 0 ? void 0 : _refreshRef$current2.onAutoRefresh) && ((_refreshRef$current3 = refreshRef.current) === null || _refreshRef$current3 === void 0 ? void 0 : _refreshRef$current3.onAutoRefresh());
+    }
+  };
+  var onClickAutoRefresh = function onClickAutoRefresh() {
+    var _refreshRef$current4, _refreshRef$current5;
+    ((_refreshRef$current4 = refreshRef.current) === null || _refreshRef$current4 === void 0 ? void 0 : _refreshRef$current4.onAutoRefresh) && ((_refreshRef$current5 = refreshRef.current) === null || _refreshRef$current5 === void 0 ? void 0 : _refreshRef$current5.onAutoRefresh());
+  };
+  // 输入框按下回车
+  var onPressEnter = function onPressEnter(e) {
+    if (!isInputRef.current) return;
+    var _getUnit = getUnit(inputValue),
+      isRule = _getUnit.isRule,
+      captureUnit = _getUnit.captureUnit;
+    var values = getChangeUnitDate(captureUnit[0], captureUnit[1]);
+    if (isRule) {
+      var returnValue = getCorrectValue({
+        value: values
+      }, inputValue);
+      var isInvalidDate_ = isInvalidDate(returnValue.value);
+      if (!isInvalidDate_) {
+        var passValue = returnValue.value;
+        if (isLessThanMinTimeSpan(passValue, timeSpanBoundaryStart)) {
+          _message.error("小于限制的最小时间跨度，请重新输入");
+          return;
+        }
+        if (isExceedMaxTimeSpan(passValue, timeSpanBoundary)) {
+          _message.error(intl.get("e8a046c4-4611-47b9-bef0-cb46de7dd733").d("超过了限制的最大时间跨度，请重新输入"));
+          return;
+        }
+        if (!isWithinTimeSpan(passValue, days)) {
+          _message.error("不在要求的时间跨度之内,请重新输入");
+          return;
+        }
+        _onChange(returnValue);
+        setIsFocus(false);
+        if (!value) {
+          setRecordDateValue(returnValue);
+        }
+      } else {
+        _message.error(intl.get("e2008629-6fc2-4222-b28c-ada43aa79a74").d("不符合输入格式,请重新输入"));
+      }
+    } else {
+      var finalDateOption = getFinalDateOption(inputValue);
+      var _dateValue2 = finalDateOption.dateValue;
+      var dateCount = getTruthDateCount(_dateValue2);
+      if (dateCount === 2) {
+        var _returnValue = getCorrectValue({
+          value: _dateValue2
+        });
+        var _passValue = _returnValue.value;
+        if (isLessThanMinTimeSpan(_passValue, timeSpanBoundaryStart)) {
+          _message.error("小于限制的最小时间跨度，请重新输入");
+          return;
+        }
+        if (isExceedMaxTimeSpan(_passValue, timeSpanBoundary)) {
+          _message.error(intl.get("e8a046c4-4611-47b9-bef0-cb46de7dd733").d("超过了限制的最大时间跨度，请重新输入"));
+          return;
+        }
+        if (!isWithinTimeSpan(_passValue, days)) {
+          _message.error("不在要求的时间跨度之内,请重新输入");
+          return;
+        }
+        _onChange(_returnValue);
+        setIsFocus(false);
+        if (!value) {
+          setRecordDateValue(_returnValue);
+        }
+      } else {
+        _message.error(formatMessage(intl.get("e2008629-6fc2-4222-b28c-ada43aa79a74").d("不符合输入格式,请重新输入")));
+      }
+    }
+    isInputRef.current = false;
+  };
+  var onCancel = function onCancel() {
+    setIsFocus(false);
+  };
+  var _title = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, timeSliderOption.title), /*#__PURE__*/React.createElement(CloseOutlined, {
+    onClick: onCancel,
+    className: "time-slider-popover-close-icon"
+  }));
+  var commonProps = {
+    onChange: _onChange,
+    recordDateValue: recordDateValue,
+    setRecordDateValue: setRecordDateValue,
+    value: value,
+    isAutoRefresh: isAutoRefresh,
+    setIsAutoRefresh: setIsAutoRefresh,
+    refreshOption: refreshOption,
+    enableAutoRefresh: enableAutoRefresh,
+    timeSpanOption: timeSpanOption
+  };
+  var timeSpanProps = _objectSpread(_objectSpread({}, commonProps), {}, {
+    isHasDate: isHasDate,
+    onRecover: onRecover,
+    isRightDisabled: isRightDisabled,
+    isDisabledEnlargeBtn: isDisabledEnlargeBtn
+  });
+  var refreshProps = _objectSpread(_objectSpread({}, commonProps), {}, {
+    isHasDate: isHasDate,
+    isClickAutoRefresh: isClickAutoRefresh
+  });
+  return wrapCSSVar( /*#__PURE__*/React.createElement("div", {
+    className: classnames(hashId, cssVarCls, "".concat(prefixCls, "-time-range-slider-wrapper"), classNameWrapper),
+    ref: calendarRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-time-range-slider-box-wrapper")
+  }, /*#__PURE__*/React.createElement(_Input, {
+    prefix: inputPrefix,
+    className: "".concat(prefixCls, "-time-range-slider-input-wrapper"),
+    onFocus: onInputFocus,
+    value: inputValue,
+    ref: inputRef,
+    onPressEnter: onPressEnter,
+    onChange: function onChange(e) {
+      if (!isHasDate) return;
+      isInputRef.current = true;
+      setInputValue(e.target.value);
+    }
+  })), /*#__PURE__*/React.createElement(TimeSpan, timeSpanProps), /*#__PURE__*/React.createElement(Refresh, _extends({}, refreshProps, {
+    ref: refreshRef
+  })), /*#__PURE__*/React.createElement(_Popover, {
+    title: _title,
+    open: isFocus,
+    fresh: true,
+    arrow: false,
+    content: /*#__PURE__*/React.createElement(TimeRangeSliderCmp, {
+      value: _recordDateValue.value,
+      onChange: _onChange,
+      visible: isFocus,
+      timeBoundary: {
+        min: timeSpanBoundaryStart * 1000,
+        max: timeSpanBoundary * 1000,
+        days: days
+      },
+      inputRef: inputRef,
+      isHandleClickRef: isHandleClickRef,
+      timeSliderOption: timeSliderOption
+    }),
+    overlayClassName: "custom-popover-wrapper",
+    getPopupContainer: function getPopupContainer(triggerNode) {
+      return triggerNode;
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "relative",
+      height: "100%"
+    }
+  }))));
+});
+TimeRangeSlider.defaultProps = {
+  format: "YYYY/MM/DD HH:mm:ss"
+};
+TimeRangeSlider.propTypes = {
+  /**
+   * 默认value
+   */
+  defaultValue: PropTypes.object,
+  /**
+   * 受控value
+   */
+  value: PropTypes.object,
+  /**
+   * 时间变化的回调onChange({value,isRecently?timeDomain?number?unit?})
+   */
+  onChange: PropTypes.func,
+  /**
+   * 初始时间数据进入时间返回的回调(*主要针对于最近时间)
+   */
+  onInitChange: PropTypes.func,
+  /**
+   * 刷新按钮配置项,详情参考demo中案例注释
+   */
+  refreshOption: PropTypes.object,
+  /**
+   * 时间跨度按钮配置项，详情参考demo中案例注释
+   */
+  timeSpanOption: PropTypes.object,
+  /**
+   * 时间选择器控件外层容器新增外层容器类名
+   */
+  classNameWrapper: PropTypes.string,
+  /**
+   * 非最近日期format展示格式
+   */
+  format: PropTypes.string,
+  /**
+   * 输入框中前缀显示的icon,若不添加按照默认的规则，key值不符合规则且没有value值时为亮色图标，否则为暗色
+   */
+  inputPrefixIcon: PropTypes.node,
+  /**
+   * 输入框回显内容优先按照title回显
+   */
+  forceRenderTitle: PropTypes.bool
+};
+export default TimeRangeSlider;

package/lib/TimeRangeSlider/locale/en_US.js

@@ -0,0 +1,31 @@
+export default {
+  recover: "Restore default",
+  forwardSmooth: "Forward smooth",
+  backSmooth: "Back smooth",
+  ExpandSpan: "Increase the time span by {span} times",
+  refresh: "Refresh",
+  autoRefresh: "Auto refresh",
+  s: "Second",
+  m: "Minute",
+  h: "Hour",
+  d: "Day",
+  mo: "Month",
+  y: "Year",
+  more: "More",
+  "select-calendar": "Select From Calendar",
+  recently: "recently",
+  relative: "relative",
+  absolute: "absolute",
+  unixTimestamp: "Unix",
+  other: "other",
+  history: 'History',
+  clear: 'Clear',
+  "enter manually": "You can manually enter a query statement in the following format",
+  "fit-the-input-format": "Fit the input format",
+  "does-not-match-the-input-format": "Does not match the input format",
+  "the-selected-time-does-not-meet-the-rule-limit": "If the selected time is the same or exceeds the current time, select another time",
+  "the-maximum-time-span-is-exceeded": "The maximum time span is exceeded, please re-enter",
+  "the-maximum-time-span-is-less-than": "The maximum time span is less than the minimum time span, please re-enter",
+  "not-within-the-required-time-span": "Not within the required time span, please re-enter",
+  "unconverted-title": "Unconverted title"
+};

package/lib/TimeRangeSlider/locale/index.js

@@ -0,0 +1,11 @@
+import zh_CN from './zh_CN.js';
+import en_US from './en_US.js';
+import zh_TW from './zh_TW.js';
+export default {
+  zh_CN: zh_CN,
+  en_US: en_US,
+  zh_TW: zh_TW,
+  // 兼容
+  zh: zh_CN,
+  en: en_US
+};

package/lib/TimeRangeSlider/locale/zh_CN.js

@@ -0,0 +1,31 @@
+export default {
+  recover: "恢复默认值",
+  forwardSmooth: "向前平滑",
+  backSmooth: "向后平滑",
+  ExpandSpan: "按{span}倍增加时间跨度",
+  refresh: "刷新",
+  autoRefresh: "自动刷新",
+  s: "秒",
+  m: "分钟",
+  h: "小时",
+  d: "天",
+  mo: "个月",
+  y: "年",
+  more: "更多",
+  "select-calendar": "日历选择",
+  recently: "最近",
+  relative: "相对",
+  absolute: "绝对",
+  unixTimestamp: "Unix",
+  other: "其他",
+  history: '历史记录',
+  clear: '清空',
+  "enter manually": "可根据以下类型，按查询语句格式手动输入",
+  "fit-the-input-format": "符合输入格式",
+  "does-not-match-the-input-format": "不符合输入格式,请重新输入",
+  "the-selected-time-does-not-meet-the-rule-limit": "选择的时间二者相同或者某一时间超过当前时间，请重新选择",
+  "the-maximum-time-span-is-exceeded": "超过了限制的最大时间跨度，请重新输入",
+  "the-maximum-time-span-is-less-than": "小于限制的最小时间跨度，请重新输入",
+  "not-within-the-required-time-span": "不在要求的时间跨度之内,请重新输入",
+  "unconverted-title": "未转化标题"
+};

package/lib/TimeRangeSlider/locale/zh_TW.js

@@ -0,0 +1,31 @@
+export default {
+  recover: "恢復默認值",
+  forwardSmooth: "向前平滑",
+  backSmooth: "向後平滑",
+  ExpandSpan: "按{span}倍增加時間跨度",
+  refresh: "刷新",
+  autoRefresh: "自動刷新",
+  s: "秒",
+  m: "分鐘",
+  h: "小時",
+  d: "天",
+  mo: "個月",
+  y: "年",
+  more: "更多",
+  "select-calendar": "日曆選擇",
+  recently: "最近",
+  relative: "相對",
+  absolute: "絕對",
+  unixTimestamp: "Unix",
+  other: "其他",
+  history: "歷史記錄",
+  clear: "清空",
+  "enter manually": "可根據以下類型，按查詢語句格式手動輸入",
+  "fit-the-input-format": "符合輸入格式",
+  "does-not-match-the-input-format": "不符合輸入格式,請重新輸入",
+  "the-selected-time-does-not-meet-the-rule-limit": "選擇的時間二者相同或者某一時間超過當前時間，請重新選擇",
+  "the-maximum-time-span-is-exceeded": "超過了限制的最大時間跨度，請重新輸入",
+  "the-maximum-time-span-is-less-than": "小於限制的最小時間跨度，請重新輸入",
+  "not-within-the-required-time-span": "不在要求的時間跨度之內，請重新輸入",
+  "unconverted-title": "未轉化標題"
+};