@blocklet/ui-react 2.12.8 → 2.12.10

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

@@ -0,0 +1,458 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import Box from "@mui/material/Box";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import SwipeableDrawer from "@mui/material/SwipeableDrawer";
+import Backdrop from "@mui/material/Backdrop";
+import styled from "@emotion/styled";
+import { joinURL } from "ufo";
+import Button from "@arcblock/ux/lib/Button";
+import cloneDeep from "lodash/cloneDeep";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { useCreation, useMemoizedFn, useReactive } from "ahooks";
+import { useMemo, useRef, useState, memo, forwardRef, useEffect, lazy } from "react";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import isEmail from "validator/lib/isEmail";
+import isMobilePhone from "validator/lib/isMobilePhone";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { useBrowser } from "@arcblock/react-hooks";
+import { translations } from "../../libs/locales.js";
+import EditableField from "../editable-field.js";
+import { LinkPreviewInput } from "./link-preview-input.js";
+import { getTimezones } from "./utils.js";
+import Clock from "./clock.js";
+const LocationIcon = lazy(() => import("@arcblock/icons/lib/Location"));
+const TimezoneIcon = lazy(() => import("@arcblock/icons/lib/Timezone"));
+const EmailIcon = lazy(() => import("@arcblock/icons/lib/Email"));
+const PhoneIcon = lazy(() => import("@arcblock/icons/lib/Phone"));
+const ArrowDownwardIcon = lazy(() => import("@arcblock/icons/lib/ArrowDown"));
+const defaultButtonStyle = {
+  color: colors.foregroundsFgBase,
+  borderColor: colors.strokeBorderBase,
+  backgroundColor: colors.buttonsButtonNeutral,
+  "&:hover": {
+    borderColor: colors.strokeBorderBase,
+    backgroundColor: colors.buttonsButtonNeutralHover
+  },
+  py: 0.5,
+  borderRadius: 2
+};
+const primaryButtonStyle = {
+  color: colors.buttonsButtonNeutral,
+  borderColor: colors.foregroundsFgInteractive,
+  backgroundColor: colors.foregroundsFgInteractive,
+  "&:hover": {
+    borderColor: colors.foregroundsFgInteractive,
+    backgroundColor: colors.foregroundsFgInteractive
+  },
+  py: 0.5,
+  borderRadius: 2
+};
+const iconSize = {
+  width: 20,
+  height: 20
+};
+const bioMaxLength = 200;
+const BackdropWrap = memo(
+  forwardRef(function BackdropWrap2(backdropProps, ref) {
+    return /* @__PURE__ */ createElement(
+      Backdrop,
+      {
+        ref,
+        component: "div",
+        style: {
+          backgroundColor: "rgba(0, 0, 0, 0.6)",
+          backdropFilter: "blur(3px)",
+          touchAction: "none"
+        },
+        ...backdropProps,
+        key: "background"
+      }
+    );
+  })
+);
+BackdropWrap.displayName = "BackdropWrap";
+export default function UserMetadataComponent({
+  isMyself,
+  user,
+  onSave
+}) {
+  const [editable, setEditable] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const drawerDragger = useRef(null);
+  const browser = useBrowser();
+  const isMobileView = useMediaQuery("(max-width:640px)") || browser.mobile.any;
+  const validateMsg = useReactive({
+    email: "",
+    phone: ""
+  });
+  useEffect(() => {
+    if (!isMobileView) {
+      setVisible(false);
+    }
+  }, [isMobileView]);
+  const phoneVerified = useCreation(() => {
+    return user?.phoneVerified ?? false;
+  }, [user?.phoneVerified]);
+  const emailVerified = useCreation(() => {
+    return user?.emailVerified ?? false;
+  }, [user?.emailVerified]);
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  const metadata = useReactive(
+    user?.metadata ? cloneDeep(user.metadata) : {
+      joinedAt: user?.createdAt,
+      email: user?.email,
+      phone: user?.phone
+    }
+  );
+  const onChange = (v, field) => {
+    metadata[field] = v;
+  };
+  const timezones = getTimezones();
+  const onEdit = () => {
+    if (!isMobileView) {
+      setEditable(true);
+    } else {
+      setVisible(true);
+    }
+  };
+  const onCancel = () => {
+    const defaultMetadata = cloneDeep(user?.metadata) ?? {};
+    if (defaultMetadata) {
+      Object.keys(metadata).forEach((key) => {
+        const k = key;
+        metadata[k] = defaultMetadata[k];
+      });
+    }
+    validateMsg.email = "";
+    validateMsg.phone = "";
+    if (!isMobileView) {
+      setEditable(false);
+    } else {
+      setVisible(false);
+    }
+  };
+  const links = useMemo(() => {
+    const defaultLinks = metadata?.links?.map((link) => link.url) || [""];
+    return defaultLinks.length > 0 ? defaultLinks : [""];
+  }, [metadata.links]);
+  const handleLinksChange = (values) => {
+    const newLinks = values.map((link) => {
+      if (!link) {
+        return {
+          url: link
+        };
+      }
+      const targetLink = metadata.links?.find((l) => l.url === link);
+      if (targetLink) {
+        return {
+          ...targetLink,
+          url: link
+        };
+      }
+      return {
+        url: link,
+        favicon: joinURL(link, "favicon.ico")
+      };
+    });
+    onChange(newLinks, "links");
+  };
+  const handleSave = () => {
+    Object.keys(metadata).forEach((key) => {
+      const k = key;
+      const value = metadata[k];
+      if (value && typeof value === "string") {
+        metadata[k] = value.trim();
+      }
+      if (k === "bio") {
+        metadata[k] = metadata[k]?.slice(0, bioMaxLength);
+      }
+    });
+    onSave(metadata);
+    setEditable(false);
+    setVisible(false);
+  };
+  const renderEdit = (editing, mode = "self") => {
+    return /* @__PURE__ */ jsxs(MetadataInfo, { pt: 2, display: "flex", flexDirection: "column", children: [
+      /* @__PURE__ */ jsx(
+        EditableField,
+        {
+          value: metadata.bio ?? "",
+          onChange: (value) => onChange(value, "bio"),
+          editable: editing,
+          placeholder: "Bio",
+          component: "textarea",
+          inline: false,
+          rows: 3,
+          maxLength: bioMaxLength,
+          style: {
+            ...editing ? { marginBottom: 8 } : {}
+          }
+        }
+      ),
+      !editing && isMyself ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "large",
+          variant: "outlined",
+          sx: {
+            ...defaultButtonStyle,
+            mb: 2,
+            mt: 2,
+            height: "40px"
+          },
+          onClick: onEdit,
+          fullWidth: true,
+          children: t("profile.editProfile")
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        EditableField,
+        {
+          value: metadata.location ?? "",
+          onChange: (value) => onChange(value, "location"),
+          editable: editing,
+          placeholder: "Location",
+          label: t("profile.location"),
+          icon: /* @__PURE__ */ jsx(LocationIcon, { ...iconSize })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EditableField,
+        {
+          value: metadata.timezone ?? "",
+          onChange: (value) => onChange(value, "timezone"),
+          editable: editing,
+          placeholder: "timezone",
+          icon: /* @__PURE__ */ jsx(TimezoneIcon, { ...iconSize }),
+          label: t("profile.timezone"),
+          tooltip: /* @__PURE__ */ jsxs("p", { style: { display: "flex", margin: 0 }, children: [
+            /* @__PURE__ */ jsx("span", { style: { marginRight: "4px" }, children: t("profile.localTime") }),
+            /* @__PURE__ */ jsx(Clock, { timezone: metadata.timezone, locale })
+          ] }),
+          children: /* @__PURE__ */ jsx(
+            Select,
+            {
+              className: `timezone-select ${editing ? "" : "disabled"}`,
+              value: metadata.timezone,
+              onChange: (e) => onChange(e.target.value, "timezone"),
+              disabled: !editing,
+              displayEmpty: true,
+              variant: "outlined",
+              placeholder: "Timezone",
+              IconComponent: (props) => /* @__PURE__ */ jsx(ArrowDownwardIcon, { ...props, width: 20, height: 20 }),
+              MenuProps: {
+                style: {
+                  zIndex: mode === "drawer" ? 9999 : 1300
+                }
+              },
+              sx: {
+                width: "100%",
+                "&:hover": {
+                  "fieldset.MuiOutlinedInput-notchedOutline": {
+                    borderColor: colors.dividerColor
+                  }
+                },
+                fieldset: {
+                  borderColor: colors.dividerColor
+                }
+              },
+              children: timezones.map((tz) => /* @__PURE__ */ jsx(MenuItem, { value: tz.value, children: tz.label }, tz.value))
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EditableField,
+        {
+          value: metadata.email ?? user?.email ?? "",
+          editable: editing && !emailVerified,
+          verified: emailVerified,
+          placeholder: "Email",
+          icon: /* @__PURE__ */ jsx(EmailIcon, { ...iconSize }),
+          label: t("profile.email"),
+          onChange: (value) => onChange(value, "email"),
+          errorMsg: validateMsg.email,
+          onValueValidate: (value) => {
+            let msg = "";
+            if (!!value && !isEmail(value)) {
+              msg = t("profile.emailInvalid");
+            }
+            validateMsg.email = msg;
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EditableField,
+        {
+          value: metadata.phone ?? user?.phone ?? "",
+          editable: editing && !phoneVerified,
+          verified: phoneVerified,
+          placeholder: "Phone",
+          icon: /* @__PURE__ */ jsx(PhoneIcon, { ...iconSize }),
+          onChange: (value) => onChange(value, "phone"),
+          label: t("profile.phone"),
+          errorMsg: validateMsg.phone,
+          onValueValidate: (value) => {
+            let msg = "";
+            if (!!value && !isMobilePhone(value)) {
+              msg = t("profile.phoneInvalid");
+            }
+            validateMsg.phone = msg;
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(LinkPreviewInput, { editable: editing, links, onChange: handleLinksChange }),
+      editing && isMyself ? /* @__PURE__ */ jsxs(
+        Box,
+        {
+          display: "flex",
+          gap: 1,
+          style: { width: "100%" },
+          justifyContent: "flex-end",
+          flexDirection: mode === "drawer" ? "column" : "row",
+          children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                fullWidth: mode === "drawer",
+                size: "small",
+                variant: "outlined",
+                sx: { ...defaultButtonStyle, minWidth: "54px" },
+                onClick: onCancel,
+                children: t("common.cancel")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                fullWidth: mode === "drawer",
+                size: "small",
+                disabled: !!validateMsg.email || !!validateMsg.phone,
+                variant: "outlined",
+                sx: {
+                  ...primaryButtonStyle,
+                  minWidth: "54px",
+                  "&.Mui-disabled": {
+                    backgroundColor: "rgba(0, 0, 0, 0.12)"
+                  }
+                },
+                onClick: handleSave,
+                children: t("common.save")
+              }
+            )
+          ]
+        }
+      ) : null
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderEdit(editable),
+    isMobileView && /* @__PURE__ */ jsxs(
+      SwipeableDrawer,
+      {
+        sx: {
+          zIndex: 9999
+        },
+        disableSwipeToOpen: true,
+        onOpen: onEdit,
+        open: visible,
+        anchor: "bottom",
+        onClose: onCancel,
+        slots: {
+          backdrop: BackdropWrap
+        },
+        PaperProps: {
+          sx: {
+            boxShadow: "0px -2px 16px 0px rgba(0, 0, 0, 0.08)",
+            borderRadius: 3,
+            // 保持跟 DID Wallet 一致
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              ref: drawerDragger,
+              sx: {
+                padding: "16px 32px",
+                margin: "-8px auto -16px",
+                zIndex: 1
+              },
+              children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    width: "48px",
+                    height: "4px",
+                    borderRadius: "100vw",
+                    backgroundColor: "rgba(0, 0, 0, 0.2)"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              p: 2,
+              sx: {
+                maxHeight: "500px",
+                overflowY: "auto"
+              },
+              children: renderEdit(true, "drawer")
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+const MetadataInfo = styled(Box)`
+  gap: 16px;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+
+  .MuiOutlinedInput-root {
+    padding: 8px;
+    .MuiOutlinedInput-input {
+      padding: 0;
+    }
+  }
+  .timezone-select {
+    min-width: 150px;
+    &.disabled {
+      padding: 4px 8px;
+      fieldset {
+        border: unset;
+      }
+      svg {
+        display: none;
+      }
+    }
+  }
+  .info-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    margin: 0;
+    p {
+      display: flex;
+      align-items: center;
+      margin: 0;
+      font-size: 16px;
+      font-weight: 400;
+      color: #666;
+    }
+  }
+`;

package/lib/UserCenter/components/user-info/switch-role.js

@@ -1,9 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { memo } from "react";
 import { Chip } from "@mui/material";
-import { Icon } from "@iconify/react";
 import { useCreation } from "ahooks";
-import SwapHorizRoundedIcon from "@iconify-icons/material-symbols/swap-horiz-rounded";
+import SwitchIcon from "@arcblock/icons/lib/Switch";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
 function SwitchRole({ user, switchPassport }) {
   const currentRole = useCreation(
@@ -34,7 +33,7 @@ function SwitchRole({ user, switchPassport }) {
         }
       },
       clickable: true,
-      deleteIcon: /* @__PURE__ */ jsx(Icon, { icon: SwapHorizRoundedIcon, color: colors.textBase }),
+      deleteIcon: /* @__PURE__ */ jsx(SwitchIcon, { color: colors.textBase, width: 20, height: 20 }),
       onDelete: switchPassport,
       onClick: switchPassport
     }

package/lib/UserCenter/components/user-info/user-basic-info.d.ts

@@ -6,4 +6,6 @@ export default function UserBasicInfo({ user, isMyself, showFullDid, switchPassp
     showFullDid?: boolean;
     switchPassport: () => void;
     switchProfile: () => void;
+    size?: number;
+    isMobile?: boolean;
 } & BoxProps): import("react").JSX.Element | null;