deepsea-components 2.8.0 → 2.8.1
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 +5 -3
- package/dist/cjs/components/AutoScroll.js.map +2 -2
- package/dist/cjs/components/Scroll.js +3 -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 +6 -3
- package/dist/esm/components/AutoScroll.js.map +1 -1
- package/dist/esm/components/Scroll.js +4 -12
- package/dist/esm/components/Scroll.js.map +1 -1
- package/package.json +2 -2
- package/src/components/AutoScroll.tsx +8 -5
- package/src/components/Scroll.tsx +5 -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>>;
|
|
@@ -27,13 +27,15 @@ var import_ahooks = require("ahooks");
|
|
|
27
27
|
var import_deepsea_tools = require("deepsea-tools");
|
|
28
28
|
var import_react = require("react");
|
|
29
29
|
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;
|
|
30
|
+
var AutoScroll = (0, import_react.forwardRef)((props, ref) => {
|
|
31
|
+
const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, ...rest } = props;
|
|
32
32
|
const bar = (0, import_react.useRef)(null);
|
|
33
33
|
const timeout = (0, import_react.useRef)(void 0);
|
|
34
34
|
const ele = (0, import_react.useRef)(null);
|
|
35
35
|
const size = (0, import_ahooks.useSize)(ele);
|
|
36
36
|
const pause = (0, import_react.useRef)(false);
|
|
37
|
+
(0, import_react.useImperativeHandle)(ref, () => ele.current, []);
|
|
38
|
+
(0, import_react.useImperativeHandle)(scrollbar, () => bar.current, []);
|
|
37
39
|
(0, import_react.useEffect)(() => {
|
|
38
40
|
if (playOnMouseEnter)
|
|
39
41
|
pause.current = false;
|
|
@@ -98,7 +100,7 @@ var AutoScroll = (props) => {
|
|
|
98
100
|
},
|
|
99
101
|
children
|
|
100
102
|
));
|
|
101
|
-
};
|
|
103
|
+
});
|
|
102
104
|
// Annotate the CommonJS export names for ESM import in node:
|
|
103
105
|
0 && (module.exports = {
|
|
104
106
|
AutoScroll
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/AutoScroll.tsx"],
|
|
4
|
-
"sourcesContent": ["import { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx, getArray } from \"deepsea-tools\"\r\nimport { CSSProperties,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAoB;AACpB,oBAAwB;AACxB,2BAA+B;AAC/B,
|
|
4
|
+
"sourcesContent": ["import { 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;AAAA,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
|
}
|
|
@@ -45,21 +45,12 @@ var Scroll = (0, import_react.forwardRef)((props, ref) => {
|
|
|
45
45
|
const { thumbWidth, ...scrollbarOptions } = options || {};
|
|
46
46
|
const ele = (0, import_react.useRef)(null);
|
|
47
47
|
const bar = (0, import_react.useRef)(null);
|
|
48
|
-
(0, import_react.
|
|
49
|
-
(0, import_react.useEffect)(() => {
|
|
48
|
+
(0, import_react.useLayoutEffect)(() => {
|
|
50
49
|
bar.current = import_smooth_scrollbar.default.init(ele.current, scrollbarOptions);
|
|
51
50
|
return () => bar.current?.destroy();
|
|
52
51
|
}, []);
|
|
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]);
|
|
52
|
+
(0, import_react.useImperativeHandle)(ref, () => ele.current, []);
|
|
53
|
+
(0, import_react.useImperativeHandle)(scrollbar, () => bar.current, []);
|
|
63
54
|
(0, import_react.useEffect)(() => {
|
|
64
55
|
if (!onScrollbar)
|
|
65
56
|
return;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Scroll.tsx"],
|
|
4
|
-
"sourcesContent": ["import { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, 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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAoB;AACpB,2BAAqB;AACrB,
|
|
4
|
+
"sourcesContent": ["import { 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;AAAA,iBAAoB;AACpB,2BAAqB;AACrB,mBAAiI;AACjI,8BAAsB;AAEtB,IAAAA,2BAAqC;AACrC,2BAAc,wCANd;AAsBO,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,10 @@
|
|
|
1
1
|
import { css } from "@emotion/css";
|
|
2
2
|
import { useSize } from "ahooks";
|
|
3
3
|
import { clsx, getArray } from "deepsea-tools";
|
|
4
|
-
import { useEffect, useRef } from "react";
|
|
4
|
+
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
|
|
5
5
|
import { Scroll } from "./Scroll";
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
export const AutoScroll = props => {
|
|
7
|
+
export const AutoScroll = /*#__PURE__*/forwardRef((props, ref) => {
|
|
8
8
|
const {
|
|
9
9
|
count,
|
|
10
10
|
itemHeight,
|
|
@@ -17,6 +17,7 @@ export const AutoScroll = props => {
|
|
|
17
17
|
containerStyle,
|
|
18
18
|
children,
|
|
19
19
|
playOnMouseEnter,
|
|
20
|
+
scrollbar,
|
|
20
21
|
...rest
|
|
21
22
|
} = props;
|
|
22
23
|
const bar = useRef(null);
|
|
@@ -24,6 +25,8 @@ export const AutoScroll = props => {
|
|
|
24
25
|
const ele = useRef(null);
|
|
25
26
|
const size = useSize(ele);
|
|
26
27
|
const pause = useRef(false);
|
|
28
|
+
useImperativeHandle(ref, () => ele.current, []);
|
|
29
|
+
useImperativeHandle(scrollbar, () => bar.current, []);
|
|
27
30
|
useEffect(() => {
|
|
28
31
|
if (playOnMouseEnter) pause.current = false;
|
|
29
32
|
}, [playOnMouseEnter]);
|
|
@@ -90,5 +93,5 @@ export const AutoScroll = props => {
|
|
|
90
93
|
children: children
|
|
91
94
|
})
|
|
92
95
|
});
|
|
93
|
-
};
|
|
96
|
+
});
|
|
94
97
|
//# 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":["import { 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,6 @@
|
|
|
1
1
|
import { css } from "@emotion/css";
|
|
2
2
|
import { clsx } from "deepsea-tools";
|
|
3
|
-
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
|
|
3
|
+
import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
|
|
4
4
|
import Scrollbar from "smooth-scrollbar";
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
export { default as Scrollbar } from "smooth-scrollbar";
|
|
@@ -21,20 +21,12 @@ export const Scroll = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
21
21
|
} = options || {};
|
|
22
22
|
const ele = useRef(null);
|
|
23
23
|
const bar = useRef(null);
|
|
24
|
-
|
|
25
|
-
useEffect(() => {
|
|
24
|
+
useLayoutEffect(() => {
|
|
26
25
|
bar.current = Scrollbar.init(ele.current, scrollbarOptions);
|
|
27
26
|
return () => bar.current?.destroy();
|
|
28
27
|
}, []);
|
|
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]);
|
|
28
|
+
useImperativeHandle(ref, () => ele.current, []);
|
|
29
|
+
useImperativeHandle(scrollbar, () => bar.current, []);
|
|
38
30
|
useEffect(() => {
|
|
39
31
|
if (!onScrollbar) return;
|
|
40
32
|
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":["import { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, 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
|
|
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":["import { 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,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,12 @@
|
|
|
1
1
|
import { css } from "@emotion/css"
|
|
2
2
|
import { useSize } from "ahooks"
|
|
3
3
|
import { clsx, getArray } from "deepsea-tools"
|
|
4
|
-
import { CSSProperties,
|
|
4
|
+
import { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
|
|
5
5
|
import Scrollbar from "smooth-scrollbar"
|
|
6
6
|
import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
|
|
7
7
|
import { Scroll, ScrollProps } from "./Scroll"
|
|
8
8
|
|
|
9
|
-
export interface
|
|
9
|
+
export interface AutoScrollProps extends ScrollProps {
|
|
10
10
|
/** 轮播的数据 */
|
|
11
11
|
count: number
|
|
12
12
|
|
|
@@ -32,14 +32,17 @@ export interface SwiperScrollProps extends Omit<ScrollProps, "scrollbar"> {
|
|
|
32
32
|
playOnMouseEnter?: boolean
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
export const AutoScroll
|
|
36
|
-
const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, ...rest } = props
|
|
35
|
+
export const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {
|
|
36
|
+
const { count, itemHeight, animation, duration, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, ...rest } = props
|
|
37
37
|
const bar = useRef<Scrollbar | null>(null)
|
|
38
38
|
const timeout = useRef<NodeJS.Timeout | undefined>(undefined)
|
|
39
39
|
const ele = useRef<HTMLDivElement>(null)
|
|
40
40
|
const size = useSize(ele)
|
|
41
41
|
const pause = useRef(false)
|
|
42
42
|
|
|
43
|
+
useImperativeHandle(ref, () => ele.current!, [])
|
|
44
|
+
useImperativeHandle(scrollbar, () => bar.current!, [])
|
|
45
|
+
|
|
43
46
|
useEffect(() => {
|
|
44
47
|
if (playOnMouseEnter) pause.current = false
|
|
45
48
|
}, [playOnMouseEnter])
|
|
@@ -103,4 +106,4 @@ export const AutoScroll: FC<SwiperScrollProps> = props => {
|
|
|
103
106
|
</div>
|
|
104
107
|
</Scroll>
|
|
105
108
|
)
|
|
106
|
-
}
|
|
109
|
+
})
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from "@emotion/css"
|
|
2
2
|
import { clsx } from "deepsea-tools"
|
|
3
|
-
import { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useRef } from "react"
|
|
3
|
+
import { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
|
|
4
4
|
import Scrollbar from "smooth-scrollbar"
|
|
5
5
|
import type { ScrollbarOptions, ScrollListener } from "smooth-scrollbar/interfaces"
|
|
6
6
|
export { default as Scrollbar } from "smooth-scrollbar"
|
|
@@ -26,22 +26,14 @@ export const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {
|
|
|
26
26
|
const ele = useRef<HTMLDivElement>(null)
|
|
27
27
|
const bar = useRef<Scrollbar | null>(null)
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
useEffect(() => {
|
|
29
|
+
useLayoutEffect(() => {
|
|
32
30
|
bar.current = Scrollbar.init(ele.current!, scrollbarOptions)
|
|
33
31
|
return () => bar.current?.destroy()
|
|
34
32
|
}, [])
|
|
35
33
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
scrollbar(bar.current)
|
|
40
|
-
return () => scrollbar(null)
|
|
41
|
-
}
|
|
42
|
-
scrollbar.current = bar.current
|
|
43
|
-
return () => (scrollbar.current = null)
|
|
44
|
-
}, [scrollbar])
|
|
34
|
+
useImperativeHandle(ref, () => ele.current!, [])
|
|
35
|
+
|
|
36
|
+
useImperativeHandle(scrollbar, () => bar.current!, [])
|
|
45
37
|
|
|
46
38
|
useEffect(() => {
|
|
47
39
|
if (!onScrollbar) return
|