@xiping/react-components 0.0.66 → 0.0.67

package/dist/es/components/txt-reader/TxtReader.d.ts

@@ -9,6 +9,10 @@ interface TxtReaderProps {
     onProgressChange?: (progress: number) => void;
     initialScrollPosition?: number;
     cacheKey?: string;
+    showTopProgress?: boolean;
+    topProgressClassName?: string;
+    showBottomProgress?: boolean;
+    bottomProgressClassName?: string;
 }
 export declare const TxtReader: FC<TxtReaderProps>;
 export default TxtReader;

package/dist/es/components/txt-reader/TxtReader.js

@@ -1,68 +1,80 @@
-import { jsxs as a, jsx as H } from "react/jsx-runtime";
-import { useRef as I, useState as L, useCallback as u, useEffect as d } from "react";
-import { debounce as N } from "lodash-es";
-import R from "clsx";
-const _ = 16, F = 1.5, S = "normal", U = ({
+import { jsxs as s, Fragment as F, jsx as e } from "react/jsx-runtime";
+import { useRef as a } from "react";
+import r from "clsx";
+import { useScroll as _, useTransform as v, useMotionTemplate as y, motion as n } from "motion/react";
+const g = 16, I = 1.5, L = "normal", j = ({
   content: f,
-  lineHeight: p = F,
-  fontSize: m = _,
-  fontWeight: x = S,
-  className: T = "",
-  style: E = {},
-  onProgressChange: s,
-  initialScrollPosition: c,
-  cacheKey: e
+  lineHeight: m = I,
+  fontSize: d = g,
+  fontWeight: p = L,
+  className: u = "",
+  style: x = {},
+  onProgressChange: t,
+  initialScrollPosition: R,
+  cacheKey: S,
+  showTopProgress: T = !0,
+  topProgressClassName: b,
+  showBottomProgress: h = !0,
+  bottomProgressClassName: N
 }) => {
-  const r = I(null), [b, v] = L(0), l = u(() => {
-    if (!r.current) return;
-    const t = r.current, o = t.scrollTop, g = t.scrollHeight, w = t.clientHeight, i = Math.min(
-      Math.round(o / (g - w) * 100),
-      100
-    );
-    v(i), s == null || s(i), e && localStorage.setItem(`txtReader-${e}`, o.toString());
-  }, [e, s]), n = u(
-    N(l, 100),
-    [l]
-  );
-  return d(() => {
-    if (!r.current) return;
-    let t = c;
-    if (e) {
-      const o = localStorage.getItem(`txtReader-${e}`);
-      o && (t = parseInt(o, 10));
-    }
-    t && (r.current.scrollTop = t, l());
-  }, [e, c, l]), d(() => {
-    const t = r.current;
-    if (t)
-      return t.addEventListener("scroll", n), () => {
-        t.removeEventListener("scroll", n);
-      };
-  }, [n]), /* @__PURE__ */ a("div", { className: "relative w-full h-full", children: [
-    /* @__PURE__ */ H(
-      "div",
+  const l = a(null), o = a(null), { scrollYProgress: i } = _({
+    container: l,
+    target: o
+  }), c = v(() => (i.get() * 100).toFixed(2)), w = y`${c}%`;
+  return c.on("change", (E) => {
+    t == null || t(Number(E));
+  }), /* @__PURE__ */ s(F, { children: [
+    T && /* @__PURE__ */ e(
+      n.div,
       {
-        ref: r,
-        className: R(
-          "w-full overflow-auto whitespace-pre-wrap break-words",
-          T
+        id: "scroll-indicator",
+        className: r(
+          "fixed left-0 top-0 right-0 bg-[#ff0088] h-2.5",
+          b
         ),
         style: {
-          fontSize: `${m}px`,
-          lineHeight: p,
-          fontWeight: x,
-          ...E
-        },
-        children: f
+          scaleX: i,
+          originX: 0
+        }
       }
     ),
-    /* @__PURE__ */ a("div", { className: "fixed text-white rounded text-sm bg-black bg-opacity-70 pl-2 pr-2 pb-1 pt-1 right-5 bottom-5", children: [
-      b,
-      "%"
-    ] })
+    /* @__PURE__ */ s(
+      "div",
+      {
+        className: "relative w-full h-full overflow-y-auto",
+        ref: l,
+        children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              ref: o,
+              className: r("w-full  whitespace-pre-wrap break-words", u),
+              style: {
+                fontSize: `${d}px`,
+                lineHeight: m,
+                fontWeight: p,
+                ...x
+              },
+              children: f
+            }
+          ),
+          h && /* @__PURE__ */ e(
+            n.div,
+            {
+              id: "scroll-present",
+              className: r(
+                "fixed text-white rounded text-sm bg-black bg-opacity-70 pl-2 pr-2 pb-1 pt-1 right-5 bottom-5",
+                N
+              ),
+              children: w
+            }
+          )
+        ]
+      }
+    )
   ] });
 };
 export {
-  U as TxtReader,
-  U as default
+  j as TxtReader,
+  j as default
 };