@arcblock/ux 2.6.9 → 2.7.1

package/es/TextCollapse/index.js

@@ -0,0 +1,92 @@
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import { styled } from '../Theme';
+import { withDeprecated } from '../Util/deprecate';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function TextCollapse({
+  children,
+  startChars,
+  endChars,
+  scaleFactor,
+  maxWidth,
+  style,
+  fontType,
+  ...rest
+}) {
+  if (typeof children !== 'string') {
+    return null;
+  }
+  const isMonospace = fontType === 'monospace';
+
+  // 由于 css 样式产生的省略号长度是不确定的，所以目前 startChars 的长度只能让开发者自己去加上‘省略号’的宽度去设置这个值，要想完美的实现目标功能，最好是改用 js 动态修改文本内容来实现
+  const startWidth = isMonospace ? `${startChars}ch` : `${scaleFactor * (startChars + 3)}em`;
+  const endWidth = isMonospace ? `${endChars}ch` : `${scaleFactor * endChars}em`;
+  const styles = Object.assign(isMonospace ? {
+    fontFamily: '"Courier New", Courier, monospace'
+  } : {}, {
+    fontSize: 'inherit',
+    color: 'inherit',
+    fontWeight: 'inherit',
+    maxWidth
+  }, style);
+  const [startPart, endPart] = [children.slice(0, children.length - endChars), children.slice(children.length - endChars)];
+  return /*#__PURE__*/_jsxs(Container, {
+    component: "span",
+    style: styles,
+    startwidth: startWidth,
+    endwidth: endWidth,
+    ...rest,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: "start-part",
+      children: startPart
+    }), /*#__PURE__*/_jsx("span", {
+      className: "end-part",
+      children: endPart
+    })]
+  });
+}
+TextCollapse.propTypes = {
+  children: PropTypes.string.isRequired,
+  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  fontType: PropTypes.oneOf(['monospace', 'normal']),
+  style: PropTypes.object,
+  startChars: PropTypes.number,
+  endChars: PropTypes.number,
+  scaleFactor: PropTypes.number
+};
+TextCollapse.defaultProps = {
+  style: {},
+  startChars: 5,
+  endChars: 5,
+  scaleFactor: 0.45,
+  fontType: 'normal'
+};
+export default withDeprecated(TextCollapse, {
+  name: 'TextCollapse'
+});
+const Container = styled(Typography)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: start;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+
+  .start-part,
+  .end-part {
+    display: inline-block;
+    vertical-align: bottom;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .start-part {
+    max-width: calc(100% - ${props => props.endwidth});
+    min-width: ${props => props.startwidth};
+    text-overflow: ellipsis;
+  }
+  .end-part {
+    max-width: calc(100% - ${props => props.startwidth});
+    direction: rtl;
+  }
+`;

package/es/Theme/index.js

@@ -0,0 +1,16 @@
+import { styled as muiStyled, useTheme } from '@mui/material/styles';
+export * from './theme';
+export { default as ThemeProvider } from './theme-provider';
+export { useTheme };
+const isTransientProp = prop => prop.startsWith('$');
+export const styled = (component, options = {}) => {
+  return muiStyled(component, {
+    ...options,
+    shouldForwardProp: prop => {
+      if (options.shouldForwardProp) {
+        return options.shouldForwardProp(prop) && !isTransientProp(prop);
+      }
+      return !isTransientProp(prop);
+    }
+  });
+};

package/es/Theme/theme-provider.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import StyledEngineProvider from '@mui/material/StyledEngineProvider';
+import CssBaseline from '@mui/material/CssBaseline';
+import { createTheme } from './theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const defaultTheme = createTheme();
+
+/**
+ * 默认的 theme provider, 可以为 webapp/blocklet 快捷的配置好 mui theme provider
+ */
+export default function ThemeProvider({
+  children,
+  theme,
+  injectFirst
+}) {
+  return (
+    /*#__PURE__*/
+    // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
+    _jsx(StyledEngineProvider, {
+      injectFirst: injectFirst,
+      children: /*#__PURE__*/_jsxs(MuiThemeProvider, {
+        theme: theme,
+        children: [/*#__PURE__*/_jsx(CssBaseline, {}), children]
+      })
+    })
+  );
+}
+ThemeProvider.propTypes = {
+  children: PropTypes.any,
+  theme: PropTypes.any,
+  injectFirst: PropTypes.bool
+};
+ThemeProvider.defaultProps = {
+  children: null,
+  theme: defaultTheme,
+  injectFirst: true
+};

package/es/Theme/theme.js

@@ -0,0 +1,133 @@
+// 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';
+import colors from '../Colors';
+const muiDarkTheme = _createTheme({
+  palette: {
+    mode: 'dark'
+  }
+});
+
+// https://material-ui.com/customization/default-theme/
+// eslint-disable-next-line import/prefer-default-export
+export const create = ({
+  mode = 'light',
+  pageWidth = 'md',
+  palette,
+  typography,
+  overrides,
+  ...rest
+} = {}) => {
+  // palette 考虑 light & dark mode, dark mode 需要持续完善
+  // - 能配合 ColorModeContext 使用
+  // - 为 dark mode 系统的设计整个 palette, 不要单个 color 设置
+  const _palette = mode === 'light' ? Object.assign({
+    ...colors,
+    background: {
+      paper: colors.common.white,
+      default: colors.background.default
+    },
+    mode
+  }, palette || {}) : Object.assign({
+    ...muiDarkTheme.palette,
+    background: {
+      paper: colors.grey[900],
+      default: colors.grey[900]
+    },
+    mode
+  }, palette || {});
+  const theme = _createTheme({
+    themeName: 'ArcBlock',
+    palette: _palette,
+    typography: Object.assign({
+      useNextVariants: true,
+      color: {
+        // 此处 #222222 必须硬编码, layout/sidebar.js -> Icon/image 加载图片时 color 会影响加载路径
+        // TODO: 此处硬编码的色值后面需要改为 colors.grey[900],
+        //       或者如果可以的话直接删掉 typography#color, 文本颜色建议使用 theme.palette.text 中的色值?
+        //       layout 组件建议重构, sidebar 中建议使用 icon 替换 img (#366)
+        main: mode === 'light' ? '#222222' : colors.common.white,
+        gray: mode === 'light' ? colors.grey[500] : colors.grey[300]
+      },
+      fontFamily: ['Lato', 'Avenir', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(','),
+      // 按最新设计规范, 只使用 400/700
+      fontWeightLight: 400,
+      fontWeightRegular: 400,
+      fontWeightMedium: 700,
+      fontWeightBold: 700,
+      // button 默认使用粗体
+      button: {
+        fontWeight: 700
+      }
+    }, typography || {}),
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            boxShadow: 'none'
+          }
+        }
+      },
+      MuiButtonGroup: {
+        styleOverrides: {
+          root: {
+            boxShadow: 'none'
+          }
+        }
+      },
+      MuiTableCell: {
+        styleOverrides: {
+          root: {
+            borderBottomWidth: '0',
+            paddingTop: '14px',
+            paddingBottom: '14px',
+            paddingLeft: 0,
+            paddingRight: '30px'
+          },
+          head: {
+            textTransform: 'uppercase',
+            color: mode === 'light' ? colors.grey[900] : colors.grey[300]
+          },
+          body: {
+            color: mode === 'light' ? colors.grey[900] : colors.grey[300]
+          }
+        }
+      },
+      ...overrides
+    },
+    pageWidth,
+    // TODO: 过时的 colors, 需要各项目负责人检查项目中是否使用 "theme.colors", 如果有需要清除,
+    //       可以从 Colors 模块/theme.palette/mui colors 中取值
+    colors: {
+      white: '#FFFFFF',
+      dark: '#4A707C',
+      gray: '#222222',
+      minor: '#9B9B9B',
+      darkText: '#DCDCDC',
+      background: '#F7F8F8',
+      yellow: '#FFCF71',
+      green: '#44cdc6',
+      red: '#D0021B',
+      blue: '#4E6AF6',
+      primary: '#222222',
+      black: '#222222',
+      secondary: '#44cdc6',
+      mint: '#44cdc6',
+      textSecondary: '#4A4A4A',
+      active: '#5b9025',
+      danger: '#D0021B',
+      lightGrey: '#BCBCBC'
+    },
+    mode,
+    ...rest
+  });
+  const enhanced = responsiveFontSizes(theme, {
+    breakpoints: ['xs', 'sm', 'md', 'lg'],
+    disableAlign: false,
+    factor: 3,
+    variants: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline']
+  });
+  return enhanced;
+};
+export const createTheme = create;

package/es/Toast/index.js

@@ -0,0 +1,95 @@
+import { createRef } from 'react';
+import { SnackbarProvider, useSnackbar } from 'notistack';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+
+/**
+ *
+ * @typedef {(message: import('notistack').SnackbarMessage, options?: import('notistack').OptionsObject, ...args: any[]) => import('notistack').SnackbarKey} EnqueueSnackbarFunc
+ *
+ */
+
+/**
+ * @type {import('notistack').ProviderContext['enqueueSnackbar']}
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const noop = () => {};
+let success = noop;
+let error = noop;
+let warning = noop;
+let info = noop;
+/**
+ * @description
+ * @param {(message: import('notistack').SnackbarMessage, options?: import('notistack').OptionsObject) => import('notistack').SnackbarKey} enqueueSnackbar
+ * @param {import('notistack').ProviderContext['enqueueSnackbar']} enqueueSnackbar
+ * @param {import('notistack').VariantType} variant
+ * @returns {import('notistack').ProviderContext['enqueueSnackbar']}
+ */
+const genFn = (enqueueSnackbar, variant) => (message, opts = {}) => {
+  enqueueSnackbar(message, {
+    autoHideDuration: 3000,
+    variant,
+    ...opts
+  });
+};
+
+// eslint-disable-next-line react/prop-types
+function ToastProvider({
+  children
+}) {
+  const notistackRef = /*#__PURE__*/createRef();
+  const onClickDismiss = key => () => {
+    notistackRef.current.closeSnackbar(key);
+  };
+  return /*#__PURE__*/_jsxs(SnackbarProvider, {
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    },
+    ref: notistackRef
+    // eslint-disable-next-line react/no-unstable-nested-components
+    ,
+    action: key => /*#__PURE__*/_jsx(IconButton, {
+      "aria-label": "close",
+      color: "inherit",
+      onClick: onClickDismiss(key),
+      size: "large",
+      children: /*#__PURE__*/_jsx(CloseIcon, {
+        style: {
+          fontSize: 16
+        }
+      })
+    }, "close"),
+    children: [/*#__PURE__*/_jsx(Toast, {}), children]
+  });
+}
+function Toast() {
+  const {
+    enqueueSnackbar
+  } = useSnackbar();
+  success = genFn(enqueueSnackbar, 'success');
+  error = genFn(enqueueSnackbar, 'error');
+  warning = genFn(enqueueSnackbar, 'warning');
+  info = genFn(enqueueSnackbar, 'info');
+  return null;
+}
+export { ToastProvider };
+export default {
+  /**
+   * @type {EnqueueSnackbarFunc}
+   */
+  success: (message, options = {}, ...args) => success(message, options, ...args),
+  /**
+   * @type {EnqueueSnackbarFunc}
+   */
+  error: (message, options = {}, ...args) => error(message, options, ...args),
+  /**
+   * @type {EnqueueSnackbarFunc}
+   */
+  warning: (message, options = {}, ...args) => warning(message, options, ...args),
+  /**
+   * @type {EnqueueSnackbarFunc}
+   */
+  info: (message, options = {}, ...args) => info(message, options, ...args)
+};

package/es/Util/deprecate.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const warn = (name, alternative) => {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
+  if (typeof console?.warn === 'function') {
+    if (alternative) {
+      console.warn(`DEPRECATED: ${name} is deprecated, use ${alternative} instead.`);
+    } else {
+      console.warn(`DEPRECATED: ${name} is deprecated.`);
+    }
+  }
+};
+const withDeprecated = (Component, {
+  name,
+  alternative
+}) => {
+  return function Deprecated(props) {
+    useEffect(() => {
+      warn(name, alternative);
+    }, []);
+    return /*#__PURE__*/_jsx(Component, {
+      ...props
+    });
+  };
+};
+export { warn, withDeprecated };

package/es/Util/index.js

@@ -0,0 +1,298 @@
+/* eslint-disable no-bitwise */
+import padStart from 'lodash/padStart';
+let dateTool = null;
+export function parseQuery(str) {
+  return str.replace(/^\?/, '').split('&').map(x => x.split('=')).filter(([key]) => !!key).reduce((memo, x) => {
+    const key = x[0];
+    const value = decodeURIComponent(x[1]) || true;
+    memo[key] = value;
+    return memo;
+  }, {});
+}
+export function stringifyQuery(params = {}) {
+  return new URLSearchParams(params).toString();
+}
+
+/**
+ * @param {number} opts.expireInDays
+ * @param {string} opts.path
+ * @param {domain} opts.domain
+ * @param {boolean} opts.returnDomain if === false, opts.domain will be skipped
+ */
+export function getCookieOptions(expireInDays = 1) {
+  let opts = {
+    expireInDays
+  };
+  if (typeof expireInDays === 'object') {
+    opts = expireInDays;
+  }
+  if (opts.path === undefined) {
+    opts.path = '/';
+  }
+  if (!opts.expireInDays) {
+    opts.expireInDays = 1;
+  }
+  const options = {
+    expires: opts.expireInDays,
+    path: opts.path,
+    domain: opts.domain || '',
+    sameSite: opts.sameSite || 'lax'
+  };
+  if (typeof window === 'undefined' || opts.domain || opts.returnDomain === false) {
+    if (opts.returnDomain === false) {
+      delete options.domain;
+    }
+    return options;
+  }
+  return options;
+}
+export const getColor = props => {
+  if (props.color) {
+    return props.color;
+  }
+  if (props.dark) {
+    return props.theme.palette.common.white;
+  }
+  return props.theme.palette.text.primary;
+};
+export const getBackground = props => {
+  if (props.background) {
+    return props.background;
+  }
+  if (props.dark) {
+    return props.theme.palette.common.black;
+  }
+  return props.theme.palette.common.white;
+};
+export function mergeProps(props, component, jsonAttrs = []) {
+  const newProps = Object.assign({}, props);
+  Object.keys(component.defaultProps || {}).forEach(x => {
+    if (typeof newProps[x] === 'string' && newProps[x].indexOf('::prop::') === 0) {
+      newProps[x] = component.defaultProps[x];
+    }
+  });
+  if (Array.isArray(jsonAttrs)) {
+    jsonAttrs.forEach(x => {
+      if (typeof newProps[x] === 'string') {
+        try {
+          newProps[x] = JSON.parse(newProps[x]);
+        } catch (err) {
+          // Do nothing
+        }
+      }
+    });
+  }
+  Object.keys(newProps).forEach(x => {
+    if (typeof newProps[x] === 'string' && newProps[x].indexOf('::prop::') === 0) {
+      newProps[x] = '';
+    }
+  });
+  return newProps;
+}
+export function getCopyright(startYear = 2017) {
+  const currentYear = new Date().getFullYear();
+  return `${currentYear}` === `${startYear}` ? `© ArcBlock ${currentYear}` : `© ArcBlock ${startYear} - ${currentYear}`;
+}
+export const getTimezone = () => {
+  if (typeof Intl === 'object' && typeof Intl.DateTimeFormat === 'function' && typeof Intl.DateTimeFormat().resolvedOptions === 'function') {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+  }
+  return '';
+};
+export const str2color = str => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  let colour = '#';
+  for (let j = 0; j < 3; j++) {
+    const value = hash >> j * 8 & 0xff;
+    colour += `00${value.toString(16)}`.substr(-2);
+  }
+  return colour;
+};
+export const formatUptime = uptime => {
+  const total = Math.round(uptime / 1000);
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor((total - hours * 3600) / 60);
+  const seconds = total % 60;
+  return `${padStart(hours, 2, '0')}:${padStart(minutes, 2, '0')}:${padStart(seconds, 2, '0')}`;
+};
+
+/**
+ * Set the date tool library which support for format() and locale() functions,
+ *  moment and dayjs are recommended.
+ * @param {object} the date tool library
+ */
+export function setDateTool(tool) {
+  dateTool = tool;
+}
+export function getDateTool() {
+  return dateTool;
+}
+const createDateFormater = format => (date, {
+  locale,
+  tz
+}) => {
+  if (dateTool === null) {
+    throw new Error('call setDateTool to set the date tool library, such as: setDateTool(dayjs)');
+  }
+  if (!date) {
+    return '-';
+  }
+  let instance = dateTool(date);
+  if (tz) {
+    instance = instance.tz(tz);
+  }
+  if (typeof locale !== 'undefined') {
+    instance = instance.locale(locale);
+  }
+  return instance.format(format);
+};
+
+/**
+ * Format the time string as `ll` format: MMM D, YYYY
+ * Ensure that the setDateTool() function is called first to set the time tool library.
+ * @param {string} date date string
+ * @param {object} option
+ * @param {string} option.locale, default: en
+ * @param {string} option.tz, default: timzone
+ * @returns formated date string
+ */
+export function formatToDate(date, {
+  locale,
+  tz
+} = {}) {
+  return createDateFormater('ll')(date, {
+    locale,
+    tz
+  });
+}
+
+/**
+ * Format the time string as `lll` format: MMM D, YYYY h:mm A
+ * Ensure that the setDateTool() function is called first to set the time tool library.
+ * @param {string} date date string
+ * @param {object} option
+ * @param {string} option.locale, default: en
+ * @param {string} option.tz, default: timzone
+ * @returns formated date string
+ */
+export function formatToDatetime(date, {
+  locale,
+  tz
+} = {}) {
+  return createDateFormater('lll')(date, {
+    locale,
+    tz
+  });
+}
+export function detectWalletExtension() {
+  const extension = window?.ABT_DEV || window.ABT;
+  if (extension && typeof extension.open === 'function') {
+    return extension;
+  }
+  return null;
+}
+export function openWebWallet({
+  webWalletUrl,
+  action = 'login',
+  locale = 'en',
+  url,
+  windowFeatures
+}) {
+  // web wallet extension
+  const extension = detectWalletExtension();
+  if (extension) {
+    extension.open({
+      action,
+      locale,
+      url: encodeURIComponent(url)
+    });
+    return;
+  }
+  const defaultWindowFeatures = {
+    toolbar: 'no',
+    location: 'no',
+    status: 'no',
+    menubar: 'no',
+    scrollbars: 'yes',
+    resizable: 'yes',
+    // iphone 8plus size
+    width: 414,
+    height: 736
+  };
+  const windowUrl = `${webWalletUrl}?action=${action}&locale=${locale}&url=${encodeURIComponent(url)}`;
+  const mergedWindowFeatures = Object.assign({}, defaultWindowFeatures, windowFeatures);
+  const getWindowWidth = win => {
+    return win.innerWidth || win.document.documentElement.clientWidth || win.document.body.clientWidth;
+  };
+  // 默认在浏览器右上角弹出窗口
+  if (!('left' in mergedWindowFeatures)) {
+    const winWidth = getWindowWidth(window.top || window);
+    const winLeft = window.screenLeft || window.screenX;
+    mergedWindowFeatures.left = winWidth + winLeft - mergedWindowFeatures.width;
+  }
+  if (!('top' in mergedWindowFeatures)) {
+    const winTop = window.screenTop || window.screenY;
+    mergedWindowFeatures.top = winTop;
+  }
+  const strWindowFeatures = Object.keys(mergedWindowFeatures).map(key => `${key}=${mergedWindowFeatures[key]}`).join(',');
+  window.open(windowUrl, 'targetWindow', strWindowFeatures);
+}
+export const getFontSize = size => {
+  // 12px 及以上的 size 有效, 否则返回 inherit
+  if (size && Number(size) >= 12) {
+    return `${Number(size)}px`;
+  }
+  return 'inherit';
+};
+
+// 参考: asset-chain @arcblock/did
+export const isEthereumDid = did => {
+  const address = did.replace('did:abt:', '');
+  // check if it has the basic requirements of an address
+  if (!/^(0x)?[0-9a-f]{40}$/i.test(address)) {
+    return false;
+  }
+  return true;
+};
+
+/**
+ *
+ * @param {string} url 需要处理的 url
+ * @param {{imageFilter: 'crop'|'resize'; w?: number; h?: number; r?: 0|90|180|270}} params
+ * @returns
+ */
+export const appendParams = (url, params) => {
+  if (!params) {
+    return url;
+  }
+  try {
+    // HACK: 如果 url 中带有域名，则 urlInstance.origin 为 url 中的域名；否则，借用当前页面的 location.origin 作为域名来拼接一个 url
+    const urlInstance = new URL(url, window.location.origin);
+    Object.keys(params).forEach(key => {
+      urlInstance.searchParams.set(key, params[key]);
+    });
+    // HACK: 如果前后域名一致，代表前面已经借用了 location.origin，这个时候只需要返回 urlInstance.pathname + urlInstance.search 即可
+    if (urlInstance.origin === window.location.origin) {
+      return urlInstance.pathname + urlInstance.search;
+    }
+    return urlInstance.href;
+  } catch {
+    return url;
+  }
+};
+export const getUserAvatar = (avatar, size = 48) => {
+  if (!avatar) {
+    return avatar;
+  }
+  if (avatar.indexOf('/.well-known/service') >= 0) {
+    return appendParams(avatar, {
+      imageFilter: 'resize',
+      w: size,
+      h: size
+    });
+  }
+  return avatar;
+};