deepsea-components 2.8.3 → 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 +5 -0
- package/dist/cjs/components/AutoScroll.js +8 -6
- package/dist/cjs/components/AutoScroll.js.map +2 -2
- package/dist/esm/components/AutoScroll.d.ts +5 -0
- package/dist/esm/components/AutoScroll.js +8 -5
- package/dist/esm/components/AutoScroll.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AutoScroll.tsx +17 -9
|
@@ -29,5 +29,10 @@ export interface AutoScrollProps extends ScrollProps {
|
|
|
29
29
|
* @default false
|
|
30
30
|
*/
|
|
31
31
|
playOnMouseEnter?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* 是否暂停
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
36
|
+
paused?: boolean;
|
|
32
37
|
}
|
|
33
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 = 1e3, duration = 3e3, 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 /** 轮播元素的个数 */\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
|
|
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
|
}
|
|
@@ -29,5 +29,10 @@ export interface AutoScrollProps extends ScrollProps {
|
|
|
29
29
|
* @default false
|
|
30
30
|
*/
|
|
31
31
|
playOnMouseEnter?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* 是否暂停
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
36
|
+
paused?: boolean;
|
|
32
37
|
}
|
|
33
38
|
export declare const AutoScroll: import("react").ForwardRefExoticComponent<AutoScrollProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -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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"}
|
package/package.json
CHANGED
|
@@ -26,8 +26,8 @@ export interface AutoScrollProps extends ScrollProps {
|
|
|
26
26
|
*/
|
|
27
27
|
duration?: number
|
|
28
28
|
|
|
29
|
-
/**
|
|
30
|
-
* 元素之间的间距
|
|
29
|
+
/**
|
|
30
|
+
* 元素之间的间距
|
|
31
31
|
* @default 0
|
|
32
32
|
*/
|
|
33
33
|
gap?: number
|
|
@@ -38,26 +38,34 @@ export interface AutoScrollProps extends ScrollProps {
|
|
|
38
38
|
/** 容器样式 */
|
|
39
39
|
containerStyle?: CSSProperties
|
|
40
40
|
|
|
41
|
-
/**
|
|
41
|
+
/**
|
|
42
42
|
* 在鼠标移入时是否继续播放
|
|
43
43
|
* @default false
|
|
44
44
|
*/
|
|
45
45
|
playOnMouseEnter?: boolean
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* 是否暂停
|
|
49
|
+
* @default false
|
|
50
|
+
*/
|
|
51
|
+
paused?: boolean
|
|
46
52
|
}
|
|
47
53
|
|
|
48
54
|
export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {
|
|
49
|
-
const { count, itemHeight, animation = 1000, duration = 3000, 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
|
|
50
56
|
const bar = useRef<Scrollbar | null>(null)
|
|
51
57
|
const timeout = useRef<NodeJS.Timeout | undefined>(undefined)
|
|
52
58
|
const ele = useRef<HTMLDivElement>(null)
|
|
53
59
|
const size = useSize(ele)
|
|
54
|
-
const
|
|
60
|
+
const pausedRef = useRef(false)
|
|
61
|
+
const pausedProps = useRef(paused)
|
|
62
|
+
pausedProps.current = paused
|
|
55
63
|
|
|
56
64
|
useImperativeHandle(ref, () => ele.current!, [])
|
|
57
65
|
useImperativeHandle(scrollbar, () => bar.current!, [])
|
|
58
66
|
|
|
59
67
|
useEffect(() => {
|
|
60
|
-
if (playOnMouseEnter)
|
|
68
|
+
if (playOnMouseEnter) pausedRef.current = false
|
|
61
69
|
}, [playOnMouseEnter])
|
|
62
70
|
|
|
63
71
|
useEffect(() => {
|
|
@@ -69,7 +77,7 @@ export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, re
|
|
|
69
77
|
function scroll(target: number) {
|
|
70
78
|
clearTimeout(timeout.current)
|
|
71
79
|
timeout.current = setTimeout(() => {
|
|
72
|
-
if (
|
|
80
|
+
if (pausedRef.current || pausedProps.current) return scroll(target)
|
|
73
81
|
bar.current?.scrollTo(0, target, animation)
|
|
74
82
|
}, duration)
|
|
75
83
|
}
|
|
@@ -90,13 +98,13 @@ export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, re
|
|
|
90
98
|
|
|
91
99
|
function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
|
|
92
100
|
if (playOnMouseEnter) return
|
|
93
|
-
|
|
101
|
+
pausedRef.current = true
|
|
94
102
|
onMouseEnter?.(e)
|
|
95
103
|
}
|
|
96
104
|
|
|
97
105
|
function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
|
|
98
106
|
if (playOnMouseEnter) return
|
|
99
|
-
|
|
107
|
+
pausedRef.current = false
|
|
100
108
|
onMouseLeave?.(e)
|
|
101
109
|
}
|
|
102
110
|
|