@arcblock/ux 2.13.14 → 2.13.16

package/lib/Config/theme-mode-toggle.js

@@ -16,6 +16,6 @@ export default function ThemeModeToggle() {
   }
   return /*#__PURE__*/_jsx(IconButton, {
     onClick: toggleMode,
-    children: mode === 'light' ? /*#__PURE__*/_jsx(LightModeOutlinedIcon, {}) : /*#__PURE__*/_jsx(Brightness2OutlinedIcon, {})
+    children: mode === 'light' ? /*#__PURE__*/_jsx(Brightness2OutlinedIcon, {}) : /*#__PURE__*/_jsx(LightModeOutlinedIcon, {})
   });
 }

package/lib/Datatable/CustomToolbar.js

@@ -329,9 +329,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/lib/Datatable/index.d.ts

@@ -40,6 +40,9 @@ export type DataTableProps = {
     emptyNode?: import("react").ReactNode;
     durable?: string;
     durableKeys?: "page" | "rowsPerPage" | "searchText" | "sortOrder";
+    bgColor?: string;
+    hoverColor?: string;
+    stripColor?: string;
 } & ModifiedMUIDataTableProps;
 import { TableFilterList } from 'mui-datatables';
 import { TableFooter } from 'mui-datatables';

package/lib/Datatable/index.js

@@ -58,7 +58,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);
@@ -419,6 +425,9 @@ function ReDataTable({
   };
   return /*#__PURE__*/_jsx(TableContainer, {
     verticalKeyWidth: verticalKeyWidth,
+    bgColor: bgColor,
+    hoverColor: hoverColor,
+    stripColor: stripColor,
     className: clsx({
       'datatable-stripped': stripped,
       'datatable-hide-header': hideTableHeader
@@ -448,7 +457,10 @@ ReDataTable.propTypes = {
   components: PropTypes.object,
   emptyNode: PropTypes.node,
   durable: PropTypes.string,
-  durableKeys: PropTypes.array
+  durableKeys: PropTypes.array,
+  bgColor: PropTypes.string,
+  hoverColor: PropTypes.string,
+  stripColor: PropTypes.string
 };
 ReDataTable.defaultProps = {
   options: {},
@@ -465,7 +477,10 @@ ReDataTable.defaultProps = {
   components: {},
   emptyNode: '',
   durable: '',
-  durableKeys: ['page', 'rowsPerPage', 'searchText', 'sortOrder']
+  durableKeys: ['page', 'rowsPerPage', 'searchText', 'sortOrder'],
+  bgColor: 'transparent',
+  hoverColor: '',
+  stripColor: ''
 };
 const alignCss = css`
   .MuiTableCell-head {
@@ -502,15 +517,17 @@ const alignCss = css`
   }
 `;
 const TableContainer = styled('div', {
-  shouldForwardProp: prop => prop !== 'verticalKeyWidth'
+  shouldForwardProp: prop => !['verticalKeyWidth', 'bgColor', 'hoverColor', 'stripColor'].includes(prop)
 })(({
   theme,
-  verticalKeyWidth
+  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 ? `
       ${theme.breakpoints.down('md')} {
         [class*='MUIDataTable-responsiveBase'] {
@@ -552,7 +569,7 @@ const TableContainer = styled('div', {
       height: 100%;
       box-shadow: none;
       background: none;
-      background-color: ${defaultBgColor};
+      background-color: ${bgColor};
     }
     ${theme.breakpoints.down('md')} {
       td.MuiTableCell-body {
@@ -593,7 +610,7 @@ const TableContainer = styled('div', {
 
     .MuiTableCell-head {
       color: ${primaryTextColor};
-      background-color: ${defaultBgColor};
+      background-color: ${bgColor};
     }
 
     .MuiTableCell-root {
@@ -601,26 +618,26 @@ const TableContainer = styled('div', {
     }
 
     .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};
         }
       }
     }
@@ -629,7 +646,6 @@ const TableContainer = styled('div', {
 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/lib/LoadingMask/index.js

@@ -52,7 +52,7 @@ export default function LoadingMask({
           right: finialBorderWidth,
           top: finialBorderWidth,
           bottom: finialBorderWidth,
-          backgroundColor: 'white',
+          backgroundColor: 'background.default',
           borderRadius: `${finialRadius - finialBorderWidth}px`
         },
         '&::before': {

package/lib/NavMenu/style.js

@@ -12,7 +12,6 @@ export const NavMenuStyled = styled('nav', {
   minWidth: '50px',
   // FIXME: @zhanghan 这个只是临时的解决方案，会导致 header align right 不能真正的右对齐，需要修改 header 才能真正解决这个问题
   flexGrow: 100,
-  backgroundColor: $bgColor,
   color: $textColor,
   fontSize: '16px',
   '&.navmenu--inline': {

package/lib/SharedBridge/index.js

@@ -20,6 +20,7 @@ const SharedBridge = /*#__PURE__*/memo(function SharedBridge({
   const refId = useId();
   const dataId = `shared-bridge_${refId}`;
   const currentState = useReactive({
+    hasInited: undefined,
     open: false,
     hasStorageAccess: false,
     get origin() {
@@ -72,10 +73,22 @@ const SharedBridge = /*#__PURE__*/memo(function SharedBridge({
       value
     }) => {
       currentState.hasStorageAccess = value;
+      currentState.hasInited = true;
     });
+    setTimeout(() => {
+      if (currentState.hasInited === undefined) {
+        currentState.hasInited = false;
+      }
+    }, 1000);
     onLoad();
   });
-  return currentState.hasStorageAccess ? null : /*#__PURE__*/_jsxs(_Fragment, {
+  if (currentState.hasInited === false) {
+    return null;
+  }
+  if (currentState.hasStorageAccess) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(DialogComponent, {
       popup: true,
       locale: locale,
@@ -101,7 +114,8 @@ const SharedBridge = /*#__PURE__*/memo(function SharedBridge({
         left: 0,
         width: '100%',
         height: '100%',
-        cursor: 'pointer'
+        cursor: 'pointer',
+        opacity: 0
       }, sx)
     })]
   });

package/lib/hooks/use-blocklet-logo.d.ts

@@ -0,0 +1,8 @@
+import { type Breakpoint } from '@mui/material';
+import { type ThemeOptions } from '@blocklet/theme';
+export default function useBlockletLogo({ key, meta, theme: themeOverrides, square, }?: {
+    key?: number | Breakpoint;
+    meta?: any;
+    theme?: ThemeOptions;
+    square?: boolean;
+}): any;

package/lib/hooks/use-blocklet-logo.js

@@ -0,0 +1,31 @@
+import { useCreation } from 'ahooks';
+import { useTheme } from '../Theme';
+import useMobile from './use-mobile';
+export default function useBlockletLogo({
+  key = 'sm',
+  meta = {},
+  theme: themeOverrides = {},
+  square
+} = {}) {
+  const isMobileDevice = useMobile({
+    key
+  });
+  const theme = useTheme();
+  const mode = useCreation(() => {
+    return themeOverrides?.palette?.mode || theme.palette.mode;
+  }, [theme, themeOverrides]);
+  const finalAppLogo = useCreation(() => {
+    const {
+      appLogo,
+      appLogoDark,
+      appLogoRect,
+      appLogoRectDark
+    } = Object.assign({}, window.blocklet ?? {}, meta);
+    const isDark = mode === 'dark';
+    const squareLogo = (isDark ? appLogoDark : appLogo) || appLogo;
+    // 深色模式尽可能优先使用深色图标
+    const rectLogo = (isDark ? appLogoRectDark || appLogoDark : appLogoRect) || appLogoRect;
+    return isMobileDevice || square ? squareLogo : rectLogo || squareLogo || '';
+  }, [mode, meta, isMobileDevice, square]);
+  return finalAppLogo;
+}

package/lib/hooks/use-mobile.d.ts

@@ -0,0 +1,4 @@
+import { Breakpoint } from '@mui/material';
+export default function useMobile({ key }?: {
+    key?: number | Breakpoint;
+}): boolean;

package/lib/hooks/use-mobile.js

@@ -0,0 +1,7 @@
+import { useTheme, useMediaQuery } from '@mui/material';
+export default function useMobile({
+  key = 'sm'
+} = {}) {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.down(key));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.14",
+  "version": "2.13.16",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -71,14 +71,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "b9f48199169b641a2d3277806501471a56dd496d",
+  "gitHead": "ccf3113f17409f98eb34b43a18f532effef9bd9b",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.14",
-    "@arcblock/nft-display": "^2.13.14",
-    "@arcblock/react-hooks": "^2.13.14",
+    "@arcblock/icons": "^2.13.16",
+    "@arcblock/nft-display": "^2.13.16",
+    "@arcblock/react-hooks": "^2.13.16",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.14",
+    "@blocklet/theme": "^2.13.16",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/Config/theme-mode-toggle.tsx

@@ -16,7 +16,7 @@ export default function ThemeModeToggle() {
 
   return (
     <IconButton onClick={toggleMode}>
-      {mode === 'light' ? <LightModeOutlinedIcon /> : <Brightness2OutlinedIcon />}
+      {mode === 'light' ? <Brightness2OutlinedIcon /> : <LightModeOutlinedIcon />}
     </IconButton>
   );
 }

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/LoadingMask/index.tsx

@@ -62,7 +62,7 @@ export default function LoadingMask({
             right: finialBorderWidth,
             top: finialBorderWidth,
             bottom: finialBorderWidth,
-            backgroundColor: 'white',
+            backgroundColor: 'background.default',
             borderRadius: `${finialRadius - finialBorderWidth}px`,
           },
           '&::before': {

package/src/NavMenu/style.ts

@@ -14,7 +14,6 @@ export const NavMenuStyled = styled('nav', {
   minWidth: '50px',
   // FIXME: @zhanghan 这个只是临时的解决方案，会导致 header align right 不能真正的右对齐，需要修改 header 才能真正解决这个问题
   flexGrow: 100,
-  backgroundColor: $bgColor,
   color: $textColor,
   fontSize: '16px',
   '&.navmenu--inline': {

package/src/SharedBridge/index.tsx

@@ -29,7 +29,14 @@ const SharedBridge = memo(function SharedBridge({
   const _iframeRef = useRef<HTMLIFrameElement>(null);
   const refId = useId();
   const dataId = `shared-bridge_${refId}`;
-  const currentState = useReactive({
+  const currentState = useReactive<{
+    hasInited?: boolean;
+    open: boolean;
+    hasStorageAccess: boolean;
+    origin: string;
+    host: string;
+  }>({
+    hasInited: undefined,
     open: false,
     hasStorageAccess: false,
     get origin() {
@@ -80,11 +87,25 @@ const SharedBridge = memo(function SharedBridge({
   const handleLoad = useMemoizedFn(() => {
     callIframe(targetIframeRef.current as HTMLIFrameElement, 'hasStorageAccess').then(({ value }) => {
       currentState.hasStorageAccess = value;
+      currentState.hasInited = true;
     });
+    setTimeout(() => {
+      if (currentState.hasInited === undefined) {
+        currentState.hasInited = false;
+      }
+    }, 1000);
     onLoad();
   });
 
-  return currentState.hasStorageAccess ? null : (
+  if (currentState.hasInited === false) {
+    return null;
+  }
+
+  if (currentState.hasStorageAccess) {
+    return null;
+  }
+
+  return (
     <>
       <DialogComponent
         popup
@@ -112,6 +133,7 @@ const SharedBridge = memo(function SharedBridge({
             width: '100%',
             height: '100%',
             cursor: 'pointer',
+            opacity: 0,
           },
           sx
         )}

package/src/hooks/use-blocklet-logo.tsx

@@ -0,0 +1,32 @@
+import { type Breakpoint } from '@mui/material';
+import { type ThemeOptions } from '@blocklet/theme';
+import { useCreation } from 'ahooks';
+import { useTheme } from '../Theme';
+import useMobile from './use-mobile';
+
+export default function useBlockletLogo({
+  key = 'sm',
+  meta = {},
+  theme: themeOverrides = {},
+  square,
+}: { key?: number | Breakpoint; meta?: any; theme?: ThemeOptions; square?: boolean } = {}) {
+  const isMobileDevice = useMobile({ key });
+  const theme = useTheme();
+
+  const mode = useCreation(() => {
+    return themeOverrides?.palette?.mode || theme.palette.mode;
+  }, [theme, themeOverrides]);
+
+  const finalAppLogo = useCreation(() => {
+    const { appLogo, appLogoDark, appLogoRect, appLogoRectDark } = Object.assign({}, window.blocklet ?? {}, meta);
+    const isDark = mode === 'dark';
+
+    const squareLogo = (isDark ? appLogoDark : appLogo) || appLogo;
+    // 深色模式尽可能优先使用深色图标
+    const rectLogo = (isDark ? appLogoRectDark || appLogoDark : appLogoRect) || appLogoRect;
+
+    return isMobileDevice || square ? squareLogo : rectLogo || squareLogo || '';
+  }, [mode, meta, isMobileDevice, square]);
+
+  return finalAppLogo;
+}

package/src/hooks/use-mobile.tsx

@@ -0,0 +1,6 @@
+import { Breakpoint, useTheme, useMediaQuery } from '@mui/material';
+
+export default function useMobile({ key = 'sm' }: { key?: number | Breakpoint } = {}) {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.down(key));
+}