@arcblock/ux 0.78.26 → 1.6.60

package/lib/Locale/selector.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _styles = require("@material-ui/core/styles");
+
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
@@ -27,7 +29,7 @@ var _MenuList = _interopRequireDefault(require("@material-ui/core/MenuList"));
 
 var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
 
-var _Util = require("@arcblock/ux/lib/Util");
+var _Util = require("../Util");
 
 var _context = require("./context");
 
@@ -35,11 +37,13 @@ var _globeDark = _interopRequireDefault(require("./images/globe-dark.png"));
 
 var _globeLight = _interopRequireDefault(require("./images/globe-light.png"));
 
+const _excluded = ["dark", "showText", "popperProps"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 _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; }
 
@@ -51,14 +55,15 @@ function LocaleSelector(props) {
     showText,
     popperProps
   } = props,
-        rest = _objectWithoutProperties(props, ["dark", "showText", "popperProps"]);
+        rest = _objectWithoutProperties(props, _excluded);
 
   const {
     locale,
     changeLocale
   } = (0, _react.useContext)(_context.LocaleContext);
-  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const anchorEl = (0, _react.useRef)(null);
   const [open, setOpen] = (0, _react.useState)(false);
+  const theme = (0, _styles.useTheme)();
 
   const onSelect = newLocale => {
     changeLocale(newLocale);
@@ -69,40 +74,48 @@ function LocaleSelector(props) {
     }
   };
 
+  function onClose(e) {
+    var _anchorEl$current;
+
+    if ((_anchorEl$current = anchorEl.current) !== null && _anchorEl$current !== void 0 && _anchorEl$current.contains(e.target)) return;
+    setOpen(false);
+  }
+
   const ButtonComponent = showText ? _Button.default : _IconButton.default;
-  return _react.default.createElement(Div, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(Div, Object.assign({
     component: "div",
-    dark: dark
-  }, rest), _react.default.createElement(ButtonComponent, {
-    buttonRef: node => setAnchorEl(node),
+    dark: dark,
+    theme: theme
+  }, rest), /*#__PURE__*/_react.default.createElement(ButtonComponent, {
+    ref: anchorEl,
     className: "trigger",
     onClick: () => setOpen(!open)
-  }, _react.default.createElement("img", {
+  }, /*#__PURE__*/_react.default.createElement("img", {
     src: dark ? _globeDark.default : _globeLight.default,
     className: "trigger-image",
     alt: "globe"
-  }), showText ? _react.default.createElement(_Typography.default, {
+  }), showText ? /*#__PURE__*/_react.default.createElement(_Typography.default, {
     component: "strong",
     className: "trigger-text"
-  }, _context.languages.find(x => x.value === locale).text) : ''), _react.default.createElement(_Popper.default, Object.assign({
+  }, _context.languages.find(x => x.value === locale).text) : ''), /*#__PURE__*/_react.default.createElement(_Popper.default, Object.assign({
     open: open,
-    anchorEl: anchorEl
+    anchorEl: anchorEl.current
   }, popperProps, {
     disablePortal: true
-  }), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "locales"
-  }, _react.default.createElement(_ClickAwayListener.default, {
-    onClickAway: () => setOpen(false)
-  }, _react.default.createElement(_MenuList.default, null, _context.languages.map((_ref) => {
+  }, /*#__PURE__*/_react.default.createElement(_ClickAwayListener.default, {
+    onClickAway: onClose
+  }, /*#__PURE__*/_react.default.createElement(_MenuList.default, null, _context.languages.map(_ref => {
     let {
       value,
       text
     } = _ref;
-    return _react.default.createElement(_MenuItem.default, {
+    return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
       key: value,
       className: "locale-item",
       onClick: () => onSelect(value, text)
-    }, _react.default.createElement(_Check.default, {
+    }, /*#__PURE__*/_react.default.createElement(_Check.default, {
       className: value === locale ? 'check-icon check-icon-visible' : 'check-icon',
       fontSize: "small"
     }), text);
@@ -128,5 +141,5 @@ exports.default = _default;
 
 const Div = _styledComponents.default.div.withConfig({
   displayName: "selector__Div",
-  componentId: "wfz3sf-0"
+  componentId: "sc-wfz3sf-0"
 })([".trigger{display:flex;flex-direction:column;justify-content:center;font-size:14px;.trigger-image{width:", "px;height:", "px;}.trigger-text{margin-left:5px;font-size:14px;}}.locales{background:", ";}.locale-item{font-size:16px;font-style:normal;font-stretch:normal;line-height:normal;letter-spacing:2px;text-align:center;color:", ";cursor:pointer;display:flex;padding:16px;align-items:center;.check-icon{visibility:hidden;margin-right:4px;}.check-icon-visible{visibility:visible;}}"], props => props.size, props => props.size, props => (0, _Util.getBackground)(props), props => (0, _Util.getColor)(props));

package/lib/Logo/index.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+const _excluded = ["showText", "showLogo", "mode", "layout"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }
@@ -18,13 +20,13 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 
 var LightLogo = function LightLogo(props) {
-  return _react.default.createElement("svg", props, _react.default.createElement("g", {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
     stroke: "#FFF"
-  }, _react.default.createElement("path", {
+  }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25m-43.301 0l43.301-25"
-  }), _react.default.createElement("path", {
+  }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"
   })));
 };
@@ -37,7 +39,7 @@ LightLogo.defaultProps = {
 };
 
 var LightText = function LightText(props) {
-  return _react.default.createElement("svg", props, _react.default.createElement("path", {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
     fill: "#FFF",
     fillRule: "evenodd",
     d: "M6.5.053h2.864L16.028 18h-2.114l-1.391-3.795H3.504L2.14 18H0L6.5.053zm1.474 1.481L4.04 12.563h7.895L7.975 1.534zm14.44 3.542c1.27 0 2.198.296 2.78.892.58.597.871 1.52.871 2.765v.36c0 .117-.008.245-.026.385h-1.826c.018-.14.027-.292.027-.452v-.48c0-.766-.186-1.283-.551-1.55-.367-.266-.916-.4-1.65-.4-.968 0-1.698.24-2.189.723-.493.48-.738 1.208-.738 2.187v8.308h-1.88V5.341h1.824l-.079 1.443c.376-.614.863-1.053 1.463-1.316a4.868 4.868 0 0 1 1.974-.392zM35.95 15.903c.501-.328.752-1.205.752-2.63h1.852c0 1.924-.403 3.178-1.208 3.765-.806.589-2.158.882-4.055.882-2.65 0-4.24-.538-4.766-1.616-.529-1.076-.793-2.781-.793-5.114 0-2.118.367-3.645 1.102-4.581.732-.934 2.209-1.401 4.43-1.401 1.378 0 2.569.221 3.572.665 1.002.446 1.503 1.497 1.503 3.153v.188a.234.234 0 0 0-.027.106v.106h-1.826c0-1.12-.228-1.851-.685-2.188-.455-.34-1.23-.507-2.322-.507-1.665 0-2.713.259-3.142.782-.43.524-.646 1.67-.646 3.44V12.2c0 1.4.161 2.448.485 3.15.322.7 1.297 1.048 2.926 1.048 1.397 0 2.346-.165 2.848-.495zm15.87-.318c.606-.328.912-1.263.912-2.805 0-.924-.147-1.69-.444-2.302-.294-.611-1.007-.917-2.133-.917h-7.09v6.516h5.528c1.543 0 2.617-.165 3.226-.492zm-8.754-13.85v6.036h5.665c1.325 0 2.239-.214 2.737-.643.503-.428.755-1.288.755-2.575 0-1.09-.192-1.834-.577-2.226-.385-.394-1.116-.591-2.19-.591h-6.39zM52 8.466c1.185.322 1.956.816 2.314 1.482.359.67.54 1.581.54 2.739 0 1.6-.325 2.858-.97 3.764-.647.909-1.874 1.363-3.686 1.363H41.05V0h8.62c1.592 0 2.759.312 3.503.934.744.624 1.115 1.78 1.115 3.473 0 1.014-.129 1.855-.386 2.522-.258.669-.89 1.181-1.903 1.536zm5.43 9.348V.001h1.907v17.812H57.43zm13.374-6.168v-.708c0-1.539-.141-2.636-.426-3.297-.284-.658-1.191-.99-2.718-.99h-.401c-1.617 0-2.625.25-3.025.75-.399.5-.599 1.632-.599 3.4v2.021c0 .206.008.407.024.602a9.48 9.48 0 0 0 .216 1.474c.106.465.275.822.505 1.072.196.179.435.302.72.373.283.072.586.116.905.135h1.254c1.083 0 1.914-.151 2.492-.456.577-.302.9-1.043.972-2.22a18.338 18.338 0 0 0 .054-1.447c.015-.233.027-.47.027-.71zm-3.786-6.518c2.399 0 3.956.414 4.672 1.243.717.828 1.074 2.418 1.074 4.766 0 2.048-.219 3.704-.657 4.966C71.668 17.367 70.16 18 67.581 18c-2.237 0-3.782-.347-4.632-1.042-.85-.694-1.275-2.205-1.275-4.54v-1.174c0-2.12.318-3.669.954-4.646.635-.98 2.099-1.471 4.39-1.471zm16.434 10.776c.501-.328.752-1.205.752-2.63h1.853c0 1.924-.403 3.178-1.209 3.765-.804.589-2.157.882-4.054.882-2.648 0-4.24-.538-4.767-1.616-.528-1.076-.79-2.781-.79-5.114 0-2.118.365-3.645 1.1-4.581.732-.934 2.21-1.401 4.43-1.401 1.377 0 2.568.221 3.571.665 1.003.446 1.504 1.497 1.504 3.153v.188a.232.232 0 0 0-.026.106v.106H83.99c0-1.12-.229-1.851-.686-2.188-.455-.34-1.23-.507-2.323-.507-1.665 0-2.712.259-3.142.782-.43.524-.643 1.67-.643 3.44V12.2c0 1.4.16 2.448.482 3.15.324.7 1.298 1.048 2.927 1.048 1.397 0 2.346-.165 2.847-.495zm9.236-4.82L99 17.813h-2.47l-5.317-6.01h-.752v6.01h-1.907V0h1.907v10.362h.752l4.512-5.02h2.309l-5.346 5.741z"
@@ -52,13 +54,13 @@ LightText.defaultProps = {
 };
 
 var DarkLogo = function DarkLogo(props) {
-  return _react.default.createElement("svg", props, _react.default.createElement("g", {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
     stroke: "#000"
-  }, _react.default.createElement("path", {
+  }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25m-43.301 0l43.301-25"
-  }), _react.default.createElement("path", {
+  }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"
   })));
 };
@@ -71,7 +73,7 @@ DarkLogo.defaultProps = {
 };
 
 var DarkText = function DarkText(props) {
-  return _react.default.createElement("svg", props, _react.default.createElement("path", {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
     fillRule: "evenodd",
     d: "M6.5.053h2.864L16.028 18h-2.114l-1.391-3.795H3.504L2.14 18H0L6.5.053zm1.474 1.481L4.04 12.563h7.895L7.975 1.534zm14.44 3.542c1.27 0 2.198.296 2.78.892.58.597.871 1.52.871 2.765v.36c0 .117-.008.245-.026.385h-1.826c.018-.14.027-.292.027-.452v-.48c0-.766-.186-1.283-.551-1.55-.367-.266-.916-.4-1.65-.4-.968 0-1.698.24-2.189.723-.493.48-.738 1.208-.738 2.187v8.308h-1.88V5.341h1.824l-.079 1.443c.376-.614.863-1.053 1.463-1.316a4.868 4.868 0 0 1 1.974-.392zM35.95 15.903c.501-.328.752-1.205.752-2.63h1.852c0 1.924-.403 3.178-1.208 3.765-.806.589-2.158.882-4.055.882-2.65 0-4.24-.538-4.766-1.616-.529-1.076-.793-2.781-.793-5.114 0-2.118.367-3.645 1.102-4.581.732-.934 2.209-1.401 4.43-1.401 1.378 0 2.569.221 3.572.665 1.002.446 1.503 1.497 1.503 3.153v.188a.234.234 0 0 0-.027.106v.106h-1.826c0-1.12-.228-1.851-.685-2.188-.455-.34-1.23-.507-2.322-.507-1.665 0-2.713.259-3.142.782-.43.524-.646 1.67-.646 3.44V12.2c0 1.4.161 2.448.485 3.15.322.7 1.297 1.048 2.926 1.048 1.397 0 2.346-.165 2.848-.495zm15.87-.318c.606-.328.912-1.263.912-2.805 0-.924-.147-1.69-.444-2.302-.294-.611-1.007-.917-2.133-.917h-7.09v6.516h5.528c1.543 0 2.617-.165 3.226-.492zm-8.754-13.85v6.036h5.665c1.325 0 2.239-.214 2.737-.643.503-.428.755-1.288.755-2.575 0-1.09-.192-1.834-.577-2.226-.385-.394-1.116-.591-2.19-.591h-6.39zM52 8.466c1.185.322 1.956.816 2.314 1.482.359.67.54 1.581.54 2.739 0 1.6-.325 2.858-.97 3.764-.647.909-1.874 1.363-3.686 1.363H41.05V0h8.62c1.592 0 2.759.312 3.503.934.744.624 1.115 1.78 1.115 3.473 0 1.014-.129 1.855-.386 2.522-.258.669-.89 1.181-1.903 1.536zm5.43 9.348V.001h1.907v17.812H57.43zm13.374-6.168v-.708c0-1.539-.141-2.636-.426-3.297-.284-.658-1.191-.99-2.718-.99h-.401c-1.617 0-2.625.25-3.025.75-.399.5-.599 1.632-.599 3.4v2.021c0 .206.008.407.024.602a9.48 9.48 0 0 0 .216 1.474c.106.465.275.822.505 1.072.196.179.435.302.72.373.283.072.586.116.905.135h1.254c1.083 0 1.914-.151 2.492-.456.577-.302.9-1.043.972-2.22a18.338 18.338 0 0 0 .054-1.447c.015-.233.027-.47.027-.71zm-3.786-6.518c2.399 0 3.956.414 4.672 1.243.717.828 1.074 2.418 1.074 4.766 0 2.048-.219 3.704-.657 4.966C71.668 17.367 70.16 18 67.581 18c-2.237 0-3.782-.347-4.632-1.042-.85-.694-1.275-2.205-1.275-4.54v-1.174c0-2.12.318-3.669.954-4.646.635-.98 2.099-1.471 4.39-1.471zm16.434 10.776c.501-.328.752-1.205.752-2.63h1.853c0 1.924-.403 3.178-1.209 3.765-.804.589-2.157.882-4.054.882-2.648 0-4.24-.538-4.767-1.616-.528-1.076-.79-2.781-.79-5.114 0-2.118.365-3.645 1.1-4.581.732-.934 2.21-1.401 4.43-1.401 1.377 0 2.568.221 3.571.665 1.003.446 1.504 1.497 1.504 3.153v.188a.232.232 0 0 0-.026.106v.106H83.99c0-1.12-.229-1.851-.686-2.188-.455-.34-1.23-.507-2.323-.507-1.665 0-2.712.259-3.142.782-.43.524-.643 1.67-.643 3.44V12.2c0 1.4.16 2.448.482 3.15.324.7 1.298 1.048 2.927 1.048 1.397 0 2.346-.165 2.847-.495zm9.236-4.82L99 17.813h-2.47l-5.317-6.01h-.752v6.01h-1.907V0h1.907v10.362h.752l4.512-5.02h2.309l-5.346 5.741z"
   }));
@@ -91,15 +93,15 @@ function Logo(_ref) {
     mode,
     layout
   } = _ref,
-      rest = _objectWithoutProperties(_ref, ["showText", "showLogo", "mode", "layout"]);
+      rest = _objectWithoutProperties(_ref, _excluded);
 
-  const logo = mode === 'light' ? _react.default.createElement(LightLogo, null) : _react.default.createElement(DarkLogo, null);
-  const text = mode === 'light' ? _react.default.createElement(LightText, {
+  const logo = mode === 'light' ? /*#__PURE__*/_react.default.createElement(LightLogo, null) : /*#__PURE__*/_react.default.createElement(DarkLogo, null);
+  const text = mode === 'light' ? /*#__PURE__*/_react.default.createElement(LightText, {
     className: "logo-text"
-  }) : _react.default.createElement(DarkText, {
+  }) : /*#__PURE__*/_react.default.createElement(DarkText, {
     className: "logo-text"
   });
-  return _react.default.createElement(Container, Object.assign({
+  return /*#__PURE__*/_react.default.createElement(Container, Object.assign({
     layout: layout
   }, rest), showLogo && logo, showText && text);
 }

package/lib/Metric/index.js

@@ -16,7 +16,6 @@ var _image = _interopRequireDefault(require("../Icon/image"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable react/no-danger */
-// eslint-disable-next-line object-curly-newline
 function Metric(_ref) {
   let {
     icon,
@@ -28,24 +27,24 @@ function Metric(_ref) {
     prefix
   } = _ref;
 
-  const metric = _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("div", {
+  const metric = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "metric__image"
-  }, _react.default.createElement(_image.default, {
+  }, /*#__PURE__*/_react.default.createElement(_image.default, {
     name: icon,
     alt: name,
     size: 30,
     prefix: prefix,
     color: "#222222"
-  })), _react.default.createElement("div", null, _react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "metric__number ".concat(animated ? 'metric__number--animated' : ''),
     dangerouslySetInnerHTML: {
       __html: value
     }
-  }), _react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "metric__name"
   }, name)));
 
-  return _react.default.createElement(Container, null, url ? _react.default.createElement(LinkComponent, {
+  return /*#__PURE__*/_react.default.createElement(Container, null, url ? /*#__PURE__*/_react.default.createElement(LinkComponent, {
     to: url
   }, metric) : metric);
 }

package/lib/NFTDisplay/README.md

@@ -0,0 +1,59 @@
+# NFTDisplay
+
+## 01 使用
+
+### 01.01 默认样式
+
+NFTDisplay 组件默认尺寸为 *150x150*, 可以通过 css 设置 width/height. 固定尺寸的使用场景感觉比较少, 多数情况应该都需要将 NFTDisplay 应用于响应式布局中. 
+
+### 01.02 aspect ratio
+
+可以使用 aspect prop 设置 NFTDisplay 的宽高比, NFTDisplay 包裹一两层 div/span 标签 (用来控制布局, 没有直接把 img 标签渲染出来), 所以这里说的长宽比指的不是 img 的长宽比, 图片的尺寸大小不一, 长宽比也是既定的, aspect prop 控制的是包裹 img 容器的长宽比.
+
+NFTDisplay 宽高比的计算是根据父容器的 width 来确定的 (NFTDisplay 会填充整个宽度), 所以可以通过控制父容器的 width 来控制 NFTDisplay 的大小.
+
+### 01.03 inset
+
+inset 设置为 true 时 NFTDisplay 会镶嵌/填满父容器 (并垂直+水平居中显示图片), 所以父容器必须有明确的宽高 (尤其是高度). 响应式布局中应该会比较常用.
+
+注: inset 比 aspect ratio 优先级高, 如果同时设置了 inset 和 aspect, 则后者不生效.
+
+### 01.04 asset data (prop)
+
+可以为 asset data prop 传入 raw data 或 parsed data, 避免多次解析 asset data.
+
+### 01.05 broken image & error handling
+
+* display 加载失败时会显示一个 broken-image, 可以从外部覆盖 `.nft-display--broken` 的样式来调整尺寸/颜色等样式
+* error handling, 这部分感觉出错原因可能性会很多, 有 json 解析错误、某字段缺失、某 object 指定路径的值缺失、nft type 不支持等等, 暂时没想到如何更合理的捕获和处理这些错误. 
+
+### 02 svg 加载
+
+基于 `img` 标签加载 NFT Display. 几种 nft type 的加载:
+
+- url  
+  直接使用 `<img>`
+- svg_gzipped  
+  content => ungzip => svgToImgUrl => `<img>`
+- svg (未测试, 需要测试数据)  
+  content => svgToImgUrl => `<img>`
+- html (TODO)  
+  基于 `<img>` 的加载方式不适用, 目前没有发现这种 nft type 的测试数据
+
+基于 `<img>` 标签的加载方式没有样式污染问题, 加载、尺寸控制也比较方便, 不过据说有些情况下 svg 可能无法正确显示 (比如 svg 加载了 font|image 资源), 目前没有发现问题, 还需要更多的观察
+
+## 03 iframe 第三方嵌入 (TODO)
+
+需要设计 iframe 的 API (iframe#src 查询参数), 目前想到的参数:
+
+- address : asset address  
+  调用 getAssetState 接口获取 display 数据进行展示
+- 样式控制相关的参数 ?
+
+## 04 参考
+
+* [提供一个 NFT display 组件 · Issue #199 · ArcBlock/ux](https://github.com/ArcBlock/ux/issues/199)
+* [2021徽章出现奇怪的渲染 · Issue #230 · blocklet/nft-marketplace](https://github.com/blocklet/nft-marketplace/issues/230)
+* [Adding vector graphics to the Web - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
+* [The Best Way to Embed SVG on HTML (2021)](https://vecta.io/blog/best-way-to-embed-svg)
+* [javascript - Do I always need to call URL.revokeObjectURL() explicitly? - Stack Overflow](https://stackoverflow.com/questions/49209756/do-i-always-need-to-call-url-revokeobjecturl-explicitly)

package/lib/NFTDisplay/aspect-ratio-container.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+const _excluded = ["aspect", "children"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 AspectRatioContainer(_ref) {
+  let {
+    aspect,
+    children
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(Root, Object.assign({
+    aspect: aspect
+  }, rest), /*#__PURE__*/_react.default.createElement("span", {
+    className: "aspect-ratio-container__inner"
+  }, children));
+}
+
+AspectRatioContainer.propTypes = {
+  aspect: _propTypes.default.number.isRequired,
+  children: _propTypes.default.node.isRequired
+};
+
+const Root = _styledComponents.default.span.withConfig({
+  displayName: "aspect-ratio-container__Root",
+  componentId: "sc-qqh9bx-0"
+})(["display:block;position:relative;width:100%;height:0;padding-bottom:", "%;.aspect-ratio-container__inner{position:absolute;top:0;bottom:0;left:0;right:0;}"], _ref2 => {
+  let {
+    aspect
+  } = _ref2;
+  return 1 / aspect * 100;
+});
+
+var _default = AspectRatioContainer;
+exports.default = _default;

package/lib/NFTDisplay/broken.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Broken;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _BrokenImage = _interopRequireDefault(require("@material-ui/icons/BrokenImage"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Broken() {
+  return /*#__PURE__*/_react.default.createElement(Root, {
+    className: "nft-display__broken"
+  });
+}
+
+const Root = (0, _styledComponents.default)(_BrokenImage.default).withConfig({
+  displayName: "broken__Root",
+  componentId: "sc-8n0p34-0"
+})(["&&{width:100%;max-width:200px;height:auto;max-width:100%;max-height:100%;fill:#ddd;}"]);