@easyv/biz-components 0.0.33 → 0.0.35

package/dist/hooks/index.d.ts

@@ -1,4 +1,4 @@
 export * from './useDivAutoScroll';
 export * from './useXunFeiSteamVoiceManager';
 export * from './useInitialized';
-export * from './useWatchValue';
+export * from './useWatchValue/useWatchValue';

package/dist/hooks/useDivAutoScroll.d.ts

@@ -5,5 +5,13 @@ interface ScrollControllerProps {
     scrollBehavior?: 'auto' | 'smooth';
     containerRef: React.RefObject<HTMLDivElement | null>;
 }
+/**
+ * 自动滚动 hook，用法是你传入一个容器的 ref，当你调用返回函数时，那么容器内的内容变化时，会自动滚动到最底部。
+ * @param params 传入一个对象，包含以下属性：
+ * scrollBuffer：滚动缓冲距离，默认为 50px。
+ * scrollBehavior：滚动行为，默认为 'smooth'。
+ * containerRef：容器的 React ref 引用对象。
+ * @returns 一个触发自动滚动的函数
+ */
 export declare function useDivAutoScroll(params: ScrollControllerProps): () => void;
 export {};

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

@@ -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":";AAQO,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;"}
+{"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/dist/hooks/useWatchValue/useWatchValue.cy.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/{useWatchValue.d.ts → useWatchValue/useWatchValue.d.ts}

@@ -1,18 +1,17 @@
 type BaseValueType = string | number | boolean | object | Array<unknown> | null | undefined;
 interface Params<T> {
     value: T;
-    callback: (newValue: T, oldValue?: T) => void | Promise<void> | (() => void);
-    /** 清理函数，同 react 的 cleanup 函数 */
-    clearupFn?: (value: T | null) => void;
+    callback: (newValue: T, oldValue?: T | undefined) => void | Promise<void> | (() => void);
     options?: {
         equalFn?: (value1: T, value2: T) => boolean;
         immediate?: boolean;
     };
 }
-/**监听值变化，
- * 值变化时调用 callback
- * 判断值是否变化默认使用 lodash 的 isEqual
- * @param params { value: T; callback: (newValue: T, oldValue?: T) => void | Promise<void>; options?: { equalFn: (value1: T, value2: T) => boolean; immediate?: boolean; } }
+/** 监听值变化，
+ * - 值变化时调用 callback
+ * - 判断值是否变化默认使用 lodash 的 isEqual
+ * @param params { value: T; callback: (newValue: T, oldValue?: T) => void | Promise<void>; options?: { equalFn: (value1: T, value2: T) => boolean; immediate?: boolean; }}
+ * - 注意：如果你需要使用 useEffect 的 cleanUp 函数，可以考虑在 callback 中使用。或者使用 useEffect。
  */
 export declare function useWatchValue<T extends BaseValueType>(params: Params<T>): void;
 export {};

package/dist/hooks/useWatchValue/useWatchValue.es.js

@@ -0,0 +1,43 @@
+import { useRef, useEffect } from "react";
+import isEqual from "../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/isEqual.es.js";
+function useWatchValue(params) {
+  const { value, callback, options } = params;
+  const ref = useRef(void 0);
+  const initialRef = useRef(false);
+  const { equalFn = isEqual, immediate } = options || {};
+  const fnObj = useRef({
+    callback,
+    equalFn,
+    immediate
+  });
+  fnObj.current = {
+    callback,
+    equalFn,
+    immediate
+  };
+  useEffect(() => {
+    const {
+      callback: callbackInner,
+      equalFn: equalFnInner,
+      immediate: immediateInner
+    } = fnObj.current;
+    if (immediateInner && !initialRef.current) {
+      callbackInner(value);
+      ref.current = value;
+    }
+    if (initialRef.current === false) {
+      initialRef.current = true;
+    }
+    const isEqualValue = equalFnInner(value, ref.current);
+    if (ref.current === void 0) {
+      ref.current = value;
+    } else if (isEqualValue === false) {
+      callbackInner(value, ref.current);
+      ref.current = value;
+    }
+  }, [value]);
+}
+export {
+  useWatchValue
+};
+//# sourceMappingURL=useWatchValue.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useWatchValue.es.js","sources":["../../../src/hooks/useWatchValue/useWatchValue.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { isEqual } from 'lodash-es';\n\ntype BaseValueType = string | number | boolean | object | Array<unknown> | null | undefined;\n\ninterface Params<T> {\n  value: T;\n  callback: (newValue: T, oldValue?: T | undefined) => void | Promise<void> | (() => void);\n  options?: {\n    equalFn?: (value1: T, value2: T) => boolean;\n    immediate?: boolean;\n  };\n}\n\n/** 监听值变化，\n * - 值变化时调用 callback\n * - 判断值是否变化默认使用 lodash 的 isEqual\n * @param params { value: T; callback: (newValue: T, oldValue?: T) => void | Promise<void>; options?: { equalFn: (value1: T, value2: T) => boolean; immediate?: boolean; }}\n * - 注意：如果你需要使用 useEffect 的 cleanUp 函数，可以考虑在 callback 中使用。或者使用 useEffect。\n */\nexport function useWatchValue<T extends BaseValueType>(params: Params<T>) {\n  const { value, callback, options } = params;\n  const ref = useRef<T | undefined>(undefined);\n  const initialRef = useRef(false);\n\n  const { equalFn = isEqual, immediate } = options || {};\n  const fnObj = useRef({\n    callback,\n    equalFn,\n    immediate,\n  });\n  fnObj.current = {\n    callback,\n    equalFn,\n    immediate,\n  };\n\n  useEffect(() => {\n    const {\n      callback: callbackInner,\n      equalFn: equalFnInner,\n      immediate: immediateInner,\n    } = fnObj.current;\n    if (immediateInner && !initialRef.current) {\n      callbackInner(value);\n      ref.current = value;\n    }\n    if (initialRef.current === false) {\n      initialRef.current = true;\n    }\n\n    const isEqualValue = equalFnInner(value, ref.current);\n    if (ref.current === undefined) {\n      ref.current = value;\n    } else if (isEqualValue === false) {\n      callbackInner(value, ref.current);\n      ref.current = value;\n    }\n  }, [value]);\n}\n"],"names":[],"mappings":";;AAoBO,SAAS,cAAuC,QAAmB;AACxE,QAAM,EAAE,OAAO,UAAU,QAAY,IAAA;AAC/B,QAAA,MAAM,OAAsB,MAAS;AACrC,QAAA,aAAa,OAAO,KAAK;AAE/B,QAAM,EAAE,UAAU,SAAS,UAAU,IAAI,WAAW,CAAC;AACrD,QAAM,QAAQ,OAAO;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AACD,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,YAAU,MAAM;AACR,UAAA;AAAA,MACJ,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW;AAAA,QACT,MAAM;AACN,QAAA,kBAAkB,CAAC,WAAW,SAAS;AACzC,oBAAc,KAAK;AACnB,UAAI,UAAU;AAAA,IAAA;AAEZ,QAAA,WAAW,YAAY,OAAO;AAChC,iBAAW,UAAU;AAAA,IAAA;AAGvB,UAAM,eAAe,aAAa,OAAO,IAAI,OAAO;AAChD,QAAA,IAAI,YAAY,QAAW;AAC7B,UAAI,UAAU;AAAA,IAAA,WACL,iBAAiB,OAAO;AACnB,oBAAA,OAAO,IAAI,OAAO;AAChC,UAAI,UAAU;AAAA,IAAA;AAAA,EAChB,GACC,CAAC,KAAK,CAAC;AACZ;"}

package/dist/index.es.js

@@ -5,7 +5,7 @@ import { VoiceAnimation } from "./components/VoiceAnimation/VoiceAnimation.es.js
 import { useDivAutoScroll } from "./hooks/useDivAutoScroll.es.js";
 import { useXunFeiSteamVoiceManager } from "./hooks/useXunFeiSteamVoiceManager.es.js";
 import { useInitialized } from "./hooks/useInitialized.es.js";
-import { useWatchValue } from "./hooks/useWatchValue.es.js";
+import { useWatchValue } from "./hooks/useWatchValue/useWatchValue.es.js";
 import { FunASRManager, getWebSocketConnectForFunASR } from "./utils/funASR/funASRManager.es.js";
 import { XFStreamVoiceManager } from "./utils/xunFeiVoice/XFStreamVoiceManager.es.js";
 import { RecorderManager } from "./utils/xunFeiVoice/RecorderManager/RecorderManager.es.js";

package/package.json

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

package/dist/hooks/useWatchValue.es.js

@@ -1,32 +0,0 @@
-import { useRef, useEffect } from "react";
-import isEqual from "../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/isEqual.es.js";
-function useWatchValue(params) {
-  const { value, callback, clearupFn, options } = params;
-  const ref = useRef(null);
-  const initialRef = useRef(false);
-  const { equalFn = isEqual } = options || {};
-  useEffect(() => {
-    let isCallbackRun = false;
-    if ((options == null ? void 0 : options.immediate) && !initialRef.current) {
-      isCallbackRun = true;
-      callback(value, value);
-      initialRef.current = true;
-    }
-    if (ref.current === null) {
-      ref.current = value;
-    } else if (equalFn(value, ref.current) === false) {
-      isCallbackRun = true;
-      callback(value, ref.current);
-      ref.current = value;
-    }
-    return () => {
-      if (isCallbackRun && clearupFn) {
-        clearupFn(ref.current);
-      }
-    };
-  });
-}
-export {
-  useWatchValue
-};
-//# sourceMappingURL=useWatchValue.es.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useWatchValue.es.js","sources":["../../src/hooks/useWatchValue.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { isEqual } from 'lodash-es';\n\ntype BaseValueType = string | number | boolean | object | Array<unknown> | null | undefined;\n\ninterface Params<T> {\n  value: T;\n  callback: (newValue: T, oldValue?: T) => void | Promise<void> | (() => void);\n  /** 清理函数，同 react 的 cleanup 函数 */\n  clearupFn?: (value: T | null) => void;\n  options?: {\n    equalFn?: (value1: T, value2: T) => boolean;\n    immediate?: boolean;\n  };\n}\n/**监听值变化，\n * 值变化时调用 callback\n * 判断值是否变化默认使用 lodash 的 isEqual\n * @param params { value: T; callback: (newValue: T, oldValue?: T) => void | Promise<void>; options?: { equalFn: (value1: T, value2: T) => boolean; immediate?: boolean; } }\n */\nexport function useWatchValue<T extends BaseValueType>(params: Params<T>) {\n  const { value, callback, clearupFn, options } = params;\n  const ref = useRef<T | null>(null);\n  const initialRef = useRef(false);\n\n  const { equalFn = isEqual } = options || {};\n\n  useEffect(() => {\n    let isCallbackRun = false;\n    if (options?.immediate && !initialRef.current) {\n      isCallbackRun = true;\n      callback(value, value);\n      initialRef.current = true;\n    }\n\n    if (ref.current === null) {\n      ref.current = value;\n    } else if (equalFn(value, ref.current) === false) {\n      isCallbackRun = true;\n      callback(value, ref.current);\n      ref.current = value;\n    }\n    return () => {\n      if (isCallbackRun && clearupFn) {\n        clearupFn(ref.current);\n      }\n    };\n  });\n}\n"],"names":[],"mappings":";;AAoBO,SAAS,cAAuC,QAAmB;AACxE,QAAM,EAAE,OAAO,UAAU,WAAW,QAAY,IAAA;AAC1C,QAAA,MAAM,OAAiB,IAAI;AAC3B,QAAA,aAAa,OAAO,KAAK;AAE/B,QAAM,EAAE,UAAU,QAAQ,IAAI,WAAW,CAAC;AAE1C,YAAU,MAAM;AACd,QAAI,gBAAgB;AACpB,SAAI,mCAAS,cAAa,CAAC,WAAW,SAAS;AAC7B,sBAAA;AAChB,eAAS,OAAO,KAAK;AACrB,iBAAW,UAAU;AAAA,IAAA;AAGnB,QAAA,IAAI,YAAY,MAAM;AACxB,UAAI,UAAU;AAAA,IAAA,WACL,QAAQ,OAAO,IAAI,OAAO,MAAM,OAAO;AAChC,sBAAA;AACP,eAAA,OAAO,IAAI,OAAO;AAC3B,UAAI,UAAU;AAAA,IAAA;AAEhB,WAAO,MAAM;AACX,UAAI,iBAAiB,WAAW;AAC9B,kBAAU,IAAI,OAAO;AAAA,MAAA;AAAA,IAEzB;AAAA,EAAA,CACD;AACH;"}