@arcblock/ux 2.13.70 → 3.0.0

package/lib/UserCard/Content/basic.js

@@ -1,331 +1,248 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import useTheme from '@mui/material/styles/useTheme';
-import { useCreation, useMemoizedFn } from 'ahooks';
-import styled from '@emotion/styled';
-import isArray from 'lodash/isArray';
-import { Icon as IconifyIcon } from '@iconify/react';
-import infoCircleIcon from '@iconify-icons/tabler/info-circle';
-import LinkIcon from '@arcblock/icons/lib/Link';
-import PhoneIcon from '@arcblock/icons/lib/Phone';
-import LocationIcon from '@arcblock/icons/lib/Location';
-import EmailIcon from '@arcblock/icons/lib/Email';
-import TimezoneIcon from '@arcblock/icons/lib/Timezone';
-import { joinURL, withoutProtocol } from 'ufo';
-import { useState, useMemo, useCallback } from 'react';
-import Clock from './clock';
-const IconMap = {
-  timezone: TimezoneIcon,
-  email: EmailIcon,
-  phone: PhoneIcon,
-  location: LocationIcon,
-  link: LinkIcon
+import { jsxs as b, jsx as o } from "react/jsx-runtime";
+import { Typography as k, Box as u, Grid as D, useTheme as x } from "@mui/material";
+import { useCreation as h, useMemoizedFn as A } from "ahooks";
+import B from "@emotion/styled";
+import F from "lodash/isArray";
+import { Icon as T } from "@iconify/react";
+import $ from "@iconify-icons/tabler/info-circle";
+import S from "@arcblock/icons/lib/Link";
+import R from "@arcblock/icons/lib/Phone";
+import U from "@arcblock/icons/lib/Location";
+import M from "@arcblock/icons/lib/Email";
+import E from "@arcblock/icons/lib/Timezone";
+import { joinURL as P, withoutProtocol as V } from "ufo";
+import { useCallback as G, useMemo as L, useState as Z } from "react";
+import q from "./clock.js";
+const H = {
+  timezone: E,
+  email: M,
+  phone: R,
+  location: U,
+  link: S
 };
-
-/**
- * 格式化链接显示
- * 对于 http/https 协议只显示域名，其他协议显示完整链接
- */
-function formatLinkDisplay(link) {
-  return withoutProtocol(link);
+function J(e) {
+  return V(e);
 }
-
-/**
- * dark mode 下，转换 icon 颜色
- */
-function convertIconColor(isDark) {
-  return isDark ? {
-    filter: 'brightness(0) saturate(100%) invert(1)'
+function v(e) {
+  return e ? {
+    filter: "brightness(0) saturate(100%) invert(1)"
   } : {};
 }
-const iconSize = {
+const y = {
   width: 16,
   height: 16
 };
-
-// 定义渲染项的类型
-
-function TimeZoneField({
-  value
-}) {
-  const theme = useTheme();
-  const isDark = theme.palette.mode === 'dark';
-  return /*#__PURE__*/_jsxs(Box, {
-    display: "flex",
-    alignItems: "center",
-    gap: 1,
-    className: "user-card__timezone-field",
-    children: [/*#__PURE__*/_jsx(TimezoneIcon, {
-      ...iconSize,
-      style: convertIconColor(isDark)
-    }), /*#__PURE__*/_jsx(Clock, {
-      value: value,
-      variant: "body2",
-      color: "grey.800"
-    })]
-  });
+function K({ value: e }) {
+  const a = x().palette.mode === "dark";
+  return /* @__PURE__ */ b(
+    u,
+    {
+      className: "user-card__timezone-field",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1
+      },
+      children: [
+        /* @__PURE__ */ o(E, { ...y, style: v(a) }),
+        /* @__PURE__ */ o(q, { value: e, variant: "body2", color: "grey.800" })
+      ]
+    }
+  );
 }
-function LinkField({
-  value
-}) {
-  const [useFallback, setUseFallback] = useState(false);
-  const theme = useTheme();
-  const isDark = theme.palette.mode === 'dark';
-  const faviconUrl = useCreation(() => {
+function O({ value: e }) {
+  const [m, a] = Z(!1), c = x().palette.mode === "dark", l = h(() => {
     try {
-      const url = new URL(value);
-      return joinURL(url.origin, 'favicon.ico');
-    } catch (e) {
-      return '';
+      const p = new URL(e);
+      return P(p.origin, "favicon.ico");
+    } catch {
+      return "";
     }
-  }, [value]);
-  const handleImageError = () => {
-    setUseFallback(true);
-  };
-  return /*#__PURE__*/_jsxs(Box, {
-    display: "flex",
-    alignItems: "center",
-    gap: 1,
-    className: "user-card__link-field",
-    children: [faviconUrl && !useFallback ? /*#__PURE__*/_jsx("img", {
-      src: faviconUrl,
-      alt: "site icon",
-      style: {
-        width: 16,
-        height: 16,
-        objectFit: 'contain'
+  }, [e]);
+  return /* @__PURE__ */ b(
+    u,
+    {
+      className: "user-card__link-field",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1
       },
-      onError: handleImageError
-    }) : /*#__PURE__*/_jsx(LinkIcon, {
-      ...iconSize,
-      style: convertIconColor(isDark)
-    }), /*#__PURE__*/_jsx(LineText, {
-      variant: "body2",
-      color: "grey.800",
-      children: /*#__PURE__*/_jsx(Typography, {
-        component: "a",
-        href: value,
-        style: {
-          textDecoration: 'none',
-          color: 'inherit',
-          fontSize: 'inherit'
-        },
-        target: "_blank",
-        variant: "body2",
-        color: "grey.800",
-        rel: "noopener noreferrer",
-        children: formatLinkDisplay(value)
-      })
-    })]
-  });
+      children: [
+        l && !m ? /* @__PURE__ */ o(
+          "img",
+          {
+            src: l,
+            alt: "site icon",
+            style: { width: 16, height: 16, objectFit: "contain" },
+            onError: () => {
+              a(!0);
+            }
+          }
+        ) : /* @__PURE__ */ o(S, { ...y, style: v(c) }),
+        /* @__PURE__ */ o(I, { variant: "body2", color: "grey.800", children: /* @__PURE__ */ o(
+          k,
+          {
+            component: "a",
+            href: e,
+            style: { textDecoration: "none", color: "inherit", fontSize: "inherit" },
+            target: "_blank",
+            variant: "body2",
+            rel: "noopener noreferrer",
+            sx: {
+              color: "grey.800"
+            },
+            children: J(e)
+          }
+        ) })
+      ]
+    }
+  );
 }
-function BasicField({
-  field,
-  value,
-  children
-}) {
-  const Icon = IconMap[field];
-  const theme = useTheme();
-  const isDark = theme.palette.mode === 'dark';
-  const iconColor = convertIconColor(isDark);
-  return /*#__PURE__*/_jsxs(Box, {
-    display: "flex",
-    alignItems: "center",
-    gap: 1,
-    className: `user-card__${field}-field`,
-    children: [Icon ? /*#__PURE__*/_jsx(Icon, {
-      ...iconSize,
-      style: iconColor
-    }) : /*#__PURE__*/_jsx(IconifyIcon, {
-      icon: infoCircleIcon,
-      ...iconSize,
-      ...iconColor
-    }), /*#__PURE__*/_jsx(LineText, {
-      variant: "body2",
-      color: "grey.800",
-      children: children ?? value
-    })]
-  }, field);
+function N({ field: e, value: m, children: a }) {
+  const f = H[e], l = x().palette.mode === "dark", s = v(l);
+  return /* @__PURE__ */ b(
+    u,
+    {
+      className: `user-card__${e}-field`,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1
+      },
+      children: [
+        f ? /* @__PURE__ */ o(f, { ...y, style: s }) : /* @__PURE__ */ o(T, { icon: $, ...y, ...s }),
+        /* @__PURE__ */ o(I, { variant: "body2", color: "grey.800", children: a ?? m })
+      ]
+    },
+    e
+  );
 }
-function BasicContent({
-  user,
-  isFull = false,
-  renderFields
-}) {
-  const fields = useCreation(() => {
-    return renderFields ?? ['bio', 'email', 'phone', 'location', 'timezone', 'link'];
-  }, [renderFields]);
-  const includeBio = useCreation(() => {
-    return fields.includes('bio');
-  }, [fields]);
-  const metadata = useCreation(() => {
-    return user.metadata ?? {
-      joinedAt: user?.createdAt,
-      email: user?.email,
-      phone: {
-        country: 'cn',
-        phoneNumber: user?.phone ?? ''
-      }
-    };
-  }, [user]);
-  const address = useCreation(() => {
-    return user.address;
-  }, [user.address]);
-  const getFieldValue = useCallback(field => {
-    if (!field) return '';
-    switch (field) {
-      case 'bio':
-        return user.metadata?.bio || '';
-      case 'email':
-        return metadata.email || user.email || '';
-      case 'phone':
-        return metadata.phone?.phoneNumber || user.phone || '';
-      case 'location':
-        return address?.city || metadata.location || '';
-      case 'timezone':
-        return metadata.timezone || '';
-      case 'link':
-        return metadata.links?.map(link => link.url).filter(Boolean) || [];
-      default:
-        return user[field] || '';
+function de({ user: e, renderFields: m }) {
+  var C;
+  const a = h(() => m ?? ["bio", "email", "phone", "location", "timezone", "link"], [m]), f = h(() => a.includes("bio"), [a]), c = h(() => e.metadata ?? {
+    joinedAt: e == null ? void 0 : e.createdAt,
+    email: e == null ? void 0 : e.email,
+    phone: {
+      country: "cn",
+      phoneNumber: (e == null ? void 0 : e.phone) ?? ""
     }
-  }, [user, metadata, address]);
-
-  // 计算实际可见的字段数量和渲染元素数量
-  const {
-    effectiveRenderCount
-  } = useMemo(() => {
-    const visible = fields.filter(field => {
-      if (field === 'bio') return false; // bio field is handled separately
-      const value = getFieldValue(field);
-      if (value === undefined || value === null || value === '') return false;
-      if (isArray(value)) {
-        return value.length > 0;
+  }, [e]), l = h(() => e.address, [e.address]), s = G(
+    (t) => {
+      var i, n, r;
+      if (!t) return "";
+      switch (t) {
+        case "bio":
+          return ((i = e.metadata) == null ? void 0 : i.bio) || "";
+        case "email":
+          return c.email || e.email || "";
+        case "phone":
+          return ((n = c.phone) == null ? void 0 : n.phoneNumber) || e.phone || "";
+        case "location":
+          return (l == null ? void 0 : l.city) || c.location || "";
+        case "timezone":
+          return c.timezone || "";
+        case "link":
+          return ((r = c.links) == null ? void 0 : r.map((d) => d.url).filter(Boolean)) || [];
+        default:
+          return e[t] || "";
       }
-      return String(value).trim().length > 0;
-    });
-
-    // 计算实际渲染数量
-    const renderCount = visible.reduce((count, field) => {
-      const value = getFieldValue(field);
-      return count + (Array.isArray(value) ? value.filter(item => item && String(item).trim()).length : 1);
+    },
+    [e, c, l]
+  ), { effectiveRenderCount: p } = L(() => {
+    const t = a.filter((n) => {
+      if (n === "bio") return !1;
+      const r = s(n);
+      return r == null || r === "" ? !1 : F(r) ? r.length > 0 : String(r).trim().length > 0;
+    }), i = t.reduce((n, r) => {
+      const d = s(r);
+      return n + (Array.isArray(d) ? d.filter((_) => _ && String(_).trim()).length : 1);
     }, 0);
-    return {
-      visibleFields: visible,
-      effectiveRenderCount: renderCount
-    };
-  }, [fields, getFieldValue]);
-
-  // 判断是否需要使用两列布局
-  const useDoubleColumn = effectiveRenderCount > 4;
-  const isValidValue = useMemoizedFn(value => value !== undefined && value !== null && String(value).trim().length > 0);
-
-  // 准备要渲染的所有元素项
-  const renderItems = useMemo(() => {
-    const items = [];
-
-    // 遍历有效字段，展开数组字段为单独的渲染项
-    fields.forEach(field => {
-      if (field === 'bio') return; // bio field is handled separately
-      const value = getFieldValue(field);
-      if (!value) return;
-      if (isArray(value)) {
-        // 数组类型字段，每个有效项生成一个渲染元素
-        value.forEach((item, index) => {
-          if (isValidValue(item)) {
-            items.push({
-              field,
-              value: item,
-              key: `${field}-${index}`
-            });
-          }
+    return { visibleFields: t, effectiveRenderCount: i };
+  }, [a, s]), j = p > 4, g = A(
+    (t) => t != null && String(t).trim().length > 0
+  ), w = L(() => {
+    const t = [];
+    return a.forEach((i) => {
+      if (i === "bio") return;
+      const n = s(i);
+      n && (F(n) ? n.forEach((r, d) => {
+        g(r) && t.push({
+          field: i,
+          value: r,
+          key: `${i}-${d}`
         });
-      } else if (isValidValue(value)) {
-        // 非数组类型字段，生成一个渲染元素
-        items.push({
-          field,
-          value,
-          key: field
-        });
-      }
-    });
-    return items;
-  }, [fields, getFieldValue, isValidValue]);
-  if (fields.length === 0) {
+      }) : g(n) && t.push({
+        field: i,
+        value: n,
+        key: i
+      }));
+    }), t;
+  }, [a, s, g]);
+  if (a.length === 0)
     return null;
-  }
-  const renderItem = item => {
-    const {
-      field,
-      value,
-      key
-    } = item;
-    switch (field) {
-      case 'link':
-        return /*#__PURE__*/_jsx(LinkField, {
-          value: value
-        }, key);
-      case 'timezone':
-        return /*#__PURE__*/_jsx(TimeZoneField, {
-          value: value
-        }, key);
-      case 'email':
-        return /*#__PURE__*/_jsx(BasicField, {
-          field: field,
-          value: value
-          // eslint-disable-next-line react/no-children-prop
-          ,
-          children: /*#__PURE__*/_jsx(Typography, {
-            component: "a",
-            href: `mailto:${value}`,
-            rel: "noopener noreferrer",
-            referrerPolicy: "no-referrer",
-            style: {
-              color: 'inherit',
-              textDecoration: 'none',
-              fontSize: 'inherit'
-            },
-            children: value
-          })
-        });
+  const z = (t) => {
+    const { field: i, value: n, key: r } = t;
+    switch (i) {
+      case "link":
+        return /* @__PURE__ */ o(O, { value: n }, r);
+      case "timezone":
+        return /* @__PURE__ */ o(K, { value: n }, r);
+      case "email":
+        return /* @__PURE__ */ o(
+          N,
+          {
+            field: i,
+            value: n,
+            children: /* @__PURE__ */ o(
+              k,
+              {
+                component: "a",
+                href: `mailto:${n}`,
+                rel: "noopener noreferrer",
+                referrerPolicy: "no-referrer",
+                style: {
+                  color: "inherit",
+                  textDecoration: "none",
+                  fontSize: "inherit"
+                },
+                children: n
+              }
+            )
+          }
+        );
       default:
-        return /*#__PURE__*/_jsx(BasicField, {
-          field: field,
-          value: value
-        }, key);
+        return /* @__PURE__ */ o(N, { field: i, value: n }, r);
     }
   };
-  return /*#__PURE__*/_jsxs(Box, {
-    mt: 1,
-    display: "flex",
-    flexDirection: "column",
-    gap: 1.5,
-    className: "user-card__basic-content",
-    children: [includeBio && user.metadata?.bio && /*#__PURE__*/_jsx(LineText, {
-      variant: "body2",
-      color: "grey.800",
-      className: "user-card__bio-field",
-      children: user.metadata.bio
-    }), useDoubleColumn ? /*#__PURE__*/_jsx(Grid, {
-      container: true,
-      spacing: 0.5,
-      children: renderItems.map(item => /*#__PURE__*/_jsx(Grid, {
-        item: true,
-        xs: 6,
-        children: renderItem(item)
-      }, item.key))
-    }) : /*#__PURE__*/_jsx(Box, {
-      display: "flex",
-      flexDirection: "column",
-      gap: 0.5,
-      children: renderItems.map(item => renderItem(item))
-    })]
-  });
+  return /* @__PURE__ */ b(
+    u,
+    {
+      className: "user-card__basic-content",
+      sx: {
+        mt: 1,
+        display: "flex",
+        flexDirection: "column",
+        gap: 1.5
+      },
+      children: [
+        f && ((C = e.metadata) == null ? void 0 : C.bio) && /* @__PURE__ */ o(I, { variant: "body2", color: "grey.800", className: "user-card__bio-field", children: e.metadata.bio }),
+        j ? /* @__PURE__ */ o(D, { container: !0, spacing: 0.5, children: w.map((t) => /* @__PURE__ */ o(D, { size: 6, children: z(t) }, t.key)) }) : /* @__PURE__ */ o(
+          u,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 0.5
+            },
+            children: w.map((t) => z(t))
+          }
+        )
+      ]
+    }
+  );
 }
-export default BasicContent;
-const LineText = styled(Typography)`
+const I = B(k)`
   flex: 1;
   display: -webkit-box;
   line-height: 1.5;
@@ -334,4 +251,7 @@ const LineText = styled(Typography)`
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
-`;
+`;
+export {
+  de as default
+};

package/lib/UserCard/Content/clock.d.ts

@@ -1,4 +1,6 @@
+import { SxProps } from '@mui/material';
 export default function Clock({ value, ...props }: {
     value: string;
+    sx?: SxProps;
     [key: string]: any;
 }): import("react/jsx-runtime").JSX.Element;