@arcblock/ux 3.4.15 → 3.5.1

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>
-    ),
-  ],
-};