deepsea-components 5.16.16 → 5.17.0
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/dist/components/AutoFit.cjs +9 -9
- package/dist/components/AutoFit.js +9 -9
- package/dist/components/AutoScroll.cjs +4 -4
- package/dist/components/AutoScroll.js +4 -4
- package/dist/components/AutoSizeTextarea.cjs +23 -81
- package/dist/components/AutoSizeTextarea.js +23 -81
- package/dist/components/CircleText.cjs +24 -120
- package/dist/components/CircleText.js +24 -120
- package/dist/components/CopyButton.cjs +2 -2
- package/dist/components/CopyButton.js +2 -2
- package/dist/components/DraggableGrid.cjs +98 -149
- package/dist/components/DraggableGrid.js +98 -149
- package/dist/components/Echart.cjs +24 -94
- package/dist/components/Echart.js +24 -94
- package/dist/components/Flow.cjs +8 -8
- package/dist/components/Flow.js +8 -8
- package/dist/components/FormLabel.cjs +27 -92
- package/dist/components/FormLabel.js +27 -92
- package/dist/components/HlsPlayer.cjs +24 -65
- package/dist/components/HlsPlayer.js +24 -65
- package/dist/components/IconFileType.cjs +4 -14
- package/dist/components/IconFileType.js +4 -14
- package/dist/components/InfiniteScroll.cjs +4 -4
- package/dist/components/InfiniteScroll.js +4 -4
- package/dist/components/InputFileButton.cjs +7 -7
- package/dist/components/InputFileButton.js +7 -7
- package/dist/components/ReadSheet.cjs +7 -32
- package/dist/components/ReadSheet.js +7 -32
- package/dist/components/Ring.cjs +10 -48
- package/dist/components/Ring.js +10 -48
- package/dist/components/ScrollMask.cjs +11 -97
- package/dist/components/ScrollMask.js +11 -97
- package/dist/components/SectionRing.cjs +15 -60
- package/dist/components/SectionRing.js +15 -60
- package/dist/components/TransitionBox.cjs +28 -118
- package/dist/components/TransitionBox.js +28 -118
- package/dist/components/TransitionNum.cjs +8 -8
- package/dist/components/TransitionNum.js +8 -8
- package/dist/components/Trapezium.cjs +9 -68
- package/dist/components/Trapezium.js +9 -68
- package/dist/components/Unify.cjs +19 -79
- package/dist/components/Unify.js +19 -79
- package/package.json +2 -2
|
@@ -1,114 +1,28 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { c } from "react/compiler-runtime";
|
|
3
2
|
import { clsx, isNonNullable } from "deepsea-tools";
|
|
4
3
|
import { useRef } from "react";
|
|
5
4
|
import { useSize } from "soda-hooks";
|
|
6
5
|
import ScrollMask_module from "./ScrollMask.module.js";
|
|
7
|
-
const ScrollMask = (
|
|
8
|
-
const $ = c(31);
|
|
9
|
-
let className;
|
|
10
|
-
let contentClassName;
|
|
11
|
-
let contentStyle;
|
|
12
|
-
let rest;
|
|
13
|
-
let style;
|
|
14
|
-
let t1;
|
|
15
|
-
let t2;
|
|
16
|
-
let t3;
|
|
17
|
-
let t4;
|
|
18
|
-
let t5;
|
|
19
|
-
if ($[0] !== t0) {
|
|
20
|
-
({ className, style, position: t1, size: t2, from: t3, to: t4, contentClassName, contentStyle, showRadian: t5, ...rest } = t0);
|
|
21
|
-
$[0] = t0;
|
|
22
|
-
$[1] = className;
|
|
23
|
-
$[2] = contentClassName;
|
|
24
|
-
$[3] = contentStyle;
|
|
25
|
-
$[4] = rest;
|
|
26
|
-
$[5] = style;
|
|
27
|
-
$[6] = t1;
|
|
28
|
-
$[7] = t2;
|
|
29
|
-
$[8] = t3;
|
|
30
|
-
$[9] = t4;
|
|
31
|
-
$[10] = t5;
|
|
32
|
-
} else {
|
|
33
|
-
className = $[1];
|
|
34
|
-
contentClassName = $[2];
|
|
35
|
-
contentStyle = $[3];
|
|
36
|
-
rest = $[4];
|
|
37
|
-
style = $[5];
|
|
38
|
-
t1 = $[6];
|
|
39
|
-
t2 = $[7];
|
|
40
|
-
t3 = $[8];
|
|
41
|
-
t4 = $[9];
|
|
42
|
-
t5 = $[10];
|
|
43
|
-
}
|
|
44
|
-
const position = void 0 === t1 ? "top" : t1;
|
|
45
|
-
const size = void 0 === t2 ? 8 : t2;
|
|
46
|
-
const from = void 0 === t3 ? "rgba(0, 0, 0, 0.1)" : t3;
|
|
47
|
-
const to = void 0 === t4 ? "rgba(0, 0, 0, 0)" : t4;
|
|
48
|
-
const showRadian = void 0 === t5 ? false : t5;
|
|
6
|
+
const ScrollMask = ({ className, style, position = "top", size = 8, from = "rgba(0, 0, 0, 0.1)", to = "rgba(0, 0, 0, 0)", contentClassName, contentStyle, showRadian = false, ...rest })=>{
|
|
49
7
|
const ref = useRef(null);
|
|
50
8
|
const contentSize = useSize(ref);
|
|
51
9
|
const radius = isNonNullable(contentSize) ? "top" === position || "bottom" === position ? (contentSize.width ** 2 / 4 + contentSize.height ** 2) / (2 * contentSize.height) : (contentSize.height ** 2 / 4 + contentSize.width ** 2) / (2 * contentSize.width) : void 0;
|
|
52
10
|
const clipPath = showRadian && isNonNullable(radius) ? "top" === position ? `circle(${radius}px at 50% -${radius - contentSize.height}px)` : "bottom" === position ? `circle(${radius}px at 50% ${radius}px)` : "left" === position ? `circle(${radius}px at -${radius - contentSize.width}px 50%)` : "right" === position ? `circle(${radius}px at ${radius}px 50%)` : "none" : "none";
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
$[11] = className;
|
|
58
|
-
$[12] = t6;
|
|
59
|
-
$[13] = t7;
|
|
60
|
-
} else t7 = $[13];
|
|
61
|
-
const t8 = `${size}px`;
|
|
62
|
-
let t9;
|
|
63
|
-
if ($[14] !== clipPath || $[15] !== from || $[16] !== style || $[17] !== t8 || $[18] !== to) {
|
|
64
|
-
t9 = {
|
|
65
|
-
"--scroll-mask-size": t8,
|
|
11
|
+
return /*#__PURE__*/ jsx("div", {
|
|
12
|
+
className: clsx(ScrollMask_module["scroll-mask"], ScrollMask_module[`${position}-scroll-mask`], className),
|
|
13
|
+
style: {
|
|
14
|
+
"--scroll-mask-size": `${size}px`,
|
|
66
15
|
"--scroll-mask-color-from": from,
|
|
67
16
|
"--scroll-mask-color-to": to,
|
|
68
17
|
"--scroll-mask-clip-path": clipPath,
|
|
69
18
|
...style
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
$[16] = style;
|
|
74
|
-
$[17] = t8;
|
|
75
|
-
$[18] = to;
|
|
76
|
-
$[19] = t9;
|
|
77
|
-
} else t9 = $[19];
|
|
78
|
-
const t10 = t9;
|
|
79
|
-
const t11 = ScrollMask_module[`${position}-scroll-mask-content`];
|
|
80
|
-
let t12;
|
|
81
|
-
if ($[20] !== contentClassName || $[21] !== t11) {
|
|
82
|
-
t12 = clsx(ScrollMask_module["scroll-mask-content"], t11, contentClassName);
|
|
83
|
-
$[20] = contentClassName;
|
|
84
|
-
$[21] = t11;
|
|
85
|
-
$[22] = t12;
|
|
86
|
-
} else t12 = $[22];
|
|
87
|
-
let t13;
|
|
88
|
-
if ($[23] !== contentStyle || $[24] !== t12) {
|
|
89
|
-
t13 = /*#__PURE__*/ jsx("div", {
|
|
19
|
+
},
|
|
20
|
+
...rest,
|
|
21
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
90
22
|
ref: ref,
|
|
91
|
-
className:
|
|
23
|
+
className: clsx(ScrollMask_module["scroll-mask-content"], ScrollMask_module[`${position}-scroll-mask-content`], contentClassName),
|
|
92
24
|
style: contentStyle
|
|
93
|
-
})
|
|
94
|
-
|
|
95
|
-
$[24] = t12;
|
|
96
|
-
$[25] = t13;
|
|
97
|
-
} else t13 = $[25];
|
|
98
|
-
let t14;
|
|
99
|
-
if ($[26] !== rest || $[27] !== t10 || $[28] !== t13 || $[29] !== t7) {
|
|
100
|
-
t14 = /*#__PURE__*/ jsx("div", {
|
|
101
|
-
className: t7,
|
|
102
|
-
style: t10,
|
|
103
|
-
...rest,
|
|
104
|
-
children: t13
|
|
105
|
-
});
|
|
106
|
-
$[26] = rest;
|
|
107
|
-
$[27] = t10;
|
|
108
|
-
$[28] = t13;
|
|
109
|
-
$[29] = t7;
|
|
110
|
-
$[30] = t14;
|
|
111
|
-
} else t14 = $[30];
|
|
112
|
-
return t14;
|
|
25
|
+
})
|
|
26
|
+
});
|
|
113
27
|
};
|
|
114
28
|
export { ScrollMask };
|
|
@@ -28,72 +28,27 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
28
28
|
SectionRing: ()=>SectionRing
|
|
29
29
|
});
|
|
30
30
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
31
|
-
const compiler_runtime_namespaceObject = require("react/compiler-runtime");
|
|
32
31
|
const external_deepsea_tools_namespaceObject = require("deepsea-tools");
|
|
33
32
|
const external_react_namespaceObject = require("react");
|
|
34
33
|
const SectionRing = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
|
|
35
|
-
const
|
|
36
|
-
let a;
|
|
37
|
-
let c;
|
|
38
|
-
let i;
|
|
39
|
-
let o;
|
|
40
|
-
let rest;
|
|
41
|
-
let style;
|
|
42
|
-
if ($[0] !== props) {
|
|
43
|
-
({ outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props);
|
|
44
|
-
$[0] = props;
|
|
45
|
-
$[1] = a;
|
|
46
|
-
$[2] = c;
|
|
47
|
-
$[3] = i;
|
|
48
|
-
$[4] = o;
|
|
49
|
-
$[5] = rest;
|
|
50
|
-
$[6] = style;
|
|
51
|
-
} else {
|
|
52
|
-
a = $[1];
|
|
53
|
-
c = $[2];
|
|
54
|
-
i = $[3];
|
|
55
|
-
o = $[4];
|
|
56
|
-
rest = $[5];
|
|
57
|
-
style = $[6];
|
|
58
|
-
}
|
|
34
|
+
const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props;
|
|
59
35
|
const s = 2 * Math.PI / c - a;
|
|
60
|
-
|
|
61
|
-
const options = void 0 === t0 ? {} : t0;
|
|
36
|
+
function arc(radius, startAngle, endAngle, options = {}) {
|
|
62
37
|
return (0, external_deepsea_tools_namespaceObject.drawArc)(o, o, radius, startAngle, endAngle, options);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
width: t1,
|
|
74
|
-
height: t2,
|
|
75
|
-
clipPath: t3,
|
|
38
|
+
}
|
|
39
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
40
|
+
ref: ref,
|
|
41
|
+
style: {
|
|
42
|
+
width: 2 * o,
|
|
43
|
+
height: 2 * o,
|
|
44
|
+
clipPath: `path("${Array(c).fill(0).map((it, idx)=>`${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), {
|
|
45
|
+
line: true,
|
|
46
|
+
anticlockwise: true
|
|
47
|
+
})}`).join(" ")} Z")`,
|
|
76
48
|
...style
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
$[9] = t2;
|
|
81
|
-
$[10] = t3;
|
|
82
|
-
$[11] = t4;
|
|
83
|
-
} else t4 = $[11];
|
|
84
|
-
let t5;
|
|
85
|
-
if ($[12] !== ref || $[13] !== rest || $[14] !== t4) {
|
|
86
|
-
t5 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
87
|
-
ref: ref,
|
|
88
|
-
style: t4,
|
|
89
|
-
...rest
|
|
90
|
-
});
|
|
91
|
-
$[12] = ref;
|
|
92
|
-
$[13] = rest;
|
|
93
|
-
$[14] = t4;
|
|
94
|
-
$[15] = t5;
|
|
95
|
-
} else t5 = $[15];
|
|
96
|
-
return t5;
|
|
49
|
+
},
|
|
50
|
+
...rest
|
|
51
|
+
});
|
|
97
52
|
});
|
|
98
53
|
exports.SectionRing = __webpack_exports__.SectionRing;
|
|
99
54
|
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
|
|
@@ -1,70 +1,25 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { c as compiler_runtime_c } from "react/compiler-runtime";
|
|
4
3
|
import { drawArc } from "deepsea-tools";
|
|
5
4
|
import { forwardRef } from "react";
|
|
6
5
|
const SectionRing = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
7
|
-
const
|
|
8
|
-
let a;
|
|
9
|
-
let c;
|
|
10
|
-
let i;
|
|
11
|
-
let o;
|
|
12
|
-
let rest;
|
|
13
|
-
let style;
|
|
14
|
-
if ($[0] !== props) {
|
|
15
|
-
({ outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props);
|
|
16
|
-
$[0] = props;
|
|
17
|
-
$[1] = a;
|
|
18
|
-
$[2] = c;
|
|
19
|
-
$[3] = i;
|
|
20
|
-
$[4] = o;
|
|
21
|
-
$[5] = rest;
|
|
22
|
-
$[6] = style;
|
|
23
|
-
} else {
|
|
24
|
-
a = $[1];
|
|
25
|
-
c = $[2];
|
|
26
|
-
i = $[3];
|
|
27
|
-
o = $[4];
|
|
28
|
-
rest = $[5];
|
|
29
|
-
style = $[6];
|
|
30
|
-
}
|
|
6
|
+
const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props;
|
|
31
7
|
const s = 2 * Math.PI / c - a;
|
|
32
|
-
|
|
33
|
-
const options = void 0 === t0 ? {} : t0;
|
|
8
|
+
function arc(radius, startAngle, endAngle, options = {}) {
|
|
34
9
|
return drawArc(o, o, radius, startAngle, endAngle, options);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
width: t1,
|
|
46
|
-
height: t2,
|
|
47
|
-
clipPath: t3,
|
|
10
|
+
}
|
|
11
|
+
return /*#__PURE__*/ jsx("div", {
|
|
12
|
+
ref: ref,
|
|
13
|
+
style: {
|
|
14
|
+
width: 2 * o,
|
|
15
|
+
height: 2 * o,
|
|
16
|
+
clipPath: `path("${Array(c).fill(0).map((it, idx)=>`${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), {
|
|
17
|
+
line: true,
|
|
18
|
+
anticlockwise: true
|
|
19
|
+
})}`).join(" ")} Z")`,
|
|
48
20
|
...style
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
$[9] = t2;
|
|
53
|
-
$[10] = t3;
|
|
54
|
-
$[11] = t4;
|
|
55
|
-
} else t4 = $[11];
|
|
56
|
-
let t5;
|
|
57
|
-
if ($[12] !== ref || $[13] !== rest || $[14] !== t4) {
|
|
58
|
-
t5 = /*#__PURE__*/ jsx("div", {
|
|
59
|
-
ref: ref,
|
|
60
|
-
style: t4,
|
|
61
|
-
...rest
|
|
62
|
-
});
|
|
63
|
-
$[12] = ref;
|
|
64
|
-
$[13] = rest;
|
|
65
|
-
$[14] = t4;
|
|
66
|
-
$[15] = t5;
|
|
67
|
-
} else t5 = $[15];
|
|
68
|
-
return t5;
|
|
21
|
+
},
|
|
22
|
+
...rest
|
|
23
|
+
});
|
|
69
24
|
});
|
|
70
25
|
export { SectionRing };
|
|
@@ -28,138 +28,48 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
28
28
|
TransitionBox: ()=>TransitionBox
|
|
29
29
|
});
|
|
30
30
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
31
|
-
const compiler_runtime_namespaceObject = require("react/compiler-runtime");
|
|
32
31
|
const external_react_namespaceObject = require("react");
|
|
33
32
|
const external_soda_hooks_namespaceObject = require("soda-hooks");
|
|
34
33
|
const TransitionBox = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
|
|
35
|
-
const
|
|
36
|
-
let children;
|
|
37
|
-
let containerClassName;
|
|
38
|
-
let containerStyle;
|
|
39
|
-
let rest;
|
|
40
|
-
let style;
|
|
41
|
-
let t0;
|
|
42
|
-
let t1;
|
|
43
|
-
let t2;
|
|
44
|
-
if ($[0] !== props) {
|
|
45
|
-
({ style, containerClassName, containerStyle, children, vertical: t0, horizontal: t1, time: t2, ...rest } = props);
|
|
46
|
-
$[0] = props;
|
|
47
|
-
$[1] = children;
|
|
48
|
-
$[2] = containerClassName;
|
|
49
|
-
$[3] = containerStyle;
|
|
50
|
-
$[4] = rest;
|
|
51
|
-
$[5] = style;
|
|
52
|
-
$[6] = t0;
|
|
53
|
-
$[7] = t1;
|
|
54
|
-
$[8] = t2;
|
|
55
|
-
} else {
|
|
56
|
-
children = $[1];
|
|
57
|
-
containerClassName = $[2];
|
|
58
|
-
containerStyle = $[3];
|
|
59
|
-
rest = $[4];
|
|
60
|
-
style = $[5];
|
|
61
|
-
t0 = $[6];
|
|
62
|
-
t1 = $[7];
|
|
63
|
-
t2 = $[8];
|
|
64
|
-
}
|
|
65
|
-
const vertical = void 0 === t0 ? true : t0;
|
|
66
|
-
const horizontal = void 0 === t1 ? true : t1;
|
|
67
|
-
const time = void 0 === t2 ? 3000 : t2;
|
|
34
|
+
const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props;
|
|
68
35
|
const container = (0, external_react_namespaceObject.useRef)(null);
|
|
69
36
|
const size = (0, external_soda_hooks_namespaceObject.useSize)(container);
|
|
70
37
|
const width = (null == size ? void 0 : size.width) ?? 0;
|
|
71
38
|
const height = (null == size ? void 0 : size.height) ?? 0;
|
|
72
39
|
const [count, setCount] = (0, external_react_namespaceObject.useState)(0);
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
if ($[10] !== height || $[11] !== width) {
|
|
82
|
-
t4 = [
|
|
83
|
-
width,
|
|
84
|
-
height
|
|
85
|
-
];
|
|
86
|
-
$[10] = height;
|
|
87
|
-
$[11] = width;
|
|
88
|
-
$[12] = t4;
|
|
89
|
-
} else t4 = $[12];
|
|
90
|
-
(0, external_react_namespaceObject.useEffect)(t3, t4);
|
|
91
|
-
let t5;
|
|
92
|
-
if ($[13] !== count || $[14] !== horizontal || $[15] !== vertical) {
|
|
93
|
-
t5 = 3 === count ? [
|
|
40
|
+
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
41
|
+
setCount((count)=>Math.min(count + 1, 3));
|
|
42
|
+
}, [
|
|
43
|
+
width,
|
|
44
|
+
height
|
|
45
|
+
]);
|
|
46
|
+
const outerStyle = {
|
|
47
|
+
transitionProperty: 3 === count ? [
|
|
94
48
|
horizontal && "width",
|
|
95
49
|
vertical && "height"
|
|
96
|
-
].filter(Boolean).join(", ") : void 0
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
height,
|
|
110
|
-
overflow: "hidden",
|
|
111
|
-
position: "relative",
|
|
112
|
-
...style
|
|
113
|
-
};
|
|
114
|
-
$[17] = height;
|
|
115
|
-
$[18] = style;
|
|
116
|
-
$[19] = t5;
|
|
117
|
-
$[20] = t6;
|
|
118
|
-
$[21] = width;
|
|
119
|
-
$[22] = t7;
|
|
120
|
-
} else t7 = $[22];
|
|
121
|
-
const outerStyle = t7;
|
|
122
|
-
let t8;
|
|
123
|
-
if ($[23] !== containerStyle) {
|
|
124
|
-
t8 = {
|
|
125
|
-
position: "absolute",
|
|
126
|
-
...containerStyle
|
|
127
|
-
};
|
|
128
|
-
$[23] = containerStyle;
|
|
129
|
-
$[24] = t8;
|
|
130
|
-
} else t8 = $[24];
|
|
131
|
-
let t9;
|
|
132
|
-
if ($[25] !== children || $[26] !== containerClassName || $[27] !== t8) {
|
|
133
|
-
t9 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
50
|
+
].filter(Boolean).join(", ") : void 0,
|
|
51
|
+
transitionDuration: 3 === count ? `${time}ms` : void 0,
|
|
52
|
+
width,
|
|
53
|
+
height,
|
|
54
|
+
overflow: "hidden",
|
|
55
|
+
position: "relative",
|
|
56
|
+
...style
|
|
57
|
+
};
|
|
58
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
59
|
+
ref: ref,
|
|
60
|
+
style: outerStyle,
|
|
61
|
+
...rest,
|
|
62
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
134
63
|
className: containerClassName,
|
|
135
|
-
style:
|
|
64
|
+
style: {
|
|
65
|
+
position: "absolute",
|
|
66
|
+
...containerStyle
|
|
67
|
+
},
|
|
136
68
|
ref: container,
|
|
137
69
|
children: children
|
|
138
|
-
})
|
|
139
|
-
|
|
140
|
-
$[26] = containerClassName;
|
|
141
|
-
$[27] = t8;
|
|
142
|
-
$[28] = t9;
|
|
143
|
-
} else t9 = $[28];
|
|
144
|
-
let t10;
|
|
145
|
-
if ($[29] !== outerStyle || $[30] !== ref || $[31] !== rest || $[32] !== t9) {
|
|
146
|
-
t10 = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
147
|
-
ref: ref,
|
|
148
|
-
style: outerStyle,
|
|
149
|
-
...rest,
|
|
150
|
-
children: t9
|
|
151
|
-
});
|
|
152
|
-
$[29] = outerStyle;
|
|
153
|
-
$[30] = ref;
|
|
154
|
-
$[31] = rest;
|
|
155
|
-
$[32] = t9;
|
|
156
|
-
$[33] = t10;
|
|
157
|
-
} else t10 = $[33];
|
|
158
|
-
return t10;
|
|
70
|
+
})
|
|
71
|
+
});
|
|
159
72
|
});
|
|
160
|
-
function _temp(count_0) {
|
|
161
|
-
return Math.min(count_0 + 1, 3);
|
|
162
|
-
}
|
|
163
73
|
exports.TransitionBox = __webpack_exports__.TransitionBox;
|
|
164
74
|
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
|
|
165
75
|
"TransitionBox"
|
|
@@ -1,135 +1,45 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { c } from "react/compiler-runtime";
|
|
4
3
|
import { forwardRef, useEffect, useRef, useState } from "react";
|
|
5
4
|
import { useSize } from "soda-hooks";
|
|
6
5
|
const TransitionBox = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
7
|
-
const
|
|
8
|
-
let children;
|
|
9
|
-
let containerClassName;
|
|
10
|
-
let containerStyle;
|
|
11
|
-
let rest;
|
|
12
|
-
let style;
|
|
13
|
-
let t0;
|
|
14
|
-
let t1;
|
|
15
|
-
let t2;
|
|
16
|
-
if ($[0] !== props) {
|
|
17
|
-
({ style, containerClassName, containerStyle, children, vertical: t0, horizontal: t1, time: t2, ...rest } = props);
|
|
18
|
-
$[0] = props;
|
|
19
|
-
$[1] = children;
|
|
20
|
-
$[2] = containerClassName;
|
|
21
|
-
$[3] = containerStyle;
|
|
22
|
-
$[4] = rest;
|
|
23
|
-
$[5] = style;
|
|
24
|
-
$[6] = t0;
|
|
25
|
-
$[7] = t1;
|
|
26
|
-
$[8] = t2;
|
|
27
|
-
} else {
|
|
28
|
-
children = $[1];
|
|
29
|
-
containerClassName = $[2];
|
|
30
|
-
containerStyle = $[3];
|
|
31
|
-
rest = $[4];
|
|
32
|
-
style = $[5];
|
|
33
|
-
t0 = $[6];
|
|
34
|
-
t1 = $[7];
|
|
35
|
-
t2 = $[8];
|
|
36
|
-
}
|
|
37
|
-
const vertical = void 0 === t0 ? true : t0;
|
|
38
|
-
const horizontal = void 0 === t1 ? true : t1;
|
|
39
|
-
const time = void 0 === t2 ? 3000 : t2;
|
|
6
|
+
const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props;
|
|
40
7
|
const container = useRef(null);
|
|
41
8
|
const size = useSize(container);
|
|
42
9
|
const width = (null == size ? void 0 : size.width) ?? 0;
|
|
43
10
|
const height = (null == size ? void 0 : size.height) ?? 0;
|
|
44
11
|
const [count, setCount] = useState(0);
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
if ($[10] !== height || $[11] !== width) {
|
|
54
|
-
t4 = [
|
|
55
|
-
width,
|
|
56
|
-
height
|
|
57
|
-
];
|
|
58
|
-
$[10] = height;
|
|
59
|
-
$[11] = width;
|
|
60
|
-
$[12] = t4;
|
|
61
|
-
} else t4 = $[12];
|
|
62
|
-
useEffect(t3, t4);
|
|
63
|
-
let t5;
|
|
64
|
-
if ($[13] !== count || $[14] !== horizontal || $[15] !== vertical) {
|
|
65
|
-
t5 = 3 === count ? [
|
|
12
|
+
useEffect(()=>{
|
|
13
|
+
setCount((count)=>Math.min(count + 1, 3));
|
|
14
|
+
}, [
|
|
15
|
+
width,
|
|
16
|
+
height
|
|
17
|
+
]);
|
|
18
|
+
const outerStyle = {
|
|
19
|
+
transitionProperty: 3 === count ? [
|
|
66
20
|
horizontal && "width",
|
|
67
21
|
vertical && "height"
|
|
68
|
-
].filter(Boolean).join(", ") : void 0
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
height,
|
|
82
|
-
overflow: "hidden",
|
|
83
|
-
position: "relative",
|
|
84
|
-
...style
|
|
85
|
-
};
|
|
86
|
-
$[17] = height;
|
|
87
|
-
$[18] = style;
|
|
88
|
-
$[19] = t5;
|
|
89
|
-
$[20] = t6;
|
|
90
|
-
$[21] = width;
|
|
91
|
-
$[22] = t7;
|
|
92
|
-
} else t7 = $[22];
|
|
93
|
-
const outerStyle = t7;
|
|
94
|
-
let t8;
|
|
95
|
-
if ($[23] !== containerStyle) {
|
|
96
|
-
t8 = {
|
|
97
|
-
position: "absolute",
|
|
98
|
-
...containerStyle
|
|
99
|
-
};
|
|
100
|
-
$[23] = containerStyle;
|
|
101
|
-
$[24] = t8;
|
|
102
|
-
} else t8 = $[24];
|
|
103
|
-
let t9;
|
|
104
|
-
if ($[25] !== children || $[26] !== containerClassName || $[27] !== t8) {
|
|
105
|
-
t9 = /*#__PURE__*/ jsx("div", {
|
|
22
|
+
].filter(Boolean).join(", ") : void 0,
|
|
23
|
+
transitionDuration: 3 === count ? `${time}ms` : void 0,
|
|
24
|
+
width,
|
|
25
|
+
height,
|
|
26
|
+
overflow: "hidden",
|
|
27
|
+
position: "relative",
|
|
28
|
+
...style
|
|
29
|
+
};
|
|
30
|
+
return /*#__PURE__*/ jsx("div", {
|
|
31
|
+
ref: ref,
|
|
32
|
+
style: outerStyle,
|
|
33
|
+
...rest,
|
|
34
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
106
35
|
className: containerClassName,
|
|
107
|
-
style:
|
|
36
|
+
style: {
|
|
37
|
+
position: "absolute",
|
|
38
|
+
...containerStyle
|
|
39
|
+
},
|
|
108
40
|
ref: container,
|
|
109
41
|
children: children
|
|
110
|
-
})
|
|
111
|
-
|
|
112
|
-
$[26] = containerClassName;
|
|
113
|
-
$[27] = t8;
|
|
114
|
-
$[28] = t9;
|
|
115
|
-
} else t9 = $[28];
|
|
116
|
-
let t10;
|
|
117
|
-
if ($[29] !== outerStyle || $[30] !== ref || $[31] !== rest || $[32] !== t9) {
|
|
118
|
-
t10 = /*#__PURE__*/ jsx("div", {
|
|
119
|
-
ref: ref,
|
|
120
|
-
style: outerStyle,
|
|
121
|
-
...rest,
|
|
122
|
-
children: t9
|
|
123
|
-
});
|
|
124
|
-
$[29] = outerStyle;
|
|
125
|
-
$[30] = ref;
|
|
126
|
-
$[31] = rest;
|
|
127
|
-
$[32] = t9;
|
|
128
|
-
$[33] = t10;
|
|
129
|
-
} else t10 = $[33];
|
|
130
|
-
return t10;
|
|
42
|
+
})
|
|
43
|
+
});
|
|
131
44
|
});
|
|
132
|
-
function _temp(count_0) {
|
|
133
|
-
return Math.min(count_0 + 1, 3);
|
|
134
|
-
}
|
|
135
45
|
export { TransitionBox };
|
|
@@ -51,19 +51,19 @@ const TransitionNum = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
|
|
|
51
51
|
get: ()=>cache.current.show
|
|
52
52
|
}), []);
|
|
53
53
|
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
54
|
-
const { num
|
|
55
|
-
ele.current.innerText = (
|
|
56
|
-
if (
|
|
54
|
+
const { num, period, show, numToStr } = cache.current;
|
|
55
|
+
ele.current.innerText = (numToStr || String)(show);
|
|
56
|
+
if (num === show) return;
|
|
57
57
|
const div = ele.current;
|
|
58
|
-
const speed = (
|
|
58
|
+
const speed = (num - show) / period;
|
|
59
59
|
const cancel = (0, external_deepsea_tools_namespaceObject.setFrameInterval)(()=>{
|
|
60
|
-
const { num
|
|
60
|
+
const { num, numToStr } = cache.current;
|
|
61
61
|
cache.current.show += speed;
|
|
62
|
-
if (speed > 0 && cache.current.show >
|
|
62
|
+
if (speed > 0 && cache.current.show > num || speed < 0 && cache.current.show < num) {
|
|
63
63
|
cancel();
|
|
64
|
-
cache.current.show =
|
|
64
|
+
cache.current.show = num;
|
|
65
65
|
}
|
|
66
|
-
div.innerText = (
|
|
66
|
+
div.innerText = (numToStr || String)(speed > 0 ? Math.floor(cache.current.show) : Math.ceil(cache.current.show));
|
|
67
67
|
}, 1);
|
|
68
68
|
return cancel;
|
|
69
69
|
}, [
|