@arcblock/ux 2.5.64 → 2.5.66

package/lib/NFTDisplay/index.js

@@ -13,6 +13,7 @@ var _get = _interopRequireDefault(require("lodash/get"));
 var _pako = _interopRequireDefault(require("pako"));
 var _base64Url = _interopRequireDefault(require("base64-url"));
 var _isSvg = _interopRequireDefault(require("is-svg"));
+var _reactSvg = require("react-svg");
 var _aspectRatioContainer = _interopRequireDefault(require("./aspect-ratio-container"));
 var _img = _interopRequireDefault(require("./svg-embedder/img"));
 var _inlineSvg = _interopRequireDefault(require("./svg-embedder/inline-svg"));
@@ -142,6 +143,7 @@ function NFTDisplay(_ref) {
         switch (type) {
           case 'url':
             {
+              var _state$fallback;
               const urlObj = new URL(content);
               if (!urlObj.searchParams.has('assetId')) {
                 urlObj.searchParams.append('assetId', address);
@@ -150,22 +152,51 @@ function NFTDisplay(_ref) {
                 urlObj.searchParams.append('vcId', vcId);
               }
               const url = urlObj.href;
-              return (
-                /*#__PURE__*/
-                // eslint-disable-next-line jsx-a11y/alt-text
-                (0, _jsxRuntime.jsx)("object", {
-                  data: url
-                  // onError={() => setState({ ...state, error: true })}
-                  ,
-                  onLoad: () => setState(_objectSpread(_objectSpread({}, state), {}, {
+              const safeOnLoad = () => {
+                if (state.loading) {
+                  setState(_objectSpread(_objectSpread({}, state), {}, {
                     loading: false
-                  })),
-                  style: {
-                    width: 'auto',
-                    height: 'auto'
+                  }));
+                }
+              };
+              return state.fallback ? (_state$fallback = state.fallback) === null || _state$fallback === void 0 ? void 0 : _state$fallback.call(state) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+                src: url,
+                beforeInjection: svg => {
+                  svg.setAttribute('style', 'pointer-events: none');
+                },
+                afterInjection: safeOnLoad,
+                onError: error => {
+                  var _error$message, _error$message2;
+                  let objectType = null;
+                  if ((error === null || error === void 0 ? void 0 : (_error$message = error.message) === null || _error$message === void 0 ? void 0 : _error$message.indexOf('Invalid content type: ')) > -1) {
+                    var _error$message$split;
+                    objectType = (_error$message$split = error.message.split('Invalid content type: ')) === null || _error$message$split === void 0 ? void 0 : _error$message$split[1];
+                  } else if ((error === null || error === void 0 ? void 0 : (_error$message2 = error.message) === null || _error$message2 === void 0 ? void 0 : _error$message2.indexOf('Unable to load SVG file: ')) > -1) {
+                    objectType = 'image/svg+xml';
                   }
-                })
-              );
+                  setState(_objectSpread(_objectSpread({}, state), {}, {
+                    // fallback to object, and use objectType to render
+                    fallback: () =>
+                    /*#__PURE__*/
+                    // eslint-disable-next-line jsx-a11y/alt-text
+                    (0, _jsxRuntime.jsx)("object", {
+                      type: objectType,
+                      data: url
+                      // onError={() => setState({ ...state, error: true })}
+                      ,
+                      onLoad: safeOnLoad,
+                      style: {
+                        width: 'auto',
+                        height: 'auto',
+                        pointerEvents: 'none'
+                      }
+                    }, url)
+                  }));
+                }
+                // evalScripts="always"
+                ,
+                wrapper: "div"
+              });
             }
           case 'uri':
             {
@@ -255,7 +286,7 @@ NFTDisplay.defaultProps = {
   minimumLoadingTime: 0,
   onCompleted: () => {}
 };
-const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  /* \u9ED8\u8BA4\u5C3A\u5BF8 */\n  width: 150px;\n  height: 150px;\n  overflow: hidden;\n\n  &,\n  img {\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  img {\n    width: 100%;\n    height: 100%;\n  }\n\n  &.nft-display--inset {\n    width: 100%;\n    height: 100%;\n  }\n"])));
+const Root = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  /* \u9ED8\u8BA4\u5C3A\u5BF8 */\n  width: 150px;\n  height: 150px;\n  overflow: hidden;\n\n  &,\n  img,\n  object {\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  img,\n  object {\n    width: 100%;\n    height: 100%;\n  }\n\n  &.nft-display--inset {\n    width: 100%;\n    height: 100%;\n  }\n"])));
 function withAspectRatio(Component) {
   // eslint-disable-next-line func-names, react/prop-types
   return function (_ref2) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.5.64",
+  "version": "2.5.66",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,11 +47,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "1f4e914738a7b804045c13e36be44d2fdad032cb",
+  "gitHead": "e2efc6b18c9495d805574465a7691b0367a82439",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.5.64",
-    "@arcblock/react-hooks": "^2.5.64",
+    "@arcblock/icons": "^2.5.66",
+    "@arcblock/react-hooks": "^2.5.66",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -83,6 +83,7 @@
     "react-player": "^1.15.3",
     "react-router-dom": "^6.4.2",
     "react-shadow": "^19.0.3",
+    "react-svg": "^16.1.18",
     "react-use": "^17.4.0",
     "rebound": "^0.1.0",
     "topojson-client": "^3.1.0",

package/src/NFTDisplay/index.js

@@ -7,6 +7,7 @@ import get from 'lodash/get';
 import pako from 'pako';
 import base64 from 'base64-url';
 import isSvg from 'is-svg';
+import { ReactSVG } from 'react-svg';
 
 import AspectRatioContainer from './aspect-ratio-container';
 import ImgSvgEmbedder from './svg-embedder/img';
@@ -127,13 +128,48 @@ function NFTDisplay({
             }
 
             const url = urlObj.href;
-            return (
-              // eslint-disable-next-line jsx-a11y/alt-text
-              <object
-                data={url}
-                // onError={() => setState({ ...state, error: true })}
-                onLoad={() => setState({ ...state, loading: false })}
-                style={{ width: 'auto', height: 'auto' }}
+
+            const safeOnLoad = () => {
+              if (state.loading) {
+                setState({ ...state, loading: false });
+              }
+            };
+
+            return state.fallback ? (
+              state.fallback?.()
+            ) : (
+              <ReactSVG
+                src={url}
+                beforeInjection={(svg) => {
+                  svg.setAttribute('style', 'pointer-events: none');
+                }}
+                afterInjection={safeOnLoad}
+                onError={(error) => {
+                  let objectType = null;
+                  if (error?.message?.indexOf('Invalid content type: ') > -1) {
+                    objectType = error.message.split('Invalid content type: ')?.[1];
+                  } else if (error?.message?.indexOf('Unable to load SVG file: ') > -1) {
+                    objectType = 'image/svg+xml';
+                  }
+
+                  setState({
+                    ...state,
+                    // fallback to object, and use objectType to render
+                    fallback: () => (
+                      // eslint-disable-next-line jsx-a11y/alt-text
+                      <object
+                        key={url}
+                        type={objectType}
+                        data={url}
+                        // onError={() => setState({ ...state, error: true })}
+                        onLoad={safeOnLoad}
+                        style={{ width: 'auto', height: 'auto', pointerEvents: 'none' }}
+                      />
+                    ),
+                  });
+                }}
+                // evalScripts="always"
+                wrapper="div"
               />
             );
           }
@@ -232,12 +268,14 @@ const Root = styled('div')`
   overflow: hidden;
 
   &,
-  img {
+  img,
+  object {
     max-width: 100%;
     max-height: 100%;
   }
 
-  img {
+  img,
+  object {
     width: 100%;
     height: 100%;
   }