@chaoswise/ui 2.5.8 → 2.5.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/CWSelect/index.js +3 -2
- package/lib/ColorPicker/index.less +1 -1
- package/lib/IconSelect/components/CustomImg/index.less +5 -3
- package/lib/IconSelect/locale/en_US.js +1 -1
- package/lib/TimeRangeSlider/TimeRangeSliderCmp/assets/Limit.js +126 -0
- package/lib/TimeRangeSlider/TimeRangeSliderCmp/assets/Limit.svg +50 -0
- package/lib/TimeRangeSlider/TimeRangeSliderCmp/components/BottomSlider/BottomPlaceholder.js +27 -10
- package/lib/TimeRangeSlider/TimeRangeSliderCmp/components/BottomSlider/index.js +4 -2
- package/lib/TimeRangeSlider/TimeRangeSliderCmp/components/BottomSlider/index.less +28 -8
- package/lib/TimeRangeSlider/TimeRangeSliderCmp/components/TopSlider/TopDateProcess.js +2 -6
- package/lib/TimeRangeSlider/TimeRangeSliderCmp/components/TopSlider/TopPlaceholder.js +24 -4
- package/lib/TimeRangeSlider/TimeRangeSliderCmp/components/TopSlider/index.less +31 -16
- package/lib/TimeRangeSlider/TimeRangeSliderCmp/hooks/useMouse.js +161 -86
- package/lib/TimeRangeSlider/TimeRangeSliderCmp/index.js +4 -6
- package/lib/TimeRangeSlider/TimeRangeSliderCmp/utils/index.js +28 -0
- package/lib/TimeRangeSlider/index.js +87 -11
- package/lib/TimeRangeSlider/index.less +4 -2
- package/lib/TimeRangeSlider/locale/en_US.js +2 -0
- package/lib/TimeRangeSlider/locale/zh_CN.js +2 -0
- package/lib/TimeRangeSlider/locale/zh_TW.js +2 -0
- package/lib/TimeRangeSlider/utils/index.js +25 -0
- package/lib/TooltipText/index.less +1 -0
- package/package.json +2 -2
package/lib/CWSelect/index.js
CHANGED
|
@@ -362,9 +362,10 @@ var CWSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
362
362
|
}).filter(function (item) {
|
|
363
363
|
return activeValues.includes(item);
|
|
364
364
|
});
|
|
365
|
-
|
|
365
|
+
var notFoundContent = rest.notFoundContent ? rest.notFoundContent : /*#__PURE__*/React.createElement("div", {
|
|
366
366
|
className: "cw-select-show-checkbox-empty"
|
|
367
|
-
}, formatMessage(localeObj["no-results-were-found"]))
|
|
367
|
+
}, formatMessage(localeObj["no-results-were-found"]));
|
|
368
|
+
return !dataSource.length ? notFoundContent : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
368
369
|
className: "cw-checkbox-all",
|
|
369
370
|
onMouseDown: function onMouseDown(e) {
|
|
370
371
|
e.preventDefault();
|
|
@@ -5,7 +5,7 @@ export default {
|
|
|
5
5
|
"icon-select-custom-fail": "File reading failure",
|
|
6
6
|
"icon-select-custom-upload": "Upload image",
|
|
7
7
|
"icon-select-store-icon": "Icon library",
|
|
8
|
-
"icon-select-store-search": "Please enter search keywords",
|
|
8
|
+
"icon-select-store-icon-search": "Please enter search keywords",
|
|
9
9
|
"icon-select-custom-img": "Customized image",
|
|
10
10
|
"icon-select-custom-img-tip": "Recommend uploading 40*40 image in PNG, SVG, JPG, or JGPG format. Image size can not exceed 2 MB"
|
|
11
11
|
};
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
var SvgLimit = function SvgLimit(props) {
|
|
4
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
5
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
6
|
+
xmlnsXlink: "http://www.w3.org/1999/xlink",
|
|
7
|
+
width: 5,
|
|
8
|
+
height: 22
|
|
9
|
+
}, props), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
|
|
10
|
+
id: "Limit_svg__c",
|
|
11
|
+
d: "M0 0h1216v192H0z"
|
|
12
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
13
|
+
id: "Limit_svg__a",
|
|
14
|
+
d: "M2 0h8v48H2z"
|
|
15
|
+
}), /*#__PURE__*/React.createElement("filter", {
|
|
16
|
+
id: "Limit_svg__b",
|
|
17
|
+
width: "109.6%",
|
|
18
|
+
height: "160.9%",
|
|
19
|
+
x: "-4.8%",
|
|
20
|
+
y: "-25.8%",
|
|
21
|
+
filterUnits: "objectBoundingBox"
|
|
22
|
+
}, /*#__PURE__*/React.createElement("feMorphology", {
|
|
23
|
+
"in": "SourceAlpha",
|
|
24
|
+
operator: "dilate",
|
|
25
|
+
radius: 4,
|
|
26
|
+
result: "shadowSpreadOuter1"
|
|
27
|
+
}), /*#__PURE__*/React.createElement("feOffset", {
|
|
28
|
+
dy: 9,
|
|
29
|
+
"in": "shadowSpreadOuter1",
|
|
30
|
+
result: "shadowOffsetOuter1"
|
|
31
|
+
}), /*#__PURE__*/React.createElement("feGaussianBlur", {
|
|
32
|
+
"in": "shadowOffsetOuter1",
|
|
33
|
+
result: "shadowBlurOuter1",
|
|
34
|
+
stdDeviation: 14
|
|
35
|
+
}), /*#__PURE__*/React.createElement("feColorMatrix", {
|
|
36
|
+
"in": "shadowBlurOuter1",
|
|
37
|
+
result: "shadowMatrixOuter1",
|
|
38
|
+
values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"
|
|
39
|
+
}), /*#__PURE__*/React.createElement("feOffset", {
|
|
40
|
+
dy: 6,
|
|
41
|
+
"in": "SourceAlpha",
|
|
42
|
+
result: "shadowOffsetOuter2"
|
|
43
|
+
}), /*#__PURE__*/React.createElement("feGaussianBlur", {
|
|
44
|
+
"in": "shadowOffsetOuter2",
|
|
45
|
+
result: "shadowBlurOuter2",
|
|
46
|
+
stdDeviation: 8
|
|
47
|
+
}), /*#__PURE__*/React.createElement("feColorMatrix", {
|
|
48
|
+
"in": "shadowBlurOuter2",
|
|
49
|
+
result: "shadowMatrixOuter2",
|
|
50
|
+
values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"
|
|
51
|
+
}), /*#__PURE__*/React.createElement("feMorphology", {
|
|
52
|
+
"in": "SourceAlpha",
|
|
53
|
+
radius: 2,
|
|
54
|
+
result: "shadowSpreadOuter3"
|
|
55
|
+
}), /*#__PURE__*/React.createElement("feOffset", {
|
|
56
|
+
dy: 3,
|
|
57
|
+
"in": "shadowSpreadOuter3",
|
|
58
|
+
result: "shadowOffsetOuter3"
|
|
59
|
+
}), /*#__PURE__*/React.createElement("feGaussianBlur", {
|
|
60
|
+
"in": "shadowOffsetOuter3",
|
|
61
|
+
result: "shadowBlurOuter3",
|
|
62
|
+
stdDeviation: 3
|
|
63
|
+
}), /*#__PURE__*/React.createElement("feColorMatrix", {
|
|
64
|
+
"in": "shadowBlurOuter3",
|
|
65
|
+
result: "shadowMatrixOuter3",
|
|
66
|
+
values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"
|
|
67
|
+
}), /*#__PURE__*/React.createElement("feMerge", null, /*#__PURE__*/React.createElement("feMergeNode", {
|
|
68
|
+
"in": "shadowMatrixOuter1"
|
|
69
|
+
}), /*#__PURE__*/React.createElement("feMergeNode", {
|
|
70
|
+
"in": "shadowMatrixOuter2"
|
|
71
|
+
}), /*#__PURE__*/React.createElement("feMergeNode", {
|
|
72
|
+
"in": "shadowMatrixOuter3"
|
|
73
|
+
}))), /*#__PURE__*/React.createElement("mask", {
|
|
74
|
+
id: "Limit_svg__d",
|
|
75
|
+
width: 8,
|
|
76
|
+
height: 48,
|
|
77
|
+
x: 0,
|
|
78
|
+
y: 0,
|
|
79
|
+
fill: "#fff",
|
|
80
|
+
maskContentUnits: "userSpaceOnUse",
|
|
81
|
+
maskUnits: "objectBoundingBox"
|
|
82
|
+
}, /*#__PURE__*/React.createElement("use", {
|
|
83
|
+
xlinkHref: "#Limit_svg__a"
|
|
84
|
+
}))), /*#__PURE__*/React.createElement("g", {
|
|
85
|
+
fill: "none",
|
|
86
|
+
fillRule: "evenodd"
|
|
87
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
88
|
+
fill: "#FFF",
|
|
89
|
+
d: "M-1343-216H97v750h-1440z"
|
|
90
|
+
}), /*#__PURE__*/React.createElement("g", {
|
|
91
|
+
transform: "translate(-1139 -121)"
|
|
92
|
+
}, /*#__PURE__*/React.createElement("use", {
|
|
93
|
+
xlinkHref: "#Limit_svg__c",
|
|
94
|
+
fill: "#000",
|
|
95
|
+
filter: "url(#Limit_svg__b)"
|
|
96
|
+
}), /*#__PURE__*/React.createElement("use", {
|
|
97
|
+
xlinkHref: "#Limit_svg__c",
|
|
98
|
+
fill: "#FFF"
|
|
99
|
+
})), /*#__PURE__*/React.createElement("path", {
|
|
100
|
+
fill: "#FFF",
|
|
101
|
+
stroke: "#000",
|
|
102
|
+
strokeOpacity: 0.15,
|
|
103
|
+
d: "M-1106.5-12.5h1151v47h-1151z"
|
|
104
|
+
}), /*#__PURE__*/React.createElement("g", {
|
|
105
|
+
transform: "translate(-7 -13)"
|
|
106
|
+
}, /*#__PURE__*/React.createElement("use", {
|
|
107
|
+
xlinkHref: "#Limit_svg__a",
|
|
108
|
+
fill: "#0AF",
|
|
109
|
+
fillOpacity: 0.052,
|
|
110
|
+
stroke: "#1890FF",
|
|
111
|
+
strokeDasharray: "3,2",
|
|
112
|
+
strokeWidth: 2,
|
|
113
|
+
mask: "url(#Limit_svg__d)"
|
|
114
|
+
}), /*#__PURE__*/React.createElement("g", {
|
|
115
|
+
transform: "translate(7 13)"
|
|
116
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
117
|
+
width: 5,
|
|
118
|
+
height: 22,
|
|
119
|
+
fill: "#1890FF",
|
|
120
|
+
rx: 2.5
|
|
121
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
122
|
+
fill: "#FFF",
|
|
123
|
+
d: "M1.5 8a.5.5 0 0 1 .5.5v5a.5.5 0 1 1-1 0v-5a.5.5 0 0 1 .5-.5m2 0a.5.5 0 0 1 .5.5v5a.5.5 0 1 1-1 0v-5a.5.5 0 0 1 .5-.5"
|
|
124
|
+
})))));
|
|
125
|
+
};
|
|
126
|
+
export default SvgLimit;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<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">
|
|
3
|
+
<title>编组 9备份</title>
|
|
4
|
+
<defs>
|
|
5
|
+
<rect id="path-1" x="0" y="0" width="1216" height="192"></rect>
|
|
6
|
+
<filter x="-4.8%" y="-25.8%" width="109.6%" height="160.9%" filterUnits="objectBoundingBox" id="filter-2">
|
|
7
|
+
<feMorphology radius="4" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
|
|
8
|
+
<feOffset dx="0" dy="9" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
|
|
9
|
+
<feGaussianBlur stdDeviation="14" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
|
10
|
+
<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>
|
|
11
|
+
<feOffset dx="0" dy="6" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
|
|
12
|
+
<feGaussianBlur stdDeviation="8" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur>
|
|
13
|
+
<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>
|
|
14
|
+
<feMorphology radius="2" operator="erode" in="SourceAlpha" result="shadowSpreadOuter3"></feMorphology>
|
|
15
|
+
<feOffset dx="0" dy="3" in="shadowSpreadOuter3" result="shadowOffsetOuter3"></feOffset>
|
|
16
|
+
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter3" result="shadowBlurOuter3"></feGaussianBlur>
|
|
17
|
+
<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>
|
|
18
|
+
<feMerge>
|
|
19
|
+
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
|
20
|
+
<feMergeNode in="shadowMatrixOuter2"></feMergeNode>
|
|
21
|
+
<feMergeNode in="shadowMatrixOuter3"></feMergeNode>
|
|
22
|
+
</feMerge>
|
|
23
|
+
</filter>
|
|
24
|
+
<rect id="path-3" x="2" y="0" width="8" height="48"></rect>
|
|
25
|
+
<mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="8" height="48" fill="white">
|
|
26
|
+
<use xlink:href="#path-3"></use>
|
|
27
|
+
</mask>
|
|
28
|
+
</defs>
|
|
29
|
+
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
30
|
+
<g id="进程监控_时间选择器" transform="translate(-1343.000000, -216.000000)">
|
|
31
|
+
<rect fill="#FFFFFF" x="0" y="0" width="1440" height="750"></rect>
|
|
32
|
+
<g id="编组-6" transform="translate(204.000000, 95.000000)">
|
|
33
|
+
<g id="矩形">
|
|
34
|
+
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
|
35
|
+
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
|
|
36
|
+
</g>
|
|
37
|
+
<g id="编组-18" transform="translate(15.000000, 88.000000)">
|
|
38
|
+
<rect id="矩形" stroke-opacity="0.15" stroke="#000000" fill="#FFFFFF" x="17.5" y="20.5" width="1151" height="47"></rect>
|
|
39
|
+
<g id="选区备份" transform="translate(1117.000000, 20.000000)">
|
|
40
|
+
<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>
|
|
41
|
+
<g id="编组-9备份" transform="translate(7.000000, 13.000000)">
|
|
42
|
+
<rect id="矩形" fill="#1890FF" x="0" y="0" width="5" height="22" rx="2.5"></rect>
|
|
43
|
+
<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>
|
|
44
|
+
</g>
|
|
45
|
+
</g>
|
|
46
|
+
</g>
|
|
47
|
+
</g>
|
|
48
|
+
</g>
|
|
49
|
+
</g>
|
|
50
|
+
</svg>
|
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
import "@chaoswise/ui/lib/Tooltip/index.less";
|
|
2
2
|
import _Tooltip from "@chaoswise/ui/lib/Tooltip";
|
|
3
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
|
+
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."); }
|
|
5
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
6
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
7
|
+
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; } }
|
|
8
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
3
9
|
import React, { useMemo } from "react";
|
|
10
|
+
import { computeTimeSpan } from "../../utils/index";
|
|
4
11
|
import LimitAreaSvg from "../../assets/LimitAreaSvg";
|
|
12
|
+
import Limit from "../../assets/Limit";
|
|
5
13
|
import classnames from "classnames";
|
|
6
14
|
var BottomPlaceholder = function BottomPlaceholder(props) {
|
|
7
15
|
var timeSliderWidth = props.timeSliderWidth,
|
|
@@ -13,10 +21,16 @@ var BottomPlaceholder = function BottomPlaceholder(props) {
|
|
|
13
21
|
bottomSliderHoverInfo = props.bottomSliderHoverInfo,
|
|
14
22
|
bottomSliderDragStatus = props.bottomSliderDragStatus,
|
|
15
23
|
isHoverBottomWrapper = props.isHoverBottomWrapper,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
24
|
+
beginDrawMouseDown = props.beginDrawMouseDown,
|
|
25
|
+
visible = props.visible;
|
|
26
|
+
var _useMemo = useMemo(function () {
|
|
27
|
+
var isHasTooltipTimeDate = Array.isArray(bottomSliderInfo.date) && bottomSliderInfo.date.length === 2;
|
|
28
|
+
var timeSpan = isHasTooltipTimeDate ? computeTimeSpan(bottomSliderInfo.date) : "";
|
|
29
|
+
return [isHasTooltipTimeDate, timeSpan];
|
|
30
|
+
}, [bottomSliderInfo]),
|
|
31
|
+
_useMemo2 = _slicedToArray(_useMemo, 2),
|
|
32
|
+
isHasTooltipTimeDate = _useMemo2[0],
|
|
33
|
+
timeSpan = _useMemo2[1];
|
|
20
34
|
var isHasHoverTooltipTimeDate = useMemo(function () {
|
|
21
35
|
return Array.isArray(bottomSliderHoverInfo.date) && bottomSliderHoverInfo.date.length === 2;
|
|
22
36
|
}, [bottomSliderHoverInfo]);
|
|
@@ -26,11 +40,14 @@ var BottomPlaceholder = function BottomPlaceholder(props) {
|
|
|
26
40
|
},
|
|
27
41
|
className: "time-range-slider-bottom-clone-wrapper",
|
|
28
42
|
onClick: clickBottomWrapper,
|
|
29
|
-
ref: TimeRangeSliderBottomWrapperRef
|
|
43
|
+
ref: TimeRangeSliderBottomWrapperRef,
|
|
44
|
+
onMouseDown: beginDrawMouseDown
|
|
30
45
|
}, /*#__PURE__*/React.createElement(_Tooltip, {
|
|
31
|
-
overlayClassName: "time-range-area-limit-slider-tooltip-wrapper",
|
|
32
|
-
|
|
33
|
-
|
|
46
|
+
overlayClassName: classnames("time-range-area-limit-slider-tooltip-wrapper", {
|
|
47
|
+
"time-range-area-limit-slider-tooltip-wrapper-custom": !(bottomSliderDragStatus && isHoverBottomWrapper)
|
|
48
|
+
}),
|
|
49
|
+
title: /*#__PURE__*/React.createElement("span", null, bottomSliderDragStatus && 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),
|
|
50
|
+
visible: visible && isHasTooltipTimeDate
|
|
34
51
|
}, /*#__PURE__*/React.createElement("div", {
|
|
35
52
|
style: {
|
|
36
53
|
width: bottomSliderInfo.width,
|
|
@@ -49,12 +66,12 @@ var BottomPlaceholder = function BottomPlaceholder(props) {
|
|
|
49
66
|
onMouseDown: function onMouseDown(e) {
|
|
50
67
|
return beginMouseDown(e, "bottom", "left");
|
|
51
68
|
}
|
|
52
|
-
}, /*#__PURE__*/React.createElement(
|
|
69
|
+
}, /*#__PURE__*/React.createElement(Limit, null)), /*#__PURE__*/React.createElement("div", {
|
|
53
70
|
className: classnames("time-range-area-limit-slider-bottom-resize", "time-range-area-limit-slider-bottom-resize-right"),
|
|
54
71
|
onMouseDown: function onMouseDown(e) {
|
|
55
72
|
return beginMouseDown(e, "bottom", "right");
|
|
56
73
|
}
|
|
57
|
-
}, /*#__PURE__*/React.createElement(
|
|
74
|
+
}, /*#__PURE__*/React.createElement(Limit, null)))), isHoverBottomWrapper && !bottomSliderDragStatus && /*#__PURE__*/React.createElement(_Tooltip, {
|
|
58
75
|
overlayClassName: "time-range-area-limit-slider-tooltip-wrapper",
|
|
59
76
|
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")),
|
|
60
77
|
visible: !bottomSliderDragStatus
|
|
@@ -13,7 +13,8 @@ var Index = function Index(props) {
|
|
|
13
13
|
bottomSliderHoverInfo = props.bottomSliderHoverInfo,
|
|
14
14
|
bottomSliderDragStatus = props.bottomSliderDragStatus,
|
|
15
15
|
isHoverBottomWrapper = props.isHoverBottomWrapper,
|
|
16
|
-
|
|
16
|
+
beginDrawMouseDown = props.beginDrawMouseDown,
|
|
17
|
+
visible = props.visible;
|
|
17
18
|
return /*#__PURE__*/React.createElement("div", {
|
|
18
19
|
className: "time-range-slider-bottom-wrapper",
|
|
19
20
|
style: {
|
|
@@ -32,7 +33,8 @@ var Index = function Index(props) {
|
|
|
32
33
|
bottomSliderHoverInfo: bottomSliderHoverInfo,
|
|
33
34
|
bottomSliderDragStatus: bottomSliderDragStatus,
|
|
34
35
|
isHoverBottomWrapper: isHoverBottomWrapper,
|
|
35
|
-
|
|
36
|
+
beginDrawMouseDown: beginDrawMouseDown,
|
|
37
|
+
visible: visible
|
|
36
38
|
}));
|
|
37
39
|
};
|
|
38
40
|
export default Index;
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
right: -20px;
|
|
21
21
|
z-index: 2;
|
|
22
22
|
color: @text-color-secondary;
|
|
23
|
+
user-select: none;
|
|
23
24
|
|
|
24
25
|
}
|
|
25
26
|
|
|
@@ -28,6 +29,7 @@
|
|
|
28
29
|
border-left: @border-width-base @border-style-base @border-color-base;
|
|
29
30
|
right: -0.5px;
|
|
30
31
|
height: 12px;
|
|
32
|
+
user-select: none;
|
|
31
33
|
|
|
32
34
|
&.time-range-single-slider-bottom-cut-line-bottom {
|
|
33
35
|
bottom: 0;
|
|
@@ -45,6 +47,7 @@
|
|
|
45
47
|
right: -20px;
|
|
46
48
|
z-index: 2;
|
|
47
49
|
color: @text-color-secondary;
|
|
50
|
+
user-select: none;
|
|
48
51
|
}
|
|
49
52
|
}
|
|
50
53
|
|
|
@@ -70,15 +73,15 @@
|
|
|
70
73
|
|
|
71
74
|
.time-range-area-limit-slider-bottom-resize {
|
|
72
75
|
position: absolute;
|
|
73
|
-
left: -
|
|
74
|
-
width:
|
|
75
|
-
height:
|
|
76
|
-
top:
|
|
76
|
+
left: -3px;
|
|
77
|
+
width: 5px;
|
|
78
|
+
height: 22px;
|
|
79
|
+
top: 12px;
|
|
77
80
|
cursor: ew-resize;
|
|
78
81
|
}
|
|
79
82
|
|
|
80
83
|
.time-range-area-limit-slider-bottom-resize-right {
|
|
81
|
-
right: -
|
|
84
|
+
right: -3px;
|
|
82
85
|
left: auto;
|
|
83
86
|
transform: rotateY(180deg);
|
|
84
87
|
}
|
|
@@ -87,8 +90,7 @@
|
|
|
87
90
|
.time-range-area-limit-slider-bottom-hover-wrapper {
|
|
88
91
|
position: absolute;
|
|
89
92
|
z-index: 1;
|
|
90
|
-
background-color:
|
|
91
|
-
opacity: 0.1;
|
|
93
|
+
background-color: rgba(24, 144, 255, 0.1);
|
|
92
94
|
|
|
93
95
|
&::before {
|
|
94
96
|
content: '';
|
|
@@ -98,7 +100,7 @@
|
|
|
98
100
|
left: calc((100% - 1px) /2);
|
|
99
101
|
width: 1px;
|
|
100
102
|
height: 100%;
|
|
101
|
-
background-color:
|
|
103
|
+
background-color: @text-color-show;
|
|
102
104
|
}
|
|
103
105
|
}
|
|
104
106
|
}
|
|
@@ -107,6 +109,24 @@
|
|
|
107
109
|
.time-range-area-limit-slider-tooltip-wrapper {
|
|
108
110
|
max-width: 500px;
|
|
109
111
|
|
|
112
|
+
&.time-range-area-limit-slider-tooltip-wrapper-custom {
|
|
113
|
+
padding-bottom: 0;
|
|
114
|
+
.@{ant-prefix}-tooltip-content {
|
|
115
|
+
background-color: transparent !important;
|
|
116
|
+
box-shadow: none !important;
|
|
117
|
+
padding: 2px 0;
|
|
118
|
+
.@{ant-prefix}-tooltip-arrow {
|
|
119
|
+
display: none;
|
|
120
|
+
}
|
|
121
|
+
.@{ant-prefix}-tooltip-inner {
|
|
122
|
+
background-color: transparent !important;
|
|
123
|
+
color: #4e91d1;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
pointer-events: none;
|
|
110
130
|
.@{ant-prefix}-tooltip-inner {
|
|
111
131
|
white-space: nowrap !important;
|
|
112
132
|
}
|
|
@@ -24,13 +24,9 @@ var TopDateProcess = function TopDateProcess(props) {
|
|
|
24
24
|
width: width
|
|
25
25
|
},
|
|
26
26
|
key: index
|
|
27
|
-
},
|
|
28
|
-
className: "time-range-single-slider-YYYY"
|
|
29
|
-
}, YYYY), oddIndex && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
30
|
-
className: "time-range-single-slider-cut-line-MM-DD"
|
|
31
|
-
}, "|"), /*#__PURE__*/React.createElement("div", {
|
|
27
|
+
}, oddIndex && /*#__PURE__*/React.createElement("div", {
|
|
32
28
|
className: "time-range-single-slider-MM-DD"
|
|
33
|
-
}, MM_DD))
|
|
29
|
+
}, MM_DD));
|
|
34
30
|
});
|
|
35
31
|
};
|
|
36
32
|
export default TopDateProcess;
|
|
@@ -1,7 +1,20 @@
|
|
|
1
1
|
import "@chaoswise/ui/lib/Tooltip/index.less";
|
|
2
2
|
import _Tooltip from "@chaoswise/ui/lib/Tooltip";
|
|
3
3
|
import _Icon from "@chaoswise/ui/lib/Icon";
|
|
4
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
5
|
+
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."); }
|
|
6
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
7
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
8
|
+
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; } }
|
|
9
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
4
10
|
import React, { useMemo } from "react";
|
|
11
|
+
function getClosestDay(date) {
|
|
12
|
+
var _date = _slicedToArray(date, 2),
|
|
13
|
+
startTime = _date[0],
|
|
14
|
+
endTime = _date[1];
|
|
15
|
+
var closestDay = startTime.clone().add(endTime.diff(startTime) / 2, "milliseconds");
|
|
16
|
+
return closestDay.format("MM/DD");
|
|
17
|
+
}
|
|
5
18
|
var TopPlaceholder = function TopPlaceholder(props) {
|
|
6
19
|
var TimeRangeAreaLimitSlider = props.TimeRangeAreaLimitSlider,
|
|
7
20
|
topSliderInfo = props.topSliderInfo,
|
|
@@ -10,9 +23,14 @@ var TopPlaceholder = function TopPlaceholder(props) {
|
|
|
10
23
|
beginMouseDown = props.beginMouseDown;
|
|
11
24
|
var days = timeBoundary.days;
|
|
12
25
|
var singleWidth = timeSliderWidth / days;
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
|
|
26
|
+
var _useMemo = useMemo(function () {
|
|
27
|
+
var isHasTooltipDate = Array.isArray(topSliderInfo.date) && topSliderInfo.date.length === 2;
|
|
28
|
+
var closeToDateInfo = isHasTooltipDate ? getClosestDay(topSliderInfo.date) : "";
|
|
29
|
+
return [isHasTooltipDate, closeToDateInfo];
|
|
30
|
+
}, [topSliderInfo]),
|
|
31
|
+
_useMemo2 = _slicedToArray(_useMemo, 2),
|
|
32
|
+
isHasTooltipDate = _useMemo2[0],
|
|
33
|
+
closeToDateInfo = _useMemo2[1];
|
|
16
34
|
return /*#__PURE__*/React.createElement("div", {
|
|
17
35
|
style: {
|
|
18
36
|
width: singleWidth,
|
|
@@ -31,6 +49,8 @@ var TopPlaceholder = function TopPlaceholder(props) {
|
|
|
31
49
|
}, /*#__PURE__*/React.createElement(_Icon, {
|
|
32
50
|
className: "time-range-slider-top-placeholder-inner",
|
|
33
51
|
type: "down"
|
|
34
|
-
})
|
|
52
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
53
|
+
className: "time-range-slider-top-placeholder-date-info"
|
|
54
|
+
}, closeToDateInfo))));
|
|
35
55
|
};
|
|
36
56
|
export default TopPlaceholder;
|
|
@@ -4,34 +4,43 @@
|
|
|
4
4
|
height: 28px;
|
|
5
5
|
background-color: @disabled-bg;
|
|
6
6
|
position: relative;
|
|
7
|
-
margin-bottom:
|
|
7
|
+
margin-bottom: 40px;
|
|
8
8
|
|
|
9
9
|
.time-range-single-slider {
|
|
10
10
|
position: relative;
|
|
11
11
|
height: 100%;
|
|
12
12
|
color: @text-color-secondary;
|
|
13
|
+
display: flex;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
align-items: center;
|
|
13
16
|
|
|
14
|
-
&.time-range-single-odd-slider {
|
|
15
|
-
background-color: fade(@white, 60%);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.time-range-single-slider-YYYY,
|
|
19
17
|
.time-range-single-slider-MM-DD {
|
|
20
|
-
|
|
18
|
+
font-size: 12px;
|
|
21
19
|
height: 20px;
|
|
22
20
|
line-height: 20px;
|
|
23
|
-
width: 40px;
|
|
24
|
-
text-align: center;
|
|
25
|
-
left: -20px;
|
|
26
21
|
}
|
|
27
22
|
|
|
28
|
-
|
|
29
|
-
|
|
23
|
+
&.time-range-single-odd-slider {
|
|
24
|
+
// background-color: fade(@white, 60%);
|
|
30
25
|
}
|
|
31
26
|
|
|
32
|
-
.time-range-single-slider-
|
|
33
|
-
|
|
34
|
-
|
|
27
|
+
// .time-range-single-slider-YYYY,
|
|
28
|
+
// .time-range-single-slider-MM-DD {
|
|
29
|
+
// position: absolute;
|
|
30
|
+
// height: 20px;
|
|
31
|
+
// line-height: 20px;
|
|
32
|
+
// width: 40px;
|
|
33
|
+
// text-align: center;
|
|
34
|
+
// left: -20px;
|
|
35
|
+
// }
|
|
36
|
+
|
|
37
|
+
// .time-range-single-slider-YYYY {
|
|
38
|
+
// top: -24px;
|
|
39
|
+
// }
|
|
40
|
+
|
|
41
|
+
// .time-range-single-slider-MM-DD {
|
|
42
|
+
// top: 32px;
|
|
43
|
+
// }
|
|
35
44
|
|
|
36
45
|
.time-range-single-slider-cut-line-MM-DD {
|
|
37
46
|
position: absolute;
|
|
@@ -56,10 +65,16 @@
|
|
|
56
65
|
width: 100%;
|
|
57
66
|
height: 100%;
|
|
58
67
|
position: relative;
|
|
68
|
+
display: flex;
|
|
69
|
+
justify-content: center;
|
|
70
|
+
align-items: center;
|
|
59
71
|
border: @border-width-base @border-style-base @primary-color;
|
|
60
72
|
border-radius: 2px;
|
|
61
73
|
background-color: @component-background;
|
|
62
|
-
|
|
74
|
+
.time-range-slider-top-placeholder-date-info{
|
|
75
|
+
font-size: 12px;
|
|
76
|
+
color: @primary-color
|
|
77
|
+
}
|
|
63
78
|
.time-range-slider-top-placeholder-inner {
|
|
64
79
|
position: absolute;
|
|
65
80
|
color: @primary-color !important;
|
|
@@ -22,9 +22,6 @@ var useMouse = function useMouse(_ref) {
|
|
|
22
22
|
timeSliderWidth = _ref.timeSliderWidth,
|
|
23
23
|
visible = _ref.visible,
|
|
24
24
|
inputRef = _ref.inputRef,
|
|
25
|
-
TimeRangeSliderWrapperRef = _ref.TimeRangeSliderWrapperRef,
|
|
26
|
-
TimeRangeAreaLimitSlider = _ref.TimeRangeAreaLimitSlider,
|
|
27
|
-
TimeRangeAreaLimitBottomSlider = _ref.TimeRangeAreaLimitBottomSlider,
|
|
28
25
|
recordDate = _ref.recordDate,
|
|
29
26
|
TimeRangeSliderBottomWrapperRef = _ref.TimeRangeSliderBottomWrapperRef;
|
|
30
27
|
var min = timeBoundary.min,
|
|
@@ -44,7 +41,7 @@ var useMouse = function useMouse(_ref) {
|
|
|
44
41
|
var _useState5 = useState({
|
|
45
42
|
width: 0,
|
|
46
43
|
left: 0,
|
|
47
|
-
|
|
44
|
+
date: [],
|
|
48
45
|
canDrag: true
|
|
49
46
|
}),
|
|
50
47
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
@@ -53,7 +50,7 @@ var useMouse = function useMouse(_ref) {
|
|
|
53
50
|
var _useState7 = useState({
|
|
54
51
|
width: 0,
|
|
55
52
|
left: 0,
|
|
56
|
-
|
|
53
|
+
date: []
|
|
57
54
|
}),
|
|
58
55
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
59
56
|
bottomSliderHoverInfo = _useState8[0],
|
|
@@ -73,16 +70,24 @@ var useMouse = function useMouse(_ref) {
|
|
|
73
70
|
// 记录左右拖拽信息
|
|
74
71
|
initialWidth: 0,
|
|
75
72
|
// 记录初始宽度
|
|
76
|
-
|
|
73
|
+
initialMouseX: 0,
|
|
74
|
+
// 记录鼠标按下时的位置
|
|
75
|
+
initialLeft: 0,
|
|
76
|
+
cutOutInfo: {
|
|
77
|
+
canCutOut: false,
|
|
78
|
+
initialPosition: 0
|
|
79
|
+
}
|
|
77
80
|
});
|
|
78
81
|
var bottomSliderInfoRef = useRef({
|
|
79
82
|
width: 0,
|
|
80
83
|
left: 0,
|
|
81
|
-
|
|
84
|
+
date: [],
|
|
82
85
|
canDrag: true
|
|
83
86
|
});
|
|
84
87
|
var isHoverBottomWrapper = useHover(TimeRangeSliderBottomWrapperRef);
|
|
85
|
-
var
|
|
88
|
+
var millisecondsOfTheDay = moment.duration(1, "days").valueOf(); // 一天的毫秒数 86400000
|
|
89
|
+
var minWidth = min / millisecondsOfTheDay * timeSliderWidth;
|
|
90
|
+
var maxWidth = max / millisecondsOfTheDay * timeSliderWidth;
|
|
86
91
|
useEffect(function () {
|
|
87
92
|
document.addEventListener("mousemove", move);
|
|
88
93
|
document.addEventListener("mouseup", endMove);
|
|
@@ -132,6 +137,119 @@ var useMouse = function useMouse(_ref) {
|
|
|
132
137
|
}, [recordDate, recordTimeDateWrapper]);
|
|
133
138
|
var resStartLeftDate = currentMomentRef.current.clone().subtract(1, "days");
|
|
134
139
|
var resStartLeftDatePosition = getPositionInfoByDateInfo(resStartLeftDate, timeSliderWidth, currentMomentRef.current, days);
|
|
140
|
+
/**
|
|
141
|
+
* 顶部滑块拖拽中
|
|
142
|
+
* @param {*} e
|
|
143
|
+
*/
|
|
144
|
+
var topSliderMove = function topSliderMove(e) {
|
|
145
|
+
var _dragableRef$current = dragableRef.current,
|
|
146
|
+
initialMouseX = _dragableRef$current.initialMouseX,
|
|
147
|
+
initialLeft = _dragableRef$current.initialLeft;
|
|
148
|
+
// 计算当前偏移量
|
|
149
|
+
var offset = e.clientX - initialMouseX;
|
|
150
|
+
var left = Number(initialLeft + offset);
|
|
151
|
+
if (left < 0) {
|
|
152
|
+
left = 0;
|
|
153
|
+
} else if (left > resStartLeftDatePosition) {
|
|
154
|
+
left = resStartLeftDatePosition;
|
|
155
|
+
}
|
|
156
|
+
var _getDateInfoByPositio = getDateInfoByPositionInfo(left, timeSliderWidth, currentMomentRef.current, days),
|
|
157
|
+
startDate = _getDateInfoByPositio.startDate,
|
|
158
|
+
endDate = _getDateInfoByPositio.endDate;
|
|
159
|
+
var newRecordEndTimeDateWrapper = [startDate, endDate];
|
|
160
|
+
recordEndTimeDateWrapper.current = newRecordEndTimeDateWrapper;
|
|
161
|
+
setTopSliderInfo({
|
|
162
|
+
left: left,
|
|
163
|
+
date: newRecordEndTimeDateWrapper
|
|
164
|
+
});
|
|
165
|
+
};
|
|
166
|
+
/**
|
|
167
|
+
* 底部滑块拖拽中
|
|
168
|
+
* @param {*} e
|
|
169
|
+
*/
|
|
170
|
+
var bottomSliderMove = function bottomSliderMove(e) {
|
|
171
|
+
var _dragableRef$current2 = dragableRef.current,
|
|
172
|
+
initialMouseX = _dragableRef$current2.initialMouseX,
|
|
173
|
+
resizePosition = _dragableRef$current2.resizePosition,
|
|
174
|
+
initialWidth = _dragableRef$current2.initialWidth,
|
|
175
|
+
initialLeft = _dragableRef$current2.initialLeft;
|
|
176
|
+
// 计算当前偏移量
|
|
177
|
+
var offset = e.clientX - initialMouseX;
|
|
178
|
+
var width = initialWidth;
|
|
179
|
+
var left = initialLeft;
|
|
180
|
+
var canDrag = true;
|
|
181
|
+
if (!resizePosition) {
|
|
182
|
+
left = Number(initialLeft + offset);
|
|
183
|
+
} else if (resizePosition === "left") {
|
|
184
|
+
width = Number(initialWidth - offset);
|
|
185
|
+
left = Number(initialLeft + offset);
|
|
186
|
+
if (width < minWidth) {
|
|
187
|
+
width = minWidth;
|
|
188
|
+
left = Number(bottomSliderInfoRef.current.left + bottomSliderInfoRef.current.width - minWidth);
|
|
189
|
+
canDrag = false;
|
|
190
|
+
} else if (width > maxWidth) {
|
|
191
|
+
width = maxWidth;
|
|
192
|
+
left = Number(bottomSliderInfoRef.current.left + bottomSliderInfoRef.current.width - maxWidth);
|
|
193
|
+
canDrag = false;
|
|
194
|
+
}
|
|
195
|
+
} else {
|
|
196
|
+
width = Number(initialWidth + offset);
|
|
197
|
+
if (width < minWidth) {
|
|
198
|
+
width = minWidth;
|
|
199
|
+
canDrag = false;
|
|
200
|
+
} else if (width > maxWidth) {
|
|
201
|
+
width = maxWidth;
|
|
202
|
+
canDrag = false;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
var date = getTimeDateInfoByPositionInfo(left, width, timeSliderWidth, currentMomentRef.current, recordEndTimeDateWrapper.current, days);
|
|
206
|
+
var startDate = currentMomentRef.current.clone().subtract(days, "days");
|
|
207
|
+
var isSameOrAfterStart = isSameOrAfter(date.startDate, startDate);
|
|
208
|
+
var isSameOrAfterEnd = isSameOrAfter(currentMomentRef.current, date.endDate);
|
|
209
|
+
if (!isSameOrAfterStart || !isSameOrAfterEnd) return;
|
|
210
|
+
var newTimeDate = [date.startDate, date.endDate];
|
|
211
|
+
setBottomSliderInfo(function (pre) {
|
|
212
|
+
return _objectSpread(_objectSpread({}, pre), {}, {
|
|
213
|
+
width: width,
|
|
214
|
+
left: left,
|
|
215
|
+
date: newTimeDate,
|
|
216
|
+
canDrag: canDrag
|
|
217
|
+
});
|
|
218
|
+
});
|
|
219
|
+
};
|
|
220
|
+
/**
|
|
221
|
+
* 底部滑块截取拖拽中:创建新滑块并移动
|
|
222
|
+
* @param {*} e
|
|
223
|
+
*/
|
|
224
|
+
var bottomSliderCutOutMove = function bottomSliderCutOutMove(e) {
|
|
225
|
+
var initialPosition = dragableRef.current.cutOutInfo.initialPosition;
|
|
226
|
+
setBottomSliderDragStatus(true);
|
|
227
|
+
var movePosition = getOffsetLeft(e, TimeRangeSliderBottomWrapperRef);
|
|
228
|
+
var offset = movePosition - initialPosition;
|
|
229
|
+
if (Math.abs(offset) > 0) {
|
|
230
|
+
if (Math.abs(offset) >= minWidth && Math.abs(offset) <= maxWidth) {
|
|
231
|
+
var resInitialPosition = initialPosition; // 初始定位left
|
|
232
|
+
var resWidth = Math.abs(offset); // width
|
|
233
|
+
if (offset < 0) {
|
|
234
|
+
resInitialPosition = movePosition;
|
|
235
|
+
}
|
|
236
|
+
var date = getTimeDateInfoByPositionInfo(resInitialPosition, resWidth, timeSliderWidth, currentMomentRef.current, recordEndTimeDateWrapper.current, days);
|
|
237
|
+
var startDate = currentMomentRef.current.clone().subtract(days, "days");
|
|
238
|
+
var isSameOrAfterStart = isSameOrAfter(date.startDate, startDate);
|
|
239
|
+
var isSameOrAfterEnd = isSameOrAfter(currentMomentRef.current, date.endDate);
|
|
240
|
+
if (!isSameOrAfterStart || !isSameOrAfterEnd) return;
|
|
241
|
+
var newTimeDate = [date.startDate, date.endDate];
|
|
242
|
+
setBottomSliderInfo(function (pre) {
|
|
243
|
+
return _objectSpread(_objectSpread({}, pre), {}, {
|
|
244
|
+
width: resWidth,
|
|
245
|
+
left: resInitialPosition,
|
|
246
|
+
date: newTimeDate,
|
|
247
|
+
canDrag: true
|
|
248
|
+
});
|
|
249
|
+
});
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
};
|
|
135
253
|
/**
|
|
136
254
|
* 拖拽中
|
|
137
255
|
* @param {*} e : 事件对象
|
|
@@ -148,80 +266,22 @@ var useMouse = function useMouse(_ref) {
|
|
|
148
266
|
width: hoverWidth,
|
|
149
267
|
date: hoverTimeDate
|
|
150
268
|
});
|
|
269
|
+
var canCutOut = dragableRef.current.cutOutInfo.canCutOut;
|
|
151
270
|
isHandleClickRef.current = e.buttons !== 1; // e.buttons === 1 为鼠标左键按下
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
271
|
+
if (canCutOut && !isHandleClickRef.current) {
|
|
272
|
+
// 截取
|
|
273
|
+
bottomSliderCutOutMove(e);
|
|
274
|
+
return;
|
|
275
|
+
}
|
|
276
|
+
var _dragableRef$current3 = dragableRef.current,
|
|
277
|
+
status = _dragableRef$current3.status,
|
|
278
|
+
position = _dragableRef$current3.position;
|
|
158
279
|
if (!status) return;
|
|
159
|
-
var TimeRangeSliderWrapper = TimeRangeSliderWrapperRef.current;
|
|
160
|
-
var TimeRangeAreaLimitSliderDom = TimeRangeAreaLimitSlider.current;
|
|
161
|
-
// 计算当前偏移量
|
|
162
|
-
var newLeft = e.clientX - beginX;
|
|
163
280
|
if (position === "top") {
|
|
164
|
-
|
|
165
|
-
if (newLeft > resStartLeftDatePosition) {
|
|
166
|
-
newLeft = resStartLeftDatePosition;
|
|
167
|
-
}
|
|
168
|
-
var _getDateInfoByPositio = getDateInfoByPositionInfo(newLeft, timeSliderWidth, currentMomentRef.current, days),
|
|
169
|
-
startDate = _getDateInfoByPositio.startDate,
|
|
170
|
-
endDate = _getDateInfoByPositio.endDate;
|
|
171
|
-
var newRecordEndTimeDateWrapper = [startDate, endDate];
|
|
172
|
-
recordEndTimeDateWrapper.current = newRecordEndTimeDateWrapper;
|
|
173
|
-
setTopSliderInfo({
|
|
174
|
-
left: newLeft,
|
|
175
|
-
date: newRecordEndTimeDateWrapper
|
|
176
|
-
});
|
|
177
|
-
}
|
|
281
|
+
topSliderMove(e);
|
|
178
282
|
}
|
|
179
283
|
if (position === "bottom") {
|
|
180
|
-
|
|
181
|
-
var _left = bottomSliderInfoRef.current.left;
|
|
182
|
-
var millisecondsOfTheDay = moment.duration(1, "days").valueOf(); // 一天的毫秒数 86400000
|
|
183
|
-
var minWidth = min / millisecondsOfTheDay * timeSliderWidth;
|
|
184
|
-
var maxWidth = max / millisecondsOfTheDay * timeSliderWidth;
|
|
185
|
-
var canDrag = true;
|
|
186
|
-
if (!resizePosition) {
|
|
187
|
-
_left = newLeft;
|
|
188
|
-
} else if (resizePosition === "left") {
|
|
189
|
-
var diffLeft = _left - newLeft;
|
|
190
|
-
width = Number(width + diffLeft);
|
|
191
|
-
_left = newLeft;
|
|
192
|
-
if (width < minWidth) {
|
|
193
|
-
width = minWidth;
|
|
194
|
-
_left = Number(bottomSliderInfoRef.current.left + bottomSliderInfoRef.current.width - minWidth);
|
|
195
|
-
canDrag = false;
|
|
196
|
-
} else if (width > maxWidth) {
|
|
197
|
-
width = maxWidth;
|
|
198
|
-
_left = Number(bottomSliderInfoRef.current.left + bottomSliderInfoRef.current.width - maxWidth);
|
|
199
|
-
canDrag = false;
|
|
200
|
-
}
|
|
201
|
-
} else {
|
|
202
|
-
width = Number(initialWidth + newLeft);
|
|
203
|
-
if (width < minWidth) {
|
|
204
|
-
width = minWidth;
|
|
205
|
-
canDrag = false;
|
|
206
|
-
} else if (width > maxWidth) {
|
|
207
|
-
width = maxWidth;
|
|
208
|
-
canDrag = false;
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
var date = getTimeDateInfoByPositionInfo(_left, width, timeSliderWidth, currentMomentRef.current, recordEndTimeDateWrapper.current, days);
|
|
212
|
-
var _startDate = currentMomentRef.current.clone().subtract(days, "days");
|
|
213
|
-
var isSameOrAfterStart = isSameOrAfter(date.startDate, _startDate);
|
|
214
|
-
var isSameOrAfterEnd = isSameOrAfter(currentMomentRef.current, date.endDate);
|
|
215
|
-
if (!isSameOrAfterStart || !isSameOrAfterEnd) return;
|
|
216
|
-
var newTimeDate = [date.startDate, date.endDate];
|
|
217
|
-
setBottomSliderInfo(function (pre) {
|
|
218
|
-
return _objectSpread(_objectSpread({}, pre), {}, {
|
|
219
|
-
width: width,
|
|
220
|
-
left: _left,
|
|
221
|
-
date: newTimeDate,
|
|
222
|
-
canDrag: canDrag
|
|
223
|
-
});
|
|
224
|
-
});
|
|
284
|
+
bottomSliderMove(e);
|
|
225
285
|
}
|
|
226
286
|
};
|
|
227
287
|
/**
|
|
@@ -246,7 +306,12 @@ var useMouse = function useMouse(_ref) {
|
|
|
246
306
|
position: undefined,
|
|
247
307
|
initialWidth: 0,
|
|
248
308
|
resizePosition: undefined,
|
|
249
|
-
|
|
309
|
+
initialMouseX: 0,
|
|
310
|
+
initialLeft: 0,
|
|
311
|
+
cutOutInfo: {
|
|
312
|
+
canCutOut: false,
|
|
313
|
+
initialPosition: 0
|
|
314
|
+
}
|
|
250
315
|
});
|
|
251
316
|
setBottomSliderInfo(function (pre) {
|
|
252
317
|
return _objectSpread(_objectSpread({}, pre), {}, {
|
|
@@ -263,13 +328,10 @@ var useMouse = function useMouse(_ref) {
|
|
|
263
328
|
var beginMouseDown = function beginMouseDown(e, position, resizePosition) {
|
|
264
329
|
e.stopPropagation();
|
|
265
330
|
e.preventDefault();
|
|
266
|
-
var TimeRangeAreaLimitSliderDom = TimeRangeAreaLimitSlider.current;
|
|
267
|
-
var TimeRangeAreaLimitBottomSliderDom = TimeRangeAreaLimitBottomSlider.current;
|
|
268
331
|
var X = e.clientX;
|
|
332
|
+
var initialLeft = bottomSliderInfo.left;
|
|
269
333
|
if (position === "top") {
|
|
270
|
-
|
|
271
|
-
} else if (position === "bottom" && resizePosition !== "right") {
|
|
272
|
-
X = e.clientX - TimeRangeAreaLimitBottomSliderDom.offsetLeft;
|
|
334
|
+
initialLeft = topSliderInfo.left;
|
|
273
335
|
}
|
|
274
336
|
var status = true;
|
|
275
337
|
setBottomSliderDragStatus(status);
|
|
@@ -278,9 +340,10 @@ var useMouse = function useMouse(_ref) {
|
|
|
278
340
|
position: position,
|
|
279
341
|
resizePosition: resizePosition,
|
|
280
342
|
// 左右拖拽
|
|
281
|
-
initialWidth:
|
|
343
|
+
initialWidth: bottomSliderInfo.width,
|
|
282
344
|
// 左右拖拽
|
|
283
|
-
|
|
345
|
+
initialMouseX: X,
|
|
346
|
+
initialLeft: initialLeft
|
|
284
347
|
});
|
|
285
348
|
};
|
|
286
349
|
/**
|
|
@@ -309,6 +372,18 @@ var useMouse = function useMouse(_ref) {
|
|
|
309
372
|
});
|
|
310
373
|
onChange(returnValue);
|
|
311
374
|
};
|
|
375
|
+
var beginDrawMouseDown = function beginDrawMouseDown(e) {
|
|
376
|
+
e.stopPropagation();
|
|
377
|
+
e.preventDefault();
|
|
378
|
+
var initialPosition = getOffsetLeft(e, TimeRangeSliderBottomWrapperRef);
|
|
379
|
+
dragableRef.current = _objectSpread(_objectSpread({}, dragableRef.current), {}, {
|
|
380
|
+
position: "bottom",
|
|
381
|
+
cutOutInfo: {
|
|
382
|
+
canCutOut: true,
|
|
383
|
+
initialPosition: initialPosition
|
|
384
|
+
}
|
|
385
|
+
});
|
|
386
|
+
};
|
|
312
387
|
return {
|
|
313
388
|
topSliderInfo: topSliderInfo,
|
|
314
389
|
bottomSliderInfo: bottomSliderInfo,
|
|
@@ -319,7 +394,7 @@ var useMouse = function useMouse(_ref) {
|
|
|
319
394
|
bottomSliderHoverInfo: bottomSliderHoverInfo,
|
|
320
395
|
bottomSliderDragStatus: bottomSliderDragStatus,
|
|
321
396
|
isHoverBottomWrapper: isHoverBottomWrapper,
|
|
322
|
-
|
|
397
|
+
beginDrawMouseDown: beginDrawMouseDown
|
|
323
398
|
};
|
|
324
399
|
};
|
|
325
400
|
export default useMouse;
|
|
@@ -7,7 +7,7 @@ var TimeRangeSliderCmp = function TimeRangeSliderCmp(props) {
|
|
|
7
7
|
recordDate = props.value,
|
|
8
8
|
_props$timeBoundary = props.timeBoundary,
|
|
9
9
|
timeBoundary = _props$timeBoundary === void 0 ? {
|
|
10
|
-
min:
|
|
10
|
+
min: 10 * 60 * 1000,
|
|
11
11
|
// 5分钟的毫秒数
|
|
12
12
|
max: 24 * 60 * 60 * 1000,
|
|
13
13
|
// 一天的毫秒数
|
|
@@ -32,9 +32,6 @@ var TimeRangeSliderCmp = function TimeRangeSliderCmp(props) {
|
|
|
32
32
|
timeSliderWidth: timeSliderWidth,
|
|
33
33
|
visible: visible,
|
|
34
34
|
inputRef: inputRef,
|
|
35
|
-
TimeRangeSliderWrapperRef: TimeRangeSliderWrapperRef,
|
|
36
|
-
TimeRangeAreaLimitSlider: TimeRangeAreaLimitSlider,
|
|
37
|
-
TimeRangeAreaLimitBottomSlider: TimeRangeAreaLimitBottomSlider,
|
|
38
35
|
recordDate: recordDate,
|
|
39
36
|
TimeRangeSliderBottomWrapperRef: TimeRangeSliderBottomWrapperRef
|
|
40
37
|
}),
|
|
@@ -47,7 +44,7 @@ var TimeRangeSliderCmp = function TimeRangeSliderCmp(props) {
|
|
|
47
44
|
bottomSliderHoverInfo = _useMouse.bottomSliderHoverInfo,
|
|
48
45
|
bottomSliderDragStatus = _useMouse.bottomSliderDragStatus,
|
|
49
46
|
isHoverBottomWrapper = _useMouse.isHoverBottomWrapper,
|
|
50
|
-
|
|
47
|
+
beginDrawMouseDown = _useMouse.beginDrawMouseDown;
|
|
51
48
|
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TopSlider, {
|
|
52
49
|
TimeRangeSliderWrapperRef: TimeRangeSliderWrapperRef,
|
|
53
50
|
TimeRangeAreaLimitSlider: TimeRangeAreaLimitSlider,
|
|
@@ -67,7 +64,8 @@ var TimeRangeSliderCmp = function TimeRangeSliderCmp(props) {
|
|
|
67
64
|
bottomSliderHoverInfo: bottomSliderHoverInfo,
|
|
68
65
|
bottomSliderDragStatus: bottomSliderDragStatus,
|
|
69
66
|
isHoverBottomWrapper: isHoverBottomWrapper,
|
|
70
|
-
|
|
67
|
+
beginDrawMouseDown: beginDrawMouseDown,
|
|
68
|
+
visible: visible // 组件卸载的慢，手动控制tooltip隐藏，不然关闭的时候会有些许延迟 . todo: 开启的时候会有两次不同位置，未解决
|
|
71
69
|
}));
|
|
72
70
|
};
|
|
73
71
|
export default TimeRangeSliderCmp;
|
|
@@ -224,4 +224,32 @@ export var getBottomSliderHoverInfo = function getBottomSliderHoverInfo(left, bo
|
|
|
224
224
|
return _objectSpread(_objectSpread({}, positionInfo), {}, {
|
|
225
225
|
date: newTimeDate
|
|
226
226
|
});
|
|
227
|
+
};
|
|
228
|
+
|
|
229
|
+
// 计算输入框时间跨度
|
|
230
|
+
export var computeTimeSpan = function computeTimeSpan(value) {
|
|
231
|
+
// 当前传入日期的时间
|
|
232
|
+
var timeDiff = value[1].diff(value[0], "s");
|
|
233
|
+
if (timeDiff >= 60) {
|
|
234
|
+
timeDiff = Number(timeDiff + 1);
|
|
235
|
+
}
|
|
236
|
+
var duration = moment.duration(timeDiff, "s");
|
|
237
|
+
var _duration$_data = duration._data,
|
|
238
|
+
years = _duration$_data.years,
|
|
239
|
+
months = _duration$_data.months,
|
|
240
|
+
days = _duration$_data.days,
|
|
241
|
+
hours = _duration$_data.hours,
|
|
242
|
+
minutes = _duration$_data.minutes,
|
|
243
|
+
seconds = _duration$_data.seconds;
|
|
244
|
+
var timeSpan = "";
|
|
245
|
+
if (days) {
|
|
246
|
+
timeSpan += "".concat(days, "d");
|
|
247
|
+
}
|
|
248
|
+
if (hours) {
|
|
249
|
+
timeSpan += "".concat(hours, "h");
|
|
250
|
+
}
|
|
251
|
+
if (minutes) {
|
|
252
|
+
timeSpan += "".concat(minutes, "m");
|
|
253
|
+
}
|
|
254
|
+
return timeSpan;
|
|
227
255
|
};
|
|
@@ -3,6 +3,8 @@ import _Popover from "@chaoswise/ui/lib/Popover";
|
|
|
3
3
|
import "@chaoswise/ui/lib/Input/index.less";
|
|
4
4
|
import _Input from "@chaoswise/ui/lib/Input";
|
|
5
5
|
import _Icon from "@chaoswise/ui/lib/Icon";
|
|
6
|
+
import "@chaoswise/ui/lib/message/index.less";
|
|
7
|
+
import _message from "@chaoswise/ui/lib/message";
|
|
6
8
|
import _useLocale2 from "@chaoswise/ui/lib/useLocale";
|
|
7
9
|
var _excluded = ["timeDomain", "number", "unit", "isRecently", "value"],
|
|
8
10
|
_excluded2 = ["value", "timeDomain", "number", "unit", "isRecently"];
|
|
@@ -27,9 +29,10 @@ import TimeSpan from "./TimeSpan";
|
|
|
27
29
|
import TimeRangeSliderCmp from "./TimeRangeSliderCmp";
|
|
28
30
|
import Refresh from "./Refresh";
|
|
29
31
|
import CalendarSvg from "./assets/Calendar";
|
|
30
|
-
import { echoInputValue, judgeType, getChangeUnitDate, funcValueChangeArrayValue, getCorrectValue, getYears, computedRecentlyValue } from "./utils";
|
|
32
|
+
import { echoInputValue, getUnit, judgeType, getChangeUnitDate, isInvalidDate, funcValueChangeArrayValue, getCorrectValue, getFinalDateOption, getTruthDateCount, isLessThanMinTimeSpan, isExceedMaxTimeSpan, isWithinTimeSpan, getYears, computedRecentlyValue } from "./utils";
|
|
31
33
|
import _ from "lodash";
|
|
32
34
|
import langConfig from "./locale";
|
|
35
|
+
import { formatMessage } from "../utils";
|
|
33
36
|
import "./index.less";
|
|
34
37
|
var TimeRangeSlider = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
35
38
|
var defaultValue = props.defaultValue,
|
|
@@ -65,7 +68,7 @@ var TimeRangeSlider = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
65
68
|
_refreshOption$isRece = refreshOption.isRecentlyOpenRefresh,
|
|
66
69
|
isRecentlyOpenRefresh = _refreshOption$isRece === void 0 ? true : _refreshOption$isRece;
|
|
67
70
|
var _timeSpanOption$timeS = timeSpanOption.timeSpanBoundaryStart,
|
|
68
|
-
timeSpanBoundaryStart = _timeSpanOption$timeS === void 0 ?
|
|
71
|
+
timeSpanBoundaryStart = _timeSpanOption$timeS === void 0 ? 10 * 60 : _timeSpanOption$timeS,
|
|
69
72
|
_timeSpanOption$timeS2 = timeSpanOption.timeSpanBoundary,
|
|
70
73
|
timeSpanBoundary = _timeSpanOption$timeS2 === void 0 ? 24 * 60 * 60 : _timeSpanOption$timeS2,
|
|
71
74
|
_timeSpanOption$days = timeSpanOption.days,
|
|
@@ -363,6 +366,81 @@ var TimeRangeSlider = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
363
366
|
var _refreshRef$current4, _refreshRef$current5;
|
|
364
367
|
((_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());
|
|
365
368
|
};
|
|
369
|
+
// 输入框按下回车
|
|
370
|
+
var onPressEnter = function onPressEnter(e) {
|
|
371
|
+
if (!isInputRef.current) return;
|
|
372
|
+
var _getUnit = getUnit(inputValue),
|
|
373
|
+
isRule = _getUnit.isRule,
|
|
374
|
+
captureUnit = _getUnit.captureUnit;
|
|
375
|
+
var values = getChangeUnitDate(captureUnit[0], captureUnit[1]);
|
|
376
|
+
if (isRule) {
|
|
377
|
+
var returnValue = getCorrectValue({
|
|
378
|
+
value: values
|
|
379
|
+
}, inputValue);
|
|
380
|
+
var isInvalidDate_ = isInvalidDate(returnValue.value);
|
|
381
|
+
if (!isInvalidDate_) {
|
|
382
|
+
// message.success(localeObj["fit-the-input-format"]);
|
|
383
|
+
var passValue = returnValue.value;
|
|
384
|
+
if (isLessThanMinTimeSpan(passValue, timeSpanBoundaryStart)) {
|
|
385
|
+
_message.error(formatMessage(localeObj["the-maximum-time-span-is-less-than"]));
|
|
386
|
+
return;
|
|
387
|
+
}
|
|
388
|
+
if (isExceedMaxTimeSpan(passValue, timeSpanBoundary)) {
|
|
389
|
+
_message.error(formatMessage(localeObj["the-maximum-time-span-is-exceeded"]));
|
|
390
|
+
return;
|
|
391
|
+
}
|
|
392
|
+
if (!isWithinTimeSpan(passValue, days)) {
|
|
393
|
+
_message.error(formatMessage(localeObj["not-within-the-required-time-span"]));
|
|
394
|
+
return;
|
|
395
|
+
}
|
|
396
|
+
_onChange(returnValue);
|
|
397
|
+
setIsFocus(false);
|
|
398
|
+
if (!value) {
|
|
399
|
+
setRecordDateValue(returnValue);
|
|
400
|
+
}
|
|
401
|
+
} else {
|
|
402
|
+
_message.error(formatMessage(localeObj["does-not-match-the-input-format"]));
|
|
403
|
+
}
|
|
404
|
+
} else {
|
|
405
|
+
var finalDateOption = getFinalDateOption(inputValue);
|
|
406
|
+
var _dateValue2 = finalDateOption.dateValue;
|
|
407
|
+
var dateCount = getTruthDateCount(_dateValue2);
|
|
408
|
+
if (dateCount === 2) {
|
|
409
|
+
var _returnValue = getCorrectValue({
|
|
410
|
+
value: _dateValue2
|
|
411
|
+
});
|
|
412
|
+
var _passValue = _returnValue.value;
|
|
413
|
+
if (isLessThanMinTimeSpan(_passValue, timeSpanBoundaryStart)) {
|
|
414
|
+
_message.error(formatMessage(localeObj["the-maximum-time-span-is-less-than"]));
|
|
415
|
+
return;
|
|
416
|
+
}
|
|
417
|
+
if (isExceedMaxTimeSpan(_passValue, timeSpanBoundary)) {
|
|
418
|
+
_message.error(formatMessage(localeObj["the-maximum-time-span-is-exceeded"]));
|
|
419
|
+
return;
|
|
420
|
+
}
|
|
421
|
+
if (!isWithinTimeSpan(_passValue, days)) {
|
|
422
|
+
_message.error(formatMessage(localeObj["not-within-the-required-time-span"]));
|
|
423
|
+
return;
|
|
424
|
+
}
|
|
425
|
+
_onChange(_returnValue);
|
|
426
|
+
setIsFocus(false);
|
|
427
|
+
if (!value) {
|
|
428
|
+
setRecordDateValue(_returnValue);
|
|
429
|
+
}
|
|
430
|
+
} else {
|
|
431
|
+
_message.error(formatMessage(localeObj["does-not-match-the-input-format"]));
|
|
432
|
+
}
|
|
433
|
+
}
|
|
434
|
+
isInputRef.current = false;
|
|
435
|
+
};
|
|
436
|
+
var onCancel = function onCancel() {
|
|
437
|
+
setIsFocus(false);
|
|
438
|
+
};
|
|
439
|
+
var _title = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, timeSliderOption.title), /*#__PURE__*/React.createElement(_Icon, {
|
|
440
|
+
type: "close",
|
|
441
|
+
onClick: onCancel,
|
|
442
|
+
className: "time-slider-popover-close-icon"
|
|
443
|
+
}));
|
|
366
444
|
var commonProps = {
|
|
367
445
|
onChange: _onChange,
|
|
368
446
|
recordDateValue: recordDateValue,
|
|
@@ -384,14 +462,6 @@ var TimeRangeSlider = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
384
462
|
isHasDate: isHasDate,
|
|
385
463
|
isClickAutoRefresh: isClickAutoRefresh
|
|
386
464
|
});
|
|
387
|
-
var onCancel = function onCancel() {
|
|
388
|
-
setIsFocus(false);
|
|
389
|
-
};
|
|
390
|
-
var _title = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, timeSliderOption.title), /*#__PURE__*/React.createElement(_Icon, {
|
|
391
|
-
type: "close",
|
|
392
|
-
onClick: onCancel,
|
|
393
|
-
className: "time-slider-popover-close-icon"
|
|
394
|
-
}));
|
|
395
465
|
return /*#__PURE__*/React.createElement("div", {
|
|
396
466
|
className: classnames("cw-range-picker-wrapper", classNameWrapper),
|
|
397
467
|
ref: calendarRef
|
|
@@ -402,7 +472,13 @@ var TimeRangeSlider = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
402
472
|
className: classnames("cw-range-picker-input-wrapper"),
|
|
403
473
|
onFocus: onInputFocus,
|
|
404
474
|
value: inputValue,
|
|
405
|
-
ref: inputRef
|
|
475
|
+
ref: inputRef,
|
|
476
|
+
onPressEnter: onPressEnter,
|
|
477
|
+
onChange: function onChange(e) {
|
|
478
|
+
if (!isHasDate) return;
|
|
479
|
+
isInputRef.current = true;
|
|
480
|
+
setInputValue(e.target.value);
|
|
481
|
+
}
|
|
406
482
|
})), /*#__PURE__*/React.createElement(TimeSpan, timeSpanProps), /*#__PURE__*/React.createElement(Refresh, _extends({}, refreshProps, {
|
|
407
483
|
ref: refreshRef
|
|
408
484
|
})), /*#__PURE__*/React.createElement(_Popover, {
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
padding: 0;
|
|
84
84
|
right: 0 !important;
|
|
85
85
|
left: auto !important;
|
|
86
|
-
top:
|
|
86
|
+
top: 32px !important;
|
|
87
87
|
|
|
88
88
|
.@{ant-prefix}-popover-content {
|
|
89
89
|
min-width: 1200px;
|
|
@@ -101,6 +101,8 @@
|
|
|
101
101
|
line-height: 20px;
|
|
102
102
|
padding-top: 12px;
|
|
103
103
|
padding-bottom: 0;
|
|
104
|
+
color: @text-color-show;
|
|
105
|
+
font-weight: 400;
|
|
104
106
|
.time-slider-popover-close-icon {
|
|
105
107
|
font-size: 16px;
|
|
106
108
|
|
|
@@ -112,7 +114,7 @@
|
|
|
112
114
|
}
|
|
113
115
|
|
|
114
116
|
.@{ant-prefix}-popover-inner-content {
|
|
115
|
-
padding:
|
|
117
|
+
padding: 16px 16px 36px;
|
|
116
118
|
display: flex;
|
|
117
119
|
flex-direction: column;
|
|
118
120
|
align-items: center;
|
|
@@ -25,5 +25,7 @@ export default {
|
|
|
25
25
|
"does-not-match-the-input-format": "Does not match the input format",
|
|
26
26
|
"the-selected-time-does-not-meet-the-rule-limit": "If the selected time is the same or exceeds the current time, select another time",
|
|
27
27
|
"the-maximum-time-span-is-exceeded": "The maximum time span is exceeded, please re-enter",
|
|
28
|
+
"the-maximum-time-span-is-less-than": "The maximum time span is less than the minimum time span, please re-enter",
|
|
29
|
+
"not-within-the-required-time-span": "Not within the required time span, please re-enter",
|
|
28
30
|
"unconverted-title": "Unconverted title"
|
|
29
31
|
};
|
|
@@ -25,5 +25,7 @@ export default {
|
|
|
25
25
|
"does-not-match-the-input-format": "不符合输入格式,请重新输入",
|
|
26
26
|
"the-selected-time-does-not-meet-the-rule-limit": "选择的时间二者相同或者某一时间超过当前时间，请重新选择",
|
|
27
27
|
"the-maximum-time-span-is-exceeded": "超过了限制的最大时间跨度，请重新输入",
|
|
28
|
+
"the-maximum-time-span-is-less-than": "小于限制的最小时间跨度，请重新输入",
|
|
29
|
+
"not-within-the-required-time-span": "不在要求的时间跨度之内,请重新输入",
|
|
28
30
|
"unconverted-title": "未转化标题"
|
|
29
31
|
};
|
|
@@ -25,5 +25,7 @@ export default {
|
|
|
25
25
|
"does-not-match-the-input-format": "不符合輸入格式,請重新輸入",
|
|
26
26
|
"the-selected-time-does-not-meet-the-rule-limit": "選擇的時間二者相同或者某一時間超過當前時間，請重新選擇",
|
|
27
27
|
"the-maximum-time-span-is-exceeded": "超過了限制的最大時間跨度，請重新輸入",
|
|
28
|
+
"the-maximum-time-span-is-less-than": "小於限制的最小時間跨度，請重新輸入",
|
|
29
|
+
"not-within-the-required-time-span": "不在要求的時間跨度之內，請重新輸入",
|
|
28
30
|
"unconverted-title": "未轉化標題"
|
|
29
31
|
};
|
|
@@ -709,4 +709,29 @@ export function getFinalDateOption(inputStr) {
|
|
|
709
709
|
*/
|
|
710
710
|
export var isExceedMaxTimeSpan = function isExceedMaxTimeSpan(value, timeSpanBoundary) {
|
|
711
711
|
return computeTimeDiff(value, "s") > timeSpanBoundary;
|
|
712
|
+
};
|
|
713
|
+
|
|
714
|
+
/**
|
|
715
|
+
* 是否小于最小的时间跨度
|
|
716
|
+
*/
|
|
717
|
+
export var isLessThanMinTimeSpan = function isLessThanMinTimeSpan(value, timeSpanBoundary) {
|
|
718
|
+
return computeTimeDiff(value, "s") < timeSpanBoundary;
|
|
719
|
+
};
|
|
720
|
+
|
|
721
|
+
// 检查一个 moment 是否在另一个 moment 之后或与之相同。
|
|
722
|
+
export var isSameOrAfter = function isSameOrAfter(date1, date2) {
|
|
723
|
+
return moment(date1).isSameOrAfter(date2);
|
|
724
|
+
};
|
|
725
|
+
|
|
726
|
+
/**
|
|
727
|
+
* 判断选择的时间是否在要求的时间时间之内，默认为最近30天
|
|
728
|
+
*/
|
|
729
|
+
export var isWithinTimeSpan = function isWithinTimeSpan(value, days) {
|
|
730
|
+
var startDate = moment().clone().subtract(days, "days");
|
|
731
|
+
var endDate = moment().clone();
|
|
732
|
+
if (isSameOrAfter(value[0], startDate) && isSameOrAfter(endDate, value[1])) {
|
|
733
|
+
return true;
|
|
734
|
+
} else {
|
|
735
|
+
return false;
|
|
736
|
+
}
|
|
712
737
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chaoswise/ui",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.9",
|
|
4
4
|
"description": "公共UI库",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -147,5 +147,5 @@
|
|
|
147
147
|
"access": "public"
|
|
148
148
|
},
|
|
149
149
|
"license": "MIT",
|
|
150
|
-
"gitHead": "
|
|
150
|
+
"gitHead": "25d971e15c4a3b3e66fa1807e02987a815cc2d3e"
|
|
151
151
|
}
|