@easyv/biz-components 0.0.33 → 0.0.34
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.
|
@@ -5,5 +5,13 @@ interface ScrollControllerProps {
|
|
|
5
5
|
scrollBehavior?: 'auto' | 'smooth';
|
|
6
6
|
containerRef: React.RefObject<HTMLDivElement | null>;
|
|
7
7
|
}
|
|
8
|
+
/**
|
|
9
|
+
* 自动滚动 hook，用法是你传入一个容器的 ref，当你调用返回函数时，那么容器内的内容变化时，会自动滚动到最底部。
|
|
10
|
+
* @param params 传入一个对象，包含以下属性：
|
|
11
|
+
* scrollBuffer：滚动缓冲距离，默认为 50px。
|
|
12
|
+
* scrollBehavior：滚动行为，默认为 'smooth'。
|
|
13
|
+
* containerRef：容器的 React ref 引用对象。
|
|
14
|
+
* @returns 一个触发自动滚动的函数
|
|
15
|
+
*/
|
|
8
16
|
export declare function useDivAutoScroll(params: ScrollControllerProps): () => void;
|
|
9
17
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDivAutoScroll.es.js","sources":["../../src/hooks/useDivAutoScroll.ts"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface ScrollControllerProps {\n scrollBuffer?: number;\n scrollBehavior?: 'auto' | 'smooth';\n containerRef: React.RefObject<HTMLDivElement | null>;\n}\n\nexport function useDivAutoScroll(params: ScrollControllerProps) {\n const { scrollBuffer = 50, scrollBehavior = 'smooth', containerRef } = params;\n const [isAutoScroll, setIsAutoScroll] = useState(true);\n const isUserScrolling = useRef(false);\n const scrollTimeout = useRef<NodeJS.Timeout>();\n\n // 检测是否接近底部\n const isNearBottom = useCallback(() => {\n if (!containerRef.current) return false;\n const { scrollHeight, scrollTop, clientHeight } = containerRef.current;\n return scrollHeight - scrollTop - clientHeight < scrollBuffer;\n }, [containerRef, scrollBuffer]);\n\n // 自动滚动逻辑\n const autoScroll = useCallback(() => {\n if (isAutoScroll && containerRef.current) {\n containerRef.current.scrollTo({\n top: containerRef.current.scrollHeight,\n behavior: scrollBehavior,\n });\n }\n }, [containerRef, isAutoScroll, scrollBehavior]);\n\n // 处理滚动事件\n const handleScroll = useCallback(() => {\n if (!containerRef.current) return;\n\n // 清除之前的定时器\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current);\n\n // 标记用户滚动行为\n if (!isUserScrolling.current) {\n isUserScrolling.current = true;\n }\n\n // 设置滚动状态重置\n scrollTimeout.current = setTimeout(() => {\n isUserScrolling.current = false;\n }, 100);\n\n // 判断是否接近底部\n if (isNearBottom()) {\n setIsAutoScroll(true);\n } else {\n setIsAutoScroll(false);\n }\n }, [containerRef, isNearBottom]);\n\n // 初始化事件监听\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n container.addEventListener('scroll', handleScroll);\n return () => container.removeEventListener('scroll', handleScroll);\n }, [containerRef, handleScroll]);\n\n // 内容变化时自动滚动\n const triggerAutoScroll = useCallback(() => {\n if (!isUserScrolling.current) {\n autoScroll();\n }\n }, [autoScroll, isUserScrolling]);\n\n return triggerAutoScroll;\n}\n"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"useDivAutoScroll.es.js","sources":["../../src/hooks/useDivAutoScroll.ts"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface ScrollControllerProps {\n scrollBuffer?: number;\n scrollBehavior?: 'auto' | 'smooth';\n containerRef: React.RefObject<HTMLDivElement | null>;\n}\n\n/**\n * 自动滚动 hook，用法是你传入一个容器的 ref，当你调用返回函数时，那么容器内的内容变化时，会自动滚动到最底部。\n * @param params 传入一个对象，包含以下属性：\n * scrollBuffer：滚动缓冲距离，默认为 50px。\n * scrollBehavior：滚动行为，默认为 'smooth'。\n * containerRef：容器的 React ref 引用对象。\n * @returns 一个触发自动滚动的函数\n */\nexport function useDivAutoScroll(params: ScrollControllerProps) {\n const { scrollBuffer = 50, scrollBehavior = 'smooth', containerRef } = params;\n const [isAutoScroll, setIsAutoScroll] = useState(true);\n const isUserScrolling = useRef(false);\n const scrollTimeout = useRef<NodeJS.Timeout>();\n\n // 检测是否接近底部\n const isNearBottom = useCallback(() => {\n if (!containerRef.current) return false;\n const { scrollHeight, scrollTop, clientHeight } = containerRef.current;\n return scrollHeight - scrollTop - clientHeight < scrollBuffer;\n }, [containerRef, scrollBuffer]);\n\n // 自动滚动逻辑\n const autoScroll = useCallback(() => {\n if (isAutoScroll && containerRef.current) {\n containerRef.current.scrollTo({\n top: containerRef.current.scrollHeight,\n behavior: scrollBehavior,\n });\n }\n }, [containerRef, isAutoScroll, scrollBehavior]);\n\n // 处理滚动事件\n const handleScroll = useCallback(() => {\n if (!containerRef.current) return;\n\n // 清除之前的定时器\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current);\n\n // 标记用户滚动行为\n if (!isUserScrolling.current) {\n isUserScrolling.current = true;\n }\n\n // 设置滚动状态重置\n scrollTimeout.current = setTimeout(() => {\n isUserScrolling.current = false;\n }, 100);\n\n // 判断是否接近底部\n if (isNearBottom()) {\n setIsAutoScroll(true);\n } else {\n setIsAutoScroll(false);\n }\n }, [containerRef, isNearBottom]);\n\n // 初始化事件监听\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n container.addEventListener('scroll', handleScroll);\n return () => container.removeEventListener('scroll', handleScroll);\n }, [containerRef, handleScroll]);\n\n // 内容变化时自动滚动\n const triggerAutoScroll = useCallback(() => {\n if (!isUserScrolling.current) {\n autoScroll();\n }\n }, [autoScroll, isUserScrolling]);\n\n return triggerAutoScroll;\n}\n"],"names":[],"mappings":";AAgBO,SAAS,iBAAiB,QAA+B;AAC9D,QAAM,EAAE,eAAe,IAAI,iBAAiB,UAAU,iBAAiB;AACvE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,IAAI;AAC/C,QAAA,kBAAkB,OAAO,KAAK;AACpC,QAAM,gBAAgB,OAAuB;AAGvC,QAAA,eAAe,YAAY,MAAM;AACjC,QAAA,CAAC,aAAa,QAAgB,QAAA;AAClC,UAAM,EAAE,cAAc,WAAW,iBAAiB,aAAa;AACxD,WAAA,eAAe,YAAY,eAAe;AAAA,EAAA,GAChD,CAAC,cAAc,YAAY,CAAC;AAGzB,QAAA,aAAa,YAAY,MAAM;AAC/B,QAAA,gBAAgB,aAAa,SAAS;AACxC,mBAAa,QAAQ,SAAS;AAAA,QAC5B,KAAK,aAAa,QAAQ;AAAA,QAC1B,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEF,GAAA,CAAC,cAAc,cAAc,cAAc,CAAC;AAGzC,QAAA,eAAe,YAAY,MAAM;AACjC,QAAA,CAAC,aAAa,QAAS;AAG3B,QAAI,cAAc,QAAsB,cAAA,cAAc,OAAO;AAGzD,QAAA,CAAC,gBAAgB,SAAS;AAC5B,sBAAgB,UAAU;AAAA,IAAA;AAId,kBAAA,UAAU,WAAW,MAAM;AACvC,sBAAgB,UAAU;AAAA,OACzB,GAAG;AAGN,QAAI,gBAAgB;AAClB,sBAAgB,IAAI;AAAA,IAAA,OACf;AACL,sBAAgB,KAAK;AAAA,IAAA;AAAA,EACvB,GACC,CAAC,cAAc,YAAY,CAAC;AAG/B,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAEN,cAAA,iBAAiB,UAAU,YAAY;AACjD,WAAO,MAAM,UAAU,oBAAoB,UAAU,YAAY;AAAA,EAAA,GAChE,CAAC,cAAc,YAAY,CAAC;AAGzB,QAAA,oBAAoB,YAAY,MAAM;AACtC,QAAA,CAAC,gBAAgB,SAAS;AACjB,iBAAA;AAAA,IAAA;AAAA,EACb,GACC,CAAC,YAAY,eAAe,CAAC;AAEzB,SAAA;AACT;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@easyv/biz-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.34",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.es.js",
|
|
6
6
|
"module": "dist/index.es.js",
|
|
@@ -9,6 +9,13 @@
|
|
|
9
9
|
"dist"
|
|
10
10
|
],
|
|
11
11
|
"sideEffects": false,
|
|
12
|
+
"scripts": {
|
|
13
|
+
"dev": "vite",
|
|
14
|
+
"build": "tsc && vite build && npm run build:style",
|
|
15
|
+
"build:style": "npx postcss src/index.css -o dist/index.css",
|
|
16
|
+
"preview": "vite preview",
|
|
17
|
+
"test:ui": "cypress open"
|
|
18
|
+
},
|
|
12
19
|
"dependencies": {
|
|
13
20
|
"classnames": "^2.5.1",
|
|
14
21
|
"co-web-worker": "^1.0.1",
|
|
@@ -38,12 +45,5 @@
|
|
|
38
45
|
"tailwindcss": "^3.0.0",
|
|
39
46
|
"vite": "^5.0.10",
|
|
40
47
|
"vite-plugin-dts": "^3.7.0"
|
|
41
|
-
},
|
|
42
|
-
"scripts": {
|
|
43
|
-
"dev": "vite",
|
|
44
|
-
"build": "tsc && vite build && npm run build:style",
|
|
45
|
-
"build:style": "npx postcss src/index.css -o dist/index.css",
|
|
46
|
-
"preview": "vite preview",
|
|
47
|
-
"test:ui": "cypress open"
|
|
48
48
|
}
|
|
49
|
-
}
|
|
49
|
+
}
|