@unicom-cloud/ui 0.8.98 → 0.8.100

package/typography/Base.js

@@ -1,34 +1,34 @@
-import { jsx as p, jsxs as ie, Fragment as re } from "react/jsx-runtime";
-import le from "lodash/merge";
-import R, { forwardRef as pe, useContext as ce, useRef as W, useState as q, useEffect as ae, useImperativeHandle as me } from "react";
+import { jsx as p, jsxs as ne, Fragment as ie } from "react/jsx-runtime";
+import re from "lodash/merge";
+import _, { forwardRef as le, useContext as pe, useRef as ce, useState as W, useEffect as ae, useImperativeHandle as me } from "react";
 import "../config-provider/ConfigProvider.js";
 import de from "../components/common/hooks/useMergeValue.js";
 import fe from "../components/common/hooks/useUpdateEffect.js";
 import ue from "../popover/index.js";
 import he from "../tooltip/index.js";
-import F from "@unicom-cloud/utils/class-name";
+import q from "@unicom-cloud/utils/class-name";
 import "../components/common/utils/is.js";
 import { mergedToString as Ee } from "../components/common/utils/mergedToString.js";
 import { omit as ge } from "../components/common/utils/omit.js";
 import { resizeObserver as Ce } from "../components/common/utils/resizeObserver.js";
 import { throttleByRaf as xe } from "../components/common/utils/throttleByRaf.js";
 import Te from "./EditContent.js";
-import Ne from "./Operations.js";
-import Se from "./useCssEllipsis.js";
-import be, { MEASURE_STATUS as O } from "./useEllipsis.js";
+import Se from "./Operations.js";
+import Ne from "./useCssEllipsis.js";
+import be, { MEASURE_STATUS as A } from "./useEllipsis.js";
 import we from "../config-provider/context.js";
-import { isPlainObject as x, isUndefined as L } from "@unicom-cloud/utils/is";
+import { isPlainObject as x, isUndefined as F } from "@unicom-cloud/utils/is";
 function ye(s, f) {
   const {
     type: c,
-    bold: b,
+    bold: w,
     disabled: T,
     mark: u,
-    underline: N,
+    underline: S,
     delete: a,
-    code: w
+    code: y
   } = s, l = [], h = [];
-  return c && h.push(`${f}-${c}`), T && h.push(`${f}-disabled`), b && l.push("b"), N && l.push("u"), a && l.push("del"), w && l.push("code"), u && l.push("mark"), {
+  return c && h.push(`${f}-${c}`), T && h.push(`${f}-disabled`), w && l.push("b"), S && l.push("u"), a && l.push("del"), y && l.push("code"), u && l.push("mark"), {
     component: l,
     className: h
   };
@@ -36,100 +36,100 @@ function ye(s, f) {
 function $e(s, f) {
   const {
     componentType: c,
-    style: b,
+    style: w,
     className: T,
     children: u,
-    editable: N,
+    editable: S,
     ellipsis: a,
-    heading: w,
+    heading: y,
     blockquote: l,
     ...h
-  } = s, _ = ce(we), { getPrefixCls: V, rtl: A } = _, n = V?.("typography"), I = W(), { component: S, className: M } = ye(s, n), [H, U] = q(!1), [G, J] = q(0), y = x(N) ? N : {}, K = "editing" in y ? y.editing : H, e = a ? {
+  } = s, I = pe(we), { getPrefixCls: L, rtl: O } = I, n = L?.("typography"), N = ce(null), { component: b, className: U } = ye(s, n), [V, z] = W(!1), [H, G] = W(0), $ = x(S) ? S : {}, J = "editing" in $ ? $.editing : V, D = "...", e = a ? {
     rows: 1,
-    ellipsisStr: "...",
+    ellipsisStr: D,
     cssEllipsis: !1,
     ...x(a) ? a : {}
-  } : {}, Q = e.wrapper || R.Fragment, [i, X] = de(!1, {
+  } : {}, K = e.wrapper || _.Fragment, [i, Q] = de(!1, {
     defaultValue: e.defaultExpanded,
     value: e.expanded
-  }), { simpleEllipsis: $, ellipsisStyle: Y } = Se(e), z = (t, o) => {
-    const r = L(e.ellipsisStr) ? "..." : e.ellipsisStr, d = !L(e.suffix) && e.suffix;
-    return /* @__PURE__ */ ie(Q, { children: [
+  }), { simpleEllipsis: k, ellipsisStyle: X } = Ne(e), M = (t, o) => {
+    const r = F(e.ellipsisStr) ? D : e.ellipsisStr, d = !F(e.suffix) && e.suffix;
+    return /* @__PURE__ */ ne(K, { children: [
       t,
-      o && !i && !$ ? r : "",
+      o && !i && !k ? r : "",
       d,
-      te(o)
+      ee(o)
     ] });
-  }, { ellipsisNode: Z, isEllipsis: m, measureStatus: D } = be({
+  }, { ellipsisNode: Y, isEllipsis: m, measureStatus: j } = be({
     ...e,
     children: u,
     expanding: i,
-    width: G,
-    renderMeasureContent: z,
-    simpleEllipsis: $ || i
-  }), ee = xe((t) => {
+    width: H,
+    renderMeasureContent: M,
+    simpleEllipsis: k || i
+  }), Z = xe((t) => {
     const { contentRect: o } = t?.[0];
     if (o) {
-      const r = S.includes("code") ? o.width - 18 : o.width;
+      const r = b.includes("code") ? o.width - 18 : o.width;
       [
-        O.NO_NEED_ELLIPSIS,
-        O.MEASURE_END
-      ].includes(D) && J(r);
+        A.NO_NEED_ELLIPSIS,
+        A.MEASURE_END
+      ].includes(j) && G(r);
     }
-  }), j = W(null);
+  });
   ae(() => {
-    const t = Ce([j.current], ee);
+    const t = Ce([N.current], Z);
     return () => {
       t();
     };
-  }, [j.current]);
-  function te(t) {
-    return /* @__PURE__ */ p(re, { children: /* @__PURE__ */ p(
-      Ne,
+  }, [N.current]);
+  function ee(t) {
+    return /* @__PURE__ */ p(ie, { children: /* @__PURE__ */ p(
+      Se,
       {
         ...s,
-        setEditing: U,
-        onClickExpand: oe,
+        setEditing: z,
+        onClickExpand: te,
         expanding: i,
         isEllipsis: t,
-        currentContext: _
+        currentContext: I
       }
     ) });
   }
-  function oe(t) {
-    X(!i), s.onClickExpand?.(t), e.onExpand?.(!i, t);
+  function te(t) {
+    Q(!i), s.onClickExpand?.(t), e.onExpand?.(!i, t);
   }
   fe(() => {
     e.onEllipsis?.(m);
-  }, [m]), me(f, () => I.current);
+  }, [m]), me(f, () => N.current);
   function B(t, o, r, d = {}) {
     let g = t;
-    return o.forEach((k, P) => {
-      const v = { className: `${n}-${k}` }, C = P === 0 ? d : {}, ne = x(r.mark) && r.mark.color ? { style: { backgroundColor: r.mark.color }, ...C } : { ...C };
-      g = R.createElement(
-        k,
-        le({ ...ne }, v),
+    return o.forEach((P, v) => {
+      const R = { className: `${n}-${P}` }, C = v === 0 ? d : {}, se = x(r.mark) && r.mark.color ? { style: { backgroundColor: r.mark.color }, ...C } : { ...C };
+      g = _.createElement(
+        P,
+        re({ ...se }, R),
         g
       );
     }), g;
   }
   let E;
-  c === "Paragraph" ? E = l ? "blockquote" : "div" : c === "Title" ? E = `h${w}` : c === "Text" && (E = a ? "div" : "span");
-  function se() {
-    const t = Ee(R.Children.toArray(u)), o = e.showTooltip, r = x(e.showTooltip) && e.showTooltip.type === "popover" ? "popover" : "tooltip", d = x(e.showTooltip) ? e.showTooltip.props || {} : {}, g = r === "popover" ? ue : he, P = {
-      style: b,
+  c === "Paragraph" ? E = l ? "blockquote" : "div" : c === "Title" ? E = `h${y}` : c === "Text" && (E = a ? "div" : "span");
+  function oe() {
+    const t = Ee(_.Children.toArray(u)), o = e.showTooltip, r = x(e.showTooltip) && e.showTooltip.type === "popover" ? "popover" : "tooltip", d = x(e.showTooltip) ? e.showTooltip.props || {} : {}, g = r === "popover" ? ue : he, v = {
+      style: w,
       ...m && !o && !i ? { title: t } : {}
-    }, v = m && o && !i, C = /* @__PURE__ */ p(
+    }, R = m && o && !i, C = /* @__PURE__ */ p(
       E,
       {
-        ref: I,
-        className: F(
+        ref: N,
+        className: q(
           n,
-          M,
-          { [`${n}-rtl`]: A },
+          U,
+          { [`${n}-rtl`]: O },
           T
         ),
-        ...P,
+        ...v,
         ...ge(h, [
           "spacing",
           "type",
@@ -147,41 +147,41 @@ function $e(s, f) {
           "setEditing",
           "forceShowExpand"
         ]),
-        children: $ && D !== O.INIT && !i && m ? B(
+        children: k && j !== A.INIT && !i && m ? B(
           // CSS folding style, need to wrap the text separately.
-          z(
-            /* @__PURE__ */ p("span", { style: Y, children: u }),
+          M(
+            /* @__PURE__ */ p("span", { style: X, children: u }),
             m
           ),
-          S.length ? S : ["span"],
+          b.length ? b : ["span"],
           s,
           // The simple-ellipsis class ensures that the ReactNode after the text is displayed correctly (no line breaks)
           // Need to act on the immediate parent node of the text
           { className: `${n}-simple-ellipsis` }
-        ) : B(Z, S, s)
+        ) : B(Y, b, s)
       }
     );
-    return v ? /* @__PURE__ */ p(g, { content: t, ...d, children: /* @__PURE__ */ p("span", { children: C }) }) : C;
+    return R ? /* @__PURE__ */ p(g, { content: t, ...d, children: /* @__PURE__ */ p("span", { children: C }) }) : C;
   }
-  return K ? /* @__PURE__ */ p(
+  return J ? /* @__PURE__ */ p(
     Te,
     {
       ref: f,
       ...s,
-      className: F(
+      className: q(
         n,
-        M,
-        { [`${n}-rtl`]: A },
+        U,
+        { [`${n}-rtl`]: O },
         `${n}-${E}`,
         T
       ),
       prefixCls: n,
-      setEditing: U,
-      editableConfig: y
+      setEditing: z,
+      editableConfig: $
     }
-  ) : se();
+  ) : oe();
 }
-const Ge = pe($e);
+const Ge = le($e);
 export {
   Ge as default
 };

package/typography/EditContent.js

@@ -1,43 +1,53 @@
 import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as p, useRef as E, useEffect as h } from "react";
-import C from "../input/Input.js";
-import x from "@unicom-cloud/utils/class-name";
-import { mergedToString as N } from "../components/common/utils/mergedToString.js";
-function $(o, a) {
-  const { prefixCls: n, children: u, setEditing: f, editableConfig: r, style: l } = o, m = x(
-    `${n}-typography`,
-    `${n}-edit-content`,
-    o.className
-  ), c = N(u), t = E(null);
-  h(() => {
-    if (t.current && t.current.focus?.(), t.current && t.current.dom) {
-      const { length: e } = t.current.dom.value;
-      t.current.dom.setSelectionRange(e, e);
+import { forwardRef as C, useRef as P, useEffect as x } from "react";
+import u from "../input/Input.js";
+import N from "@unicom-cloud/utils/class-name";
+import { mergedToString as $ } from "../components/common/utils/mergedToString.js";
+function y(c, l) {
+  const { prefixCls: o, children: m, setEditing: d, editableConfig: n, style: p } = c, g = N(
+    `${o}-typography`,
+    `${o}-edit-content`,
+    c.className
+  ), a = $(m), e = P(null);
+  x(() => {
+    if (e.current?.focus?.(), e.current && "dom" in e.current) {
+      const { length: t } = e.current.dom.value;
+      e.current.dom.setSelectionRange(t, t);
     }
   }, []);
-  function s() {
-    f(!1), r.onEnd?.(c);
-  }
-  function d(e) {
-    r.onChange?.(e);
-  }
-  function g() {
-    s();
-  }
-  return /* @__PURE__ */ i("div", { className: m, style: l, ref: a, children: /* @__PURE__ */ i(
-    C.TextArea,
+  const r = () => {
+    d?.(!1), n?.onEnd?.(a);
+  }, E = (t) => {
+    n?.onChange?.(t);
+  }, h = () => r(), f = {
+    className: `${o}-edit-content-input`,
+    value: a,
+    onBlur: h,
+    onChange: E
+  };
+  let s;
+  return n?.inputProps ? s = /* @__PURE__ */ i(
+    u,
     {
-      className: `${n}-edit-content-textarea`,
-      onBlur: g,
-      ref: t,
-      value: c,
+      ...f,
+      ref: e,
+      onPressEnter: r,
+      ...n.inputProps
+    }
+  ) : s = /* @__PURE__ */ i(
+    u.TextArea,
+    {
+      ...f,
+      ref: e,
       autoSize: !0,
-      onChange: d,
-      onPressEnter: s
+      onPressEnter: (t) => {
+        t.shiftKey || r();
+      },
+      ...n?.textAreaProps
     }
-  ) });
+  ), /* @__PURE__ */ i("div", { className: g, style: p, ref: l, children: s });
 }
-const b = p($);
+const b = C(y);
 export {
   b as default
 };