@arcblock/ux 2.4.44 → 2.4.45

package/lib/Address/compact-text.js

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CompactText;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Tooltip = _interopRequireWildcard(require("@mui/material/Tooltip"));
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _Theme = require("../Theme");
+
+var _ClickToCopy = require("../ClickToCopy");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["className"],
+      _excluded2 = ["children"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+const StyledTooltip = (0, _Theme.styled)(_ref => {
+  let {
+    className
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, _objectSpread(_objectSpread({}, props), {}, {
+    classes: {
+      popper: className
+    }
+  }));
+})({
+  ["& .".concat(_Tooltip.tooltipClasses.tooltip)]: {
+    maxWidth: 360,
+    wordBreak: 'break-all'
+  }
+}); // 递归, 将 text (string) 部分替换为 CompactText (保持元素结构)
+// eslint-disable-next-line react/prop-types
+
+function RecursiveWrapper(_ref2) {
+  let {
+    children
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  const wrappedChildren = _react.Children.map(children, child => {
+    if (typeof child === 'string') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(CompactText, _objectSpread(_objectSpread({}, rest), {}, {
+        children: child
+      }));
+    }
+
+    if (child.props && child.props.children) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(child.type, _objectSpread(_objectSpread({}, child.props), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RecursiveWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+          children: child.props.children
+        }))
+      }));
+    }
+
+    return child;
+  });
+
+  return wrappedChildren;
+}
+/**
+ * 紧凑文本组件 (显示首尾, 中间截断显示省略号), 仅考虑等宽字体的情况
+ */
+
+
+function CompactText(_ref3) {
+  let {
+    startChars,
+    endChars,
+    children,
+    showCopyButtonInTooltip
+  } = _ref3;
+
+  if (typeof children !== 'string') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(RecursiveWrapper, {
+      startChars: startChars,
+      endChars: endChars,
+      showCopyButtonInTooltip: showCopyButtonInTooltip,
+      children: children
+    });
+  } // stopPropagation: 当 tooltip 处于 link 中时, 避免点击复制时触发链接跳转
+
+
+  const tooltipContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    display: "flex",
+    alignItems: "center",
+    lineHeight: 1,
+    onClick: e => e.stopPropagation(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      children: children
+    }), showCopyButtonInTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickToCopy.CopyButton, {
+      content: children,
+      showTooltip: false,
+      style: {
+        fontSize: 16,
+        marginLeft: 4
+      }
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTooltip, {
+    title: tooltipContent,
+    placement: "top",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      children: [children.slice(0, startChars), "...", children.slice(children.length - endChars)]
+    })
+  });
+}
+
+CompactText.propTypes = {
+  startChars: _propTypes.default.number,
+  endChars: _propTypes.default.number,
+  children: _propTypes.default.node.isRequired,
+  // 在 tooltip 中完整地址后显示复制按钮
+  showCopyButtonInTooltip: _propTypes.default.bool
+};
+CompactText.defaultProps = {
+  startChars: 6,
+  endChars: 6,
+  showCopyButtonInTooltip: false
+};

package/lib/Address/did-address.js

@@ -0,0 +1,218 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatAddress = exports.default = void 0;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+require("@fontsource/ubuntu-mono/400.css");
+
+var _useMountedState = _interopRequireDefault(require("react-use/lib/useMountedState"));
+
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+
+var _colors = require("@mui/material/colors");
+
+var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
+
+var _ContentCopy = _interopRequireDefault(require("@mui/icons-material/ContentCopy"));
+
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+
+var _Theme = require("../Theme");
+
+var _compactText = _interopRequireDefault(require("./compact-text"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+const _excluded = ["component", "size", "copyable", "content", "children", "prepend", "append", "compact", "startChars", "endChars", "locale", "showCopyButtonInTooltip"];
+
+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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+const formatAddress = str => str.split(':').pop();
+
+exports.formatAddress = formatAddress;
+const translations = {
+  en: {
+    copy: 'Click To Copy',
+    copied: 'Copied!'
+  },
+  zh: {
+    copy: '点击复制',
+    copied: '已复制!'
+  }
+};
+/**
+ * DidAddress 组件 (新版设计)
+ *
+ * - 样式调整
+ * - click-to-copy 调整
+ * - 长文本截断处理 (Ellipsis)
+ * - 支持 inline 或 block 的显示方式
+ * - 支持紧凑模式, 该模式下:
+ *   - 占用宽度较小, 因此不考虑水平空间不够用的情况, 且忽略末尾省略号
+ *   - 对于多层元素结构的 children, 保持元素结构, 将最内层 text 替换为 CompactText 组件
+ *   - 为保证 copy 功能正常工作, 原 children 始终渲染, 但在紧凑式下会隐藏
+ *   - 可配合 useMediaQuery 使用
+ */
+
+const DidAddress = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    component,
+    size,
+    copyable,
+    content,
+    children,
+    prepend,
+    append,
+    compact,
+    startChars,
+    endChars,
+    locale,
+    showCopyButtonInTooltip
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  if (!translations[locale]) {
+    // eslint-disable-next-line no-param-reassign
+    locale = 'en';
+  } // 避免 unmounted 后 setTimeout handler 依然改变 state
+
+
+  const isMounted = (0, _useMountedState.default)();
+  const [copied, setCopied] = (0, _react.useState)(false);
+  const textRef = (0, _react.useRef)();
+
+  const onCopy = e => {
+    e.stopPropagation();
+    (0, _copyToClipboard.default)(content || textRef.current.textContent);
+    setCopied(true); // 恢复 copied 状态
+
+    setTimeout(() => {
+      if (isMounted()) {
+        setCopied(false);
+      }
+    }, 1500);
+  };
+
+  let copyElement = null;
+
+  if (copyable) {
+    copyElement = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "did-address-copy-wrapper",
+      title: copied ? '' : translations[locale].copy,
+      children: copied ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+        title: translations[locale].copied,
+        placement: "bottom",
+        arrow: true,
+        open: copied,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Check.default, {
+          className: "did-address-copy",
+          style: {
+            color: _colors.green[500]
+          }
+        })
+      }) :
+      /*#__PURE__*/
+
+      /* title prop 直接加在 icon 上不生效 */
+      (0, _jsxRuntime.jsx)(_ContentCopy.default, {
+        className: "did-address-copy",
+        onClick: onCopy
+      })
+    });
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, _objectSpread(_objectSpread({
+    as: component,
+    size: size
+  }, rest), {}, {
+    ref: ref,
+    children: [prepend, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      ref: textRef,
+      className: "did-address-text did-address-truncate",
+      style: {
+        display: compact ? 'none' : 'inline'
+      },
+      children: children
+    }), compact && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "did-address-text",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_compactText.default, {
+        startChars: startChars,
+        endChars: endChars,
+        showCopyButtonInTooltip: showCopyButtonInTooltip,
+        children: children
+      })
+    }), copyElement, append]
+  }));
+});
+var _default = DidAddress;
+exports.default = _default;
+DidAddress.propTypes = {
+  component: _propTypes.default.string,
+  size: _propTypes.default.number,
+  copyable: _propTypes.default.bool,
+  // compact mode 下, hover 时会在 tooltip 中显示完整地址, showCopyButtonInTooltip = true 时会在完整地址后显示一个复制按钮
+  showCopyButtonInTooltip: _propTypes.default.bool,
+  children: _propTypes.default.any,
+  content: _propTypes.default.string,
+  inline: _propTypes.default.bool,
+  prepend: _propTypes.default.any,
+  append: _propTypes.default.any,
+  // 紧凑模式
+  compact: _propTypes.default.bool,
+  startChars: _propTypes.default.number,
+  endChars: _propTypes.default.number,
+  locale: _propTypes.default.oneOf(['en', 'zh'])
+};
+DidAddress.defaultProps = {
+  component: 'span',
+  size: 0,
+  copyable: true,
+  showCopyButtonInTooltip: false,
+  children: null,
+  content: '',
+  inline: false,
+  prepend: null,
+  append: null,
+  compact: false,
+  startChars: 6,
+  endChars: 6,
+  locale: 'en'
+};
+
+const getFontSize = size => {
+  // 12px 及以上的 size 有效, 否则返回 inherit
+  if (size && Number(size) >= 12) {
+    return "".concat(Number(size), "px");
+  }
+
+  return 'inherit';
+};
+
+const Root = (0, _Theme.styled)('div', {
+  shouldForwardProp: prop => prop !== 'inline'
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: 'Ubuntu Mono', monospace;\n  && {\n    display: ", ";\n    align-items: center;\n    max-width: 100%;\n    overflow: hidden;\n    color: #ccc;\n    font-size: ", ";\n    font-weight: 400;\n\n    svg {\n      fill: currentColor;\n    }\n  }\n\n  .did-address-text {\n    color: #666;\n  }\n  /* truncate string with ellipsis */\n  .did-address-truncate {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .did-address-copy {\n    flex: 0 0 auto;\n  }\n  .did-address-copy-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    margin-left: 8px;\n  }\n  .did-address-copy {\n    font-size: 1em;\n    color: #999;\n    cursor: pointer;\n  }\n\n  /* link */\n  a {\n    color: #666;\n  }\n  &:hover a {\n    color: #222;\n    text-decoration: underline;\n  }\n"])), _ref2 => {
+  let {
+    inline
+  } = _ref2;
+  return inline ? 'inline-flex' : 'flex';
+}, props => getFontSize(props.size));

package/lib/Address/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatAddress = exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _didAddress = _interopRequireDefault(require("./did-address"));
+
+var _responsiveDidAddress = _interopRequireDefault(require("./responsive-did-address"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["responsive"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+const formatAddress = str => str.split(':').pop();
+
+exports.formatAddress = formatAddress;
+
+function DidAddressWrapper(_ref) {
+  let {
+    responsive
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  if (responsive) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_responsiveDidAddress.default, _objectSpread({}, rest));
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_didAddress.default, _objectSpread({}, rest));
+}
+
+var _default = DidAddressWrapper;
+exports.default = _default;
+DidAddressWrapper.propTypes = {
+  responsive: _propTypes.default.bool
+};
+DidAddressWrapper.defaultProps = {
+  responsive: true
+};

package/lib/Address/responsive-did-address.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ResponsiveDidAddress;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _useMeasure = _interopRequireDefault(require("react-use/lib/useMeasure"));
+
+var _Theme = require("../Theme");
+
+var _didAddress = _interopRequireDefault(require("./did-address"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+const _excluded = ["style", "className", "component"];
+
+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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+/**
+ * 根据父容器宽度自动切换 compact 模式
+ *
+ * 实现逻辑:
+ * - DidAddress 外层包裹一个容器, 其宽度自动撑满父容器宽度 (即这个容器需要是块级元素或 100% 宽的 inline-block)
+ * - DidAddress 本身以 inlne 形式渲染 (方便探测 did-address 的 full-width)
+ * - 组件 mounted 时记录 did address 的 full-width (非 compact 模式的宽度)
+ * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
+ * - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
+ */
+function ResponsiveDidAddress(_ref) {
+  let {
+    style,
+    className,
+    component
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const [compact, setCompact] = (0, _react.useState)(false); // did address 完整显示时的宽度
+
+  const [addressFullWidth, setAddressFullWidth] = (0, _react.useState)(null);
+  const [containerRef, {
+    width: containerWidth
+  }] = (0, _useMeasure.default)();
+  const ref = /*#__PURE__*/(0, _react.createRef)(); // 存储完整显示时 address 组件的宽度
+
+  (0, _react.useEffect)(() => {
+    if (!compact && addressFullWidth === null) {
+      setAddressFullWidth(ref.current.offsetWidth);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (containerWidth && addressFullWidth) {
+      setCompact(containerWidth < addressFullWidth);
+    }
+  }, [containerWidth, addressFullWidth]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+    as: component,
+    inline: rest.inline,
+    ref: containerRef,
+    style: style,
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDidAddress, _objectSpread(_objectSpread({}, rest), {}, {
+      component: component,
+      inline: true,
+      compact: compact,
+      ref: ref
+    }))
+  });
+}
+
+ResponsiveDidAddress.propTypes = {
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  component: _propTypes.default.string
+};
+ResponsiveDidAddress.defaultProps = {
+  style: {},
+  className: '',
+  component: 'span'
+};
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  overflow: hidden;\n  ", "\n"])), _ref2 => {
+  let {
+    inline
+  } = _ref2;
+  return inline && "\n    display: inline-block;\n    width: 100%;\n  ";
+});
+const StyledDidAddress = (0, _Theme.styled)(_didAddress.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  && {\n    max-width: none;\n  }\n  .did-address-text {\n    /* \u7981\u6B62\u6587\u672C Ellipsis/\u622A\u65AD, \u4EE5\u4FBF\u6D4B\u91CF\u771F\u5B9E\u7684\u5BBD\u5EA6 */\n    white-space: nowrap;\n    overflow: visible;\n    text-overflow: unset;\n  }\n"])));

package/lib/Avatar/did-motif.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _didMotif = require("@arcblock/did-motif");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["did", "size", "animation", "shape", "responsive"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+function DIDMotif(_ref) {
+  let {
+    did,
+    size,
+    animation,
+    shape,
+    responsive
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const svgRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(() => {
+    (0, _didMotif.update)(svgRef.current, did, {
+      size,
+      animation,
+      shape
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [did, size, shape]);
+
+  if (responsive) {
+    // fix avatar 显示问题 (safari 下父容器为 flex 时 inline svg 显示不出来, 需要明确指定 width)
+    const styles = _objectSpread(_objectSpread({}, rest.style), {}, {
+      width: '100%'
+    });
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", _objectSpread(_objectSpread({
+      ref: svgRef
+    }, rest), {}, {
+      style: styles
+    }));
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({}, rest), {}, {
+    style: _objectSpread({
+      display: 'inline-block',
+      width: size,
+      height: size
+    }, rest.style),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+      ref: svgRef
+    })
+  }));
+}
+
+DIDMotif.propTypes = {
+  did: _propTypes.default.string.isRequired,
+  size: _propTypes.default.number,
+  animation: _propTypes.default.bool,
+  // 直接返回 svg 元素, svg 尺寸由父窗口决定 (撑满父窗口)
+  responsive: _propTypes.default.bool,
+  shape: _propTypes.default.number
+};
+DIDMotif.defaultProps = {
+  size: 200,
+  animation: false,
+  responsive: false,
+  shape: null
+};
+var _default = DIDMotif;
+exports.default = _default;