@arcblock/ux 2.13.12 → 2.13.14

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

@@ -488,101 +488,138 @@ const alignCss = css`
   }
 `;
 
-const TableContainer = styled('div', { shouldForwardProp: (prop) => prop !== 'verticalKeyWidth' })`
-  &.datatable-hide-header {
-    thead.MuiTableHead-root {
-      display: none;
-    }
-  }
+const TableContainer = styled('div', { shouldForwardProp: (prop) => prop !== 'verticalKeyWidth' })(({
+  theme,
+  verticalKeyWidth,
+}) => {
+  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 verticalKeyWidthStyle = verticalKeyWidth
+    ? `
+      ${theme.breakpoints.down('md')} {
+        [class*='MUIDataTable-responsiveBase'] {
+          tr:not([class*='responsiveSimple']) {
+            td.MuiTableCell-body {
+              > div {
+                &:first-of-type {
+                  width: ${verticalKeyWidth + (!/\D/.test(verticalKeyWidth) ? 'px' : '')};
+                }
+              }
+            }
+          }
+        }
+      }
+    `
+    : '';
 
-  td {
-    &.vertical-align-top {
-      align-items: flex-start;
-    }
-    &.vertical-align-center {
-      align-items: center;
+  return css`
+    &.datatable-hide-header {
+      thead.MuiTableHead-root {
+        display: none;
+      }
     }
-    &.vertical-align-bottom {
-      align-items: flex-end;
+
+    td {
+      &.vertical-align-top {
+        align-items: flex-start;
+      }
+      &.vertical-align-center {
+        align-items: center;
+      }
+      &.vertical-align-bottom {
+        align-items: flex-end;
+      }
     }
-  }
 
-  height: 100%;
-  > .MuiPaper-root {
-    display: flex;
-    flex-direction: column;
     height: 100%;
-    box-shadow: none;
-  }
-  ${(props) => props.theme.breakpoints.down('md')} {
-    td.MuiTableCell-body {
-      padding-right: 0;
+    > .MuiPaper-root {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-shadow: none;
+      background: none;
+      background-color: ${defaultBgColor};
     }
-    [class*='MUIDataTable-responsiveBase'] {
-      tr:not([class*='responsiveSimple']) {
-        td.MuiTableCell-body {
-          display: flex;
-          > div {
-            width: auto;
-            flex: 1;
-            &:first-of-type {
-              font-weight: bold;
-              font-size: 14px;
+    ${theme.breakpoints.down('md')} {
+      td.MuiTableCell-body {
+        padding-right: 0;
+      }
+      [class*='MUIDataTable-responsiveBase'] {
+        tr:not([class*='responsiveSimple']) {
+          td.MuiTableCell-body {
+            display: flex;
+            > div {
               width: auto;
-              flex: 0 0 auto;
-              padding-right: 16px;
-              &:empty {
-                padding-right: 0;
+              flex: 1;
+              &:first-of-type {
+                font-weight: bold;
+                font-size: 14px;
+                width: auto;
+                flex: 0 0 auto;
+                padding-right: 16px;
+                &:empty {
+                  padding-right: 0;
+                }
               }
             }
           }
         }
       }
     }
-  }
-  ${(props) => props.theme.breakpoints.up('md')} {
-    ${alignCss}
-  }
-  ${(props) => props.theme.breakpoints.up('sm')} {
-    [class*='responsiveSimple'] {
+    ${theme.breakpoints.up('md')} {
       ${alignCss}
     }
-  }
+    ${theme.breakpoints.up('sm')} {
+      [class*='responsiveSimple'] {
+        ${alignCss}
+      }
+    }
 
-  ${(inProps) => {
-    if (inProps.verticalKeyWidth) {
-      return `
-        ${inProps.theme.breakpoints.down('md')} {
-          [class*='MUIDataTable-responsiveBase'] {
-            tr:not([class*='responsiveSimple']) {
-              td.MuiTableCell-body {
-                > div {
-                  &:first-of-type {
-                    width: ${inProps.verticalKeyWidth + (!/\D/.test(inProps.verticalKeyWidth) ? 'px' : '')};
-                  }
-                }
-              }
-            }
-          }
-        }
-      `;
+    ${verticalKeyWidthStyle}
+
+    .MuiTableCell-head {
+      color: ${primaryTextColor};
+      background-color: ${defaultBgColor};
     }
 
-    return '';
-  }}
+    .MuiTableCell-root {
+      color: ${primaryTextColor};
+    }
 
-  &.datatable-stripped {
-    .MuiTableBody-root {
-      tr:nth-of-type(odd) {
-        background-color: ${(props) => props.theme.palette.action.hover};
+    .MuiTableRow-root {
+      background-color: ${defaultBgColor};
+      &:nth-of-type(even) {
+        background-color: ${defaultBgColor};
+      }
+      &:hover {
+        background-color: ${hoverBgColor};
+      }
+      &.MuiTableRow-footer {
+        background-color: ${defaultBgColor};
       }
     }
-  }
-`;
+
+    &.datatable-stripped {
+      .MuiTableRow-root:nth-of-type(odd) {
+        background-color: ${oddRowBgColor};
+        &:hover {
+          background-color: ${hoverBgColor};
+        }
+        &.MuiTableRow-footer {
+          background-color: ${defaultBgColor};
+        }
+      }
+    }
+  `;
+});
 
 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: {

package/src/Dialog/use-confirm.jsx

@@ -19,6 +19,7 @@ const ConfirmHolder = forwardRef((props, ref) => {
     loading: false,
     showCancelButton: true,
     showCloseButton: true,
+    showConfirmButton: true,
     confirmButtonText: 'Confirm',
     confirmButtonProps: {},
     cancelButtonText: 'Cancel',
@@ -43,6 +44,7 @@ const ConfirmHolder = forwardRef((props, ref) => {
     state.onCancel = params.onCancel || noop;
     state.showCloseButton = params.showCloseButton ?? true;
     state.showCancelButton = params.showCancelButton ?? true;
+    state.showConfirmButton = params.showConfirmButton ?? true;
     if (params.confirmButtonText) state.confirmButtonText = params.confirmButtonText;
     if (params.confirmButtonProps) state.confirmButtonProps = params.confirmButtonProps;
     if (params.cancelButtonText) state.cancelButtonText = params.cancelButtonText;
@@ -62,6 +64,9 @@ const ConfirmHolder = forwardRef((props, ref) => {
     state.confirmButtonProps = {};
     state.cancelButtonText = 'Cancel';
     state.cancelButtonProps = {};
+    state.showConfirmButton = true;
+    state.showCancelButton = true;
+    state.showCloseButton = true;
   });
   const close = useMemoizedFn(() => {
     state.show = false;
@@ -130,6 +135,7 @@ const ConfirmHolder = forwardRef((props, ref) => {
       }}
       showCloseButton={state.showCloseButton}
       showCancelButton={state.showCancelButton}
+      showConfirmButton={state.showConfirmButton}
       cancelButton={{
         text: state.cancelButtonText,
         props: {

package/src/Footer/index.tsx

@@ -77,7 +77,7 @@ const Container = styled('div', {
   position: relative;
   margin-top: 64px;
   padding: 24px 0 32px;
-  border-top: 1px solid ${(props) => (props.dark ? props.theme.palette.grey[900] : '#dee2e7')};
+  border-top: 1px solid ${(props) => props.theme.palette.divider};
   box-sizing: border-box;
   width: 100%;
 
@@ -92,7 +92,7 @@ const Container = styled('div', {
     flex-wrap: wrap;
 
     .footer-item {
-      color: ${({ theme, dark }) => (dark ? theme.palette.grey[500] : theme.palette.grey[900])};
+      color: ${(props) => props.theme.palette.text.hint};
       display: flex;
       align-items: center;
       flex-wrap: wrap;