@blocklet/ui-react/lib/UserCenter/components/editable-field.js

Some useful front-end web components that can be used in Blocklets.

import { jsx as n, jsxs as s } from "react/jsx-runtime";
import L, { useState as N } from "react";
import { useMemoizedFn as C, useCreation as _ } from "ahooks";
import { useTheme as $, TextField as T, Box as d, Typography as u, Tooltip as J } from "@mui/material";
import { Verified as q } from "@mui/icons-material";
import { useLocaleContext as A } from "@arcblock/ux/lib/Locale/context";
import { translate as G } from "@arcblock/ux/lib/Locale/util";
import { mergeSx as B } from "@arcblock/ux/lib/Util/style";
import { translations as K } from "../libs/locales.js";
const E = {
  ".MuiOutlinedInput-root": {
    "&:hover": {
      fieldset: {
        borderColor: "divider"
      }
    },
    "&.Mui-focused": {
      fieldset: {
        borderColor: "divider"
      }
    }
  }
}, F = {
  width: "100%",
  "& .MuiFormHelperText-root": {
    position: "relative",
    bottom: 0,
    left: 0,
    margin: 0
  },
  fieldset: {
    borderColor: "divider"
  }
};
function re({
  value: t,
  onChange: f = () => {
  },
  onValueValidate: c = () => {
  },
  errorMsg: i = "",
  editable: h = !1,
  component: x = "input",
  placeholder: a = "",
  rows: v = 2,
  maxLength: r = void 0,
  icon: g = void 0,
  label: w = "",
  children: p = void 0,
  tooltip: I = void 0,
  inline: P = !0,
  style: X = {},
  verified: Y = !1,
  canEdit: k = !0,
  renderValue: b = void 0,
  disabled: y = !1,
  hidePreview: z = !1
}) {
  const { locale: M } = A(), O = $().palette.mode === "dark", R = C((e, l = {}) => G(K, e, M, "en", l)), [o, S] = N(null), j = (e) => {
    S({
      mouseX: e.clientX,
      mouseY: e.clientY
    });
  }, D = () => {
    S(null);
  }, m = C((e) => {
    f && f(e), c && c(e);
  }), H = _(() => {
    if (p)
      return p;
    if (x === "input")
      return /* @__PURE__ */ n(
        T,
        {
          variant: "outlined",
          className: "editable-field",
          value: t,
          onChange: (l) => m(l.target.value),
          sx: B(F, i ? {} : E),
          error: !!i,
          helperText: i,
          disabled: y,
          slotProps: {
            input: {
              sx: { backgroundColor: "transparent" },
              placeholder: a
            }
          }
        }
      );
    const e = t.length > (r || 300);
    return /* @__PURE__ */ s(d, { position: "relative", children: [
      /* @__PURE__ */ n(
        T,
        {
          variant: "outlined",
          sx: B(F, i ? {} : E),
          value: t,
          onChange: (l) => m(l.target.value),
          error: !!i,
          helperText: i,
          disabled: y,
          slotProps: {
            input: {
              multiline: !0,
              minRows: v,
              placeholder: a
            }
          }
        }
      ),
      r && r > 0 ? /* @__PURE__ */ s(
        u,
        {
          position: "absolute",
          bottom: -22,
          right: 2,
          variant: "caption",
          fontSize: "12px",
          component: "span",
          color: e ? "error" : "text.secondary",
          children: [
            e ? `(${R("profile.maxInputLength")} ${r}) ` : "",
            t.length,
            " / ",
            r
          ]
        }
      ) : null
    ] });
  }, [t, m, x, a, v, p]);
  return !k && h ? null : h ? /* @__PURE__ */ s(d, { sx: { width: "100%" }, style: X, children: [
    w && /* @__PURE__ */ n(u, { variant: "subtitle1", gutterBottom: !0, sx: { mb: 0.5, fontSize: "12px", color: "text.primary" }, children: w }),
    H
  ] }) : t && !z ? /* @__PURE__ */ n(
    J,
    {
      open: !!o,
      title: I,
      placement: "top",
      arrow: !0,
      slotProps: {
        popper: {
          // 使用虚拟锚点元素，基于鼠标位置
          anchorEl: o ? {
            getBoundingClientRect: () => ({
              top: o.mouseY,
              left: o.mouseX,
              right: o.mouseX,
              bottom: o.mouseY,
              width: 0,
              height: 0,
              x: o.mouseX,
              y: o.mouseY,
              toJSON: () => {
              }
            })
          } : null,
          // 设置偏移，使tooltip显示在鼠标上方
          modifiers: [
            {
              name: "offset",
              options: {
                offset: [0, 10]
              }
            }
          ]
        }
      },
      children: /* @__PURE__ */ s(
        u,
        {
          variant: "subtitle1",
          component: "div",
          gutterBottom: !0,
          sx: {
            width: "100%",
            mb: 0,
            lineHeight: 1.4,
            overflow: "hidden"
          },
          display: "flex",
          alignItems: "center",
          gap: 1,
          children: [
            g ? L.cloneElement(g, {
              style: {
                filter: O ? "brightness(0) saturate(100%) invert(1)" : "none"
              }
            }) : null,
            /* @__PURE__ */ s(d, { display: "flex", flexDirection: "row", alignItems: "center", width: "90%", children: [
              /* @__PURE__ */ n(
                u,
                {
                  sx: {
                    whiteSpace: "pre-wrap",
                    ...P ? { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } : {}
                  },
                  component: "div",
                  onMouseEnter: j,
                  onMouseLeave: D,
                  children: b ? b(t) : t
                }
              ),
              Y && /* @__PURE__ */ n(q, { color: "success", style: { fontSize: 16, width: 16, marginLeft: 4, flexShrink: 0 } })
            ] })
          ]
        }
      )
    }
  ) : null;
}
export {
  E as commonInputStyle,
  re as default,
  F as inputFieldStyle
};