@0xchain/expandable-text 0.0.1

package/README.md

@@ -0,0 +1,7 @@
+# @0xchain/expandable-text
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @0xchain/expandable-text` to execute the unit tests via [Vitest](https://vitest.dev/).

package/dist/index.d.ts

@@ -0,0 +1,70 @@
+import { default as React } from 'react';
+interface ExpandableTextProps {
+    /**
+     * 要显示的文本内容
+     */
+    text?: string;
+    /**
+     * 最大显示行数，默认为2行
+     */
+    maxLines?: number;
+    /**
+     * 展开按钮的文本（可选，默认使用国际化文案）
+     */
+    expandText?: string;
+    /**
+     * 收起按钮的文本（可选，默认使用国际化文案）
+     */
+    collapseText?: string;
+    /**
+     * 自定义样式类名
+     */
+    className?: string;
+    /**
+     * 是否显示展开/收起按钮
+     */
+    showToggle?: boolean;
+    /**
+     * 文本截断时的省略号样式
+     */
+    ellipsis?: string;
+    /**
+     * 是否显示加载骨架（可选，外部可强制）
+     */
+    loading?: boolean;
+    /**
+     * 是否在省略时展示 tooltip（使用 title 简化版）
+     */
+    tooltip?: boolean;
+    /**
+     * 展开时触发
+     */
+    onExpand?: () => void;
+    /**
+     * 收起时触发
+     */
+    onCollapse?: () => void;
+    /**
+     * 自定义展开文案/节点（默认取国际化）
+     */
+    expandSymbol?: React.ReactNode;
+    /**
+     * 自定义收起文案/节点（默认取国际化）
+     */
+    collapseSymbol?: React.ReactNode;
+    /**
+     * 溢出状态回调（对齐 antd 的 onEllipsis 语义）
+     */
+    onEllipsis?: (ellipsis: boolean) => void;
+    /**
+     * 字符级裁剪时追加的后缀（如 “...更多” 里的固定 suffix）
+     */
+    suffix?: string;
+    /**
+     * 是否可展开（等价 antd 的 ellipsis.expandable）
+     */
+    expandable?: boolean;
+}
+export declare const ExpandableText: React.FC<ExpandableTextProps>;
+export default ExpandableText;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,UAAU,mBAAmB;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0MxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,143 @@
+'use client';
+import { jsxs as S, jsx as u } from "react/jsx-runtime";
+import { useState as b, useRef as G, useEffect as te } from "react";
+import { useTranslations as ne } from "next-intl";
+import { twMerge as F } from "tailwind-merge";
+const le = ({
+  text: s,
+  maxLines: f = 2,
+  expandText: W,
+  collapseText: z,
+  className: J,
+  showToggle: g = !0,
+  ellipsis: w = "...",
+  loading: K,
+  onExpand: y,
+  onCollapse: $,
+  expandSymbol: H,
+  collapseSymbol: P,
+  onEllipsis: x,
+  suffix: i = "",
+  expandable: k = !0
+}) => {
+  const [t, Q] = b(!1), [l, U] = b(!1), [c, V] = b(!1), [I, C] = b(null), j = G(null), B = G(null), h = ne("common.expandableText"), M = W || h("expand");
+  te(() => {
+    const a = j.current, e = B.current;
+    if (!a || !e) return;
+    const m = !g || !k ? "" : typeof H == "string" ? String(H) : W || h("expand"), L = g && k && !t, q = (n) => {
+      const r = getComputedStyle(n), o = parseFloat(r.lineHeight);
+      return isNaN(o) ? parseFloat(r.fontSize) * 1.2 : o;
+    }, Y = () => {
+      const n = getComputedStyle(a);
+      [
+        "font",
+        "fontFamily",
+        "fontSize",
+        "fontWeight",
+        "lineHeight",
+        "letterSpacing",
+        "wordBreak",
+        "wordWrap",
+        "whiteSpace",
+        "textTransform",
+        "textIndent",
+        "textRendering"
+      ].forEach((o) => {
+        e.style[o] = n[o];
+      }), e.style.width = `${a.clientWidth}px`;
+    }, Z = (n) => {
+      const r = L && m ? `${n} ${m}` : n;
+      e.textContent = r;
+      const T = q(e) * f;
+      return e.scrollHeight <= T + 0.5;
+    }, A = () => {
+      Y();
+      const n = `${s ?? ""}${i || ""}`, r = L && m ? `${n} ${m}` : n;
+      e.textContent = r;
+      const T = q(e) * f, v = e.scrollHeight > T + 0.5;
+      if (U((d) => (d !== v && (x == null || x(v)), v)), v && !t && s) {
+        const d = `${s}${i || ""}`;
+        let O = 0, R = d.length, D = 0;
+        for (; O <= R; ) {
+          const p = Math.floor((O + R) / 2), ee = `${d.slice(0, p)}${w || ""}`;
+          Z(ee) ? (D = p, O = p + 1) : R = p - 1;
+        }
+        const E = `${d.slice(0, D)}${w || ""}`;
+        C(E);
+      } else
+        C(null);
+      V(!0);
+    }, _ = setTimeout(A, 0), N = new ResizeObserver(A);
+    return N.observe(a), N.observe(e), () => {
+      clearTimeout(_), N.disconnect();
+    };
+  }, [s, f, i, w, t]);
+  const X = () => {
+    Q((a) => {
+      const e = !a;
+      return e ? y == null || y() : $ == null || $(), e;
+    });
+  };
+  return s ? /* @__PURE__ */ S("div", { className: F("relative", J), children: [
+    (K || !c) && /* @__PURE__ */ S("div", { className: F("animate-pulse"), children: [
+      /* @__PURE__ */ u("div", { className: "h-4 bg-module rounded w-full mb-2" }),
+      /* @__PURE__ */ u("div", { className: "h-4 bg-module rounded w-3/4" })
+    ] }),
+    /* @__PURE__ */ u(
+      "div",
+      {
+        ref: B,
+        className: "absolute left-0 top-0 pointer-events-none whitespace-pre-wrap break-words",
+        style: {
+          visibility: "hidden",
+          position: "absolute",
+          zIndex: -1,
+          width: "100%",
+          WebkitLineClamp: "unset",
+          display: "block",
+          overflow: "visible"
+        }
+      }
+    ),
+    /* @__PURE__ */ S(
+      "div",
+      {
+        ref: j,
+        className: F(
+          "transition-all duration-300 ease-in-out align-justify space-x-1"
+        ),
+        style: {
+          visibility: c ? "visible" : "hidden",
+          position: c ? "static" : "absolute",
+          left: c ? void 0 : 0,
+          top: c ? void 0 : 0,
+          width: c ? void 0 : "100%",
+          display: !t && l ? "-webkit-box" : "block",
+          WebkitLineClamp: !t && l ? f : "unset",
+          WebkitBoxOrient: "vertical",
+          overflow: !t && l ? "hidden" : "visible",
+          textOverflow: !t && l ? "ellipsis" : "clip"
+        },
+        "aria-label": s,
+        children: [
+          /* @__PURE__ */ u("span", { children: !t && l && I != null ? I : `${s ?? ""}${t && i ? i : ""}` }),
+          l && g && k && /* @__PURE__ */ u(
+            "button",
+            {
+              type: "button",
+              onClick: X,
+              className: "text-primary hover:underline focus:outline-none text-sm",
+              "aria-expanded": t,
+              "aria-label": t ? z || h("collapse") : M,
+              children: t ? P ?? z ?? h("collapse") : H ?? M
+            }
+          )
+        ]
+      }
+    )
+  ] }) : null;
+};
+export {
+  le as ExpandableText,
+  le as default
+};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@0xchain/expandable-text",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "devDependencies": {
+    "rollup-plugin-preserve-use-client": "3.0.1"
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "dependencies": {
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "tailwind-merge": "3.3.1",
+    "next-intl": "4.6.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}