deepsea-components 5.1.0 → 5.1.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/InfiniteScroll.d.ts +2 -0
- package/dist/cjs/components/InfiniteScroll.js +20 -3
- package/dist/cjs/components/InfiniteScroll.js.map +2 -2
- package/dist/esm/components/InfiniteScroll.d.ts +2 -0
- package/dist/esm/components/InfiniteScroll.d.ts.map +1 -1
- package/dist/esm/components/InfiniteScroll.js +19 -2
- package/dist/esm/components/InfiniteScroll.js.map +1 -1
- package/package.json +1 -1
- package/src/components/InfiniteScroll.tsx +24 -4
|
@@ -27,7 +27,7 @@ var import_ahooks = require("ahooks");
|
|
|
27
27
|
var import_deepsea_tools = require("deepsea-tools");
|
|
28
28
|
var import_react = require("react");
|
|
29
29
|
var InfiniteScroll = (0, import_react.forwardRef)((props, ref) => {
|
|
30
|
-
const { className, direction = "vertical", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, ...rest } = props;
|
|
30
|
+
const { className, direction = "vertical", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, pauseOnHover, onMouseEnter, onMouseLeave, ...rest } = props;
|
|
31
31
|
const wrapper = (0, import_react.useRef)(null);
|
|
32
32
|
const wrapperSize = (0, import_ahooks.useSize)(wrapper);
|
|
33
33
|
const ele = (0, import_react.useRef)(null);
|
|
@@ -38,17 +38,32 @@ var InfiniteScroll = (0, import_react.forwardRef)((props, ref) => {
|
|
|
38
38
|
return withEqual ? containerSize2 + (withGap ? gap : 0) >= wrapperSize2 : containerSize2 + (withGap ? gap : 0) > wrapperSize2;
|
|
39
39
|
}
|
|
40
40
|
const overflow = wrapperSize && containerSize ? direction === "vertical" ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width) : false;
|
|
41
|
+
const animation = (0, import_react.useRef)(void 0);
|
|
41
42
|
(0, import_react.useEffect)(() => {
|
|
42
43
|
if (!wrapperSize || !containerSize || !overflow)
|
|
43
44
|
return;
|
|
44
|
-
|
|
45
|
+
animation.current = ele.current?.animate(
|
|
45
46
|
{
|
|
46
47
|
transform: direction === "vertical" ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`] : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`]
|
|
47
48
|
},
|
|
48
49
|
{ duration, iterations: Infinity }
|
|
49
50
|
);
|
|
50
|
-
return () => animation?.cancel();
|
|
51
|
+
return () => animation.current?.cancel();
|
|
51
52
|
}, [wrapperSize, containerSize, overflow, direction, duration]);
|
|
53
|
+
function enter(e) {
|
|
54
|
+
if (pauseOnHover)
|
|
55
|
+
animation.current?.pause();
|
|
56
|
+
onMouseEnter?.(e);
|
|
57
|
+
}
|
|
58
|
+
function leave(e) {
|
|
59
|
+
if (pauseOnHover)
|
|
60
|
+
animation.current?.play();
|
|
61
|
+
onMouseLeave?.(e);
|
|
62
|
+
}
|
|
63
|
+
(0, import_react.useEffect)(() => {
|
|
64
|
+
if (!pauseOnHover)
|
|
65
|
+
animation.current?.play();
|
|
66
|
+
}, [animation.current, pauseOnHover]);
|
|
52
67
|
return /* @__PURE__ */ React.createElement(
|
|
53
68
|
"div",
|
|
54
69
|
{
|
|
@@ -60,6 +75,8 @@ var InfiniteScroll = (0, import_react.forwardRef)((props, ref) => {
|
|
|
60
75
|
`,
|
|
61
76
|
className
|
|
62
77
|
),
|
|
78
|
+
onMouseEnter: enter,
|
|
79
|
+
onMouseLeave: leave,
|
|
63
80
|
...rest
|
|
64
81
|
},
|
|
65
82
|
/* @__PURE__ */ React.createElement(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/InfiniteScroll.tsx"],
|
|
4
|
-
"sourcesContent": ["import { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { ComponentProps, CSSProperties, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport type InfiniteScrollProps = ComponentProps<\"div\"> & {\r\n /**\r\n * 滚动的方向\r\n * @default \"vertical\"\r\n */\r\n direction?: \"vertical\" | \"horizontal\"\r\n /** 渲染 children 的容器的类名 */\r\n containerClassName?: string\r\n /** 渲染 children 的容器的样式 */\r\n containerStyle?: CSSProperties\r\n /**\r\n * 两个 children 容器之间的间距\r\n * @default 0\r\n */\r\n gap?: number\r\n /** 一个周期的时间，单位：毫秒 */\r\n duration: number\r\n /** 是否将 gap 的距离也加入 overflow 的计算 */\r\n withGap?: boolean\r\n /** 尺寸刚好相同时，是否视为溢出 */\r\n withEqual?: boolean\r\n}\r\n\r\n/**\r\n * 无限滚动的组件\r\n * 子元素会内置的容器中被渲染两次，首尾相连，形成无限滚动的效果\r\n * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画\r\n */\r\nexport const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {\r\n const { className, direction = \"vertical\", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, ...rest } = props\r\n\r\n const wrapper = useRef<HTMLDivElement>(null)\r\n const wrapperSize = useSize(wrapper)\r\n\r\n const ele = useRef<HTMLDivElement>(null)\r\n\r\n useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])\r\n\r\n const container = useRef<HTMLDivElement>(null)\r\n const containerSize = useSize(container)\r\n\r\n function bigger(containerSize: number, wrapperSize: number) {\r\n return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize\r\n }\r\n\r\n const overflow = wrapperSize && containerSize ? (direction === \"vertical\" ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width)) : false\r\n\r\n useEffect(() => {\r\n if (!wrapperSize || !containerSize || !overflow) return\r\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAoB;AACpB,oBAAwB;AACxB,2BAAqB;AACrB,
|
|
4
|
+
"sourcesContent": ["import { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { ComponentProps, CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport type InfiniteScrollProps = ComponentProps<\"div\"> & {\r\n /**\r\n * 滚动的方向\r\n * @default \"vertical\"\r\n */\r\n direction?: \"vertical\" | \"horizontal\"\r\n /** 渲染 children 的容器的类名 */\r\n containerClassName?: string\r\n /** 渲染 children 的容器的样式 */\r\n containerStyle?: CSSProperties\r\n /**\r\n * 两个 children 容器之间的间距\r\n * @default 0\r\n */\r\n gap?: number\r\n /** 一个周期的时间，单位：毫秒 */\r\n duration: number\r\n /** 是否将 gap 的距离也加入 overflow 的计算 */\r\n withGap?: boolean\r\n /** 尺寸刚好相同时，是否视为溢出 */\r\n withEqual?: boolean\r\n /** 鼠标移入时，是否停止动画 */\r\n pauseOnHover?: boolean\r\n}\r\n\r\n/**\r\n * 无限滚动的组件\r\n * 子元素会内置的容器中被渲染两次，首尾相连，形成无限滚动的效果\r\n * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画\r\n */\r\nexport const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {\r\n const { className, direction = \"vertical\", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, pauseOnHover, onMouseEnter, onMouseLeave, ...rest } = props\r\n\r\n const wrapper = useRef<HTMLDivElement>(null)\r\n const wrapperSize = useSize(wrapper)\r\n\r\n const ele = useRef<HTMLDivElement>(null)\r\n\r\n useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])\r\n\r\n const container = useRef<HTMLDivElement>(null)\r\n const containerSize = useSize(container)\r\n\r\n function bigger(containerSize: number, wrapperSize: number) {\r\n return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize\r\n }\r\n\r\n const overflow = wrapperSize && containerSize ? (direction === \"vertical\" ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width)) : false\r\n\r\n const animation = useRef<Animation | undefined>(undefined)\r\n\r\n useEffect(() => {\r\n if (!wrapperSize || !containerSize || !overflow) return\r\n animation.current = ele.current?.animate(\r\n {\r\n transform: direction === \"vertical\" ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`] : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`]\r\n },\r\n { duration, iterations: Infinity }\r\n )\r\n return () => animation.current?.cancel()\r\n }, [wrapperSize, containerSize, overflow, direction, duration])\r\n\r\n function enter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n if (pauseOnHover) animation.current?.pause()\r\n onMouseEnter?.(e)\r\n }\r\n\r\n function leave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n if (pauseOnHover) animation.current?.play()\r\n onMouseLeave?.(e)\r\n }\r\n\r\n useEffect(() => {\r\n if (!pauseOnHover) animation.current?.play()\r\n }, [animation.current, pauseOnHover])\r\n\r\n return (\r\n <div\r\n ref={wrapper}\r\n className={clsx(\r\n css`\r\n position: relative;\r\n overflow: hidden;\r\n `,\r\n className\r\n )}\r\n onMouseEnter={enter}\r\n onMouseLeave={leave}\r\n {...rest}>\r\n <div\r\n ref={ele}\r\n style={{\r\n position: \"absolute\",\r\n width: direction === \"vertical\" ? \"100%\" : containerSize && (overflow ? containerSize.width * 2 + gap : containerSize.width),\r\n height: direction === \"horizontal\" ? \"100%\" : containerSize && (overflow ? containerSize.height * 2 + gap : containerSize.width)\r\n }}>\r\n <div\r\n ref={container}\r\n className={clsx(\r\n css`\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\r\n `,\r\n containerClassName\r\n )}\r\n style={containerStyle}>\r\n {children}\r\n </div>\r\n {overflow && (\r\n <div\r\n ref={container}\r\n className={clsx(\r\n css`\r\n position: absolute;\r\n right: 0;\r\n bottom: 0;\r\n ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\r\n `,\r\n containerClassName\r\n )}\r\n style={containerStyle}>\r\n {children}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n )\r\n})\r\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["containerSize", "wrapperSize"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfiniteScroll.d.ts","sourceRoot":"","sources":["InfiniteScroll.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"InfiniteScroll.d.ts","sourceRoot":"","sources":["InfiniteScroll.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAqF,MAAM,OAAO,CAAA;AAExI,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACtD;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACrC,yBAAyB;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,yBAAyB;IACzB,cAAc,CAAC,EAAE,aAAa,CAAA;IAC9B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,oBAAoB;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qBAAqB;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,mBAAmB;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,6HAmGzB,CAAA"}
|
|
@@ -20,6 +20,9 @@ export const InfiniteScroll = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
20
20
|
duration,
|
|
21
21
|
withGap,
|
|
22
22
|
withEqual,
|
|
23
|
+
pauseOnHover,
|
|
24
|
+
onMouseEnter,
|
|
25
|
+
onMouseLeave,
|
|
23
26
|
...rest
|
|
24
27
|
} = props;
|
|
25
28
|
const wrapper = useRef(null);
|
|
@@ -32,22 +35,36 @@ export const InfiniteScroll = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
32
35
|
return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize;
|
|
33
36
|
}
|
|
34
37
|
const overflow = wrapperSize && containerSize ? direction === "vertical" ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width) : false;
|
|
38
|
+
const animation = useRef(undefined);
|
|
35
39
|
useEffect(() => {
|
|
36
40
|
if (!wrapperSize || !containerSize || !overflow) return;
|
|
37
|
-
|
|
41
|
+
animation.current = ele.current?.animate({
|
|
38
42
|
transform: direction === "vertical" ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`] : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`]
|
|
39
43
|
}, {
|
|
40
44
|
duration,
|
|
41
45
|
iterations: Infinity
|
|
42
46
|
});
|
|
43
|
-
return () => animation?.cancel();
|
|
47
|
+
return () => animation.current?.cancel();
|
|
44
48
|
}, [wrapperSize, containerSize, overflow, direction, duration]);
|
|
49
|
+
function enter(e) {
|
|
50
|
+
if (pauseOnHover) animation.current?.pause();
|
|
51
|
+
onMouseEnter?.(e);
|
|
52
|
+
}
|
|
53
|
+
function leave(e) {
|
|
54
|
+
if (pauseOnHover) animation.current?.play();
|
|
55
|
+
onMouseLeave?.(e);
|
|
56
|
+
}
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
if (!pauseOnHover) animation.current?.play();
|
|
59
|
+
}, [animation.current, pauseOnHover]);
|
|
45
60
|
return /*#__PURE__*/_jsx("div", {
|
|
46
61
|
ref: wrapper,
|
|
47
62
|
className: clsx(css`
|
|
48
63
|
position: relative;
|
|
49
64
|
overflow: hidden;
|
|
50
65
|
`, className),
|
|
66
|
+
onMouseEnter: enter,
|
|
67
|
+
onMouseLeave: leave,
|
|
51
68
|
...rest,
|
|
52
69
|
children: /*#__PURE__*/_jsxs("div", {
|
|
53
70
|
ref: ele,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["css","useSize","clsx","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","jsxs","_jsxs","InfiniteScroll","props","ref","className","direction","children","containerClassName","containerStyle","gap","duration","withGap","withEqual","rest","wrapper","wrapperSize","ele","current","container","containerSize","bigger","overflow","height","width","animation","animate","transform","iterations","Infinity","cancel","style","position"],"sources":["../../../src/components/InfiniteScroll.tsx"],"sourcesContent":["import { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { ComponentProps, CSSProperties, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport type InfiniteScrollProps = ComponentProps<\"div\"> & {\r\n /**\r\n * 滚动的方向\r\n * @default \"vertical\"\r\n */\r\n direction?: \"vertical\" | \"horizontal\"\r\n /** 渲染 children 的容器的类名 */\r\n containerClassName?: string\r\n /** 渲染 children 的容器的样式 */\r\n containerStyle?: CSSProperties\r\n /**\r\n * 两个 children 容器之间的间距\r\n * @default 0\r\n */\r\n gap?: number\r\n /** 一个周期的时间，单位：毫秒 */\r\n duration: number\r\n /** 是否将 gap 的距离也加入 overflow 的计算 */\r\n withGap?: boolean\r\n /** 尺寸刚好相同时，是否视为溢出 */\r\n withEqual?: boolean\r\n}\r\n\r\n/**\r\n * 无限滚动的组件\r\n * 子元素会内置的容器中被渲染两次，首尾相连，形成无限滚动的效果\r\n * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画\r\n */\r\nexport const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {\r\n const { className, direction = \"vertical\", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, ...rest } = props\r\n\r\n const wrapper = useRef<HTMLDivElement>(null)\r\n const wrapperSize = useSize(wrapper)\r\n\r\n const ele = useRef<HTMLDivElement>(null)\r\n\r\n useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])\r\n\r\n const container = useRef<HTMLDivElement>(null)\r\n const containerSize = useSize(container)\r\n\r\n function bigger(containerSize: number, wrapperSize: number) {\r\n return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize\r\n }\r\n\r\n const overflow = wrapperSize && containerSize ? (direction === \"vertical\" ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width)) : false\r\n\r\n useEffect(() => {\r\n if (!wrapperSize || !containerSize || !overflow) return\r\n
|
|
1
|
+
{"version":3,"names":["css","useSize","clsx","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","jsxs","_jsxs","InfiniteScroll","props","ref","className","direction","children","containerClassName","containerStyle","gap","duration","withGap","withEqual","pauseOnHover","onMouseEnter","onMouseLeave","rest","wrapper","wrapperSize","ele","current","container","containerSize","bigger","overflow","height","width","animation","undefined","animate","transform","iterations","Infinity","cancel","enter","e","pause","leave","play","style","position"],"sources":["../../../src/components/InfiniteScroll.tsx"],"sourcesContent":["import { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { ComponentProps, CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport type InfiniteScrollProps = ComponentProps<\"div\"> & {\r\n /**\r\n * 滚动的方向\r\n * @default \"vertical\"\r\n */\r\n direction?: \"vertical\" | \"horizontal\"\r\n /** 渲染 children 的容器的类名 */\r\n containerClassName?: string\r\n /** 渲染 children 的容器的样式 */\r\n containerStyle?: CSSProperties\r\n /**\r\n * 两个 children 容器之间的间距\r\n * @default 0\r\n */\r\n gap?: number\r\n /** 一个周期的时间，单位：毫秒 */\r\n duration: number\r\n /** 是否将 gap 的距离也加入 overflow 的计算 */\r\n withGap?: boolean\r\n /** 尺寸刚好相同时，是否视为溢出 */\r\n withEqual?: boolean\r\n /** 鼠标移入时，是否停止动画 */\r\n pauseOnHover?: boolean\r\n}\r\n\r\n/**\r\n * 无限滚动的组件\r\n * 子元素会内置的容器中被渲染两次，首尾相连，形成无限滚动的效果\r\n * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画\r\n */\r\nexport const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {\r\n const { className, direction = \"vertical\", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, pauseOnHover, onMouseEnter, onMouseLeave, ...rest } = props\r\n\r\n const wrapper = useRef<HTMLDivElement>(null)\r\n const wrapperSize = useSize(wrapper)\r\n\r\n const ele = useRef<HTMLDivElement>(null)\r\n\r\n useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])\r\n\r\n const container = useRef<HTMLDivElement>(null)\r\n const containerSize = useSize(container)\r\n\r\n function bigger(containerSize: number, wrapperSize: number) {\r\n return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize\r\n }\r\n\r\n const overflow = wrapperSize && containerSize ? (direction === \"vertical\" ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width)) : false\r\n\r\n const animation = useRef<Animation | undefined>(undefined)\r\n\r\n useEffect(() => {\r\n if (!wrapperSize || !containerSize || !overflow) return\r\n animation.current = ele.current?.animate(\r\n {\r\n transform: direction === \"vertical\" ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`] : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`]\r\n },\r\n { duration, iterations: Infinity }\r\n )\r\n return () => animation.current?.cancel()\r\n }, [wrapperSize, containerSize, overflow, direction, duration])\r\n\r\n function enter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n if (pauseOnHover) animation.current?.pause()\r\n onMouseEnter?.(e)\r\n }\r\n\r\n function leave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n if (pauseOnHover) animation.current?.play()\r\n onMouseLeave?.(e)\r\n }\r\n\r\n useEffect(() => {\r\n if (!pauseOnHover) animation.current?.play()\r\n }, [animation.current, pauseOnHover])\r\n\r\n return (\r\n <div\r\n ref={wrapper}\r\n className={clsx(\r\n css`\r\n position: relative;\r\n overflow: hidden;\r\n `,\r\n className\r\n )}\r\n onMouseEnter={enter}\r\n onMouseLeave={leave}\r\n {...rest}>\r\n <div\r\n ref={ele}\r\n style={{\r\n position: \"absolute\",\r\n width: direction === \"vertical\" ? \"100%\" : containerSize && (overflow ? containerSize.width * 2 + gap : containerSize.width),\r\n height: direction === \"horizontal\" ? \"100%\" : containerSize && (overflow ? containerSize.height * 2 + gap : containerSize.width)\r\n }}>\r\n <div\r\n ref={container}\r\n className={clsx(\r\n css`\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\r\n `,\r\n containerClassName\r\n )}\r\n style={containerStyle}>\r\n {children}\r\n </div>\r\n {overflow && (\r\n <div\r\n ref={container}\r\n className={clsx(\r\n css`\r\n position: absolute;\r\n right: 0;\r\n bottom: 0;\r\n ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\r\n `,\r\n containerClassName\r\n )}\r\n style={containerStyle}>\r\n {children}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n )\r\n})\r\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css } from "@emotion/css"
|
|
2
2
|
import { useSize } from "ahooks"
|
|
3
3
|
import { clsx } from "deepsea-tools"
|
|
4
|
-
import { ComponentProps, CSSProperties, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
|
|
4
|
+
import { ComponentProps, CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from "react"
|
|
5
5
|
|
|
6
6
|
export type InfiniteScrollProps = ComponentProps<"div"> & {
|
|
7
7
|
/**
|
|
@@ -24,6 +24,8 @@ export type InfiniteScrollProps = ComponentProps<"div"> & {
|
|
|
24
24
|
withGap?: boolean
|
|
25
25
|
/** 尺寸刚好相同时，是否视为溢出 */
|
|
26
26
|
withEqual?: boolean
|
|
27
|
+
/** 鼠标移入时，是否停止动画 */
|
|
28
|
+
pauseOnHover?: boolean
|
|
27
29
|
}
|
|
28
30
|
|
|
29
31
|
/**
|
|
@@ -32,7 +34,7 @@ export type InfiniteScrollProps = ComponentProps<"div"> & {
|
|
|
32
34
|
* 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画
|
|
33
35
|
*/
|
|
34
36
|
export const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {
|
|
35
|
-
const { className, direction = "vertical", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, ...rest } = props
|
|
37
|
+
const { className, direction = "vertical", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, pauseOnHover, onMouseEnter, onMouseLeave, ...rest } = props
|
|
36
38
|
|
|
37
39
|
const wrapper = useRef<HTMLDivElement>(null)
|
|
38
40
|
const wrapperSize = useSize(wrapper)
|
|
@@ -50,17 +52,33 @@ export const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((p
|
|
|
50
52
|
|
|
51
53
|
const overflow = wrapperSize && containerSize ? (direction === "vertical" ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width)) : false
|
|
52
54
|
|
|
55
|
+
const animation = useRef<Animation | undefined>(undefined)
|
|
56
|
+
|
|
53
57
|
useEffect(() => {
|
|
54
58
|
if (!wrapperSize || !containerSize || !overflow) return
|
|
55
|
-
|
|
59
|
+
animation.current = ele.current?.animate(
|
|
56
60
|
{
|
|
57
61
|
transform: direction === "vertical" ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`] : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`]
|
|
58
62
|
},
|
|
59
63
|
{ duration, iterations: Infinity }
|
|
60
64
|
)
|
|
61
|
-
return () => animation?.cancel()
|
|
65
|
+
return () => animation.current?.cancel()
|
|
62
66
|
}, [wrapperSize, containerSize, overflow, direction, duration])
|
|
63
67
|
|
|
68
|
+
function enter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
|
|
69
|
+
if (pauseOnHover) animation.current?.pause()
|
|
70
|
+
onMouseEnter?.(e)
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
function leave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {
|
|
74
|
+
if (pauseOnHover) animation.current?.play()
|
|
75
|
+
onMouseLeave?.(e)
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
useEffect(() => {
|
|
79
|
+
if (!pauseOnHover) animation.current?.play()
|
|
80
|
+
}, [animation.current, pauseOnHover])
|
|
81
|
+
|
|
64
82
|
return (
|
|
65
83
|
<div
|
|
66
84
|
ref={wrapper}
|
|
@@ -71,6 +89,8 @@ export const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((p
|
|
|
71
89
|
`,
|
|
72
90
|
className
|
|
73
91
|
)}
|
|
92
|
+
onMouseEnter={enter}
|
|
93
|
+
onMouseLeave={leave}
|
|
74
94
|
{...rest}>
|
|
75
95
|
<div
|
|
76
96
|
ref={ele}
|