@arcblock/ux 2.9.91 → 2.10.0

package/es/Success/index.js

@@ -1,175 +0,0 @@
-import PropTypes from 'prop-types';
-import { Box } from '@mui/material';
-
-// FIXME: @zhanghan 目前无法适配各种 size，后续优化
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function Success({
-  size,
-  backgroundColor,
-  borderWidth
-}) {
-  const contentSize = size - borderWidth * 2;
-  return /*#__PURE__*/_jsxs(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.main}`,
-      '&::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.main,
-        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)'
-        }
-      }
-    },
-    children: [/*#__PURE__*/_jsx(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%'
-          }
-        }
-      }
-    }), /*#__PURE__*/_jsx(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%'
-          }
-        }
-      }
-    }), /*#__PURE__*/_jsx(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.5)`
-      }
-    }), /*#__PURE__*/_jsx(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
-      }
-    })]
-  });
-}
-Success.propTypes = {
-  size: PropTypes.number,
-  borderWidth: PropTypes.number,
-  backgroundColor: PropTypes.string
-};
-Success.defaultProps = {
-  size: 64,
-  borderWidth: 4,
-  backgroundColor: 'white'
-};

package/es/Switch/index.js

@@ -1,96 +0,0 @@
-import PropTypes from 'prop-types';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import MuiSwitch from '@mui/material/Switch';
-import { styled } from '../Theme';
-
-// 参考: https://mui.com/material-ui/react-switch/#customization
-import { jsx as _jsx } from "react/jsx-runtime";
-const IOSSwitch = styled(props => /*#__PURE__*/_jsx(MuiSwitch, {
-  focusVisibleClassName: ".Mui-focusVisible",
-  disableRipple: true,
-  ...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.mode === 'dark' ? '#2ECA45' : '#65C466',
-        opacity: 1,
-        border: 0
-      },
-      '&.Mui-disabled + .MuiSwitch-track': {
-        opacity: 0.5
-      }
-    },
-    '&.Mui-focusVisible .MuiSwitch-thumb': {
-      color: '#33cf4d',
-      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.mode === 'light' ? '#E9E9EA' : '#39393D',
-    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,
-  ...rest
-}) {
-  if (labelProps) {
-    return /*#__PURE__*/_jsx(FormControlLabel, {
-      control: /*#__PURE__*/_jsx(IOSSwitch, {
-        ...rest
-      }),
-      ...labelProps
-    });
-  }
-  return /*#__PURE__*/_jsx(IOSSwitch, {
-    ...rest
-  });
-}
-Switch.propTypes = {
-  labelProps: PropTypes.object
-};
-Switch.defaultProps = {
-  labelProps: null
-};
-export default Switch;

package/es/Tabs/index.js

@@ -1,214 +0,0 @@
-import PropTypes from 'prop-types';
-import { Tabs as MuiTabs, Tab as MuiTab } from '@mui/material';
-import { temp as colors } from '../Colors';
-import { styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-const PREFIX = 'index';
-const classes = {
-  tabs: `${PREFIX}-tabs`,
-  tab: `${PREFIX}-tab`
-};
-const StyledMuiTabs = styled(MuiTabs)(({
-  theme
-}) => ({
-  [`& .${classes.tabs}`]: {},
-  [`& .${classes.tab}`]: {
-    fontSize: '0.875rem',
-    [theme.breakpoints.up('md')]: {
-      fontSize: '1rem'
-    }
-  }
-}));
-function CardTabs({
-  tabs,
-  current,
-  onChange,
-  ...rest
-}) {
-  return /*#__PURE__*/_jsx(MuiTabs, {
-    scrollButtons: "auto",
-    value: current,
-    onChange: (_, newValue) => onChange(newValue),
-    ...rest,
-    variant: "scrollable",
-    sx: {
-      minHeight: 'auto',
-      '.MuiTabs-scrollButtons.Mui-disabled': {
-        opacity: 0.3,
-        cursor: 'not-allowed',
-        pointerEvents: 'auto'
-      },
-      '.MuiTabs-scroller': {
-        borderRadius: '100vw'
-      },
-      '.MuiTabs-flexContainer': {
-        borderRadius: '100vw',
-        backgroundColor: colors.backgroundsBgComponent,
-        padding: 0.5,
-        display: 'inline-flex',
-        columnGap: 0.25,
-        maxWidth: '100%',
-        overflowX: 'auto'
-      },
-      '.MuiTab-root': {
-        borderRadius: '100vw',
-        border: '1px solid transparent',
-        minHeight: 'auto',
-        lineHeight: 1,
-        py: 1,
-        color: colors.foregroundsFgSubtile,
-        fontSize: '13px',
-        fontWeight: 'normal',
-        textTransform: 'capitalize',
-        transition: 'background-color 0.2s ease',
-        '&.Mui-selected, &:hover': {
-          backgroundColor: 'white',
-          borderColor: colors.lineBorderBase,
-          color: colors.foregroundsFgBase
-        }
-      },
-      '.MuiTabs-indicator': {
-        display: 'none'
-      },
-      ...rest.sx
-    },
-    children: tabs.map(x => /*#__PURE__*/_jsx(MuiTab, {
-      className: classes.tab,
-      value: x.value,
-      label: x.label,
-      icon: x.icon || null
-    }, x.value))
-  });
-}
-CardTabs.propTypes = {
-  tabs: PropTypes.array.isRequired,
-  current: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired
-};
-function LineTabs({
-  tabs,
-  current,
-  onChange,
-  ...rest
-}) {
-  return /*#__PURE__*/_jsx(MuiTabs, {
-    scrollButtons: "auto",
-    value: current,
-    onChange: (_, newValue) => onChange(newValue),
-    ...rest,
-    variant: "scrollable",
-    sx: {
-      minHeight: 'auto',
-      '.MuiTabs-scrollButtons.Mui-disabled': {
-        opacity: 0.3,
-        cursor: 'not-allowed',
-        pointerEvents: 'auto'
-      },
-      '.MuiTabs-scroller': {
-        '&::after': {
-          content: '""',
-          display: 'block',
-          width: '100%',
-          height: '1px',
-          backgroundColor: colors.strokeBorderStrong,
-          bottom: 0
-        }
-      },
-      '.MuiTabs-flexContainer': {
-        display: 'inline-flex',
-        columnGap: 2.5,
-        px: 0,
-        pb: 0.5
-      },
-      '.MuiTab-root': {
-        border: '1px solid transparent',
-        minHeight: 'auto',
-        lineHeight: 1,
-        py: 1,
-        px: 0,
-        color: colors.foregroundsFgSubtile,
-        fontSize: '14px',
-        fontWeight: 500,
-        textTransform: 'capitalize',
-        minWidth: 'auto',
-        '&.Mui-selected, &:hover': {
-          color: colors.foregroundsFgBase
-        }
-      },
-      '.MuiTabs-indicator': {
-        height: '1px',
-        backgroundColor: colors.foregroundsFgBase
-      },
-      ...rest.sx
-    },
-    children: tabs.map(x => /*#__PURE__*/_jsx(MuiTab, {
-      className: classes.tab,
-      value: x.value,
-      label: x.label,
-      icon: x.icon || null
-    }, x.value))
-  });
-}
-LineTabs.propTypes = {
-  tabs: PropTypes.array.isRequired,
-  current: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired
-};
-
-/**
- * @typedef {import('@mui/material').TabsProps & {
- *  tabs: string[];
- *  onChange: (value) => {};
- *  variant: 'line' | 'card' | 'fullWidth' | 'scrollable' | 'standard'
- * }} TabsProps
- */
-
-/**
- * @description
- * @param {TabsProps} props
- * @return {import('react').ReactNode}
- */
-
-export default function Tabs({
-  tabs,
-  current,
-  onChange,
-  ...rest
-}) {
-  if (rest.variant === 'card') {
-    return /*#__PURE__*/_jsx(CardTabs, {
-      ...rest,
-      tabs: tabs,
-      current: current,
-      onChange: onChange
-    });
-  }
-  if (rest.variant === 'line') {
-    return /*#__PURE__*/_jsx(LineTabs, {
-      ...rest,
-      tabs: tabs,
-      current: current,
-      onChange: onChange
-    });
-  }
-  return /*#__PURE__*/_jsx(StyledMuiTabs, {
-    scrollButtons: "auto",
-    variant: "scrollable",
-    value: current,
-    onChange: (_, newValue) => onChange(newValue),
-    indicatorColor: "primary",
-    ...rest,
-    className: [classes.tabs, rest.className || ''].join(' '),
-    children: tabs.map(x => /*#__PURE__*/_jsx(MuiTab, {
-      className: classes.tab,
-      value: x.value,
-      label: x.label,
-      icon: x.icon || null
-    }, x.value))
-  });
-}
-Tabs.propTypes = {
-  tabs: PropTypes.array.isRequired,
-  current: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired
-};

package/es/Tag/index.js

@@ -1,108 +0,0 @@
-import { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import Typography from '@mui/material/Typography';
-import { mergeProps } from '../Util';
-import colors from '../Colors';
-import { useTheme, styled } from '../Theme';
-import { jsx as _jsx } from "react/jsx-runtime";
-const types = {
-  error: {
-    color: colors.common.white,
-    backgroundColor: colors.error.main
-  },
-  warning: {
-    color: colors.common.white,
-    backgroundColor: colors.warning.main
-  },
-  success: {
-    color: colors.common.white,
-    backgroundColor: colors.success.main
-  },
-  primary: {
-    color: colors.common.white,
-    backgroundColor: colors.primary.main
-  },
-  reverse: {
-    color: '#fff',
-    backgroundColor: '#222'
-  }
-};
-
-/**
- * @typedef {{
- *  type: 'error' | 'warning' | 'success' | 'primary' | 'reverse',
- *  content: string,
- *  className: string;
- *  children: import('react').ReactNode,
- *  style: import('react').CSSProperties
- * }} TagProps
- */
-
-/**
- * @description
- * @param {TagProps} props
- * @return {import('react').ReactNode}
- */
-function Tag(props) {
-  const newProps = mergeProps(props, Tag, ['style']);
-  const {
-    type,
-    content,
-    children,
-    style,
-    className,
-    forwardedRef,
-    ...rest
-  } = newProps;
-  const {
-    palette
-  } = useTheme();
-  const styles = Object.assign({}, types[type] || types.primary, style);
-  if (palette[type]) {
-    Object.assign(styles, {
-      color: palette[type].contrastText || colors.common.white,
-      backgroundColor: palette[type].main
-    });
-  }
-  return /*#__PURE__*/_jsx(Span, {
-    ref: forwardedRef,
-    component: "span",
-    className: className,
-    style: styles,
-    ...rest,
-    children: content || children
-  });
-}
-Tag.propTypes = {
-  children: PropTypes.any.isRequired,
-  type: PropTypes.oneOf(Object.keys(types)),
-  content: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
-};
-Tag.defaultProps = {
-  type: 'primary',
-  content: '',
-  className: '',
-  style: {}
-};
-
-/** @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<TagProps> & React.RefAttributes<HTMLSpanElement>>} */
-const TagComponent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Tag, {
-  ...props,
-  forwardedRef: ref
-}));
-export default TagComponent;
-const Span = styled(Typography)`
-  && {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    padding: 2px 10px;
-    height: 20px;
-    line-height: 20px;
-    font-size: 12px;
-    font-weight: 500;
-    border-radius: 4px;
-  }
-`;

package/es/TextCollapse/index.js

@@ -1,92 +0,0 @@
-import PropTypes from 'prop-types';
-import Typography from '@mui/material/Typography';
-import { styled } from '../Theme';
-import { withDeprecated } from '../Util/deprecate';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-function TextCollapse({
-  children,
-  startChars,
-  endChars,
-  scaleFactor,
-  maxWidth,
-  style,
-  fontType,
-  ...rest
-}) {
-  if (typeof children !== 'string') {
-    return null;
-  }
-  const isMonospace = fontType === 'monospace';
-
-  // 由于 css 样式产生的省略号长度是不确定的，所以目前 startChars 的长度只能让开发者自己去加上‘省略号’的宽度去设置这个值，要想完美的实现目标功能，最好是改用 js 动态修改文本内容来实现
-  const startWidth = isMonospace ? `${startChars}ch` : `${scaleFactor * (startChars + 3)}em`;
-  const endWidth = isMonospace ? `${endChars}ch` : `${scaleFactor * endChars}em`;
-  const styles = Object.assign(isMonospace ? {
-    fontFamily: '"Courier New", Courier, monospace'
-  } : {}, {
-    fontSize: 'inherit',
-    color: 'inherit',
-    fontWeight: 'inherit',
-    maxWidth
-  }, style);
-  const [startPart, endPart] = [children.slice(0, children.length - endChars), children.slice(children.length - endChars)];
-  return /*#__PURE__*/_jsxs(Container, {
-    component: "span",
-    style: styles,
-    startwidth: startWidth,
-    endwidth: endWidth,
-    ...rest,
-    children: [/*#__PURE__*/_jsx("span", {
-      className: "start-part",
-      children: startPart
-    }), /*#__PURE__*/_jsx("span", {
-      className: "end-part",
-      children: endPart
-    })]
-  });
-}
-TextCollapse.propTypes = {
-  children: PropTypes.string.isRequired,
-  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  fontType: PropTypes.oneOf(['monospace', 'normal']),
-  style: PropTypes.object,
-  startChars: PropTypes.number,
-  endChars: PropTypes.number,
-  scaleFactor: PropTypes.number
-};
-TextCollapse.defaultProps = {
-  style: {},
-  startChars: 5,
-  endChars: 5,
-  scaleFactor: 0.45,
-  fontType: 'normal'
-};
-export default withDeprecated(TextCollapse, {
-  name: 'TextCollapse'
-});
-const Container = styled(Typography)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: start;
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-
-  .start-part,
-  .end-part {
-    display: inline-block;
-    vertical-align: bottom;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-  .start-part {
-    max-width: calc(100% - ${props => props.endwidth});
-    min-width: ${props => props.startwidth};
-    text-overflow: ellipsis;
-  }
-  .end-part {
-    max-width: calc(100% - ${props => props.startwidth});
-    direction: rtl;
-  }
-`;

package/es/Theme/index.js

@@ -1,16 +0,0 @@
-import { styled as muiStyled, useTheme } from '@mui/material/styles';
-export * from './theme';
-export { default as ThemeProvider } from './theme-provider';
-export { useTheme };
-const isTransientProp = prop => prop.startsWith('$');
-export const styled = (component, options = {}) => {
-  return muiStyled(component, {
-    ...options,
-    shouldForwardProp: prop => {
-      if (options.shouldForwardProp) {
-        return options.shouldForwardProp(prop) && !isTransientProp(prop);
-      }
-      return !isTransientProp(prop);
-    }
-  });
-};