@blocklet/ui-react 2.12.8 → 2.12.10

package/lib/@types/index.d.ts

@@ -38,6 +38,39 @@ export type NFTAccount = {
     firstLoginAt: string;
 };
 export type ConnectedAccount = OAuthAccount | WalletAccount | NFTAccount;
+export type UserMetadataLink = {
+    url: string;
+    favicon?: string;
+};
+export declare enum DurationEnum {
+    ThirtyMinutes = "30_minutes",
+    OneHour = "1_hour",
+    FourHours = "4_hours",
+    Today = "today",
+    ThisWeek = "this_week"
+}
+export declare enum StatusEnum {
+    Meeting = "meeting",
+    Community = "community",
+    Holiday = "holiday",
+    OffSick = "off_sick",
+    WorkingRemotely = "working_remotely"
+}
+export type UserMetadata = {
+    bio?: string;
+    location?: string;
+    timezone?: string;
+    joinedAt?: string;
+    status?: {
+        value: string;
+        duration?: DurationEnum;
+        dateRange?: Date[];
+    };
+    links?: UserMetadataLink[];
+    cover?: string;
+    email?: string;
+    phone?: string;
+};
 export type User = UserPublicInfo & {
     role: string;
     email?: string;
@@ -55,6 +88,7 @@ export type User = UserPublicInfo & {
     inviter?: string;
     emailVerified?: boolean;
     phoneVerified?: boolean;
+    metadata?: UserMetadata;
 };
 export type UserCenterTab = {
     value: string;

package/lib/@types/index.js

@@ -0,0 +1,16 @@
+export var DurationEnum = /* @__PURE__ */ ((DurationEnum2) => {
+  DurationEnum2["ThirtyMinutes"] = "30_minutes";
+  DurationEnum2["OneHour"] = "1_hour";
+  DurationEnum2["FourHours"] = "4_hours";
+  DurationEnum2["Today"] = "today";
+  DurationEnum2["ThisWeek"] = "this_week";
+  return DurationEnum2;
+})(DurationEnum || {});
+export var StatusEnum = /* @__PURE__ */ ((StatusEnum2) => {
+  StatusEnum2["Meeting"] = "meeting";
+  StatusEnum2["Community"] = "community";
+  StatusEnum2["Holiday"] = "holiday";
+  StatusEnum2["OffSick"] = "off_sick";
+  StatusEnum2["WorkingRemotely"] = "working_remotely";
+  return StatusEnum2;
+})(StatusEnum || {});

package/lib/@types/shims.d.ts

@@ -6,6 +6,7 @@ declare module '@arcblock/ux/lib/ErrorBoundary';
 
 declare module '@arcblock/did-connect/*';
 declare module '@arcblock/did-connect/lib/Session';
+declare module '@abtnode/constant';
 
 declare module 'is-url';
 

package/lib/UserCenter/components/config-profile.js

@@ -4,6 +4,8 @@ import { useMemoizedFn, useReactive } from "ahooks";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import ArrowDownwardIcon from "@arcblock/icons/lib/ArrowDown";
 import { translations } from "../libs/locales.js";
 import { client } from "../../libs/client.js";
 import { formatAxiosError } from "../libs/utils.js";
@@ -61,7 +63,27 @@ export default function ConfigProfile({ user, onSave }) {
               }
             }
           ),
-          /* @__PURE__ */ jsx(Select, { value: currentState.locale, onChange: handleChange, size: "small", sx: { minWidth: 300 }, children: (window.blocklet.languages || languages).map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x.code, children: x.name }, x.code)) })
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              value: currentState.locale,
+              onChange: handleChange,
+              size: "small",
+              IconComponent: (props) => /* @__PURE__ */ jsx(ArrowDownwardIcon, { ...props, width: 20, height: 20 }),
+              sx: {
+                minWidth: 300,
+                "&:hover": {
+                  "fieldset.MuiOutlinedInput-notchedOutline": {
+                    borderColor: colors.dividerColor
+                  }
+                },
+                fieldset: {
+                  borderColor: colors.dividerColor
+                }
+              },
+              children: (window.blocklet.languages || languages).map((x) => /* @__PURE__ */ jsx(MenuItem, { value: x.code, children: x.name }, x.code))
+            }
+          )
         ] })
       ]
     }

package/lib/UserCenter/components/editable-field.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TooltipProps } from '@mui/material';
+interface EditableFieldProps {
+    value: string;
+    onChange?: (value: string) => void;
+    onValueValidate?: (value: string) => void;
+    editable: boolean;
+    component?: 'input' | 'textarea';
+    placeholder?: string;
+    rows?: number;
+    maxLength?: number;
+    icon?: React.ReactNode;
+    label?: string;
+    children?: React.ReactNode;
+    tooltip?: TooltipProps['title'];
+    inline?: boolean;
+    style?: React.CSSProperties;
+    verified?: boolean;
+    errorMsg?: string;
+}
+declare function EditableField({ value, onChange, onValueValidate, errorMsg, editable, component, placeholder, rows, maxLength, icon, label, children, tooltip, inline, style, verified, }: EditableFieldProps): JSX.Element | null;
+export default EditableField;

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

@@ -0,0 +1,159 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, TextField, Typography, Tooltip } from "@mui/material";
+import { useCreation, useMemoizedFn } from "ahooks";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import VerifiedIcon from "@mui/icons-material/Verified";
+import { translations } from "../libs/locales.js";
+const inputFieldStyle = {
+  width: "100%",
+  ".MuiOutlinedInput-root": {
+    "&:hover": {
+      fieldset: {
+        borderColor: colors.dividerColor
+      }
+    },
+    "&.Mui-focused": {
+      fieldset: {
+        borderColor: colors.dividerColor
+      }
+    }
+  },
+  fieldset: {
+    borderColor: colors.dividerColor
+  }
+};
+function EditableField({
+  value,
+  onChange = () => {
+  },
+  onValueValidate = () => {
+  },
+  errorMsg = "",
+  editable = false,
+  component = "input",
+  placeholder = "",
+  rows = 2,
+  maxLength,
+  icon,
+  label = "",
+  children,
+  tooltip,
+  inline = true,
+  style = {},
+  verified = false
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  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,
+        {
+          variant: "outlined",
+          className: "editable-field",
+          InputProps: {
+            sx: { backgroundColor: "transparent" },
+            placeholder
+          },
+          value,
+          onChange: (e) => handleChange(e.target.value),
+          sx: inputFieldStyle,
+          error: Boolean(errorMsg),
+          helperText: errorMsg
+        }
+      );
+    }
+    const isTooLong = value.length > (maxLength || 300);
+    return /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          variant: "outlined",
+          InputProps: {
+            multiline: true,
+            minRows: rows,
+            placeholder
+          },
+          sx: inputFieldStyle,
+          value,
+          onChange: (e) => handleChange(e.target.value),
+          error: Boolean(errorMsg),
+          helperText: errorMsg
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Typography,
+        {
+          position: "absolute",
+          bottom: -22,
+          right: 2,
+          variant: "caption",
+          fontSize: "12px",
+          component: "span",
+          color: isTooLong ? "error" : "text.secondary",
+          children: [
+            isTooLong ? `(${t("profile.maxInputLength")} ${maxLength}) ` : "",
+            value.length,
+            " / ",
+            maxLength
+          ]
+        }
+      )
+    ] });
+  }, [value, handleChange, component, placeholder, rows, children]);
+  if (!editable) {
+    return value ? /* @__PURE__ */ jsx(Tooltip, { title: tooltip, placement: "top", children: /* @__PURE__ */ jsxs(
+      Typography,
+      {
+        variant: "subtitle1",
+        component: "p",
+        gutterBottom: true,
+        sx: {
+          width: "100%",
+          mb: 0,
+          lineHeight: 1.4,
+          overflow: "hidden"
+        },
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        children: [
+          icon,
+          /* @__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" } : {}
+                },
+                children: 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: "#4B5563" }, children: label }),
+    content
+  ] });
+}
+export default EditableField;

package/lib/UserCenter/components/nft.d.ts

@@ -0,0 +1,4 @@
+import { User } from '../../@types';
+export default function Nft({ user }: {
+    user: User;
+}): import("react").JSX.Element;

package/lib/UserCenter/components/nft.js

@@ -0,0 +1,93 @@
+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 { temp as colors } from "@arcblock/ux/lib/Colors";
+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({
+    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;
+    },
+    {
+      defaultParams: [paging],
+      refreshDeps: [user.did, paging]
+    }
+  );
+  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) {
+      return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: "20%" }),
+        /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", height: 200, sx: { borderRadius: 2 } })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          sx: {
+            color: colors.foregroundsFgBase,
+            fontWeight: 600,
+            mb: 2.5
+          },
+          children: t("common.nft")
+        }
+      ),
+      /* @__PURE__ */ jsxs(Box, { className: "nft-list-wrapper", display: "flex", flexDirection: "row", gap: 2, children: [
+        data?.assets?.map((item) => /* @__PURE__ */ jsx(Box, { width: 166, height: 166, children: /* @__PURE__ */ jsx(
+          NFTDisplay,
+          {
+            data: item.display,
+            address: item.address,
+            inset: true,
+            imageFilter: {
+              imageFilter: "resize",
+              w: "500",
+              f: "webp"
+            }
+          }
+        ) }, item.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") }) })
+      ] }),
+      dataPage.next || paging.page > 1 ? /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          sx: {
+            display: "flex",
+            justifyContent: "end"
+          },
+          page: paging.page,
+          onChange: handlePageChange,
+          count: Math.ceil(dataPage.total / paging.size),
+          size: "small"
+        }
+      ) : null
+    ] });
+  }, [loading, dataPage, paging.page, paging.size, handlePageChange]);
+  return /* @__PURE__ */ jsx(Box, { sx: { border: `1px solid ${colors.dividerColor}`, borderRadius: 2, p: 2, mb: 5 }, children: content });
+}

package/lib/UserCenter/components/settings.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
-import { Box, Divider, Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { useCreation, useMemoizedFn } from "ahooks";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
@@ -74,25 +74,42 @@ export default function Settings({
       ...rest,
       sx: {
         ...rest?.sx,
+        display: "flex",
+        flexDirection: "column",
+        gap: 2.5,
         minWidth: {
           md: 500
         },
         maxWidth: "100%"
       },
-      children: tabs.map((tab, index) => /* @__PURE__ */ jsxs(Box, { id: tab.value, children: [
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            sx: {
-              color: colors.foregroundsFgBase,
-              fontWeight: 600
-            },
-            children: tab.label
-          }
-        ),
-        /* @__PURE__ */ jsx(Box, { mt: 2.5, children: tab.content }),
-        index < tabs.length - 1 ? /* @__PURE__ */ jsx(Divider, { sx: { mt: 2.5, mb: 2.5, borderColor: colors.dividerColor } }) : null
-      ] }, tab.value))
+      children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+        Box,
+        {
+          id: tab.value,
+          sx: {
+            border: `1px solid ${colors.dividerColor}`,
+            borderRadius: 2,
+            p: 2,
+            "&:last-child": {
+              mb: 5
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                sx: {
+                  color: colors.foregroundsFgBase,
+                  fontWeight: 600
+                },
+                children: tab.label
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { mt: 2.5, children: tab.content })
+          ]
+        },
+        tab.value
+      ))
     }
   );
 }

package/lib/UserCenter/components/status-selector/duration-menu.d.ts

@@ -0,0 +1,9 @@
+import { BaseStatusProps, StatusItem } from './menu-item';
+interface StatusDurationMenuProps extends BaseStatusProps {
+    data: StatusItem;
+}
+declare function DurationMenu({ data, selected, onSelect }: StatusDurationMenuProps): import("react").JSX.Element;
+export default DurationMenu;
+export declare const MenuDiv: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/UserCenter/components/status-selector/duration-menu.js

@@ -0,0 +1,75 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Menu, Typography } from "@mui/material";
+import styled from "@emotion/styled";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { useState } from "react";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { useMemoizedFn } from "ahooks";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { translations } from "../../libs/locales.js";
+import StatusMenuItem, { StyledMenu } from "./menu-item.js";
+function DurationMenu({ data, selected, onSelect }) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, _data = {}) => {
+    return translate(translations, key, locale, "en", _data);
+  });
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const openSubMenu = (e) => {
+    setAnchorEl(e.currentTarget);
+  };
+  const closeSubMenu = () => {
+    setAnchorEl(null);
+  };
+  const onSelectStatus = (e) => {
+    openSubMenu(e);
+  };
+  const onSelectDuration = (e, item) => {
+    onSelect({
+      ...selected ?? {},
+      value: data.id,
+      duration: item.id
+    });
+    closeSubMenu();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(StatusMenuItem, { icon: data.icon, selected: selected?.value === data.id, onClick: onSelectStatus, children: data.name }),
+    /* @__PURE__ */ jsxs(
+      StyledMenu,
+      {
+        anchorOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        open,
+        onClose: closeSubMenu,
+        anchorEl,
+        children: [
+          /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", pl: 2, fontSize: "14px", children: t("profile.removeStatusAfter") }),
+          data.children?.map((item) => /* @__PURE__ */ jsx(
+            StatusMenuItem,
+            {
+              selected: selected?.duration === item.id,
+              onClick: (e) => onSelectDuration(e, item),
+              children: item.name
+            },
+            item.id
+          ))
+        ]
+      }
+    )
+  ] });
+}
+export default DurationMenu;
+export const MenuDiv = styled(Menu)`
+  .MuiList-root {
+    min-width: 160px;
+  }
+  .selected {
+    background-color: ${colors.backgroundsBgSubtitle};
+  }
+`;

package/lib/UserCenter/components/status-selector/index.d.ts

@@ -0,0 +1,9 @@
+import { PopoverProps } from '@mui/material';
+import { BaseStatusProps, StatusItem } from './menu-item';
+interface StatusSelectorProps extends BaseStatusProps {
+    data: Array<StatusItem>;
+    open: boolean;
+    anchorEl?: PopoverProps['anchorEl'];
+}
+declare function StatusSelector({ data, open, onSelect, anchorEl, selected }: StatusSelectorProps): import("react").JSX.Element;
+export default StatusSelector;

package/lib/UserCenter/components/status-selector/index.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useMemoizedFn } from "ahooks";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import StatusDurationMenu from "./duration-menu.js";
+import StatusMenuItem, { StyledMenu } from "./menu-item.js";
+import { translations } from "../../libs/locales.js";
+function StatusSelector({ data, open, onSelect, anchorEl, selected }) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, _data = {}) => {
+    return translate(translations, key, locale, "en", _data);
+  });
+  const onSelectStatus = (v) => {
+    onSelect(v);
+  };
+  const renderMenuItems = () => {
+    return data.map((item) => {
+      if (item.children) {
+        return /* @__PURE__ */ jsx(StatusDurationMenu, { data: item, selected, onSelect: onSelectStatus }, item.id);
+      }
+      return /* @__PURE__ */ jsx(
+        StatusMenuItem,
+        {
+          icon: item.icon,
+          selected: selected?.value === item.id,
+          onClick: () => onSelectStatus({ value: item.id }),
+          children: item.name
+        },
+        item.id
+      );
+    });
+  };
+  return /* @__PURE__ */ jsxs(StyledMenu, { open, onClose: () => onSelectStatus(), anchorEl, children: [
+    /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", pl: 2, fontSize: "14px", children: t("profile.setStatus") }),
+    renderMenuItems()
+  ] });
+}
+export default StatusSelector;

package/lib/UserCenter/components/status-selector/menu-item.d.ts

@@ -0,0 +1,24 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import React from 'react';
+import { UserMetadata } from '../../../@types';
+interface StatusMenuItemProps {
+    icon?: React.FC<SvgIconProps>;
+    selected?: boolean;
+    onClick: (e: React.MouseEvent<HTMLElement>) => void;
+    children: React.ReactNode;
+}
+export default function StatusMenuItem({ icon, selected, onClick, children }: StatusMenuItemProps): JSX.Element;
+export declare const StyledMenu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export interface StatusItem {
+    id: string;
+    name: string;
+    icon?: React.FC<SvgIconProps>;
+    children?: Array<StatusItem>;
+}
+export interface BaseStatusProps {
+    selected: UserMetadata['status'];
+    onSelect: (v: UserMetadata['status']) => void;
+}
+export {};

package/lib/UserCenter/components/status-selector/menu-item.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ListItemIcon, MenuItem, Menu } from "@mui/material";
+import React from "react";
+import styled from "@emotion/styled";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+export default function StatusMenuItem({ icon, selected, onClick, children }) {
+  return /* @__PURE__ */ jsxs(MenuItem, { onClick, className: selected ? "selected" : "", children: [
+    icon && /* @__PURE__ */ jsx(ListItemIcon, { style: { minWidth: "24px" }, children: React.createElement(icon, {
+      style: { fontSize: "16px", width: "16px", height: "16px" }
+    }) }),
+    children
+  ] });
+}
+export const StyledMenu = styled(Menu)`
+  .MuiPaper-root {
+    box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.15);
+  }
+  .MuiList-root {
+    min-width: 160px;
+  }
+  .selected {
+    background-color: ${colors.backgroundsBgSubtitle};
+  }
+`;