deepsea-components 5.15.22 → 5.15.24
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/README.md +23 -23
- package/dist/components/AutoFit.cjs +7 -7
- package/dist/components/AutoFit.js +30 -30
- package/dist/components/AutoScroll.cjs +7 -7
- package/dist/components/AutoScroll.js +30 -30
- package/dist/components/AutoSizeTextarea.cjs +4 -4
- package/dist/components/AutoSizeTextarea.js +17 -17
- package/dist/components/CircleText.js +4 -4
- package/dist/components/CopyButton.cjs +2 -2
- package/dist/components/CopyButton.js +13 -14
- package/dist/components/Echart.cjs +2 -2
- package/dist/components/Echart.js +12 -12
- package/dist/components/Flow.cjs +19 -19
- package/dist/components/Flow.js +44 -44
- package/dist/components/FormLabel.cjs +3 -3
- package/dist/components/FormLabel.js +9 -9
- package/dist/components/HlsPlayer.js +10 -10
- package/dist/components/IconFileType.cjs +4 -4
- package/dist/components/IconFileType.js +9 -9
- package/dist/components/InfiniteScroll.cjs +13 -13
- package/dist/components/InfiniteScroll.js +32 -32
- package/dist/components/InputFile.js +4 -4
- package/dist/components/InputFileButton.js +11 -11
- package/dist/components/LoopSwiper.cjs +33 -33
- package/dist/components/LoopSwiper.js +47 -47
- package/dist/components/ReadExcel.js +2 -2
- package/dist/components/ReadSheet.js +5 -5
- package/dist/components/Ring.js +4 -4
- package/dist/components/Scroll.cjs +15 -15
- package/dist/components/Scroll.js +32 -33
- package/dist/components/ScrollMask.js +13 -13
- package/dist/components/ScrollMask.module.cjs +2 -2
- package/dist/components/ScrollMask.module.js +2 -2
- package/dist/components/SectionRing.js +6 -6
- package/dist/components/Skeleton.cjs +17 -17
- package/dist/components/Skeleton.js +23 -23
- package/dist/components/Title.js +12 -12
- package/dist/components/TransitionBox.js +10 -10
- package/dist/components/TransitionNum.cjs +1 -1
- package/dist/components/TransitionNum.js +12 -12
- package/dist/components/Trapezium.cjs +4 -4
- package/dist/components/Trapezium.js +14 -14
- package/dist/components/Unify.js +10 -10
- package/dist/components/WriteExcel.js +2 -2
- package/dist/components/WriteSheet.js +4 -4
- package/dist/utils/getReactVersion.js +2 -2
- package/package.json +6 -5
- package/src/components/AutoFit.tsx +104 -104
- package/src/components/AutoScroll.tsx +150 -150
- package/src/components/AutoSizeTextarea.tsx +50 -50
- package/src/components/CircleText.tsx +81 -81
- package/src/components/CopyButton.tsx +31 -31
- package/src/components/Echart.tsx +69 -69
- package/src/components/Flow.tsx +271 -271
- package/src/components/FormLabel.tsx +41 -41
- package/src/components/HlsPlayer.tsx +34 -34
- package/src/components/IconFileType.tsx +162 -162
- package/src/components/InfiniteScroll.tsx +163 -163
- package/src/components/InputFile.tsx +93 -93
- package/src/components/InputFileButton.tsx +122 -122
- package/src/components/LoopSwiper.tsx +125 -125
- package/src/components/ReadExcel.tsx +13 -13
- package/src/components/ReadSheet.tsx +17 -17
- package/src/components/Ring.tsx +30 -30
- package/src/components/Scroll.tsx +97 -97
- package/src/components/ScrollMask.module.css +87 -87
- package/src/components/ScrollMask.tsx +68 -68
- package/src/components/SectionRing.tsx +40 -40
- package/src/components/Skeleton.tsx +45 -45
- package/src/components/Title.tsx +27 -27
- package/src/components/TransitionBox.tsx +44 -44
- package/src/components/TransitionNum.tsx +54 -54
- package/src/components/Trapezium.tsx +60 -60
- package/src/components/Unify.tsx +38 -38
- package/src/components/WriteExcel.tsx +13 -13
- package/src/components/WriteSheet.tsx +25 -25
- package/src/utils/getReactVersion.ts +7 -7
- package/src/utils/index.ts +33 -33
- package/tsconfig.json +16 -16
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
"use client"
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
const LoopSwiper = /*#__PURE__*/
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { css } from "@emotion/css";
|
|
4
|
+
import { clsx } from "deepsea-tools";
|
|
5
|
+
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
|
|
6
|
+
const LoopSwiper = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
7
7
|
const { className, style, children, direction, period, reverse, gap, ...rest } = props;
|
|
8
|
-
const wrapper =
|
|
9
|
-
const container =
|
|
10
|
-
const [swiper, setSwiper] =
|
|
11
|
-
const directionRef =
|
|
8
|
+
const wrapper = useRef(null);
|
|
9
|
+
const container = useRef(null);
|
|
10
|
+
const [swiper, setSwiper] = useState(false);
|
|
11
|
+
const directionRef = useRef(direction);
|
|
12
12
|
directionRef.current = direction;
|
|
13
13
|
const flexDirection = "vertical" === direction ? reverse ? "column-reverse" : "column" : reverse ? "row-reverse" : "row";
|
|
14
14
|
const animationName = swiper ? "vertical" === direction ? reverse ? "deepsea-reverse-vertical-loop-swipe" : "deepsea-vertical-loop-swipe" : reverse ? "deepsea-reverse-horizontal-loop-swipe" : "deepsea-horizontal-loop-swipe" : "none";
|
|
15
15
|
const animationDuration = `${period}ms`;
|
|
16
16
|
const animationTimingFunction = "linear";
|
|
17
17
|
const animationIterationCount = "infinite";
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
useImperativeHandle(ref, ()=>wrapper.current, []);
|
|
19
|
+
useEffect(()=>{
|
|
20
20
|
const wrapperEle = wrapper.current;
|
|
21
21
|
const containerEle = container.current;
|
|
22
22
|
let wrapperWidth = 0;
|
|
@@ -38,41 +38,41 @@ const LoopSwiper = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRe
|
|
|
38
38
|
observer.observe(wrapperEle);
|
|
39
39
|
observer.observe(containerEle);
|
|
40
40
|
}, []);
|
|
41
|
-
return /*#__PURE__*/
|
|
41
|
+
return /*#__PURE__*/ jsxs("div", {
|
|
42
42
|
ref: wrapper,
|
|
43
|
-
className:
|
|
44
|
-
@keyframes deepsea-horizontal-loop-swipe {
|
|
45
|
-
from {
|
|
46
|
-
transform: translateX(0);
|
|
47
|
-
}
|
|
48
|
-
to {
|
|
49
|
-
transform: translateX(-100%);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
@keyframes deepsea-reverse-horizontal-loop-swipe {
|
|
53
|
-
from {
|
|
54
|
-
transform: translateX(0);
|
|
55
|
-
}
|
|
56
|
-
to {
|
|
57
|
-
transform: translateX(100%);
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
@keyframes deepsea-vertical-loop-swipe {
|
|
61
|
-
from {
|
|
62
|
-
transform: translateY(0);
|
|
63
|
-
}
|
|
64
|
-
to {
|
|
65
|
-
transform: translateY(-100%);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
@keyframes deepsea-reverse-vertical-loop-swipe {
|
|
69
|
-
from {
|
|
70
|
-
transform: translateY(0);
|
|
71
|
-
}
|
|
72
|
-
to {
|
|
73
|
-
transform: translateY(100%);
|
|
74
|
-
}
|
|
75
|
-
}
|
|
43
|
+
className: clsx(css`
|
|
44
|
+
@keyframes deepsea-horizontal-loop-swipe {
|
|
45
|
+
from {
|
|
46
|
+
transform: translateX(0);
|
|
47
|
+
}
|
|
48
|
+
to {
|
|
49
|
+
transform: translateX(-100%);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
@keyframes deepsea-reverse-horizontal-loop-swipe {
|
|
53
|
+
from {
|
|
54
|
+
transform: translateX(0);
|
|
55
|
+
}
|
|
56
|
+
to {
|
|
57
|
+
transform: translateX(100%);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
@keyframes deepsea-vertical-loop-swipe {
|
|
61
|
+
from {
|
|
62
|
+
transform: translateY(0);
|
|
63
|
+
}
|
|
64
|
+
to {
|
|
65
|
+
transform: translateY(-100%);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
@keyframes deepsea-reverse-vertical-loop-swipe {
|
|
69
|
+
from {
|
|
70
|
+
transform: translateY(0);
|
|
71
|
+
}
|
|
72
|
+
to {
|
|
73
|
+
transform: translateY(100%);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
76
|
`, className),
|
|
77
77
|
style: {
|
|
78
78
|
display: "flex",
|
|
@@ -82,7 +82,7 @@ const LoopSwiper = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRe
|
|
|
82
82
|
},
|
|
83
83
|
...rest,
|
|
84
84
|
children: [
|
|
85
|
-
/*#__PURE__*/
|
|
85
|
+
/*#__PURE__*/ jsx("div", {
|
|
86
86
|
ref: container,
|
|
87
87
|
style: {
|
|
88
88
|
display: "flex",
|
|
@@ -95,7 +95,7 @@ const LoopSwiper = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRe
|
|
|
95
95
|
},
|
|
96
96
|
children: children
|
|
97
97
|
}),
|
|
98
|
-
/*#__PURE__*/
|
|
98
|
+
/*#__PURE__*/ jsx("div", {
|
|
99
99
|
style: {
|
|
100
100
|
display: swiper ? "flex" : "none",
|
|
101
101
|
flexDirection,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use client"
|
|
2
|
-
import
|
|
3
|
-
const ReadExcel =
|
|
2
|
+
import { ReadSheet } from "./ReadSheet.js";
|
|
3
|
+
const ReadExcel = ReadSheet;
|
|
4
4
|
export { ReadExcel };
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client"
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { readSheet } from "deepsea-tools";
|
|
4
|
+
import { InputFile } from "./InputFile.js";
|
|
5
5
|
const ReadSheet = (props)=>{
|
|
6
6
|
const { onValueChange, ...rest } = props;
|
|
7
|
-
return /*#__PURE__*/
|
|
7
|
+
return /*#__PURE__*/ jsx(InputFile, {
|
|
8
8
|
accept: ".xlsx",
|
|
9
9
|
type: "arrayBuffer",
|
|
10
|
-
onValueChange: (data)=>onValueChange?.(
|
|
10
|
+
onValueChange: (data)=>onValueChange?.(readSheet(data)),
|
|
11
11
|
...rest
|
|
12
12
|
});
|
|
13
13
|
};
|
package/dist/components/Ring.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client"
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
const Ring = /*#__PURE__*/
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
|
+
const Ring = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
5
5
|
const { outerWidth, innerWidth, style, ...rest } = props;
|
|
6
6
|
const outerRadius = outerWidth / 2;
|
|
7
7
|
const innerRadius = innerWidth / 2;
|
|
8
|
-
return /*#__PURE__*/
|
|
8
|
+
return /*#__PURE__*/ jsx("div", {
|
|
9
9
|
ref: ref,
|
|
10
10
|
style: {
|
|
11
11
|
...style,
|
|
@@ -80,9 +80,9 @@ var __webpack_exports__ = {};
|
|
|
80
80
|
var smooth_scrollbar_interfaces__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("smooth-scrollbar/interfaces");
|
|
81
81
|
var __WEBPACK_REEXPORT_OBJECT__ = {};
|
|
82
82
|
for(var __WEBPACK_IMPORT_KEY__ in smooth_scrollbar_interfaces__WEBPACK_IMPORTED_MODULE_6__)if ([
|
|
83
|
-
"Scroll",
|
|
84
83
|
"default",
|
|
85
|
-
"Scrollbar"
|
|
84
|
+
"Scrollbar",
|
|
85
|
+
"Scroll"
|
|
86
86
|
].indexOf(__WEBPACK_IMPORT_KEY__) < 0) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = (function(key) {
|
|
87
87
|
return smooth_scrollbar_interfaces__WEBPACK_IMPORTED_MODULE_6__[key];
|
|
88
88
|
}).bind(0, __WEBPACK_IMPORT_KEY__);
|
|
@@ -107,19 +107,19 @@ var __webpack_exports__ = {};
|
|
|
107
107
|
]);
|
|
108
108
|
return /*#__PURE__*/ (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
|
|
109
109
|
ref: ele,
|
|
110
|
-
className: (0, deepsea_tools__WEBPACK_IMPORTED_MODULE_2__.clsx)((0, _emotion_css__WEBPACK_IMPORTED_MODULE_1__.css)`
|
|
111
|
-
.scrollbar-track.scrollbar-track-x {
|
|
112
|
-
${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
|
|
113
|
-
}
|
|
114
|
-
.scrollbar-thumb.scrollbar-thumb-x {
|
|
115
|
-
${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
|
|
116
|
-
}
|
|
117
|
-
.scrollbar-track.scrollbar-track-y {
|
|
118
|
-
${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
|
|
119
|
-
}
|
|
120
|
-
.scrollbar-thumb.scrollbar-thumb-y {
|
|
121
|
-
${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
|
|
122
|
-
}
|
|
110
|
+
className: (0, deepsea_tools__WEBPACK_IMPORTED_MODULE_2__.clsx)((0, _emotion_css__WEBPACK_IMPORTED_MODULE_1__.css)`
|
|
111
|
+
.scrollbar-track.scrollbar-track-x {
|
|
112
|
+
${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
|
|
113
|
+
}
|
|
114
|
+
.scrollbar-thumb.scrollbar-thumb-x {
|
|
115
|
+
${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
|
|
116
|
+
}
|
|
117
|
+
.scrollbar-track.scrollbar-track-y {
|
|
118
|
+
${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
|
|
119
|
+
}
|
|
120
|
+
.scrollbar-thumb.scrollbar-thumb-y {
|
|
121
|
+
${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
|
|
122
|
+
}
|
|
123
123
|
`, className),
|
|
124
124
|
style: (0, _utils__WEBPACK_IMPORTED_MODULE_5__.transformCSSVariable)({
|
|
125
125
|
thumbWidth: (0, _utils__WEBPACK_IMPORTED_MODULE_5__.px)(thumbWidth),
|
|
@@ -1,48 +1,48 @@
|
|
|
1
1
|
"use client"
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { css } from "@emotion/css";
|
|
4
|
+
import { clsx } from "deepsea-tools";
|
|
5
|
+
import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
|
|
6
|
+
import smooth_scrollbar from "smooth-scrollbar";
|
|
7
|
+
import { px, transformCSSVariable } from "../utils/index.js";
|
|
8
8
|
export * from "smooth-scrollbar/interfaces";
|
|
9
|
-
const Scroll = /*#__PURE__*/
|
|
9
|
+
const Scroll = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
10
10
|
const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props;
|
|
11
11
|
const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {};
|
|
12
|
-
const ele =
|
|
13
|
-
const bar =
|
|
14
|
-
|
|
15
|
-
bar.current =
|
|
12
|
+
const ele = useRef(null);
|
|
13
|
+
const bar = useRef(null);
|
|
14
|
+
useLayoutEffect(()=>{
|
|
15
|
+
bar.current = smooth_scrollbar.init(ele.current, scrollbarOptions);
|
|
16
16
|
return ()=>bar.current?.destroy();
|
|
17
17
|
}, []);
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
useImperativeHandle(ref, ()=>ele.current, []);
|
|
19
|
+
useImperativeHandle(scrollbar, ()=>bar.current, []);
|
|
20
|
+
useEffect(()=>{
|
|
21
21
|
if (!onScrollbar) return;
|
|
22
22
|
bar.current?.addListener(onScrollbar);
|
|
23
23
|
return ()=>bar.current?.removeListener(onScrollbar);
|
|
24
24
|
}, [
|
|
25
25
|
onScrollbar
|
|
26
26
|
]);
|
|
27
|
-
return /*#__PURE__*/
|
|
27
|
+
return /*#__PURE__*/ jsx("div", {
|
|
28
28
|
ref: ele,
|
|
29
|
-
className:
|
|
30
|
-
.scrollbar-track.scrollbar-track-x {
|
|
31
|
-
${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
|
|
32
|
-
}
|
|
33
|
-
.scrollbar-thumb.scrollbar-thumb-x {
|
|
34
|
-
${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
|
|
35
|
-
}
|
|
36
|
-
.scrollbar-track.scrollbar-track-y {
|
|
37
|
-
${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
|
|
38
|
-
}
|
|
39
|
-
.scrollbar-thumb.scrollbar-thumb-y {
|
|
40
|
-
${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
|
|
41
|
-
}
|
|
29
|
+
className: clsx(css`
|
|
30
|
+
.scrollbar-track.scrollbar-track-x {
|
|
31
|
+
${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
|
|
32
|
+
}
|
|
33
|
+
.scrollbar-thumb.scrollbar-thumb-x {
|
|
34
|
+
${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
|
|
35
|
+
}
|
|
36
|
+
.scrollbar-track.scrollbar-track-y {
|
|
37
|
+
${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
|
|
38
|
+
}
|
|
39
|
+
.scrollbar-thumb.scrollbar-thumb-y {
|
|
40
|
+
${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
|
|
41
|
+
}
|
|
42
42
|
`, className),
|
|
43
|
-
style:
|
|
44
|
-
thumbWidth:
|
|
45
|
-
thumbRadius:
|
|
43
|
+
style: transformCSSVariable({
|
|
44
|
+
thumbWidth: px(thumbWidth),
|
|
45
|
+
thumbRadius: px(thumbRadius),
|
|
46
46
|
thumbColor,
|
|
47
47
|
trackColor
|
|
48
48
|
}, style),
|
|
@@ -50,5 +50,4 @@ const Scroll = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)((
|
|
|
50
50
|
children: children
|
|
51
51
|
});
|
|
52
52
|
});
|
|
53
|
-
|
|
54
|
-
export { Scroll, __webpack_exports__Scrollbar as Scrollbar };
|
|
53
|
+
export { Scroll, smooth_scrollbar as Scrollbar };
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { clsx, isNonNullable } from "deepsea-tools";
|
|
3
|
+
import { useRef } from "react";
|
|
4
|
+
import { useSize } from "soda-hooks";
|
|
5
|
+
import ScrollMask_module from "./ScrollMask.module.js";
|
|
6
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 })=>{
|
|
7
|
-
const ref =
|
|
8
|
-
const contentSize =
|
|
9
|
-
const radius =
|
|
10
|
-
const clipPath = showRadian &&
|
|
11
|
-
return /*#__PURE__*/
|
|
12
|
-
className:
|
|
7
|
+
const ref = useRef(null);
|
|
8
|
+
const contentSize = useSize(ref);
|
|
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;
|
|
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";
|
|
11
|
+
return /*#__PURE__*/ jsx("div", {
|
|
12
|
+
className: clsx(ScrollMask_module["scroll-mask"], ScrollMask_module[`${position}-scroll-mask`], className),
|
|
13
13
|
style: {
|
|
14
14
|
"--scroll-mask-size": `${size}px`,
|
|
15
15
|
"--scroll-mask-color-from": from,
|
|
@@ -18,9 +18,9 @@ const ScrollMask = ({ className, style, position = "top", size = 8, from = "rgba
|
|
|
18
18
|
...style
|
|
19
19
|
},
|
|
20
20
|
...rest,
|
|
21
|
-
children: /*#__PURE__*/
|
|
21
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
22
22
|
ref: ref,
|
|
23
|
-
className:
|
|
23
|
+
className: clsx(ScrollMask_module["scroll-mask-content"], ScrollMask_module[`${position}-scroll-mask-content`], contentClassName),
|
|
24
24
|
style: contentStyle
|
|
25
25
|
})
|
|
26
26
|
});
|
|
@@ -24,10 +24,10 @@ var __webpack_require__ = {};
|
|
|
24
24
|
var __webpack_exports__ = {};
|
|
25
25
|
__webpack_require__.r(__webpack_exports__);
|
|
26
26
|
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
-
default: ()=>
|
|
27
|
+
default: ()=>ScrollMask_module
|
|
28
28
|
});
|
|
29
29
|
require("./ScrollMask_module.css");
|
|
30
|
-
const
|
|
30
|
+
const ScrollMask_module = {
|
|
31
31
|
"scroll-mask": "scroll-mask-t2NITS",
|
|
32
32
|
scrollMask: "scroll-mask-t2NITS",
|
|
33
33
|
"top-scroll-mask": "top-scroll-mask-Lk0R6A",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "./ScrollMask_module.css";
|
|
2
|
-
const
|
|
2
|
+
const ScrollMask_module = {
|
|
3
3
|
"scroll-mask": "scroll-mask-t2NITS",
|
|
4
4
|
scrollMask: "scroll-mask-t2NITS",
|
|
5
5
|
"top-scroll-mask": "top-scroll-mask-Lk0R6A",
|
|
@@ -21,4 +21,4 @@ const ScrollMask_module_rslib_entry_ = {
|
|
|
21
21
|
"right-scroll-mask-content": "right-scroll-mask-content-mbgCn_",
|
|
22
22
|
rightScrollMaskContent: "right-scroll-mask-content-mbgCn_"
|
|
23
23
|
};
|
|
24
|
-
export {
|
|
24
|
+
export { ScrollMask_module as default };
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use client"
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
const SectionRing = /*#__PURE__*/
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { drawArc } from "deepsea-tools";
|
|
4
|
+
import { forwardRef } from "react";
|
|
5
|
+
const SectionRing = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
6
6
|
const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props;
|
|
7
7
|
const s = 2 * Math.PI / c - a;
|
|
8
8
|
function arc(radius, startAngle, endAngle, options = {}) {
|
|
9
|
-
return
|
|
9
|
+
return drawArc(o, o, radius, startAngle, endAngle, options);
|
|
10
10
|
}
|
|
11
|
-
return /*#__PURE__*/
|
|
11
|
+
return /*#__PURE__*/ jsx("div", {
|
|
12
12
|
ref: ref,
|
|
13
13
|
style: {
|
|
14
14
|
width: 2 * o,
|
|
@@ -35,23 +35,23 @@ const Skeleton = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((p
|
|
|
35
35
|
const { className, children, loading = null == children, ...rest } = props;
|
|
36
36
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
37
37
|
ref: ref,
|
|
38
|
-
className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
|
|
39
|
-
@keyframes shimmer {
|
|
40
|
-
0% {
|
|
41
|
-
background-position: -400px 0px;
|
|
42
|
-
}
|
|
43
|
-
100% {
|
|
44
|
-
background-position: 400px 0px;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
`, loading && (0, css_namespaceObject.css)`
|
|
48
|
-
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
|
|
49
|
-
animation-duration: 1s;
|
|
50
|
-
animation-fill-mode: forwards;
|
|
51
|
-
animation-iteration-count: infinite;
|
|
52
|
-
animation-name: shimmer;
|
|
53
|
-
animation-timing-function: linear;
|
|
54
|
-
background-size: 800px 104px;
|
|
38
|
+
className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
|
|
39
|
+
@keyframes shimmer {
|
|
40
|
+
0% {
|
|
41
|
+
background-position: -400px 0px;
|
|
42
|
+
}
|
|
43
|
+
100% {
|
|
44
|
+
background-position: 400px 0px;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
`, loading && (0, css_namespaceObject.css)`
|
|
48
|
+
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
|
|
49
|
+
animation-duration: 1s;
|
|
50
|
+
animation-fill-mode: forwards;
|
|
51
|
+
animation-iteration-count: infinite;
|
|
52
|
+
animation-name: shimmer;
|
|
53
|
+
animation-timing-function: linear;
|
|
54
|
+
background-size: 800px 104px;
|
|
55
55
|
`, className),
|
|
56
56
|
...rest,
|
|
57
57
|
children: children
|
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
"use client"
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
const Skeleton = /*#__PURE__*/
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { css } from "@emotion/css";
|
|
4
|
+
import { clsx } from "deepsea-tools";
|
|
5
|
+
import { forwardRef } from "react";
|
|
6
|
+
const Skeleton = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
7
7
|
const { className, children, loading = null == children, ...rest } = props;
|
|
8
|
-
return /*#__PURE__*/
|
|
8
|
+
return /*#__PURE__*/ jsx("div", {
|
|
9
9
|
ref: ref,
|
|
10
|
-
className:
|
|
11
|
-
@keyframes shimmer {
|
|
12
|
-
0% {
|
|
13
|
-
background-position: -400px 0px;
|
|
14
|
-
}
|
|
15
|
-
100% {
|
|
16
|
-
background-position: 400px 0px;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
`, loading &&
|
|
20
|
-
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
|
|
21
|
-
animation-duration: 1s;
|
|
22
|
-
animation-fill-mode: forwards;
|
|
23
|
-
animation-iteration-count: infinite;
|
|
24
|
-
animation-name: shimmer;
|
|
25
|
-
animation-timing-function: linear;
|
|
26
|
-
background-size: 800px 104px;
|
|
10
|
+
className: clsx(css`
|
|
11
|
+
@keyframes shimmer {
|
|
12
|
+
0% {
|
|
13
|
+
background-position: -400px 0px;
|
|
14
|
+
}
|
|
15
|
+
100% {
|
|
16
|
+
background-position: 400px 0px;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
`, loading && css`
|
|
20
|
+
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
|
|
21
|
+
animation-duration: 1s;
|
|
22
|
+
animation-fill-mode: forwards;
|
|
23
|
+
animation-iteration-count: infinite;
|
|
24
|
+
animation-name: shimmer;
|
|
25
|
+
animation-timing-function: linear;
|
|
26
|
+
background-size: 800px 104px;
|
|
27
27
|
`, className),
|
|
28
28
|
...rest,
|
|
29
29
|
children: children
|
package/dist/components/Title.js
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
"use client"
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
const [major] =
|
|
8
|
-
const Title = /*#__PURE__*/
|
|
9
|
-
if (major >= 19) return /*#__PURE__*/
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { isBrowser } from "deepsea-tools";
|
|
4
|
+
import { forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react";
|
|
5
|
+
import { createPortal } from "react-dom";
|
|
6
|
+
import { getReactVersion } from "../utils/getReactVersion.js";
|
|
7
|
+
const [major] = getReactVersion();
|
|
8
|
+
const Title = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
9
|
+
if (major >= 19) return /*#__PURE__*/ jsx("title", {
|
|
10
10
|
ref: ref,
|
|
11
11
|
...props
|
|
12
12
|
});
|
|
13
|
-
const ele =
|
|
14
|
-
|
|
13
|
+
const ele = useRef(null);
|
|
14
|
+
useImperativeHandle(ref, ()=>ele.current, [
|
|
15
15
|
ele.current
|
|
16
16
|
]);
|
|
17
|
-
|
|
17
|
+
useLayoutEffect(()=>{
|
|
18
18
|
const title = document.head.querySelector("title");
|
|
19
19
|
if (title === ele.current) return;
|
|
20
20
|
document.head.insertBefore(ele.current, title);
|
|
21
21
|
}, []);
|
|
22
|
-
return
|
|
22
|
+
return isBrowser && /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("title", {
|
|
23
23
|
ref: ele,
|
|
24
24
|
...props
|
|
25
25
|
}), document.head);
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use client"
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
const TransitionBox = /*#__PURE__*/
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef, useEffect, useRef, useState } from "react";
|
|
4
|
+
import { useSize } from "soda-hooks";
|
|
5
|
+
const TransitionBox = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
6
6
|
const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props;
|
|
7
|
-
const container =
|
|
8
|
-
const size =
|
|
7
|
+
const container = useRef(null);
|
|
8
|
+
const size = useSize(container);
|
|
9
9
|
const width = size?.width ?? 0;
|
|
10
10
|
const height = size?.height ?? 0;
|
|
11
|
-
const [count, setCount] =
|
|
12
|
-
|
|
11
|
+
const [count, setCount] = useState(0);
|
|
12
|
+
useEffect(()=>{
|
|
13
13
|
setCount((count)=>Math.min(count + 1, 3));
|
|
14
14
|
}, [
|
|
15
15
|
width,
|
|
@@ -27,11 +27,11 @@ const TransitionBox = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwar
|
|
|
27
27
|
position: "relative",
|
|
28
28
|
...style
|
|
29
29
|
};
|
|
30
|
-
return /*#__PURE__*/
|
|
30
|
+
return /*#__PURE__*/ jsx("div", {
|
|
31
31
|
ref: ref,
|
|
32
32
|
style: outerStyle,
|
|
33
33
|
...rest,
|
|
34
|
-
children: /*#__PURE__*/
|
|
34
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
35
35
|
className: containerClassName,
|
|
36
36
|
style: {
|
|
37
37
|
position: "absolute",
|
|
@@ -32,7 +32,7 @@ const external_deepsea_tools_namespaceObject = require("deepsea-tools");
|
|
|
32
32
|
const external_react_namespaceObject = require("react");
|
|
33
33
|
const TransitionNum = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
|
|
34
34
|
const { children: num, period, numToStr, ins, ...rest } = props;
|
|
35
|
-
if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) throw new RangeError("
|
|
35
|
+
if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) throw new RangeError("\u76EE\u6807\u6570\u5B57\u5FC5\u987B\u662F\u6574\u6570\uFF0C\u5468\u671F\u5FC5\u987B\u662F\u6B63\u6574\u6570");
|
|
36
36
|
const ele = (0, external_react_namespaceObject.useRef)(null);
|
|
37
37
|
const cache = (0, external_react_namespaceObject.useRef)({
|
|
38
38
|
num,
|