@blocklet/ui-react 2.13.70 → 3.0.0

package/lib/UserCenter/components/editable-field.js

@@ -1,17 +1,13 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useState } from "react";
-import Box from "@mui/material/Box";
-import TextField from "@mui/material/TextField";
-import Typography from "@mui/material/Typography";
-import Tooltip from "@mui/material/Tooltip";
-import useTheme from "@mui/material/styles/useTheme";
-import { useCreation, useMemoizedFn } from "ahooks";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import VerifiedIcon from "@mui/icons-material/Verified";
-import { mergeSx } from "@arcblock/ux/lib/Util/style";
-import { translations } from "../libs/locales.js";
-export const commonInputStyle = {
+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: {
@@ -24,8 +20,7 @@ export const commonInputStyle = {
       }
     }
   }
-};
-export const inputFieldStyle = {
+}, F = {
   width: "100%",
   "& .MuiFormHelperText-root": {
     position: "relative",
@@ -37,98 +32,85 @@ export const inputFieldStyle = {
     borderColor: "divider"
   }
 };
-function EditableField({
-  value,
-  onChange = () => {
+function re({
+  value: t,
+  onChange: f = () => {
   },
-  onValueValidate = () => {
+  onValueValidate: c = () => {
   },
-  errorMsg = "",
-  editable = false,
-  component = "input",
-  placeholder = "",
-  rows = 2,
-  maxLength,
-  icon,
-  label = "",
-  children,
-  tooltip,
-  inline = true,
-  style = {},
-  verified = false,
-  canEdit = true,
-  renderValue,
-  disabled = false,
-  hidePreview = false
+  errorMsg: i = "",
+  editable: h = !1,
+  component: x = "input",
+  placeholder: a = "",
+  rows: g = 2,
+  maxLength: r,
+  icon: w,
+  label: b = "",
+  children: p,
+  tooltip: I,
+  inline: P = !0,
+  style: X = {},
+  verified: Y = !1,
+  canEdit: k = !0,
+  renderValue: v,
+  disabled: y = !1,
+  hidePreview: z = !1
 }) {
-  const { locale } = useLocaleContext();
-  const theme = useTheme();
-  const isDark = theme.palette.mode === "dark";
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const [mousePosition, setMousePosition] = useState(null);
-  const handleMouseEnter = (event) => {
-    setMousePosition({
-      mouseX: event.clientX,
-      mouseY: event.clientY
+  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
     });
-  };
-  const handleMouseLeave = () => {
-    setMousePosition(null);
-  };
-  const handleChange = useMemoizedFn((v) => {
-    if (onChange) {
-      onChange(v);
-    }
-    if (onValueValidate) {
-      onValueValidate(v);
-    }
-  });
-  const content = useCreation(() => {
-    if (children) {
-      return children;
-    }
-    if (component === "input") {
-      return /* @__PURE__ */ jsx(
-        TextField,
+  }, 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",
-          InputProps: {
-            sx: { backgroundColor: "transparent" },
-            placeholder
-          },
-          value,
-          onChange: (e) => handleChange(e.target.value),
-          sx: mergeSx(inputFieldStyle, !errorMsg ? commonInputStyle : {}),
-          error: Boolean(errorMsg),
-          helperText: errorMsg,
-          disabled
+          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 isTooLong = value.length > (maxLength || 300);
-    return /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
-      /* @__PURE__ */ jsx(
-        TextField,
+    const e = t.length > (r || 300);
+    return /* @__PURE__ */ s(d, { position: "relative", children: [
+      /* @__PURE__ */ n(
+        T,
         {
           variant: "outlined",
-          InputProps: {
-            multiline: true,
-            minRows: rows,
-            placeholder
-          },
-          sx: mergeSx(inputFieldStyle, !errorMsg ? commonInputStyle : {}),
-          value,
-          onChange: (e) => handleChange(e.target.value),
-          error: Boolean(errorMsg),
-          helperText: errorMsg,
-          disabled
+          sx: B(F, i ? {} : E),
+          value: t,
+          onChange: (l) => m(l.target.value),
+          error: !!i,
+          helperText: i,
+          disabled: y,
+          slotProps: {
+            input: {
+              multiline: !0,
+              minRows: g,
+              placeholder: a
+            }
+          }
         }
       ),
-      maxLength && maxLength > 0 ? /* @__PURE__ */ jsxs(
-        Typography,
+      r && r > 0 ? /* @__PURE__ */ s(
+        u,
         {
           position: "absolute",
           bottom: -22,
@@ -136,40 +118,40 @@ function EditableField({
           variant: "caption",
           fontSize: "12px",
           component: "span",
-          color: isTooLong ? "error" : "text.secondary",
+          color: e ? "error" : "text.secondary",
           children: [
-            isTooLong ? `(${t("profile.maxInputLength")} ${maxLength}) ` : "",
-            value.length,
+            e ? `(${R("profile.maxInputLength")} ${r}) ` : "",
+            t.length,
             " / ",
-            maxLength
+            r
           ]
         }
       ) : null
     ] });
-  }, [value, handleChange, component, placeholder, rows, children]);
-  if (!canEdit && editable) {
-    return null;
-  }
-  if (!editable) {
-    return value && !hidePreview ? /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        open: Boolean(mousePosition),
-        title: tooltip,
-        placement: "top",
-        arrow: true,
-        PopperProps: {
+  }, [t, m, x, a, g, p]);
+  return !k && h ? null : h ? /* @__PURE__ */ s(d, { sx: { width: "100%" }, style: X, children: [
+    b && /* @__PURE__ */ n(u, { variant: "subtitle1", gutterBottom: !0, sx: { mb: 0.5, fontSize: "12px", color: "text.primary" }, children: b }),
+    H
+  ] }) : t && !z ? /* @__PURE__ */ n(
+    J,
+    {
+      open: !!o,
+      title: I,
+      placement: "top",
+      arrow: !0,
+      slotProps: {
+        popper: {
           // 使用虚拟锚点元素，基于鼠标位置
-          anchorEl: mousePosition ? {
+          anchorEl: o ? {
             getBoundingClientRect: () => ({
-              top: mousePosition.mouseY,
-              left: mousePosition.mouseX,
-              right: mousePosition.mouseX,
-              bottom: mousePosition.mouseY,
+              top: o.mouseY,
+              left: o.mouseX,
+              right: o.mouseX,
+              bottom: o.mouseY,
               width: 0,
               height: 0,
-              x: mousePosition.mouseX,
-              y: mousePosition.mouseY,
+              x: o.mouseX,
+              y: o.mouseY,
               toJSON: () => {
               }
             })
@@ -183,53 +165,53 @@ function EditableField({
               }
             }
           ]
-        },
-        children: /* @__PURE__ */ jsxs(
-          Typography,
-          {
-            variant: "subtitle1",
-            component: "div",
-            gutterBottom: true,
-            sx: {
-              width: "100%",
-              mb: 0,
-              lineHeight: 1.4,
-              overflow: "hidden"
-            },
-            display: "flex",
-            alignItems: "center",
-            gap: 1,
-            children: [
-              icon ? React.cloneElement(icon, {
-                style: {
-                  filter: isDark ? "brightness(0) saturate(100%) invert(1)" : "none"
+        }
+      },
+      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: [
+            w ? L.cloneElement(w, {
+              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: v ? v(t) : t
                 }
-              }) : null,
-              /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", width: "90%", children: [
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    sx: {
-                      whiteSpace: "pre-wrap",
-                      ...inline ? { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } : {}
-                    },
-                    component: "div",
-                    onMouseEnter: handleMouseEnter,
-                    onMouseLeave: handleMouseLeave,
-                    children: renderValue ? renderValue(value) : value
-                  }
-                ),
-                verified && /* @__PURE__ */ jsx(VerifiedIcon, { color: "success", style: { fontSize: 16, width: 16, marginLeft: 4, flexShrink: 0 } })
-              ] })
-            ]
-          }
-        )
-      }
-    ) : null;
-  }
-  return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, style, children: [
-    label && /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, sx: { mb: 0.5, fontSize: "12px", color: "text.primary" }, children: label }),
-    content
-  ] });
+              ),
+              Y && /* @__PURE__ */ n(q, { color: "success", style: { fontSize: 16, width: 16, marginLeft: 4, flexShrink: 0 } })
+            ] })
+          ]
+        }
+      )
+    }
+  ) : null;
 }
-export default EditableField;
+export {
+  E as commonInputStyle,
+  re as default,
+  F as inputFieldStyle
+};

package/lib/UserCenter/components/nft.js

@@ -1,65 +1,74 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Box, Pagination, Skeleton, Typography } from "@mui/material";
-import { useCreation, useMemoizedFn, useReactive, useRequest } from "ahooks";
-import axios from "axios";
-import NFTDisplay from "@arcblock/ux/lib/NFTDisplay";
-import Empty from "@arcblock/ux/lib/Empty";
-import { WELLKNOWN_SERVICE_PATH_PREFIX } from "@abtnode/constant";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { translations } from "../libs/locales.js";
-export default function Nft({ user }) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data2 = {}) => {
-    return translate(translations, key, locale, "en", data2);
-  });
-  const paging = useReactive({
+import { jsxs as p, jsx as t, Fragment as y } from "react/jsx-runtime";
+import { Box as o, Skeleton as g, Typography as w, Pagination as k } from "@mui/material";
+import { useMemoizedFn as C, useReactive as b, useRequest as F, useCreation as z } from "ahooks";
+import N from "axios";
+import P from "@arcblock/ux/lib/NFTDisplay";
+import R from "@arcblock/ux/lib/Empty";
+import { WELLKNOWN_SERVICE_PATH_PREFIX as j } from "@abtnode/constant";
+import { translate as E } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext as I } from "@arcblock/ux/lib/Locale/context";
+import { translations as S } from "../libs/locales.js";
+function H({ user: d }) {
+  const { locale: x } = I(), m = C((r, n = {}) => E(S, r, x, "en", n)), e = b({
     page: 1,
     size: 20
-  });
-  const userState = useRequest(
-    async (pagination = paging) => {
-      const response = await axios.get(`${WELLKNOWN_SERVICE_PATH_PREFIX}/ocap/listAssets`, {
-        params: {
-          ownerAddress: user.did,
-          ...pagination
-        }
-      });
-      return response.data;
-    },
+  }), c = F(
+    async (r = e) => (await N.get(`${j}/ocap/listAssets`, {
+      params: {
+        ownerAddress: d.did,
+        ...r
+      }
+    })).data,
     {
-      defaultParams: [paging],
-      refreshDeps: [user.did, paging]
+      defaultParams: [e],
+      refreshDeps: [d.did, e]
     }
-  );
-  const { loading, data } = userState;
-  const dataPage = data?.page ?? { cursor: 0, next: false, total: 0 };
-  const handlePageChange = (event, value) => {
-    paging.page = value;
-    userState.run(paging);
-  };
-  const content = useCreation(() => {
-    if (loading) {
-      const skeletonItems = ["skeleton-1", "skeleton-2", "skeleton-3", "skeleton-4", "skeleton-5"].map((id) => /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: "15%", height: 166, sx: { borderRadius: 1, flexShrink: 0 } }, id));
-      return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [
-        /* @__PURE__ */ jsx(Skeleton, { width: "20%" }),
-        /* @__PURE__ */ jsx(Box, { display: "flex", flexDirection: "row", gap: 2, flexWrap: "nowrap", children: skeletonItems })
-      ] });
+  ), { loading: i, data: s } = c, l = (s == null ? void 0 : s.page) ?? { cursor: 0, next: !1, total: 0 }, f = (r, n) => {
+    e.page = n, c.run(e);
+  }, h = z(() => {
+    var r, n;
+    if (i) {
+      const a = ["skeleton-1", "skeleton-2", "skeleton-3", "skeleton-4", "skeleton-5"].map((u) => /* @__PURE__ */ t(g, { variant: "rectangular", width: "15%", height: 166, sx: { borderRadius: 1, flexShrink: 0 } }, u));
+      return /* @__PURE__ */ p(
+        o,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 2
+          },
+          children: [
+            /* @__PURE__ */ t(g, { width: "20%" }),
+            /* @__PURE__ */ t(
+              o,
+              {
+                sx: {
+                  display: "flex",
+                  flexDirection: "row",
+                  gap: 2,
+                  flexWrap: "nowrap"
+                },
+                children: a
+              }
+            )
+          ]
+        }
+      );
     }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Typography,
+    return /* @__PURE__ */ p(y, { children: [
+      /* @__PURE__ */ t(
+        w,
         {
           sx: {
             color: "grey.A700",
             fontWeight: 600,
             mb: 2.5
           },
-          children: t("common.nft")
+          children: m("common.nft")
         }
       ),
-      /* @__PURE__ */ jsxs(
-        Box,
+      /* @__PURE__ */ p(
+        o,
         {
           className: "nft-list-wrapper",
           sx: {
@@ -74,20 +83,20 @@ export default function Nft({ user }) {
             gap: 2.5
           },
           children: [
-            data?.assets?.map((item) => /* @__PURE__ */ jsx(
-              Box,
+            (r = s == null ? void 0 : s.assets) == null ? void 0 : r.map((a) => /* @__PURE__ */ t(
+              o,
               {
                 sx: {
+                  flexShrink: 0,
                   width: { xs: 120, sm: 120, md: 120, lg: 166 },
                   height: { xs: 120, sm: 120, md: 120, lg: 166 }
                 },
-                flexShrink: 0,
-                children: /* @__PURE__ */ jsx(
-                  NFTDisplay,
+                children: /* @__PURE__ */ t(
+                  P,
                   {
-                    data: item.display,
-                    address: item.address,
-                    inset: true,
+                    data: a.display,
+                    address: a.address,
+                    inset: !0,
                     imageFilter: {
                       imageFilter: "resize",
                       w: "500",
@@ -96,27 +105,42 @@ export default function Nft({ user }) {
                   }
                 )
               },
-              item.address
+              a.address
             )),
-            data?.assets?.length === 0 && !loading && /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", height: "100%", children: /* @__PURE__ */ jsx(Empty, { children: t("common.noNFT") }) })
+            ((n = s == null ? void 0 : s.assets) == null ? void 0 : n.length) === 0 && !i && /* @__PURE__ */ t(
+              o,
+              {
+                sx: {
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  width: "100%",
+                  height: "100%"
+                },
+                children: /* @__PURE__ */ t(R, { children: m("common.noNFT") })
+              }
+            )
           ]
         }
       ),
-      dataPage.next || paging.page > 1 ? /* @__PURE__ */ jsx(
-        Pagination,
+      l.next || e.page > 1 ? /* @__PURE__ */ t(
+        k,
         {
           sx: {
             display: "flex",
             justifyContent: "center",
             mt: 2
           },
-          page: paging.page,
-          onChange: handlePageChange,
-          count: Math.ceil(dataPage.total / paging.size),
+          page: e.page,
+          onChange: f,
+          count: Math.ceil(l.total / e.size),
           size: "small"
         }
       ) : null
     ] });
-  }, [loading, dataPage, paging.page, paging.size, handlePageChange]);
-  return /* @__PURE__ */ jsx(Box, { sx: { border: "1px solid", borderColor: "divider", borderRadius: 1, p: 2, mb: 5 }, children: content });
+  }, [i, l, e.page, e.size, f]);
+  return /* @__PURE__ */ t(o, { sx: { border: "1px solid", borderColor: "divider", borderRadius: 1, p: 2, mb: 5 }, children: h });
 }
+export {
+  H as default
+};