deepsea-components 2.8.0 → 2.8.2
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 +3 -3
- package/dist/cjs/components/AutoScroll.js +6 -3
- package/dist/cjs/components/AutoScroll.js.map +2 -2
- package/dist/cjs/components/Scroll.js +4 -12
- package/dist/cjs/components/Scroll.js.map +2 -2
- package/dist/esm/components/AutoScroll.d.ts +3 -3
- package/dist/esm/components/AutoScroll.js +8 -3
- package/dist/esm/components/AutoScroll.js.map +1 -1
- package/dist/esm/components/Scroll.js +6 -12
- package/dist/esm/components/Scroll.js.map +1 -1
- package/package.json +2 -2
- package/src/components/AutoScroll.tsx +9 -5
- package/src/components/Scroll.tsx +6 -13
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { CSSProperties
|
|
1
|
+
import { CSSProperties } from "react";
|
|
2
2
|
import { ScrollProps } from "./Scroll";
|
|
3
|
-
export interface
|
|
3
|
+
export interface AutoScrollProps extends ScrollProps {
|
|
4
4
|
/** 轮播的数据 */
|
|
5
5
|
count: number;
|
|
6
6
|
/** 轮播元素的高度 */
|
|
@@ -18,4 +18,4 @@ export interface SwiperScrollProps extends Omit<ScrollProps, "scrollbar"> {
|
|
|
18
18
|
/** 在鼠标移入时是否继续播放 */
|
|
19
19
|
playOnMouseEnter?: boolean;
|
|
20
20
|
}
|
|
21
|
-
export declare const AutoScroll:
|
|
21
|
+
export declare const AutoScroll: import("react").ForwardRefExoticComponent<AutoScrollProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
var __defProp = Object.defineProperty;
|
|
2
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
@@ -27,13 +28,15 @@ var import_ahooks = require("ahooks");
|
|
|
27
28
|
var import_deepsea_tools = require("deepsea-tools");
|
|
28
29
|
var import_react = require("react");
|
|
29
30
|
var import_Scroll = require("./Scroll");
|
|
30
|
-
var AutoScroll = (props) => {
|
|
31
|
-
const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, ...rest } = props;
|
|
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
33
|
const bar = (0, import_react.useRef)(null);
|
|
33
34
|
const timeout = (0, import_react.useRef)(void 0);
|
|
34
35
|
const ele = (0, import_react.useRef)(null);
|
|
35
36
|
const size = (0, import_ahooks.useSize)(ele);
|
|
36
37
|
const pause = (0, import_react.useRef)(false);
|
|
38
|
+
(0, import_react.useImperativeHandle)(ref, () => ele.current, []);
|
|
39
|
+
(0, import_react.useImperativeHandle)(scrollbar, () => bar.current, []);
|
|
37
40
|
(0, import_react.useEffect)(() => {
|
|
38
41
|
if (playOnMouseEnter)
|
|
39
42
|
pause.current = false;
|
|
@@ -98,7 +101,7 @@ var AutoScroll = (props) => {
|
|
|
98
101
|
},
|
|
99
102
|
children
|
|
100
103
|
));
|
|
101
|
-
};
|
|
104
|
+
});
|
|
102
105
|
// Annotate the CommonJS export names for ESM import in node:
|
|
103
106
|
0 && (module.exports = {
|
|
104
107
|
AutoScroll
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/AutoScroll.tsx"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
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 animation: number\r\n\r\n /** 每个元素的停留时间 */\r\n duration: number\r\n\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 playOnMouseEnter?: boolean\r\n}\r\n\r\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\r\n const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, ...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 pause = useRef(false)\r\n\r\n useImperativeHandle(ref, () => ele.current!, [])\r\n useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n useEffect(() => {\r\n if (playOnMouseEnter) pause.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 (pause.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 pause.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 pause.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;AA4B7B,IAAM,iBAAa,yBAA4C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,OAAO,YAAY,WAAW,UAAU,cAAc,cAAc,MAAM,GAAG,oBAAoB,gBAAgB,UAAU,kBAAkB,WAAW,GAAG,KAAK,IAAI;AAC5K,QAAM,UAAM,qBAAyB,IAAI;AACzC,QAAM,cAAU,qBAAmC,MAAS;AAC5D,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,WAAO,uBAAQ,GAAG;AACxB,QAAM,YAAQ,qBAAO,KAAK;AAE1B,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAC/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI;AAAkB,YAAM,UAAU;AAAA,EAC1C,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,MAAM;AAAS,iBAAO,OAAO,MAAM;AACvC,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,UAAM,UAAU;AAChB,mBAAe,CAAC;AAAA,EACpB;AAEA,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,UAAM,UAAU;AAChB,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
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -45,21 +46,12 @@ var Scroll = (0, import_react.forwardRef)((props, ref) => {
|
|
|
45
46
|
const { thumbWidth, ...scrollbarOptions } = options || {};
|
|
46
47
|
const ele = (0, import_react.useRef)(null);
|
|
47
48
|
const bar = (0, import_react.useRef)(null);
|
|
48
|
-
(0, import_react.
|
|
49
|
-
(0, import_react.useEffect)(() => {
|
|
49
|
+
(0, import_react.useLayoutEffect)(() => {
|
|
50
50
|
bar.current = import_smooth_scrollbar.default.init(ele.current, scrollbarOptions);
|
|
51
51
|
return () => bar.current?.destroy();
|
|
52
52
|
}, []);
|
|
53
|
-
(0, import_react.
|
|
54
|
-
|
|
55
|
-
return;
|
|
56
|
-
if (typeof scrollbar === "function") {
|
|
57
|
-
scrollbar(bar.current);
|
|
58
|
-
return () => scrollbar(null);
|
|
59
|
-
}
|
|
60
|
-
scrollbar.current = bar.current;
|
|
61
|
-
return () => scrollbar.current = null;
|
|
62
|
-
}, [scrollbar]);
|
|
53
|
+
(0, import_react.useImperativeHandle)(ref, () => ele.current, []);
|
|
54
|
+
(0, import_react.useImperativeHandle)(scrollbar, () => bar.current, []);
|
|
63
55
|
(0, import_react.useEffect)(() => {
|
|
64
56
|
if (!onScrollbar)
|
|
65
57
|
return;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Scroll.tsx"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
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 typeof thumbWidth === \"number\" &&\r\n css`\r\n .scrollbar-track.scrollbar-track-x {\r\n height: var(--thumb-width);\r\n }\r\n\r\n .scrollbar-thumb.scrollbar-thumb-x {\r\n height: var(--thumb-width);\r\n }\r\n\r\n .scrollbar-track.scrollbar-track-y {\r\n width: var(--thumb-width);\r\n }\r\n\r\n .scrollbar-thumb.scrollbar-thumb-y {\r\n width: var(--thumb-width);\r\n }\r\n `,\r\n className\r\n )}\r\n style={\r\n {\r\n \"--thumb-width\": typeof thumbWidth === \"number\" ? `${thumbWidth}px` : undefined,\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;AAuBO,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AAC1E,QAAM,EAAE,UAAU,SAAS,WAAW,OAAO,WAAW,aAAa,GAAG,KAAK,IAAI;AACjF,QAAM,EAAE,YAAY,GAAG,iBAAiB,IAAI,WAAW,CAAC;AACxD,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,OAAO,eAAe,YAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAiBJ;AAAA,MACJ;AAAA,MACA,OACI;AAAA,QACI,iBAAiB,OAAO,eAAe,WAAW,GAAG,iBAAiB;AAAA,QACtE,GAAG;AAAA,MACP;AAAA,MAEH,GAAG;AAAA;AAAA,IACH;AAAA,EACL;AAER,CAAC;",
|
|
6
6
|
"names": ["import_smooth_scrollbar", "Scrollbar"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { CSSProperties
|
|
1
|
+
import { CSSProperties } from "react";
|
|
2
2
|
import { ScrollProps } from "./Scroll";
|
|
3
|
-
export interface
|
|
3
|
+
export interface AutoScrollProps extends ScrollProps {
|
|
4
4
|
/** 轮播的数据 */
|
|
5
5
|
count: number;
|
|
6
6
|
/** 轮播元素的高度 */
|
|
@@ -18,4 +18,4 @@ export interface SwiperScrollProps extends Omit<ScrollProps, "scrollbar"> {
|
|
|
18
18
|
/** 在鼠标移入时是否继续播放 */
|
|
19
19
|
playOnMouseEnter?: boolean;
|
|
20
20
|
}
|
|
21
|
-
export declare const AutoScroll:
|
|
21
|
+
export declare const AutoScroll: import("react").ForwardRefExoticComponent<AutoScrollProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
1
3
|
import { css } from "@emotion/css";
|
|
2
4
|
import { useSize } from "ahooks";
|
|
3
5
|
import { clsx, getArray } from "deepsea-tools";
|
|
4
|
-
import { useEffect, useRef } from "react";
|
|
6
|
+
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
|
|
5
7
|
import { Scroll } from "./Scroll";
|
|
6
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
export const AutoScroll = props => {
|
|
9
|
+
export const AutoScroll = /*#__PURE__*/forwardRef((props, ref) => {
|
|
8
10
|
const {
|
|
9
11
|
count,
|
|
10
12
|
itemHeight,
|
|
@@ -17,6 +19,7 @@ export const AutoScroll = props => {
|
|
|
17
19
|
containerStyle,
|
|
18
20
|
children,
|
|
19
21
|
playOnMouseEnter,
|
|
22
|
+
scrollbar,
|
|
20
23
|
...rest
|
|
21
24
|
} = props;
|
|
22
25
|
const bar = useRef(null);
|
|
@@ -24,6 +27,8 @@ export const AutoScroll = props => {
|
|
|
24
27
|
const ele = useRef(null);
|
|
25
28
|
const size = useSize(ele);
|
|
26
29
|
const pause = useRef(false);
|
|
30
|
+
useImperativeHandle(ref, () => ele.current, []);
|
|
31
|
+
useImperativeHandle(scrollbar, () => bar.current, []);
|
|
27
32
|
useEffect(() => {
|
|
28
33
|
if (playOnMouseEnter) pause.current = false;
|
|
29
34
|
}, [playOnMouseEnter]);
|
|
@@ -90,5 +95,5 @@ export const AutoScroll = props => {
|
|
|
90
95
|
children: children
|
|
91
96
|
})
|
|
92
97
|
});
|
|
93
|
-
};
|
|
98
|
+
});
|
|
94
99
|
//# sourceMappingURL=AutoScroll.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["css","useSize","clsx","getArray","useEffect","useRef","Scroll","jsx","_jsx","AutoScroll","props","count","itemHeight","animation","duration","onMouseEnter","onMouseLeave","gap","containerClassName","containerStyle","children","playOnMouseEnter","rest","bar","timeout","undefined","ele","size","pause","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","
|
|
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","pause","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 animation: number\r\n\r\n /** 每个元素的停留时间 */\r\n duration: number\r\n\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 playOnMouseEnter?: boolean\r\n}\r\n\r\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\r\n const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, ...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 pause = useRef(false)\r\n\r\n useImperativeHandle(ref, () => ele.current!, [])\r\n useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n useEffect(() => {\r\n if (playOnMouseEnter) pause.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 (pause.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 pause.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 pause.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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"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
1
3
|
import { css } from "@emotion/css";
|
|
2
4
|
import { clsx } from "deepsea-tools";
|
|
3
|
-
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
|
|
5
|
+
import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
|
|
4
6
|
import Scrollbar from "smooth-scrollbar";
|
|
5
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
8
|
export { default as Scrollbar } from "smooth-scrollbar";
|
|
@@ -21,20 +23,12 @@ export const Scroll = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
21
23
|
} = options || {};
|
|
22
24
|
const ele = useRef(null);
|
|
23
25
|
const bar = useRef(null);
|
|
24
|
-
|
|
25
|
-
useEffect(() => {
|
|
26
|
+
useLayoutEffect(() => {
|
|
26
27
|
bar.current = Scrollbar.init(ele.current, scrollbarOptions);
|
|
27
28
|
return () => bar.current?.destroy();
|
|
28
29
|
}, []);
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
if (typeof scrollbar === "function") {
|
|
32
|
-
scrollbar(bar.current);
|
|
33
|
-
return () => scrollbar(null);
|
|
34
|
-
}
|
|
35
|
-
scrollbar.current = bar.current;
|
|
36
|
-
return () => scrollbar.current = null;
|
|
37
|
-
}, [scrollbar]);
|
|
30
|
+
useImperativeHandle(ref, () => ele.current, []);
|
|
31
|
+
useImperativeHandle(scrollbar, () => bar.current, []);
|
|
38
32
|
useEffect(() => {
|
|
39
33
|
if (!onScrollbar) return;
|
|
40
34
|
bar.current?.addListener(onScrollbar);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["css","clsx","forwardRef","useEffect","useImperativeHandle","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":["
|
|
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 typeof thumbWidth === \"number\" &&\r\n css`\r\n .scrollbar-track.scrollbar-track-x {\r\n height: var(--thumb-width);\r\n }\r\n\r\n .scrollbar-thumb.scrollbar-thumb-x {\r\n height: var(--thumb-width);\r\n }\r\n\r\n .scrollbar-track.scrollbar-track-y {\r\n width: var(--thumb-width);\r\n }\r\n\r\n .scrollbar-thumb.scrollbar-thumb-y {\r\n width: var(--thumb-width);\r\n }\r\n `,\r\n className\r\n )}\r\n style={\r\n {\r\n \"--thumb-width\": typeof thumbWidth === \"number\" ? `${thumbWidth}px` : undefined,\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":"AAAA,YAAY;;AACZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAAsCC,UAAU,EAAkBC,SAAS,EAAEC,mBAAmB,EAAEC,eAAe,EAAEC,MAAM,QAAQ,OAAO;AACxI,OAAOC,SAAS,MAAM,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAExC,SAASC,OAAO,IAAIH,SAAS,QAAQ,kBAAkB;AACvD,cAAc,6BAA6B;AAgB3C,OAAO,MAAMI,MAAM,gBAAGT,UAAU,CAA8B,CAACU,KAAK,EAAEC,GAAG,KAAK;EAC1E,MAAM;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,SAAS;IAAEC,KAAK;IAAEC,SAAS;IAAEC,WAAW;IAAE,GAAGC;EAAK,CAAC,GAAGR,KAAK;EACtF,MAAM;IAAES,UAAU;IAAE,GAAGC;EAAiB,CAAC,GAAGP,OAAO,IAAI,CAAC,CAAC;EACzD,MAAMQ,GAAG,GAAGjB,MAAM,CAAiB,IAAI,CAAC;EACxC,MAAMkB,GAAG,GAAGlB,MAAM,CAAmB,IAAI,CAAC;EAE1CD,eAAe,CAAC,MAAM;IAClBmB,GAAG,CAACC,OAAO,GAAGlB,SAAS,CAACmB,IAAI,CAACH,GAAG,CAACE,OAAO,EAAGH,gBAAgB,CAAC;IAC5D,OAAO,MAAME,GAAG,CAACC,OAAO,EAAEE,OAAO,CAAC,CAAC;EACvC,CAAC,EAAE,EAAE,CAAC;EAENvB,mBAAmB,CAACS,GAAG,EAAE,MAAMU,GAAG,CAACE,OAAQ,EAAE,EAAE,CAAC;EAEhDrB,mBAAmB,CAACc,SAAS,EAAE,MAAMM,GAAG,CAACC,OAAQ,EAAE,EAAE,CAAC;EAEtDtB,SAAS,CAAC,MAAM;IACZ,IAAI,CAACgB,WAAW,EAAE;IAClBK,GAAG,CAACC,OAAO,EAAEG,WAAW,CAACT,WAAW,CAAC;IACrC,OAAO,MAAMK,GAAG,CAACC,OAAO,EAAEI,cAAc,CAACV,WAAW,CAAC;EACzD,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,oBACIV,IAAA;IACII,GAAG,EAAEU,GAAI;IACTP,SAAS,EAAEf,IAAI,CACX,OAAOoB,UAAU,KAAK,QAAQ,IAC1BrB,GAAI;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,EACLgB,SACJ,CAAE;IACFC,KAAK,EACD;MACI,eAAe,EAAE,OAAOI,UAAU,KAAK,QAAQ,GAAI,GAAEA,UAAW,IAAG,GAAGS,SAAS;MAC/E,GAAGb;IACP,CACH;IAAA,GACGG,IAAI;IAAAN,QAAA,EACPA;EAAQ,CACR,CAAC;AAEd,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
"use client"
|
|
1
2
|
import { css } from "@emotion/css"
|
|
2
3
|
import { useSize } from "ahooks"
|
|
3
4
|
import { clsx, getArray } from "deepsea-tools"
|
|
4
|
-
import { CSSProperties,
|
|
5
|
+
import { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
|
|
5
6
|
import Scrollbar from "smooth-scrollbar"
|
|
6
7
|
import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
|
|
7
8
|
import { Scroll, ScrollProps } from "./Scroll"
|
|
8
9
|
|
|
9
|
-
export interface
|
|
10
|
+
export interface AutoScrollProps extends ScrollProps {
|
|
10
11
|
/** 轮播的数据 */
|
|
11
12
|
count: number
|
|
12
13
|
|
|
@@ -32,14 +33,17 @@ export interface SwiperScrollProps extends Omit<ScrollProps, "scrollbar"> {
|
|
|
32
33
|
playOnMouseEnter?: boolean
|
|
33
34
|
}
|
|
34
35
|
|
|
35
|
-
export const AutoScroll
|
|
36
|
-
const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, ...rest } = props
|
|
36
|
+
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
|
|
37
38
|
const bar = useRef<Scrollbar | null>(null)
|
|
38
39
|
const timeout = useRef<NodeJS.Timeout | undefined>(undefined)
|
|
39
40
|
const ele = useRef<HTMLDivElement>(null)
|
|
40
41
|
const size = useSize(ele)
|
|
41
42
|
const pause = useRef(false)
|
|
42
43
|
|
|
44
|
+
useImperativeHandle(ref, () => ele.current!, [])
|
|
45
|
+
useImperativeHandle(scrollbar, () => bar.current!, [])
|
|
46
|
+
|
|
43
47
|
useEffect(() => {
|
|
44
48
|
if (playOnMouseEnter) pause.current = false
|
|
45
49
|
}, [playOnMouseEnter])
|
|
@@ -103,4 +107,4 @@ export const AutoScroll: FC<SwiperScrollProps> = props => {
|
|
|
103
107
|
</div>
|
|
104
108
|
</Scroll>
|
|
105
109
|
)
|
|
106
|
-
}
|
|
110
|
+
})
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
"use client"
|
|
1
2
|
import { css } from "@emotion/css"
|
|
2
3
|
import { clsx } from "deepsea-tools"
|
|
3
|
-
import { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useRef } from "react"
|
|
4
|
+
import { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
|
|
4
5
|
import Scrollbar from "smooth-scrollbar"
|
|
5
6
|
import type { ScrollbarOptions, ScrollListener } from "smooth-scrollbar/interfaces"
|
|
6
7
|
export { default as Scrollbar } from "smooth-scrollbar"
|
|
@@ -26,22 +27,14 @@ export const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {
|
|
|
26
27
|
const ele = useRef<HTMLDivElement>(null)
|
|
27
28
|
const bar = useRef<Scrollbar | null>(null)
|
|
28
29
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
useEffect(() => {
|
|
30
|
+
useLayoutEffect(() => {
|
|
32
31
|
bar.current = Scrollbar.init(ele.current!, scrollbarOptions)
|
|
33
32
|
return () => bar.current?.destroy()
|
|
34
33
|
}, [])
|
|
35
34
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
scrollbar(bar.current)
|
|
40
|
-
return () => scrollbar(null)
|
|
41
|
-
}
|
|
42
|
-
scrollbar.current = bar.current
|
|
43
|
-
return () => (scrollbar.current = null)
|
|
44
|
-
}, [scrollbar])
|
|
35
|
+
useImperativeHandle(ref, () => ele.current!, [])
|
|
36
|
+
|
|
37
|
+
useImperativeHandle(scrollbar, () => bar.current!, [])
|
|
45
38
|
|
|
46
39
|
useEffect(() => {
|
|
47
40
|
if (!onScrollbar) return
|