@blocklet/ui-react 2.9.13 → 2.9.15

package/es/UserCenter/components/webhook-item.js

@@ -0,0 +1,243 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Box,
+  CircularProgress,
+  IconButton,
+  InputAdornment,
+  MenuItem,
+  Select,
+  TextField,
+  Typography
+} from "@mui/material";
+import { useCreation, useMemoizedFn, useReactive } from "ahooks";
+import noop from "lodash/noop";
+import isUrl from "is-url";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import { Icon } from "@iconify/react";
+import CloseRoundedIcon from "@iconify-icons/material-symbols/close-rounded";
+import CheckIcon from "@iconify-icons/material-symbols/check";
+import SendRoundedIcon from "@iconify-icons/material-symbols/send-rounded";
+import EditSquareOutlineRoundedIcon from "@iconify-icons/material-symbols/edit-square-outline-rounded";
+import DeleteOutlineRoundedIcon from "@iconify-icons/material-symbols/delete-outline-rounded";
+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 WebhookItem({
+  onTest = noop,
+  onDelete = noop,
+  onSave = noop,
+  onCancel = noop,
+  type = "slack",
+  url = "",
+  edit = false
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  const currentState = useReactive({
+    type: type || "slack",
+    url: url || "",
+    edit: edit ?? false,
+    error: "",
+    loading: false
+  });
+  const checkUrl = useMemoizedFn(() => {
+    if (!currentState.url) {
+      currentState.error = t("common.required");
+      return false;
+    }
+    if (!isUrl(currentState.url)) {
+      currentState.error = t("common.invalid");
+      return false;
+    }
+    currentState.error = "";
+    return true;
+  });
+  const handleClose = useMemoizedFn(() => {
+    currentState.edit = false;
+    currentState.url = url || "";
+    currentState.type = type || "slack";
+    currentState.error = "";
+    currentState.loading = false;
+    onCancel();
+  });
+  const _onTest = useMemoizedFn(async (data) => {
+    currentState.loading = true;
+    await onTest(data);
+    currentState.loading = false;
+  });
+  const onSubmit = useMemoizedFn((fn) => {
+    return () => {
+      if (checkUrl()) {
+        fn({
+          type: currentState.type,
+          url: currentState.url
+        });
+      }
+    };
+  });
+  const inputAdornment = useCreation(() => {
+    if (currentState.error) {
+      return /* @__PURE__ */ jsx(Typography, { component: "span", color: "error", children: currentState.error });
+    }
+    if (currentState.edit) {
+      if (currentState.loading) {
+        return /* @__PURE__ */ jsx(CircularProgress, { size: 16 });
+      }
+      return /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "small",
+          onClick: onSubmit(_onTest),
+          sx: {
+            mr: -1
+          },
+          children: /* @__PURE__ */ jsx(Icon, { icon: SendRoundedIcon })
+        }
+      );
+    }
+    return null;
+  }, [currentState.error, currentState.edit, currentState.loading]);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        gap: 1.5,
+        width: "100%",
+        alignItems: {
+          xs: "flex-start",
+          md: "center"
+        },
+        flexDirection: {
+          xs: "column",
+          md: "row"
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            sx: {
+              borderRadius: 2,
+              "&.Mui-disabled": {
+                backgroundColor: colors.backgroundsBgField
+              }
+            },
+            disabled: !currentState.edit || currentState.loading,
+            size: "small",
+            value: currentState.type,
+            onChange: (e) => {
+              currentState.type = e.target.value;
+            },
+            children: [
+              /* @__PURE__ */ jsx(MenuItem, { value: "api", children: t("webhook.url") }),
+              /* @__PURE__ */ jsx(MenuItem, { value: "slack", children: t("webhook.slack") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5,
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  sx: {
+                    flex: 1,
+                    ".MuiInputBase-root": {
+                      borderRadius: 2,
+                      "&.Mui-disabled": {
+                        backgroundColor: colors.backgroundsBgField
+                      }
+                    }
+                  },
+                  disabled: !currentState.edit || currentState.loading,
+                  fullWidth: true,
+                  size: "small",
+                  required: true,
+                  value: currentState.url,
+                  onChange: (e) => {
+                    currentState.url = e.target.value;
+                    checkUrl();
+                  },
+                  error: !!currentState.error,
+                  InputProps: {
+                    endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: inputAdornment })
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 0.5 }, children: currentState.edit ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    color: "success",
+                    onClick: onSubmit((...args) => {
+                      onSave(...args);
+                      currentState.edit = false;
+                    }),
+                    sx: {
+                      borderRadius: 2,
+                      border: `1px solid ${colors.strokeBorderBase}`
+                    },
+                    children: /* @__PURE__ */ jsx(Icon, { icon: CheckIcon })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    color: "error",
+                    onClick: handleClose,
+                    sx: {
+                      borderRadius: 2,
+                      border: `1px solid ${colors.strokeBorderBase}`
+                    },
+                    children: /* @__PURE__ */ jsx(Icon, { icon: CloseRoundedIcon })
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    onClick: () => {
+                      currentState.edit = true;
+                    },
+                    sx: {
+                      borderRadius: 2,
+                      border: `1px solid ${colors.strokeBorderBase}`
+                    },
+                    children: /* @__PURE__ */ jsx(Icon, { icon: EditSquareOutlineRoundedIcon })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    color: "error",
+                    onClick: () => {
+                      onDelete({
+                        type: currentState.type,
+                        url: currentState.url
+                      });
+                    },
+                    sx: {
+                      borderRadius: 2,
+                      border: `1px solid ${colors.strokeBorderBase}`
+                    },
+                    children: /* @__PURE__ */ jsx(Icon, { icon: DeleteOutlineRoundedIcon })
+                  }
+                )
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}

package/es/UserCenter/index.d.ts

@@ -0,0 +1 @@
+export { default as UserCenter } from './components/user-center';

package/es/UserCenter/index.js

@@ -0,0 +1 @@
+export { default as UserCenter } from "./components/user-center.js";

package/es/UserCenter/libs/client.d.ts

@@ -0,0 +1,2 @@
+import { BlockletSDK } from '@blocklet/js-sdk';
+export declare const client: BlockletSDK;

package/es/UserCenter/libs/client.js

@@ -0,0 +1,2 @@
+import { BlockletSDK } from "@blocklet/js-sdk";
+export const client = new BlockletSDK();

package/es/UserCenter/libs/locales.d.ts

@@ -0,0 +1,72 @@
+export declare const translations: {
+    zh: {
+        settings: string;
+        noPassport: string;
+        passport: string;
+        notification: string;
+        email: string;
+        lastLogin: string;
+        createdAt: string;
+        registerFrom: string;
+        unknown: string;
+        walletNotification: string;
+        emailNotification: string;
+        phoneNotification: string;
+        addWebhook: string;
+        saveSuccess: string;
+        saveFailed: string;
+        webhookTested: string;
+        done: string;
+        emptyField: string;
+        emptyContent: string;
+        underProtected: string;
+        noUserFound: string;
+        notificationManagement: string;
+        privacyManagement: string;
+        webhook: {
+            url: string;
+            slack: string;
+        };
+        common: {
+            required: string;
+            invalid: string;
+        };
+        toPublic: string;
+        currentPassport: string;
+    };
+    en: {
+        settings: string;
+        noPassport: string;
+        passport: string;
+        notification: string;
+        email: string;
+        lastLogin: string;
+        createdAt: string;
+        registerFrom: string;
+        unknown: string;
+        walletNotification: string;
+        emailNotification: string;
+        phoneNotification: string;
+        addWebhook: string;
+        saveSuccess: string;
+        saveFailed: string;
+        webhookTested: string;
+        done: string;
+        emptyField: string;
+        notificationManagement: string;
+        privacyManagement: string;
+        emptyContent: string;
+        underProtected: string;
+        noUserFound: string;
+        webhook: {
+            url: string;
+            slack: string;
+        };
+        common: {
+            required: string;
+            invalid: string;
+        };
+        toPublic: string;
+        currentPassport: string;
+    };
+};

package/es/UserCenter/libs/locales.js

@@ -0,0 +1,72 @@
+export const translations = {
+  zh: {
+    settings: "\u8BBE\u7F6E",
+    noPassport: "\u6682\u65E0\u901A\u884C\u8BC1",
+    passport: "\u901A\u884C\u8BC1",
+    notification: "\u901A\u77E5",
+    email: "\u90AE\u7BB1\u5730\u5740",
+    lastLogin: "\u4E0A\u6B21\u767B\u5F55",
+    createdAt: "\u521B\u5EFA\u65F6\u95F4",
+    registerFrom: "\u6CE8\u518C\u6765\u6E90",
+    unknown: "\u672A\u77E5",
+    walletNotification: "\u94B1\u5305\u901A\u77E5",
+    emailNotification: "\u90AE\u4EF6\u901A\u77E5",
+    phoneNotification: "\u77ED\u4FE1\u901A\u77E5",
+    addWebhook: "\u65B0\u589E\u5916\u90E8\u901A\u77E5",
+    saveSuccess: "\u4FDD\u5B58\u6210\u529F",
+    saveFailed: "\u4FDD\u5B58\u5931\u8D25",
+    webhookTested: "\u6D4B\u8BD5\u6D88\u606F\u5DF2\u7ECF\u53D1\u9001",
+    done: "\u5B8C\u6210",
+    emptyField: "\u672A\u586B\u5199",
+    emptyContent: "\u6682\u65E0\u5185\u5BB9",
+    underProtected: "\u7528\u6237\u5DF2\u8BBE\u7F6E\u9690\u79C1\u4FDD\u62A4",
+    noUserFound: "\u672A\u627E\u5230\u6307\u5B9A\u7684\u7528\u6237",
+    notificationManagement: "\u901A\u77E5\u7BA1\u7406",
+    privacyManagement: "\u9690\u79C1\u7BA1\u7406",
+    webhook: {
+      url: "\u81EA\u5B9A\u4E49URL",
+      slack: "Slack"
+    },
+    common: {
+      required: "\u5FC5\u586B\u7684",
+      invalid: "\u65E0\u6548"
+    },
+    toPublic: "\u516C\u5F00 \u201C{name}\u201D \u9875\u9762",
+    currentPassport: "\u5F53\u524D\u4F7F\u7528\u7684\u901A\u884C\u8BC1"
+  },
+  en: {
+    settings: "Settings",
+    noPassport: "No passport founded",
+    passport: "Passport",
+    notification: "Notification",
+    email: "Email",
+    lastLogin: "Last Login & IP",
+    createdAt: "Created At",
+    registerFrom: "Register From",
+    unknown: "Unknown",
+    walletNotification: "DID Wallet notification",
+    emailNotification: "Email notification",
+    phoneNotification: "SMS notification",
+    addWebhook: "Add external notification",
+    saveSuccess: "Save succeed",
+    saveFailed: "Save failed",
+    webhookTested: "Test message sent",
+    done: "Done",
+    emptyField: "Empty field",
+    notificationManagement: "Notification",
+    privacyManagement: "Privacy",
+    emptyContent: "Empty",
+    underProtected: "This page has protected privacy",
+    noUserFound: "No user found",
+    webhook: {
+      url: "Custom url",
+      slack: "Slack"
+    },
+    common: {
+      required: "Required",
+      invalid: "Invalid"
+    },
+    toPublic: 'Public "{name}" page',
+    currentPassport: "Passport currently in use"
+  }
+};

package/es/UserCenter/libs/utils.d.ts

@@ -0,0 +1,4 @@
+import type { AxiosError } from 'axios';
+import { CreatePassportProps } from '../../@types';
+export declare const formatAxiosError: (err: AxiosError) => string;
+export declare const createPassportSvg: (props: CreatePassportProps) => any;

package/es/UserCenter/libs/utils.js

@@ -0,0 +1,14 @@
+import joinURL from "url-join";
+import { WELLKNOWN_SERVICE_PATH_PREFIX } from "@abtnode/constant";
+import { createPassportSvg as _createPassportSvg } from "@arcblock/ux/lib/Util/passport";
+export const formatAxiosError = (err) => {
+  const { response } = err;
+  if (response) {
+    return `Request failed: ${response.status} ${response.statusText}: ${JSON.stringify(response.data)}`;
+  }
+  return err.message;
+};
+export const createPassportSvg = (props) => _createPassportSvg({
+  ...props,
+  issuerAvatarUrl: joinURL(window.location.origin, WELLKNOWN_SERVICE_PATH_PREFIX, "/blocklet/logo")
+});

package/es/blocklets.d.ts

@@ -0,0 +1,16 @@
+export const publicPath: any;
+export function formatTheme(theme: any): any;
+export function getLocalizedNavigation(navigation: any, locale?: string): any;
+export function formatNavigation(navigation: any): any;
+export function parseNavigation(navigation: any): {
+    header: never[];
+    footer: never[];
+    social: never[];
+    bottom: never[];
+    dashboard: never[];
+    sessionManager: never[];
+    userCenter: never[];
+} | null;
+export function formatBlockletInfo(blockletInfo: any): any;
+export function filterValidNavItems(navigation?: any[]): any;
+export function filterNavByRole(nav: object[], userRole: string): any;

package/es/blocklets.js

@@ -1,25 +1,20 @@
-import { mapRecursive, filterRecursive, isUrl } from './utils';
+import { mapRecursive, filterRecursive, isUrl } from './utils.js';
+
 export const publicPath = window?.blocklet?.groupPrefix || window?.blocklet?.prefix || '/';
 
 /**
  * 格式化 theme (目前仅考虑 background)
  */
-export const formatTheme = theme => {
-  const formatted = {
-    ...theme
-  };
+export const formatTheme = (theme) => {
+  const formatted = { ...theme };
   const background = theme?.background;
   if (typeof background === 'string') {
-    formatted.background = {
-      header: background,
-      footer: background,
-      default: background
-    };
+    formatted.background = { header: background, footer: background, default: background };
   } else if (background && typeof background === 'object') {
     formatted.background = {
       header: background.header || background.default,
       footer: background.footer || background.default,
-      default: background.default
+      default: background.default,
     };
   }
   return formatted;
@@ -60,14 +55,19 @@ export const getLocalizedNavigation = (navigation, locale = 'en') => {
     }
     return link;
   };
-  return mapRecursive(navigation, item => {
-    return {
-      ...item,
-      title: getTitle(item.title, locale),
-      // 仅对叶结点进行处理
-      link: !item.items?.length ? getLink(item.link, locale) : item.link
-    };
-  }, 'items');
+  return mapRecursive(
+    navigation,
+    (item) => {
+      return {
+        ...item,
+        title: getTitle(item.title, locale),
+        // 仅对叶结点进行处理
+        link: !item.items?.length ? getLink(item.link, locale) : item.link,
+        _rawLink: item.link,
+      };
+    },
+    'items'
+  );
 };
 
 /**
@@ -75,22 +75,29 @@ export const getLocalizedNavigation = (navigation, locale = 'en') => {
  *
  * - role 统一为数组形式
  */
-export const formatNavigation = navigation => {
-  return mapRecursive(navigation, item => {
-    if (item.role) {
-      return {
-        ...item,
-        role: Array.isArray(item.role) ? item.role : [item.role]
-      };
-    }
-    return item;
-  }, 'items');
+export const formatNavigation = (navigation) => {
+  return mapRecursive(
+    navigation,
+    (item) => {
+      if (item.role) {
+        return {
+          ...item,
+          role: Array.isArray(item.role) ? item.role : [item.role],
+        };
+      }
+      return item;
+    },
+    'items'
+  );
 };
-export const parseNavigation = navigation => {
+
+export const parseNavigation = (navigation) => {
   if (!navigation?.length) {
     return null;
   }
+
   const formattedNav = formatNavigation(navigation);
+
   const sections = {
     header: [],
     footer: [],
@@ -101,17 +108,18 @@ export const parseNavigation = navigation => {
     // 对应 dashboard#sidenav 导航
     dashboard: [],
     // session manager menus
-    sessionManager: []
+    sessionManager: [],
+    userCenter: [],
   };
 
   // 对 navigation 顶层元素按 section 分组
-  formattedNav.forEach(item => {
+  formattedNav.forEach((item) => {
     // item#section 为空时, 表示只存在于 header
     if (!item.section) {
       sections.header.push(item);
       // item 出现在指定几个 section 中 (array)
     } else if (Array.isArray(item.section)) {
-      item.section.forEach(sectionKey => {
+      item.section.forEach((sectionKey) => {
         sections[sectionKey]?.push(item);
       });
       // item 出现在指定的一个 section 中 (string)
@@ -119,19 +127,18 @@ export const parseNavigation = navigation => {
       sections[item.section]?.push(item);
     }
   });
+
   return sections;
 };
 
 /**
  * 格式化 blocklet info 数据
  */
-export const formatBlockletInfo = blockletInfo => {
+export const formatBlockletInfo = (blockletInfo) => {
   if (!blockletInfo) {
     return null;
   }
-  const formatted = {
-    ...blockletInfo
-  };
+  const formatted = { ...blockletInfo };
   // theme
   formatted.theme = formatTheme(formatted.theme);
   // navigation
@@ -157,11 +164,15 @@ export const filterValidNavItems = (navigation = []) => {
  * @returns 符合 role 权限的导航菜单数据
  */
 export const filterNavByRole = (nav, userRole) => {
-  return filterRecursive(nav, (item, context) => {
-    const isRoleMatched = !item.role || userRole && item.role.includes(userRole);
-    if (!context.isLeaf) {
-      return isRoleMatched && context.filteredChildren?.length;
-    }
-    return isRoleMatched;
-  }, 'items');
-};
+  return filterRecursive(
+    nav,
+    (item, context) => {
+      const isRoleMatched = !item.role || (userRole && item.role.includes(userRole));
+      if (!context.isLeaf) {
+        return isRoleMatched && context.filteredChildren?.length;
+      }
+      return isRoleMatched;
+    },
+    'items'
+  );
+};

package/es/common/header-addons.d.ts

@@ -0,0 +1,22 @@
+declare function HeaderAddons({ formattedBlocklet, addons, sessionManagerProps }: {
+    formattedBlocklet: any;
+    addons: any;
+    sessionManagerProps: any;
+}): import("react").DetailedReactHTMLElement<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+declare namespace HeaderAddons {
+    namespace propTypes {
+        export let formattedBlocklet: any;
+        export let addons: any;
+        export { sessionManagerProps };
+    }
+    namespace defaultProps {
+        let addons_1: null;
+        export { addons_1 as addons };
+        export namespace sessionManagerProps_1 {
+            let showRole: boolean;
+        }
+        export { sessionManagerProps_1 as sessionManagerProps };
+    }
+}
+export default HeaderAddons;
+import { sessionManagerProps } from '../types';