@arcblock/ux 2.13.13 → 2.13.15

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/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/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/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/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/SessionUser/components/un-login.js

@@ -14,6 +14,7 @@ import { translations } from '../libs/translation';
 import Typography from '../../Typography';
 import QuickLoginItem from './quick-login-item';
 import { getFederatedEnabled, getMaster } from '../../Util/federated';
+import LoginButton from '../../LoginButton';
 export default function UnLogin({
   session,
   onLogin = noop,
@@ -40,16 +41,20 @@ export default function UnLogin({
   const onTogglePopper = useMemoizedFn((value = !currentState.open) => {
     currentState.open = value;
   });
-  const _onLogin = useMemoizedFn(() => {
+  const _onLogin = useMemoizedFn(({
+    openMode
+  } = {}) => {
     if (isFirstLoading) {
       return;
     }
-    session.login(onLogin);
+    session.login(onLogin, {
+      openMode
+    });
   });
   const blocklet = window?.blocklet;
   const federatedEnabled = getFederatedEnabled(blocklet);
-  const master = getMaster(blocklet);
-  const loginApp = federatedEnabled && master ? master : blocklet;
+  const masterSite = getMaster(blocklet);
+  const loginApp = federatedEnabled && masterSite ? masterSite : blocklet;
   const loginAppName = loginApp?.appName || 'DID Connect';
   const loginAppLogo = joinURL(loginApp?.appUrl || '/', loginApp?.appLogo || '/.well-known/service/blocklet/logo?imageFilter=convert&f=png&h=80');
   useEffect(() => {
@@ -83,36 +88,42 @@ export default function UnLogin({
     }
   });
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Box, {
-      children: /*#__PURE__*/_jsx(IconButton, {
-        ref: userAnchorRef,
-        onClick: _onLogin,
-        "data-cy": "sessionManager-login",
-        className: "arc-session-user-unlogin",
-        size: "medium",
-        "aria-label": "Login button",
-        children: isFirstLoading ? /*#__PURE__*/_jsx(Box, {
-          width: size,
-          height: size,
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          children: /*#__PURE__*/_jsx(CircularProgress, {
+    children: [/*#__PURE__*/_jsx(LoginButton, {
+      locale: locale,
+      onClick: _onLogin,
+      render: ({
+        onClick
+      }) => {
+        return /*#__PURE__*/_jsx(IconButton, {
+          ref: userAnchorRef,
+          "data-cy": "sessionManager-login",
+          className: "arc-session-user-unlogin",
+          size: "medium",
+          onClick: onClick,
+          "aria-label": "Login button",
+          children: isFirstLoading ? /*#__PURE__*/_jsx(Box, {
+            width: size,
+            height: size,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            children: /*#__PURE__*/_jsx(CircularProgress, {
+              style: {
+                width: size - 4,
+                height: size - 4,
+                color: dark ? '#fff' : ''
+              }
+            })
+          }) : /*#__PURE__*/_jsx(Icon, {
+            icon: UserIcon,
+            fontSize: size,
+            color: dark ? '#fff' : 'inherit',
             style: {
-              width: size - 4,
-              height: size - 4,
-              color: dark ? '#fff' : ''
+              transform: 'scale(1.25)'
             }
           })
-        }) : /*#__PURE__*/_jsx(Icon, {
-          icon: UserIcon,
-          fontSize: size,
-          color: dark ? '#fff' : 'inherit',
-          style: {
-            transform: 'scale(1.25)'
-          }
-        })
-      })
+        });
+      }
     }), /*#__PURE__*/_jsx(Popper, {
       open: currentState.open,
       anchorEl: userAnchorRef.current,

package/lib/SharedBridge/index.d.ts

@@ -0,0 +1,16 @@
+import type { SxProps } from '@mui/material';
+import React from 'react';
+import { Locale } from '../type';
+declare const SharedBridge: React.NamedExoticComponent<{
+    src: string;
+    onClick: (data: {
+        action: string;
+        value: boolean;
+        visitorId?: string;
+    }) => void;
+    onLoad: () => void;
+    sx?: SxProps;
+    iframeRef?: React.RefObject<HTMLIFrameElement>;
+    locale?: Locale;
+}>;
+export default SharedBridge;

package/lib/SharedBridge/index.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import React, { memo, useEffect, useId, useRef } from 'react';
+import { withQuery } from 'ufo';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import { mergeSx } from '../Util/style';
+import { callIframe, getCallbackAction } from '../Util/iframe';
+import NeedStorageAccessApiDialog from './need-storage-access-api-dialog';
+import { withContainer, withUxTheme } from '../DIDConnect';
+const SharedBridge = /*#__PURE__*/memo(function SharedBridge({
+  src,
+  onClick,
+  onLoad,
+  sx,
+  iframeRef,
+  locale = 'en',
+  ...rest
+}) {
+  const _iframeRef = useRef(null);
+  const refId = useId();
+  const dataId = `shared-bridge_${refId}`;
+  const currentState = useReactive({
+    open: false,
+    hasStorageAccess: 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 targetIframeRef = iframeRef ?? _iframeRef;
+  useEffect(() => {
+    async function handleMessage(event) {
+      const {
+        data
+      } = event;
+      if (data.action === getCallbackAction(dataId, 'requestStorageAccess')) {
+        currentState.open = false;
+        if (!data.value) {
+          onClick(data);
+          return;
+        }
+        const {
+          value: visitorId
+        } = await callIframe(targetIframeRef.current, 'getVisitorId');
+        onClick({
+          ...data,
+          visitorId
+        });
+      } else if (data.action === getCallbackAction(dataId, 'preRequestStorageAccess')) {
+        currentState.open = true;
+      }
+    }
+    window.addEventListener('message', handleMessage);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onClick, dataId, targetIframeRef?.current]);
+  const DialogComponent = withUxTheme(withContainer(NeedStorageAccessApiDialog));
+  const handleLoad = useMemoizedFn(() => {
+    callIframe(targetIframeRef.current, 'hasStorageAccess').then(({
+      value
+    }) => {
+      currentState.hasStorageAccess = value;
+    });
+    onLoad();
+  });
+  return currentState.hasStorageAccess ? null : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(DialogComponent, {
+      popup: true,
+      locale: locale,
+      blocklet: window.blocklet,
+      open: currentState.open,
+      origin: currentState.origin,
+      host: currentState.host,
+      onClose: () => {}
+    }), /*#__PURE__*/_jsx(Box, {
+      ...rest,
+      component: "iframe",
+      ref: targetIframeRef,
+      onLoad: handleLoad,
+      title: "shared-bridge",
+      "data-id": dataId,
+      src: withQuery(src, {
+        id: dataId
+      }),
+      sx: mergeSx({
+        border: 0,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        cursor: 'pointer'
+      }, sx)
+    })]
+  });
+});
+export default SharedBridge;

package/lib/SharedBridge/need-storage-access-api-dialog.d.ts

@@ -0,0 +1,7 @@
+import { Locale } from '../type';
+export default function NeedStorageAccessApiDialog({ locale, origin, host, setColor, }: {
+    locale?: Locale;
+    origin: string;
+    host: string;
+    setColor: (color: string) => void;
+}): import("react/jsx-runtime").JSX.Element;