@arcblock/ux 2.6.9 → 2.7.1

package/es/BlockletNFT/index.js

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

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

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

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

@@ -0,0 +1,131 @@
+import { useState, useEffect, useRef } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+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) => {
+        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 {
+      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 {
+        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: () => {},
+  defaultIndex: 0
+};