@arcblock/ux 3.4.14 → 3.5.0

package/src/Spinner/Spinner.stories.jsx

@@ -1,98 +0,0 @@
-import { Box } from '@mui/material';
-import Spinner from '.';
-
-export default {
-  title: 'Deprecated/Spinner',
-};
-
-export function Default() {
-  return (
-    <Box
-      sx={{
-        width: 300,
-        height: 300,
-        border: 1,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <Spinner />
-    </Box>
-  );
-}
-
-Default.storyName = 'default';
-
-export function CustomColor() {
-  return (
-    <Box
-      sx={{
-        p: 2,
-      }}>
-      <h5>color="primary"</h5>
-      <Box
-        sx={{
-          p: 4,
-        }}>
-        <Spinner color="primary" />
-      </Box>
-      <h5>color="secondary"</h5>
-      <Box
-        sx={{
-          p: 4,
-        }}>
-        <Spinner color="secondary" />
-      </Box>
-      <h5>color="inherit"</h5>
-      <Box
-        sx={{
-          p: 4,
-          color: 'blue',
-        }}>
-        <Spinner color="inherit" />
-      </Box>
-      <h5>style=&#123;&#123; color: '#128323' &#125;&#125;</h5>
-      <Box
-        sx={{
-          p: 4,
-        }}>
-        <Spinner style={{ color: '#128323' }} />
-      </Box>
-    </Box>
-  );
-}
-
-CustomColor.storyName = 'custom color';
-
-export function CustomSize() {
-  return (
-    <Box
-      sx={{
-        p: 2,
-      }}>
-      <h5>default: size=40</h5>
-      <Box
-        sx={{
-          p: 4,
-        }}>
-        <Spinner />
-      </Box>
-      <h5>size=12</h5>
-      <Box
-        sx={{
-          p: 4,
-        }}>
-        <Spinner size={12} />
-      </Box>
-      <h5>size: [12, 8] (Compatible with the old API)</h5>
-      <Box
-        sx={{
-          p: 4,
-        }}>
-        <Spinner size={[12, 8]} />
-      </Box>
-    </Box>
-  );
-}
-
-CustomSize.storyName = 'custom size';

package/src/Spinner/index.tsx

@@ -1,20 +0,0 @@
-import { CircularProgress, type CircularProgressProps } from '@mui/material';
-import { withDeprecated } from '../Util/deprecate';
-
-export interface SpinnerProps extends Omit<CircularProgressProps, 'size'> {
-  /** 之前 size prop 是 array 类型, 需要与 CircularProgress#size 兼容 */
-  size?: number | [number, number];
-}
-
-/** 之前的 Spinner 实现由内外 2 个环构成, 现在改为基于 @mui/material/CircularProgress 的实现 */
-function Spinner({ ...props }: SpinnerProps) {
-  const _props = { ...props } as CircularProgressProps;
-
-  // 兼容之前的 size prop (设置外圈/内圈的尺寸)
-  if (_props.size && Array.isArray(props.size)) {
-    [_props.size] = props.size;
-  }
-  return <CircularProgress {..._props} />;
-}
-
-export default withDeprecated(Spinner, { name: 'Spinner', alternative: '@mui/material/CircularProgress' });

package/src/SplitButton/SplitButton.stories.jsx

@@ -1,32 +0,0 @@
-import { Box } from '@mui/material';
-
-import SplitButton from './index';
-import Basic from './demo/basic';
-import ThemeProvider from '../Theme/theme-provider';
-import ThemeModeToggle from '../Config/theme-mode-toggle';
-
-export default {
-  title: 'Basic/SplitButton',
-  component: SplitButton,
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=768%3A999',
-    },
-  },
-  decorators: [
-    (Story) => (
-      <ThemeProvider prefer="system">
-        <Box sx={{ py: 1 }}>
-          <ThemeModeToggle />
-        </Box>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
-};
-
-// single story hoisting
-Basic.storyName = 'SplitButton';
-
-export { Basic };

package/src/SplitButton/index.tsx

@@ -1,116 +0,0 @@
-import React, { useState, useRef, isValidElement } from 'react';
-import { ExpandMore } from '@mui/icons-material';
-import {
-  Popper,
-  Paper,
-  ClickAwayListener,
-  MenuList,
-  MenuItem,
-  MenuItemProps,
-  ButtonGroup,
-  ButtonGroupProps,
-  Button,
-  ButtonProps,
-} from '@mui/material';
-import noop from 'lodash/noop';
-
-import { styled } from '../Theme';
-import useClickAway from './useClickAway';
-
-export interface SplitButtonProps extends Omit<ButtonGroupProps, 'children'> {
-  menu?:
-    | React.ReactElement<MenuItemProps, typeof MenuItem>
-    | React.ReactElement<MenuItemProps, typeof MenuItem>[]
-    | MenuItemProps[];
-  children?: React.ReactNode | (() => React.ReactNode);
-  onClick?: () => void;
-  menuButtonProps?: ButtonProps;
-}
-
-export default function SplitButton({ ...props }: SplitButtonProps) {
-  const {
-    size = 'medium',
-    color = 'primary',
-    menu = [],
-    children = null,
-    variant = 'contained',
-    onClick = noop,
-    menuButtonProps = {},
-    ...rest
-  } = props;
-
-  const [open, setOpen] = useState(false);
-  const anchorRef = useRef<HTMLDivElement | null>(null);
-  // ClickAwayListener 只会监听事件的冒泡阶段，这会导致如果其他事件禁用了冒泡，那么下拉菜单将无法隐藏
-  // 所以定义一个 ref 来监听事件的捕获阶段
-  const paperRef = useRef<HTMLDivElement | null>(null);
-  const menuItems = Array.isArray(menu)
-    ? // eslint-disable-next-line react/no-array-index-key
-      menu.map((item, index) => (isValidElement(item) ? item : <MenuItem {...item} key={index} />))
-    : menu;
-
-  const onToggle = () => {
-    setOpen((prevOpen) => !prevOpen);
-  };
-
-  const handleClose = (e: MouseEvent | TouchEvent) => {
-    if (anchorRef.current && anchorRef.current.contains(e.target as HTMLElement)) {
-      return;
-    }
-    setOpen(false);
-  };
-
-  useClickAway(paperRef as React.RefObject<HTMLElement>, handleClose);
-
-  // 点击 item 后收起下拉菜单, 如果想要点击 action 后不收起下拉菜单, 可以在 item#onClick 时调用 e.stopPropagation()
-  const handleItemClick: React.MouseEventHandler<HTMLUListElement> = (e) => {
-    if ((e.target as HTMLElement).closest('.MuiMenuItem-root')) {
-      setOpen(false);
-    }
-  };
-
-  return (
-    <>
-      <StyledButtonGroup variant={variant} size={size} color={color} ref={anchorRef} {...rest}>
-        {typeof children === 'function' ? (
-          children()
-        ) : (
-          <Button onClick={onClick} color={color}>
-            {children}
-          </Button>
-        )}
-        <Button onClick={onToggle} color={color} {...menuButtonProps} aria-label="more functions">
-          <ExpandMore />
-        </Button>
-      </StyledButtonGroup>
-      <StyledPopper open={open} anchorEl={anchorRef.current} placement="bottom-end" disablePortal={false}>
-        <Paper ref={paperRef}>
-          <ClickAwayListener onClickAway={handleClose}>
-            <MenuList onClick={handleItemClick}>{menuItems}</MenuList>
-          </ClickAwayListener>
-        </Paper>
-      </StyledPopper>
-    </>
-  );
-}
-
-SplitButton.Item = MenuItem;
-
-const StyledButtonGroup = styled(ButtonGroup)`
-  > .MuiButtonBase-root:last-of-type {
-    min-width: 2em;
-    padding-left: 0;
-    padding-right: 0;
-  }
-`;
-
-const StyledPopper = styled(Popper)`
-  z-index: ${(props) => props.theme.zIndex.tooltip};
-  .MuiList-root {
-    padding: 4px 0;
-  }
-  .MuiListItem-root {
-    padding-top: 4px;
-    padding-bottom: 4px;
-  }
-`;

package/src/SplitButton/useClickAway.tsx

@@ -1,24 +0,0 @@
-import React, { useEffect } from 'react';
-
-// 监听事件的捕获阶段，用于 ClickAwayListener 无法监听的事件
-function useClickAway(ref: React.RefObject<HTMLElement> | null, onClickAway: (event: MouseEvent) => void) {
-  useEffect(() => {
-    function handleClick(event: MouseEvent) {
-      if (!ref || !ref.current) return;
-
-      // 如果点击事件目标在 menu 元素内，阻止菜单关闭
-      if (ref.current.contains(event.target as Node)) {
-        return;
-      }
-
-      onClickAway(event);
-    }
-
-    document.addEventListener('click', handleClick, true);
-    return () => {
-      document.removeEventListener('click', handleClick, true);
-    };
-  }, [ref, onClickAway]);
-}
-
-export default useClickAway;

package/src/Success/index.tsx

@@ -1,175 +0,0 @@
-import { Box, useTheme } from '@mui/material';
-
-export interface SuccessProps {
-  size?: number;
-  backgroundColor?: string;
-  borderWidth?: number;
-}
-
-// FIXME: @zhanghan 目前无法适配各种 size，后续优化
-export default function Success({ size = 64, backgroundColor = undefined, borderWidth = 4 }: SuccessProps) {
-  const { palette } = useTheme();
-  const contentSize = size - borderWidth * 2;
-  const _backgroundColor = backgroundColor || palette.background.default;
-
-  return (
-    <Box
-      className="check-icon"
-      sx={{
-        width: contentSize,
-        height: contentSize,
-        position: 'relative',
-        borderRadius: '100%',
-        '&, *, *::before, *::after': {
-          boxSizing: 'content-box !important',
-        },
-        // 转圈边框的颜色
-        border: (theme) => `${borderWidth}px solid ${theme.palette.success.light}`,
-        '&::before, &::after': {
-          content: '""',
-          height: '125%',
-          position: 'absolute',
-          background: _backgroundColor,
-          transform: 'rotate(-45deg)',
-        },
-        '&::before': {
-          top: `${borderWidth / 2 + 1}px`,
-          left: `-${borderWidth / 2}px`,
-          width: `calc(32.5% + ${borderWidth}px)`,
-          transformOrigin: '100% 50%',
-          borderRadius: '100% 0 0 100%',
-        },
-        '&::after': {
-          top: 0,
-          left: '37.5%',
-          width: `calc(70% + ${borderWidth}px)`,
-          transformOrigin: '0 50%',
-          borderRadius: '0 100% 100% 0',
-          animation: 'rotate-circle 4.25s ease-in',
-        },
-        '.icon-line': {
-          height: `${borderWidth + 1}px`,
-          // 对勾的颜色
-          backgroundColor: (theme) => theme.palette.success.light,
-          display: 'block',
-          borderRadius: '100vw',
-          position: 'absolute',
-          zIndex: 10,
-        },
-        '@keyframes rotate-circle': {
-          '0%': {
-            transform: 'rotate(-45deg)',
-          },
-          '5%': {
-            transform: 'rotate(-45deg)',
-          },
-          '12%': {
-            transform: 'rotate(-405deg)',
-          },
-          '100%': {
-            transform: 'rotate(-405deg)',
-          },
-        },
-      }}>
-      <Box
-        component="span"
-        className="icon-line line-tip"
-        sx={{
-          top: '57.5%',
-          left: '17.5%',
-          width: '31.25%',
-          transform: 'rotate(45deg)',
-          animation: 'icon-line-tip 0.75s',
-          '@keyframes icon-line-tip': {
-            '0%': {
-              width: '0',
-              left: '1px',
-              top: '23.75%',
-            },
-            '54%': {
-              width: '0',
-              left: '1px',
-              top: '23.75%',
-            },
-            '70%': {
-              width: '62.5%',
-              left: '-10%',
-              top: '46.25%',
-            },
-            '84%': {
-              width: '21.25%',
-              left: '26.25%',
-              top: '60%',
-            },
-            '100%': {
-              width: '31.25',
-              left: '17.5%',
-              top: '56.25%',
-            },
-          },
-        }}
-      />
-      <Box
-        component="span"
-        className="icon-line line-long"
-        sx={{
-          top: '47.5%',
-          right: '10%',
-          width: '58.75%',
-          transform: 'rotate(-45deg)',
-          animation: 'icon-line-long 0.75s',
-          '@keyframes icon-line-long': {
-            '0%': {
-              width: '0',
-              right: '57.5%',
-              top: '67.5%',
-            },
-            '65%': {
-              width: '0',
-              right: '57.5%',
-              top: '67.5%',
-            },
-            '84%': {
-              width: '68.75%',
-              right: '0px',
-              top: '43.75%',
-            },
-            '100%': {
-              width: '58.75%',
-              right: '10%',
-              top: '47.5%',
-            },
-          },
-        }}
-      />
-      <Box
-        className="icon-circle"
-        sx={{
-          top: `-${borderWidth}px`,
-          left: `-${borderWidth}px`,
-          zIndex: 10,
-          width: contentSize,
-          height: contentSize,
-          borderRadius: '100%',
-          position: 'absolute',
-          boxSizing: 'contentBox',
-          // 圆环的颜色
-          border: `${borderWidth}px solid rgba(76, 175, 80, 0.63)`,
-        }}
-      />
-      <Box
-        className="icon-fix"
-        sx={{
-          top: `calc(8% - ${Math.sqrt(borderWidth)}px)`,
-          width: borderWidth + 1,
-          left: `calc(32% - ${Math.sqrt(borderWidth)}px)`,
-          zIndex: 1,
-          height: contentSize + borderWidth * 2,
-          position: 'absolute',
-          transform: 'rotate(-45deg)',
-          backgroundColor: _backgroundColor,
-        }}
-      />
-    </Box>
-  );
-}

package/src/Switch/Switch.stories.jsx

@@ -1,16 +0,0 @@
-import Basic from './demo/basic';
-
-export default {
-  title: 'Basic/Switch',
-  parameters: {
-    docs: {
-      description: {
-        component: 'A iOS-styled Swtich component.',
-      },
-    },
-  },
-};
-
-Basic.storyName = 'Switch';
-
-export { Basic };

package/src/Switch/index.jsx

@@ -1,79 +0,0 @@
-import PropTypes from 'prop-types';
-import { FormControlLabel, Switch as MuiSwitch } from '@mui/material';
-import { styled } from '../Theme';
-
-// 参考: https://mui.com/material-ui/react-switch/#customization
-const IOSSwitch = styled((props) => <MuiSwitch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />)(
-  ({ theme }) => ({
-    width: 42,
-    height: 26,
-    padding: 0,
-    '& .MuiSwitch-switchBase': {
-      padding: 0,
-      margin: 2,
-      transitionDuration: '300ms',
-      '&.Mui-checked': {
-        transform: 'translateX(16px)',
-        color: '#fff',
-        '& + .MuiSwitch-track': {
-          backgroundColor: theme.palette.primary.main,
-          opacity: 1,
-          border: 0,
-        },
-        '&.Mui-disabled + .MuiSwitch-track': {
-          opacity: 0.5,
-        },
-      },
-      '&.Mui-focusVisible .MuiSwitch-thumb': {
-        color: theme.palette.primary.main,
-        border: '6px solid #fff',
-      },
-      '&.Mui-disabled .MuiSwitch-thumb': {
-        color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600],
-      },
-      '&.Mui-disabled + .MuiSwitch-track': {
-        opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
-      },
-    },
-    '& .MuiSwitch-thumb': {
-      boxSizing: 'border-box',
-      width: 22,
-      height: 22,
-    },
-    '& .MuiSwitch-track': {
-      borderRadius: 26 / 2,
-      backgroundColor: theme.palette.grey[200],
-      opacity: 1,
-      transition: theme.transitions.create(['background-color'], {
-        duration: 500,
-      }),
-    },
-  })
-);
-
-/**
- * Switch 组件 Props
- * @typedef {{
- *  labelProps?: import('@mui/material').FormControlLabelProps;
- * } & import('@mui/material').SwitchProps } SwitchProps
- */
-
-/**
- * 抽取 blocklet server 中使用的 iOS 风格的 Switch,
- * 该组件把 FormControlLabel 和 MuiSwitch 组合在一起,
- * 兼容 mui Switch props, 使用 labelProps 控制 FormControlLabel
- * @param {SwitchProps} props
- * @returns {JSX.Element}
- */
-function Switch({ labelProps = null, ...rest }) {
-  if (labelProps) {
-    return <FormControlLabel control={<IOSSwitch {...rest} />} {...labelProps} />;
-  }
-  return <IOSSwitch {...rest} />;
-}
-
-Switch.propTypes = {
-  labelProps: PropTypes.object,
-};
-
-export default Switch;

package/src/Tabs/Tabs.stories.jsx

@@ -1,18 +0,0 @@
-import Basic from './demo/basic';
-import IconPosition from './demo/iconPosition';
-
-export default {
-  title: 'Navigation/Tabs',
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'The Tabs component allows content authors to organize their content into various views. Users can navigate to different views by switching between tabs.',
-      },
-    },
-  },
-};
-
-Basic.storyName = 'Tabs';
-
-export { Basic, IconPosition };