@arcblock/ux 3.4.14 → 3.5.0

package/src/Header/responsive-header.tsx

@@ -1,145 +0,0 @@
-import { useState } from 'react';
-import { useCreation, useReactive } from 'ahooks';
-import { Menu as MenuIcon, Close as CloseIcon } from '@mui/icons-material';
-import { Button, Container, useMediaQuery, Drawer } from '@mui/material';
-import Header from './header';
-import { styled, useTheme } from '../Theme';
-import { type HeaderProps } from './header';
-
-export interface ResponsiveHeaderProps extends Omit<HeaderProps, 'children'> {
-  menu?: React.ReactNode;
-  children?: React.ReactNode | ((props: { isMobile: boolean; closeMenu: () => void }) => React.ReactNode);
-}
-
-/**
- * ResponsiveHeader
- * - 窄屏下显示 burge menu
- * - 窄屏下将 children 区域显示到 menu 中
- *
- * 注意: 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
- */
-function ResponsiveHeader({ prepend, children = null, ...rest }: ResponsiveHeaderProps) {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const _children =
-    typeof children === 'function' ? children({ isMobile, closeMenu: () => setDrawerOpen(false) }) : children;
-
-  // HACK: MUI 的 modal 只会对 body 元素设置防滚动样式，还需要对 html 元素进行设置防滚动样式
-  const htmlOverflowState = useReactive({
-    changed: false,
-    value: '',
-    priority: '',
-  });
-  useCreation(() => {
-    if (document.documentElement?.style) {
-      const clean = () => {
-        if (htmlOverflowState.changed) {
-          if (htmlOverflowState.value) {
-            document.documentElement.style.setProperty('overflow', htmlOverflowState.value, htmlOverflowState.priority);
-          } else {
-            document.documentElement.style.removeProperty('overflow');
-          }
-          htmlOverflowState.value = '';
-          htmlOverflowState.priority = '';
-          htmlOverflowState.changed = false;
-        }
-      };
-      if (drawerOpen) {
-        htmlOverflowState.changed = true;
-        htmlOverflowState.value = document.documentElement.style.getPropertyValue('overflow');
-        htmlOverflowState.priority = document.documentElement.style.getPropertyPriority('overflow');
-        document.documentElement.style.setProperty('overflow', 'revert', 'important');
-      } else {
-        clean();
-      }
-
-      return clean;
-    }
-    return () => {};
-  }, [drawerOpen]);
-
-  // 如果 children 没有值, 则使用普通的 Header 组件渲染 (此时并没有什么内容需要在 menu 中显示)
-  if (!children) {
-    return <Header prepend={prepend} {...rest} />;
-  }
-  return (
-    <Root
-      prepend={
-        prepend || (
-          <Button
-            sx={{ color: theme.palette.grey[500] }}
-            className="header-menu"
-            aria-label="header menu button"
-            onClick={() => setDrawerOpen(!drawerOpen)}>
-            {drawerOpen ? <CloseIcon /> : <MenuIcon />}
-          </Button>
-        )
-      }
-      {...rest}>
-      {!isMobile && _children}
-      {isMobile && (
-        <Drawer
-          open={drawerOpen}
-          onClose={() => setDrawerOpen(false)}
-          ModalProps={{
-            disablePortal: false,
-            keepMounted: true,
-            BackdropComponent: undefined,
-          }}
-          anchor="top"
-          sx={{
-            top: 64,
-            zIndex: theme.zIndex.appBar - 1,
-          }}
-          slotProps={{
-            paper: {
-              sx: {
-                top: 64,
-                bottom: 0,
-                boxShadow: 'none',
-                backgroundImage: 'none',
-                backgroundColor: theme.palette.background.paper,
-                '& .navmenu.navmenu--inline': {
-                  margin: 0,
-                  padding: 0,
-                },
-              },
-            },
-          }}>
-          <MenuPanel>{_children}</MenuPanel>
-        </Drawer>
-      )}
-    </Root>
-  );
-}
-
-const Root = styled(Header)`
-  .header-menu {
-    display: none;
-  }
-  ${(props) => props.theme.breakpoints.down('md')} {
-    .header-menu {
-      display: flex;
-      padding-left: 6px;
-      padding-right: 6px;
-      min-width: 0;
-      margin-left: -4px;
-      margin-right: 8px;
-    }
-  }
-`;
-
-const MenuPanel = styled(Container)`
-  padding-top: 8px;
-  padding-bottom: 16px;
-  .navmenu {
-    margin: 0 -16px;
-    .navmenu-root > .navmenu-item,
-    .navmenu-root > .navmenu-sub {
-      border: 0;
-    }
-  }
-`;
-
-export default ResponsiveHeader;

package/src/Icon/Icon.stories.jsx

@@ -1,45 +0,0 @@
-import Icon from '.';
-
-export default {
-  title: 'Deprecated/Icon',
-
-  parameters: {
-    readme: {
-      sidebar: '<!-- PROPS -->',
-    },
-  },
-};
-
-export function WithDifferentNames() {
-  return (
-    <div style={{ display: 'flex', width: '300px', justifyContent: 'space-between' }}>
-      <Icon name="box" variant="solid" />
-      <Icon name="cut" />
-      <Icon name="copy" />
-      <Icon name="file" />
-    </div>
-  );
-}
-
-WithDifferentNames.storyName = 'with different names';
-
-export function WithDifferentSizes() {
-  return (
-    <div style={{ display: 'flex', width: '300px', justifyContent: 'space-between' }}>
-      <Icon name="box" variant="solid" />
-      <Icon name="box" size={50} variant="solid" />
-    </div>
-  );
-}
-
-WithDifferentSizes.storyName = 'with different sizes';
-
-export function WithRounded() {
-  return (
-    <div style={{ display: 'flex', width: '300px', justifyContent: 'space-between' }}>
-      <Icon name="box" rounded variant="solid" />
-    </div>
-  );
-}
-
-WithRounded.storyName = 'with rounded';

package/src/Icon/image.tsx

@@ -1,53 +0,0 @@
-import Img, { type ImgProps } from '../Img';
-import { styled } from '../Theme';
-
-export interface ImageIconProps extends Omit<ImgProps, 'size' | 'src'> {
-  name: string;
-  size?: number;
-  color?: string;
-  alt?: string;
-  prefix?: string;
-  showBadge?: false | true;
-}
-
-export default function ImageIcon({
-  name,
-  size = 36,
-  alt = '',
-  color = '#000000',
-  prefix = '/images',
-  showBadge = false,
-  style = {},
-  ...rest
-}: ImageIconProps) {
-  const src = `${prefix}/${name}-${color.replace(/^#/, '')}.png`;
-  return (
-    <Div style={{ width: size, height: size }}>
-      <Img
-        width={size}
-        height={size}
-        alt={alt || name}
-        src={src}
-        style={Object.assign({ width: size }, style)}
-        {...rest}
-      />
-      {showBadge && <i className="badge-point" />}
-    </Div>
-  );
-}
-
-const Div = styled('div')`
-  position: relative;
-  .badge-point {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    border-radius: 10px;
-    background-color: #fe4e44;
-    right: -2px;
-    top: 0;
-    box-shadow:
-      0px 1px 4px rgba(0, 0, 0, 0.3),
-      0px 0px 20px rgba(0, 0, 0, 0.1);
-  }
-`;

package/src/Icon/index.tsx

@@ -1,63 +0,0 @@
-import { Icon as IconifyIcon } from '@iconify/react';
-
-import colors from '../Colors';
-import { styled } from '../Theme';
-import { withDeprecated } from '../Util/deprecate';
-
-export interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
-  name: string;
-  color?: string;
-  size?: number;
-  variant?: 'light' | 'regular' | 'solid';
-  rounded?: false | true;
-  forwardedRef?: React.Ref<unknown>;
-}
-
-// eslint-disable-next-line react/prop-types
-function Icon({
-  name,
-  color = colors.grey[900],
-  size = 24,
-  variant = 'regular',
-  rounded = false,
-  className = '',
-  forwardedRef = undefined,
-}: IconProps) {
-  const iconName = variant === 'solid' ? `fa-solid:${name}` : `fa-regular:${name}`;
-  const content = <IconifyIcon icon={iconName} color={color} width={size} height={size} className={className} />;
-  if (rounded) {
-    return (
-      <Span ref={forwardedRef as React.Ref<HTMLSpanElement>} size={size} color={color} className={className}>
-        {content}
-      </Span>
-    );
-  }
-  return content;
-}
-
-const Span = styled('span')<{ size: number; color: string }>`
-  width: ${(props) => props.size * 2}px;
-  height: ${(props) => props.size * 2}px;
-  border-radius: 50%;
-  border: 1px solid ${(props) => props.color};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .fa,
-  .fas,
-  .fal,
-  .far {
-    line-height: ${(props) => props.size}px;
-  }
-`;
-
-export default withDeprecated(
-  ({
-    ref,
-    ...props
-  }: IconProps & {
-    ref?: React.Ref<unknown>;
-  }) => <Icon {...props} forwardedRef={ref} />,
-  { name: 'Icon', alternative: 'SVG icons' }
-);

package/src/Img/Img.stories.jsx

@@ -1,17 +0,0 @@
-import Basic from './demo/basic';
-
-export default {
-  title: 'Data Display/Img',
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'The Image component allows you to place an image on your page. It supports fixed size, aspect ratio, lazy loading and fallback image.',
-      },
-    },
-  },
-};
-
-Basic.storyName = 'Img';
-
-export { Basic };

package/src/Img/index.jsx

@@ -1,258 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
-import { useInView } from 'react-intersection-observer';
-import WarningRoundedIcon from '@iconify-icons/material-symbols/warning-rounded';
-import ImageRoundedIcon from '@iconify-icons/material-symbols/image-rounded';
-import { Icon } from '@iconify/react';
-import { Box } from '@mui/material';
-import noop from 'lodash/noop';
-import { mergeSx } from '../Util/style';
-import { BLOCKLET_SERVICE_PATH_PREFIX } from '../Util/constant';
-
-const getProxyImageUrl = (url) => {
-  if (!url) return '';
-
-  try {
-    // 检查是否是一个有效的URL
-    const urlObj = new URL(url);
-
-    // 检查协议是否是https
-    if (urlObj.protocol !== 'https:') {
-      console.warn('Image URL must use HTTPS protocol:', url);
-      return '';
-    }
-
-    // 返回代理URL
-    return `${BLOCKLET_SERVICE_PATH_PREFIX}/proxy?url=${encodeURIComponent(url)}`;
-  } catch (error) {
-    // URL construction failed, indicating invalid URL format
-    console.warn('Invalid image URL format:', url, error);
-    return '';
-  }
-};
-
-/**
- * @typedef {Object} ImgExProps
- * @property {string} src - required
- * @property {string} [alt]
- * @property {string} [size='cover']
- * @property {string} [position='top center']
- * @property {object} [style]
- * @property {number} [ratio=1]
- * @property {string} [repeat='no-repeat']
- * @property {number} [width]
- * @property {number} [height]
- * @property {boolean} [lazy=true]
- * @property {string} [placeholder]
- * @property {string} [fallback]
- * @property {boolean} [useProxyFallback=false] - 是否使用代理 fallback, 用于解决 CSP 的问题
- * @property {string} [className='']
- * @property {function} [onError=() => {}]
- * @property {function} [onSuccess=() => {}]
- */
-
-/**
- * @typedef {ImgExProps & import('@mui/material').BoxProps} ImgProps
- */
-
-const PREFIX = 'Img';
-
-const classes = {
-  root: `${PREFIX}-root`,
-};
-
-/**
- *
- * @param {ImgProps} props
- * @returns {React.ReactComponentElement}
- */
-function Img({
-  lazy = true,
-  width = null,
-  height = null,
-  repeat = 'no-repeat',
-  ratio = 1,
-  alt = null,
-  size = 'cover',
-  position = 'top center',
-  src,
-  useProxyFallback = false, // 是否使用代理 fallback, 用于解决 CSP 的问题
-  placeholder = null,
-  fallback = null,
-  style = null,
-  className = '',
-  onError = noop,
-  onSuccess = noop,
-  ...rest
-}) {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const [ref, inView] = lazy ? useInView({ threshold: 0, triggerOnce: true }) : [null, true];
-
-  const [imgState, setImgState] = useState('init');
-  const [fallbackError, setFallbackError] = useState(false);
-
-  const fallbackSrc = useMemo(() => {
-    if (fallback) {
-      return fallback;
-    }
-    if (useProxyFallback && src) {
-      return getProxyImageUrl(src);
-    }
-    return fallback;
-  }, [src, useProxyFallback, fallback]);
-
-  const actualSrc = useMemo(() => {
-    switch (imgState) {
-      case 'init':
-      case 'loading':
-        return placeholder;
-      case 'error':
-        return fallbackError ? null : fallbackSrc;
-      case 'loaded':
-        return src;
-      default:
-        return null;
-    }
-  }, [placeholder, fallbackSrc, src, imgState, fallbackError]);
-
-  const actualRatio = width && height ? (100 * height) / width : ratio * 100;
-
-  const mergedStyle = useMemo(
-    () => ({
-      backgroundImage: actualSrc ? `url(${actualSrc})` : '',
-      backgroundPosition: position,
-      backgroundSize: size,
-      backgroundRepeat: repeat,
-      paddingTop: `${actualRatio}%`,
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [actualSrc, position, size, imgState]
-  );
-
-  /**
-   * @type {CSSStyleDeclaration}
-   */
-  const outerStyle = {
-    ...style,
-    display: 'inline-block',
-    width: width ? `${width}px` : '100%',
-  };
-
-  function loadImg() {
-    const img = new Image();
-    img.src = src;
-    setImgState('loading');
-    setFallbackError(false);
-    img.onload = () => {
-      setImgState('loaded');
-      onSuccess();
-    };
-    img.onerror = () => {
-      setImgState('error');
-    };
-  }
-
-  useEffect(() => {
-    if (inView) loadImg();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inView]);
-
-  // 处理 fallback 加载
-  useEffect(() => {
-    if (imgState === 'error' && fallbackSrc && !fallbackError) {
-      const fallbackImg = new Image();
-      fallbackImg.src = fallbackSrc;
-      fallbackImg.onload = () => {
-        // fallback 加载成功，保持在 error 状态但显示 fallback
-      };
-      fallbackImg.onerror = (err) => {
-        // fallback 也加载失败
-        setFallbackError(true);
-        if (imgState === 'error') {
-          onError(err);
-        }
-      };
-    }
-  }, [imgState, fallbackSrc, fallbackError, onError]);
-
-  return (
-    // paddingTop 要求元素本身的宽度为 100%，所以只能加一个外层元素去限制宽度
-    <Box
-      data-id="2"
-      ref={ref}
-      style={outerStyle}
-      className="arcblock_ux_img-wrapper"
-      {...rest}
-      sx={mergeSx(
-        {
-          [`& .${classes.root}`]: {
-            position: 'relative',
-            overflow: 'hidden',
-            '& .image--state, & .image--img': {
-              minWidth: '100%',
-              minHeight: '100%',
-              position: 'absolute',
-              top: 0,
-              left: '50%',
-              transform: 'translateX(-50%)',
-            },
-            '& .image--state': {
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              alignItems: 'center',
-              color: '#999',
-              background: '#eee',
-              width: '100%',
-              height: '100%',
-            },
-            '& .image--img': {
-              opacity: 0,
-              visibility: 'hidden',
-            },
-            '& .image--icon': {
-              fontSize: 30,
-              maxWidth: '80%',
-              maxHeight: '80%',
-            },
-          },
-        },
-        rest.sx
-      )}>
-      <div className={`image ${className} ${classes.root}`} style={mergedStyle}>
-        {(fallbackError || (!fallbackSrc && imgState === 'error')) && (
-          <div className="image--state" title="Image load error">
-            <Icon icon={WarningRoundedIcon} className="image--icon" />
-          </div>
-        )}
-        {!placeholder && imgState === 'loading' && (
-          <div className="image--state" title="loading image">
-            <Icon icon={ImageRoundedIcon} className="image--icon" />
-          </div>
-        )}
-        {imgState === 'loaded' && <img className="image--img" src={src} alt={alt} />}
-      </div>
-    </Box>
-  );
-}
-
-Img.propTypes = {
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string,
-  size: PropTypes.string,
-  position: PropTypes.string,
-  style: PropTypes.object,
-  ratio: PropTypes.number,
-  repeat: PropTypes.string,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  lazy: PropTypes.bool,
-  placeholder: PropTypes.string,
-  fallback: PropTypes.string,
-  className: PropTypes.string,
-  onError: PropTypes.func,
-  onSuccess: PropTypes.func,
-  useProxyFallback: PropTypes.bool,
-};
-
-export default Img;

package/src/InfoRow/InfoRow.stories.jsx

@@ -1,14 +0,0 @@
-export { default as DifferentWidth } from './demo/different-width';
-export { default as CustomValueComponent } from './demo/custom-value-component';
-export { default as CustomNameComponent } from './demo/custom-name-component';
-
-export default {
-  title: 'Data Display/InfoRow',
-  parameters: {
-    docs: {
-      description: {
-        component: 'InfoRow is typically used to display data with key-value pairs, such as a product specification.',
-      },
-    },
-  },
-};

package/src/InfoRow/index.tsx

@@ -1,91 +0,0 @@
-import camelCase from 'lodash/camelCase';
-import upperFirst from 'lodash/upperFirst';
-import { Typography } from '@mui/material';
-
-import { styled } from '../Theme';
-
-export interface InfoRowProps {
-  name: React.ReactNode;
-  nameFormatter?: (name: React.ReactNode) => React.ReactNode;
-  layout?: 'horizontal' | 'vertical';
-  children: React.ReactNode;
-  valueComponent?: React.ElementType;
-  nameWidth?: number;
-}
-
-function InfoRow({
-  name,
-  nameFormatter = (rawName) => {
-    if (typeof rawName === 'string') {
-      return rawName
-        .split(' ')
-        .map((x: any) => upperFirst(camelCase(x)))
-        .join(' ');
-    }
-
-    return rawName;
-  },
-  layout = 'horizontal',
-  children,
-  valueComponent = 'div',
-  nameWidth = 90,
-  ...rest
-}: InfoRowProps) {
-  return (
-    <Container layout={layout} width={nameWidth} {...rest}>
-      <Typography color="textSecondary" className="info-row__name">
-        {nameFormatter(name)}
-      </Typography>
-
-      {children && (
-        <Typography color="textPrimary" component={valueComponent} className="info-row__value">
-          {children}
-        </Typography>
-      )}
-    </Container>
-  );
-}
-
-type ContainerProps = {
-  layout: 'horizontal' | 'vertical';
-  width: number;
-};
-
-const Container = styled('div')<ContainerProps>`
-  display: flex;
-  flex-direction: ${(props) => (props.layout === 'vertical' ? 'column' : 'row')};
-  justify-content: flex-start;
-  align-items: ${(props) => (props.layout === 'vertical' ? 'flex-start' : 'center')};
-  margin-bottom: 16px;
-
-  .info-row__name {
-    width: ${(props) => props.width}px;
-    margin-right: ${(props) => (props.layout === 'vertical' ? '0' : '8px')};
-    margin-bottom: ${(props) => (props.layout === 'vertical' ? '8px' : '0')};
-    text-transform: capitalize;
-  }
-
-  .info-row__value {
-    flex: 1;
-    overflow: auto;
-    word-wrap: break-word;
-    font-weight: 500;
-  }
-
-  @media (max-width: ${(props) => props.theme.breakpoints.values.md}px) {
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    .info-row__name {
-      font-weight: bold;
-    }
-
-    .info-row__value {
-      width: 100%;
-      font-size: 12px;
-      margin-top: 8px;
-    }
-  }
-`;
-
-export default InfoRow;