deepsea-components 2.8.2 → 2.8.5
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/cjs/components/AutoScroll.d.ts +24 -7
- package/dist/cjs/components/AutoScroll.js +8 -6
- package/dist/cjs/components/AutoScroll.js.map +2 -2
- package/dist/cjs/components/Scroll.d.ts +7 -1
- package/dist/cjs/components/Scroll.js +25 -16
- package/dist/cjs/components/Scroll.js.map +2 -2
- package/dist/esm/components/AutoScroll.d.ts +24 -7
- package/dist/esm/components/AutoScroll.js +10 -7
- package/dist/esm/components/AutoScroll.js.map +1 -1
- package/dist/esm/components/Scroll.d.ts +7 -1
- package/dist/esm/components/Scroll.js +27 -15
- package/dist/esm/components/Scroll.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AutoScroll.tsx +33 -13
- package/src/components/Scroll.tsx +32 -18
|
@@ -1,21 +1,38 @@
|
|
|
1
1
|
import { CSSProperties } from "react";
|
|
2
2
|
import { ScrollProps } from "./Scroll";
|
|
3
3
|
export interface AutoScrollProps extends ScrollProps {
|
|
4
|
-
/**
|
|
4
|
+
/** 轮播元素的个数 */
|
|
5
5
|
count: number;
|
|
6
6
|
/** 轮播元素的高度 */
|
|
7
7
|
itemHeight: number;
|
|
8
|
-
/**
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
/**
|
|
9
|
+
* 轮播动画的时间，单位毫秒
|
|
10
|
+
* @default 1000
|
|
11
|
+
*/
|
|
12
|
+
animation?: number;
|
|
13
|
+
/**
|
|
14
|
+
* 每个元素的停留时间，单位毫秒
|
|
15
|
+
* @default 3000
|
|
16
|
+
*/
|
|
17
|
+
duration?: number;
|
|
18
|
+
/**
|
|
19
|
+
* 元素之间的间距
|
|
20
|
+
* @default 0
|
|
21
|
+
*/
|
|
13
22
|
gap?: number;
|
|
14
23
|
/** 容器类名 */
|
|
15
24
|
containerClassName?: string;
|
|
16
25
|
/** 容器样式 */
|
|
17
26
|
containerStyle?: CSSProperties;
|
|
18
|
-
/**
|
|
27
|
+
/**
|
|
28
|
+
* 在鼠标移入时是否继续播放
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
19
31
|
playOnMouseEnter?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* 是否暂停
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
36
|
+
paused?: boolean;
|
|
20
37
|
}
|
|
21
38
|
export declare const AutoScroll: import("react").ForwardRefExoticComponent<AutoScrollProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -29,17 +29,19 @@ var import_deepsea_tools = require("deepsea-tools");
|
|
|
29
29
|
var import_react = require("react");
|
|
30
30
|
var import_Scroll = require("./Scroll");
|
|
31
31
|
var AutoScroll = (0, import_react.forwardRef)((props, ref) => {
|
|
32
|
-
const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, ...rest } = props;
|
|
32
|
+
const { count, itemHeight, animation = 1e3, duration = 3e3, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, paused, ...rest } = props;
|
|
33
33
|
const bar = (0, import_react.useRef)(null);
|
|
34
34
|
const timeout = (0, import_react.useRef)(void 0);
|
|
35
35
|
const ele = (0, import_react.useRef)(null);
|
|
36
36
|
const size = (0, import_ahooks.useSize)(ele);
|
|
37
|
-
const
|
|
37
|
+
const pausedRef = (0, import_react.useRef)(false);
|
|
38
|
+
const pausedProps = (0, import_react.useRef)(paused);
|
|
39
|
+
pausedProps.current = paused;
|
|
38
40
|
(0, import_react.useImperativeHandle)(ref, () => ele.current, []);
|
|
39
41
|
(0, import_react.useImperativeHandle)(scrollbar, () => bar.current, []);
|
|
40
42
|
(0, import_react.useEffect)(() => {
|
|
41
43
|
if (playOnMouseEnter)
|
|
42
|
-
|
|
44
|
+
pausedRef.current = false;
|
|
43
45
|
}, [playOnMouseEnter]);
|
|
44
46
|
(0, import_react.useEffect)(() => {
|
|
45
47
|
if (!size || count === 0)
|
|
@@ -52,7 +54,7 @@ var AutoScroll = (0, import_react.forwardRef)((props, ref) => {
|
|
|
52
54
|
function scroll(target) {
|
|
53
55
|
clearTimeout(timeout.current);
|
|
54
56
|
timeout.current = setTimeout(() => {
|
|
55
|
-
if (
|
|
57
|
+
if (pausedRef.current || pausedProps.current)
|
|
56
58
|
return scroll(target);
|
|
57
59
|
bar.current?.scrollTo(0, target, animation);
|
|
58
60
|
}, duration);
|
|
@@ -74,13 +76,13 @@ var AutoScroll = (0, import_react.forwardRef)((props, ref) => {
|
|
|
74
76
|
function onContainerMouseEnter(e) {
|
|
75
77
|
if (playOnMouseEnter)
|
|
76
78
|
return;
|
|
77
|
-
|
|
79
|
+
pausedRef.current = true;
|
|
78
80
|
onMouseEnter?.(e);
|
|
79
81
|
}
|
|
80
82
|
function onContainerMouseLeave(e) {
|
|
81
83
|
if (playOnMouseEnter)
|
|
82
84
|
return;
|
|
83
|
-
|
|
85
|
+
pausedRef.current = false;
|
|
84
86
|
onMouseLeave?.(e);
|
|
85
87
|
}
|
|
86
88
|
return /* @__PURE__ */ React.createElement(import_Scroll.Scroll, { ref: ele, scrollbar: bar, onMouseEnter: onContainerMouseEnter, onMouseLeave: onContainerMouseLeave, ...rest }, /* @__PURE__ */ React.createElement(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/AutoScroll.tsx"],
|
|
4
|
-
"sourcesContent": ["\"use client\"\r\nimport { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx, getArray } from \"deepsea-tools\"\r\nimport { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\r\nimport { Scroll, ScrollProps } from \"./Scroll\"\r\n\r\nexport interface AutoScrollProps extends ScrollProps {\r\n /**
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAoB;AACpB,oBAAwB;AACxB,2BAA+B;AAC/B,mBAAiH;AAGjH,oBAAoC;
|
|
4
|
+
"sourcesContent": ["\"use client\"\r\nimport { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx, getArray } from \"deepsea-tools\"\r\nimport { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\r\nimport { Scroll, ScrollProps } from \"./Scroll\"\r\n\r\nexport interface AutoScrollProps extends ScrollProps {\r\n /** 轮播元素的个数 */\r\n count: number\r\n\r\n /** 轮播元素的高度 */\r\n itemHeight: number\r\n\r\n /**\r\n * 轮播动画的时间，单位毫秒\r\n * @default 1000\r\n */\r\n animation?: number\r\n\r\n /**\r\n * 每个元素的停留时间，单位毫秒\r\n * @default 3000\r\n */\r\n duration?: number\r\n\r\n /**\r\n * 元素之间的间距\r\n * @default 0\r\n */\r\n gap?: number\r\n\r\n /** 容器类名 */\r\n containerClassName?: string\r\n\r\n /** 容器样式 */\r\n containerStyle?: CSSProperties\r\n\r\n /**\r\n * 在鼠标移入时是否继续播放\r\n * @default false\r\n */\r\n playOnMouseEnter?: boolean\r\n\r\n /**\r\n * 是否暂停\r\n * @default false\r\n */\r\n paused?: boolean\r\n}\r\n\r\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\r\n const { count, itemHeight, animation = 1000, duration = 3000, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, paused, ...rest } = props\r\n const bar = useRef<Scrollbar | null>(null)\r\n const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\r\n const ele = useRef<HTMLDivElement>(null)\r\n const size = useSize(ele)\r\n const pausedRef = useRef(false)\r\n const pausedProps = useRef(paused)\r\n pausedProps.current = paused\r\n\r\n useImperativeHandle(ref, () => ele.current!, [])\r\n useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n useEffect(() => {\r\n if (playOnMouseEnter) pausedRef.current = false\r\n }, [playOnMouseEnter])\r\n\r\n useEffect(() => {\r\n if (!size || count === 0) return\r\n const { height } = size\r\n const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\r\n const scrollHeight = range[range.length - 1]\r\n if (height >= scrollHeight) return\r\n function scroll(target: number) {\r\n clearTimeout(timeout.current)\r\n timeout.current = setTimeout(() => {\r\n if (pausedRef.current || pausedProps.current) return scroll(target)\r\n bar.current?.scrollTo(0, target, animation)\r\n }, duration)\r\n }\r\n scroll(range[0])\r\n function listener(status: ScrollStatus) {\r\n const { y } = status.offset\r\n const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\r\n const target = scrollToBottom ? 0 : range.find(item => item > y)!\r\n scroll(target)\r\n }\r\n bar.current?.addListener(listener)\r\n return () => {\r\n clearTimeout(timeout.current)\r\n bar.current?.removeListener(listener)\r\n bar.current?.scrollTo(0, 0)\r\n }\r\n }, [size, count, itemHeight, gap, duration, animation])\r\n\r\n function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n if (playOnMouseEnter) return\r\n pausedRef.current = true\r\n onMouseEnter?.(e)\r\n }\r\n\r\n function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n if (playOnMouseEnter) return\r\n pausedRef.current = false\r\n onMouseLeave?.(e)\r\n }\r\n\r\n return (\r\n <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\r\n <div\r\n className={clsx(\r\n css`\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--gap, 0);\r\n & > * {\r\n flex: none;\r\n }\r\n `,\r\n containerClassName\r\n )}\r\n style={{ \"--gap\": `${gap}px`, ...containerStyle } as CSSProperties}>\r\n {children}\r\n </div>\r\n </Scroll>\r\n )\r\n})\r\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAoB;AACpB,oBAAwB;AACxB,2BAA+B;AAC/B,mBAAiH;AAGjH,oBAAoC;AA8C7B,IAAM,iBAAa,yBAA4C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,OAAO,YAAY,YAAY,KAAM,WAAW,KAAM,cAAc,cAAc,MAAM,GAAG,oBAAoB,gBAAgB,UAAU,kBAAkB,WAAW,QAAQ,GAAG,KAAK,IAAI;AAClM,QAAM,UAAM,qBAAyB,IAAI;AACzC,QAAM,cAAU,qBAAmC,MAAS;AAC5D,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,WAAO,uBAAQ,GAAG;AACxB,QAAM,gBAAY,qBAAO,KAAK;AAC9B,QAAM,kBAAc,qBAAO,MAAM;AACjC,cAAY,UAAU;AAEtB,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAC/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI;AAAkB,gBAAU,UAAU;AAAA,EAC9C,GAAG,CAAC,gBAAgB,CAAC;AAErB,8BAAU,MAAM;AACZ,QAAI,CAAC,QAAQ,UAAU;AAAG;AAC1B,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,YAAQ,+BAAS,OAAO,YAAU,aAAa,QAAQ,QAAQ,MAAM,UAAU,QAAQ,IAAI,MAAM,EAAE;AACzG,UAAM,eAAe,MAAM,MAAM,SAAS,CAAC;AAC3C,QAAI,UAAU;AAAc;AAC5B,aAAS,OAAO,QAAgB;AAC5B,mBAAa,QAAQ,OAAO;AAC5B,cAAQ,UAAU,WAAW,MAAM;AAC/B,YAAI,UAAU,WAAW,YAAY;AAAS,iBAAO,OAAO,MAAM;AAClE,YAAI,SAAS,SAAS,GAAG,QAAQ,SAAS;AAAA,MAC9C,GAAG,QAAQ;AAAA,IACf;AACA,WAAO,MAAM,CAAC,CAAC;AACf,aAAS,SAAS,QAAsB;AACpC,YAAM,EAAE,EAAE,IAAI,OAAO;AACrB,YAAM,iBAAiB,KAAK,IAAI,IAAI,SAAS,YAAY,IAAI,cAAc;AAC3E,YAAM,SAAS,iBAAiB,IAAI,MAAM,KAAK,UAAQ,OAAO,CAAC;AAC/D,aAAO,MAAM;AAAA,IACjB;AACA,QAAI,SAAS,YAAY,QAAQ;AACjC,WAAO,MAAM;AACT,mBAAa,QAAQ,OAAO;AAC5B,UAAI,SAAS,eAAe,QAAQ;AACpC,UAAI,SAAS,SAAS,GAAG,CAAC;AAAA,IAC9B;AAAA,EACJ,GAAG,CAAC,MAAM,OAAO,YAAY,KAAK,UAAU,SAAS,CAAC;AAEtD,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,cAAU,UAAU;AACpB,mBAAe,CAAC;AAAA,EACpB;AAEA,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,cAAU,UAAU;AACpB,mBAAe,CAAC;AAAA,EACpB;AAEA,SACI,oCAAC,wBAAO,KAAK,KAAK,WAAW,KAAK,cAAc,uBAAuB,cAAc,uBAAwB,GAAG,QAC5G;AAAA,IAAC;AAAA;AAAA,MACG,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQA;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,eAAe;AAAA;AAAA,IAC/C;AAAA,EACL,CACJ;AAER,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,7 +5,13 @@ export { default as Scrollbar } from "smooth-scrollbar";
|
|
|
5
5
|
export * from "smooth-scrollbar/interfaces";
|
|
6
6
|
export interface ScrollOptions extends Partial<ScrollbarOptions> {
|
|
7
7
|
/** 滑块宽度 */
|
|
8
|
-
thumbWidth?: number;
|
|
8
|
+
thumbWidth?: number | string;
|
|
9
|
+
/** 滑块圆角大小 */
|
|
10
|
+
thumbRadius?: number | string;
|
|
11
|
+
/** 滑块背景颜色 */
|
|
12
|
+
thumbColor?: string;
|
|
13
|
+
/** 滚动条背景颜色 */
|
|
14
|
+
trackColor?: string;
|
|
9
15
|
}
|
|
10
16
|
export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
|
|
11
17
|
/** 滚动的配置 */
|
|
@@ -43,7 +43,7 @@ var import_smooth_scrollbar2 = __toESM(require("smooth-scrollbar"));
|
|
|
43
43
|
__reExport(Scroll_exports, require("smooth-scrollbar/interfaces"), module.exports);
|
|
44
44
|
var Scroll = (0, import_react.forwardRef)((props, ref) => {
|
|
45
45
|
const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props;
|
|
46
|
-
const { thumbWidth, ...scrollbarOptions } = options || {};
|
|
46
|
+
const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {};
|
|
47
47
|
const ele = (0, import_react.useRef)(null);
|
|
48
48
|
const bar = (0, import_react.useRef)(null);
|
|
49
49
|
(0, import_react.useLayoutEffect)(() => {
|
|
@@ -63,27 +63,36 @@ var Scroll = (0, import_react.forwardRef)((props, ref) => {
|
|
|
63
63
|
{
|
|
64
64
|
ref: ele,
|
|
65
65
|
className: (0, import_deepsea_tools.clsx)(
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
66
|
+
import_css.css`
|
|
67
|
+
.scrollbar-track.scrollbar-track-x {
|
|
68
|
+
${thumbWidth !== void 0 ? "height: var(--thumb-width);" : ""}
|
|
69
|
+
${trackColor !== void 0 ? "background-color: var(--track-color);" : ""}
|
|
70
|
+
}
|
|
70
71
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
}
|
|
72
|
+
.scrollbar-thumb.scrollbar-thumb-x {
|
|
73
|
+
${thumbWidth !== void 0 ? "height: var(--thumb-width);" : ""}
|
|
74
|
+
${thumbRadius !== void 0 ? "border-radius: var(--thumb-radius);" : ""}
|
|
75
|
+
${thumbColor !== void 0 ? "background-color: var(--thumb-color);" : ""}
|
|
76
|
+
}
|
|
74
77
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
}
|
|
78
|
+
.scrollbar-track.scrollbar-track-y {
|
|
79
|
+
${thumbWidth !== void 0 ? "width: var(--thumb-width);" : ""}
|
|
80
|
+
${trackColor !== void 0 ? "background-color: var(--track-color);" : ""}
|
|
81
|
+
}
|
|
78
82
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
+
.scrollbar-thumb.scrollbar-thumb-y {
|
|
84
|
+
${thumbWidth !== void 0 ? "width: var(--thumb-width);" : ""}
|
|
85
|
+
${thumbRadius !== void 0 ? "border-radius: var(--thumb-radius);" : ""}
|
|
86
|
+
${thumbColor !== void 0 ? "background-color: var(--thumb-color);" : ""}
|
|
87
|
+
}
|
|
88
|
+
`,
|
|
83
89
|
className
|
|
84
90
|
),
|
|
85
91
|
style: {
|
|
86
|
-
"--thumb-width": typeof thumbWidth === "number" ? `${thumbWidth}px` :
|
|
92
|
+
"--thumb-width": typeof thumbWidth === "number" ? `${thumbWidth}px` : thumbWidth,
|
|
93
|
+
"--thumb-radius": typeof thumbRadius === "number" ? `${thumbRadius}px` : thumbRadius,
|
|
94
|
+
"--thumb-color": thumbColor,
|
|
95
|
+
"--track-color": trackColor,
|
|
87
96
|
...style
|
|
88
97
|
},
|
|
89
98
|
...rest
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Scroll.tsx"],
|
|
4
|
-
"sourcesContent": ["\"use client\"\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\r\nexport { default as Scrollbar } from \"smooth-scrollbar\"\r\nexport * from \"smooth-scrollbar/interfaces\"\r\n\r\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\r\n /** 滑块宽度 */\r\n thumbWidth?: number\r\n}\r\n\r\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\r\n /** 滚动的配置 */\r\n options?: ScrollOptions\r\n /** 滚动条实例 */\r\n scrollbar?: ForwardedRef<Scrollbar>\r\n /** 滚动条滚动事件 */\r\n onScrollbar?: ScrollListener\r\n}\r\n\r\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\r\n const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props\r\n const { thumbWidth, ...scrollbarOptions } = options || {}\r\n const ele = useRef<HTMLDivElement>(null)\r\n const bar = useRef<Scrollbar | null>(null)\r\n\r\n useLayoutEffect(() => {\r\n bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\r\n return () => bar.current?.destroy()\r\n }, [])\r\n\r\n useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n useEffect(() => {\r\n if (!onScrollbar) return\r\n bar.current?.addListener(onScrollbar)\r\n return () => bar.current?.removeListener(onScrollbar)\r\n }, [onScrollbar])\r\n\r\n return (\r\n <div\r\n ref={ele}\r\n className={clsx(\r\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAoB;AACpB,2BAAqB;AACrB,mBAAiI;AACjI,8BAAsB;AAEtB,IAAAA,2BAAqC;AACrC,2BAAc,wCAPd;
|
|
4
|
+
"sourcesContent": ["\"use client\"\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\r\nexport { default as Scrollbar } from \"smooth-scrollbar\"\r\nexport * from \"smooth-scrollbar/interfaces\"\r\n\r\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\r\n /** 滑块宽度 */\r\n thumbWidth?: number | string\r\n /** 滑块圆角大小 */\r\n thumbRadius?: number | string\r\n /** 滑块背景颜色 */\r\n thumbColor?: string\r\n /** 滚动条背景颜色 */\r\n trackColor?: string\r\n}\r\n\r\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\r\n /** 滚动的配置 */\r\n options?: ScrollOptions\r\n /** 滚动条实例 */\r\n scrollbar?: ForwardedRef<Scrollbar>\r\n /** 滚动条滚动事件 */\r\n onScrollbar?: ScrollListener\r\n}\r\n\r\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\r\n const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props\r\n const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {}\r\n const ele = useRef<HTMLDivElement>(null)\r\n const bar = useRef<Scrollbar | null>(null)\r\n\r\n useLayoutEffect(() => {\r\n bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\r\n return () => bar.current?.destroy()\r\n }, [])\r\n\r\n useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n useEffect(() => {\r\n if (!onScrollbar) return\r\n bar.current?.addListener(onScrollbar)\r\n return () => bar.current?.removeListener(onScrollbar)\r\n }, [onScrollbar])\r\n\r\n return (\r\n <div\r\n ref={ele}\r\n className={clsx(\r\n css`\r\n .scrollbar-track.scrollbar-track-x {\r\n ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\r\n ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\r\n }\r\n\r\n .scrollbar-thumb.scrollbar-thumb-x {\r\n ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\r\n ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\r\n ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\r\n }\r\n\r\n .scrollbar-track.scrollbar-track-y {\r\n ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\r\n ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\r\n }\r\n\r\n .scrollbar-thumb.scrollbar-thumb-y {\r\n ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\r\n ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\r\n ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\r\n }\r\n `,\r\n className\r\n )}\r\n style={\r\n {\r\n \"--thumb-width\": typeof thumbWidth === \"number\" ? `${thumbWidth}px` : thumbWidth,\r\n \"--thumb-radius\": typeof thumbRadius === \"number\" ? `${thumbRadius}px` : thumbRadius,\r\n \"--thumb-color\": thumbColor,\r\n \"--track-color\": trackColor,\r\n ...style\r\n } as CSSProperties\r\n }\r\n {...rest}>\r\n {children}\r\n </div>\r\n )\r\n})\r\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAoB;AACpB,2BAAqB;AACrB,mBAAiI;AACjI,8BAAsB;AAEtB,IAAAA,2BAAqC;AACrC,2BAAc,wCAPd;AA6BO,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AAC1E,QAAM,EAAE,UAAU,SAAS,WAAW,OAAO,WAAW,aAAa,GAAG,KAAK,IAAI;AACjF,QAAM,EAAE,YAAY,aAAa,YAAY,YAAY,GAAG,iBAAiB,IAAI,WAAW,CAAC;AAC7F,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,UAAM,qBAAyB,IAAI;AAEzC,oCAAgB,MAAM;AAClB,QAAI,UAAU,wBAAAC,QAAU,KAAK,IAAI,SAAU,gBAAgB;AAC3D,WAAO,MAAM,IAAI,SAAS,QAAQ;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAE/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI,CAAC;AAAa;AAClB,QAAI,SAAS,YAAY,WAAW;AACpC,WAAO,MAAM,IAAI,SAAS,eAAe,WAAW;AAAA,EACxD,GAAG,CAAC,WAAW,CAAC;AAEhB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA,0BAEU,eAAe,SAAY,gCAAgC;AAAA,0BAC3D,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,gCAAgC;AAAA,0BAC3D,gBAAgB,SAAY,wCAAwC;AAAA,0BACpE,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,+BAA+B;AAAA,0BAC1D,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,+BAA+B;AAAA,0BAC1D,gBAAgB,SAAY,wCAAwC;AAAA,0BACpE,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA,QAG/E;AAAA,MACJ;AAAA,MACA,OACI;AAAA,QACI,iBAAiB,OAAO,eAAe,WAAW,GAAG,iBAAiB;AAAA,QACtE,kBAAkB,OAAO,gBAAgB,WAAW,GAAG,kBAAkB;AAAA,QACzE,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,GAAG;AAAA,MACP;AAAA,MAEH,GAAG;AAAA;AAAA,IACH;AAAA,EACL;AAER,CAAC;",
|
|
6
6
|
"names": ["import_smooth_scrollbar", "Scrollbar"]
|
|
7
7
|
}
|
|
@@ -1,21 +1,38 @@
|
|
|
1
1
|
import { CSSProperties } from "react";
|
|
2
2
|
import { ScrollProps } from "./Scroll";
|
|
3
3
|
export interface AutoScrollProps extends ScrollProps {
|
|
4
|
-
/**
|
|
4
|
+
/** 轮播元素的个数 */
|
|
5
5
|
count: number;
|
|
6
6
|
/** 轮播元素的高度 */
|
|
7
7
|
itemHeight: number;
|
|
8
|
-
/**
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
/**
|
|
9
|
+
* 轮播动画的时间，单位毫秒
|
|
10
|
+
* @default 1000
|
|
11
|
+
*/
|
|
12
|
+
animation?: number;
|
|
13
|
+
/**
|
|
14
|
+
* 每个元素的停留时间，单位毫秒
|
|
15
|
+
* @default 3000
|
|
16
|
+
*/
|
|
17
|
+
duration?: number;
|
|
18
|
+
/**
|
|
19
|
+
* 元素之间的间距
|
|
20
|
+
* @default 0
|
|
21
|
+
*/
|
|
13
22
|
gap?: number;
|
|
14
23
|
/** 容器类名 */
|
|
15
24
|
containerClassName?: string;
|
|
16
25
|
/** 容器样式 */
|
|
17
26
|
containerStyle?: CSSProperties;
|
|
18
|
-
/**
|
|
27
|
+
/**
|
|
28
|
+
* 在鼠标移入时是否继续播放
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
19
31
|
playOnMouseEnter?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* 是否暂停
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
36
|
+
paused?: boolean;
|
|
20
37
|
}
|
|
21
38
|
export declare const AutoScroll: import("react").ForwardRefExoticComponent<AutoScrollProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -10,8 +10,8 @@ export const AutoScroll = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
10
10
|
const {
|
|
11
11
|
count,
|
|
12
12
|
itemHeight,
|
|
13
|
-
animation,
|
|
14
|
-
duration,
|
|
13
|
+
animation = 1000,
|
|
14
|
+
duration = 3000,
|
|
15
15
|
onMouseEnter,
|
|
16
16
|
onMouseLeave,
|
|
17
17
|
gap = 0,
|
|
@@ -20,17 +20,20 @@ export const AutoScroll = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
20
20
|
children,
|
|
21
21
|
playOnMouseEnter,
|
|
22
22
|
scrollbar,
|
|
23
|
+
paused,
|
|
23
24
|
...rest
|
|
24
25
|
} = props;
|
|
25
26
|
const bar = useRef(null);
|
|
26
27
|
const timeout = useRef(undefined);
|
|
27
28
|
const ele = useRef(null);
|
|
28
29
|
const size = useSize(ele);
|
|
29
|
-
const
|
|
30
|
+
const pausedRef = useRef(false);
|
|
31
|
+
const pausedProps = useRef(paused);
|
|
32
|
+
pausedProps.current = paused;
|
|
30
33
|
useImperativeHandle(ref, () => ele.current, []);
|
|
31
34
|
useImperativeHandle(scrollbar, () => bar.current, []);
|
|
32
35
|
useEffect(() => {
|
|
33
|
-
if (playOnMouseEnter)
|
|
36
|
+
if (playOnMouseEnter) pausedRef.current = false;
|
|
34
37
|
}, [playOnMouseEnter]);
|
|
35
38
|
useEffect(() => {
|
|
36
39
|
if (!size || count === 0) return;
|
|
@@ -43,7 +46,7 @@ export const AutoScroll = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
43
46
|
function scroll(target) {
|
|
44
47
|
clearTimeout(timeout.current);
|
|
45
48
|
timeout.current = setTimeout(() => {
|
|
46
|
-
if (
|
|
49
|
+
if (pausedRef.current || pausedProps.current) return scroll(target);
|
|
47
50
|
bar.current?.scrollTo(0, target, animation);
|
|
48
51
|
}, duration);
|
|
49
52
|
}
|
|
@@ -65,12 +68,12 @@ export const AutoScroll = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
65
68
|
}, [size, count, itemHeight, gap, duration, animation]);
|
|
66
69
|
function onContainerMouseEnter(e) {
|
|
67
70
|
if (playOnMouseEnter) return;
|
|
68
|
-
|
|
71
|
+
pausedRef.current = true;
|
|
69
72
|
onMouseEnter?.(e);
|
|
70
73
|
}
|
|
71
74
|
function onContainerMouseLeave(e) {
|
|
72
75
|
if (playOnMouseEnter) return;
|
|
73
|
-
|
|
76
|
+
pausedRef.current = false;
|
|
74
77
|
onMouseLeave?.(e);
|
|
75
78
|
}
|
|
76
79
|
return /*#__PURE__*/_jsx(Scroll, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["css","useSize","clsx","getArray","forwardRef","useEffect","useImperativeHandle","useRef","Scroll","jsx","_jsx","AutoScroll","props","ref","count","itemHeight","animation","duration","onMouseEnter","onMouseLeave","gap","containerClassName","containerStyle","children","playOnMouseEnter","scrollbar","rest","bar","timeout","undefined","ele","size","
|
|
1
|
+
{"version":3,"names":["css","useSize","clsx","getArray","forwardRef","useEffect","useImperativeHandle","useRef","Scroll","jsx","_jsx","AutoScroll","props","ref","count","itemHeight","animation","duration","onMouseEnter","onMouseLeave","gap","containerClassName","containerStyle","children","playOnMouseEnter","scrollbar","paused","rest","bar","timeout","undefined","ele","size","pausedRef","pausedProps","current","height","range","index","scrollHeight","length","scroll","target","clearTimeout","setTimeout","scrollTo","listener","status","y","offset","scrollToBottom","Math","abs","find","item","addListener","removeListener","onContainerMouseEnter","e","onContainerMouseLeave","className","style"],"sources":["../../../src/components/AutoScroll.tsx"],"sourcesContent":["\"use client\"\r\nimport { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx, getArray } from \"deepsea-tools\"\r\nimport { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\r\nimport { Scroll, ScrollProps } from \"./Scroll\"\r\n\r\nexport interface AutoScrollProps extends ScrollProps {\r\n /** 轮播元素的个数 */\r\n count: number\r\n\r\n /** 轮播元素的高度 */\r\n itemHeight: number\r\n\r\n /**\r\n * 轮播动画的时间，单位毫秒\r\n * @default 1000\r\n */\r\n animation?: number\r\n\r\n /**\r\n * 每个元素的停留时间，单位毫秒\r\n * @default 3000\r\n */\r\n duration?: number\r\n\r\n /**\r\n * 元素之间的间距\r\n * @default 0\r\n */\r\n gap?: number\r\n\r\n /** 容器类名 */\r\n containerClassName?: string\r\n\r\n /** 容器样式 */\r\n containerStyle?: CSSProperties\r\n\r\n /**\r\n * 在鼠标移入时是否继续播放\r\n * @default false\r\n */\r\n playOnMouseEnter?: boolean\r\n\r\n /**\r\n * 是否暂停\r\n * @default false\r\n */\r\n paused?: boolean\r\n}\r\n\r\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\r\n const { count, itemHeight, animation = 1000, duration = 3000, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, paused, ...rest } = props\r\n const bar = useRef<Scrollbar | null>(null)\r\n const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\r\n const ele = useRef<HTMLDivElement>(null)\r\n const size = useSize(ele)\r\n const pausedRef = useRef(false)\r\n const pausedProps = useRef(paused)\r\n pausedProps.current = paused\r\n\r\n useImperativeHandle(ref, () => ele.current!, [])\r\n useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n useEffect(() => {\r\n if (playOnMouseEnter) pausedRef.current = false\r\n }, [playOnMouseEnter])\r\n\r\n useEffect(() => {\r\n if (!size || count === 0) return\r\n const { height } = size\r\n const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\r\n const scrollHeight = range[range.length - 1]\r\n if (height >= scrollHeight) return\r\n function scroll(target: number) {\r\n clearTimeout(timeout.current)\r\n timeout.current = setTimeout(() => {\r\n if (pausedRef.current || pausedProps.current) return scroll(target)\r\n bar.current?.scrollTo(0, target, animation)\r\n }, duration)\r\n }\r\n scroll(range[0])\r\n function listener(status: ScrollStatus) {\r\n const { y } = status.offset\r\n const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\r\n const target = scrollToBottom ? 0 : range.find(item => item > y)!\r\n scroll(target)\r\n }\r\n bar.current?.addListener(listener)\r\n return () => {\r\n clearTimeout(timeout.current)\r\n bar.current?.removeListener(listener)\r\n bar.current?.scrollTo(0, 0)\r\n }\r\n }, [size, count, itemHeight, gap, duration, animation])\r\n\r\n function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n if (playOnMouseEnter) return\r\n pausedRef.current = true\r\n onMouseEnter?.(e)\r\n }\r\n\r\n function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n if (playOnMouseEnter) return\r\n pausedRef.current = false\r\n onMouseLeave?.(e)\r\n }\r\n\r\n return (\r\n <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\r\n <div\r\n className={clsx(\r\n css`\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--gap, 0);\r\n & > * {\r\n flex: none;\r\n }\r\n `,\r\n containerClassName\r\n )}\r\n style={{ \"--gap\": `${gap}px`, ...containerStyle } as CSSProperties}>\r\n {children}\r\n </div>\r\n </Scroll>\r\n )\r\n})\r\n"],"mappings":"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"}
|
|
@@ -5,7 +5,13 @@ export { default as Scrollbar } from "smooth-scrollbar";
|
|
|
5
5
|
export * from "smooth-scrollbar/interfaces";
|
|
6
6
|
export interface ScrollOptions extends Partial<ScrollbarOptions> {
|
|
7
7
|
/** 滑块宽度 */
|
|
8
|
-
thumbWidth?: number;
|
|
8
|
+
thumbWidth?: number | string;
|
|
9
|
+
/** 滑块圆角大小 */
|
|
10
|
+
thumbRadius?: number | string;
|
|
11
|
+
/** 滑块背景颜色 */
|
|
12
|
+
thumbColor?: string;
|
|
13
|
+
/** 滚动条背景颜色 */
|
|
14
|
+
trackColor?: string;
|
|
9
15
|
}
|
|
10
16
|
export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
|
|
11
17
|
/** 滚动的配置 */
|
|
@@ -19,6 +19,9 @@ export const Scroll = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
19
19
|
} = props;
|
|
20
20
|
const {
|
|
21
21
|
thumbWidth,
|
|
22
|
+
thumbRadius,
|
|
23
|
+
thumbColor,
|
|
24
|
+
trackColor,
|
|
22
25
|
...scrollbarOptions
|
|
23
26
|
} = options || {};
|
|
24
27
|
const ele = useRef(null);
|
|
@@ -36,25 +39,34 @@ export const Scroll = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
36
39
|
}, [onScrollbar]);
|
|
37
40
|
return /*#__PURE__*/_jsx("div", {
|
|
38
41
|
ref: ele,
|
|
39
|
-
className: clsx(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
42
|
+
className: clsx(css`
|
|
43
|
+
.scrollbar-track.scrollbar-track-x {
|
|
44
|
+
${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
|
|
45
|
+
${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
|
|
46
|
+
}
|
|
43
47
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
48
|
+
.scrollbar-thumb.scrollbar-thumb-x {
|
|
49
|
+
${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
|
|
50
|
+
${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""}
|
|
51
|
+
${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
|
|
52
|
+
}
|
|
47
53
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
54
|
+
.scrollbar-track.scrollbar-track-y {
|
|
55
|
+
${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
|
|
56
|
+
${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
|
|
57
|
+
}
|
|
51
58
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
|
|
59
|
+
.scrollbar-thumb.scrollbar-thumb-y {
|
|
60
|
+
${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
|
|
61
|
+
${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""}
|
|
62
|
+
${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
|
|
63
|
+
}
|
|
64
|
+
`, className),
|
|
56
65
|
style: {
|
|
57
|
-
"--thumb-width": typeof thumbWidth === "number" ? `${thumbWidth}px` :
|
|
66
|
+
"--thumb-width": typeof thumbWidth === "number" ? `${thumbWidth}px` : thumbWidth,
|
|
67
|
+
"--thumb-radius": typeof thumbRadius === "number" ? `${thumbRadius}px` : thumbRadius,
|
|
68
|
+
"--thumb-color": thumbColor,
|
|
69
|
+
"--track-color": trackColor,
|
|
58
70
|
...style
|
|
59
71
|
},
|
|
60
72
|
...rest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["css","clsx","forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","Scrollbar","jsx","_jsx","default","Scroll","props","ref","children","options","className","style","scrollbar","onScrollbar","rest","thumbWidth","scrollbarOptions","ele","bar","current","init","destroy","addListener","removeListener","undefined"],"sources":["../../../src/components/Scroll.tsx"],"sourcesContent":["\"use client\"\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\r\nexport { default as Scrollbar } from \"smooth-scrollbar\"\r\nexport * from \"smooth-scrollbar/interfaces\"\r\n\r\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\r\n /** 滑块宽度 */\r\n thumbWidth?: number\r\n}\r\n\r\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\r\n /** 滚动的配置 */\r\n options?: ScrollOptions\r\n /** 滚动条实例 */\r\n scrollbar?: ForwardedRef<Scrollbar>\r\n /** 滚动条滚动事件 */\r\n onScrollbar?: ScrollListener\r\n}\r\n\r\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\r\n const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props\r\n const { thumbWidth, ...scrollbarOptions } = options || {}\r\n const ele = useRef<HTMLDivElement>(null)\r\n const bar = useRef<Scrollbar | null>(null)\r\n\r\n useLayoutEffect(() => {\r\n bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\r\n return () => bar.current?.destroy()\r\n }, [])\r\n\r\n useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n useEffect(() => {\r\n if (!onScrollbar) return\r\n bar.current?.addListener(onScrollbar)\r\n return () => bar.current?.removeListener(onScrollbar)\r\n }, [onScrollbar])\r\n\r\n return (\r\n <div\r\n ref={ele}\r\n className={clsx(\r\n
|
|
1
|
+
{"version":3,"names":["css","clsx","forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","Scrollbar","jsx","_jsx","default","Scroll","props","ref","children","options","className","style","scrollbar","onScrollbar","rest","thumbWidth","thumbRadius","thumbColor","trackColor","scrollbarOptions","ele","bar","current","init","destroy","addListener","removeListener","undefined"],"sources":["../../../src/components/Scroll.tsx"],"sourcesContent":["\"use client\"\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\r\nexport { default as Scrollbar } from \"smooth-scrollbar\"\r\nexport * from \"smooth-scrollbar/interfaces\"\r\n\r\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\r\n /** 滑块宽度 */\r\n thumbWidth?: number | string\r\n /** 滑块圆角大小 */\r\n thumbRadius?: number | string\r\n /** 滑块背景颜色 */\r\n thumbColor?: string\r\n /** 滚动条背景颜色 */\r\n trackColor?: string\r\n}\r\n\r\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\r\n /** 滚动的配置 */\r\n options?: ScrollOptions\r\n /** 滚动条实例 */\r\n scrollbar?: ForwardedRef<Scrollbar>\r\n /** 滚动条滚动事件 */\r\n onScrollbar?: ScrollListener\r\n}\r\n\r\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\r\n const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props\r\n const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {}\r\n const ele = useRef<HTMLDivElement>(null)\r\n const bar = useRef<Scrollbar | null>(null)\r\n\r\n useLayoutEffect(() => {\r\n bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\r\n return () => bar.current?.destroy()\r\n }, [])\r\n\r\n useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n useEffect(() => {\r\n if (!onScrollbar) return\r\n bar.current?.addListener(onScrollbar)\r\n return () => bar.current?.removeListener(onScrollbar)\r\n }, [onScrollbar])\r\n\r\n return (\r\n <div\r\n ref={ele}\r\n className={clsx(\r\n css`\r\n .scrollbar-track.scrollbar-track-x {\r\n ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\r\n ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\r\n }\r\n\r\n .scrollbar-thumb.scrollbar-thumb-x {\r\n ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\r\n ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\r\n ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\r\n }\r\n\r\n .scrollbar-track.scrollbar-track-y {\r\n ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\r\n ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\r\n }\r\n\r\n .scrollbar-thumb.scrollbar-thumb-y {\r\n ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\r\n ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\r\n ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\r\n }\r\n `,\r\n className\r\n )}\r\n style={\r\n {\r\n \"--thumb-width\": typeof thumbWidth === \"number\" ? `${thumbWidth}px` : thumbWidth,\r\n \"--thumb-radius\": typeof thumbRadius === \"number\" ? `${thumbRadius}px` : thumbRadius,\r\n \"--thumb-color\": thumbColor,\r\n \"--track-color\": trackColor,\r\n ...style\r\n } as CSSProperties\r\n }\r\n {...rest}>\r\n {children}\r\n </div>\r\n )\r\n})\r\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -8,19 +8,28 @@ import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
|
|
|
8
8
|
import { Scroll, ScrollProps } from "./Scroll"
|
|
9
9
|
|
|
10
10
|
export interface AutoScrollProps extends ScrollProps {
|
|
11
|
-
/**
|
|
11
|
+
/** 轮播元素的个数 */
|
|
12
12
|
count: number
|
|
13
13
|
|
|
14
14
|
/** 轮播元素的高度 */
|
|
15
15
|
itemHeight: number
|
|
16
16
|
|
|
17
|
-
/**
|
|
18
|
-
|
|
17
|
+
/**
|
|
18
|
+
* 轮播动画的时间，单位毫秒
|
|
19
|
+
* @default 1000
|
|
20
|
+
*/
|
|
21
|
+
animation?: number
|
|
19
22
|
|
|
20
|
-
/**
|
|
21
|
-
|
|
23
|
+
/**
|
|
24
|
+
* 每个元素的停留时间，单位毫秒
|
|
25
|
+
* @default 3000
|
|
26
|
+
*/
|
|
27
|
+
duration?: number
|
|
22
28
|
|
|
23
|
-
/**
|
|
29
|
+
/**
|
|
30
|
+
* 元素之间的间距
|
|
31
|
+
* @default 0
|
|
32
|
+
*/
|
|
24
33
|
gap?: number
|
|
25
34
|
|
|
26
35
|
/** 容器类名 */
|
|
@@ -29,23 +38,34 @@ export interface AutoScrollProps extends ScrollProps {
|
|
|
29
38
|
/** 容器样式 */
|
|
30
39
|
containerStyle?: CSSProperties
|
|
31
40
|
|
|
32
|
-
/**
|
|
41
|
+
/**
|
|
42
|
+
* 在鼠标移入时是否继续播放
|
|
43
|
+
* @default false
|
|
44
|
+
*/
|
|
33
45
|
playOnMouseEnter?: boolean
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* 是否暂停
|
|
49
|
+
* @default false
|
|
50
|
+
*/
|
|
51
|
+
paused?: boolean
|
|
34
52
|
}
|
|
35
53
|
|
|
36
54
|
export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {
|
|
37
|
-
const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, ...rest } = props
|
|
55
|
+
const { count, itemHeight, animation = 1000, duration = 3000, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, paused, ...rest } = props
|
|
38
56
|
const bar = useRef<Scrollbar | null>(null)
|
|
39
57
|
const timeout = useRef<NodeJS.Timeout | undefined>(undefined)
|
|
40
58
|
const ele = useRef<HTMLDivElement>(null)
|
|
41
59
|
const size = useSize(ele)
|
|
42
|
-
const
|
|
60
|
+
const pausedRef = useRef(false)
|
|
61
|
+
const pausedProps = useRef(paused)
|
|
62
|
+
pausedProps.current = paused
|
|
43
63
|
|
|
44
64
|
useImperativeHandle(ref, () => ele.current!, [])
|
|
45
65
|
useImperativeHandle(scrollbar, () => bar.current!, [])
|
|
46
66
|
|
|
47
67
|
useEffect(() => {
|
|
48
|
-
if (playOnMouseEnter)
|
|
68
|
+
if (playOnMouseEnter) pausedRef.current = false
|
|
49
69
|
}, [playOnMouseEnter])
|
|
50
70
|
|
|
51
71
|
useEffect(() => {
|
|
@@ -57,7 +77,7 @@ export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, re
|
|
|
57
77
|
function scroll(target: number) {
|
|
58
78
|
clearTimeout(timeout.current)
|
|
59
79
|
timeout.current = setTimeout(() => {
|
|
60
|
-
if (
|
|
80
|
+
if (pausedRef.current || pausedProps.current) return scroll(target)
|
|
61
81
|
bar.current?.scrollTo(0, target, animation)
|
|
62
82
|
}, duration)
|
|
63
83
|
}
|
|
@@ -78,13 +98,13 @@ export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, re
|
|
|
78
98
|
|
|
79
99
|
function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
|
|
80
100
|
if (playOnMouseEnter) return
|
|
81
|
-
|
|
101
|
+
pausedRef.current = true
|
|
82
102
|
onMouseEnter?.(e)
|
|
83
103
|
}
|
|
84
104
|
|
|
85
105
|
function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
|
|
86
106
|
if (playOnMouseEnter) return
|
|
87
|
-
|
|
107
|
+
pausedRef.current = false
|
|
88
108
|
onMouseLeave?.(e)
|
|
89
109
|
}
|
|
90
110
|
|
|
@@ -9,7 +9,13 @@ export * from "smooth-scrollbar/interfaces"
|
|
|
9
9
|
|
|
10
10
|
export interface ScrollOptions extends Partial<ScrollbarOptions> {
|
|
11
11
|
/** 滑块宽度 */
|
|
12
|
-
thumbWidth?: number
|
|
12
|
+
thumbWidth?: number | string
|
|
13
|
+
/** 滑块圆角大小 */
|
|
14
|
+
thumbRadius?: number | string
|
|
15
|
+
/** 滑块背景颜色 */
|
|
16
|
+
thumbColor?: string
|
|
17
|
+
/** 滚动条背景颜色 */
|
|
18
|
+
trackColor?: string
|
|
13
19
|
}
|
|
14
20
|
|
|
15
21
|
export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
|
|
@@ -23,7 +29,7 @@ export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
23
29
|
|
|
24
30
|
export const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {
|
|
25
31
|
const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props
|
|
26
|
-
const { thumbWidth, ...scrollbarOptions } = options || {}
|
|
32
|
+
const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {}
|
|
27
33
|
const ele = useRef<HTMLDivElement>(null)
|
|
28
34
|
const bar = useRef<Scrollbar | null>(null)
|
|
29
35
|
|
|
@@ -46,29 +52,37 @@ export const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {
|
|
|
46
52
|
<div
|
|
47
53
|
ref={ele}
|
|
48
54
|
className={clsx(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
55
|
+
css`
|
|
56
|
+
.scrollbar-track.scrollbar-track-x {
|
|
57
|
+
${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
|
|
58
|
+
${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
|
|
59
|
+
}
|
|
54
60
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}
|
|
61
|
+
.scrollbar-thumb.scrollbar-thumb-x {
|
|
62
|
+
${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
|
|
63
|
+
${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""}
|
|
64
|
+
${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
|
|
65
|
+
}
|
|
58
66
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}
|
|
67
|
+
.scrollbar-track.scrollbar-track-y {
|
|
68
|
+
${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
|
|
69
|
+
${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
|
|
70
|
+
}
|
|
62
71
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
|
|
72
|
+
.scrollbar-thumb.scrollbar-thumb-y {
|
|
73
|
+
${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
|
|
74
|
+
${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""}
|
|
75
|
+
${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
|
|
76
|
+
}
|
|
77
|
+
`,
|
|
67
78
|
className
|
|
68
79
|
)}
|
|
69
80
|
style={
|
|
70
81
|
{
|
|
71
|
-
"--thumb-width": typeof thumbWidth === "number" ? `${thumbWidth}px` :
|
|
82
|
+
"--thumb-width": typeof thumbWidth === "number" ? `${thumbWidth}px` : thumbWidth,
|
|
83
|
+
"--thumb-radius": typeof thumbRadius === "number" ? `${thumbRadius}px` : thumbRadius,
|
|
84
|
+
"--thumb-color": thumbColor,
|
|
85
|
+
"--track-color": trackColor,
|
|
72
86
|
...style
|
|
73
87
|
} as CSSProperties
|
|
74
88
|
}
|