@xiping/react-components 0.0.66 → 0.0.68

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,83 @@
-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 = ({
-  content: f,
-  lineHeight: p = F,
-  fontSize: m = _,
-  fontWeight: x = S,
-  className: T = "",
-  style: E = {},
-  onProgressChange: s,
-  initialScrollPosition: c,
-  cacheKey: e
+import { jsxs as E, Fragment as F, jsx as t } from "react/jsx-runtime";
+import { useRef as c } from "react";
+import e from "clsx";
+import { useScroll as _, useTransform as v, useMotionTemplate as y, motion as n } from "motion/react";
+import g from "./index.module.css.js";
+const I = 16, L = 1.5, R = "normal", k = ({
+  content: a,
+  lineHeight: f = L,
+  fontSize: m = I,
+  fontWeight: p = R,
+  className: d = "",
+  style: u = {},
+  onProgressChange: r,
+  initialScrollPosition: S,
+  cacheKey: A,
+  showTopProgress: x = !0,
+  topProgressClassName: T,
+  showBottomProgress: b = !0,
+  bottomProgressClassName: h
 }) => {
-  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 = c(null), o = c(null), { scrollYProgress: i } = _({
+    container: l,
+    target: o
+  }), s = v(() => (i.get() * 100).toFixed(2).replace(/\.0*$/, "")), N = y`${s}%`;
+  return s.on("change", (w) => {
+    r == null || r(Number(w));
+  }), /* @__PURE__ */ E(F, { children: [
+    x && /* @__PURE__ */ t(
+      n.div,
       {
-        ref: r,
-        className: R(
-          "w-full overflow-auto whitespace-pre-wrap break-words",
+        id: "scroll-indicator",
+        className: e(
+          "fixed left-0 top-0 right-0 bg-[#ff0088] h-2.5",
           T
         ),
         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__ */ t(
+      "div",
+      {
+        className: e(
+          "relative w-full h-full overflow-y-auto",
+          g.textContent
+          // "scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar scrollbar-thumb-slate-700 scrollbar-track-slate-300",
+        ),
+        ref: l,
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            ref: o,
+            className: e("w-full whitespace-pre-wrap break-words", d),
+            style: {
+              fontSize: `${m}px`,
+              lineHeight: f,
+              fontWeight: p,
+              ...u
+            },
+            children: a
+          }
+        )
+      }
+    ),
+    b && /* @__PURE__ */ t(
+      n.div,
+      {
+        id: "scroll-present",
+        className: e(
+          "fixed text-white rounded text-sm bg-black bg-opacity-70 pl-2 pr-2 pb-1 pt-1 right-5 bottom-5",
+          h
+        ),
+        children: N
+      }
+    )
   ] });
 };
 export {
-  U as TxtReader,
-  U as default
+  k as TxtReader,
+  k as default
 };

package/dist/es/components/txt-reader/index.module.css.js

@@ -0,0 +1,7 @@
+const t = "_textContent_8n59h_23", e = {
+  textContent: t
+};
+export {
+  e as default,
+  t as textContent
+};