deepsea-components 5.17.11 → 5.17.13
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/LoopSwiper.cjs +10 -7
- package/dist/components/LoopSwiper.d.ts +1 -0
- package/dist/components/LoopSwiper.js +10 -7
- package/dist/components/Scroll.cjs +24 -14
- package/dist/components/Scroll.js +24 -14
- package/package.json +5 -5
- package/src/components/LoopSwiper.tsx +13 -9
- package/src/components/Scroll.tsx +25 -25
|
@@ -31,7 +31,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
|
31
31
|
const external_react_namespaceObject = require("react");
|
|
32
32
|
const css_namespaceObject = require("@emotion/css");
|
|
33
33
|
const external_deepsea_tools_namespaceObject = require("deepsea-tools");
|
|
34
|
-
const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, container: containerClassName, mirror: mirrorClassName } = {}, children, direction, period, reverse, pauseOnHover = true, gap = 0, ...rest })=>{
|
|
34
|
+
const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, container: containerClassName, mirror: mirrorClassName } = {}, children, direction, period, reverse, pauseOnHover = true, paused, gap = 0, ...rest })=>{
|
|
35
35
|
const wrapper = (0, external_react_namespaceObject.useRef)(null);
|
|
36
36
|
const container = (0, external_react_namespaceObject.useRef)(null);
|
|
37
37
|
const [swiper, setSwiper] = (0, external_react_namespaceObject.useState)(false);
|
|
@@ -65,6 +65,14 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
|
|
|
65
65
|
observer.observe(wrapperEle);
|
|
66
66
|
observer.observe(containerEle);
|
|
67
67
|
}, []);
|
|
68
|
+
const style = (0, css_namespaceObject.css)`
|
|
69
|
+
display: flex;
|
|
70
|
+
flex-direction: ${flexDirection};
|
|
71
|
+
gap: ${gap}px;
|
|
72
|
+
${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
|
|
73
|
+
${pauseOnHover ? "&:hover > * { animation-play-state: paused; }" : ""}
|
|
74
|
+
${paused ? "& > * { animation-play-state: paused; }" : ""}
|
|
75
|
+
`;
|
|
68
76
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
69
77
|
ref: wrapper,
|
|
70
78
|
className: (0, external_deepsea_tools_namespaceObject.clsx)((0, css_namespaceObject.css)`
|
|
@@ -100,12 +108,7 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
|
|
|
100
108
|
transform: translateY(calc(100% + ${gap}px));
|
|
101
109
|
}
|
|
102
110
|
}
|
|
103
|
-
`,
|
|
104
|
-
display: flex;
|
|
105
|
-
flex-direction: ${flexDirection};
|
|
106
|
-
gap: ${gap}px;
|
|
107
|
-
${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"} ${pauseOnHover ? "&:hover > * { animation-play-state: paused; }" : ""}
|
|
108
|
-
`, className, rootClassName),
|
|
111
|
+
`, style, rootClassName, className),
|
|
109
112
|
...rest,
|
|
110
113
|
children: [
|
|
111
114
|
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useEffect, useImperativeHandle, useRef, useState } from "react";
|
|
4
4
|
import { css } from "@emotion/css";
|
|
5
5
|
import { clsx } from "deepsea-tools";
|
|
6
|
-
const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, container: containerClassName, mirror: mirrorClassName } = {}, children, direction, period, reverse, pauseOnHover = true, gap = 0, ...rest })=>{
|
|
6
|
+
const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, container: containerClassName, mirror: mirrorClassName } = {}, children, direction, period, reverse, pauseOnHover = true, paused, gap = 0, ...rest })=>{
|
|
7
7
|
const wrapper = useRef(null);
|
|
8
8
|
const container = useRef(null);
|
|
9
9
|
const [swiper, setSwiper] = useState(false);
|
|
@@ -37,6 +37,14 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
|
|
|
37
37
|
observer.observe(wrapperEle);
|
|
38
38
|
observer.observe(containerEle);
|
|
39
39
|
}, []);
|
|
40
|
+
const style = css`
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: ${flexDirection};
|
|
43
|
+
gap: ${gap}px;
|
|
44
|
+
${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"}
|
|
45
|
+
${pauseOnHover ? "&:hover > * { animation-play-state: paused; }" : ""}
|
|
46
|
+
${paused ? "& > * { animation-play-state: paused; }" : ""}
|
|
47
|
+
`;
|
|
40
48
|
return /*#__PURE__*/ jsxs("div", {
|
|
41
49
|
ref: wrapper,
|
|
42
50
|
className: clsx(css`
|
|
@@ -72,12 +80,7 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
|
|
|
72
80
|
transform: translateY(calc(100% + ${gap}px));
|
|
73
81
|
}
|
|
74
82
|
}
|
|
75
|
-
`,
|
|
76
|
-
display: flex;
|
|
77
|
-
flex-direction: ${flexDirection};
|
|
78
|
-
gap: ${gap}px;
|
|
79
|
-
${"vertical" === direction ? "overflow-y: hidden;" : "overflow-x: hidden;"} ${pauseOnHover ? "&:hover > * { animation-play-state: paused; }" : ""}
|
|
80
|
-
`, className, rootClassName),
|
|
83
|
+
`, style, rootClassName, className),
|
|
81
84
|
...rest,
|
|
82
85
|
children: [
|
|
83
86
|
/*#__PURE__*/ jsx("div", {
|
|
@@ -112,22 +112,32 @@ var __webpack_exports__ = {};
|
|
|
112
112
|
}, [
|
|
113
113
|
onScrollbar
|
|
114
114
|
]);
|
|
115
|
+
const style2 = (0, _emotion_css__WEBPACK_IMPORTED_MODULE_2__.css)`
|
|
116
|
+
.scrollbar-track.scrollbar-track-x {
|
|
117
|
+
${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""}
|
|
118
|
+
${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.scrollbar-thumb.scrollbar-thumb-x {
|
|
122
|
+
${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""}
|
|
123
|
+
${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""}
|
|
124
|
+
${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.scrollbar-track.scrollbar-track-y {
|
|
128
|
+
${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""}
|
|
129
|
+
${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.scrollbar-thumb.scrollbar-thumb-y {
|
|
133
|
+
${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""}
|
|
134
|
+
${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""}
|
|
135
|
+
${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
|
|
136
|
+
}
|
|
137
|
+
`;
|
|
115
138
|
return /*#__PURE__*/ (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
|
|
116
139
|
ref: ele,
|
|
117
|
-
className: (0, deepsea_tools__WEBPACK_IMPORTED_MODULE_3__.clsx)(
|
|
118
|
-
.scrollbar-track.scrollbar-track-x {
|
|
119
|
-
${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
|
|
120
|
-
}
|
|
121
|
-
.scrollbar-thumb.scrollbar-thumb-x {
|
|
122
|
-
${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
|
|
123
|
-
}
|
|
124
|
-
.scrollbar-track.scrollbar-track-y {
|
|
125
|
-
${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
|
|
126
|
-
}
|
|
127
|
-
.scrollbar-thumb.scrollbar-thumb-y {
|
|
128
|
-
${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
|
|
129
|
-
}
|
|
130
|
-
`, className),
|
|
140
|
+
className: (0, deepsea_tools__WEBPACK_IMPORTED_MODULE_3__.clsx)(style2, className),
|
|
131
141
|
style: (0, _utils__WEBPACK_IMPORTED_MODULE_5__.transformCSSVariable)({
|
|
132
142
|
thumbWidth: (0, _utils__WEBPACK_IMPORTED_MODULE_5__.px)(thumbWidth),
|
|
133
143
|
thumbRadius: (0, _utils__WEBPACK_IMPORTED_MODULE_5__.px)(thumbRadius),
|
|
@@ -31,22 +31,32 @@ const Scroll = /*#__PURE__*/ forwardRef((props, ref)=>{
|
|
|
31
31
|
}, [
|
|
32
32
|
onScrollbar
|
|
33
33
|
]);
|
|
34
|
+
const style2 = css`
|
|
35
|
+
.scrollbar-track.scrollbar-track-x {
|
|
36
|
+
${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""}
|
|
37
|
+
${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.scrollbar-thumb.scrollbar-thumb-x {
|
|
41
|
+
${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""}
|
|
42
|
+
${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""}
|
|
43
|
+
${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.scrollbar-track.scrollbar-track-y {
|
|
47
|
+
${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""}
|
|
48
|
+
${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.scrollbar-thumb.scrollbar-thumb-y {
|
|
52
|
+
${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""}
|
|
53
|
+
${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""}
|
|
54
|
+
${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
|
|
55
|
+
}
|
|
56
|
+
`;
|
|
34
57
|
return /*#__PURE__*/ jsx("div", {
|
|
35
58
|
ref: ele,
|
|
36
|
-
className: clsx(
|
|
37
|
-
.scrollbar-track.scrollbar-track-x {
|
|
38
|
-
${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
|
|
39
|
-
}
|
|
40
|
-
.scrollbar-thumb.scrollbar-thumb-x {
|
|
41
|
-
${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
|
|
42
|
-
}
|
|
43
|
-
.scrollbar-track.scrollbar-track-y {
|
|
44
|
-
${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
|
|
45
|
-
}
|
|
46
|
-
.scrollbar-thumb.scrollbar-thumb-y {
|
|
47
|
-
${void 0 !== thumbWidth ? "width: var(--thumb-width);" : ""} ${void 0 !== thumbRadius ? "border-radius: var(--thumb-radius);" : ""} ${void 0 !== thumbColor ? "background-color: var(--thumb-color);" : ""}
|
|
48
|
-
}
|
|
49
|
-
`, className),
|
|
59
|
+
className: clsx(style2, className),
|
|
50
60
|
style: transformCSSVariable({
|
|
51
61
|
thumbWidth: px(thumbWidth),
|
|
52
62
|
thumbRadius: px(thumbRadius),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "deepsea-components",
|
|
3
|
-
"version": "5.17.
|
|
3
|
+
"version": "5.17.13",
|
|
4
4
|
"description": "格数科技自用组件库",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -41,15 +41,15 @@
|
|
|
41
41
|
"hls.js": "^1.6.13",
|
|
42
42
|
"smooth-scrollbar": "^8.8.4",
|
|
43
43
|
"stable-hash": "^0.0.6",
|
|
44
|
-
"
|
|
45
|
-
"
|
|
44
|
+
"deepsea-tools": "5.43.4",
|
|
45
|
+
"soda-hooks": "6.16.3"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"typescript": ">=5.8.3"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
|
-
"@types/node": "^24.10.
|
|
52
|
-
"@types/react": "
|
|
51
|
+
"@types/node": "^24.10.2",
|
|
52
|
+
"@types/react": ">=19.2.7",
|
|
53
53
|
"@types/react-dom": ">=19.2.3",
|
|
54
54
|
"react": ">=19.2.1",
|
|
55
55
|
"react-dom": ">=19.2.1"
|
|
@@ -17,6 +17,7 @@ export interface LoopSwiperProps extends ComponentProps<"div"> {
|
|
|
17
17
|
reverse?: boolean
|
|
18
18
|
period: number
|
|
19
19
|
pauseOnHover?: boolean
|
|
20
|
+
paused?: boolean
|
|
20
21
|
gap?: number
|
|
21
22
|
}
|
|
22
23
|
|
|
@@ -30,6 +31,7 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
|
|
|
30
31
|
period,
|
|
31
32
|
reverse,
|
|
32
33
|
pauseOnHover = true,
|
|
34
|
+
paused,
|
|
33
35
|
gap = 0,
|
|
34
36
|
...rest
|
|
35
37
|
}) => {
|
|
@@ -82,6 +84,15 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
|
|
|
82
84
|
observer.observe(containerEle)
|
|
83
85
|
}, [])
|
|
84
86
|
|
|
87
|
+
const style = css`
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: ${flexDirection};
|
|
90
|
+
gap: ${gap}px;
|
|
91
|
+
${direction === "vertical" ? "overflow-y: hidden;" : "overflow-x: hidden;"}
|
|
92
|
+
${pauseOnHover ? `&:hover > * { animation-play-state: paused; }` : ""}
|
|
93
|
+
${paused ? "& > * { animation-play-state: paused; }" : ""}
|
|
94
|
+
`
|
|
95
|
+
|
|
85
96
|
return (
|
|
86
97
|
<div
|
|
87
98
|
ref={wrapper}
|
|
@@ -120,16 +131,9 @@ export const LoopSwiper: FC<LoopSwiperProps> = ({
|
|
|
120
131
|
}
|
|
121
132
|
}
|
|
122
133
|
`,
|
|
123
|
-
|
|
124
|
-
display: flex;
|
|
125
|
-
flex-direction: ${flexDirection};
|
|
126
|
-
gap: ${gap}px;
|
|
127
|
-
${direction === "vertical" ? "overflow-y: hidden;" : "overflow-x: hidden;"} ${pauseOnHover
|
|
128
|
-
? `&:hover > * { animation-play-state: paused; }`
|
|
129
|
-
: ""}
|
|
130
|
-
`,
|
|
131
|
-
className,
|
|
134
|
+
style,
|
|
132
135
|
rootClassName,
|
|
136
|
+
className,
|
|
133
137
|
)}
|
|
134
138
|
{...rest}
|
|
135
139
|
>
|
|
@@ -54,34 +54,34 @@ export const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {
|
|
|
54
54
|
return () => bar.current?.removeListener(onScrollbar)
|
|
55
55
|
}, [onScrollbar])
|
|
56
56
|
|
|
57
|
+
const style2 = css`
|
|
58
|
+
.scrollbar-track.scrollbar-track-x {
|
|
59
|
+
${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
|
|
60
|
+
${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.scrollbar-thumb.scrollbar-thumb-x {
|
|
64
|
+
${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
|
|
65
|
+
${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""}
|
|
66
|
+
${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.scrollbar-track.scrollbar-track-y {
|
|
70
|
+
${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
|
|
71
|
+
${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.scrollbar-thumb.scrollbar-thumb-y {
|
|
75
|
+
${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
|
|
76
|
+
${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""}
|
|
77
|
+
${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
|
|
78
|
+
}
|
|
79
|
+
`
|
|
80
|
+
|
|
57
81
|
return (
|
|
58
82
|
<div
|
|
59
83
|
ref={ele}
|
|
60
|
-
className={clsx(
|
|
61
|
-
css`
|
|
62
|
-
.scrollbar-track.scrollbar-track-x {
|
|
63
|
-
${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""} ${trackColor !== undefined
|
|
64
|
-
? "background-color: var(--track-color);"
|
|
65
|
-
: ""}
|
|
66
|
-
}
|
|
67
|
-
.scrollbar-thumb.scrollbar-thumb-x {
|
|
68
|
-
${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""} ${thumbRadius !== undefined
|
|
69
|
-
? "border-radius: var(--thumb-radius);"
|
|
70
|
-
: ""} ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
|
|
71
|
-
}
|
|
72
|
-
.scrollbar-track.scrollbar-track-y {
|
|
73
|
-
${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""} ${trackColor !== undefined
|
|
74
|
-
? "background-color: var(--track-color);"
|
|
75
|
-
: ""}
|
|
76
|
-
}
|
|
77
|
-
.scrollbar-thumb.scrollbar-thumb-y {
|
|
78
|
-
${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""} ${thumbRadius !== undefined
|
|
79
|
-
? "border-radius: var(--thumb-radius);"
|
|
80
|
-
: ""} ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
|
|
81
|
-
}
|
|
82
|
-
`,
|
|
83
|
-
className,
|
|
84
|
-
)}
|
|
84
|
+
className={clsx(style2, className)}
|
|
85
85
|
style={transformCSSVariable(
|
|
86
86
|
{
|
|
87
87
|
thumbWidth: px(thumbWidth),
|