@arcblock/ux 2.9.91 → 2.10.0

package/es/SessionUser/components/user-info.js

@@ -1,167 +0,0 @@
-import PropTypes from 'prop-types';
-import { Box, Chip, Typography } from '@mui/material';
-import { Icon } from '@iconify/react';
-import SwapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
-import ArrowRightAltRoundedIcon from '@iconify-icons/material-symbols/arrow-right-alt-rounded';
-import { useCreation, useMemoizedFn } from 'ahooks';
-import noop from 'lodash/noop';
-import DidAvatar from '../../Avatar';
-import { getUserAvatar } from '../../Util';
-import SessionUserSwitch from './session-user-switch';
-import { temp as colors } from '../../Colors';
-import { getWallet } from '../libs/utils';
-import { translations } from '../libs/translation';
-import { translate } from '../../Locale/util';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function UserInfo({
-  session,
-  onSwitchPassport,
-  onSwitchAccount,
-  onBindWallet,
-  onSwitchProfile,
-  locale,
-  isBlocklet
-}) {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const avatar = getUserAvatar(session.user?.avatar?.replace(/\s/g, encodeURIComponent(' ')), 64);
-  const currentRole = useCreation(() => session.user?.passports?.find(item => item.name === session.user.role), [session?.user?.passports, session?.user?.role]);
-  const hasBindWallet = useCreation(() => {
-    return getWallet(session?.user);
-  }, [session?.user]);
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      py: 2,
-      px: 0.5,
-      pb: 1,
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 1.5
-    },
-    children: [/*#__PURE__*/_jsxs(Box, {
-      sx: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        gap: 1,
-        px: 2
-      },
-      children: [/*#__PURE__*/_jsxs(Box, {
-        sx: {
-          display: 'flex',
-          alignItems: 'center',
-          gap: 1.5
-        },
-        children: [/*#__PURE__*/_jsx(Box, {
-          onClick: isBlocklet ? noop : onSwitchProfile,
-          "data-cy": "sessionManager-switch-profile-trigger",
-          sx: {
-            cursor: isBlocklet ? 'default' : 'pointer',
-            position: 'relative',
-            borderRadius: '100%',
-            overflow: 'hidden',
-            fontSize: 0,
-            flexShrink: 0,
-            '&:hover': isBlocklet ? {} : {
-              '&::after': {
-                content: `"${t('switch')}"`,
-                position: 'absolute',
-                bottom: 0,
-                background: 'rgba(0, 0, 0, 0.2)',
-                left: 0,
-                right: 0,
-                height: '2.2em',
-                color: 'white',
-                textAlign: 'center',
-                fontSize: '12px',
-                lineHeight: '2em'
-              }
-            }
-          },
-          children: /*#__PURE__*/_jsx(DidAvatar, {
-            variant: "circle",
-            did: session.user.did,
-            src: avatar,
-            size: 48,
-            shape: "circle",
-            sx: {
-              cursor: isBlocklet ? 'unset' : 'pointer'
-            }
-          })
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: "h6",
-          sx: {
-            wordBreak: 'break-word'
-          },
-          children: session.user.fullName
-        })]
-      }), /*#__PURE__*/_jsx(Chip, {
-        label: currentRole?.title || session.user?.role.toUpperCase(),
-        size: "small",
-        variant: "outlined",
-        clickable: true,
-        sx: {
-          flexShrink: 0,
-          fontWeight: 'bold',
-          fontSize: '12px',
-          color: colors.textBase,
-          borderColor: colors.borderBase,
-          pr: 1,
-          pl: 0.5,
-          '&:active': {
-            boxShadow: 'none'
-          }
-        },
-        deleteIcon: /*#__PURE__*/_jsx(Icon, {
-          icon: SwapHorizRoundedIcon,
-          color: colors.textBase
-        }),
-        onDelete: onSwitchPassport,
-        onClick: onSwitchPassport,
-        "data-cy": "sessionManager-switch-passport-trigger"
-      })]
-    }), /*#__PURE__*/_jsx(SessionUserSwitch, {
-      session: session,
-      onSwitch: onSwitchAccount,
-      isBlocklet: isBlocklet,
-      locale: locale
-    }), !hasBindWallet ? /*#__PURE__*/_jsxs(Box, {
-      sx: {
-        color: colors.primaryBase,
-        backgroundColor: colors.surfacePrimarySubtitle,
-        borderRadius: 1,
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        fontSize: 12,
-        py: 0.75,
-        px: 1.5,
-        cursor: 'pointer',
-        mt: -0.75
-      },
-      onClick: onBindWallet,
-      "data-cy": "sessionManager-bind-trigger",
-      children: [t('connectDIDWallet'), /*#__PURE__*/_jsx(Icon, {
-        icon: ArrowRightAltRoundedIcon,
-        color: colors.primaryBase,
-        fontSize: 16
-      })]
-    }) : null]
-  });
-}
-UserInfo.propTypes = {
-  session: PropTypes.object.isRequired,
-  onSwitchPassport: PropTypes.func.isRequired,
-  onSwitchAccount: PropTypes.func.isRequired,
-  onBindWallet: PropTypes.func.isRequired,
-  onSwitchProfile: PropTypes.func,
-  locale: PropTypes.string,
-  isBlocklet: PropTypes.bool
-};
-UserInfo.defaultProps = {
-  locale: 'en',
-  isBlocklet: true,
-  onSwitchProfile: noop
-};

package/es/SessionUser/index.js

@@ -1,49 +0,0 @@
-import PropTypes from 'prop-types';
-import noop from 'lodash/noop';
-import { useCreation } from 'ahooks';
-import LoggedIn from './components/logged-in';
-import UnLogin from './components/un-login';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function SessionUser({
-  session,
-  onBindWallet,
-  locale,
-  size
-}) {
-  const isBlocklet = useCreation(() => {
-    return !!globalThis?.blocklet;
-  });
-  if (session.user) {
-    return /*#__PURE__*/_jsx(LoggedIn, {
-      isBlocklet: isBlocklet,
-      session: session,
-      onBindWallet: onBindWallet,
-      locale: locale,
-      size: size
-    });
-  }
-  return /*#__PURE__*/_jsx(UnLogin, {
-    session: session,
-    isBlocklet: isBlocklet,
-    locale: locale,
-    size: size
-  });
-}
-SessionUser.propTypes = {
-  session: PropTypes.shape({
-    user: PropTypes.shape({
-      did: PropTypes.string.isRequired,
-      fullName: PropTypes.string.isRequired,
-      avatar: PropTypes.string.isRequired,
-      email: PropTypes.string
-    })
-  }).isRequired,
-  onBindWallet: PropTypes.func,
-  locale: PropTypes.string,
-  size: PropTypes.number
-};
-SessionUser.defaultProps = {
-  onBindWallet: noop,
-  locale: 'en',
-  size: 24
-};

package/es/SessionUser/libs/translation.js

@@ -1,19 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export const translations = {
-  en: {
-    connectDIDWallet: 'Connect your DID Wallet for enhanced security',
-    switch: 'Switch',
-    profile: 'Profile',
-    dashboard: 'Dashboard',
-    logout: 'Sign Out',
-    addAnotherAccount: 'Add another account'
-  },
-  zh: {
-    connectDIDWallet: '连接你的 DID Wallet 获得更高的安全性',
-    switch: '切换',
-    profile: '个人中心',
-    dashboard: '控制台',
-    logout: '退出登录',
-    addAnotherAccount: '添加账户'
-  }
-};

package/es/SessionUser/libs/utils.js

@@ -1,29 +0,0 @@
-export const getSourceAppPid = user => user?.sourceAppPid;
-export const getCurrentAppPid = user => user?.sourceAppPid || window?.blocklet?.appPid;
-export function getPermanentDid(user) {
-  return user?.did;
-}
-export function getConnectedAccounts(user) {
-  return user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
-}
-export function getSourceProvider(user) {
-  return user?.sourceProvider || user?.extraConfigs?.sourceProvider || 'wallet';
-}
-export function getSourceProviders(user) {
-  const connectedAccounts = getConnectedAccounts(user);
-  return connectedAccounts.map(item => item.provider);
-}
-export function getConnectedDids(user) {
-  const connectedAccounts = getConnectedAccounts(user);
-  const didList = connectedAccounts.map(item => item.did);
-  return didList;
-}
-export function getWallet(user) {
-  const connectedAccounts = getConnectedAccounts(user);
-  const walletAccount = connectedAccounts.find(item => item.provider === 'wallet');
-  return walletAccount;
-}
-export function getWalletDid(user) {
-  const walletAccount = getWallet(user);
-  return walletAccount?.did;
-}

package/es/Sparkline/index.js

@@ -1,193 +0,0 @@
-/* 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

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

@@ -1,145 +0,0 @@
-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 noop from 'lodash/noop';
-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: noop,
-  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;
-  }
-`;