@blocklet/ui-react 2.9.13 → 2.9.14

package/src/UserCenter/components/webhook-item.tsx

@@ -0,0 +1,243 @@
+// import PropTypes from 'prop-types';
+import {
+  Box,
+  CircularProgress,
+  IconButton,
+  InputAdornment,
+  MenuItem,
+  Select,
+  Stack,
+  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';
+import { WebhookItemData, WebhookItemProps, WebhookType } from '../../@types';
+
+export default function WebhookItem({
+  onTest = noop,
+  onDelete = noop,
+  onSave = noop,
+  onCancel = noop,
+  type = 'slack',
+  url = '',
+  edit = false,
+}: WebhookItemProps) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const currentState = useReactive<
+    WebhookItemData & {
+      edit: boolean;
+      error: string;
+      loading: boolean;
+    }
+  >({
+    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: (params: WebhookItemData) => void) => {
+    return () => {
+      if (checkUrl()) {
+        fn({
+          type: currentState.type,
+          url: currentState.url,
+        });
+      }
+    };
+  });
+
+  const inputAdornment = useCreation(() => {
+    if (currentState.error) {
+      return (
+        <Typography component="span" color="error">
+          {currentState.error}
+        </Typography>
+      );
+    }
+
+    if (currentState.edit) {
+      if (currentState.loading) {
+        return <CircularProgress size={16} />;
+      }
+
+      return (
+        <IconButton
+          size="small"
+          onClick={onSubmit(_onTest)}
+          sx={{
+            mr: -1,
+          }}>
+          <Icon icon={SendRoundedIcon} />
+        </IconButton>
+      );
+    }
+    return null;
+  }, [currentState.error, currentState.edit, currentState.loading]);
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: 1.5,
+        width: '100%',
+        alignItems: {
+          xs: 'flex-start',
+          md: 'center',
+        },
+        flexDirection: {
+          xs: 'column',
+          md: 'row',
+        },
+      }}>
+      <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 as WebhookType;
+        }}>
+        <MenuItem value="api">{t('webhook.url')}</MenuItem>
+        <MenuItem value="slack">{t('webhook.slack')}</MenuItem>
+      </Select>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 0.5,
+          width: '100%',
+        }}>
+        <TextField
+          sx={{
+            flex: 1,
+            '.MuiInputBase-root': {
+              borderRadius: 2,
+              '&.Mui-disabled': {
+                backgroundColor: colors.backgroundsBgField,
+              },
+            },
+          }}
+          disabled={!currentState.edit || currentState.loading}
+          fullWidth
+          size="small"
+          required
+          value={currentState.url}
+          onChange={(e) => {
+            currentState.url = e.target.value;
+            checkUrl();
+          }}
+          error={!!currentState.error}
+          InputProps={{
+            endAdornment: <InputAdornment position="end">{inputAdornment}</InputAdornment>,
+          }}
+        />
+
+        <Box sx={{ display: 'flex', gap: 0.5 }}>
+          {currentState.edit ? (
+            <>
+              <IconButton
+                color="success"
+                onClick={onSubmit((...args) => {
+                  onSave(...args);
+                  currentState.edit = false;
+                })}
+                sx={{
+                  borderRadius: 2,
+                  border: `1px solid ${colors.strokeBorderBase}`,
+                }}>
+                <Icon icon={CheckIcon} />
+              </IconButton>
+              <IconButton
+                color="error"
+                onClick={handleClose}
+                sx={{
+                  borderRadius: 2,
+                  border: `1px solid ${colors.strokeBorderBase}`,
+                }}>
+                <Icon icon={CloseRoundedIcon} />
+              </IconButton>
+            </>
+          ) : (
+            <>
+              <IconButton
+                onClick={() => {
+                  currentState.edit = true;
+                }}
+                sx={{
+                  borderRadius: 2,
+                  border: `1px solid ${colors.strokeBorderBase}`,
+                }}>
+                <Icon icon={EditSquareOutlineRoundedIcon} />
+              </IconButton>
+              <IconButton
+                color="error"
+                onClick={() => {
+                  onDelete({
+                    type: currentState.type,
+                    url: currentState.url,
+                  });
+                }}
+                sx={{
+                  borderRadius: 2,
+                  border: `1px solid ${colors.strokeBorderBase}`,
+                }}>
+                <Icon icon={DeleteOutlineRoundedIcon} />
+              </IconButton>
+            </>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+}

package/src/UserCenter/index.tsx

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

package/src/UserCenter/libs/client.ts

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

package/src/UserCenter/libs/locales.ts

@@ -0,0 +1,72 @@
+export const translations = {
+  zh: {
+    settings: '设置',
+    noPassport: '暂无通行证',
+    passport: '通行证',
+    notification: '通知',
+    email: '邮箱地址',
+    lastLogin: '上次登录',
+    createdAt: '创建时间',
+    registerFrom: '注册来源',
+    unknown: '未知',
+    walletNotification: '钱包通知',
+    emailNotification: '邮件通知',
+    phoneNotification: '短信通知',
+    addWebhook: '新增外部通知',
+    saveSuccess: '保存成功',
+    saveFailed: '保存失败',
+    webhookTested: '测试消息已经发送',
+    done: '完成',
+    emptyField: '未填写',
+    emptyContent: '暂无内容',
+    underProtected: '用户已设置隐私保护',
+    noUserFound: '未找到指定的用户',
+    notificationManagement: '通知管理',
+    privacyManagement: '隐私管理',
+    webhook: {
+      url: '自定义URL',
+      slack: 'Slack',
+    },
+    common: {
+      required: '必填的',
+      invalid: '无效',
+    },
+    toPublic: '公开 “{name}” 页面',
+    currentPassport: '当前使用的通行证',
+  },
+  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/src/UserCenter/libs/utils.ts

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

package/src/blocklets.js

@@ -63,6 +63,7 @@ export const getLocalizedNavigation = (navigation, locale = 'en') => {
         title: getTitle(item.title, locale),
         // 仅对叶结点进行处理
         link: !item.items?.length ? getLink(item.link, locale) : item.link,
+        _rawLink: item.link,
       };
     },
     'items'
@@ -108,6 +109,7 @@ export const parseNavigation = (navigation) => {
     dashboard: [],
     // session manager menus
     sessionManager: [],
+    userCenter: [],
   };
 
   // 对 navigation 顶层元素按 section 分组

package/src/index.ts

@@ -0,0 +1,9 @@
+// @ts-ignore
+export { default as Header } from './Header';
+// @ts-ignore
+export { default as Footer } from './Footer';
+// @ts-ignore
+export { default as Dashboard } from './Dashboard';
+// @ts-ignore
+export { default as Icon } from './Icon';
+export * from './UserCenter';