@xiping/react-components 1.0.39 → 1.0.40

package/dist/es/components/pinch-content/PinchContent.d.ts

@@ -13,6 +13,22 @@ export interface PinchContentProps {
     wheelZoomFactor?: number;
     rubberband?: boolean;
     style?: CSSProperties;
+    /** 外部控制的缩放值（受控模式） */
+    scale?: number;
+    /** 缩放值变化时的回调 */
+    onScaleChange?: (scale: number) => void;
 }
-declare const PinchContent: (props: PinchContentProps) => import("react/jsx-runtime").JSX.Element;
+export interface PinchContentRef {
+    /** 放大 */
+    zoomIn: (factor?: number) => void;
+    /** 缩小 */
+    zoomOut: (factor?: number) => void;
+    /** 设置缩放值 */
+    setScale: (scale: number) => void;
+    /** 重置到初始状态 */
+    reset: () => void;
+    /** 获取当前缩放值 */
+    getScale: () => number;
+}
+declare const PinchContent: import('react').ForwardRefExoticComponent<PinchContentProps & import('react').RefAttributes<PinchContentRef>>;
 export default PinchContent;

package/dist/es/components/pinch-content/PinchContent.js

@@ -1,86 +1,127 @@
-import { jsx as B } from "react/jsx-runtime";
-import { useSpring as C, animated as G } from "@react-spring/web";
-import { createUseGesture as N, dragAction as U, pinchAction as W, wheelAction as j } from "@use-gesture/react";
-import { useRef as F } from "react";
-import { useMount as k, useUnmount as q } from "ahooks";
-import z from "clsx";
-const H = N([U, W, j]), a = (c) => c.preventDefault(), V = (c) => {
-  const {
-    className: f,
-    children: h,
-    pinchWithoutMove: m = !1,
-    canPinch: d = !0,
-    canDrag: x = !0,
-    canRotate: v = !0,
-    scaleBounds: l = { min: 0.3, max: 10 },
-    wheelZoomFactor: p = 1e-3,
-    rubberband: y = !0
-  } = c, e = F(null);
-  k(() => {
-    e.current?.addEventListener("gesturestart", a), e.current?.addEventListener("gesturechange", a), e.current?.addEventListener("gestureend", a);
-  }), q(() => {
-    e.current?.removeEventListener("gesturestart", a), e.current?.removeEventListener("gesturechange", a), e.current?.removeEventListener("gestureend", a);
-  });
-  const [t, g] = C(() => ({
-    x: 0,
-    y: 0,
-    scale: 1,
-    rotateZ: 0
-  }));
-  return H(
-    {
-      onWheel: ({ event: o, delta: [, r] }) => {
-        if (!d) return;
-        const n = t.scale.get() * (1 - r * p), i = Math.min(
-          Math.max(n, l.min),
-          l.max
+import { jsx as U } from "react/jsx-runtime";
+import { useSpring as W, animated as j } from "@react-spring/web";
+import { createUseGesture as F, dragAction as H, pinchAction as O, wheelAction as k } from "@use-gesture/react";
+import { forwardRef as q, useRef as J, useEffect as K, useImperativeHandle as Q } from "react";
+import { useMount as T, useUnmount as V } from "ahooks";
+import X from "clsx";
+const Y = F([H, O, k]), i = (u) => u.preventDefault(), _ = q(
+  (u, x) => {
+    const {
+      className: p,
+      children: S,
+      pinchWithoutMove: v = !1,
+      canPinch: h = !0,
+      canDrag: y = !0,
+      canRotate: M = !0,
+      scaleBounds: r = { min: 0.3, max: 10 },
+      wheelZoomFactor: E = 1e-3,
+      rubberband: w = !0,
+      scale: m,
+      onScaleChange: d
+    } = u, a = J(null);
+    T(() => {
+      a.current?.addEventListener("gesturestart", i), a.current?.addEventListener("gesturechange", i), a.current?.addEventListener("gestureend", i);
+    }), V(() => {
+      a.current?.removeEventListener("gesturestart", i), a.current?.removeEventListener("gesturechange", i), a.current?.removeEventListener("gestureend", i);
+    });
+    const L = m ?? 1, [t, c] = W(() => ({
+      x: 0,
+      y: 0,
+      scale: L,
+      rotateZ: 0
+    }));
+    K(() => {
+      if (m !== void 0) {
+        const e = Math.min(
+          Math.max(m, r.min),
+          r.max
         );
-        g.start({ scale: i });
+        c.start({ scale: e });
+      }
+    }, [m, r.min, r.max, c]);
+    const g = (e) => {
+      const n = Math.min(
+        Math.max(e, r.min),
+        r.max
+      );
+      c.start({ scale: n }), d?.(n);
+    };
+    return Q(x, () => ({
+      zoomIn: (e = 1.2) => {
+        const n = t.scale.get();
+        g(n * e);
+      },
+      zoomOut: (e = 1.2) => {
+        const n = t.scale.get();
+        g(n / e);
       },
-      onDrag: ({ pinching: o, cancel: r, offset: [u, n], ...i }) => {
-        if (!x || o) return r();
-        g.start({ x: u, y: n });
+      setScale: (e) => {
+        g(e);
       },
-      onPinch: ({
-        origin: [o, r],
-        first: u,
-        movement: [n],
-        offset: [i, E],
-        memo: s,
-        cancel: L
-      }) => {
-        if (!d) return L();
-        if (u) {
-          const { width: M, height: Z, x: A, y: D } = e.current.getBoundingClientRect(), P = o - (A + M / 2), R = r - (D + Z / 2);
-          s = [t.x.get(), t.y.get(), P, R];
+      reset: () => {
+        c.start({ x: 0, y: 0, scale: 1, rotateZ: 0 }), d?.(1);
+      },
+      getScale: () => t.scale.get()
+    })), Y(
+      {
+        onWheel: ({ delta: [, e] }) => {
+          if (!h) return;
+          const l = t.scale.get() * (1 - e * E), s = Math.min(
+            Math.max(l, r.min),
+            r.max
+          );
+          c.start({ scale: s }), d?.(s);
+        },
+        onDrag: ({ pinching: e, cancel: n, offset: [l, s] }) => {
+          if (!y || e) return n();
+          c.start({ x: l, y: s });
+        },
+        onPinch: ({
+          origin: [e, n],
+          first: l,
+          movement: [s],
+          offset: [R, Z],
+          memo: o,
+          cancel: b
+        }) => {
+          if (!h) return b();
+          if (l) {
+            const { width: D, height: N, x: z, y: B } = a.current.getBoundingClientRect(), G = e - (z + D / 2), I = n - (B + N / 2);
+            o = [t.x.get(), t.y.get(), G, I];
+          }
+          const f = Math.min(
+            Math.max(R, r.min),
+            r.max
+          ), C = o[0] - (s - 1) * o[2], P = o[1] - (s - 1) * o[3], A = {
+            scale: f,
+            rotateZ: M ? Z : t.rotateZ.get(),
+            ...v ? { x: t.x.get(), y: t.y.get() } : { x: C, y: P }
+          };
+          return c.start(A), d?.(f), o;
         }
-        const w = s[0] - (n - 1) * s[2], S = s[1] - (n - 1) * s[3], b = {
-          scale: i,
-          rotateZ: v ? E : t.rotateZ.get(),
-          ...m ? { x: t.x.get(), y: t.y.get() } : { x: w, y: S }
-        };
-        return g.start(b), s;
-      }
-    },
-    {
-      target: e,
-      drag: { from: () => [t.x.get(), t.y.get()] },
-      pinch: { scaleBounds: l, rubberband: y },
-      wheel: { enabled: !0 }
-    }
-  ), /* @__PURE__ */ B(
-    G.div,
-    {
-      className: z("select-none", f),
-      ref: e,
-      style: {
-        ...c.style,
-        ...t
       },
-      children: h
-    }
-  );
-};
+      {
+        target: a,
+        drag: { from: () => [t.x.get(), t.y.get()] },
+        pinch: { scaleBounds: r, rubberband: w },
+        wheel: { enabled: !0 }
+      }
+    ), /* @__PURE__ */ U(
+      j.div,
+      {
+        className: X(p),
+        ref: a,
+        style: {
+          userSelect: "none",
+          ...u.style,
+          ...t
+        },
+        children: S
+      }
+    );
+  }
+);
+_.displayName = "PinchContent";
 export {
-  V as default
+  _ as default
 };

package/dist/es/components/text-type/TextType.d.ts

@@ -0,0 +1,26 @@
+import { ElementType } from 'react';
+interface TextTypeProps {
+    className?: string;
+    showCursor?: boolean;
+    hideCursorWhileTyping?: boolean;
+    cursorCharacter?: string | React.ReactNode;
+    cursorBlinkDuration?: number;
+    cursorClassName?: string;
+    text: string | string[];
+    as?: ElementType;
+    typingSpeed?: number;
+    initialDelay?: number;
+    pauseDuration?: number;
+    deletingSpeed?: number;
+    loop?: boolean;
+    textColors?: string[];
+    variableSpeed?: {
+        min: number;
+        max: number;
+    };
+    onSentenceComplete?: (sentence: string, index: number) => void;
+    startOnVisible?: boolean;
+    reverseMode?: boolean;
+}
+declare const TextType: ({ text, as: Component, typingSpeed, initialDelay, pauseDuration, deletingSpeed, loop, className, showCursor, hideCursorWhileTyping, cursorCharacter, cursorClassName, cursorBlinkDuration, textColors, variableSpeed, onSentenceComplete, startOnVisible, reverseMode, ...props }: TextTypeProps & React.HTMLAttributes<HTMLElement>) => import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
+export default TextType;

package/dist/es/components/text-type/TextType.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx as b } from "react/jsx-runtime";
+import { useState as u, useRef as k, useMemo as U, useCallback as V, useEffect as p, createElement as W } from "react";
+import { gsap as q } from "gsap";
+/* empty css             */
+const D = ({
+  text: i,
+  as: v = "div",
+  typingSpeed: f = 50,
+  initialDelay: _ = 0,
+  pauseDuration: x = 2e3,
+  deletingSpeed: A = 30,
+  loop: R = !0,
+  className: w = "",
+  showCursor: T = !0,
+  hideCursorWhileTyping: z = !1,
+  cursorCharacter: F = "|",
+  cursorClassName: G = "",
+  cursorBlinkDuration: E = 0.5,
+  textColors: d = [],
+  variableSpeed: c,
+  onSentenceComplete: y,
+  startOnVisible: g = !1,
+  reverseMode: N = !1,
+  ...J
+}) => {
+  const [l, $] = u(""), [o, j] = u(0), [a, C] = u(!1), [t, K] = u(0), [H, L] = u(!g), m = k(null), I = k(null), r = U(() => Array.isArray(i) ? i : [i], [i]), O = V(() => {
+    if (!c) return f;
+    const { min: e, max: n } = c;
+    return Math.random() * (n - e) + e;
+  }, [c, f]), P = () => {
+    if (d.length !== 0)
+      return d[t % d.length];
+  };
+  p(() => {
+    if (!g || !I.current) return;
+    const e = new IntersectionObserver(
+      (n) => {
+        n.forEach((h) => {
+          h.isIntersecting && L(!0);
+        });
+      },
+      { threshold: 0.1 }
+    );
+    return e.observe(I.current), () => e.disconnect();
+  }, [g]), p(() => {
+    T && m.current && (q.set(m.current, { opacity: 1 }), q.to(m.current, {
+      opacity: 0,
+      duration: E,
+      repeat: -1,
+      yoyo: !0,
+      ease: "power2.inOut"
+    }));
+  }, [T, E]), p(() => {
+    if (!H) return;
+    let e;
+    const n = r[t], h = N ? n.split("").reverse().join("") : n, M = () => {
+      if (a)
+        if (l === "") {
+          if (C(!1), t === r.length - 1 && !R)
+            return;
+          y && y(r[t], t), K((s) => (s + 1) % r.length), j(0), e = setTimeout(() => {
+          }, x);
+        } else
+          e = setTimeout(() => {
+            $((s) => s.slice(0, -1));
+          }, A);
+      else
+        o < h.length ? e = setTimeout(
+          () => {
+            $((s) => s + h[o]), j((s) => s + 1);
+          },
+          c ? O() : f
+        ) : r.length > 1 && (e = setTimeout(() => {
+          C(!0);
+        }, x));
+    };
+    return o === 0 && !a && l === "" ? e = setTimeout(M, _) : M(), () => clearTimeout(e);
+  }, [
+    o,
+    l,
+    a,
+    f,
+    A,
+    x,
+    r,
+    t,
+    R,
+    _,
+    H,
+    N,
+    c,
+    y
+  ]);
+  const Q = z && (o < r[t].length || a);
+  return W(
+    v,
+    {
+      ref: I,
+      className: `text-type ${w}`,
+      ...J
+    },
+    /* @__PURE__ */ b("span", { className: "text-type__content", style: { color: P() || "inherit" }, children: l }),
+    T && /* @__PURE__ */ b(
+      "span",
+      {
+        ref: m,
+        className: `text-type__cursor ${G} ${Q ? "text-type__cursor--hidden" : ""}`,
+        children: F
+      }
+    )
+  );
+};
+export {
+  D as default
+};

package/dist/es/components/text-type/index.d.ts

@@ -0,0 +1,3 @@
+import { default as TextType } from './TextType.tsx';
+export { TextType };
+export default TextType;

package/dist/es/index.d.ts

@@ -24,4 +24,5 @@ export * from './components/shiny-button';
 export * from './components/scratch-to-reveal';
 export * from './components/split-text';
 export * from './components/dome-gallery';
+export * from './components/text-type';
 export * from './hooks/useStayTimeReport';

package/dist/es/index.js

@@ -1,61 +1,63 @@
 /* empty css          */
-import { Button as e } from "./components/button/Button.js";
+import { Button as r } from "./components/button/Button.js";
 import { TxtReader as p } from "./components/txt-reader/TxtReader.js";
 import { HyperText as x } from "./components/hyper-text/index.js";
 import { TypingAnimation as i } from "./components/typing-animation/index.js";
 import { QRCode as d } from "./components/qr-code/index.js";
-import { Confetti as l, ConfettiButton as u } from "./components/confetti-button/index.js";
+import { Confetti as T, ConfettiButton as l } from "./components/confetti-button/index.js";
 import { useStayTimeReport as c } from "./hooks/useStayTimeReport.js";
 import { default as S } from "./components/pinch-content/PinchContent.js";
 import { default as h } from "./components/image-viewer/ImageViewer.js";
-import { ShimmerButton as k } from "./components/shimmer-button/ShimmerButton.js";
+import { ShimmerButton as B } from "./components/shimmer-button/ShimmerButton.js";
 import { default as A } from "./components/image-compare/ImageCompare.js";
-import { TextAnimate as I } from "./components/text-animate/TextAnimate.js";
-import { Dock as F, DockIcon as V, dockVariants as L } from "./components/dock/Duck.js";
-import { TxtEditor as v } from "./components/txt-editor/TxtEditor.js";
-import { Message as E } from "./components/message/Message.js";
-import { default as H } from "react-force-graph-3d";
-import { default as Q } from "canvas-confetti";
-import { Pointer as j } from "./components/pointer/Pointer.js";
-import { SparklesText as z } from "./components/sparkles-text/SparklesText.js";
-import { BlurFade as K } from "./components/blur-fade/BlurFade.js";
-import { VideoDialog as O } from "./components/video-dialog/VideoDialog.js";
-import { ComicText as W } from "./components/comic-text/ComicText.js";
-import { FlipText as Y } from "./components/flip-text/FlipText.js";
-import { AnimatedList as _, AnimatedListItem as $ } from "./components/animated-list/AnimatedList.js";
-import { ShinyButton as to } from "./components/shiny-button/ShinyButton.js";
-import { ScratchToReveal as eo } from "./components/scratch-to-reveal/ScratchToReveal.js";
-import { SplitText as po } from "./components/split-text/SplitText.js";
+import { default as I } from "./components/text-type/TextType.js";
+import { TextAnimate as F } from "./components/text-animate/TextAnimate.js";
+import { Dock as L, DockIcon as P, dockVariants as v } from "./components/dock/Duck.js";
+import { TxtEditor as E } from "./components/txt-editor/TxtEditor.js";
+import { Message as H } from "./components/message/Message.js";
+import { default as Q } from "react-force-graph-3d";
+import { default as j } from "canvas-confetti";
+import { Pointer as z } from "./components/pointer/Pointer.js";
+import { SparklesText as K } from "./components/sparkles-text/SparklesText.js";
+import { BlurFade as O } from "./components/blur-fade/BlurFade.js";
+import { VideoDialog as W } from "./components/video-dialog/VideoDialog.js";
+import { ComicText as Y } from "./components/comic-text/ComicText.js";
+import { FlipText as _ } from "./components/flip-text/FlipText.js";
+import { AnimatedList as oo, AnimatedListItem as to } from "./components/animated-list/AnimatedList.js";
+import { ShinyButton as ro } from "./components/shiny-button/ShinyButton.js";
+import { ScratchToReveal as po } from "./components/scratch-to-reveal/ScratchToReveal.js";
+import { SplitText as xo } from "./components/split-text/SplitText.js";
 export {
-  _ as AnimatedList,
-  $ as AnimatedListItem,
-  K as BlurFade,
-  e as Button,
-  W as ComicText,
-  l as Confetti,
-  u as ConfettiButton,
-  F as Dock,
-  V as DockIcon,
-  Y as FlipText,
-  H as ForceGraph3D,
+  oo as AnimatedList,
+  to as AnimatedListItem,
+  O as BlurFade,
+  r as Button,
+  Y as ComicText,
+  T as Confetti,
+  l as ConfettiButton,
+  L as Dock,
+  P as DockIcon,
+  _ as FlipText,
+  Q as ForceGraph3D,
   x as HyperText,
   A as ImageCompare,
   h as ImageViewer,
-  E as Message,
+  H as Message,
   S as PinchContent,
-  j as Pointer,
+  z as Pointer,
   d as QRCode,
-  eo as ScratchToReveal,
-  k as ShimmerButton,
-  to as ShinyButton,
-  z as SparklesText,
-  po as SplitText,
-  I as TextAnimate,
-  v as TxtEditor,
+  po as ScratchToReveal,
+  B as ShimmerButton,
+  ro as ShinyButton,
+  K as SparklesText,
+  xo as SplitText,
+  F as TextAnimate,
+  I as TextType,
+  E as TxtEditor,
   p as TxtReader,
   i as TypingAnimation,
-  O as VideoDialog,
-  Q as confetti,
-  L as dockVariants,
+  W as VideoDialog,
+  j as confetti,
+  v as dockVariants,
   c as useStayTimeReport
 };