@easyv/biz-components 0.0.7 → 0.0.8

package/dist/components/ScrollController/ScrollController.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+interface ScrollControllerProps {
+    children: ReactNode;
+    containerHeight?: string;
+    scrollBuffer?: number;
+    scrollBehavior?: 'auto' | 'smooth';
+    className?: string;
+}
+export declare function ScrollController(props: ScrollControllerProps): JSX.Element;
+export {};

package/dist/components/ScrollController/ScrollController.es.js

@@ -0,0 +1,42 @@
+import { j as v } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
+import { useState as E, useRef as l, useCallback as s, useEffect as S } from "react";
+function R(d) {
+  const {
+    children: i,
+    containerHeight: p = "100%",
+    scrollBuffer: u = 50,
+    scrollBehavior: o = "smooth",
+    className: g
+  } = d, [a, f] = E(!0), r = l(null), t = l(!1), n = l(), h = s(() => {
+    if (!r.current) return !1;
+    const { scrollHeight: e, scrollTop: T, clientHeight: j } = r.current;
+    return e - T - j < u;
+  }, [u]), m = s(() => {
+    a && r.current && r.current.scrollTo({
+      top: r.current.scrollHeight,
+      behavior: o
+    });
+  }, [a, o]), c = s(() => {
+    r.current && (n.current && clearTimeout(n.current), t.current || (t.current = !0), n.current = setTimeout(() => {
+      t.current = !1;
+    }, 100), h() ? f(!0) : f(!1));
+  }, [h]);
+  S(() => {
+    const e = r.current;
+    if (e)
+      return e.addEventListener("scroll", c), () => e.removeEventListener("scroll", c);
+  }, [c]), S(() => {
+    t.current || m();
+  }, [i, m]);
+  const x = {
+    height: p,
+    overflowY: "auto",
+    scrollBehavior: o,
+    position: "relative"
+  };
+  return /* @__PURE__ */ v.jsx("div", { ref: r, style: x, className: g, children: /* @__PURE__ */ v.jsx("div", { children: i }) });
+}
+export {
+  R as ScrollController
+};
+//# sourceMappingURL=ScrollController.es.js.map

package/dist/components/ScrollController/ScrollController.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollController.es.js","sources":["../../../src/components/ScrollController/ScrollController.tsx"],"sourcesContent":["import React, { CSSProperties, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\ninterface ScrollControllerProps {\n  children: ReactNode;\n  containerHeight?: string;\n  scrollBuffer?: number;\n  scrollBehavior?: 'auto' | 'smooth';\n  className?: string;\n}\n\nexport function ScrollController(props: ScrollControllerProps) {\n  const {\n    children,\n    containerHeight = '100%',\n    scrollBuffer = 50,\n    scrollBehavior = 'smooth',\n    className,\n  } = props;\n  const [isAutoScroll, setIsAutoScroll] = useState(true);\n  const containerRef = useRef<HTMLDivElement>(null);\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  }, [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  }, [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  }, [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  }, [handleScroll]);\n\n  // 内容变化时自动滚动\n  useEffect(() => {\n    if (!isUserScrolling.current) {\n      autoScroll();\n    }\n  }, [children, autoScroll]);\n\n  // 容器样式\n  const containerStyle: CSSProperties = {\n    height: containerHeight,\n    overflowY: 'auto',\n    scrollBehavior: scrollBehavior,\n    position: 'relative',\n  };\n\n  return (\n    <div ref={containerRef} style={containerStyle} className={className}>\n      <div>{children}</div>\n    </div>\n  );\n}\n"],"names":["ScrollController","props","children","containerHeight","scrollBuffer","scrollBehavior","className","isAutoScroll","setIsAutoScroll","useState","containerRef","useRef","isUserScrolling","scrollTimeout","isNearBottom","useCallback","scrollHeight","scrollTop","clientHeight","autoScroll","handleScroll","useEffect","container","containerStyle","jsx"],"mappings":";;AAUO,SAASA,EAAiBC,GAA8B;AACvD,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,cAAAC,IAAe;AAAA,IACf,gBAAAC,IAAiB;AAAA,IACjB,WAAAC;AAAA,EAAA,IACEL,GACE,CAACM,GAAcC,CAAe,IAAIC,EAAS,EAAI,GAC/CC,IAAeC,EAAuB,IAAI,GAC1CC,IAAkBD,EAAO,EAAK,GAC9BE,IAAgBF,EAAuB,GAGvCG,IAAeC,EAAY,MAAM;AACjC,QAAA,CAACL,EAAa,QAAgB,QAAA;AAClC,UAAM,EAAE,cAAAM,GAAc,WAAAC,GAAW,cAAAC,MAAiBR,EAAa;AACxD,WAAAM,IAAeC,IAAYC,IAAed;AAAA,EAAA,GAChD,CAACA,CAAY,CAAC,GAGXe,IAAaJ,EAAY,MAAM;AAC/B,IAAAR,KAAgBG,EAAa,WAC/BA,EAAa,QAAQ,SAAS;AAAA,MAC5B,KAAKA,EAAa,QAAQ;AAAA,MAC1B,UAAUL;AAAA,IAAA,CACX;AAAA,EACH,GACC,CAACE,GAAcF,CAAc,CAAC,GAG3Be,IAAeL,EAAY,MAAM;AACjC,IAACL,EAAa,YAGdG,EAAc,WAAsB,aAAAA,EAAc,OAAO,GAGxDD,EAAgB,YACnBA,EAAgB,UAAU,KAIdC,EAAA,UAAU,WAAW,MAAM;AACvC,MAAAD,EAAgB,UAAU;AAAA,OACzB,GAAG,GAGFE,MACFN,EAAgB,EAAI,IAEpBA,EAAgB,EAAK;AAAA,EACvB,GACC,CAACM,CAAY,CAAC;AAGjB,EAAAO,EAAU,MAAM;AACd,UAAMC,IAAYZ,EAAa;AAC/B,QAAKY;AAEK,aAAAA,EAAA,iBAAiB,UAAUF,CAAY,GAC1C,MAAME,EAAU,oBAAoB,UAAUF,CAAY;AAAA,EAAA,GAChE,CAACA,CAAY,CAAC,GAGjBC,EAAU,MAAM;AACV,IAACT,EAAgB,WACRO,EAAA;AAAA,EACb,GACC,CAACjB,GAAUiB,CAAU,CAAC;AAGzB,QAAMI,IAAgC;AAAA,IACpC,QAAQpB;AAAA,IACR,WAAW;AAAA,IACX,gBAAAE;AAAA,IACA,UAAU;AAAA,EACZ;AAGE,SAAAmB,gBAAAA,EAAA,IAAC,OAAI,EAAA,KAAKd,GAAc,OAAOa,GAAgB,WAAAjB,GAC7C,UAAAkB,gBAAAA,EAAAA,IAAC,OAAK,EAAA,UAAAtB,EAAA,CAAS,EACjB,CAAA;AAEJ;"}

package/dist/components/ScrollController/index.d.ts

@@ -0,0 +1 @@
+export { ScrollController } from './ScrollController';

package/dist/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './AiMessageRender';
 export * from './ShadowDom';
+export * from './ScrollController';

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useDivAutoScroll';

package/dist/hooks/useDivAutoScroll.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+interface ScrollControllerProps {
+    scrollBuffer?: number;
+    scrollBehavior?: 'auto' | 'smooth';
+    containerRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare function useDivAutoScroll(params: ScrollControllerProps): () => void;
+export {};

package/dist/hooks/useDivAutoScroll.es.js

@@ -0,0 +1,28 @@
+import { useState as v, useRef as S, useCallback as o, useEffect as A } from "react";
+function d(g) {
+  const { scrollBuffer: n = 50, scrollBehavior: s = "smooth", containerRef: r } = g, [u, i] = v(!0), e = S(!1), c = S(), f = o(() => {
+    if (!r.current) return !1;
+    const { scrollHeight: t, scrollTop: m, clientHeight: h } = r.current;
+    return t - m - h < n;
+  }, [r, n]), a = o(() => {
+    u && r.current && r.current.scrollTo({
+      top: r.current.scrollHeight,
+      behavior: s
+    });
+  }, [r, u, s]), l = o(() => {
+    r.current && (c.current && clearTimeout(c.current), e.current || (e.current = !0), c.current = setTimeout(() => {
+      e.current = !1;
+    }, 100), f() ? i(!0) : i(!1));
+  }, [r, f]);
+  return A(() => {
+    const t = r.current;
+    if (t)
+      return t.addEventListener("scroll", l), () => t.removeEventListener("scroll", l);
+  }, [r, l]), o(() => {
+    e.current || a();
+  }, [a, e]);
+}
+export {
+  d as useDivAutoScroll
+};
+//# sourceMappingURL=useDivAutoScroll.es.js.map

package/dist/hooks/useDivAutoScroll.es.js.map

@@ -0,0 +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":["useDivAutoScroll","params","scrollBuffer","scrollBehavior","containerRef","isAutoScroll","setIsAutoScroll","useState","isUserScrolling","useRef","scrollTimeout","isNearBottom","useCallback","scrollHeight","scrollTop","clientHeight","autoScroll","handleScroll","useEffect","container"],"mappings":";AAQO,SAASA,EAAiBC,GAA+B;AAC9D,QAAM,EAAE,cAAAC,IAAe,IAAI,gBAAAC,IAAiB,UAAU,cAAAC,MAAiBH,GACjE,CAACI,GAAcC,CAAe,IAAIC,EAAS,EAAI,GAC/CC,IAAkBC,EAAO,EAAK,GAC9BC,IAAgBD,EAAuB,GAGvCE,IAAeC,EAAY,MAAM;AACjC,QAAA,CAACR,EAAa,QAAgB,QAAA;AAClC,UAAM,EAAE,cAAAS,GAAc,WAAAC,GAAW,cAAAC,MAAiBX,EAAa;AACxD,WAAAS,IAAeC,IAAYC,IAAeb;AAAA,EAAA,GAChD,CAACE,GAAcF,CAAY,CAAC,GAGzBc,IAAaJ,EAAY,MAAM;AAC/B,IAAAP,KAAgBD,EAAa,WAC/BA,EAAa,QAAQ,SAAS;AAAA,MAC5B,KAAKA,EAAa,QAAQ;AAAA,MAC1B,UAAUD;AAAA,IAAA,CACX;AAAA,EAEF,GAAA,CAACC,GAAcC,GAAcF,CAAc,CAAC,GAGzCc,IAAeL,EAAY,MAAM;AACjC,IAACR,EAAa,YAGdM,EAAc,WAAsB,aAAAA,EAAc,OAAO,GAGxDF,EAAgB,YACnBA,EAAgB,UAAU,KAIdE,EAAA,UAAU,WAAW,MAAM;AACvC,MAAAF,EAAgB,UAAU;AAAA,OACzB,GAAG,GAGFG,MACFL,EAAgB,EAAI,IAEpBA,EAAgB,EAAK;AAAA,EACvB,GACC,CAACF,GAAcO,CAAY,CAAC;AAG/B,SAAAO,EAAU,MAAM;AACd,UAAMC,IAAYf,EAAa;AAC/B,QAAKe;AAEK,aAAAA,EAAA,iBAAiB,UAAUF,CAAY,GAC1C,MAAME,EAAU,oBAAoB,UAAUF,CAAY;AAAA,EAAA,GAChE,CAACb,GAAca,CAAY,CAAC,GAGLL,EAAY,MAAM;AACtC,IAACJ,EAAgB,WACRQ,EAAA;AAAA,EACb,GACC,CAACA,GAAYR,CAAe,CAAC;AAGlC;"}

package/dist/index.d.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './hooks';

package/dist/index.es.js

@@ -1,7 +1,11 @@
-import { AiMessageRender as r } from "./components/AiMessageRender/AiMessageRender.es.js";
-import { ShadowDom as a } from "./components/ShadowDom/ShadowDom.es.js";
+import { AiMessageRender as e } from "./components/AiMessageRender/AiMessageRender.es.js";
+import { ShadowDom as t } from "./components/ShadowDom/ShadowDom.es.js";
+import { ScrollController as f } from "./components/ScrollController/ScrollController.es.js";
+import { useDivAutoScroll as x } from "./hooks/useDivAutoScroll.es.js";
 export {
-  r as AiMessageRender,
-  a as ShadowDom
+  e as AiMessageRender,
+  f as ScrollController,
+  t as ShadowDom,
+  x as useDivAutoScroll
 };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/biz-components",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",