@arcblock/ux 2.9.90 → 2.10.0

package/lib/Avatar/index.js

@@ -1,22 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = AvatarWithErrorBoundary;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactErrorBoundary = require("react-error-boundary");
-var _didMotif = require("@arcblock/did-motif");
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Img = _interopRequireDefault(require("../Img"));
-var _Util = require("../Util");
-var _didMotif2 = _interopRequireDefault(require("./did-motif"));
-var _etherscanBlockies = _interopRequireDefault(require("./etherscan-blockies"));
-var _constant = require("../Util/constant");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["did", "size", "src", "variant", "animation", "shape", "blockiesPadding", "responsive"];
 /* eslint-disable react/no-unused-prop-types */
+import { useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Shape } from '@arcblock/did-motif';
+import Box from '@mui/material/Box';
+import Img from '../Img';
+import { mergeProps, isEthereumDid } from '../Util';
+import DIDMotif from './did-motif';
+import blockies from './etherscan-blockies';
+import { DID_PREFIX } from '../Util/constant';
+
 /**
  * Avatar component
  * @typedef {{
@@ -29,40 +22,34 @@ const _excluded = ["did", "size", "src", "variant", "animation", "shape", "block
  *  responsive?: boolean;
  * }} AvatarProps
  */
+
 /**
  * Avatar component
  * @see 参考: https://github.com/blocklet/block-explorer/issues/478#issuecomment-1038954976
  * @param {AvatarProps} props
  * @returns {JSX.Element}
  */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { jsx as _jsx } from "react/jsx-runtime";
 function Avatar(props) {
-  const [imgError, setImgError] = (0, _react.useState)(false);
-  const newProps = (0, _Util.mergeProps)(props, Avatar, []);
+  const [imgError, setImgError] = useState(false);
+  const newProps = mergeProps(props, Avatar, []);
   const {
-      did = '',
-      size,
-      src,
-      variant,
-      animation,
-      shape,
-      blockiesPadding,
-      responsive
-    } = newProps,
-    rest = _objectWithoutProperties(newProps, _excluded);
+    did = '',
+    size,
+    src,
+    variant,
+    animation,
+    shape,
+    blockiesPadding,
+    responsive,
+    ...rest
+  } = newProps;
 
   // ethereum blockies
-  const blockyIcon = (0, _react.useMemo)(() => {
-    if ((0, _Util.isEthereumDid)(did)) {
-      return _etherscanBlockies.default.createIcon({
-        seed: did.replace(_constant.DID_PREFIX, '').toLowerCase(),
+  const blockyIcon = useMemo(() => {
+    if (isEthereumDid(did)) {
+      return blockies.createIcon({
+        seed: did.replace(DID_PREFIX, '').toLowerCase(),
         size: 8,
         scale: 16
       }).toDataURL();
@@ -72,15 +59,15 @@ function Avatar(props) {
 
   // 如果显式传入 src 则直接使用 src
   if (src && !imgError) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, _objectSpread(_objectSpread({
+    return /*#__PURE__*/_jsx(Img, {
       width: size,
       src: src,
       alt: did,
-      onError: () => setImgError(true)
-    }, rest), {}, {
+      onError: () => setImgError(true),
+      ...rest,
       // HACK: 这个 className 是传递给子元素的，所以下面的 sx 需要通过子元素选择器来写样式
-      className: "avatar-img--".concat(variant, " ").concat((rest === null || rest === void 0 ? void 0 : rest.className) || ''),
-      sx: _objectSpread({
+      className: `avatar-img--${variant} ${rest?.className || ''}`,
+      sx: {
         '& .avatar-img--rounded': {
           borderRadius: '4px',
           overflow: 'hidden'
@@ -88,17 +75,19 @@ function Avatar(props) {
         '& .avatar-img--circle': {
           borderRadius: '100%',
           overflow: 'hidden'
-        }
-      }, rest.sx)
-    }));
+        },
+        ...rest.sx
+      }
+    });
   }
   // 对于 eth address, 渲染成 blocky icon, 形状与 account role type 的 did motif 相似都为矩形, 高宽比为 0.7
   if (blockyIcon) {
     if (blockiesPadding) {
       // blocky icon 要与灰色卡片矩形留有空间
       const padding = size > 24 ? 4 : 2;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, _objectSpread(_objectSpread({}, rest), {}, {
-        sx: _objectSpread({
+      return /*#__PURE__*/_jsx(Box, {
+        ...rest,
+        sx: {
           display: 'flex',
           alignItems: 'center',
           width: size,
@@ -110,51 +99,54 @@ function Avatar(props) {
             alignItems: 'center',
             width: size,
             height: size * 0.7,
-            borderRadius: "".concat(Math.min(10, Math.floor(0.1 * size + 2)), "px"),
+            borderRadius: `${Math.min(10, Math.floor(0.1 * size + 2))}px`,
             background: '#ddd'
-          }
-        }, rest.sx),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          },
+          ...rest.sx
+        },
+        children: /*#__PURE__*/_jsx("div", {
           className: "blocky-icon-inner",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, {
+          children: /*#__PURE__*/_jsx(Img, {
             width: size * 0.7 - padding * 2,
             src: blockyIcon,
             alt: did
           })
         })
-      }));
+      });
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Img.default, _objectSpread(_objectSpread({}, rest), {}, {
+    return /*#__PURE__*/_jsx(Img, {
+      ...rest,
       width: size,
       src: blockyIcon,
       alt: did,
       style: {
         marginRight: 4
       }
-    }));
+    });
   }
   if (did) {
     // 渲染 did motif
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_didMotif2.default, _objectSpread({
-      did: did.replace(_constant.DID_PREFIX, ''),
+    return /*#__PURE__*/_jsx(DIDMotif, {
+      did: did.replace(DID_PREFIX, ''),
       size: size,
       animation: animation,
-      shape: _didMotif.Shape[(shape || '').toUpperCase()],
-      responsive: responsive
-    }, rest));
+      shape: Shape[(shape || '').toUpperCase()],
+      responsive: responsive,
+      ...rest
+    });
   }
-  throw new Error("Invalid DID: ".concat(did));
+  throw new Error(`Invalid DID: ${did}`);
 }
 Avatar.propTypes = {
-  did: _propTypes.default.string.isRequired,
-  size: _propTypes.default.number,
-  variant: _propTypes.default.oneOf(['circle', 'rounded', 'default']),
+  did: PropTypes.string.isRequired,
+  size: PropTypes.number,
+  variant: PropTypes.oneOf(['circle', 'rounded', 'default']),
   // animation 仅对 did motif 有效
-  animation: _propTypes.default.bool,
+  animation: PropTypes.bool,
   // shape 仅对 did motif 有效, 明确指定 motif shape, 而非由 did role type 自动推断 shape
-  shape: _propTypes.default.oneOf(['', 'rectangle', 'square', 'hexagon', 'circle']),
-  blockiesPadding: _propTypes.default.bool,
-  responsive: _propTypes.default.bool
+  shape: PropTypes.oneOf(['', 'rectangle', 'square', 'hexagon', 'circle']),
+  blockiesPadding: PropTypes.bool,
+  responsive: PropTypes.bool
 };
 Avatar.defaultProps = {
   size: 36,
@@ -164,22 +156,24 @@ Avatar.defaultProps = {
   shape: '',
   responsive: false
 };
-function AvatarWithErrorBoundary(props) {
+export default function AvatarWithErrorBoundary(props) {
   const size = props.size || 36;
   const borderRadius = {
     rounded: '4px',
     circle: '100%'
   }[props.variant] || 0;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary
+  return /*#__PURE__*/_jsx(ErrorBoundary
   // eslint-disable-next-line react/no-unstable-nested-components
   , {
-    fallbackRender: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    fallbackRender: () => /*#__PURE__*/_jsx(Box, {
       width: size,
       height: size,
       bgcolor: "grey.300",
       borderRadius: borderRadius
     }),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Avatar, _objectSpread({}, props))
+    children: /*#__PURE__*/_jsx(Avatar, {
+      ...props
+    })
   });
 }
 AvatarWithErrorBoundary.propTypes = Avatar.propTypes;

package/lib/Badge/index.js

@@ -1,48 +1,31 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _Colors = _interopRequireDefault(require("../Colors"));
-var _Util = require("../Util");
-var _deprecate = require("../Util/deprecate");
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-const _excluded = ["type", "content", "children", "style", "className", "forwardedRef"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import colors from '../Colors';
+import { mergeProps } from '../Util';
+import { withDeprecated } from '../Util/deprecate';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
 const types = {
   error: {
-    color: _Colors.default.common.white,
-    backgroundColor: _Colors.default.error.main
+    color: colors.common.white,
+    backgroundColor: colors.error.main
   },
   warning: {
-    color: _Colors.default.common.white,
-    backgroundColor: _Colors.default.warning.main
+    color: colors.common.white,
+    backgroundColor: colors.warning.main
   },
   success: {
-    color: _Colors.default.common.white,
-    backgroundColor: _Colors.default.success.main
+    color: colors.common.white,
+    backgroundColor: colors.success.main
   },
   primary: {
-    color: _Colors.default.common.white,
-    backgroundColor: _Colors.default.primary.main
+    color: colors.common.white,
+    backgroundColor: colors.primary.main
   },
   reverse: {
-    color: _Colors.default.common.white,
-    backgroundColor: _Colors.default.grey[900]
+    color: colors.common.white,
+    backgroundColor: colors.grey[900]
   }
 };
 
@@ -63,32 +46,32 @@ const types = {
  * @returns {JSX.Element}
  */
 function Badge(props) {
-  const newProps = (0, _Util.mergeProps)(props, Badge, ['style']);
+  const newProps = mergeProps(props, Badge, ['style']);
   const {
-      type,
-      content,
-      children,
-      style,
-      className,
-      forwardedRef
-    } = newProps,
-    rest = _objectWithoutProperties(newProps, _excluded);
+    type,
+    content,
+    children,
+    style,
+    className,
+    forwardedRef,
+    ...rest
+  } = newProps;
   const styles = Object.assign(types[type] || types.primary, style);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Span, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(Span, {
     ref: forwardedRef,
     component: "span",
     className: className,
-    style: styles
-  }, rest), {}, {
+    style: styles,
+    ...rest,
     children: content || children
-  }));
+  });
 }
 Badge.propTypes = {
-  children: _propTypes.default.any.isRequired,
-  content: _propTypes.default.string,
-  type: _propTypes.default.oneOf(Object.keys(types)),
-  className: _propTypes.default.string,
-  style: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string])
+  children: PropTypes.any.isRequired,
+  content: PropTypes.string,
+  type: PropTypes.oneOf(Object.keys(types)),
+  className: PropTypes.string,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
 };
 Badge.defaultProps = {
   type: 'primary',
@@ -96,10 +79,20 @@ Badge.defaultProps = {
   className: '',
   style: '{}'
 };
-var _default = exports.default = (0, _deprecate.withDeprecated)( /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Badge, _objectSpread(_objectSpread({}, props), {}, {
+export default withDeprecated( /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Badge, {
+  ...props,
   forwardedRef: ref
-}))), {
+})), {
   name: 'Badge',
   alternative: '@arcblock/ux/lib/Tag'
 });
-const Span = (0, _Theme.styled)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  && {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    padding: 2px 10px;\n    height: 24px;\n    line-height: 24px;\n  }\n"])));
+const Span = styled(Typography)`
+  && {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2px 10px;
+    height: 24px;
+    line-height: 24px;
+  }
+`;