@arcblock/ux 2.13.12 → 2.13.14

package/lib/DIDConnect/app-info-item.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, IconButton, Tooltip, useMediaQuery } from '@mui/material';
+import CheckIcon from '@iconify-icons/material-symbols/check';
+import { Icon } from '@iconify/react';
+import DID from '../DID';
+import { mergeSx } from '../Util/style';
+import AppIcon from './app-icon';
+export default function AppInfoItem({
+  appInfo,
+  active = false,
+  appLogo = null,
+  sx
+}) {
+  const isTinyView = useMediaQuery('(max-width:400px)');
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: mergeSx({
+      display: 'flex',
+      alignItems: 'center',
+      fontWeight: 600,
+      color: 'text.primary',
+      '& .app-info-content': {
+        paddingLeft: '8px',
+        overflow: 'hidden'
+      },
+      '& .app-info-name': {
+        maxWidth: '100%',
+        lineHeight: 'normal',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        fontSize: '12px',
+        color: 'text.primary'
+      }
+    }, sx),
+    children: [appLogo || /*#__PURE__*/_jsx(Box, {
+      sx: {
+        borderRadius: 1,
+        overflow: 'hidden',
+        fontSize: 0
+      },
+      children: /*#__PURE__*/_jsx(AppIcon, {
+        appInfo: appInfo
+      })
+    }), /*#__PURE__*/_jsxs(Box, {
+      className: "app-info-content",
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: appInfo.appName,
+        placement: "top",
+        children: /*#__PURE__*/_jsx(Box, {
+          className: "app-info-name",
+          children: appInfo.appName
+        })
+      }), appInfo.appPid && /*#__PURE__*/_jsx(DID, {
+        className: "app-info-did",
+        did: appInfo.appPid,
+        sx: {
+          fontSize: '10px !important'
+        },
+        copyable: false,
+        startChars: isTinyView ? 6 : 8,
+        endChars: isTinyView ? 6 : 8,
+        size: 12
+      })]
+    }), active ? /*#__PURE__*/_jsx(IconButton, {
+      size: "small",
+      color: "success",
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: CheckIcon,
+        color: "success"
+      })
+    }) : null]
+  });
+}

package/lib/DIDConnect/did-connect-footer.d.ts

@@ -0,0 +1,4 @@
+export default function DIDConnectFooter({ currentAppInfo, currentAppColor, }: {
+    currentAppInfo?: any;
+    currentAppColor?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/DIDConnect/did-connect-footer.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, useMediaQuery } from '@mui/material';
+import PoweredBy from './powered-by';
+import AppInfoItem from './app-info-item';
+import AppIcon from './app-icon';
+import { getDIDColor, hexToRgba } from '../Util';
+export default function DIDConnectFooter({
+  currentAppInfo = globalThis.blocklet,
+  currentAppColor = globalThis.blocklet?.appPid ? getDIDColor(globalThis.blocklet?.appPid) : '#fff'
+}) {
+  const isSmallView = useMediaQuery('(max-width:640px)');
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: 1,
+      fontSize: 12,
+      backgroundColor: hexToRgba(currentAppColor, 0.08),
+      // 需要保持跟 .did-connect__root 的规则一样
+      mx: isSmallView ? -2 : -3,
+      px: isSmallView ? 2 : 3,
+      py: 1.5,
+      // HACK: 极限条件下，footer 会溢出，使用隐藏的滚动条来处理这种情况（屏幕宽度小于 360 时会出现）
+      overflow: 'auto',
+      '&::-webkit-scrollbar': {
+        display: 'none' // 隐藏滚动条 (Webkit 浏览器)
+      },
+      '-ms-overflow-style': 'none',
+      // 隐藏滚动条 (IE 浏览器)
+      'scrollbar-width': 'none' // 隐藏滚动条 (Firefox)
+    },
+    className: "did-connect__footer",
+    children: [/*#__PURE__*/_jsx(AppInfoItem, {
+      appInfo: currentAppInfo,
+      appLogo: /*#__PURE__*/_jsx(AppIcon, {
+        appInfo: currentAppInfo,
+        size: 24,
+        sx: {
+          flexShrink: 0
+        }
+      }),
+      sx: {
+        flex: 1,
+        overflow: 'hidden'
+      }
+    }), /*#__PURE__*/_jsx(PoweredBy, {
+      sx: {
+        maxWidth: '100%',
+        justifyContent: 'end'
+      }
+    })]
+  });
+}

package/lib/DIDConnect/did-connect-logo.d.ts

@@ -0,0 +1 @@
+export default function DidConnectLogo(): import("react/jsx-runtime").JSX.Element;

package/lib/DIDConnect/did-connect-logo.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DidBrandConnect from '@arcblock/icons/lib/DidBrandConnect';
+import { useTheme } from '@mui/material';
+export default function DidConnectLogo() {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(DidBrandConnect, {
+    style: {
+      filter: theme.palette.mode === 'dark' ? 'invert(1)' : 'none'
+    }
+  });
+}

package/lib/DIDConnect/index.d.ts

@@ -0,0 +1,7 @@
+export { default as DIDConnectFooter } from './did-connect-footer';
+export { default as AppInfoItem } from './app-info-item';
+export { default as AppIcon } from './app-icon';
+export { default as PoweredBy } from './powered-by';
+export { default as withContainer } from './with-container';
+export { default as withUxTheme } from './with-ux-theme';
+export { default as DIDConnectLogo } from './did-connect-logo';

package/lib/DIDConnect/index.js

@@ -0,0 +1,7 @@
+export { default as DIDConnectFooter } from './did-connect-footer';
+export { default as AppInfoItem } from './app-info-item';
+export { default as AppIcon } from './app-icon';
+export { default as PoweredBy } from './powered-by';
+export { default as withContainer } from './with-container';
+export { default as withUxTheme } from './with-ux-theme';
+export { default as DIDConnectLogo } from './did-connect-logo';

package/lib/DIDConnect/powered-by.d.ts

@@ -0,0 +1,3 @@
+export default function PoweredBy({ ...rest }: {
+    [x: string]: any;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/DIDConnect/powered-by.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, useTheme } from '@mui/material';
+import { Icon } from '@iconify/react';
+import shieldCheckIcon from '@iconify-icons/mdi/shield-check';
+import DidConnectLogo from './did-connect-logo';
+import { mergeSx } from '../Util/style';
+export default function PoweredBy({
+  ...rest
+}) {
+  const {
+    palette
+  } = useTheme();
+  return /*#__PURE__*/_jsxs(Box, {
+    ...rest,
+    sx: mergeSx({
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: 'text.secondary',
+      gap: 0.5,
+      fontSize: 12,
+      fontFamily: 'Lexend',
+      whiteSpace: 'nowrap'
+    }, rest?.sx),
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: shieldCheckIcon,
+      color: palette.success.main
+    }), "Secured by", /*#__PURE__*/_jsx(Box, {
+      component: "a",
+      href: "https://www.didconnect.io/",
+      target: "_blank",
+      rel: "noopener",
+      sx: {
+        color: 'initial',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.5,
+        textDecoration: 'none',
+        '&:hover': {
+          textDecoration: 'underline'
+        }
+      },
+      children: /*#__PURE__*/_jsx(DidConnectLogo, {})
+    })]
+  });
+}

package/lib/DIDConnect/with-container.d.ts

@@ -0,0 +1,11 @@
+import { Locale } from '../type';
+export default function withContainer(Component: React.ComponentType<any>): ({ popup, open, hideCloseButton, ...rest }: {
+    popup?: boolean;
+    open?: boolean;
+    hideCloseButton?: boolean;
+    onClose: () => void;
+    blocklet?: any;
+    origin?: string;
+    host?: string;
+    locale?: Locale;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/DIDConnect/with-container.js

@@ -0,0 +1,273 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useRef, useState, createElement as _createElement } from 'react';
+import { Dialog, DialogContent, useMediaQuery, Box, Backdrop, SwipeableDrawer, Drawer } from '@mui/material';
+import { useDebounce, useMemoizedFn } from 'ahooks';
+import { useBrowser } from '@arcblock/react-hooks';
+import colorConvert from 'color-convert';
+import { useTheme } from '../Theme';
+import { mergeSx } from '../Util/style';
+import { hexToRgba } from '../Util';
+const BackdropWrap = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((backdropProps, ref) => {
+  return /*#__PURE__*/_createElement(Backdrop, {
+    open: true,
+    ref: ref,
+    style: {
+      backgroundColor: 'rgba(0, 0, 0, 0.6)',
+      backdropFilter: 'blur(3px)',
+      touchAction: 'none'
+    },
+    ...backdropProps,
+    key: "background"
+  });
+}));
+export default function withContainer(Component) {
+  function WithContainerComponent({
+    popup = false,
+    open = false,
+    hideCloseButton = false,
+    ...rest
+  }) {
+    const [color, setColor] = useState('#fff');
+    const drawerDragger = useRef(null);
+    const browser = useBrowser();
+    // 屏宽小于 sm 且在 mobile 设备中全屏显示 dialog (PC 端屏宽小于 sm 的情况正常弹窗, 不全屏显示)
+    const matchSm = useMediaQuery('(max-width:640px)');
+    let openVariant = 'page';
+    if (popup) {
+      openVariant = 'dialog';
+      if (matchSm && browser.mobile.any) {
+        openVariant = 'drawer';
+      }
+    }
+    const theme = useTheme();
+
+    // 兼容 did-react 版本中存在的 responsive prop, responsive=true 则让 dialog 始终保持 open 状态, 否则遵循外部传入的 open prop
+    const isOpen = open;
+    const leavingScreenDelay = theme?.transitions?.duration?.leavingScreen || 500; // 默认值是 195
+    const debouncedShow = useDebounce(isOpen, {
+      wait: leavingScreenDelay
+    });
+    const removeMagicToken = useMemoizedFn(() => {
+      const searchParams = new URLSearchParams(window.location.search);
+      if (searchParams.get('magicToken')) {
+        searchParams.delete('magicToken');
+      }
+      window.history.replaceState({}, '', `${window.location.pathname}?${searchParams.toString()}`);
+    });
+
+    // eslint-disable-next-line no-unused-vars
+    const handleOnClose = (e, reason) => {
+      if (['backdropClick', 'escapeKeyDown'].includes(reason)) return;
+      removeMagicToken();
+      rest?.onClose();
+    };
+    const showModal = debouncedShow || isOpen;
+    const DrawerComponent = hideCloseButton ? Drawer : SwipeableDrawer;
+    const hslColor = colorConvert.hex.hsl(color);
+    const [h, s, l] = hslColor;
+    const percentageList = [0, 30, 60, 30, 0, 30, 60, 30];
+    const maxPercentage = Math.max(...percentageList);
+    const minPercentage = Math.min(...percentageList);
+    let useAlpha = false;
+    if (l * (100 + maxPercentage) / 100 > 100 || l * (100 + minPercentage) / 100 < 0) {
+      // 超出范围，使用 alpha 通道变化
+      useAlpha = true;
+    }
+    const colorList = percentageList.map(percentageItem => {
+      let finalL = l * (100 + percentageItem) / 100;
+      let finalAlpha = 0.6;
+      if (useAlpha) {
+        finalAlpha = 0.5 * (100 + percentageItem) / 100;
+      } else {
+        finalL = l * (100 + percentageItem) / 100;
+      }
+      return `hsla(${h}, ${s}%, ${finalL}%, ${finalAlpha})`;
+    });
+    const background = `linear-gradient(45deg, ${colorList.join(', ')})`;
+    const colorListGlow = percentageList.map(percentageItem => {
+      let finalL = l * (100 + percentageItem) / 100;
+      let finalAlpha = 0.2;
+      if (useAlpha) {
+        finalAlpha = 0.3 * (100 + percentageItem) / 100;
+      } else {
+        finalL = l * (100 + percentageItem) / 100;
+      }
+      return `hsla(${h}, ${s}%, ${finalL}%, ${finalAlpha})`;
+    });
+    const backgroundGlow = `linear-gradient(45deg, ${colorListGlow.join(', ')})`;
+    const glowStyle = {
+      overflow: 'visible',
+      '&::before, &::after': {
+        content: '""',
+        position: 'absolute',
+        top: '-3px',
+        right: '-3px',
+        bottom: '-3px',
+        left: '-3px',
+        background,
+        backgroundSize: '300% 300%',
+        backgroundRepeat: 'no-repeat',
+        animation: 'glowRotate 10s linear infinite',
+        borderRadius: '14px !important',
+        zIndex: 0
+      },
+      '&::after': {
+        background: backgroundGlow,
+        filter: 'blur(15px)'
+      },
+      '@keyframes glowRotate': {
+        '0%': {
+          backgroundPosition: '0 0'
+        },
+        '50%': {
+          backgroundPosition: '100% 0'
+        },
+        '100%': {
+          backgroundPosition: '0 0'
+        }
+      }
+    };
+    const wrapOnClose = useMemoizedFn(() => {
+      removeMagicToken();
+      rest?.onClose();
+    });
+    if (openVariant === 'page') {
+      return /*#__PURE__*/_jsx(Box, {
+        className: "did-connect__container-page",
+        sx: mergeSx(glowStyle, {
+          borderRadius: 1,
+          position: 'relative',
+          zIndex: 1
+        }),
+        children: /*#__PURE__*/_jsx(Box, {
+          sx: {
+            border: `1px solid ${hexToRgba(color, 0.1)}`,
+            m: '-1px',
+            position: 'relative',
+            borderRadius: '12px',
+            zIndex: 2,
+            overflow: 'hidden'
+          },
+          children: /*#__PURE__*/_jsx(Component, {
+            ...rest,
+            onClose: wrapOnClose,
+            setColor: setColor,
+            hideCloseButton: true,
+            mode: openVariant
+          })
+        })
+      });
+    }
+    if (openVariant === 'drawer') {
+      return /*#__PURE__*/_jsxs(DrawerComponent, {
+        className: "did-connect__container-drawer",
+        disableSwipeToOpen: true,
+        open: isOpen,
+        anchor: "bottom",
+        drawerDragger: drawerDragger.current
+        // @ts-ignore
+        ,
+        onClose: handleOnClose,
+        slots: {
+          backdrop: BackdropWrap
+        },
+        PaperProps: {
+          sx: {
+            borderRadius: 3,
+            // 保持跟 DID Wallet 一致
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            p: '2px',
+            animation: 'glowBreathe 7s linear infinite',
+            '.did-connect__root': {
+              backgroundColor: 'transparent'
+            },
+            overflow: 'hidden',
+            '@keyframes glowBreathe': {
+              '0%, 100%': {
+                boxShadow: `
+                      inset 0 0 7px ${hexToRgba(color, 0.3)},
+                      inset 0 0 12px ${hexToRgba(color, 0.3)}`
+              },
+              '50%': {
+                boxShadow: `
+                      inset 0 0 18px ${hexToRgba(color, 0.7)},
+                      inset 0 0 24px ${hexToRgba(color, 0.5)}`
+              }
+            }
+          }
+        },
+        children: [hideCloseButton ? null : /*#__PURE__*/_jsx(Box, {
+          ref: drawerDragger,
+          sx: {
+            px: 1,
+            pt: 2,
+            m: 'auto',
+            mt: -1,
+            mb: -2,
+            zIndex: 2
+          },
+          children: /*#__PURE__*/_jsx(Box, {
+            sx: {
+              width: '48px',
+              height: '4px',
+              borderRadius: '100vw',
+              backgroundColor: 'rgba(0, 0, 0, 0.2)'
+            }
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          sx: {
+            touchAction: 'none',
+            maxWidth: '100%',
+            width: 500,
+            height: 'auto'
+          },
+          children: showModal ? /*#__PURE__*/_jsx(Component, {
+            ...rest,
+            onClose: wrapOnClose,
+            setColor: setColor,
+            hideCloseButton: true,
+            mode: openVariant
+          }) : null
+        })]
+      });
+    }
+    return /*#__PURE__*/_jsx(Dialog, {
+      open: isOpen,
+      slots: {
+        backdrop: BackdropWrap
+      },
+      className: "did-connect__container-dialog",
+      onClose: handleOnClose,
+      PaperProps: {
+        sx: {
+          // 避免样式被 server 中的定义覆盖
+          '&.MuiPaper-rounded': {
+            borderRadius: '12px !important'
+          },
+          position: 'relative',
+          ...glowStyle
+        }
+      },
+      children: /*#__PURE__*/_jsx(DialogContent, {
+        sx: {
+          maxWidth: 'calc(100vw - 18px)',
+          maxHeight: 'calc(100vh - 18px)',
+          p: '0px !important',
+          height: 'auto',
+          backgroundColor: 'background.default',
+          borderRadius: '12px !important',
+          zIndex: 1
+        },
+        children: showModal ? /*#__PURE__*/_jsx(Component, {
+          ...rest,
+          onClose: wrapOnClose,
+          setColor: setColor,
+          hideCloseButton: hideCloseButton,
+          mode: openVariant
+        }) : null
+      })
+    });
+  }
+  return WithContainerComponent;
+}

package/lib/DIDConnect/with-ux-theme.d.ts

@@ -0,0 +1 @@
+export default function withUxTheme(Component: React.ComponentType<any>): (props: any) => import("react/jsx-runtime").JSX.Element;

package/lib/DIDConnect/with-ux-theme.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createTheme, useTheme } from '@mui/material';
+import { DID_CONNECT_THEME_LIGHT, DID_CONNECT_THEME_DARK } from '@blocklet/theme';
+import { ThemeProvider } from '../Theme';
+
+// DID Connect 使用自己的 Theme 配置，不受 Blocklet theme 影响
+const themeLight = createTheme(DID_CONNECT_THEME_LIGHT);
+const themeDark = createTheme(DID_CONNECT_THEME_DARK);
+export default function withUxTheme(Component) {
+  function WithUxThemeComponent(props) {
+    const {
+      palette
+    } = useTheme();
+    const theme = palette.mode === 'dark' ? themeDark : themeLight;
+    return /*#__PURE__*/_jsx(ThemeProvider, {
+      theme: theme,
+      children: /*#__PURE__*/_jsx(Component, {
+        ...props
+      })
+    });
+  }
+  return WithUxThemeComponent;
+}

package/lib/Datatable/CustomToolbar.js

@@ -329,6 +329,9 @@ const Container = styled('div')`
   display: flex;
   align-items: center;
   height: 56px;
+  background-color: ${({
+  theme
+}) => theme.palette.background.default};
   .custom-toobar-title {
     position: relative;
     flex: 1;