@arcblock/ux 2.13.69 → 3.0.0

package/src/DIDConnect/request-storage-access-api-dialog.tsx

@@ -5,7 +5,7 @@ import lockOutlineIcon from '@iconify-icons/material-symbols/lock-outline';
 import checkCircleIcon from '@iconify-icons/material-symbols/check-circle';
 import rocketLaunchRoundedIcon from '@iconify-icons/material-symbols/rocket-launch-rounded';
 import { useMemoizedFn, useReactive } from 'ahooks';
-import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import { memo, useImperativeHandle, useRef } from 'react';
 import noop from 'lodash/noop';
 
 import { Locale } from '../type';
@@ -67,212 +67,239 @@ const translations: Record<
   },
 };
 
-const RequestStorageAccessApiDialog = forwardRef(
-  (
-    {
-      locale = 'en',
-      src,
-      storageAccessState,
-    }: {
-      locale?: Locale;
-      src: string;
-      storageAccessState: StorageAccessState;
+function RequestStorageAccessApiDialog({
+  ref,
+  locale = 'en',
+  src,
+  storageAccessState,
+}: {
+  locale?: Locale;
+  src: string;
+  storageAccessState: StorageAccessState;
+} & {
+  ref?: React.Ref<unknown>;
+}) {
+  const sharedBridgeRef = useRef<{ callIframe: (method: string) => Promise<any> }>(null);
+  const currentState = useReactive({
+    callback: noop,
+    open: false,
+    get origin() {
+      try {
+        return new URL(src).origin;
+      } catch (error) {
+        return src;
+      }
     },
-    ref
-  ) => {
-    const sharedBridgeRef = useRef<{ callIframe: (method: string) => Promise<any> }>(null);
-    const currentState = useReactive({
-      callback: noop,
-      open: false,
-      get origin() {
-        try {
-          return new URL(src).origin;
-        } catch (error) {
-          return src;
-        }
-      },
-      get host() {
-        try {
-          return new URL(src).host;
-        } catch (error) {
-          return src;
-        }
-      },
-    });
-    const t = useMemoizedFn((key, data = {}) => {
-      return translate(translations, key, locale, 'en', data);
-    });
+    get host() {
+      try {
+        return new URL(src).host;
+      } catch (error) {
+        return src;
+      }
+    },
+  });
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
 
-    const reset = useMemoizedFn(() => {
-      currentState.open = false;
-      currentState.callback = noop;
-    });
+  const reset = useMemoizedFn(() => {
+    currentState.open = false;
+    currentState.callback = noop;
+  });
 
-    const open = useMemoizedFn(() => {
-      currentState.open = true;
-    });
-    const close = useMemoizedFn(() => {
-      currentState.open = false;
-    });
+  const open = useMemoizedFn(() => {
+    currentState.open = true;
+  });
+  const close = useMemoizedFn(() => {
+    currentState.open = false;
+  });
 
-    const _requestStorageAccess = useMemoizedFn(
-      async (callback: (result: boolean, origin?: 'broswer' | 'system') => void) => {
-        const result = await sharedBridgeRef.current?.callIframe('requestStorageAccess');
-        if (result.value) {
-          callback(true, 'broswer');
-        } else if (storageAccessState === undefined) {
-          // 用户未在当前网页交互过，此时必然需要进行一次弹窗
-          callback(false, 'system');
-        } else if (storageAccessState === 'denied') {
-          // 用户已经明确拒绝过跨站授权，直接弹窗
-          callback(false);
-        } else {
-          // NOTICE: 暂时保留这部分逻辑，后续可能会用上
-          // else if (
-          //   result.error?.name === 'NotAllowedError' &&
-          //   result.error?.message === 'requestStorageAccess not allowed'
-          // ) {
-          //   // 操作被浏览器禁止，需要用户手动与 iframe 交互一次才可以
-          //   currentState.open = true;
-          //   currentState.callback = callback;
-          // }
-          currentState.open = true;
-          currentState.callback = callback;
-        }
+  const _requestStorageAccess = useMemoizedFn(
+    async (callback: (result: boolean, origin?: 'broswer' | 'system') => void) => {
+      const result = await sharedBridgeRef.current?.callIframe('requestStorageAccess');
+      if (result.value) {
+        callback(true, 'broswer');
+      } else if (storageAccessState === undefined) {
+        // 用户未在当前网页交互过，此时必然需要进行一次弹窗
+        callback(false, 'system');
+      } else if (storageAccessState === 'denied') {
+        // 用户已经明确拒绝过跨站授权，直接弹窗
+        callback(false);
+      } else {
+        // NOTICE: 暂时保留这部分逻辑，后续可能会用上
+        // else if (
+        //   result.error?.name === 'NotAllowedError' &&
+        //   result.error?.message === 'requestStorageAccess not allowed'
+        // ) {
+        //   // 操作被浏览器禁止，需要用户手动与 iframe 交互一次才可以
+        //   currentState.open = true;
+        //   currentState.callback = callback;
+        // }
+        currentState.open = true;
+        currentState.callback = callback;
       }
-    );
-    const requestStorageAccess = useMemoizedFn(() => {
-      return new Promise((resolve) => {
-        _requestStorageAccess((result, origin) => {
-          reset();
-          resolve({ value: result, origin });
-        });
+    }
+  );
+  const requestStorageAccess = useMemoizedFn(() => {
+    return new Promise((resolve) => {
+      _requestStorageAccess((result, origin) => {
+        reset();
+        resolve({ value: result, origin });
       });
     });
+  });
 
-    const handleAllow = useMemoizedFn(() => {
-      currentState.open = false;
-    });
-    const handleClose = useMemoizedFn(() => {
-      currentState.open = false;
-      currentState.callback(false, 'system');
-    });
+  const handleAllow = useMemoizedFn(() => {
+    currentState.open = false;
+  });
+  const handleClose = useMemoizedFn(() => {
+    currentState.open = false;
+    currentState.callback(false, 'system');
+  });
 
-    useImperativeHandle(ref, () => ({
-      open,
-      close,
-      requestStorageAccess,
-    }));
+  useImperativeHandle(ref, () => ({
+    open,
+    close,
+    requestStorageAccess,
+  }));
 
-    return (
-      <DIDConnectContainer popup open={currentState.open} onClose={handleClose} keepMounted>
-        <Box
+  return (
+    <DIDConnectContainer popup open={currentState.open} onClose={handleClose} keepMounted>
+      <Box
+        sx={{
+          backgroundColor: 'background.default',
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
+          position: 'relative',
+          maxWidth: '100%',
+          transition: 'width 0.2s ease-in-out',
+          margin: 'auto',
+          p: 3,
+          gap: 2,
+        }}>
+        <CloseButton
+          onClose={handleClose}
           sx={{
-            backgroundColor: 'background.default',
+            position: 'absolute',
+            right: 14,
+            top: 14,
+          }}
+        />
+        <Typography
+          component="div"
+          variant="h4"
+          sx={{
+            fontWeight: 700,
+            fontFamily: 'Lexend',
             display: 'flex',
-            flexDirection: 'column',
-            height: '100%',
-            position: 'relative',
-            maxWidth: '100%',
-            transition: 'width 0.2s ease-in-out',
-            margin: 'auto',
-            p: 3,
-            gap: 2,
+            alignItems: 'center',
+            gap: 1,
           }}>
-          <CloseButton
-            onClose={handleClose}
+          <Box
+            component={Icon}
+            icon={lockOutlineIcon}
             sx={{
-              position: 'absolute',
-              right: 14,
-              top: 14,
+              fontSize: 28,
+              color: 'warning.main',
             }}
           />
+          {t('title')}
+        </Typography>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+          {/* 不需要随意更改以下内容的格式化，否则会影响到 UI 的展示 */}
+          <Typography>
+            {t('reason', {
+              site: (
+                <Chip
+                  clickable
+                  component="a"
+                  href={currentState.origin}
+                  label={currentState.host}
+                  size="small"
+                  deleteIcon={<Icon icon={externalLinkIcon} />}
+                  onDelete={() => {}}
+                  target="_blank"
+                />
+              ),
+            })}
+          </Typography>
+          <Typography component="div">
+            {t('clickAllow', {
+              allowButton: <Chip label={t('allow')} size="small" color="success" />,
+            })}
+          </Typography>
+          <Box sx={{ mt: 2 }}>
+            <Typography sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
+              <Box
+                component={Icon}
+                icon={checkCircleIcon}
+                sx={{
+                  fontSize: 24,
+                  color: 'success.main',
+                }}
+              />
+              {t('afterAllow.title')}
+            </Typography>
+            <List dense sx={{ py: 0, pl: 2 }}>
+              <ListItem sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>
+                <Box
+                  component={Icon}
+                  icon={rocketLaunchRoundedIcon}
+                  sx={{
+                    fontSize: 20,
+                    color: 'success.main',
+                  }}
+                />
+                {t('afterAllow.list1')}
+              </ListItem>
+              <ListItem sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>
+                <Box
+                  component={Icon}
+                  icon={rocketLaunchRoundedIcon}
+                  sx={{
+                    fontSize: 20,
+                    color: 'success.main',
+                  }}
+                />
+                {t('afterAllow.list2')}
+              </ListItem>
+            </List>
+          </Box>
+
           <Typography
             component="div"
-            variant="h4"
+            variant="body2"
             sx={{
-              fontWeight: 700,
-              fontFamily: 'Lexend',
-              display: 'flex',
-              alignItems: 'center',
-              gap: 1,
+              color: 'grey.700',
             }}>
-            <Box component={Icon} icon={lockOutlineIcon} fontSize={28} sx={{ color: 'warning.main' }} />
-            {t('title')}
+            {t('dataUsage')}
           </Typography>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-            {/* 不需要随意更改以下内容的格式化，否则会影响到 UI 的展示 */}
-            <Typography>
-              {t('reason', {
-                site: (
-                  <Chip
-                    clickable
-                    component="a"
-                    href={currentState.origin}
-                    label={currentState.host}
-                    size="small"
-                    deleteIcon={<Icon icon={externalLinkIcon} />}
-                    onDelete={() => {}}
-                    target="_blank"
-                  />
-                ),
-              })}
-            </Typography>
-            <Typography component="div">
-              {t('clickAllow', {
-                allowButton: <Chip label={t('allow')} size="small" color="success" />,
-              })}
-            </Typography>
-            <Box sx={{ mt: 2 }}>
-              <Typography sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
-                <Box component={Icon} icon={checkCircleIcon} fontSize={24} sx={{ color: 'success.main' }} />
-                {t('afterAllow.title')}
-              </Typography>
-              <List dense sx={{ py: 0, pl: 2 }}>
-                <ListItem sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>
-                  <Box component={Icon} icon={rocketLaunchRoundedIcon} fontSize={20} sx={{ color: 'success.main' }} />
-                  {t('afterAllow.list1')}
-                </ListItem>
-                <ListItem sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>
-                  <Box component={Icon} icon={rocketLaunchRoundedIcon} fontSize={20} sx={{ color: 'success.main' }} />
-                  {t('afterAllow.list2')}
-                </ListItem>
-              </List>
-            </Box>
-
-            <Typography component="div" variant="body2" color="grey.700">
-              {t('dataUsage')}
-            </Typography>
-          </Box>
+        </Box>
 
-          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-            <Box sx={{ position: 'relative', display: 'inline-block', cursor: 'pointer' }}>
-              <Button
-                variant="contained"
-                color="success"
-                onClick={handleAllow}
-                sx={{ minWidth: 100, letterSpacing: 1 }}>
-                {t('allow')}
-              </Button>
-              <SharedBridge
-                ref={sharedBridgeRef}
-                onClick={({ value, visitorId }) => {
-                  if (visitorId) setVisitorId(visitorId);
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          <Box sx={{ position: 'relative', display: 'inline-block', cursor: 'pointer' }}>
+            <Button variant="contained" color="success" onClick={handleAllow} sx={{ minWidth: 100, letterSpacing: 1 }}>
+              {t('allow')}
+            </Button>
+            <SharedBridge
+              ref={sharedBridgeRef}
+              onClick={({ value, visitorId }) => {
+                if (visitorId) setVisitorId(visitorId);
 
-                  currentState.callback(value, 'broswer');
-                }}
-                locale={locale}
-                src={src}
-                sx={{
-                  zIndex: 1,
-                }}
-              />
-            </Box>
+                currentState.callback(value, 'broswer');
+              }}
+              locale={locale}
+              src={src}
+              sx={{
+                zIndex: 1,
+              }}
+            />
           </Box>
         </Box>
-      </DIDConnectContainer>
-    );
-  }
-);
+      </Box>
+    </DIDConnectContainer>
+  );
+}
 
 export default memo(RequestStorageAccessApiDialog);

package/src/DIDConnect/with-container.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo, useRef, useState } from 'react';
+import { 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';
@@ -9,23 +9,22 @@ 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"
-      />
-    );
-  })
-);
+// eslint-disable-next-line react/require-default-props
+const BackdropWrap = memo(({ ref, ...backdropProps }: { ref?: React.Ref<unknown> }) => {
+  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({

package/src/Datatable/CustomToolbar.jsx

@@ -1,21 +1,27 @@
-import { useState, useRef, useEffect, isValidElement } from 'react';
+import { useState, useRef, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import { TableFilter, TableViewCol } from 'mui-datatables';
 import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import DownloadIcon from '@mui/icons-material/CloudDownload';
-import PrintIcon from '@mui/icons-material/Print';
-import ViewColumnIcon from '@mui/icons-material/ViewColumn';
-import FilterIcon from '@mui/icons-material/FilterList';
-import Popover from '@mui/material/Popover';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import LinearProgress from '@mui/material/LinearProgress';
+import {
+  CloudDownload as DownloadIcon,
+  Print as PrintIcon,
+  ViewColumn as ViewColumnIcon,
+  FilterList as FilterIcon,
+  MoreVert as MoreVertIcon,
+} from '@mui/icons-material';
+import {
+  ListItemText,
+  useMediaQuery,
+  LinearProgress,
+  ListItemIcon,
+  Popover,
+  Menu,
+  MenuItem,
+  Tooltip,
+  IconButton,
+} from '@mui/material';
+import { useDeepCompareEffect } from 'ahooks';
+
 import { handleCSVDownload } from './utils';
 import TableSearch from './TableSearch';
 import { useDatatableContext } from './DatatableContext';
@@ -35,19 +41,19 @@ export default function CustomToolbar(props) {
   const { customPreButtons, customButtons, loading, disabled } = useDatatableContext();
 
   const {
-    data,
+    data = [],
     options,
-    components,
+    components = {},
     columns,
-    filterList,
-    filterData,
+    filterList = [],
+    filterData = [],
     filterUpdate,
     resetFilters,
     updateFilterByType,
     toggleViewColumn,
     updateColumns,
-    title,
-    searchText,
+    title = '',
+    searchText = null,
     searchTextUpdate,
     searchClose,
   } = props;
@@ -64,7 +70,7 @@ export default function CustomToolbar(props) {
   const TableFilterComponent = components.TableFilter || TableFilter;
   const TableViewColComponent = components.TableViewCol || TableViewCol;
 
-  useEffect(() => {
+  useDeepCompareEffect(() => {
     if (loading || disabled) {
       setAllPopsEl({});
     }
@@ -293,13 +299,14 @@ export default function CustomToolbar(props) {
         </div>
         {customToolbarEle}
       </Container>
-
       <Menu
         anchorEl={menuIconEl}
         open={!!menuIconEl}
         onClose={() => setMenuIconEl(null)}
-        MenuListProps={{
-          'aria-labelledby': 'more-button',
+        slotProps={{
+          list: {
+            'aria-labelledby': 'more-button',
+          },
         }}>
         {!hidePrint &&
           printArea(({ handlePrint }) => (
@@ -343,15 +350,6 @@ CustomToolbar.propTypes = {
   tableRef: PropTypes.func.isRequired,
 };
 
-CustomToolbar.defaultProps = {
-  data: [],
-  components: {},
-  filterList: [],
-  filterData: [],
-  title: '',
-  searchText: null,
-};
-
 const Container = styled('div')`
   display: flex;
   align-items: center;

package/src/Datatable/Datatable.stories.jsx

@@ -0,0 +1,92 @@
+import { Box, IconButton } from '@mui/material';
+import {
+  LightModeOutlined as LightModeOutlinedIcon,
+  Brightness2Outlined as Brightness2OutlinedIcon,
+} from '@mui/icons-material';
+
+import Basic from './demo/basic';
+import Durable from './demo/durable';
+import Stripped from './demo/stripped';
+import LocaleZh from './demo/locale-zh';
+import ElementTitle from './demo/element-title';
+import CustomButtons from './demo/custom-buttons';
+import ColumnWidth from './demo/column-width';
+import SelectItem from './demo/select-item';
+import SetTableBodyHeight from './demo/set-table-body-height';
+import HideTableHeader from './demo/hide-table-header';
+import ParentContainerHasHeight from './demo/parent-container-has-height';
+import InFlexHeight from './demo/in-flex-height';
+import EmptyTable from './demo/empty-table';
+import VerticalKeyWidth from './demo/vertical-key-width';
+import CustomCellRender from './demo/custom-cell-render';
+import SearchOpenAndPlaceholder from './demo/search-open-and-placeholder';
+import DynamicData from './demo/dynamic-data';
+import LotsOfData from './demo/lots-of-data';
+import JumpToPage from './demo/jump-to-page';
+import { ThemeProvider, useColorScheme } from '../Theme';
+
+export default {
+  title: 'Data Display/Datatable',
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'Enhanced Datatable component, based on mui-datatables',
+      },
+    },
+  },
+  decorators: [
+    (StoryFn) => (
+      <ThemeProvider prefer="system">
+        <Container>
+          <StoryFn />
+        </Container>
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export {
+  Basic,
+  Durable,
+  Stripped,
+  LocaleZh,
+  ElementTitle,
+  CustomButtons,
+  ColumnWidth,
+  SelectItem,
+  SetTableBodyHeight,
+  HideTableHeader,
+  ParentContainerHasHeight,
+  InFlexHeight,
+  EmptyTable,
+  VerticalKeyWidth,
+  CustomCellRender,
+  SearchOpenAndPlaceholder,
+  DynamicData,
+  LotsOfData,
+  JumpToPage,
+};
+
+VerticalKeyWidth.parameters = {
+  viewport: {
+    defaultViewport: 'tablet',
+  },
+};
+
+// eslint-disable-next-line react/prop-types
+function Container({ children }) {
+  const { mode, toggleMode } = useColorScheme();
+
+  return (
+    <Box sx={{ p: 4, backgroundColor: 'background.default', color: 'text.primary' }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+        {/* 切换浅色/深色模式 */}
+        <IconButton onClick={toggleMode} color="inherit" sx={{ border: 1, borderColor: 'divider' }}>
+          {mode === 'light' ? <Brightness2OutlinedIcon /> : <LightModeOutlinedIcon />}
+        </IconButton>
+      </Box>
+      {children}
+    </Box>
+  );
+}