@arcblock/ux 2.9.13 → 2.9.14

package/src/Address/did-address.jsx

@@ -92,20 +92,12 @@ const DidAddress = forwardRef(
     return (
       <Root as={component} size={size} {...rest} ref={ref}>
         {prepend}
+        <Box sx={{ display: 'none' }} ref={textRef}>
+          {children}
+        </Box>
         {/* 注意: 该元素必须渲染(可以隐藏), 以便 compact 模式下复制的文本是完整的 */}
         <Tooltip title={copyable ? '' : translations[locale].copied} placement="bottom" arrow open={copied}>
-          <Box
-            ref={textRef}
-            component="span"
-            className="did-address-text did-address-truncate"
-            sx={{
-              display: compact ? 'none' : 'inline',
-              cursor: copyable ? 'text' : 'pointer',
-            }}
-            onDoubleClick={copyable ? noop : onCopy}>
-            {children}
-          </Box>
-          {compact && (
+          {compact ? (
             <Box
               component="span"
               className="did-address-text"
@@ -120,6 +112,17 @@ const DidAddress = forwardRef(
                 {children}
               </CompactText>
             </Box>
+          ) : (
+            <Box
+              component="span"
+              className="did-address-text did-address-truncate"
+              sx={{
+                display: compact ? 'none' : 'inline',
+                cursor: copyable ? 'text' : 'pointer',
+              }}
+              onDoubleClick={copyable ? noop : onCopy}>
+              {children}
+            </Box>
           )}
         </Tooltip>
         {copyElement}

package/src/Colors/themes/temp.js

@@ -13,6 +13,15 @@ const colors = {
   primaryBase: 'rgba(19, 125, 250, 1)',
   primary100: 'rgba(19, 125, 250, 1)',
   gray6: 'rgba(17, 22, 24, 0.06)',
+  backgroundsBgSubtitle: 'rgba(249, 250, 251, 1)',
+  backgroundsBgComponent: 'rgba(241, 243, 245, 1)',
+  backgroundsBgField: 'rgba(249, 250, 251, 1)',
+  foregroundsFgBase: 'rgba(3, 7, 18, 1)',
+  foregroundsFgSubtile: 'rgba(75, 85, 99, 1)',
+  strokeBorderBase: 'rgba(229, 231, 235, 1)',
+  strokeBorderStrong: 'rgba(209, 213, 219, 1)',
+  buttonsButtonNeutral: 'rgba(255, 255, 255, 1)',
+  buttonsButtonNeutralHover: 'rgba(243, 244, 246, 1)',
 };
 
 export default colors;

package/src/Dialog/confirm.jsx

@@ -0,0 +1,94 @@
+import PropTypes from 'prop-types';
+
+import Button from '../Button';
+import Dialog from './dialog';
+
+/**
+  @typedef {Object} ConfirmProps
+  @property {boolean} open
+  @property {React.ReactNode} title
+  @property {React.ReactNode} children
+  @property {() => void | Promise<void>} onConfirm
+  @property {() => void | Promise<void>} onCancel
+  @property {boolean} [showCancelButton=true]
+  @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [confirmButton={text: 'Confirm'}]
+  @property {{text: string, props?: import('../Button/wrap').ButtonProps}} [cancelButton={text: 'Cancel'}]
+  @property {import('@mui/material').PaperProps} [PaperProps={}]
+*/
+
+// 注意排在 {...rest} 之后的 props 优先级更高
+/**
+ *
+ * @param {ConfirmProps} props
+ * @returns {import('react').ReactComponentElement}
+ */
+export default function Confirm({
+  title,
+  children,
+  onConfirm,
+  onCancel,
+  showCancelButton,
+  confirmButton,
+  cancelButton,
+  PaperProps,
+  ...rest
+}) {
+  // 去除 dialog 默认的 300 最小高度
+  PaperProps.style = Object.assign(
+    {
+      minHeight: 0,
+    },
+    PaperProps.style
+  );
+
+  return (
+    <Dialog
+      title={title}
+      PaperProps={PaperProps}
+      {...rest}
+      onClose={() => onCancel()}
+      actions={
+        <>
+          {showCancelButton && (
+            <Button onClick={() => onCancel()} color="primary" {...cancelButton.props}>
+              {cancelButton.text}
+            </Button>
+          )}
+          <Button onClick={() => onConfirm()} color="primary" autoFocus {...confirmButton.props}>
+            {confirmButton.text}
+          </Button>
+        </>
+      }>
+      {children}
+    </Dialog>
+  );
+}
+
+Confirm.propTypes = {
+  title: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  showCancelButton: PropTypes.bool,
+  // 可以传入 {text: ..., props: ...}
+  confirmButton: PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    props: PropTypes.object,
+  }),
+  cancelButton: PropTypes.shape({
+    text: PropTypes.string.isRequired,
+    props: PropTypes.object,
+  }),
+  PaperProps: PropTypes.object,
+};
+
+Confirm.defaultProps = {
+  showCancelButton: true,
+  confirmButton: {
+    text: 'Confirm',
+  },
+  cancelButton: {
+    text: 'Cancel',
+  },
+  PaperProps: {},
+};

package/src/Dialog/{dialog.js → dialog.jsx}

@@ -1,10 +1,13 @@
 import PropTypes from 'prop-types';
-import MuiDialog from '@mui/material/Dialog';
-import MuiDialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import IconButton from '@mui/material/IconButton';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import CloseIcon from '@mui/icons-material/Close';
+import {
+  Typography,
+  Dialog as MuiDialog,
+  DialogContent as MuiDialogContent,
+  DialogActions,
+  IconButton,
+  useMediaQuery,
+} from '@mui/material';
 
 import { styled, useTheme } from '../Theme';
 
@@ -25,7 +28,7 @@ import { styled, useTheme } from '../Theme';
   @property {boolean} [showCloseButton=true] - Whether or not to show the close button.
   @property {'left'|'center'|'right'} [actionsPosition='right'] - The position of the actions toolbar.
   @property {PaperStyle} [PaperProps] - Props to be passed down to the dialog paper.
-  @property {(event: React.SyntheticEvent, reason: string) => void} [onClose] - Callback function fired when the dialog is closed. 
+  @property {(event: React.SyntheticEvent, reason: string) => void} [onClose] - Callback function fired when the dialog is closed.
 */
 
 /**
@@ -74,7 +77,11 @@ function Dialog({ children, title, prepend, toolbar, actions, showCloseButton, a
           <div className="ux-dialog_left">
             {showCloseButton && isMobile && closeButton}
             {prepend && <div className="ux-dialog_prepend">{prepend}</div>}
-            {title && <h6 className="ux-dialog_title">{title}</h6>}
+            {title && (
+              <Typography variant="h6" className="ux-dialog_title">
+                {title}
+              </Typography>
+            )}
           </div>
 
           <div className="ux-dialog_right">

package/src/Dialog/index.js

@@ -1,4 +1,4 @@
 // eslint-disable-next-line no-restricted-exports
 export { default } from './dialog';
 export { default as Confirm } from './confirm';
-export { useConfirm } from './confirm';
+export { default as useConfirm } from './use-confirm';

package/src/Dialog/use-confirm.jsx

@@ -0,0 +1,114 @@
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { useMemoizedFn, useReactive } from 'ahooks';
+import noop from 'lodash/noop';
+
+import Confirm from './confirm';
+
+const ConfirmHolder = forwardRef((props, ref) => {
+  // HACK: 这里默认值不使用 null，来避免开发环境中的字段必填警告
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const state = useReactive({
+    show: false,
+    onConfirm: noop,
+    onCancel: noop,
+    loading: false,
+    confirmButtonText: 'Confirm',
+    cancelButtonText: 'Cancel',
+  });
+  const open = useMemoizedFn((params = {}) => {
+    setTitle(params.title);
+    setContent(params.content);
+    state.onConfirm = params.onConfirm || noop;
+    state.onCancel = params.onCancel || noop;
+    state.showCancelButton = params.showCancelButton ?? true;
+    if (params.confirmButtonText) state.confirmButtonText = params.confirmButtonText;
+    if (params.cancelButtonText) state.cancelButtonText = params.cancelButtonText;
+
+    state.loading = false;
+    state.show = true;
+  });
+  const reset = useMemoizedFn(() => {
+    setTitle('');
+    setContent('');
+    state.onConfirm = noop;
+    state.onCancel = noop;
+    state.confirmButtonText = 'Confirm';
+    state.cancelButtonText = 'Cancel';
+  });
+  const close = useMemoizedFn(() => {
+    state.show = false;
+    setTimeout(() => {
+      reset();
+    }, 300);
+  });
+  const onCancel = useMemoizedFn(() => {
+    close();
+    state?.onCancel();
+  }, []);
+  const onConfirm = useMemoizedFn(async () => {
+    state.loading = true;
+    try {
+      await state?.onConfirm(close);
+    } finally {
+      state.loading = false;
+    }
+  }, []);
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        open,
+        close,
+      };
+    },
+    [open, close]
+  );
+
+  return (
+    <Confirm
+      {...props}
+      open={state.show}
+      title={title}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+      confirmButton={{
+        text: state.confirmButtonText,
+        props: {
+          variant: 'contained',
+          color: 'primary',
+          loading: state.loading,
+        },
+      }}
+      showCancelButton={state.showCancelButton}
+      cancelButton={{
+        text: state.cancelButtonText,
+        props: {
+          variant: 'outlined',
+          color: 'primary',
+        },
+      }}>
+      {content}
+    </Confirm>
+  );
+});
+
+export default function useConfirm(props = {}) {
+  const confirmRef = useRef(null);
+
+  const open = useMemoizedFn((...args) => {
+    confirmRef.current?.open(...args);
+  });
+  const close = useMemoizedFn((...args) => {
+    confirmRef.current?.close(...args);
+  });
+  const confirmApi = {
+    open,
+    close,
+  };
+
+  return {
+    confirmHolder: <ConfirmHolder {...props} ref={confirmRef} />,
+    confirmApi,
+  };
+}

package/src/Locale/util.js

@@ -1,19 +1,26 @@
+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 translate = (translations, key, locale, fallbackLocale = 'en', data = {}) => {
-  if (!translations[locale] || !translations[locale][key]) {
+  const translation = translations[locale];
+  const translationValue = get(translation, key);
+  const fallbackValue = get(translations[fallbackLocale], key);
+
+  if (!translation || !translationValue) {
     console.warn(`Warning: no ${key} translation of ${locale}`);
-    if (fallbackLocale && translations[fallbackLocale]?.[key]) {
-      return replace(translations[fallbackLocale]?.[key], data);
+    if (fallbackLocale && fallbackValue) {
+      return replace(fallbackValue, data);
     }
     return key;
   }
+
   if (typeof translations[locale] === 'function' || translations[locale].then) {
-    return replace(translations[fallbackLocale][key], data);
+    return replace(fallbackValue, data);
   }
-  return replace(translations[locale][key], data);
+  return replace(translationValue, data);
 };
 
 export const t = translate;

package/src/Passport/index.jsx

@@ -0,0 +1,3 @@
+import PassportItem from './passport';
+
+export default PassportItem;

package/src/Passport/passport.jsx

@@ -0,0 +1,99 @@
+import PropTypes from 'prop-types';
+import upperFirst from 'lodash/upperFirst';
+import { Box } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import RevokeIcon from '@arcblock/icons/lib/RevokeIcon';
+
+export default function Passport({ passport, user, color, width, icon, children, createPassportSvg, ...rest }) {
+  const { t } = useLocaleContext();
+  return (
+    <Box
+      {...rest}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        ...rest?.sx,
+      }}>
+      <Box
+        className="passport-item__display"
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: createPassportSvg({
+            title: passport.title || passport.name,
+            issuer: passport.issuer && passport.issuer.name,
+            issuerDid: passport.issuer && passport.issuer.id,
+            ownerName: user.fullName,
+            ownerDid: user.did,
+            ownerAvatarUrl: user.avatar,
+            revoked: passport.revoked,
+            preferredColor: color,
+            width,
+          }),
+        }}
+      />
+      <Box
+        className="passport-item__body"
+        sx={{
+          p: 0,
+          ml: 3,
+          mt: 0,
+        }}>
+        <Box
+          className="passport-item__title"
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            fontWeight: 400,
+            fontSize: '16px',
+            lineHeight: 1.1875,
+            color: '#222222',
+          }}>
+          {upperFirst(passport.title)}
+          <Box
+            className="passport-item__status-icon"
+            sx={{
+              svg: {
+                fill: '#bfbfbf',
+                height: '1.2em',
+                marginLeft: '0.4em',
+              },
+            }}>
+            {icon}
+            {passport.revoked && <RevokeIcon />}
+          </Box>
+        </Box>
+        {passport.expirationDate && (
+          <Box
+            className="passport-item__title"
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              fontWeight: 400,
+              fontSize: '16px',
+              lineHeight: 1.1875,
+              color: '#222222',
+            }}>
+            {t('team.passport.validUntil', { date: passport.expirationDate })}
+          </Box>
+        )}
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
+Passport.propTypes = {
+  passport: PropTypes.any.isRequired,
+  user: PropTypes.any.isRequired,
+  color: PropTypes.string.isRequired,
+  createPassportSvg: PropTypes.func.isRequired,
+  icon: PropTypes.any,
+  children: PropTypes.any,
+  width: PropTypes.number,
+};
+
+Passport.defaultProps = {
+  icon: null,
+  children: null,
+  width: 150,
+};

package/src/SessionUser/components/logged-in.jsx

@@ -189,6 +189,6 @@ function SessionMenuItem({ icon, title, ...rest }) {
 }
 
 SessionMenuItem.propTypes = {
-  icon: PropTypes.string.isRequired,
+  icon: PropTypes.any.isRequired,
   title: PropTypes.string.isRequired,
 };

package/src/SessionUser/components/user-info.jsx

@@ -98,7 +98,7 @@ export default function UserInfo({
             />
           </Box>
 
-          <Typography variant="h6" sx={{ wordBreak: 'break-all' }}>
+          <Typography variant="h6" sx={{ wordBreak: 'break-word' }}>
             {session.user.fullName}
           </Typography>
         </Box>

package/src/SessionUser/index.jsx

@@ -22,8 +22,8 @@ SessionUser.propTypes = {
     user: PropTypes.shape({
       did: PropTypes.string.isRequired,
       fullName: PropTypes.string.isRequired,
-      email: PropTypes.string.isRequired,
       avatar: PropTypes.string.isRequired,
+      email: PropTypes.string,
     }),
   }).isRequired,
   onBindWallet: PropTypes.func,

package/src/Tabs/index.jsx

@@ -0,0 +1,124 @@
+import PropTypes from 'prop-types';
+import { Tabs as MuiTabs, Tab as MuiTab } from '@mui/material';
+
+import { temp as colors } from '../Colors';
+import { styled } from '../Theme';
+
+const PREFIX = 'index';
+
+const classes = {
+  tabs: `${PREFIX}-tabs`,
+  tab: `${PREFIX}-tab`,
+};
+
+const StyledMuiTabs = styled(MuiTabs)(({ theme }) => ({
+  [`& .${classes.tabs}`]: {},
+
+  [`& .${classes.tab}`]: {
+    fontSize: '0.875rem',
+    [theme.breakpoints.up('md')]: {
+      fontSize: '1rem',
+    },
+  },
+}));
+
+function CardTabs({ tabs, current, onChange, ...rest }) {
+  return (
+    <MuiTabs
+      scrollButtons="auto"
+      value={current}
+      onChange={(_, newValue) => onChange(newValue)}
+      {...rest}
+      variant="scrollable"
+      sx={{
+        minHeight: 'auto',
+        '.MuiTabs-scrollButtons.Mui-disabled': {
+          opacity: 0.3,
+          cursor: 'not-allowed',
+          pointerEvents: 'auto',
+        },
+        '.MuiTabs-scroller': {
+          borderRadius: '100vw',
+        },
+        '.MuiTabs-flexContainer': {
+          borderRadius: '100vw',
+          backgroundColor: colors.backgroundsBgComponent,
+          padding: 0.5,
+          display: 'inline-flex',
+          columnGap: 0.25,
+        },
+        '.MuiTab-root': {
+          borderRadius: '100vw',
+          border: '1px solid transparent',
+          minHeight: 'auto',
+          lineHeight: 1,
+          py: 1,
+          color: colors.foregroundsFgSubtile,
+          fontSize: '13px',
+          fontWeight: 'normal',
+          textTransform: 'capitalize',
+          transition: 'background-color 0.2s ease',
+          '&.Mui-selected, &:hover': {
+            backgroundColor: 'white',
+            borderColor: colors.lineBorderBase,
+            color: colors.foregroundsFgBase,
+          },
+        },
+        '.MuiTabs-indicator': {
+          display: 'none',
+        },
+        ...rest.sx,
+      }}>
+      {tabs.map((x) => (
+        <MuiTab className={classes.tab} key={x.value} value={x.value} label={x.label} icon={x.icon || null} />
+      ))}
+    </MuiTabs>
+  );
+}
+
+CardTabs.propTypes = {
+  tabs: PropTypes.array.isRequired,
+  current: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+/**
+ * @typedef {import('@mui/material').TabsProps & {
+ *  tabs: string[];
+ *  onChange: (value) => {};
+ *  variant: 'card' | 'fullWidth' | 'scrollable' | 'standard'
+ * }} TabsProps
+ */
+
+/**
+ * @description
+ * @param { TabsProps} props
+ * @return {import('react').ReactNode}
+ */
+
+export default function Tabs({ tabs, current, onChange, ...rest }) {
+  if (rest.variant === 'card') {
+    return <CardTabs tabs={tabs} current={current} onChange={onChange} />;
+  }
+
+  return (
+    <StyledMuiTabs
+      scrollButtons="auto"
+      variant="scrollable"
+      value={current}
+      onChange={(_, newValue) => onChange(newValue)}
+      indicatorColor="primary"
+      {...rest}
+      className={[classes.tabs, rest.className || ''].join(' ')}>
+      {tabs.map((x) => (
+        <MuiTab className={classes.tab} key={x.value} value={x.value} label={x.label} icon={x.icon || null} />
+      ))}
+    </StyledMuiTabs>
+  );
+}
+
+Tabs.propTypes = {
+  tabs: PropTypes.array.isRequired,
+  current: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};

package/src/Util/passport.js

@@ -0,0 +1,75 @@
+import { getNftBGColor, DEFAULT_COLORS, getNftBGColorFromDid, getSvg } from '@arcblock/nft-display';
+
+export const getPassportColor = (preferredColor, did) => {
+  let color;
+  if (preferredColor === 'default') {
+    color = DEFAULT_COLORS['app-passport'];
+  } else if (preferredColor === 'auto') {
+    color = getNftBGColorFromDid(did);
+  } else {
+    color = getNftBGColor(preferredColor);
+  }
+
+  return color;
+};
+
+export const getTextColor = (background) => {
+  const r = parseInt(background.slice(1, 3), 16);
+  const g = parseInt(background.slice(3, 5), 16);
+  const b = parseInt(background.slice(5, 7), 16);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5 ? '#111' : '#EEE';
+};
+
+export const createPassportSvg = ({
+  issuer = '',
+  title = '',
+  issuerDid = '',
+  issuerAvatarUrl = '',
+  ownerDid = '',
+  ownerName = '',
+  ownerAvatarUrl = '',
+  preferredColor = 'default',
+  revoked = false,
+  isDataUrl = false,
+  width = '100%',
+  height = '100%',
+}) => {
+  const color = getPassportColor(preferredColor, issuerDid);
+
+  const svgXML = getSvg({
+    width,
+    height,
+
+    tag: revoked ? 'revoked' : '',
+    tagVariant: revoked ? 'error' : 'info',
+
+    color,
+
+    did: ownerDid,
+    variant: 'app-passport' || ownerName,
+    verifiable: true,
+
+    issuer: {
+      name: issuer,
+      icon: issuerAvatarUrl,
+    },
+
+    header: {
+      name: title,
+      icon: ownerAvatarUrl,
+    },
+
+    // FIXME: @wangshijun this should be dynamic
+    extra: {
+      key: 'Exp',
+      value: '2123-01-01',
+    },
+  });
+
+  if (isDataUrl) {
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svgXML)}`;
+  }
+
+  return svgXML;
+};