@arcblock/ux 2.9.91 → 2.10.0

package/es/ActionButton/index.js

@@ -1,99 +0,0 @@
-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

@@ -1,180 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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

@@ -1,222 +0,0 @@
-import React, { useRef, useState, forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import '@fontsource/ubuntu-mono/400.css';
-import { green } from '@mui/material/colors';
-import { Tooltip, Box } from '@mui/material';
-import copy from 'copy-to-clipboard';
-import { ContentCopy as CopyIcon, Check as CheckIcon } from '@mui/icons-material';
-import noop from 'lodash/noop';
-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';
-  }
-  const [copied, setCopied] = useState(false);
-  const textRef = useRef();
-  const onCopy = e => {
-    e.stopPropagation();
-    e.preventDefault();
-    copy(content || textRef.current.textContent);
-    setCopied(true);
-    // 恢复 copied 状态
-    setTimeout(() => {
-      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(Box, {
-      sx: {
-        display: 'none'
-      },
-      ref: textRef,
-      children: children
-    }), /*#__PURE__*/_jsx(Tooltip, {
-      title: copyable ? '' : translations[locale].copied,
-      placement: "bottom",
-      arrow: true,
-      open: copied,
-      children: compact ? /*#__PURE__*/_jsx(Box, {
-        component: "span",
-        className: "did-address-text",
-        sx: {
-          cursor: copyable ? 'unset' : 'pointer'
-        },
-        onDoubleClick: copyable ? noop : onCopy,
-        children: /*#__PURE__*/_jsx(CompactText, {
-          startChars: startChars,
-          endChars: endChars,
-          showCopyButtonInTooltip: showCopyButtonInTooltip,
-          children: children
-        })
-      }) : /*#__PURE__*/_jsx(Box, {
-        component: "span",
-        className: "did-address-text did-address-truncate",
-        sx: {
-          display: compact ? 'none' : 'inline',
-          cursor: copyable ? 'unset' : 'pointer'
-        },
-        onDoubleClick: copyable ? noop : onCopy,
-        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(Box, {
-  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-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 1em;
-    height: 1em;
-    margin-left: 8px;
-  }
-  .did-address-copy {
-    flex: 0 0 auto;
-    font-size: 1em;
-    color: #999;
-    cursor: pointer;
-  }
-
-  /* link */
-  a {
-    color: #666;
-  }
-  &:hover a {
-    color: #222;
-    text-decoration: underline;
-  }
-`;

package/es/Address/index.js

@@ -1,23 +0,0 @@
-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
-};

package/es/Address/responsive-did-address.js

@@ -1,87 +0,0 @@
-import { useState, createRef, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { useSize } from 'ahooks';
-import { styled } from '../Theme';
-import DidAddress from './did-address';
-
-/**
- * 根据父容器宽度自动切换 compact 模式
- *
- * 实现逻辑:
- * - DidAddress 外层包裹一个容器, 其宽度自动撑满父容器宽度 (即这个容器需要是块级元素或 100% 宽的 inline-block)
- * - DidAddress 本身以 inline 形式渲染 (方便探测 did-address 的 full-width)
- * - 组件 mounted 时记录 did address 的 full-width (非 compact 模式的宽度)
- * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
- * - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function ResponsiveDidAddress({
-  style,
-  className,
-  component,
-  ...rest
-}) {
-  const [compact, setCompact] = useState(false);
-  // did address 完整显示时的宽度
-  const [addressFullWidth, setAddressFullWidth] = useState(null);
-  const containerRef = useRef(null);
-  const size = useSize(containerRef);
-  const containerWidth = size?.width || 0;
-  const ref = /*#__PURE__*/createRef();
-  // 存储完整显示时 address 组件的宽度
-  useEffect(() => {
-    if (!compact && addressFullWidth === null) {
-      setAddressFullWidth(ref.current.offsetWidth);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  useEffect(() => {
-    if (containerWidth && addressFullWidth) {
-      setCompact(containerWidth < addressFullWidth);
-    }
-  }, [containerWidth, addressFullWidth]);
-  return /*#__PURE__*/_jsx(Root, {
-    as: component,
-    ref: containerRef,
-    style: style,
-    className: className,
-    children: /*#__PURE__*/_jsx(StyledDidAddress, {
-      ...rest,
-      component: component,
-      inline: true,
-      compact: compact,
-      ref: ref
-    })
-  });
-}
-ResponsiveDidAddress.propTypes = {
-  style: PropTypes.object,
-  className: PropTypes.string,
-  component: PropTypes.string
-};
-ResponsiveDidAddress.defaultProps = {
-  style: {},
-  className: '',
-  component: 'span'
-};
-const Root = styled('div')`
-  display: block;
-  overflow: hidden;
-  ${({
-  inline
-}) => inline && `
-    display: inline-block;
-    width: 100%;
-  `}
-`;
-const StyledDidAddress = styled(DidAddress)`
-  && {
-    max-width: none;
-  }
-  .did-address-text {
-    /* 禁止文本 Ellipsis/截断, 以便测量真实的宽度 */
-    white-space: nowrap;
-    overflow: visible;
-    text-overflow: unset;
-  }
-`;