@arcblock/ux 2.6.8 → 2.7.0

package/es/Sparkline/index.js

@@ -0,0 +1,193 @@
+/* eslint-disable guard-for-in */
+/* eslint-disable no-restricted-syntax */
+// origin: https://github.com/fnando/sparkline
+function getY(max, height, diff, value) {
+  return parseFloat((height - value * height / max + diff).toFixed(2));
+}
+function removeChildren(svg) {
+  [...svg.querySelectorAll('*')].forEach(element => svg.removeChild(element));
+}
+function defaultFetch(entry) {
+  return entry.value;
+}
+function buildElement(tag, attrs) {
+  const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
+  for (const name in attrs) {
+    element.setAttribute(name, attrs[name]);
+  }
+  return element;
+}
+export default function sparkline(svg, entries, options) {
+  removeChildren(svg);
+  if (entries.length <= 1) {
+    return;
+  }
+
+  // eslint-disable-next-line no-param-reassign
+  options = options || {};
+  if (typeof entries[0] === 'number') {
+    // eslint-disable-next-line no-param-reassign
+    entries = entries.map(entry => {
+      return {
+        value: entry
+      };
+    });
+  }
+
+  // This function will be called whenever the mouse moves
+  // over the SVG. You can use it to render something like a
+  // tooltip.
+  const {
+    onmousemove
+  } = options;
+
+  // This function will be called whenever the mouse leaves
+  // the SVG area. You can use it to hide the tooltip.
+  const {
+    onmouseout
+  } = options;
+
+  // Should we run in interactive mode? If yes, this will handle the
+  // cursor and spot position when moving the mouse.
+  const interactive = 'interactive' in options ? options.interactive : !!onmousemove;
+
+  // Define how big should be the spot area.
+  const spotRadius = options.spotRadius || 2;
+  const spotDiameter = spotRadius * 2;
+
+  // Define how wide should be the cursor area.
+  const cursorWidth = options.cursorWidth || 2;
+
+  // Get the stroke width; this is used to compute the
+  // rendering offset.
+  const strokeWidth = parseFloat(svg.attributes['stroke-width'].value);
+
+  // By default, data must be formatted as an array of numbers or
+  // an array of objects with the value key (like `[{value: 1}]`).
+  // You can set a custom function to return data for a different
+  // data structure.
+  const fetch = options.fetch || defaultFetch;
+
+  // Retrieve only values, easing the find for the maximum value.
+  const values = entries.map(entry => fetch(entry));
+
+  // The rendering width will account for the spot size.
+  const width = parseFloat(svg.attributes.width.value) - spotDiameter * 2;
+
+  // Get the SVG element's full height.
+  // This is used
+  const fullHeight = parseFloat(svg.attributes.height.value);
+
+  // The rendering height accounts for stroke width and spot size.
+  const height = fullHeight - strokeWidth * 2 - spotDiameter;
+
+  // The maximum value. This is used to calculate the Y coord of
+  // each sparkline datapoint.
+  const max = Math.max(...values) === 0 ? 1 : Math.max(...values);
+
+  // Some arbitrary value to remove the cursor and spot out of
+  // the viewing canvas.
+  const offscreen = -1000;
+
+  // Cache the last item index.
+  const lastItemIndex = values.length - 1;
+
+  // Calculate the X coord base step.
+  const offset = width / lastItemIndex;
+
+  // Hold all datapoints, which is whatever we got as the entry plus
+  // x/y coords and the index.
+  const datapoints = [];
+
+  // Hold the line coordinates.
+  const pathY = getY(max, height, strokeWidth + spotRadius, values[0]);
+  let pathCoords = `M${spotDiameter} ${pathY}`;
+  values.forEach((value, index) => {
+    const x = index * offset + spotDiameter;
+    const y = getY(max, height, strokeWidth + spotRadius, value);
+    datapoints.push(Object.assign({}, entries[index], {
+      index,
+      x,
+      y
+    }));
+    pathCoords += ` L ${x} ${y}`;
+  });
+  const path = buildElement('path', {
+    class: 'sparkline--line',
+    d: pathCoords,
+    fill: 'none'
+  });
+  const fillCoords = `${pathCoords} V ${fullHeight} L ${spotDiameter} ${fullHeight} Z`;
+  const fill = buildElement('path', {
+    class: 'sparkline--fill',
+    d: fillCoords,
+    stroke: 'none'
+  });
+  svg.appendChild(fill);
+  svg.appendChild(path);
+  if (!interactive) {
+    return;
+  }
+  const cursor = buildElement('line', {
+    class: 'sparkline--cursor',
+    x1: offscreen,
+    x2: offscreen,
+    y1: 0,
+    y2: fullHeight,
+    'stroke-width': cursorWidth
+  });
+  const spot = buildElement('circle', {
+    class: 'sparkline--spot',
+    cx: offscreen,
+    cy: offscreen,
+    r: spotRadius
+  });
+  svg.appendChild(cursor);
+  svg.appendChild(spot);
+  const interactionLayer = buildElement('rect', {
+    width: svg.attributes.width.value,
+    height: svg.attributes.height.value,
+    style: 'fill: transparent; stroke: transparent',
+    class: 'sparkline--interaction-layer'
+  });
+  svg.appendChild(interactionLayer);
+  interactionLayer.addEventListener('mouseout', event => {
+    cursor.setAttribute('x1', offscreen);
+    cursor.setAttribute('x2', offscreen);
+    spot.setAttribute('cx', offscreen);
+    if (onmouseout) {
+      onmouseout(event);
+    }
+  });
+  interactionLayer.addEventListener('mousemove', event => {
+    const mouseX = event.offsetX;
+    let nextDataPoint = datapoints.find(entry => {
+      return entry.x >= mouseX;
+    });
+    if (!nextDataPoint) {
+      nextDataPoint = datapoints[lastItemIndex];
+    }
+    const previousDataPoint = datapoints[datapoints.indexOf(nextDataPoint) - 1];
+    let currentDataPoint;
+    let halfway;
+    if (previousDataPoint) {
+      halfway = previousDataPoint.x + (nextDataPoint.x - previousDataPoint.x) / 2;
+      currentDataPoint = mouseX >= halfway ? nextDataPoint : previousDataPoint;
+    } else {
+      currentDataPoint = nextDataPoint;
+    }
+    const {
+      x
+    } = currentDataPoint;
+    const {
+      y
+    } = currentDataPoint;
+    spot.setAttribute('cx', x);
+    spot.setAttribute('cy', y);
+    cursor.setAttribute('x1', x);
+    cursor.setAttribute('x2', x);
+    if (onmousemove) {
+      onmousemove(event, currentDataPoint);
+    }
+  });
+}

package/es/Spinner/index.js

@@ -0,0 +1,28 @@
+import CircularProgress from '@mui/material/CircularProgress';
+import { withDeprecated } from '../Util/deprecate';
+
+/**
+ * Spinner
+ *
+ * 之前的 Spinner 实现由内外 2 个环构成, 现在改为基于 @mui/material/CircularProgress 的实现
+ *
+ * - 之前 size prop 是 array 类型, 需要与 CircularProgress#size 兼容
+ * - color 默认使用 #4598fa, 如果调用方传入了 color prop 或 style#color, 则默认 color 被覆盖
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function Spinner(props) {
+  const _props = {
+    ...props
+  };
+  // 兼容之前的 size prop (设置外圈/内圈的尺寸)
+  if (_props.size && Array.isArray(_props.size)) {
+    [_props.size] = _props.size;
+  }
+  return /*#__PURE__*/_jsx(CircularProgress, {
+    ..._props
+  });
+}
+export default withDeprecated(Spinner, {
+  name: 'Spinner',
+  alternative: '@mui/material/CircularProgress'
+});

package/es/SplitButton/index.js

@@ -0,0 +1,144 @@
+import { useState, useRef, isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import Popper from '@mui/material/Popper';
+import Paper from '@mui/material/Paper';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Button from '@mui/material/Button';
+import { styled } from '../Theme';
+
+/**
+ * SplitButton 组件 Props
+ * @typedef {{
+ *  size?: 'small' | 'medium' | 'large';
+ *  color?: 'primary' | 'secondary' | 'inherit';
+ *  menu?: Array<import('@mui/material').MenuItem> | import('@mui/material').MenuItem;
+ *  children?: JSX.Element | (() => JSX.Element);
+ *  variant?: 'outlined' | 'contained';
+ *  onClick?: () => void;
+ *  menuButtonProps?: import('@mui/material').ButtonProps;
+ * } & import('@mui/material').ButtonGroupProps } SplitButtonProps
+ */
+
+/**
+ * @description SplitButton allows the user to execute a default action which is bound to a Button or to choose a predefined action from a drop-down list.
+ * @export
+ * @param {SplitButtonProps} props
+ * @return {JSX.Element}
+ */
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function SplitButton(props) {
+  const {
+    size,
+    color,
+    menu,
+    children,
+    variant,
+    onClick,
+    menuButtonProps,
+    ...rest
+  } = props;
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+  const menuItems = Array.isArray(menu) ? menu.map((item, index) => /*#__PURE__*/isValidElement(item) ? item : /*#__PURE__*/_createElement(MenuItem, {
+    ...item,
+    key: index
+  })) // eslint-disable-line react/no-array-index-key
+  : menu;
+  const onToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+  const handleClose = e => {
+    if (anchorRef.current && anchorRef.current.contains(e.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+
+  // 点击 item 后收起下拉菜单, 如果想要点击 action 后不收起下拉菜单, 可以在 item#onClick 时调用 e.stopPropagation()
+  const handleItemClick = e => {
+    if (e.target.closest('.MuiMenuItem-root')) {
+      setOpen(false);
+    }
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(StyledButtonGroup, {
+      variant: variant,
+      size: size,
+      color: color,
+      ref: anchorRef,
+      ...rest,
+      children: [typeof children === 'function' ? children() : /*#__PURE__*/_jsx(Button, {
+        onClick: onClick,
+        color: color,
+        children: children
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: onToggle,
+        color: color,
+        ...menuButtonProps,
+        "aria-label": "more functions",
+        children: /*#__PURE__*/_jsx(ExpandMore, {})
+      })]
+    }), /*#__PURE__*/_jsx(StyledPopper, {
+      open: open,
+      anchorEl: anchorRef.current,
+      placement: "bottom-end",
+      disablePortal: false,
+      children: /*#__PURE__*/_jsx(Paper, {
+        children: /*#__PURE__*/_jsx(ClickAwayListener, {
+          onClickAway: handleClose,
+          children: /*#__PURE__*/_jsx(MenuList, {
+            onClick: handleItemClick,
+            children: menuItems
+          })
+        })
+      })
+    })]
+  });
+}
+SplitButton.propTypes = {
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  color: PropTypes.oneOf(['primary', 'secondary', 'inherit']),
+  menu: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
+  // 也可以是用于渲染主按钮的 function
+  children: PropTypes.node,
+  variant: PropTypes.oneOf(['outlined', 'contained']),
+  onClick: PropTypes.func,
+  menuButtonProps: PropTypes.object
+};
+SplitButton.defaultProps = {
+  size: 'medium',
+  color: 'primary',
+  menu: [],
+  children: null,
+  variant: 'contained',
+  onClick: () => {},
+  menuButtonProps: {}
+};
+/**
+ * @type {import('@mui/material').MenuItem}
+ */
+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/es/Switch/index.js

@@ -0,0 +1,96 @@
+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

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import MuiTabs from '@mui/material/Tabs';
+import MuiTab from '@mui/material/Tab';
+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'
+    }
+  }
+}));
+export default function Tabs({
+  tabs,
+  current,
+  onChange,
+  ...rest
+}) {
+  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

@@ -0,0 +1,108 @@
+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;
+  }
+`;