@arcblock/ux 2.6.9 → 2.7.0

package/babel.config.es.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { modules: false, targets: 'chrome 114' }],
+    ['@babel/preset-react', { useBuiltIns: true, runtime: 'automatic' }],
+  ],
+  plugins: [
+    'babel-plugin-inline-react-svg',
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-proposal-class-properties',
+  ],
+  ignore: ['src/**/*.stories.js', 'src/**/demo'],
+};

package/es/ActionButton/index.js

@@ -0,0 +1,99 @@
+import PropTypes from 'prop-types';
+import Button from '../Button';
+import { mergeProps } from '../Util';
+import { withDeprecated } from '../Util/deprecate';
+
+/**
+ * Action button component
+ * @typedef {{
+ *  href: string;
+ *  children?: import('react').ReactNode;
+ *  gradient?: string;
+ *  color?: string;
+ *  icon?: string;
+ *  border?: string;
+ *  text?: string;
+ *  theme?: string;
+ *  variant?: string;
+ *  size?: string;
+ *  width?: string;
+ * }} ActionButtonProps
+ */
+
+/**
+ * Action button component
+ * @param {ActionButtonProps} props
+ * @returns {JSX.Element}
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function ActionButton(props) {
+  /** @type {ActionButtonProps & {}} */
+  const newProps = mergeProps(props, ActionButton);
+  const {
+    href,
+    icon,
+    size,
+    color,
+    theme,
+    variant,
+    gradient,
+    children,
+    text,
+    ...rest
+  } = newProps;
+
+  /** @type {import('react').CSSProperties} */
+  const styles = {};
+  if (gradient) {
+    styles.backgroundImage = gradient;
+    styles.borderColor = 'transparent';
+  }
+  const attrs = ['color', 'border', 'width'];
+  attrs.forEach(x => {
+    if (newProps[x]) {
+      styles[x] = newProps[x];
+    }
+  });
+  return /*#__PURE__*/_jsxs(Button, {
+    color: theme,
+    href: href,
+    target: "_blank",
+    variant: variant,
+    style: styles,
+    size: size,
+    className: "action-button",
+    ...rest,
+    children: [!!icon && /*#__PURE__*/_jsx("i", {
+      className: icon
+    }), text || children]
+  });
+}
+ActionButton.propTypes = {
+  href: PropTypes.string.isRequired,
+  children: PropTypes.any,
+  gradient: PropTypes.string,
+  color: PropTypes.string,
+  icon: PropTypes.string,
+  border: PropTypes.string,
+  text: PropTypes.string,
+  theme: PropTypes.string,
+  variant: PropTypes.string,
+  size: PropTypes.string,
+  width: PropTypes.string
+};
+ActionButton.defaultProps = {
+  gradient: '',
+  icon: '',
+  text: '',
+  color: '',
+  border: '',
+  width: '',
+  theme: 'inherit',
+  variant: 'outlined',
+  size: 'large',
+  children: null
+};
+export default withDeprecated(ActionButton, {
+  name: 'ActionButton'
+});

package/es/ActivityIndicator/index.js

@@ -0,0 +1,180 @@
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { green, blue } from '@mui/material/colors';
+import Logo from '../Logo';
+import colors from '../Colors';
+import { styled } from '../Theme';
+
+/**
+ * ActivityIndicator is used when we want to tell the user the request they made on the UI will take time.
+ * @typedef {{
+ *  interval?: number;
+ *  messages: string[];
+ * } & import('react').ComponentPropsWithoutRef<"div"> } ActivityIndicatorProps
+ */
+
+/**
+ * @description ActivityIndicator is used when we want to tell the user the request they made on the UI will take time.
+ * @param {ActivityIndicatorProps} props
+ * @returns {JSX.Element}
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function ActivityIndicator({
+  messages,
+  interval,
+  ...rest
+}) {
+  const [index, setIndex] = useState(0);
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setIndex((index + 1) % messages.length);
+    }, interval);
+    return () => {
+      clearTimeout(timer);
+    };
+  });
+  return /*#__PURE__*/_jsx(Div, {
+    ...rest,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "pm-loader-container",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "pm-loader-text",
+        children: /*#__PURE__*/_jsx("p", {
+          children: messages[index]
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "pm-loader-atoms",
+        children: [/*#__PURE__*/_jsx(Logo, {
+          style: {
+            transform: 'scale(0.6)'
+          },
+          showText: false
+        }), /*#__PURE__*/_jsx(Orbit, {
+          size: 56,
+          orbitColor: green[500],
+          atomColor: green[500],
+          duration: 1
+        }), /*#__PURE__*/_jsx(Orbit, {
+          size: 80,
+          orbitColor: blue[800],
+          atomColor: blue[800],
+          duration: 1.5
+        }), /*#__PURE__*/_jsx(Orbit, {
+          size: 100,
+          orbitColor: colors.grey[900],
+          atomColor: colors.grey[900]
+        })]
+      })]
+    })
+  });
+}
+ActivityIndicator.propTypes = {
+  interval: PropTypes.number,
+  messages: PropTypes.arrayOf(PropTypes.string.isRequired)
+};
+ActivityIndicator.defaultProps = {
+  interval: 3000,
+  messages: ['Loading data...']
+};
+const Div = styled('div')`
+  && {
+    box-sizing: border-box;
+    padding: 20px;
+    width: 100%;
+    height: 100%;
+    min-height: 360px;
+    z-index: 100;
+    transition: opacity 0.5s linear;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .pm-loader-text {
+    color: ${colors.grey[900]};
+    font-size: 14px;
+    text-align: center;
+    position: relative;
+    height: 70px;
+    -webkit-user-select: none;
+  }
+
+  .pm-loader-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1;
+  }
+
+  .pm-loader-atoms {
+    width: 100px;
+    height: 100px;
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+function Orbit({
+  size,
+  orbitColor,
+  atomColor,
+  duration,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(OrbitRoot, {
+    $duration: duration,
+    style: {
+      width: size,
+      height: size,
+      border: `1px solid ${orbitColor}`
+    },
+    ...rest,
+    children: /*#__PURE__*/_jsx("div", {
+      style: {
+        background: atomColor
+      }
+    })
+  });
+}
+Orbit.propTypes = {
+  size: PropTypes.number.isRequired,
+  orbitColor: PropTypes.string.isRequired,
+  atomColor: PropTypes.string.isRequired,
+  duration: PropTypes.number
+};
+Orbit.defaultProps = {
+  duration: 2
+};
+const OrbitRoot = styled('div')`
+  @keyframes orbit {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  position: absolute;
+  border-radius: 50%;
+  animation: orbit ${({
+  $duration
+}) => $duration}s infinite;
+  animation-timing-function: linear;
+  transform-origin: center;
+
+  > div {
+    position: absolute;
+    top: 50%;
+    width: 6px;
+    height: 6px;
+    transform: translateX(-50%);
+    border-radius: 50%;
+  }
+`;

package/es/Address/compact-text.js

@@ -0,0 +1,105 @@
+import { Children } from 'react';
+import PropTypes from 'prop-types';
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import Box from '@mui/material/Box';
+import { styled } from '../Theme';
+import { CopyButton } from '../ClickToCopy';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const StyledTooltip = styled(({
+  className,
+  ...props
+}) => /*#__PURE__*/_jsx(Tooltip, {
+  ...props,
+  classes: {
+    popper: className
+  }
+}))({
+  [`& .${tooltipClasses.tooltip}`]: {
+    maxWidth: 360,
+    wordBreak: 'break-all'
+  }
+});
+
+// 递归, 将 text (string) 部分替换为 CompactText (保持元素结构)
+// eslint-disable-next-line react/prop-types
+function RecursiveWrapper({
+  children,
+  ...rest
+}) {
+  const wrappedChildren = Children.map(children, child => {
+    if (typeof child === 'string') {
+      return /*#__PURE__*/_jsx(CompactText, {
+        ...rest,
+        children: child
+      });
+    }
+    if (child.props && child.props.children) {
+      return /*#__PURE__*/_jsx(child.type, {
+        ...child.props,
+        children: /*#__PURE__*/_jsx(RecursiveWrapper, {
+          ...rest,
+          children: child.props.children
+        })
+      });
+    }
+    return child;
+  });
+  return wrappedChildren;
+}
+
+/**
+ * 紧凑文本组件 (显示首尾, 中间截断显示省略号), 仅考虑等宽字体的情况
+ */
+export default function CompactText({
+  startChars,
+  endChars,
+  children,
+  showCopyButtonInTooltip
+}) {
+  if (typeof children !== 'string') {
+    return /*#__PURE__*/_jsx(RecursiveWrapper, {
+      startChars: startChars,
+      endChars: endChars,
+      showCopyButtonInTooltip: showCopyButtonInTooltip,
+      children: children
+    });
+  }
+
+  // stopPropagation: 当 tooltip 处于 link 中时, 避免点击复制时触发链接跳转
+  const tooltipContent = /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    alignItems: "center",
+    lineHeight: 1,
+    onClick: e => e.stopPropagation(),
+    children: [/*#__PURE__*/_jsx(Box, {
+      children: children
+    }), showCopyButtonInTooltip && /*#__PURE__*/_jsx(CopyButton, {
+      content: children,
+      showTooltip: false,
+      style: {
+        fontSize: 16,
+        marginLeft: 4
+      }
+    })]
+  });
+  return /*#__PURE__*/_jsx(StyledTooltip, {
+    title: tooltipContent,
+    placement: "top",
+    children: /*#__PURE__*/_jsxs("span", {
+      children: [children.slice(0, startChars), "...", children.slice(children.length - endChars)]
+    })
+  });
+}
+CompactText.propTypes = {
+  startChars: PropTypes.number,
+  endChars: PropTypes.number,
+  children: PropTypes.node.isRequired,
+  // 在 tooltip 中完整地址后显示复制按钮
+  showCopyButtonInTooltip: PropTypes.bool
+};
+CompactText.defaultProps = {
+  startChars: 6,
+  endChars: 6,
+  showCopyButtonInTooltip: false
+};

package/es/Address/did-address.js

@@ -0,0 +1,211 @@
+import React, { useRef, useState, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import '@fontsource/ubuntu-mono/400.css';
+import useMountedState from 'react-use/lib/useMountedState';
+import Tooltip from '@mui/material/Tooltip';
+import { green } from '@mui/material/colors';
+import copy from 'copy-to-clipboard';
+import CopyIcon from '@mui/icons-material/ContentCopy';
+import CheckIcon from '@mui/icons-material/Check';
+import { styled } from '../Theme';
+import { getFontSize } from '../Util';
+import CompactText from './compact-text';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const translations = {
+  en: {
+    copy: 'Click To Copy',
+    copied: 'Copied!'
+  },
+  zh: {
+    copy: '点击复制',
+    copied: '已复制!'
+  }
+};
+
+/**
+ * DidAddress 组件 (新版设计)
+ *
+ * - 样式调整
+ * - click-to-copy 调整
+ * - 长文本截断处理 (Ellipsis)
+ * - 支持 inline 或 block 的显示方式
+ * - 支持紧凑模式, 该模式下:
+ *   - 占用宽度较小, 因此不考虑水平空间不够用的情况, 且忽略末尾省略号
+ *   - 对于多层元素结构的 children, 保持元素结构, 将最内层 text 替换为 CompactText 组件
+ *   - 为保证 copy 功能正常工作, 原 children 始终渲染, 但在紧凑式下会隐藏
+ *   - 可配合 useMediaQuery 使用
+ */
+const DidAddress = /*#__PURE__*/forwardRef(({
+  component,
+  size,
+  copyable,
+  content,
+  children,
+  prepend,
+  append,
+  compact,
+  startChars,
+  endChars,
+  locale,
+  showCopyButtonInTooltip,
+  ...rest
+}, ref) => {
+  if (!translations[locale]) {
+    // eslint-disable-next-line no-param-reassign
+    locale = 'en';
+  }
+
+  // 避免 unmounted 后 setTimeout handler 依然改变 state
+  const isMounted = useMountedState();
+  const [copied, setCopied] = useState(false);
+  const textRef = useRef();
+  const onCopy = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    copy(content || textRef.current.textContent);
+    setCopied(true);
+    // 恢复 copied 状态
+    setTimeout(() => {
+      if (isMounted()) {
+        setCopied(false);
+      }
+    }, 1500);
+  };
+  let copyElement = null;
+  if (copyable) {
+    copyElement = /*#__PURE__*/_jsx("span", {
+      className: "did-address-copy-wrapper",
+      title: copied ? '' : translations[locale].copy,
+      children: copied ? /*#__PURE__*/_jsx(Tooltip, {
+        title: translations[locale].copied,
+        placement: "bottom",
+        arrow: true,
+        open: copied,
+        children: /*#__PURE__*/_jsx(CheckIcon, {
+          className: "did-address-copy",
+          style: {
+            color: green[500]
+          }
+        })
+      }) :
+      /*#__PURE__*/
+      /* title prop 直接加在 icon 上不生效 */
+      _jsx(CopyIcon, {
+        className: "did-address-copy",
+        onClick: onCopy
+      })
+    });
+  }
+  return /*#__PURE__*/_jsxs(Root, {
+    as: component,
+    size: size,
+    ...rest,
+    ref: ref,
+    children: [prepend, /*#__PURE__*/_jsx("span", {
+      ref: textRef,
+      className: "did-address-text did-address-truncate",
+      style: {
+        display: compact ? 'none' : 'inline'
+      },
+      children: children
+    }), compact && /*#__PURE__*/_jsx("span", {
+      className: "did-address-text",
+      children: /*#__PURE__*/_jsx(CompactText, {
+        startChars: startChars,
+        endChars: endChars,
+        showCopyButtonInTooltip: showCopyButtonInTooltip,
+        children: children
+      })
+    }), copyElement, append]
+  });
+});
+export default DidAddress;
+DidAddress.propTypes = {
+  component: PropTypes.string,
+  size: PropTypes.number,
+  copyable: PropTypes.bool,
+  // compact mode 下, hover 时会在 tooltip 中显示完整地址, showCopyButtonInTooltip = true 时会在完整地址后显示一个复制按钮
+  showCopyButtonInTooltip: PropTypes.bool,
+  children: PropTypes.any,
+  content: PropTypes.string,
+  inline: PropTypes.bool,
+  prepend: PropTypes.any,
+  append: PropTypes.any,
+  // 紧凑模式
+  compact: PropTypes.bool,
+  startChars: PropTypes.number,
+  endChars: PropTypes.number,
+  locale: PropTypes.oneOf(['en', 'zh'])
+};
+DidAddress.defaultProps = {
+  component: 'span',
+  size: 0,
+  copyable: true,
+  showCopyButtonInTooltip: false,
+  children: null,
+  content: '',
+  inline: false,
+  prepend: null,
+  append: null,
+  compact: false,
+  startChars: 6,
+  endChars: 6,
+  locale: 'en'
+};
+const Root = styled('div', {
+  shouldForwardProp: prop => prop !== 'inline'
+})`
+  font-family: 'Ubuntu Mono', monospace;
+  && {
+    display: ${({
+  inline
+}) => inline ? 'inline-flex' : 'flex'};
+    align-items: center;
+    max-width: 100%;
+    overflow: hidden;
+    color: #ccc;
+    font-size: ${props => getFontSize(props.size)};
+    font-weight: 400;
+
+    svg {
+      fill: currentColor;
+    }
+  }
+
+  .did-address-text {
+    color: #666;
+  }
+  /* truncate string with ellipsis */
+  .did-address-truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .did-address-copy {
+    flex: 0 0 auto;
+  }
+  .did-address-copy-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    margin-left: 8px;
+  }
+  .did-address-copy {
+    font-size: 1em;
+    color: #999;
+    cursor: pointer;
+  }
+
+  /* link */
+  a {
+    color: #666;
+  }
+  &:hover a {
+    color: #222;
+    text-decoration: underline;
+  }
+`;

package/es/Address/index.js

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import DidAddress from './did-address';
+import ResponsiveDidAddress from './responsive-did-address';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function DidAddressWrapper({
+  responsive,
+  ...rest
+}) {
+  if (responsive) {
+    return /*#__PURE__*/_jsx(ResponsiveDidAddress, {
+      ...rest
+    });
+  }
+  return /*#__PURE__*/_jsx(DidAddress, {
+    ...rest
+  });
+}
+DidAddressWrapper.propTypes = {
+  responsive: PropTypes.bool
+};
+DidAddressWrapper.defaultProps = {
+  responsive: true
+};