@arcblock/ux 2.9.13 → 2.9.15

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/Theme/theme.js

@@ -1,7 +1,17 @@
 // https://app.zeplin.io/styleguide/5d1436f1e97c2156f49c0725/colors
 import { createTheme as _createTheme, responsiveFontSizes } from '@mui/material/styles';
-import '@fontsource/lato/400.css';
-import '@fontsource/lato/700.css';
+// 为了避免加载全量的字体导致打包后体积太大，目前只选择了 latin 语系的字体
+import '@fontsource/inter/latin-400.css';
+import '@fontsource/inter/latin-500.css';
+import '@fontsource/inter/latin-600.css';
+import '@fontsource/inter/latin-700.css';
+import '@fontsource/inter/latin-900.css';
+import '@fontsource/inter/latin-ext-400.css';
+import '@fontsource/inter/latin-ext-500.css';
+import '@fontsource/inter/latin-ext-600.css';
+import '@fontsource/inter/latin-ext-700.css';
+import '@fontsource/inter/latin-ext-900.css';
+
 import colors from '../Colors';
 
 const muiDarkTheme = _createTheme({ palette: { mode: 'dark' } });
@@ -52,7 +62,7 @@ export const create = ({ mode = 'light', pageWidth = 'md', palette, typography,
           gray: mode === 'light' ? colors.grey[500] : colors.grey[300],
         },
         fontFamily: [
-          'Lato',
+          'Inter',
           'Avenir',
           '-apple-system',
           'BlinkMacSystemFont',

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;
+};

package/src/Dialog/confirm.js

@@ -1,201 +0,0 @@
-import PropTypes from 'prop-types';
-import { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useMemoizedFn, useReactive } from 'ahooks';
-import noop from 'lodash/noop';
-
-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: {},
-};
-
-const ConfirmHolder = forwardRef((props, ref) => {
-  const state = useReactive({
-    show: false,
-    title: '',
-    content: '',
-    onConfirm: noop,
-    onCancel: noop,
-    loading: false,
-    confirmButtonText: 'Confirm',
-    cancelButtonText: 'Cancel',
-  });
-  const open = useMemoizedFn((params = {}) => {
-    state.show = true;
-    state.title = params.title;
-    state.content = params.content;
-    state.onConfirm = params.onConfirm || noop;
-    state.onCancel = params.onCancel || noop;
-    if (params.confirmButtonText) state.confirmButtonText = params.confirmButtonText;
-    if (params.cancelButtonText) state.cancelButtonText = params.cancelButtonText;
-    state.loading = false;
-  });
-  const reset = useMemoizedFn(() => {
-    state.title = '';
-    state.content = '';
-    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
-      open={state.show}
-      title={state.title}
-      onConfirm={onConfirm}
-      onCancel={onCancel}
-      confirmButton={{
-        text: state.confirmButtonText,
-        props: {
-          variant: 'contained',
-          color: 'primary',
-          loading: state.loading,
-        },
-      }}
-      cancelButton={{
-        text: state.cancelButtonText,
-        props: {
-          variant: 'outlined',
-          color: 'primary',
-        },
-      }}>
-      {state.content}
-    </Confirm>
-  );
-});
-
-export function useConfirm() {
-  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 ref={confirmRef} />,
-    confirmApi,
-  };
-}

package/src/Tabs/index.js

@@ -1,45 +0,0 @@
-import PropTypes from 'prop-types';
-import MuiTabs from '@mui/material/Tabs';
-import MuiTab from '@mui/material/Tab';
-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',
-    },
-  },
-}));
-
-export default function Tabs({ tabs, current, onChange, ...rest }) {
-  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,
-};