@arcblock/ux 2.10.43 → 2.10.44

package/src/Address/did-address.jsx

@@ -1,220 +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';
-
-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 = 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 = (
-        <span className="did-address-copy-wrapper" title={copied ? '' : translations[locale].copy}>
-          {copied ? (
-            <Tooltip title={translations[locale].copied} placement="bottom" arrow open={copied}>
-              <CheckIcon className="did-address-copy" style={{ color: green[500] }} />
-            </Tooltip>
-          ) : (
-            /* title prop 直接加在 icon 上不生效 */
-            <CopyIcon className="did-address-copy" onClick={onCopy} />
-          )}
-        </span>
-      );
-    }
-
-    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}>
-          {compact ? (
-            <Box
-              component="span"
-              className="did-address-text"
-              sx={{
-                cursor: copyable ? 'unset' : 'pointer',
-              }}
-              onDoubleClick={copyable ? noop : onCopy}>
-              <CompactText
-                startChars={startChars}
-                endChars={endChars}
-                showCopyButtonInTooltip={showCopyButtonInTooltip}>
-                {children}
-              </CompactText>
-            </Box>
-          ) : (
-            <Box
-              component="span"
-              className="did-address-text did-address-truncate"
-              sx={{
-                display: compact ? 'none' : 'inline',
-                cursor: copyable ? 'unset' : 'pointer',
-              }}
-              onDoubleClick={copyable ? noop : onCopy}>
-              {children}
-            </Box>
-          )}
-        </Tooltip>
-        {copyElement}
-        {append}
-      </Root>
-    );
-  }
-);
-
-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/src/Address/index.jsx

@@ -1,18 +0,0 @@
-import PropTypes from 'prop-types';
-import DidAddress from './did-address';
-import ResponsiveDidAddress from './responsive-did-address';
-
-export default function DidAddressWrapper({ responsive, ...rest }) {
-  if (responsive) {
-    return <ResponsiveDidAddress {...rest} />;
-  }
-  return <DidAddress {...rest} />;
-}
-
-DidAddressWrapper.propTypes = {
-  responsive: PropTypes.bool,
-};
-
-DidAddressWrapper.defaultProps = {
-  responsive: true,
-};

package/src/Address/responsive-did-address.jsx

@@ -1,79 +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 模式渲染前, 隐藏显示, 避免闪烁问题
- */
-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 = 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 (
-    <Root as={component} ref={containerRef} style={style} className={className}>
-      <StyledDidAddress {...rest} component={component} inline compact={compact} ref={ref} />
-    </Root>
-  );
-}
-
-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;
-  }
-`;