@arcblock/ux 2.13.13 → 2.13.15

package/src/DIDConnect/did-connect-footer.tsx

@@ -0,0 +1,51 @@
+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',
+}: {
+  currentAppInfo?: any;
+  currentAppColor?: string;
+}) {
+  const isSmallView = useMediaQuery('(max-width:640px)');
+
+  return (
+    <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">
+      <AppInfoItem
+        appInfo={currentAppInfo}
+        appLogo={<AppIcon appInfo={currentAppInfo} size={24} sx={{ flexShrink: 0 }} />}
+        sx={{
+          flex: 1,
+          overflow: 'hidden',
+        }}
+      />
+
+      <PoweredBy sx={{ maxWidth: '100%', justifyContent: 'end' }} />
+    </Box>
+  );
+}

package/src/DIDConnect/did-connect-logo.tsx

@@ -0,0 +1,8 @@
+import DidBrandConnect from '@arcblock/icons/lib/DidBrandConnect';
+import { useTheme } from '@mui/material';
+
+export default function DidConnectLogo() {
+  const theme = useTheme();
+
+  return <DidBrandConnect style={{ filter: theme.palette.mode === 'dark' ? 'invert(1)' : 'none' }} />;
+}

package/src/DIDConnect/index.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/src/DIDConnect/powered-by.tsx

@@ -0,0 +1,48 @@
+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 (
+    <Box
+      {...rest}
+      sx={mergeSx(
+        {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: 'text.secondary',
+          gap: 0.5,
+          fontSize: 12,
+          fontFamily: 'Lexend',
+          whiteSpace: 'nowrap',
+        },
+        rest?.sx
+      )}>
+      <Icon icon={shieldCheckIcon} color={palette.success.main} />
+      Secured by
+      <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',
+          },
+        }}>
+        <DidConnectLogo />
+      </Box>
+    </Box>
+  );
+}

package/src/DIDConnect/with-container.tsx

@@ -0,0 +1,307 @@
+import { forwardRef, memo, useRef, useState } 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';
+import { Locale } from '../type';
+
+const BackdropWrap = memo(
+  forwardRef((backdropProps, ref) => {
+    return (
+      <Backdrop
+        open
+        ref={ref}
+        style={{
+          backgroundColor: 'rgba(0, 0, 0, 0.6)',
+          backdropFilter: 'blur(3px)',
+          touchAction: 'none',
+        }}
+        {...backdropProps}
+        key="background"
+      />
+    );
+  })
+);
+
+export default function withContainer(Component: React.ComponentType<any>) {
+  function WithContainerComponent({
+    popup = false,
+    open = false,
+    hideCloseButton = false,
+    ...rest
+  }: {
+    // 是否弹出显示, true 表示在 Dialog 中渲染, 并可以通过 open/onClose 控制 dialog 的显示/隐藏, false 表示直接渲染原内容
+    popup?: boolean;
+    open?: boolean;
+    hideCloseButton?: boolean;
+    onClose: () => void;
+    blocklet?: any;
+    origin?: string;
+    host?: string;
+    locale?: Locale;
+  }) {
+    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: React.MouseEvent<HTMLElement>, reason: string) => {
+      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 (
+        <Box
+          className="did-connect__container-page"
+          sx={mergeSx(glowStyle, {
+            borderRadius: 1,
+            position: 'relative',
+            zIndex: 1,
+          })}>
+          <Box
+            sx={{
+              border: `1px solid ${hexToRgba(color, 0.1)}`,
+              m: '-1px',
+              position: 'relative',
+              borderRadius: '12px',
+              zIndex: 2,
+              overflow: 'hidden',
+            }}>
+            <Component {...rest} onClose={wrapOnClose} setColor={setColor} hideCloseButton mode={openVariant} />
+          </Box>
+        </Box>
+      );
+    }
+
+    if (openVariant === 'drawer') {
+      return (
+        <DrawerComponent
+          className="did-connect__container-drawer"
+          disableSwipeToOpen
+          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)}`,
+                },
+              },
+            },
+          }}>
+          {hideCloseButton ? null : (
+            <Box
+              ref={drawerDragger}
+              sx={{
+                px: 1,
+                pt: 2,
+                m: 'auto',
+                mt: -1,
+                mb: -2,
+                zIndex: 2,
+              }}>
+              <Box
+                sx={{
+                  width: '48px',
+                  height: '4px',
+                  borderRadius: '100vw',
+                  backgroundColor: 'rgba(0, 0, 0, 0.2)',
+                }}
+              />
+            </Box>
+          )}
+          <Box
+            sx={{
+              touchAction: 'none',
+              maxWidth: '100%',
+              width: 500,
+              height: 'auto',
+            }}>
+            {/* HACK: 由于 MUI 文档中描述 使用 keepMounted: false 可能会造成问题，所以采用下面的方案进行 HACK */}
+            {/* https://mui.com/material-ui/react-drawer/#keep-mounted */}
+            {showModal ? (
+              <Component {...rest} onClose={wrapOnClose} setColor={setColor} hideCloseButton mode={openVariant} />
+            ) : null}
+          </Box>
+        </DrawerComponent>
+      );
+    }
+
+    return (
+      <Dialog
+        open={isOpen}
+        slots={{
+          backdrop: BackdropWrap,
+        }}
+        className="did-connect__container-dialog"
+        onClose={handleOnClose}
+        PaperProps={{
+          sx: {
+            // 避免样式被 server 中的定义覆盖
+            '&.MuiPaper-rounded': {
+              borderRadius: '12px !important',
+            },
+            position: 'relative',
+            ...glowStyle,
+          },
+        }}>
+        <DialogContent
+          sx={{
+            maxWidth: 'calc(100vw - 18px)',
+            maxHeight: 'calc(100vh - 18px)',
+            p: '0px !important',
+            height: 'auto',
+            backgroundColor: 'background.default',
+            borderRadius: '12px !important',
+            zIndex: 1,
+          }}>
+          {showModal ? (
+            <Component
+              {...rest}
+              onClose={wrapOnClose}
+              setColor={setColor}
+              hideCloseButton={hideCloseButton}
+              mode={openVariant}
+            />
+          ) : null}
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return WithContainerComponent;
+}

package/src/DIDConnect/with-ux-theme.tsx

@@ -0,0 +1,22 @@
+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: React.ComponentType<any>) {
+  function WithUxThemeComponent(props: any) {
+    const { palette } = useTheme();
+    const theme = palette.mode === 'dark' ? themeDark : themeLight;
+
+    return (
+      <ThemeProvider theme={theme}>
+        <Component {...props} />
+      </ThemeProvider>
+    );
+  }
+
+  return WithUxThemeComponent;
+}

package/src/Datatable/CustomToolbar.jsx

@@ -356,7 +356,6 @@ 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;

package/src/Datatable/index.jsx

@@ -57,7 +57,10 @@ import { styled } from '../Theme';
  *  components?: ModifiedMUIDataTableProps['components'],
  *  emptyNode?: import('react').ReactNode,
  *  durable?: string,
- *  durableKeys?: 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder'
+ *  durableKeys?: 'page' | 'rowsPerPage' | 'searchText' | 'sortOrder',
+ *  bgColor?: string,
+ *  hoverColor?: string,
+ *  stripColor?: string
  * } & ModifiedMUIDataTableProps} DataTableProps
  */
 
@@ -179,6 +182,9 @@ function ReDataTable({
   emptyNode,
   durable,
   durableKeys,
+  bgColor = 'transparent',
+  hoverColor,
+  stripColor,
   ...rest
 }) {
   const oldState = useRef(null);
@@ -405,6 +411,9 @@ function ReDataTable({
   return (
     <TableContainer
       verticalKeyWidth={verticalKeyWidth}
+      bgColor={bgColor}
+      hoverColor={hoverColor}
+      stripColor={stripColor}
       className={clsx({
         'datatable-stripped': stripped,
         'datatable-hide-header': hideTableHeader,
@@ -433,6 +442,9 @@ ReDataTable.propTypes = {
   emptyNode: PropTypes.node,
   durable: PropTypes.string,
   durableKeys: PropTypes.array,
+  bgColor: PropTypes.string,
+  hoverColor: PropTypes.string,
+  stripColor: PropTypes.string,
 };
 
 ReDataTable.defaultProps = {
@@ -451,6 +463,9 @@ ReDataTable.defaultProps = {
   emptyNode: '',
   durable: '',
   durableKeys: ['page', 'rowsPerPage', 'searchText', 'sortOrder'],
+  bgColor: 'transparent',
+  hoverColor: '',
+  stripColor: '',
 };
 
 const alignCss = css`
@@ -488,14 +503,12 @@ const alignCss = css`
   }
 `;
 
-const TableContainer = styled('div', { shouldForwardProp: (prop) => prop !== 'verticalKeyWidth' })(({
-  theme,
-  verticalKeyWidth,
-}) => {
+const TableContainer = styled('div', {
+  shouldForwardProp: (prop) => !['verticalKeyWidth', 'bgColor', 'hoverColor', 'stripColor'].includes(prop),
+})(({ theme, verticalKeyWidth, bgColor, hoverColor, stripColor }) => {
   const primaryTextColor = theme.palette.text.primary;
-  const defaultBgColor = theme.palette.background.default;
-  const hoverBgColor = theme.palette.action.hover;
-  const oddRowBgColor = theme.palette.grey[50];
+  const defaultHoverColor = theme.palette.action.hover;
+  const defaultStripColor = theme.palette.grey[50];
 
   const verticalKeyWidthStyle = verticalKeyWidth
     ? `
@@ -541,7 +554,7 @@ const TableContainer = styled('div', { shouldForwardProp: (prop) => prop !== 've
       height: 100%;
       box-shadow: none;
       background: none;
-      background-color: ${defaultBgColor};
+      background-color: ${bgColor};
     }
     ${theme.breakpoints.down('md')} {
       td.MuiTableCell-body {
@@ -582,7 +595,7 @@ const TableContainer = styled('div', { shouldForwardProp: (prop) => prop !== 've
 
     .MuiTableCell-head {
       color: ${primaryTextColor};
-      background-color: ${defaultBgColor};
+      background-color: ${bgColor};
     }
 
     .MuiTableCell-root {
@@ -590,26 +603,26 @@ const TableContainer = styled('div', { shouldForwardProp: (prop) => prop !== 've
     }
 
     .MuiTableRow-root {
-      background-color: ${defaultBgColor};
-      &:nth-of-type(even) {
-        background-color: ${defaultBgColor};
-      }
+      background-color: ${bgColor};
       &:hover {
-        background-color: ${hoverBgColor};
+        background-color: ${hoverColor || defaultHoverColor};
       }
       &.MuiTableRow-footer {
-        background-color: ${defaultBgColor};
+        background-color: ${bgColor};
       }
     }
 
     &.datatable-stripped {
       .MuiTableRow-root:nth-of-type(odd) {
-        background-color: ${oddRowBgColor};
+        background-color: ${stripColor || defaultStripColor};
         &:hover {
-          background-color: ${hoverBgColor};
+          background-color: ${hoverColor || defaultHoverColor};
+        }
+        &.MuiTableRow-head {
+          background-color: ${bgColor};
         }
         &.MuiTableRow-footer {
-          background-color: ${defaultBgColor};
+          background-color: ${bgColor};
         }
       }
     }
@@ -619,7 +632,6 @@ const TableContainer = styled('div', { shouldForwardProp: (prop) => prop !== 've
 const FooterContainer = styled('div')`
   display: flex;
   align-items: center;
-  background-color: ${(props) => props.theme.palette.background.default};
   .datatable-footer {
     position: relative;
     margin-left: auto;

package/src/Dialog/confirm.jsx

@@ -15,6 +15,7 @@ import Dialog from './dialog';
  *   children?: React.ReactNode,
  *   showCancelButton?: true | false,
  *   showCloseButton?: true | false,
+ *   showConfirmButton?: true | false,
  *   fullScreen?: false | true,
  *   confirmButton?: {text: React.ReactNode, props?: ButtonProps}
  *   cancelButton?: {text: React.ReactNode, props?: ButtonProps}
@@ -35,6 +36,7 @@ export default function Confirm({
   onCancel,
   showCloseButton,
   showCancelButton,
+  showConfirmButton,
   fullScreen,
   confirmButton,
   cancelButton,
@@ -81,29 +83,33 @@ export default function Confirm({
         },
       }}
       actions={
-        <>
-          {showCancelButton && (
-            <Button
-              onClick={(e) => {
-                e.stopPropagation();
-                onCancel(e, 'closeButton');
-              }}
-              color="primary"
-              {...cancelButton.props}>
-              {cancelButton.text}
-            </Button>
-          )}
-          <Button
-            onClick={(e) => {
-              e.stopPropagation();
-              onConfirm(e);
-            }}
-            color="primary"
-            autoFocus
-            {...confirmButton.props}>
-            {confirmButton.text}
-          </Button>
-        </>
+        showCancelButton || showConfirmButton ? (
+          <>
+            {showCancelButton && (
+              <Button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onCancel(e, 'closeButton');
+                }}
+                color="primary"
+                {...cancelButton.props}>
+                {cancelButton.text}
+              </Button>
+            )}
+            {showConfirmButton && (
+              <Button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onConfirm(e);
+                }}
+                color="primary"
+                autoFocus
+                {...confirmButton.props}>
+                {confirmButton.text}
+              </Button>
+            )}
+          </>
+        ) : null
       }>
       {children}
     </Dialog>
@@ -117,6 +123,7 @@ Confirm.propTypes = {
   onCancel: PropTypes.func.isRequired,
   children: PropTypes.node,
   showCancelButton: PropTypes.bool,
+  showConfirmButton: PropTypes.bool,
   showCloseButton: PropTypes.bool,
   fullScreen: PropTypes.bool,
   // 可以传入 {text: ..., props: ...}
@@ -133,6 +140,7 @@ Confirm.propTypes = {
 
 Confirm.defaultProps = {
   showCancelButton: true,
+  showConfirmButton: true,
   showCloseButton: true,
   fullScreen: false,
   confirmButton: {