@arcblock/ux 2.9.91 → 2.10.1

package/es/BlockletNFT/index.js

@@ -1,412 +0,0 @@
-import { useRef } from 'react';
-import PropTypes from 'prop-types';
-import Portal from '@mui/material/Portal';
-import Typography from '@mui/material/Typography';
-import CircularProgress from '@mui/material/CircularProgress';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import Avatar from '../Avatar';
-import Icon from '../Icon';
-import Button from '../Button';
-import Img from '../Img';
-import { useTheme, styled } from '../Theme';
-
-/**
- * 美化数字 1000-->1k
- * @param {*} _size
- * @param {*} digits
- * @returns
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-function prettySize(_size, digits = 1) {
-  let size = _size;
-  const list = ['', 'k', 'm', 'b'];
-  let index = 0;
-  while (size > 1000 && index < list.length - 1) {
-    size = (size / 1000).toFixed(digits);
-    index += 1;
-  }
-  return _size && `${size}${list[index]}`;
-}
-const Div = styled('div')`
-  &.arcblock-blocklet {
-    padding: 0 16px;
-    background: ${props => props.theme.palette.common.white};
-    overflow: hidden;
-    box-shadow: 0px 0px 8px #f0f0f0;
-    &:hover {
-      box-shadow: 0px 2px 12px #f0f0f0;
-    }
-  }
-  .arcblock-blocklet__content {
-    padding: 16px 0 0 0;
-  }
-  .arcblock-blocklet__content--main {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-  }
-  .arcblock-blocklet__content--body {
-    overflow: hidden;
-    flex: 1;
-    display: flex;
-    align-items: flex-start;
-  }
-  .arcblock-blocklet__addons {
-    padding: 16px 0;
-  }
-  .arcblock-blocklet__cover {
-    width: 80px;
-    height: 80px;
-    margin-right: 12px;
-    overflow: hidden;
-    border-radius: 12px;
-    /* see: https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */
-    transform: translateZ(0);
-  }
-  .arcblock-blocklet__button--hover {
-    &:not(.Mui-disabled) {
-      position: relative;
-      z-index: 1;
-      &::before {
-        content: '';
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        left: 0;
-        top: 0;
-        transition: opacity 0.3s;
-      }
-      &:hover::before {
-        opacity: 0;
-      }
-      &::after {
-        content: '';
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        top: 0;
-        left: 0;
-        background-color: ${props => props.theme.palette.primary.main};
-        transform: scale(0.1);
-        opacity: 0;
-        z-index: -1;
-        transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
-      }
-      &:hover::after {
-        opacity: 1;
-        transform-origin: center;
-        transform: scale(1);
-      }
-    }
-
-    &:not(.Mui-disabled) {
-      background-color: transparent !important;
-      color: ${props => props.theme.palette.primary.main};
-    }
-    &:not(.Mui-disabled) {
-      &:hover {
-        color: ${props => props.theme.palette.common.white};
-      }
-    }
-  }
-  .arcblock-blocklet__info {
-    flex: 1;
-    overflow: hidden;
-    .arcblock-blocklet__button {
-      margin-top: 16px;
-      display: inline-block;
-    }
-  }
-  .arcblock-blocklet__title {
-    margin: 0;
-    font-size: 18px;
-    font-weight: 600;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .arcblock-blocklet__describe {
-    margin: 0 0 2px 0;
-    color: #999;
-    font-size: 14px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .arcblock-blocklet__addons {
-    display: flex;
-    justify-content: space-between;
-    color: #999;
-    font-size: 14px;
-    position: relative;
-  }
-  .arcblock-blocklet__addons--item {
-    white-space: nowrap;
-  }
-  &.arcblock-blocklet--size-md {
-    &:hover {
-      position: relative;
-    }
-    .arcblock-blocklet__title {
-      height: 2.3em;
-      margin-bottom: 3px;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      overflow: hidden;
-      text-overflow: initial;
-      white-space: initial;
-      word-break: break-all;
-    }
-    .arcblock-blocklet__describe {
-      white-space: normal;
-      height: 2.86em;
-    }
-    .arcblock-blocklet__button {
-      margin-top: 5px;
-    }
-  }
-  &.arcblock-blocklet--size-sm,
-  &.arcblock-blocklet--size-xs {
-    .arcblock-blocklet__cover {
-      width: 40px;
-      height: 40px;
-      border-radius: 6px;
-    }
-    .arcblock-blocklet__content {
-      padding: 16px 0;
-    }
-    .arcblock-blocklet__addons {
-      padding: 8px 0;
-      .arcblock-blocklet__addons--item {
-        font-size: 12px;
-      }
-    }
-  }
-  &.arcblock-blocklet--size-xs {
-    .arcblock-blocklet__addons {
-      display: none !important;
-    }
-  }
-`;
-function BlockletIcon({
-  name
-}) {
-  return /*#__PURE__*/_jsx(Icon, {
-    name: name,
-    color: "inherit",
-    size: 15,
-    style: {
-      marginRight: 8
-    }
-  });
-}
-BlockletIcon.propTypes = {
-  name: PropTypes.string.isRequired
-};
-
-/**
- * BlockletNFT 组件
- * @typedef {{
- *  title: string;
- *  description?: string;
- *  cover?: string;
- *  did?: string;
- *  isStickyButton?: boolean;
- *  buttonText?: string;
- *  buttonDisabled?: boolean;
- *  buttonLoading?: boolean;
- *  button?: JSX.Element;
- *  addons?: Array<any>;
- *  size?: 'xs' | 'sm' | 'md' | 'auto';
- *  onButtonClick?: Function;
- *  onMainClick?: Function;
- *  onTagClick?: Function;
- *  className?: string;
- *  scaleClickZone?: number;
- * } & import('react').ComponentPropsWithoutRef<"div"> } BlockletNFTProps
- */
-
-/**
- * BlockletNFT 组件
- * @param {BlockletNFTProps} props
- * @returns {JSX.Element}
- */
-export default function BlockletNFT({
-  title,
-  did,
-  description,
-  cover,
-  size,
-  addons,
-  button,
-  buttonText,
-  buttonDisabled,
-  buttonLoading,
-  isStickyButton,
-  onButtonClick,
-  onMainClick,
-  onTagClick,
-  className,
-  scaleClickZone,
-  ...rest
-}) {
-  const wrapHandler = (handler, stopFn = () => false) => (e, ...args) => {
-    if (stopFn()) {
-      e.preventDefault();
-      e.stopPropagation();
-    } else if (handler instanceof Function) {
-      e.preventDefault();
-      e.stopPropagation();
-      handler(...args);
-    }
-  };
-  const _onButtonClick = wrapHandler(onButtonClick, () => {
-    // stop click while custom button or buttonDisabled or buttondLoading
-    if (button || buttonDisabled || buttonLoading) {
-      return true;
-    }
-    return false;
-  });
-  const _onMainClick = wrapHandler(onMainClick);
-  const theme = useTheme();
-  const isDownSm = useMediaQuery(theme.breakpoints.down('md'));
-  const isDownMd = useMediaQuery(theme.breakpoints.down('lg'));
-  const isUpLg = useMediaQuery(theme.breakpoints.up('lg'));
-
-  // If size is auto, need calculate actual size according to screen size
-  // eslint-disable-next-line no-nested-ternary
-  const actualSize = size === 'auto' ? isDownSm ? 'xs' : isDownMd ? 'sm' : 'md' : size;
-  // eslint-disable-next-line no-nested-ternary
-  const didAvatarSize = size === 'auto' ? isUpLg ? 80 : 40 : size === 'md' ? 80 : 40;
-  const container = useRef(null);
-  return /*#__PURE__*/_jsxs(Div, {
-    ...rest,
-    scaleClickZone: scaleClickZone,
-    className: `${className} arcblock-blocklet arcblock-blocklet--size-${actualSize}`,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: "arcblock-blocklet__content",
-      children: /*#__PURE__*/_jsx("div", {
-        className: "arcblock-blocklet__content--main",
-        onClick: _onMainClick,
-        ref: container,
-        children: /*#__PURE__*/_jsxs("div", {
-          className: "arcblock-blocklet__content--body",
-          children: [cover ? /*#__PURE__*/_jsx("div", {
-            className: "arcblock-blocklet__cover",
-            children: /*#__PURE__*/_jsx(Img, {
-              src: cover
-            })
-          }) : did && /*#__PURE__*/_jsx("div", {
-            className: "arcblock-blocklet__cover",
-            children: /*#__PURE__*/_jsx(Avatar, {
-              did: did,
-              size: didAvatarSize
-            })
-          }), /*#__PURE__*/_jsxs("div", {
-            className: "arcblock-blocklet__info",
-            children: [/*#__PURE__*/_jsx(Typography, {
-              component: "h3",
-              variant: "h3",
-              className: "arcblock-blocklet__title",
-              title: title,
-              children: title
-            }), description && /*#__PURE__*/_jsx(Typography, {
-              component: "div",
-              variant: "body2",
-              className: "arcblock-blocklet__describe",
-              title: description,
-              children: description
-            }), ['md', 'sm', 'xs'].includes(actualSize) && /*#__PURE__*/_jsx(Portal, {
-              container: container.current,
-              disablePortal: actualSize === 'md',
-              children: /*#__PURE__*/_jsx("div", {
-                className: "arcblock-blocklet__button",
-                onClick: _onButtonClick,
-                style: {
-                  display: isStickyButton ? 'block' : ''
-                },
-                children: button || onButtonClick && /*#__PURE__*/_jsxs(Button, {
-                  className: "arcblock-blocklet__button--hover",
-                  variant: "outlined",
-                  color: "primary",
-                  size: "small",
-                  disabled: buttonDisabled || buttonLoading,
-                  style: actualSize === 'md' ? {
-                    padding: '3px 20px',
-                    fontSize: '14px'
-                  } : {
-                    padding: '3px 15px',
-                    minWidth: '54px',
-                    fontSize: '13px'
-                  },
-                  children: [buttonLoading && /*#__PURE__*/_jsx(CircularProgress, {
-                    size: actualSize === 'md' ? 15 : 13,
-                    style: {
-                      marginRight: 3,
-                      color: 'inherit'
-                    }
-                  }), buttonText]
-                })
-              })
-            })]
-          })]
-        })
-      })
-    }), /*#__PURE__*/_jsx("div", {
-      className: "arcblock-blocklet__addons",
-      children: addons.map((item, index) => /*#__PURE__*/_jsx(Typography, {
-        component: "span",
-        variant: "caption",
-        className: "arcblock-blocklet__addons--item"
-        // eslint-disable-next-line react/no-array-index-key
-        ,
-
-        title: item.title,
-        children: item.empty ? null : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(BlockletIcon, {
-            name: item.icon
-          }), item.pretty ? prettySize(item.value) : item.value]
-        })
-      }, index))
-    })]
-  });
-}
-BlockletNFT.propTypes = {
-  title: PropTypes.string.isRequired,
-  did: PropTypes.string,
-  isStickyButton: PropTypes.bool,
-  description: PropTypes.string,
-  cover: PropTypes.string,
-  buttonText: PropTypes.string,
-  buttonDisabled: PropTypes.bool,
-  buttonLoading: PropTypes.bool,
-  button: PropTypes.element,
-  addons: PropTypes.arrayOf(PropTypes.object),
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'auto']),
-  onButtonClick: PropTypes.func,
-  onMainClick: PropTypes.func,
-  onTagClick: PropTypes.func,
-  className: PropTypes.string,
-  scaleClickZone: PropTypes.number
-};
-BlockletNFT.defaultProps = {
-  description: null,
-  cover: null,
-  did: null,
-  isStickyButton: false,
-  buttonText: 'Install',
-  buttonDisabled: false,
-  buttonLoading: false,
-  button: null,
-  size: 'auto',
-  addons: [],
-  onButtonClick: null,
-  onMainClick: null,
-  onTagClick: null,
-  className: null,
-  scaleClickZone: 1.5
-};

package/es/Button/index.js

@@ -1,8 +0,0 @@
-// @ts-check
-
-import Button from '@mui/material/Button';
-import wrap from './wrap';
-
-/** @type {import('./wrap').ButtonComponent} */
-const ButtonComponent = wrap(Button);
-export default ButtonComponent;

package/es/Button/wrap.js

@@ -1,140 +0,0 @@
-/* eslint-disable prefer-destructuring */
-/* eslint-disable func-names */
-import { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import CircularProgress from '@mui/material/CircularProgress';
-import colors from '../Colors';
-import { mergeProps } from '../Util';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const extendedColors = {
-  did: {
-    contained: {
-      backgroundColor: colors.did.primary,
-      color: colors.common.white
-    },
-    outlined: {
-      borderColor: colors.did.primary,
-      color: colors.did.primary
-    }
-  },
-  reverse: {
-    contained: {
-      backgroundColor: 'rgba(255, 255, 255, 0.9)',
-      color: colors.grey[900]
-    },
-    outlined: {
-      borderColor: colors.grey[900],
-      color: colors.grey[900]
-    }
-  }
-};
-
-/**
- * @typedef {{
- *  rounded?: boolean,
- *  loading?: boolean,
- *  forwardedRef?: import('react').ForwardedRef<any>,
- *  color?: 'default' | 'inherit' | 'primary' | 'secondary' | 'danger' | 'warning' | 'reverse' | 'did'
- * } & import('@mui/material').ButtonProps} ButtonProps
- */
-
-/**
- * @typedef {React.ForwardRefExoticComponent<React.PropsWithoutRef<ButtonProps> & React.RefAttributes<HTMLButtonElement>>} ButtonComponent
- */
-
-/**
- * @description
- * @export
- * @param {import('@mui/material').ExtendButtonBase<import('@mui/material').ButtonTypeMap<{}, "button">>} BaseComponent
- * @return {ButtonComponent}
- */
-export default function (BaseComponent) {
-  /**
-   *
-   * @param {ButtonProps} props
-   * @returns
-   */
-  function WrappedComponent(props) {
-    /**
-     * @type {ButtonProps}
-     */
-    const newProps = mergeProps(props, WrappedComponent, ['style']);
-    const {
-      children,
-      rounded,
-      loading,
-      disabled,
-      style,
-      forwardedRef,
-      color,
-      ...rest
-    } = newProps;
-    const isDisabled = disabled || loading;
-    let loadingSize = 16;
-    switch (rest.size) {
-      case 'small':
-        loadingSize = 14;
-        break;
-      case 'large':
-        loadingSize = 18;
-        break;
-      default:
-    }
-
-    // mui v4 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
-    // 这里扩展 danger/warning/reverse/did 四种 color
-    // !! 已升级到 mui v5, error/warning 等 color 已经默认支持, extendedColors 只扩展了 did/reverse
-    const matched = extendedColors[color] && extendedColors[color][rest.variant];
-
-    /**
-     * @type {import('react').CSSProperties}
-     */
-    const styles = Object.assign({}, style, {
-      boxShadow: 'none',
-      textTransform: 'capitalize',
-      ...matched
-    });
-    let _rest = rest;
-    if (!matched) {
-      // mui button 本身支持的 color 交由 mui 处理
-      _rest = {
-        ..._rest,
-        color
-      };
-    }
-    if (rounded) {
-      // styles.borderRadius = { small: 16, medium: 18, large: 20 }[rest.size];
-      styles.borderRadius = '100vw';
-    }
-    return /*#__PURE__*/_jsxs(BaseComponent, {
-      style: styles,
-      ref: forwardedRef,
-      disabled: isDisabled,
-      ..._rest,
-      children: [loading && /*#__PURE__*/_jsx(CircularProgress, {
-        size: loadingSize,
-        style: {
-          marginRight: 5
-        }
-      }), children]
-    });
-  }
-  WrappedComponent.propTypes = {
-    children: PropTypes.any.isRequired,
-    style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-    size: PropTypes.oneOf(['large', 'medium', 'small']),
-    forwardedRef: PropTypes.any,
-    rounded: PropTypes.bool
-  };
-  WrappedComponent.defaultProps = {
-    rounded: false,
-    size: 'medium',
-    forwardedRef: null,
-    style: {}
-  };
-  return /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(WrappedComponent, {
-    ...props,
-    forwardedRef: ref
-  }));
-}

package/es/ButtonGroup/index.js

@@ -1,6 +0,0 @@
-import ButtonGroup from '@mui/material/ButtonGroup';
-import wrap from '../Button/wrap';
-
-// deprecated, ux ButtonGroup 组件废弃, 建议直接使用 @mui/material/ButtonGroup
-// (该定制组件原本目的是调整 ButtonGroup 的圆角, 但最新设计规范已经不再使用较大的圆角, 改为使用 mui button 默认的圆角)
-export default wrap(ButtonGroup);

package/es/CardSelector/index.js

@@ -1,149 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import styled from '@emotion/styled';
-import PropTypes from 'prop-types';
-import noop from 'lodash/noop';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function CardSelector({
-  list,
-  width,
-  height,
-  cardSpace,
-  onSelect,
-  defaultIndex
-}) {
-  const [selectedId, setSelectedId] = useState(0);
-  const [translateX, setTranslateX] = useState(0);
-  const outterCon = useRef(null);
-
-  // 选择卡片
-  const selectedItem = i => {
-    if (i < 0 || i > list.length - 1) {
-      return;
-    }
-    setSelectedId(i);
-
-    // 外部容器大小
-    const outerWidth = outterCon.current.clientWidth;
-    setTranslateX(i * (width + cardSpace) - (outerWidth - width) / 2 + cardSpace * 0.5);
-    onSelect(i);
-  };
-  useEffect(() => {
-    selectedItem(defaultIndex);
-    const func = e => e.preventDefault();
-    outterCon.current.addEventListener('touchmove', func, {
-      passive: false
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  let startX;
-  const touchstart = e => {
-    const point = e.touches[0];
-    startX = point.clientX;
-  };
-  const touchend = e => {
-    const point = e.changedTouches[0];
-    const diffX = startX - point.clientX;
-    if (Math.abs(diffX) > 60) {
-      if (diffX > 0) {
-        selectedItem(selectedId + 1);
-      } else {
-        selectedItem(selectedId - 1);
-      }
-    }
-  };
-  return /*#__PURE__*/_jsx(Contianer, {
-    ref: outterCon,
-    onTouchStart: touchstart,
-    onTouchEnd: touchend,
-    children: /*#__PURE__*/_jsx("div", {
-      className: "card-container",
-      style: {
-        transform: `translate(${-translateX}px, 0)`
-      },
-      children: list.map((e, i) => {
-        if (e instanceof Function) {
-          return /*#__PURE__*/_jsx("div", {
-            className: `card-item ${i === selectedId ? 'selected' : ''}`,
-            style: {
-              width,
-              height,
-              margin: cardSpace / 2
-            }
-            // eslint-disable-next-line react/no-array-index-key
-            ,
-
-            onClick: () => selectedItem(i),
-            children: e(i)
-          }, i);
-        }
-        return /*#__PURE__*/_jsx("div", {
-          className: `card-item ${i === selectedId ? 'selected' : ''}`,
-          style: {
-            width,
-            height,
-            margin: cardSpace / 2
-          }
-          // eslint-disable-next-line react/no-array-index-key
-          ,
-
-          onClick: () => selectedItem(i),
-          children: /*#__PURE__*/_jsx("img", {
-            src: e.src,
-            alt: e.name
-          })
-        }, i);
-      })
-    })
-  });
-}
-const Contianer = styled.div`
-  overflow: hidden;
-  mask-image: linear-gradient(to left, transparent, black 3%, black 97%, transparent);
-  overflow: hidden;
-  .card-container {
-    display: flex;
-    white-space: nowrap;
-    width: max-content;
-    transition: all ease 0.3s;
-  }
-  .card-item {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    cursor: pointer;
-    img,
-    svg {
-      max-width: 100%;
-      max-height: 100%;
-      width: auto;
-      height: auto;
-      outline: #526ded solid 0;
-      transition: all ease 0.2s;
-      box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
-    }
-    &.selected {
-      cursor: default;
-      img,
-      svg {
-        outline: #526ded solid 5px;
-      }
-    }
-  }
-`;
-CardSelector.propTypes = {
-  list: PropTypes.array,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  cardSpace: PropTypes.number,
-  onSelect: PropTypes.func,
-  defaultIndex: PropTypes.number
-};
-CardSelector.defaultProps = {
-  list: '',
-  width: 300,
-  height: 400,
-  cardSpace: 40,
-  onSelect: noop,
-  defaultIndex: 0
-};