@chaoswise/ui 3.0.15 → 3.0.16

package/lib/TimeRangeSlider/TimeRangeSliderCmp/assets/Limit.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="5px" height="22px" viewBox="0 0 5 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 9备份</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="1216" height="192"></rect>
+        <filter x="-4.8%" y="-25.8%" width="109.6%" height="160.9%" filterUnits="objectBoundingBox" id="filter-2">
+            <feMorphology radius="4" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="9" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="14" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.05 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feGaussianBlur stdDeviation="8" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.08 0" type="matrix" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMorphology radius="2" operator="erode" in="SourceAlpha" result="shadowSpreadOuter3"></feMorphology>
+            <feOffset dx="0" dy="3" in="shadowSpreadOuter3" result="shadowOffsetOuter3"></feOffset>
+            <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter3" result="shadowBlurOuter3"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.12 0" type="matrix" in="shadowBlurOuter3" result="shadowMatrixOuter3"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter3"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-3" x="2" y="0" width="8" height="48"></rect>
+        <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="8" height="48" fill="white">
+            <use xlink:href="#path-3"></use>
+        </mask>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="进程监控_时间选择器" transform="translate(-1343.000000, -216.000000)">
+            <rect fill="#FFFFFF" x="0" y="0" width="1440" height="750"></rect>
+            <g id="编组-6" transform="translate(204.000000, 95.000000)">
+                <g id="矩形">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+                </g>
+                <g id="编组-18" transform="translate(15.000000, 88.000000)">
+                    <rect id="矩形" stroke-opacity="0.15" stroke="#000000" fill="#FFFFFF" x="17.5" y="20.5" width="1151" height="47"></rect>
+                    <g id="选区备份" transform="translate(1117.000000, 20.000000)">
+                        <use id="矩形" stroke="#1890FF" mask="url(#mask-4)" stroke-width="2" fill-opacity="0.0518192745" fill="#00AAFF" stroke-dasharray="3,2" xlink:href="#path-3"></use>
+                        <g id="编组-9备份" transform="translate(7.000000, 13.000000)">
+                            <rect id="矩形" fill="#1890FF" x="0" y="0" width="5" height="22" rx="2.5"></rect>
+                            <path d="M1.5,8 C1.77614237,8 2,8.22385763 2,8.5 L2,13.5 C2,13.7761424 1.77614237,14 1.5,14 C1.22385763,14 1,13.7761424 1,13.5 L1,8.5 C1,8.22385763 1.22385763,8 1.5,8 Z M3.5,8 C3.77614237,8 4,8.22385763 4,8.5 L4,13.5 C4,13.7761424 3.77614237,14 3.5,14 C3.22385763,14 3,13.7761424 3,13.5 L3,8.5 C3,8.22385763 3.22385763,8 3.5,8 Z" id="形状结合" fill="#FFFFFF"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/TimeRangeSlider/TimeRangeSliderCmp/assets/LimitAreaSvg.js

@@ -0,0 +1,110 @@
+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); }
+import * as React from "react";
+var SvgLimitArea = function SvgLimitArea(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    width: 6,
+    height: 24
+  }, props), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: "limitArea_svg__a",
+    width: "109.6%",
+    height: "160.9%",
+    x: "-4.8%",
+    y: "-25.8%",
+    filterUnits: "objectBoundingBox"
+  }, /*#__PURE__*/React.createElement("feMorphology", {
+    "in": "SourceAlpha",
+    operator: "dilate",
+    radius: 4,
+    result: "shadowSpreadOuter1"
+  }), /*#__PURE__*/React.createElement("feOffset", {
+    dy: 9,
+    "in": "shadowSpreadOuter1",
+    result: "shadowOffsetOuter1"
+  }), /*#__PURE__*/React.createElement("feGaussianBlur", {
+    "in": "shadowOffsetOuter1",
+    result: "shadowBlurOuter1",
+    stdDeviation: 14
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    "in": "shadowBlurOuter1",
+    result: "shadowMatrixOuter1",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
+  }), /*#__PURE__*/React.createElement("feOffset", {
+    dy: 6,
+    "in": "SourceAlpha",
+    result: "shadowOffsetOuter2"
+  }), /*#__PURE__*/React.createElement("feGaussianBlur", {
+    "in": "shadowOffsetOuter2",
+    result: "shadowBlurOuter2",
+    stdDeviation: 8
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    "in": "shadowBlurOuter2",
+    result: "shadowMatrixOuter2",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"
+  }), /*#__PURE__*/React.createElement("feMorphology", {
+    "in": "SourceAlpha",
+    radius: 2,
+    result: "shadowSpreadOuter3"
+  }), /*#__PURE__*/React.createElement("feOffset", {
+    dy: 3,
+    "in": "shadowSpreadOuter3",
+    result: "shadowOffsetOuter3"
+  }), /*#__PURE__*/React.createElement("feGaussianBlur", {
+    "in": "shadowOffsetOuter3",
+    result: "shadowBlurOuter3",
+    stdDeviation: 3
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    "in": "shadowBlurOuter3",
+    result: "shadowMatrixOuter3",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"
+  }), /*#__PURE__*/React.createElement("feMerge", null, /*#__PURE__*/React.createElement("feMergeNode", {
+    "in": "shadowMatrixOuter1"
+  }), /*#__PURE__*/React.createElement("feMergeNode", {
+    "in": "shadowMatrixOuter2"
+  }), /*#__PURE__*/React.createElement("feMergeNode", {
+    "in": "shadowMatrixOuter3"
+  }))), /*#__PURE__*/React.createElement("path", {
+    id: "limitArea_svg__b",
+    d: "M0 0h1216v192H0z"
+  })), /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M-1370-215H70v750h-1440z"
+  }), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(-1166 -120)"
+  }, /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#limitArea_svg__b",
+    fill: "#000",
+    filter: "url(#limitArea_svg__a)"
+  }), /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#limitArea_svg__b",
+    fill: "#FFF"
+  })), /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    stroke: "#000",
+    strokeOpacity: 0.15,
+    d: "M-1133.5-11.5h1151v47h-1151z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M4 2h27v20H4z"
+  }), /*#__PURE__*/React.createElement("text", {
+    fill: "#000",
+    fillOpacity: 0.65,
+    fontFamily: "PingFangSC-Regular, PingFang SC",
+    fontSize: 12,
+    transform: "translate(-1151 -32)"
+  }, /*#__PURE__*/React.createElement("tspan", {
+    x: 1155,
+    y: 47
+  }, "18:17")), /*#__PURE__*/React.createElement("path", {
+    fill: "#1890FF",
+    d: "M0 19.846c0 2.034 2.326 2.823 3.569 3.236l.248.083.11.037Q5.003 23.582 6 24V0q-.998.42-2.073.797l-.11.038-.248.083C2.326 1.331 0 2.12 0 4.154Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#FFF",
+    d: "M1.5 9a.5.5 0 0 1 .5.5v5a.5.5 0 1 1-1 0v-5a.5.5 0 0 1 .5-.5m3 0a.5.5 0 0 1 .5.5v5a.5.5 0 1 1-1 0v-5a.5.5 0 0 1 .5-.5"
+  })));
+};
+export default SvgLimitArea;

package/lib/TimeRangeSlider/TimeRangeSliderCmp/components/BottomSlider/BottomPlaceholder.js

@@ -0,0 +1,99 @@
+import _Tooltip from "@chaoswise/ui/lib/Tooltip";
+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, { useMemo, useRef, useEffect } from "react";
+import { computeTimeSpan } from "../../utils/index";
+import Limit from "../../assets/Limit";
+import classnames from "classnames";
+var BottomPlaceholder = function BottomPlaceholder(props) {
+  var timeSliderWidth = props.timeSliderWidth,
+    clickBottomWrapper = props.clickBottomWrapper,
+    bottomSliderInfo = props.bottomSliderInfo,
+    TimeRangeAreaLimitBottomSlider = props.TimeRangeAreaLimitBottomSlider,
+    beginMouseDown = props.beginMouseDown,
+    TimeRangeSliderBottomWrapperRef = props.TimeRangeSliderBottomWrapperRef,
+    bottomSliderHoverInfo = props.bottomSliderHoverInfo,
+    isHoverBottomWrapper = props.isHoverBottomWrapper,
+    beginDrawMouseDown = props.beginDrawMouseDown,
+    visible = props.visible,
+    sliderDragStatusInfo = props.sliderDragStatusInfo;
+  var topDragStatus = sliderDragStatusInfo.topDragStatus,
+    bottomDragStatus = sliderDragStatusInfo.bottomDragStatus;
+  var tooltipRef = useRef(null);
+  useEffect(function () {
+    // 解决tooltip位置异常问题
+    if (topDragStatus || bottomDragStatus && isHoverBottomWrapper) {
+      return;
+    }
+    if (tooltipRef.current) {
+      tooltipRef.current.forcePopupAlign();
+    }
+  }, [bottomSliderInfo, topDragStatus, bottomDragStatus, isHoverBottomWrapper]);
+  var _useMemo = useMemo(function () {
+      var isHasTooltipTimeDate = Array.isArray(bottomSliderInfo.date) && bottomSliderInfo.date.length === 2;
+      var timeSpan = isHasTooltipTimeDate ? computeTimeSpan(bottomSliderInfo.date) : "";
+      return [isHasTooltipTimeDate, timeSpan];
+    }, [bottomSliderInfo]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    isHasTooltipTimeDate = _useMemo2[0],
+    timeSpan = _useMemo2[1];
+  var isHasHoverTooltipTimeDate = useMemo(function () {
+    return Array.isArray(bottomSliderHoverInfo.date) && bottomSliderHoverInfo.date.length === 2;
+  }, [bottomSliderHoverInfo]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: timeSliderWidth
+    },
+    className: "time-range-slider-bottom-clone-wrapper",
+    onClick: clickBottomWrapper,
+    ref: TimeRangeSliderBottomWrapperRef,
+    onMouseDown: beginDrawMouseDown
+  }, /*#__PURE__*/React.createElement(_Tooltip, {
+    ref: tooltipRef,
+    overlayClassName: classnames("time-range-area-limit-slider-tooltip-wrapper", {
+      "time-range-area-limit-slider-tooltip-wrapper-custom": !(bottomDragStatus && isHoverBottomWrapper)
+    }),
+    title: isHasTooltipTimeDate && (bottomDragStatus && isHoverBottomWrapper ? /*#__PURE__*/React.createElement(React.Fragment, null, bottomSliderInfo.date[0].format("YYYY/MM/DD HH:mm:ss"), " -", " ", bottomSliderInfo.date[1].format("YYYY/MM/DD HH:mm:ss")) : timeSpan),
+    visible: visible,
+    arrow: bottomDragStatus && isHoverBottomWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: bottomSliderInfo.width,
+      height: 48,
+      left: bottomSliderInfo.left
+    },
+    className: classnames("time-range-area-limit-slider-bottom-wrapper", {
+      "time-range-area-limit-slider-bottom-wrapper-not-drag": !bottomSliderInfo.canDrag
+    }),
+    onMouseDown: function onMouseDown(e) {
+      return beginMouseDown(e, "bottom");
+    },
+    ref: TimeRangeAreaLimitBottomSlider
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames("time-range-area-limit-slider-bottom-resize"),
+    onMouseDown: function onMouseDown(e) {
+      return beginMouseDown(e, "bottom", "left");
+    }
+  }, /*#__PURE__*/React.createElement(Limit, null)), /*#__PURE__*/React.createElement("div", {
+    className: classnames("time-range-area-limit-slider-bottom-resize", "time-range-area-limit-slider-bottom-resize-right"),
+    onMouseDown: function onMouseDown(e) {
+      return beginMouseDown(e, "bottom", "right");
+    }
+  }, /*#__PURE__*/React.createElement(Limit, null)))), isHoverBottomWrapper && !topDragStatus && !bottomDragStatus && /*#__PURE__*/React.createElement(_Tooltip, {
+    overlayClassName: "time-range-area-limit-slider-tooltip-wrapper",
+    title: isHasHoverTooltipTimeDate && /*#__PURE__*/React.createElement(React.Fragment, null, bottomSliderHoverInfo.date[0].format("YYYY/MM/DD HH:mm:ss"), " -", " ", bottomSliderHoverInfo.date[1].format("YYYY/MM/DD HH:mm:ss")),
+    visible: true
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: bottomSliderHoverInfo.width,
+      height: 48,
+      left: bottomSliderHoverInfo.left
+    },
+    className: classnames("time-range-area-limit-slider-bottom-hover-wrapper")
+  })));
+};
+export default BottomPlaceholder;

package/lib/TimeRangeSlider/TimeRangeSliderCmp/components/BottomSlider/BottomTimeDateProcess.js

@@ -0,0 +1,36 @@
+import React, { useMemo } from "react";
+import { getAllTimeDates, getConvertedTimeDateDataByEndDate } from "../../utils";
+import classnames from "classnames";
+var BottomTimeDateProcess = function BottomTimeDateProcess(props) {
+  var recordTimeDateWrapper = props.recordTimeDateWrapper,
+    timeSliderWidth = props.timeSliderWidth;
+  var convertedTimeDateData = useMemo(function () {
+    if (recordTimeDateWrapper.length === 0) return [];
+    var allTimeDates = getAllTimeDates(recordTimeDateWrapper[1]);
+    return getConvertedTimeDateDataByEndDate(allTimeDates);
+  }, [recordTimeDateWrapper]);
+  var singleWidth = timeSliderWidth / 24; // 24代表24个小时
+  return convertedTimeDateData.map(function (item, index) {
+    var indexDivisibleByThree = index % 3 === 0; // 索引能够被三整除
+    var isCutLine = indexDivisibleByThree && index !== 0 && index !== 24;
+    var isShowMMDD = index == 0 || index == 24;
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      style: {
+        width: index === 0 ? 0 : singleWidth
+      },
+      className: classnames("time-range-single-slider-bottom", {
+        "time-range-single-odd-slider-bottom": indexDivisibleByThree
+      })
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "time-range-single-slider-bottom-HH-MM"
+    }, item.HH_MM), isCutLine && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: classnames("time-range-single-slider-bottom-cut-line")
+    }), /*#__PURE__*/React.createElement("div", {
+      className: classnames("time-range-single-slider-bottom-cut-line", "time-range-single-slider-bottom-cut-line-bottom")
+    })), isShowMMDD && /*#__PURE__*/React.createElement("div", {
+      className: "time-range-single-slider-bottom-MM-DD"
+    }, item.MM_DD));
+  });
+};
+export default BottomTimeDateProcess;

package/lib/TimeRangeSlider/TimeRangeSliderCmp/components/BottomSlider/index.js

@@ -0,0 +1,56 @@
+import _useConfigContext2 from "@chaoswise/ui/lib/useConfigContext";
+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 from "react";
+import BottomTimeDateProcess from "./BottomTimeDateProcess";
+import BottomPlaceholder from "./BottomPlaceholder";
+import classnames from "classnames";
+import useStyle from "../../../styles/timeRangeSliderBottom.style";
+var Index = function Index(props) {
+  var timeSliderWidth = props.timeSliderWidth,
+    clickBottomWrapper = props.clickBottomWrapper,
+    bottomSliderInfo = props.bottomSliderInfo,
+    TimeRangeAreaLimitBottomSlider = props.TimeRangeAreaLimitBottomSlider,
+    beginMouseDown = props.beginMouseDown,
+    recordTimeDateWrapper = props.recordTimeDateWrapper,
+    TimeRangeSliderBottomWrapperRef = props.TimeRangeSliderBottomWrapperRef,
+    bottomSliderHoverInfo = props.bottomSliderHoverInfo,
+    isHoverBottomWrapper = props.isHoverBottomWrapper,
+    beginDrawMouseDown = props.beginDrawMouseDown,
+    visible = props.visible,
+    sliderDragStatusInfo = props.sliderDragStatusInfo;
+  var _useConfigContext = _useConfigContext2(),
+    getPrefixCls = _useConfigContext.getPrefixCls;
+  var prefixCls = getPrefixCls();
+  var _useStyle = useStyle("".concat(prefixCls, "-time-range-slider-bottom")),
+    _useStyle2 = _slicedToArray(_useStyle, 3),
+    wrapCSSVar = _useStyle2[0],
+    hashId = _useStyle2[1],
+    cssVarCls = _useStyle2[2];
+  return wrapCSSVar( /*#__PURE__*/React.createElement("div", {
+    className: classnames(hashId, cssVarCls, "time-range-slider-bottom-wrapper"),
+    style: {
+      width: timeSliderWidth
+    }
+  }, /*#__PURE__*/React.createElement(BottomTimeDateProcess, {
+    recordTimeDateWrapper: recordTimeDateWrapper,
+    timeSliderWidth: timeSliderWidth
+  }), /*#__PURE__*/React.createElement(BottomPlaceholder, {
+    timeSliderWidth: timeSliderWidth,
+    clickBottomWrapper: clickBottomWrapper,
+    bottomSliderInfo: bottomSliderInfo,
+    TimeRangeAreaLimitBottomSlider: TimeRangeAreaLimitBottomSlider,
+    beginMouseDown: beginMouseDown,
+    TimeRangeSliderBottomWrapperRef: TimeRangeSliderBottomWrapperRef,
+    bottomSliderHoverInfo: bottomSliderHoverInfo,
+    isHoverBottomWrapper: isHoverBottomWrapper,
+    beginDrawMouseDown: beginDrawMouseDown,
+    visible: visible,
+    sliderDragStatusInfo: sliderDragStatusInfo
+  })));
+};
+export default Index;

package/lib/TimeRangeSlider/TimeRangeSliderCmp/components/TopSlider/TopDateProcess.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { getAllDates, getConvertedDateData } from "../../utils";
+import classnames from "classnames";
+var TopDateProcess = function TopDateProcess(props) {
+  var currentMomentRef = props.currentMomentRef,
+    timeBoundary = props.timeBoundary,
+    timeSliderWidth = props.timeSliderWidth;
+  var days = timeBoundary.days;
+  var singleWidth = timeSliderWidth / days;
+  var allDates = getAllDates(currentMomentRef.current, days);
+  var convertedDateData = getConvertedDateData(allDates, singleWidth, days);
+  return convertedDateData.map(function (item, index) {
+    var isStartYYYY = item.isStartYYYY,
+      YYYY = item.YYYY,
+      MM_DD = item.MM_DD,
+      position = item.position;
+    var width = position.width;
+    var oddIndex = index % 2 === 1; // 奇数索引
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames("time-range-single-slider", {
+        "time-range-single-odd-slider": oddIndex
+      }),
+      style: {
+        width: width
+      },
+      key: index
+    }, oddIndex && /*#__PURE__*/React.createElement("div", {
+      className: "time-range-single-slider-MM-DD"
+    }, MM_DD));
+  });
+};
+export default TopDateProcess;

package/lib/TimeRangeSlider/TimeRangeSliderCmp/components/TopSlider/TopPlaceholder.js

@@ -0,0 +1,54 @@
+import _Tooltip from "@chaoswise/ui/lib/Tooltip";
+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, { useMemo } from "react";
+import { DownOutlined } from "@ant-design/icons";
+function getClosestDay(date) {
+  var _date = _slicedToArray(date, 2),
+    startTime = _date[0],
+    endTime = _date[1];
+  var closestDay = startTime.clone().add(endTime.diff(startTime) / 2, "milliseconds");
+  return closestDay.format("MM/DD");
+}
+var TopPlaceholder = function TopPlaceholder(props) {
+  var TimeRangeAreaLimitSlider = props.TimeRangeAreaLimitSlider,
+    topSliderInfo = props.topSliderInfo,
+    timeBoundary = props.timeBoundary,
+    timeSliderWidth = props.timeSliderWidth,
+    beginMouseDown = props.beginMouseDown;
+  var days = timeBoundary.days;
+  var singleWidth = timeSliderWidth / days;
+  var _useMemo = useMemo(function () {
+      var isHasTooltipDate = Array.isArray(topSliderInfo.date) && topSliderInfo.date.length === 2;
+      var closeToDateInfo = isHasTooltipDate ? getClosestDay(topSliderInfo.date) : "";
+      return [isHasTooltipDate, closeToDateInfo];
+    }, [topSliderInfo]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    isHasTooltipDate = _useMemo2[0],
+    closeToDateInfo = _useMemo2[1];
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: singleWidth,
+      left: topSliderInfo.left
+    },
+    className: "time-range-area-limit-slider",
+    onMouseDown: function onMouseDown(e) {
+      return beginMouseDown(e, "top");
+    },
+    ref: TimeRangeAreaLimitSlider
+  }, /*#__PURE__*/React.createElement(_Tooltip, {
+    overlayClassName: "time-range-area-limit-slider-tooltip-wrapper",
+    title: isHasTooltipDate && /*#__PURE__*/React.createElement(React.Fragment, null, topSliderInfo.date[0].format("MM/DD HH:mm:ss"), " -", " ", topSliderInfo.date[1].format("MM/DD HH:mm:ss"))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "time-range-slider-top-placeholder-out"
+  }, /*#__PURE__*/React.createElement(DownOutlined, {
+    className: "time-range-slider-top-placeholder-inner"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "time-range-slider-top-placeholder-date-info"
+  }, closeToDateInfo))));
+};
+export default TopPlaceholder;

package/lib/TimeRangeSlider/TimeRangeSliderCmp/components/TopSlider/index.js

@@ -0,0 +1,47 @@
+import _useConfigContext2 from "@chaoswise/ui/lib/useConfigContext";
+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 from "react";
+import TopPlaceholder from "./TopPlaceholder";
+import TopDateProcess from "./TopDateProcess";
+import classnames from "classnames";
+import useStyle from '../../../styles/timeRangeSliderTop.style';
+var TopSlider = function TopSlider(props) {
+  var currentMomentRef = props.currentMomentRef,
+    TimeRangeSliderWrapperRef = props.TimeRangeSliderWrapperRef,
+    timeSliderWidth = props.timeSliderWidth,
+    TimeRangeAreaLimitSlider = props.TimeRangeAreaLimitSlider,
+    beginMouseDown = props.beginMouseDown,
+    topSliderInfo = props.topSliderInfo,
+    timeBoundary = props.timeBoundary;
+  var _useConfigContext = _useConfigContext2(),
+    getPrefixCls = _useConfigContext.getPrefixCls;
+  var prefixCls = getPrefixCls();
+  var _useStyle = useStyle("".concat(prefixCls, "-time-range-slider-top")),
+    _useStyle2 = _slicedToArray(_useStyle, 3),
+    wrapCSSVar = _useStyle2[0],
+    hashId = _useStyle2[1],
+    cssVarCls = _useStyle2[2];
+  return wrapCSSVar( /*#__PURE__*/React.createElement("div", {
+    className: classnames(hashId, cssVarCls, "time-range-slider-top-wrapper"),
+    ref: TimeRangeSliderWrapperRef,
+    style: {
+      width: timeSliderWidth
+    }
+  }, /*#__PURE__*/React.createElement(TopDateProcess, {
+    timeBoundary: timeBoundary,
+    currentMomentRef: currentMomentRef,
+    timeSliderWidth: timeSliderWidth
+  }), /*#__PURE__*/React.createElement(TopPlaceholder, {
+    TimeRangeAreaLimitSlider: TimeRangeAreaLimitSlider,
+    topSliderInfo: topSliderInfo,
+    timeBoundary: timeBoundary,
+    timeSliderWidth: timeSliderWidth,
+    beginMouseDown: beginMouseDown
+  })));
+};
+export default TopSlider;

package/lib/TimeRangeSlider/TimeRangeSliderCmp/hooks/useHover.js

@@ -0,0 +1,31 @@
+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 { useState, useEffect } from "react";
+var useHover = function useHover(targetElementRef) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHover = _useState2[0],
+    setIsHover = _useState2[1];
+  var onMouseEnter = function onMouseEnter() {
+    setIsHover(true);
+  };
+  var onMouseLeave = function onMouseLeave() {
+    setIsHover(false);
+  };
+  useEffect(function () {
+    var _targetElementRef$cur, _targetElementRef$cur2;
+    (_targetElementRef$cur = targetElementRef.current) === null || _targetElementRef$cur === void 0 || _targetElementRef$cur.addEventListener("mouseenter", onMouseEnter);
+    (_targetElementRef$cur2 = targetElementRef.current) === null || _targetElementRef$cur2 === void 0 || _targetElementRef$cur2.addEventListener("mouseleave", onMouseLeave);
+    return function () {
+      var _targetElementRef$cur3, _targetElementRef$cur4;
+      (_targetElementRef$cur3 = targetElementRef.current) === null || _targetElementRef$cur3 === void 0 || _targetElementRef$cur3.removeEventListener("mouseenter", onMouseEnter);
+      (_targetElementRef$cur4 = targetElementRef.current) === null || _targetElementRef$cur4 === void 0 || _targetElementRef$cur4.removeEventListener("mouseleave", onMouseLeave);
+    };
+  }, []);
+  return isHover;
+};
+export default useHover;