@arcblock/ux 2.13.12 → 2.13.14

package/lib/Datatable/index.js

@@ -503,99 +503,133 @@ const alignCss = css`
 `;
 const TableContainer = styled('div', {
   shouldForwardProp: prop => prop !== 'verticalKeyWidth'
-})`
-  &.datatable-hide-header {
-    thead.MuiTableHead-root {
-      display: none;
+})(({
+  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' : '')};
+                }
+              }
+            }
+          }
+        }
+      }
+    ` : '';
+  return css`
+    &.datatable-hide-header {
+      thead.MuiTableHead-root {
+        display: none;
+      }
     }
-  }
 
-  td {
-    &.vertical-align-top {
-      align-items: flex-start;
-    }
-    &.vertical-align-center {
-      align-items: center;
-    }
-    &.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' : '')};
-                  }
-                }
-              }
-            }
-          }
-        }
-      `;
-  }
-  return '';
-}}
+    ${verticalKeyWidthStyle}
 
-  &.datatable-stripped {
-    .MuiTableBody-root {
-      tr:nth-of-type(odd) {
-        background-color: ${props => props.theme.palette.action.hover};
+    .MuiTableCell-head {
+      color: ${primaryTextColor};
+      background-color: ${defaultBgColor};
+    }
+
+    .MuiTableCell-root {
+      color: ${primaryTextColor};
+    }
+
+    .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/lib/Dialog/confirm.d.ts

@@ -9,6 +9,7 @@
  *   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}
@@ -20,7 +21,7 @@
  * @param {ConfirmProps} props
  * @returns {import('react').ReactComponentElement}
  */
-declare function Confirm({ title, children, onConfirm, onCancel, showCloseButton, showCancelButton, fullScreen, confirmButton, cancelButton, PaperProps, ...rest }: ConfirmProps): import("react").ReactComponentElement<any, Pick<any, string | number | symbol>>;
+declare function Confirm({ title, children, onConfirm, onCancel, showCloseButton, showCancelButton, showConfirmButton, fullScreen, confirmButton, cancelButton, PaperProps, ...rest }: ConfirmProps): import("react").ReactComponentElement<any, Pick<any, string | number | symbol>>;
 declare namespace Confirm {
     namespace propTypes {
         let title: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
@@ -29,6 +30,7 @@ declare namespace Confirm {
         let onCancel: PropTypes.Validator<(...args: any[]) => any>;
         let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         let showCancelButton: PropTypes.Requireable<boolean>;
+        let showConfirmButton: PropTypes.Requireable<boolean>;
         let showCloseButton: PropTypes.Requireable<boolean>;
         let fullScreen: PropTypes.Requireable<boolean>;
         let confirmButton: PropTypes.Requireable<PropTypes.InferProps<{
@@ -44,6 +46,8 @@ declare namespace Confirm {
     namespace defaultProps {
         let showCancelButton_1: boolean;
         export { showCancelButton_1 as showCancelButton };
+        let showConfirmButton_1: boolean;
+        export { showConfirmButton_1 as showConfirmButton };
         let showCloseButton_1: boolean;
         export { showCloseButton_1 as showCloseButton };
         let fullScreen_1: boolean;
@@ -72,6 +76,7 @@ export type ConfirmProps = {
     children?: React.ReactNode;
     showCancelButton?: true | false;
     showCloseButton?: true | false;
+    showConfirmButton?: true | false;
     fullScreen?: false | true;
     confirmButton?: {
         text: React.ReactNode;

package/lib/Dialog/confirm.js

@@ -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,
@@ -74,7 +76,7 @@ export default function Confirm({
         }
       }
     },
-    actions: /*#__PURE__*/_jsxs(_Fragment, {
+    actions: showCancelButton || showConfirmButton ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [showCancelButton && /*#__PURE__*/_jsx(Button, {
         onClick: e => {
           e.stopPropagation();
@@ -83,7 +85,7 @@ export default function Confirm({
         color: "primary",
         ...cancelButton.props,
         children: cancelButton.text
-      }), /*#__PURE__*/_jsx(Button, {
+      }), showConfirmButton && /*#__PURE__*/_jsx(Button, {
         onClick: e => {
           e.stopPropagation();
           onConfirm(e);
@@ -93,7 +95,7 @@ export default function Confirm({
         ...confirmButton.props,
         children: confirmButton.text
       })]
-    }),
+    }) : null,
     children: children
   });
 }
@@ -104,6 +106,7 @@ Confirm.propTypes = {
   onCancel: PropTypes.func.isRequired,
   children: PropTypes.node,
   showCancelButton: PropTypes.bool,
+  showConfirmButton: PropTypes.bool,
   showCloseButton: PropTypes.bool,
   fullScreen: PropTypes.bool,
   // 可以传入 {text: ..., props: ...}
@@ -119,6 +122,7 @@ Confirm.propTypes = {
 };
 Confirm.defaultProps = {
   showCancelButton: true,
+  showConfirmButton: true,
   showCloseButton: true,
   fullScreen: false,
   confirmButton: {

package/lib/Dialog/use-confirm.js

@@ -18,6 +18,7 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
     loading: false,
     showCancelButton: true,
     showCloseButton: true,
+    showConfirmButton: true,
     confirmButtonText: 'Confirm',
     confirmButtonProps: {},
     cancelButtonText: 'Cancel',
@@ -42,6 +43,7 @@ const ConfirmHolder = /*#__PURE__*/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;
@@ -60,6 +62,9 @@ const ConfirmHolder = /*#__PURE__*/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;
@@ -125,6 +130,7 @@ const ConfirmHolder = /*#__PURE__*/forwardRef((props, ref) => {
     },
     showCloseButton: state.showCloseButton,
     showCancelButton: state.showCancelButton,
+    showConfirmButton: state.showConfirmButton,
     cancelButton: {
       text: state.cancelButtonText,
       props: {

package/lib/Footer/index.js

@@ -100,7 +100,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%;
 
@@ -115,10 +115,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;

package/lib/Header/header.js

@@ -156,7 +156,9 @@ const Root = styled(Box)`
     }
     .header-brand-desc {
       margin-top: 4px;
-      color: #9397a1;
+      color: ${({
+  theme
+}) => theme.palette.text.hint};
     }
   }
   .header-brand-addon {

package/lib/Header/responsive-header.js

@@ -99,7 +99,9 @@ function ResponsiveHeader({
         style: {
           top: 64,
           bottom: 0,
-          boxShadow: 'none'
+          boxShadow: 'none',
+          backgroundImage: 'none',
+          backgroundColor: theme.palette.background.paper
         }
       },
       children: /*#__PURE__*/_jsx(MenuPanel, {

package/lib/Layout/dashboard/index.js

@@ -63,6 +63,7 @@ function Dashboard({
   fullWidth = false,
   dense = 'auto',
   footerProps = {},
+  sx,
   children,
   ...rest
 }) {
@@ -100,6 +101,7 @@ function Dashboard({
     }
   }, []);
   return /*#__PURE__*/_jsxs(Wrapper, {
+    sx: sx,
     ...rest,
     className: classes,
     sidebarWidth: sidebarWidth,
@@ -177,6 +179,7 @@ function Dashboard({
           }),
           children: children
         }), footerVisible && /*#__PURE__*/_jsx(Footer, {
+          dark: theme.palette.mode === 'dark',
           ...footerProps
         })]
       })]
@@ -190,6 +193,9 @@ const Wrapper = styled('div', {
     display: flex;
     flex-direction: column;
     height: 100vh;
+    background-color: ${({
+  theme
+}) => theme.palette.background.default};
   }
   .dashboard-body {
     overflow: hidden;
@@ -219,11 +225,17 @@ const Wrapper = styled('div', {
   }
   &.dashboard-dense {
     .dashboard-header {
-      border-bottom: 1px solid #eee;
+      border-bottom: 1px solid;
+      border-color: ${({
+  theme
+}) => theme.palette.divider};
     }
     .dashboard-sidebar {
       width: 256px;
-      border-right: 1px solid #eee;
+      border-right: 1px solid;
+      border-color: ${({
+  theme
+}) => theme.palette.divider};
     }
   }
   ${props => props.theme.breakpoints.up('md')} {

package/lib/Layout/dashboard/sidebar.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Typography from '@mui/material/Typography';
-import { teal } from '@mui/material/colors';
 import clsx from 'clsx';
 import { styled } from '../../Theme';
 import { NavLink } from './external-link';
@@ -91,7 +90,7 @@ const Root = styled('div')`
     &.layout-sidebar-link--active {
       color: ${props => props.theme.palette.primary.main};
       background: ${gradient};
-      border-left-color: ${teal.A700};
+      border-left-color: ${props => props.theme.palette.primary.main};
     }
   }
   .layout-sidebar-icon {

package/lib/LoadingMask/index.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-import { temp as colors } from '../Colors';
 export default function LoadingMask({
   size = 64,
   padding,
@@ -38,7 +37,7 @@ export default function LoadingMask({
         height: finialSize,
         overflow: 'hidden',
         borderRadius: `${finialRadius}px`,
-        backgroundColor: colors.strokeBorderBase,
+        backgroundColor: 'grey.200',
         '&::before,&::after': {
           content: '""',
           position: 'absolute',
@@ -57,7 +56,9 @@ export default function LoadingMask({
           borderRadius: `${finialRadius - finialBorderWidth}px`
         },
         '&::before': {
-          background: `conic-gradient(from 45deg, ${colors.foregroundsFgInteractiveTransparent} 0%, ${colors.foregroundsFgInteractiveTransparent} 50%, ${colors.foregroundsFgInteractive} 90%, ${colors.foregroundsFgInteractive} 100%)`,
+          background: ({
+            palette
+          }) => `conic-gradient(from 45deg, transparent 0%, transparent 50%, ${palette.secondary.main} 90%, ${palette.secondary.main} 100%)`,
           transform: 'scale(100)',
           animation: `rotate ${finialDuration}s linear infinite`,
           '@keyframes rotate': {

package/lib/Locale/selector.js

@@ -98,9 +98,9 @@ export default function LocaleSelector(props) {
       children: /*#__PURE__*/_jsx(Box, {
         className: "locales",
         sx: {
-          backgroundColor: 'background.default',
+          backgroundColor: 'background.paper',
           boxShadow: 2,
-          borderRadius: 2
+          borderRadius: 1
         },
         children: /*#__PURE__*/_jsx(ClickAwayListener, {
           onClickAway: onClose,
@@ -130,7 +130,7 @@ export default function LocaleSelector(props) {
                   icon: CheckIcon,
                   className: code === locale ? 'check-icon check-icon-visible' : 'check-icon',
                   sx: {
-                    marginRight: 0.5,
+                    marginRight: 1,
                     visibility: code === locale ? 'visible' : 'hidden'
                   }
                 }), name]

package/lib/Locale/util.d.ts

@@ -1,4 +1,4 @@
 import type { Locale, Translations } from '../type';
-export declare const replace: (template: string, data: Record<string, any>) => string;
-export declare const translate: (translations: Translations, key: string, locale: Locale, fallbackLocale?: string, data?: {}) => string;
-export declare const t: (translations: Translations, key: string, locale: Locale, fallbackLocale?: string, data?: {}) => string;
+export declare const replace: (template: string | Function, data: Record<string, any>) => any;
+export declare const translate: (translations: Translations, key: string, locale: Locale, fallbackLocale?: string, data?: {}) => any;
+export declare const t: (translations: Translations, key: string, locale: Locale, fallbackLocale?: string, data?: {}) => any;

package/lib/Locale/util.js

@@ -1,6 +1,11 @@
 import get from 'lodash/get';
 /* eslint-disable no-prototype-builtins */
-export const replace = (template, data) => template.replace(/{(\w*)}/g, (m, key) => data.hasOwnProperty(key) ? data[key] : '');
+export const replace = (template, data) => {
+  if (typeof template === 'function') {
+    return template(data);
+  }
+  return template.replace(/{(\w*)}/g, (m, key) => data.hasOwnProperty(key) ? data[key] : '');
+};
 export const translate = (translations, key, locale, fallbackLocale = 'en', data = {}) => {
   const translation = translations[locale];
   const translationValue = get(translation, key);

package/lib/LoginButton/index.d.ts

@@ -0,0 +1,12 @@
+import { Locale } from '../type';
+type LoginButtonProps = {
+    onClick: (options?: {
+        openMode?: 'popup' | 'window';
+    }) => void;
+    render: (options: {
+        onClick: () => void;
+    }) => React.ReactNode;
+    locale?: Locale;
+};
+export default function LoginButton({ onClick, render, locale }: LoginButtonProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/lib/LoginButton/index.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { joinURL } from 'ufo';
+import { useRef, useState } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import { useBrowser } from '@arcblock/react-hooks';
+import SharedBridge from '../SharedBridge';
+import { setVisitorId } from '../Util';
+import { getFederatedEnabled, getMaster } from '../Util/federated';
+import { callIframe } from '../Util/iframe';
+export default function LoginButton({
+  onClick,
+  render,
+  locale
+}) {
+  const blocklet = window?.blocklet;
+  const federatedEnabled = getFederatedEnabled(blocklet);
+  const masterSite = getMaster(blocklet);
+  const sharedBridgeRef = useRef(null);
+  const [hasStorageAccess, setHasStorageAccess] = useState(false);
+  const browser = useBrowser();
+  const handleClick = useMemoizedFn(() => {
+    if (hasStorageAccess) {
+      onClick({
+        openMode: 'popup'
+      });
+    } else {
+      onClick();
+    }
+  });
+  const handleLoad = useMemoizedFn(async () => {
+    const {
+      value: visitorId
+    } = await callIframe(sharedBridgeRef.current, 'getVisitorId');
+    if (visitorId) {
+      setHasStorageAccess(true);
+      setVisitorId(visitorId);
+    }
+  });
+  const handleClickBridge = useMemoizedFn(({
+    value,
+    visitorId
+  }) => {
+    if (visitorId) {
+      setVisitorId(visitorId);
+    }
+    if (value) {
+      onClick({
+        openMode: 'popup'
+      });
+    } else {
+      onClick();
+    }
+  });
+  if (browser.arcSphere || browser.wallet) {
+    return render({
+      onClick
+    });
+  }
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      position: 'relative'
+    },
+    children: [render({
+      onClick: handleClick
+    }), masterSite?.appUrl && federatedEnabled ? /*#__PURE__*/_jsx(SharedBridge, {
+      locale: locale,
+      iframeRef: sharedBridgeRef,
+      onLoad: handleLoad,
+      onClick: handleClickBridge,
+      src: joinURL(masterSite.appUrl, '/.well-known/service/share/shared-bridge.html')
+    }) : null]
+  });
+}

package/lib/NavMenu/nav-menu.js

@@ -8,6 +8,7 @@ import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from
 import { NavMenuProvider, useNavMenuContext } from './nav-menu-context';
 import { NavMenuRoot, NavMenuItem, NavMenuSub, NavMenuSubList, NavMenuStyled } from './style';
 import { SubContainer } from './sub-container';
+import { useTheme } from '../Theme';
 
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
 function filterItems(children) {
@@ -34,12 +35,16 @@ function NavMenu({
   mode = 'horizontal',
   children: _childs = null,
   activeId = null,
-  textColor = '#9397a1',
-  activeTextColor = '#25292f',
-  bgColor = '#fff',
+  textColor,
+  activeTextColor,
+  bgColor,
   onSelected,
   ...rest
 }) {
+  const theme = useTheme();
+  const $textColor = useCreation(() => theme.palette.grey[400], [theme]);
+  const $activeTextColor = useCreation(() => theme.palette.text.primary, [theme]);
+  const $bgColor = useCreation(() => theme.palette.background.default, [theme]);
   // eslint-disable-next-line no-param-reassign
   const children = filterItems(_childs);
   if (!items?.length && !children?.length) {
@@ -64,14 +69,14 @@ function NavMenu({
     return {
       ...currentState,
       mode,
-      textColor,
-      activeTextColor,
-      bgColor,
+      textColor: $textColor,
+      activeTextColor: $activeTextColor,
+      bgColor: $bgColor,
       activate,
       open,
       close
     };
-  }, [currentState.activeId, currentState.hiddenItemCount, currentState.openedIds, mode, textColor, activeTextColor, bgColor, activate, open, close]);
+  }, [currentState.activeId, currentState.hiddenItemCount, currentState.openedIds, mode, $textColor, $activeTextColor, $bgColor, activate, open, close]);
   const navMenuRef = useRef(null);
   const itemRefs = useRef([]);
   const moreIconRef = useRef(null);
@@ -193,8 +198,8 @@ function NavMenu({
     children: /*#__PURE__*/_jsx(NavMenuStyled, {
       ...rest,
       className: classes,
-      $textColor: textColor,
-      $bgColor: bgColor,
+      $textColor: $textColor,
+      $bgColor: $bgColor,
       children: /*#__PURE__*/_jsxs(NavMenuRoot, {
         className: clsx('navmenu-root', `navmenu-root--${mode}`),
         ref: navMenuRef,