@arcblock/ux 3.4.14 → 3.5.0

package/src/Address/did-address.tsx

@@ -1,223 +0,0 @@
-import '@fontsource/ubuntu-mono/400.css';
-import { Check as CheckIcon } from '@mui/icons-material';
-import { Box, BoxProps, Tooltip } from '@mui/material';
-import copy from 'copy-to-clipboard';
-import noop from 'lodash/noop';
-import CopyIcon from '@arcblock/icons/lib/Copy';
-import React, { ReactNode, useImperativeHandle, useRef, useState } from 'react';
-import { styled } from '../Theme';
-import { getFontSize } from '../Util';
-import CompactText from './compact-text';
-import type { Locale, Translations } from '../type';
-
-const translations: Translations = {
-  en: {
-    copy: 'Click To Copy',
-    copied: 'Copied!',
-  },
-  zh: {
-    copy: '点击复制',
-    copied: '已复制!',
-  },
-};
-
-export interface HTMLDidAddressElement extends HTMLDivElement {
-  copy: () => void;
-  getEl: () => HTMLDivElement;
-}
-export interface IDidAddressProps extends BoxProps {
-  component?: React.ElementType;
-  size?: number;
-  copyable?: true | false;
-  // compact mode 下, hover 时会在 tooltip 中显示完整地址, showCopyButtonInTooltip = true 时会在完整地址后显示一个复制按钮
-  showCopyButtonInTooltip?: false | true;
-  content?: string;
-  inline?: false | true;
-  prepend?: ReactNode;
-  append?: ReactNode;
-  // 紧凑模式
-  compact?: false | true;
-  startChars?: number;
-  endChars?: number;
-  locale?: Locale;
-}
-
-/**
- * DidAddress 组件 (新版设计)
- *
- * - 样式调整
- * - click-to-copy 调整
- * - 长文本截断处理 (Ellipsis)
- * - 支持 inline 或 block 的显示方式
- * - 支持紧凑模式, 该模式下:
- *   - 占用宽度较小, 因此不考虑水平空间不够用的情况, 且忽略末尾省略号
- *   - 对于多层元素结构的 children, 保持元素结构, 将最内层 text 替换为 CompactText 组件
- *   - 为保证 copy 功能正常工作, 原 children 始终渲染, 但在紧凑式下会隐藏
- *   - 可配合 useMediaQuery 使用
- */
-function DidAddress({
-  ref = undefined,
-  ...props
-}: IDidAddressProps & {
-  ref?: React.Ref<unknown>;
-}) {
-  const {
-    component = 'span',
-    size = 0,
-    copyable = true,
-    showCopyButtonInTooltip = false,
-    children = null,
-    content = '',
-    prepend = null,
-    append = null,
-    compact = false,
-    startChars = 6,
-    endChars = 6,
-    locale: originalLocale = 'en',
-    ...rest
-  } = props;
-  let locale = originalLocale;
-  if (!translations[locale]) {
-    locale = 'en';
-  }
-
-  const [copied, setCopied] = useState(false);
-  const textRef = useRef<HTMLDivElement>(null);
-  const rootRef = useRef<any>(null);
-
-  const handleCopy = () => {
-    copy(content || textRef.current?.textContent || '');
-    setCopied(true);
-    // 恢复 copied 状态
-    setTimeout(() => {
-      setCopied(false);
-    }, 1500);
-  };
-  const onCopy = (e: any) => {
-    e.stopPropagation();
-    e.preventDefault();
-    handleCopy();
-  };
-  useImperativeHandle(
-    ref,
-    () =>
-      new Proxy(
-        {
-          copy: handleCopy,
-          getEl: () => rootRef.current,
-        },
-        {
-          get(target: any, key: string) {
-            return target[key] || rootRef.current?.[key];
-          },
-        }
-      )
-  );
-
-  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" sx={{ color: 'success.main' }} />
-          </Tooltip>
-        ) : (
-          /* title prop 直接加在 icon 上不生效 */
-          <CopyIcon className="did-address-copy" width="1em" height="1em" onClick={onCopy} />
-        )}
-      </span>
-    );
-  }
-
-  return (
-    <Root as={component} size={size} {...rest} ref={rootRef}>
-      {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;
-
-const Root = styled<any>(Box, { shouldForwardProp: (prop) => prop !== 'inline' })`
-  font-family: 'Ubuntu Mono', monospace;
-  && {
-    display: ${({ inline }: any) => (inline ? 'inline-flex' : 'flex')};
-    align-items: center;
-    max-width: 100%;
-    overflow: hidden;
-    color: #ccc;
-    font-size: ${(props: any) => getFontSize(props.size)};
-    font-weight: 400;
-
-    svg {
-      fill: currentColor;
-    }
-  }
-
-  .did-address-text {
-    color: ${({ theme }) => theme.palette.text.secondary};
-  }
-  /* 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: ${({ theme }) => theme.palette.text.secondary};
-    cursor: pointer;
-  }
-
-  /* link */
-  a {
-    color: ${({ theme }) => theme.palette.text.secondary};
-  }
-  &:hover a {
-    color: ${({ theme }) => theme.palette.text.primary};
-    text-decoration: underline;
-  }
-`;

package/src/Address/index.tsx

@@ -1,21 +0,0 @@
-import DidAddress, { IDidAddressProps } from './did-address';
-import ResponsiveDidAddress from './responsive-did-address';
-
-export interface IDidAddressWrapper extends IDidAddressProps {
-  responsive?: true | false;
-}
-
-function DidAddressWrapper({
-  ref = undefined,
-  responsive = true,
-  ...rest
-}: IDidAddressWrapper & {
-  ref?: React.Ref<unknown>;
-}) {
-  if (responsive) {
-    return <ResponsiveDidAddress {...rest} ref={ref} />;
-  }
-  return <DidAddress {...rest} ref={ref} />;
-}
-
-export default DidAddressWrapper;

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

@@ -1,154 +0,0 @@
-import { useDebounceFn, useLatest } from 'ahooks';
-import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Box } from '@mui/material';
-import { styled } from '../Theme';
-import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-address';
-import { getFontSize } from '../Util';
-
-/**
- * 根据父容器宽度自动切换 compact 模式
- *
- * 实现逻辑:
- * - DidAddress 外层包裹一个容器, 其宽度自动撑满父容器宽度 (即这个容器需要是块级元素或 100% 宽的 inline-block)
- * - DidAddress 本身以 inline 形式渲染 (方便探测 did-address 的 full-width)
- * - 组件 mounted 时记录 did address 的 full-width (非 compact 模式的宽度)
- * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
- */
-export default function ResponsiveDidAddress({
-  ref = undefined,
-  style = {},
-  className = undefined,
-  component = 'span',
-  size = 0,
-  ...rest
-}: IResponsiveDidAddressProps & {
-  ref?: React.Ref<unknown>;
-}) {
-  const [compact, setCompact] = useState(false);
-  const isCompact = useLatest(compact);
-  // did address 完整显示时的宽度
-  const [addressFullWidth, setAddressFullWidth] = useState<number | null | undefined>(null);
-  const [containerWidth, setContainerWidth] = useState<number | null | undefined>(null);
-  const [loading, setLoading] = useState(true);
-  const { run: delaySetLoadingFalse } = useDebounceFn(() => setLoading(false), {
-    wait: 50,
-  });
-  const containerRef = useRef<HTMLDivElement>(null);
-  const innerRef = useRef<HTMLDidAddressElement>(null);
-
-  useImperativeHandle(
-    ref,
-    () =>
-      new Proxy(
-        {},
-        {
-          get(target: any, key: keyof HTMLDidAddressElement) {
-            return innerRef.current?.[key];
-          },
-        }
-      )
-  );
-
-  // 存储完整显示时 address 组件的宽度
-  useEffect(() => {
-    const innerWidth = innerRef.current?.offsetWidth || 0;
-    let innerObserver: ResizeObserver | null = null;
-    let containerObserver: ResizeObserver | null = null;
-
-    // 初始化宽度
-    setAddressFullWidth(innerWidth);
-    setContainerWidth(containerRef.current?.offsetWidth);
-
-    // 由于自定义字体的缘故，innerRef 的初始宽度可能发生二次改变，使用 observer 监听捕获
-    innerObserver = new ResizeObserver(() => {
-      if (!isCompact.current && innerRef.current?.offsetWidth !== innerWidth) {
-        setAddressFullWidth(innerRef.current?.offsetWidth);
-        delaySetLoadingFalse();
-      }
-    });
-    containerObserver = new ResizeObserver(() => {
-      setContainerWidth(containerRef.current?.offsetWidth);
-    });
-
-    innerObserver.observe(innerRef.current!.getEl());
-    containerObserver.observe(containerRef.current!);
-    delaySetLoadingFalse();
-
-    return () => {
-      innerObserver?.disconnect();
-      containerObserver?.disconnect();
-    };
-    // 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}
-      size={size}
-      {...(component === 'span'
-        ? {}
-        : {
-            inline: rest.inline,
-          })}>
-      <StyledDidAddress
-        style={{
-          position: loading ? 'absolute' : 'static',
-          left: loading ? '-99999px' : 'auto',
-        }}
-        {...rest}
-        size={size}
-        component={component}
-        inline
-        compact={compact}
-        ref={innerRef}
-      />
-      {/* placeholder */}
-      {loading && <div style={{ width: '100%', height: `${(size || 16) * 1.5}px` }} />}
-    </Root>
-  );
-}
-
-export interface IResponsiveDidAddressProps extends IDidAddressProps {
-  style?: React.CSSProperties;
-  className?: string;
-  component?: React.ElementType;
-}
-
-type RootProps = {
-  size: number;
-  inline?: boolean;
-};
-
-const Root = styled(Box, { shouldForwardProp: (prop) => prop !== 'size' })<RootProps>`
-  display: block;
-  width: 100%; /* flex & column & align-items: flex-start 时, 块级元素不会自动铺满容器 */
-  font-size: ${({ size }) => getFontSize(size)};
-  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;
-  }
-`;

package/src/Alert/Alert.stories.jsx

@@ -1,100 +0,0 @@
-import Alert from '.';
-
-export default {
-  title: 'Deprecated/Alert',
-
-  parameters: {
-    readme: {
-      sidebar: '<!-- PROPS -->',
-    },
-  },
-};
-
-export function WithDifferentType() {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: '300px',
-        justifyContent: 'space-between',
-      }}>
-      <Alert type="error">Error message</Alert>
-      <Alert type="warning">Warning message</Alert>
-      <Alert type="success">Success message</Alert>
-      <Alert type="tip">Default tip</Alert>
-    </div>
-  );
-}
-
-WithDifferentType.storyName = 'with different type';
-
-export function WithDifferentVariant() {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: '300px',
-        justifyContent: 'space-between',
-      }}>
-      <Alert type="error" variant="icon">
-        Error message
-      </Alert>
-      <Alert type="warning" variant="border">
-        Warning message
-      </Alert>
-    </div>
-  );
-}
-
-WithDifferentVariant.storyName = 'with different variant';
-
-export function WithIcon() {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: '300px',
-        justifyContent: 'space-between',
-      }}>
-      <Alert type="error" showIcon>
-        Error message
-      </Alert>
-      <Alert type="warning" showIcon>
-        Warning message
-      </Alert>
-      <Alert type="success" showIcon>
-        Success message
-      </Alert>
-      <Alert type="tip" showIcon>
-        Default tip
-      </Alert>
-    </div>
-  );
-}
-
-WithIcon.storyName = 'with icon';
-
-export function WithDifferentMessage() {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: '300px',
-        justifyContent: 'space-between',
-      }}>
-      <Alert type="error">Error message</Alert>
-      <Alert type="error">
-        <ul>
-          <li>Error message 1</li>
-          <li>Error message 2</li>
-        </ul>
-      </Alert>
-    </div>
-  );
-}
-
-WithDifferentMessage.storyName = 'with different message';

package/src/Alert/index.jsx

@@ -1,130 +0,0 @@
-import PropTypes from 'prop-types';
-import { Typography } from '@mui/material';
-import { blueGrey } from '@mui/material/colors';
-import isUndefined from 'lodash/isUndefined';
-
-import Icon from '../Icon';
-import { mergeProps } from '../Util';
-import colors from '../Colors';
-import { styled } from '../Theme';
-import { withDeprecated } from '../Util/deprecate';
-
-const types = {
-  error: {
-    icon: 'exclamation-circle',
-    color: colors.error.main,
-    borderColor: '#e35b54',
-    backgroundColor: 'rgba(227, 91, 84, 0.2)',
-    variant: 'solid',
-  },
-  warning: {
-    icon: 'exclamation-triangle',
-    color: colors.warning.main,
-    borderColor: '#f7d040',
-    backgroundColor: 'rgba(247, 208, 64, 0.2)',
-    variant: 'solid',
-  },
-  success: {
-    icon: 'check-circle',
-    color: colors.success.main,
-    borderColor: '#89ddd9',
-    backgroundColor: 'rgba(137, 221, 217, 0.2)',
-  },
-  tip: {
-    icon: 'info-circle',
-    color: colors.grey[500],
-    borderColor: '#222222',
-    backgroundColor: '#EEEEEE',
-    variant: 'solid',
-  },
-};
-
-/**
- * Alert notification component
- * @typedef {{
- *  type?: 'error' | 'warning' | 'success' | 'tip';
- *  children: any;
- *  className?: string;
- *  style?: object | string;
- *  variant?: 'border' | 'icon';
- * } & import('react').ComponentPropsWithoutRef<"div"> } AlertProps
- */
-
-/**
- * Alert notification component
- * @param {AlertProps} props
- * @returns {JSX.Element}
- */
-function Alert({ ...rawProps }) {
-  const props = Object.assign({}, rawProps);
-  if (isUndefined(props.type)) {
-    props.type = 'tip';
-  }
-  if (isUndefined(props.className)) {
-    props.className = '';
-  }
-  if (isUndefined(props.style)) {
-    props.style = {};
-  }
-  if (isUndefined(props.variant)) {
-    props.variant = 'border';
-  }
-  /** @type {AlertProps} */
-  const newProps = mergeProps(props, Alert, ['style']);
-  const { type, children, style, className, variant, showIcon = false, ...rest } = newProps;
-  const { icon, color, backgroundColor, borderColor, variant: iconVariant } = types[type] || types.success;
-
-  /** @type {import('react').CSSProperties} */
-  const styles = Object.assign(
-    {
-      color: blueGrey[500],
-      backgroundColor: variant === 'border' ? backgroundColor : 'transparent',
-      borderLeft: variant === 'border' ? `5px solid ${borderColor}` : 'none',
-    },
-    style
-  );
-
-  return (
-    <Container {...rest} className={`alert alert--${type} alert--${variant} ${className}`.trim()} style={styles}>
-      {(variant === 'icon' || showIcon) && (
-        <Icon className="alert-icon" name={icon} size={24} color={color} variant={iconVariant} />
-      )}
-      <Typography component="div" className="alert-content">
-        {children}
-      </Typography>
-    </Container>
-  );
-}
-
-Alert.propTypes = {
-  type: PropTypes.oneOf(Object.keys(types)),
-  children: PropTypes.any.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  variant: PropTypes.oneOf(['border', 'icon']),
-};
-
-export default withDeprecated(Alert, { name: 'Alert', alternative: '@mui/material/Alert' });
-
-const Container = styled('div')`
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  margin: 0;
-  padding: 16px;
-  margin: 16px 0;
-
-  strong {
-    margin: 0 5px;
-  }
-
-  .alert-icon {
-    margin-right: 16px;
-  }
-
-  .alert-content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
-`;

package/src/AnimationWaiter/AnimationWaiter.stories.jsx

@@ -1,35 +0,0 @@
-import { Box } from '@mui/material';
-import AnimationWaiter from '.';
-import { ThemeProvider } from '../Theme';
-import { ThemeModeToggle } from '../Config';
-
-export { default as Basic } from './demo/basic';
-export { default as WithCustomMessages } from './demo/with-custom-messages';
-export { default as WithMoreMessages } from './demo/with-more-messages';
-export { default as Sizes } from './demo/sizes';
-export { default as WithTips } from './demo/with-tips';
-export { default as WithSpeed } from './demo/with-speed';
-export { default as WithMaybeDuration } from './demo/with-maybe-duration';
-
-export default {
-  title: 'Feedback/AnimationWaiter',
-  component: AnimationWaiter,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'AnimationWaiter is a loading component that provides feedback when the user is waiting for a long time to perform an operation.',
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <ThemeProvider prefer="system">
-        <Box sx={{ py: 1 }}>
-          <ThemeModeToggle />
-        </Box>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
-};