@arcblock/ux 2.7.15 → 2.7.17

package/es/Dialog/confirm.js

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
-import { useContext, forwardRef, useRef, useImperativeHandle } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import noop from 'lodash/noop';
-import { LocaleContext } from '../Locale/context';
 import Button from '../Button';
 import Dialog from './dialog';
 
@@ -93,16 +92,15 @@ Confirm.defaultProps = {
   PaperProps: {}
 };
 const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    t
-  } = useContext(LocaleContext);
   const state = useReactive({
     show: false,
     title: '',
     content: '',
     onConfirm: noop,
     onCancel: noop,
-    loading: false
+    loading: false,
+    confirmButtonText: 'Confirm',
+    cancelButtonText: 'Cancel'
   });
   const open = useMemoizedFn((params = {}) => {
     state.show = true;
@@ -110,6 +108,8 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
     state.content = params.content;
     state.onConfirm = params.onConfirm || noop;
     state.onCancel = params.onCancel || noop;
+    if (params.confirmButtonText) state.confirmButtonText = params.confirmButtonText;
+    if (params.cancelButtonText) state.cancelButtonText = params.cancelButtonText;
     state.loading = false;
   });
   const reset = useMemoizedFn(() => {
@@ -117,6 +117,8 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
     state.content = '';
     state.onConfirm = noop;
     state.onCancel = noop;
+    state.confirmButtonText = 'Confirm';
+    state.cancelButtonText = 'Cancel';
   });
   const close = useMemoizedFn(() => {
     state.show = false;
@@ -148,7 +150,7 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
     onConfirm: onConfirm,
     onCancel: onCancel,
     confirmButton: {
-      text: t('common.confirm'),
+      text: state.confirmButtonText,
       props: {
         variant: 'contained',
         color: 'primary',
@@ -156,7 +158,7 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
       }
     },
     cancelButton: {
-      text: t('common.cancel'),
+      text: state.cancelButtonText,
       props: {
         variant: 'outlined',
         color: 'primary'

package/es/Img/index.js

@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import SvgIcon from '@mui/material/SvgIcon';
 import { useInView } from 'react-intersection-observer';
-import Alert from 'mdi-material-ui/Alert';
-import ImageIcon from 'mdi-material-ui/Image';
+import AlertIcon from '@iconify-icons/mdi/alert';
+import ImageIcon from '@iconify-icons/mdi/image';
+import { Icon } from '@iconify/react';
 import { styled } from '../Theme';
 
 /**
@@ -161,15 +161,15 @@ function Img({
         children: [!fallback && imgState === 'error' && /*#__PURE__*/_jsx("div", {
           className: "image--state",
           title: "loading image",
-          children: /*#__PURE__*/_jsx(SvgIcon, {
-            component: Alert,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: AlertIcon,
             className: "image--icon"
           })
         }), !placeholder && imgState === 'loading' && /*#__PURE__*/_jsx("div", {
           className: "image--state",
           title: "Image load error",
-          children: /*#__PURE__*/_jsx(SvgIcon, {
-            component: ImageIcon,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: ImageIcon,
             className: "image--icon"
           })
         }), imgState === 'loaded' && /*#__PURE__*/_jsx("img", {

package/es/SessionManager/account-item.js

@@ -0,0 +1,133 @@
+import { Box, IconButton, Link, MenuItem, Typography } from '@mui/material';
+import PropTypes from 'prop-types';
+import { Icon } from '@iconify/react';
+import CheckIcon from '@iconify-icons/mdi/check';
+import TrashCanOutlineIcon from '@iconify-icons/mdi/trash-can-outline';
+import { useMemoizedFn } from 'ahooks';
+import Avatar from '../Avatar';
+import DID from '../DID';
+import { translate } from '../Locale/util';
+import { translations } from './translation';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function AccountItem({
+  account,
+  active,
+  onDelete,
+  onChoose,
+  locale
+}) {
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const _onChoose = useMemoizedFn(() => onChoose(account, {
+    active
+  }));
+  const _onDelete = useMemoizedFn(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    onDelete(account, {
+      active
+    });
+  });
+  if (!account?.did || !account?.appName) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(MenuItem, {
+    onClick: _onChoose,
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      overflow: 'hidden',
+      gap: '8px',
+      position: 'relative',
+      '.account-item-actions': {
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        bottom: 0,
+        marginRight: '12px',
+        display: 'flex',
+        alignItems: 'center'
+      },
+      '.account-item-action': {
+        alignItems: 'center',
+        display: 'none'
+      },
+      '&:hover .account-item-action': {
+        display: 'flex'
+      }
+    },
+    className: "session-manager-menu-item",
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      did: account.did,
+      size: 42
+    }), /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        flex: 1,
+        overflow: 'hidden',
+        fontSize: 0,
+        '.did-address-avatar': {
+          display: 'none !important'
+        }
+      },
+      children: [/*#__PURE__*/_jsx(DID, {
+        did: account.did,
+        copyable: false,
+        size: 14,
+        responsive: false,
+        compact: true,
+        sx: {
+          lineHeight: 1
+        }
+      }), account.sourceAppPid && /*#__PURE__*/_jsxs(Typography, {
+        variant: "caption",
+        children: [t('from'), ' ', /*#__PURE__*/_jsx(Link, {
+          href: account.appUrl,
+          target: "_blank",
+          underline: "none",
+          children: account.appName
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "account-item-actions",
+      children: active ? /*#__PURE__*/_jsx(Box, {
+        className: "account-item-action",
+        style: {
+          display: 'flex'
+        },
+        children: /*#__PURE__*/_jsx(IconButton, {
+          color: "success",
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: CheckIcon,
+            color: "success"
+          })
+        })
+      }, "CheckIcon") : /*#__PURE__*/_jsx(Box, {
+        className: "account-item-action",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          color: "error",
+          onClick: _onDelete,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: TrashCanOutlineIcon,
+            color: "error"
+          })
+        })
+      }, "TrashCanOutlineIcon")
+    })]
+  });
+}
+AccountItem.propTypes = {
+  account: PropTypes.object,
+  active: PropTypes.bool,
+  locale: PropTypes.string,
+  onChoose: PropTypes.func,
+  onDelete: PropTypes.func
+};
+AccountItem.defaultProps = {
+  account: null,
+  active: false,
+  locale: 'en',
+  onChoose: () => {},
+  onDelete: () => {}
+};

package/es/SessionManager/add-account-item.js

@@ -0,0 +1,100 @@
+import { Icon } from '@iconify/react';
+import PropTypes from 'prop-types';
+import { Menu, MenuItem, Typography } from '@mui/material';
+import AddIcon from '@iconify-icons/ion/ios-add-circle-outline';
+import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
+import { useRef } from 'react';
+import { translate } from '../Locale/util';
+import { translations } from './translation';
+import { getCurrentApp, getFederatedApp } from '../Util/federated';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function AddAccountItem({
+  onAdd,
+  locale
+}) {
+  const addRef = useRef(null);
+  const state = useReactive({
+    open: false
+  });
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+  const apps = useCreation(() => {
+    const appList = [];
+    if (typeof window === 'undefined') {
+      return appList;
+    }
+    const blocklet = window?.blocklet;
+    const masterApp = getFederatedApp(blocklet);
+    const currentApp = getCurrentApp(blocklet);
+    if (currentApp) {
+      appList.push(currentApp);
+    }
+    if (masterApp && masterApp?.appId !== currentApp?.appId) {
+      appList.push(masterApp);
+    }
+    // NOTICE: masterApp 应该排在前面
+    return appList.reverse();
+  }, [window.blocklet]);
+  const _onAdd = useMemoizedFn(() => {
+    if (apps.length <= 1) {
+      onAdd(apps[0]);
+    } else {
+      state.open = true;
+    }
+  });
+  const onClose = useMemoizedFn(() => {
+    state.open = false;
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(MenuItem, {
+      ref: addRef,
+      onClick: _onAdd,
+      className: "session-manager-menu-item",
+      sx: {
+        display: 'flex',
+        gap: '8px'
+      },
+      "data-cy": "sessionManager-switch-trigger",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: AddIcon,
+        width: 24,
+        height: 24
+      }), /*#__PURE__*/_jsx(Typography, {
+        children: t('addAnotherAccount')
+      })]
+    }), addRef.current ? /*#__PURE__*/_jsx(Menu, {
+      anchorEl: addRef.current,
+      open: state.open,
+      onClose: onClose,
+      elevation: 0,
+      PaperProps: {
+        variant: 'outlined'
+      },
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      children: apps.map(app => /*#__PURE__*/_jsx(MenuItem, {
+        onClick: () => onAdd(app),
+        children: t('connectWithAccount', {
+          name: app.appName
+        })
+      }, app.appId))
+    }) : null]
+  });
+}
+AddAccountItem.propTypes = {
+  onAdd: PropTypes.func,
+  locale: PropTypes.string
+};
+AddAccountItem.defaultProps = {
+  onAdd: () => {},
+  locale: 'en'
+};

package/es/SessionManager/federated-login-detecter.js

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Divider from '@mui/material/Divider';
-import SvgIcon from '@mui/material/SvgIcon';
-import ShieldCheck from 'mdi-material-ui/ShieldCheck';
+import ShieldCheckIcon from '@iconify-icons/mdi/shield-check';
+import { Icon } from '@iconify/react';
+import { useCreation, useReactive } from 'ahooks';
 import UserPopper from './user-popper';
 import DidAvatar from '../Avatar';
 import DidAddress from '../Address';
@@ -46,9 +47,12 @@ export default function FederatedLoginDetecter({
   dark,
   locale: _locale
 }) {
-  const [federatedLoginOpen, setFederatedLoginOpen] = useState(true);
-  const siteInfo = session.federatedMaster?.site;
-  const userInfo = session.federatedMaster?.user;
+  const state = useReactive({
+    open: true
+  });
+  const federatedMaster = useCreation(() => {
+    return session.federatedMaster;
+  }, [session?.federatedMaster]);
   const localeList = Object.keys(translations);
   const locale = localeList.includes(_locale) ? _locale : localeList[0];
   const onLoginFederated = useCallback(() => {
@@ -56,37 +60,39 @@ export default function FederatedLoginDetecter({
       if (err) {
         Toast.error(err || translations[_locale].loginFederatedFailed);
       } else {
-        setFederatedLoginOpen(false);
+        state.open = false;
       }
     }, {
-      provider: 'federated',
-      mode: userInfo ? 'auto' : 'manual'
+      sourceAppPid: federatedMaster?.site?.appPid,
+      mode: federatedMaster?.user ? 'auto' : 'manual'
     });
-  }, [session, userInfo, _locale]);
+  }, [session, federatedMaster?.site?.appPid, federatedMaster?.user, _locale, state]);
   let appLogoUrl;
-  if (siteInfo) {
-    appLogoUrl = new URL(siteInfo.appLogo, siteInfo.appUrl);
+  if (federatedMaster?.site) {
+    appLogoUrl = new URL(federatedMaster.site.appLogo, federatedMaster.site.appUrl);
     appLogoUrl.searchParams.set('imageFilter', 'resize');
     // HACK: 保持跟其他地方使用的尺寸一致，可以复用同一资源的缓存，减少网络请求
     appLogoUrl.searchParams.set('w', '80');
     appLogoUrl.searchParams.set('h', '80');
   }
-  return siteInfo && /*#__PURE__*/_jsx(UserPopper, {
-    open: federatedLoginOpen,
+  return federatedMaster?.site && /*#__PURE__*/_jsx(UserPopper, {
+    open: state.open,
     anchorEl: anchorEl,
     dark: dark,
     autoClose: false,
-    onClose: () => setFederatedLoginOpen(false),
+    onClose: () => {
+      state.open = false;
+    },
     children: /*#__PURE__*/_jsxs(Box, {
       p: 2,
-      children: [siteInfo && /*#__PURE__*/_jsxs(Box, {
+      children: [federatedMaster.site && /*#__PURE__*/_jsxs(Box, {
         display: "flex",
         alignItems: "center",
         children: [/*#__PURE__*/_jsx(Box, {
           component: "img",
           mr: 2,
           src: appLogoUrl.href,
-          alt: siteInfo.appName,
+          alt: federatedMaster.site.appName,
           width: "30px",
           height: "30px"
         }), /*#__PURE__*/_jsx(Box, {
@@ -96,7 +102,7 @@ export default function FederatedLoginDetecter({
           children: translations[locale].useToConnect({
             master: /*#__PURE__*/_jsx(Box, {
               component: "a",
-              href: siteInfo.appUrl,
+              href: federatedMaster.site.appUrl,
               target: "_blank",
               sx: {
                 textDecoration: 'none',
@@ -104,22 +110,22 @@ export default function FederatedLoginDetecter({
                 color: 'primary.main',
                 fontSize: '1.2em'
               },
-              children: siteInfo.appName
+              children: federatedMaster.site.appName
             }),
             member: window.blocklet.appName
           })
         })]
-      }), siteInfo && userInfo && /*#__PURE__*/_jsx(Divider, {
+      }), federatedMaster?.site && federatedMaster?.user && /*#__PURE__*/_jsx(Divider, {
         style: {
           margin: '15px 0 10px 0'
         }
-      }), userInfo && /*#__PURE__*/_jsxs(Box, {
+      }), federatedMaster?.user && /*#__PURE__*/_jsxs(Box, {
         display: "flex",
         alignItems: "center",
         children: [/*#__PURE__*/_jsx(DidAvatar, {
           variant: "circle",
-          did: userInfo.did,
-          src: getUserAvatar(userInfo.avatar),
+          did: federatedMaster.user.did,
+          src: getUserAvatar(federatedMaster.user.avatar),
           size: 28,
           shape: "circle"
         }), /*#__PURE__*/_jsxs(Box, {
@@ -130,9 +136,9 @@ export default function FederatedLoginDetecter({
             alignItems: "center",
             children: [/*#__PURE__*/_jsx(Box, {
               fontSize: 18,
-              children: userInfo.fullName
-            }), userInfo.role?.toUpperCase() && /*#__PURE__*/_jsx(Chip, {
-              label: userInfo.role?.toUpperCase(),
+              children: federatedMaster.user.fullName
+            }), federatedMaster.user.role?.toUpperCase() && /*#__PURE__*/_jsx(Chip, {
+              label: federatedMaster.user.role?.toUpperCase(),
               size: "small",
               variant: "outlined",
               sx: {
@@ -140,19 +146,17 @@ export default function FederatedLoginDetecter({
                 marginRight: 0,
                 fontSize: 12
               },
-              icon: /*#__PURE__*/_jsx(SvgIcon, {
-                component: ShieldCheck,
-                style: {
-                  fontSize: '14px'
-                }
+              icon: /*#__PURE__*/_jsx(Icon, {
+                icon: ShieldCheckIcon,
+                fontSize: 14
               })
             })]
           }), /*#__PURE__*/_jsx(DidAddress, {
             responsive: false,
-            children: userInfo.did
+            children: federatedMaster.user.did
           })]
         })]
-      }), siteInfo && /*#__PURE__*/_jsx(Box, {
+      }), federatedMaster?.site && /*#__PURE__*/_jsx(Box, {
         display: "flex",
         justifyContent: "center",
         mt: 2,