@blocklet/ui-react 2.13.70 → 3.0.1

package/lib/UserCenter/components/user-info/address.js

@@ -1,12 +1,12 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Box } from "@mui/material";
-import { useMemoizedFn } from "ahooks";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import CountrySelect from "@arcblock/ux/lib/PhoneInput/country-select";
-import { translations } from "../../libs/locales.js";
-import EditableField from "../editable-field.js";
-const selectStyle = {
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { Box as p } from "@mui/material";
+import { useMemoizedFn as u } from "ahooks";
+import { translate as f } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext as m } from "@arcblock/ux/lib/Locale/context";
+import y from "@arcblock/ux/lib/PhoneInput/country-select";
+import { translations as b } from "../../libs/locales.js";
+import n from "../editable-field.js";
+const v = {
   width: "100%",
   px: 2,
   py: 1,
@@ -26,100 +26,120 @@ const selectStyle = {
     alignItems: "center"
   }
 };
-export default function AddressEditor({
-  address,
-  errors,
-  handleChange,
-  defaultCountry
+function I({
+  address: r,
+  errors: t,
+  handleChange: i,
+  defaultCountry: d
 }) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, mt: 2, children: [
-    /* @__PURE__ */ jsx(
-      EditableField,
-      {
-        placeholder: t("profile.address.country"),
-        value: address.country || defaultCountry,
-        editable: true,
-        errorMsg: errors.country,
-        label: t("profile.address.country"),
-        children: /* @__PURE__ */ jsx(
-          CountrySelect,
+  const { locale: s } = m(), o = u((e, c = {}) => f(b, e, s, "en", c));
+  return /* @__PURE__ */ a(
+    p,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 2,
+        mt: 2
+      },
+      children: [
+        /* @__PURE__ */ l(
+          n,
           {
-            value: address.country || defaultCountry,
-            onChange: (v) => handleChange("country", v),
-            displayEmpty: true,
-            variant: "outlined",
-            selectCountryProps: {
-              hideDialCode: true
+            placeholder: o("profile.address.country"),
+            value: r.country || d,
+            editable: !0,
+            errorMsg: t.country,
+            label: o("profile.address.country"),
+            children: /* @__PURE__ */ l(
+              y,
+              {
+                value: r.country || d,
+                onChange: (e) => i("country", e),
+                displayEmpty: !0,
+                variant: "outlined",
+                selectCountryProps: {
+                  hideDialCode: !0
+                },
+                sx: v
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ a(
+          p,
+          {
+            sx: {
+              display: "flex",
+              gap: 2
             },
-            sx: selectStyle
+            children: [
+              /* @__PURE__ */ l(
+                n,
+                {
+                  value: r.province || "",
+                  onChange: (e) => i("province", e),
+                  placeholder: o("profile.address.province"),
+                  label: o("profile.address.province"),
+                  editable: !0,
+                  errorMsg: t.province
+                }
+              ),
+              /* @__PURE__ */ l(
+                n,
+                {
+                  value: r.city || "",
+                  onChange: (e) => i("city", e),
+                  placeholder: o("profile.address.city"),
+                  label: o("profile.address.city"),
+                  editable: !0,
+                  errorMsg: t.city
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ l(
+          n,
+          {
+            value: r.line1 || "",
+            onChange: (e) => i("line1", e),
+            placeholder: o("profile.address.line1"),
+            label: o("profile.address.line1"),
+            component: "textarea",
+            editable: !0,
+            rows: 2,
+            errorMsg: t.line1
+          }
+        ),
+        /* @__PURE__ */ l(
+          n,
+          {
+            value: r.line2 || "",
+            onChange: (e) => i("line2", e),
+            placeholder: o("profile.address.line2"),
+            label: o("profile.address.line2"),
+            component: "textarea",
+            editable: !0,
+            rows: 2,
+            errorMsg: t.line2
+          }
+        ),
+        /* @__PURE__ */ l(
+          n,
+          {
+            value: r.postalCode || "",
+            onChange: (e) => i("postalCode", e),
+            placeholder: o("profile.address.postalCode"),
+            label: o("profile.address.postalCode"),
+            editable: !0,
+            errorMsg: t.postalCode
           }
         )
-      }
-    ),
-    /* @__PURE__ */ jsxs(Box, { display: "flex", gap: 2, children: [
-      /* @__PURE__ */ jsx(
-        EditableField,
-        {
-          value: address.province || "",
-          onChange: (value) => handleChange("province", value),
-          placeholder: t("profile.address.province"),
-          label: t("profile.address.province"),
-          editable: true,
-          errorMsg: errors.province
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        EditableField,
-        {
-          value: address.city || "",
-          onChange: (value) => handleChange("city", value),
-          placeholder: t("profile.address.city"),
-          label: t("profile.address.city"),
-          editable: true,
-          errorMsg: errors.city
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      EditableField,
-      {
-        value: address.line1 || "",
-        onChange: (value) => handleChange("line1", value),
-        placeholder: t("profile.address.line1"),
-        label: t("profile.address.line1"),
-        component: "textarea",
-        editable: true,
-        rows: 2,
-        errorMsg: errors.line1
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      EditableField,
-      {
-        value: address.line2 || "",
-        onChange: (value) => handleChange("line2", value),
-        placeholder: t("profile.address.line2"),
-        label: t("profile.address.line2"),
-        component: "textarea",
-        editable: true,
-        rows: 2,
-        errorMsg: errors.line2
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      EditableField,
-      {
-        value: address.postalCode || "",
-        onChange: (value) => handleChange("postalCode", value),
-        placeholder: t("profile.address.postalCode"),
-        label: t("profile.address.postalCode"),
-        editable: true,
-        errorMsg: errors.postalCode
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
+export {
+  I as default
+};

package/lib/UserCenter/components/user-info/index.js

@@ -1,4 +1,10 @@
-export { default as UserBasicInfo } from "./user-basic-info.js";
-export { default as UserInfoItem } from "./user-info-item.js";
-export { default as UserInfo } from "./user-info.js";
-export { default as SwitchRole } from "./switch-role.js";
+import { default as f } from "./user-basic-info.js";
+import { default as t } from "./user-info-item.js";
+import { default as s } from "./user-info.js";
+import { default as m } from "./switch-role.js";
+export {
+  m as SwitchRole,
+  f as UserBasicInfo,
+  s as UserInfo,
+  t as UserInfoItem
+};

package/lib/UserCenter/components/user-info/link-preview-input.js

@@ -1,188 +1,174 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Button, FormControl, IconButton, styled, TextField, Typography } from "@mui/material";
-import RemoveIcon from "@mui/icons-material/Remove";
-import AddIcon from "@mui/icons-material/Add";
-import useTheme from "@mui/material/styles/useTheme";
-import { useEffect, useMemo, useState } from "react";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import { useMemoizedFn } from "ahooks";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import LinkIcon from "@arcblock/icons/lib/Link";
-import { mergeSx } from "@arcblock/ux/lib/Util/style";
-import { joinURL, withoutProtocol } from "ufo";
-import { isValidUrl } from "./utils.js";
-import { translations } from "../../libs/locales.js";
-import { commonInputStyle, inputFieldStyle } from "../editable-field.js";
-function formatLinkDisplay(link) {
-  return withoutProtocol(link);
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { useState as v, useMemo as b } from "react";
+import { styled as L, Box as d, Typography as w, IconButton as C, Button as I, useTheme as k, FormControl as D, TextField as F } from "@mui/material";
+import { Remove as S, Add as B } from "@mui/icons-material";
+import { translate as E } from "@arcblock/ux/lib/Locale/util";
+import { useMemoizedFn as T } from "ahooks";
+import { useLocaleContext as U } from "@arcblock/ux/lib/Locale/context";
+import j from "@arcblock/icons/lib/Link";
+import { mergeSx as z } from "@arcblock/ux/lib/Util/style";
+import { withoutProtocol as M } from "ufo";
+import { isValidUrl as f } from "./utils.js";
+import { translations as P } from "../../libs/locales.js";
+import { inputFieldStyle as R, commonInputStyle as W } from "../editable-field.js";
+function _(e) {
+  return M(e);
 }
-function LinkInput({
-  value,
-  onChange,
-  errorMsg
+function A({
+  value: e,
+  onChange: n,
+  errorMsg: i
 }) {
-  const handleUrlChange = (event) => {
-    const inputValue = event.target.value;
-    onChange(inputValue);
-  };
-  return /* @__PURE__ */ jsx(FormControl, { fullWidth: true, children: /* @__PURE__ */ jsx(
-    TextField,
+  return /* @__PURE__ */ t(D, { fullWidth: !0, children: /* @__PURE__ */ t(
+    F,
     {
       variant: "outlined",
-      value,
-      onChange: handleUrlChange,
-      fullWidth: true,
-      error: !!errorMsg,
-      helperText: errorMsg,
-      sx: mergeSx(inputFieldStyle, !errorMsg ? commonInputStyle : {})
+      value: e,
+      onChange: (a) => {
+        const c = a.target.value;
+        n(c);
+      },
+      fullWidth: !0,
+      error: !!i,
+      helperText: i,
+      sx: z(R, i ? {} : W)
     }
   ) });
 }
-function DynamicLinkForm({ links = [], onChange }) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const [errors, setErrors] = useState([false]);
-  const isLastError = useMemo(() => {
-    const lastLink = links[links.length - 1];
-    return !isValidUrl(lastLink) || errors.length > 0 && errors[errors.length - 1];
-  }, [errors, links]);
-  const handleAddLink = () => {
-    if (links.length < 5 || !isLastError) {
-      onChange([...links, ""]);
-    }
-  };
-  const handleRemoveLink = (index) => {
-    const updatedLinks = links.filter((_, i) => i !== index);
-    const updatedErrors = errors.filter((_, i) => i !== index);
-    setErrors(updatedErrors);
-    onChange(updatedLinks);
+function V({ links: e = [], onChange: n }) {
+  const { locale: i } = U(), l = T((o, r = {}) => E(P, o, i, "en", r)), [a, c] = v([!1]), u = b(() => {
+    const o = e[e.length - 1];
+    return !f(o) || a.length > 0 && a[a.length - 1];
+  }, [a, e]), x = () => {
+    (e.length < 5 || !u) && n([...e, ""]);
+  }, g = (o) => {
+    const r = e.filter((p, h) => h !== o), s = a.filter((p, h) => h !== o);
+    c(s), n(r);
+  }, y = (o, r) => {
+    const s = [...e];
+    s[o] = r;
+    const p = [...a];
+    p[o] = !!(r && !f(r)), c(p), n(s);
   };
-  const handleInputChange = (index, value) => {
-    const updatedLinks = [...links];
-    updatedLinks[index] = value;
-    const updatedErrors = [...errors];
-    updatedErrors[index] = !!(value && !isValidUrl(value));
-    setErrors(updatedErrors);
-    onChange(updatedLinks);
-  };
-  return /* @__PURE__ */ jsxs(Box, { width: "100%", children: [
-    /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, sx: { mb: 0, fontSize: "12px", color: "text.primary" }, children: t("profile.socialMedia") }) }),
-    links.map((link, index) => (
-      // eslint-disable-next-line react/no-array-index-key
-      /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "flex-start", mb: 1, children: [
-        /* @__PURE__ */ jsx(
-          LinkInput,
+  return /* @__PURE__ */ m(
+    d,
+    {
+      sx: {
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ t(
+          d,
           {
-            value: link,
-            onChange: (value) => handleInputChange(index, value),
-            errorMsg: errors[index] ? t("profile.invalidURL") : ""
+            sx: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              gap: 1
+            },
+            children: /* @__PURE__ */ t(w, { variant: "subtitle1", gutterBottom: !0, sx: { mb: 0, fontSize: "12px", color: "text.primary" }, children: l("profile.socialMedia") })
           }
         ),
-        /* @__PURE__ */ jsx(IconButton, { onClick: () => handleRemoveLink(index), children: /* @__PURE__ */ jsx(RemoveIcon, { sx: { color: "text.secondary" } }) })
-      ] }, index)
-    )),
-    links.length < 5 && /* @__PURE__ */ jsxs(
-      Button,
-      {
-        fullWidth: true,
-        variant: "outlined",
-        disabled: isLastError,
-        onClick: handleAddLink,
-        size: "small",
-        sx: {
-          height: "40px",
-          border: "1px dashed",
-          borderColor: "grey.100",
-          color: "text.primary",
-          "&:hover": {
-            borderColor: "grey.100",
-            backgroundColor: "action.hover"
+        e.map((o, r) => /* @__PURE__ */ m(
+          d,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "flex-start",
+              mb: 1
+            },
+            children: [
+              /* @__PURE__ */ t(
+                A,
+                {
+                  value: o,
+                  onChange: (s) => y(r, s),
+                  errorMsg: a[r] ? l("profile.invalidURL") : ""
+                }
+              ),
+              /* @__PURE__ */ t(C, { onClick: () => g(r), children: /* @__PURE__ */ t(S, { sx: { color: "text.secondary" } }) })
+            ]
           },
-          "&.Mui-disabled": {
-            borderStyle: "dashed"
+          r
+        )),
+        e.length < 5 && /* @__PURE__ */ m(
+          I,
+          {
+            fullWidth: !0,
+            variant: "outlined",
+            disabled: u,
+            onClick: x,
+            size: "small",
+            sx: {
+              height: "40px",
+              border: "1px dashed",
+              borderColor: "grey.100",
+              color: "text.primary",
+              "&:hover": {
+                borderColor: "grey.100",
+                backgroundColor: "action.hover"
+              },
+              "&.Mui-disabled": {
+                borderStyle: "dashed"
+              }
+            },
+            children: [
+              /* @__PURE__ */ t(B, {}),
+              " ",
+              /* @__PURE__ */ t("span", { children: l("profile.addLink") })
+            ]
           }
-        },
-        children: [
-          /* @__PURE__ */ jsx(AddIcon, {}),
-          " ",
-          /* @__PURE__ */ jsx("span", { children: t("profile.addLink") })
-        ]
-      }
-    )
-  ] });
-}
-function FaviconPreview({ link }) {
-  const [favicon, setFavicon] = useState("");
-  const [iconError, setIconError] = useState(false);
-  const theme = useTheme();
-  const isDark = theme.palette.mode === "dark";
-  useEffect(() => {
-    try {
-      if (link) {
-        const url = new URL(link);
-        const faviconUrl = joinURL(url.origin, "favicon.ico");
-        const img = new Image();
-        img.src = faviconUrl;
-        img.onload = () => {
-          setFavicon(faviconUrl);
-          setIconError(false);
-        };
-        img.onerror = () => {
-          setIconError(true);
-          setFavicon("");
-        };
-      } else {
-        setIconError(true);
-        setFavicon("");
-      }
-    } catch (error) {
-      setIconError(true);
+        )
+      ]
     }
-  }, [link]);
-  if (!link) {
-    return null;
-  }
-  if (iconError || !favicon) {
-    return /* @__PURE__ */ jsx(LinkIcon, { width: 20, height: 20, style: { filter: isDark ? "brightness(0) saturate(100%) invert(1)" : "none" } });
-  }
-  return /* @__PURE__ */ jsx("img", { src: favicon, alt: "Favicon", width: 20, height: 20 });
+  );
+}
+function $({ link: e }) {
+  const i = k().palette.mode === "dark";
+  return e ? /* @__PURE__ */ t(j, { width: 20, height: 20, style: { filter: i ? "brightness(0) saturate(100%) invert(1)" : "none" } }) : null;
 }
-export function LinkPreviewInput({
-  editable = false,
-  links = [],
-  onChange
+function oe({
+  editable: e = !1,
+  links: n = [],
+  onChange: i
 }) {
-  if (editable) {
-    return /* @__PURE__ */ jsx(DynamicLinkForm, { links, onChange });
-  }
-  return /* @__PURE__ */ jsx(Box, { width: "100%", display: "flex", flexDirection: "column", gap: 2, children: links.map((link) => /* @__PURE__ */ jsxs(
-    Box,
+  return e ? /* @__PURE__ */ t(V, { links: n, onChange: i }) : /* @__PURE__ */ t(
+    d,
     {
-      display: "flex",
-      alignItems: "center",
-      gap: 1,
       sx: {
-        overflow: "hidden",
-        width: "100%"
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        gap: 2
       },
-      children: [
-        /* @__PURE__ */ jsx(FaviconPreview, { link }),
-        /* @__PURE__ */ jsx(LinkDiv, { children: /* @__PURE__ */ jsx(Box, { component: "a", href: link, style: { textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: formatLinkDisplay(link) }) })
-      ]
-    },
-    link
-  )) });
+      children: n.map((l) => /* @__PURE__ */ m(
+        d,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            overflow: "hidden",
+            width: "100%"
+          },
+          children: [
+            /* @__PURE__ */ t($, { link: l }),
+            /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(d, { component: "a", href: l, style: { textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: _(l) }) })
+          ]
+        },
+        l
+      ))
+    }
+  );
 }
-const LinkDiv = styled("span")`
+const q = L("span")`
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   &,
   & > * {
-    color: ${({ theme }) => theme.palette.text.primary};
+    color: ${({ theme: e }) => e.palette.text.primary};
   }
 
   & > * {
@@ -193,3 +179,6 @@ const LinkDiv = styled("span")`
     margin-left: 8px;
   }
 `;
+export {
+  oe as LinkPreviewInput
+};