@arcblock/ux 1.16.16 → 1.16.20

package/lib/Blocklet/index.js

@@ -44,7 +44,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const Div = _styledComponents.default.div.withConfig({
   displayName: "Blocklet__Div",
   componentId: "sc-3dga5l-0"
-})(["&.arcblock-blocklet{border:1px solid #f2f2f2;padding:0 16px;border-radius:12px;background:#fff;overflow:hidden;&:hover{filter:drop-shadow(0px 4px 12px rgba(92,92,92,0.04));}}.arcblock-blocklet__content{padding:16px 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;border-top:1px solid #f2f2f2;}.arcblock-blocklet__cover{width:100px;height:100px;margin-right:16px;overflow:hidden;border-radius:12px;}.arcblock-blocklet__info{flex:1;overflow:hidden;.arcblock-blocklet__button{margin-top:16px;display:inline-block;}}.arcblock-blocklet__button{& > *{position:relative;&::before{content:'';position:absolute;display:block;left:50%;top:50%;height:", "%;width:", "%;transform:translate(-50%,-50%);}}& > *:not(.Mui-disabled){background-color:rgba(79,106,246,0.06);color:", ";}}.arcblock-blocklet__title{margin:0;font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin:2px 0 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{margin-bottom:3px;}.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__content{padding:12px 0;}.arcblock-blocklet__cover{width:48px;height:48px;border-radius:6px;}.arcblock-blocklet__addons{padding:8px 0;.arcblock-blocklet__addons--item{font-size:12px;}}}&.arcblock-blocklet--size-xs{.arcblock-blocklet__addons{display:none !important;}}"], props => props.scaleClickZone * 100, props => props.scaleClickZone * 100, props => props.theme.palette.primary.main);
+})(["&.arcblock-blocklet{border:1px solid #f2f2f2;padding:0 16px;border-radius:12px;background:", ";overflow:hidden;&:hover{filter:drop-shadow(0px 4px 12px rgba(92,92,92,0.04));}}.arcblock-blocklet__content{padding:16px 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;border-top:1px solid #f2f2f2;}.arcblock-blocklet__cover{width:100px;height:100px;margin-right:16px;overflow:hidden;border-radius:12px;}.arcblock-blocklet__info{flex:1;overflow:hidden;.arcblock-blocklet__button{margin-top:16px;display:inline-block;}}.arcblock-blocklet__button{& > *:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';border-radius:100vw;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%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;border-radius:100vw;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:rgba(79,106,246,0.06);color:", ";}&:hover > *:not(.Mui-disabled){color:", ";}}.arcblock-blocklet__title{margin:0;font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin:2px 0 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{margin-bottom:3px;}.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__content{padding:12px 0;}.arcblock-blocklet__cover{width:48px;height:48px;border-radius:6px;}.arcblock-blocklet__addons{padding:8px 0;.arcblock-blocklet__addons--item{font-size:12px;}}}&.arcblock-blocklet--size-xs{.arcblock-blocklet__addons{display:none !important;}}"], props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
 
 function BlockletIcon(_ref) {
   let {

package/lib/NFTDisplay/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getNFTData = getNFTData;
 exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
@@ -50,17 +51,27 @@ 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; }
 
+/**
+ * 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
+ * - 旧: assetState.data.value (.credentialSubject.display)
+ * - 新: assetState.display
+ */
+function getNFTData(assetState) {
+  var _assetState$data;
+
+  return (assetState === null || assetState === void 0 ? void 0 : assetState.display) || (assetState === null || assetState === void 0 ? void 0 : (_assetState$data = assetState.data) === null || _assetState$data === void 0 ? void 0 : _assetState$data.value);
+}
+
 function fromBase64(v) {
   if (typeof v !== 'string') {
     throw new Error('fromBase64 requires input to be a string');
   }
 
   return Buffer.from(_base64Url.default.unescape(v), 'base64');
-}
-
-const isVC = type => {
-  return String(type).includes('VerifiableCredential');
-}; // 仅针对非 url type 的情况
+} // const isVC = type => {
+//   return String(type).includes('VerifiableCredential');
+// };
+// 仅针对非 url type 的情况
 
 
 const getSvgEmbedder = preferredSvgEmbedder => {
@@ -111,10 +122,10 @@ function NFTDisplay(_ref) {
     }
 
     const {
-      vcId,
-      type: assetType
-    } = parsed.current;
-    const display = (0, _get.default)(parsed.current, 'credentialSubject.display');
+      vcId
+    } = parsed.current; // 需要兼容新旧两种类型的数据结构, nft data 有 credentialSubject 属性, 说明是旧 nft data, 否则是新 nft data
+
+    const display = parsed.current.credentialSubject ? (0, _get.default)(parsed.current, 'credentialSubject.display') : parsed.current;
     const {
       content,
       type
@@ -142,10 +153,9 @@ function NFTDisplay(_ref) {
       if (!state.loading && minimumLoadingReady || state.error) {
         onCompleted();
       }
-    }, [state, minimumLoadingReady]); // VC 检查
-
+    }, [state, minimumLoadingReady]);
 
-    if (state.error || !isVC(assetType)) {
+    if (state.error) {
       throw new Error('Failed to render NFT Display.');
     }
 
@@ -155,8 +165,15 @@ function NFTDisplay(_ref) {
           case 'url':
             {
               const urlObj = new URL(content);
-              urlObj.searchParams.append('assetId', address);
-              urlObj.searchParams.append('vcId', vcId);
+
+              if (!urlObj.searchParams.has('assetId')) {
+                urlObj.searchParams.append('assetId', address);
+              }
+
+              if (!urlObj.searchParams.has('vcId')) {
+                urlObj.searchParams.append('vcId', vcId);
+              }
+
               const url = urlObj.href;
               return /*#__PURE__*/_react.default.createElement("img", {
                 src: url,
@@ -170,6 +187,20 @@ function NFTDisplay(_ref) {
               });
             }
 
+          case 'uri':
+            {
+              return /*#__PURE__*/_react.default.createElement("img", {
+                src: content,
+                onError: () => setState(_objectSpread(_objectSpread({}, state), {}, {
+                  error: true
+                })),
+                onLoad: () => setState(_objectSpread(_objectSpread({}, state), {}, {
+                  loading: false
+                })),
+                alt: "NFT Display"
+              });
+            }
+
           case 'svg_gzipped':
             {
               const buffer = _pako.default.ungzip(fromBase64(content), {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.16.16",
+  "version": "1.16.20",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "91f4d85a39882abbb825e38fdc740617ea3e3ee5",
+  "gitHead": "d24d15a8cb22c578484e9017b85c0cb2debd1f43",
   "dependencies": {
-    "@arcblock/icons": "^1.16.16",
-    "@arcblock/react-hooks": "^1.16.16",
+    "@arcblock/icons": "^1.16.20",
+    "@arcblock/react-hooks": "^1.16.20",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "4.11.2",

package/src/Blocklet/index.js

@@ -17,7 +17,7 @@ const Div = styled.div`
     border: 1px solid #f2f2f2;
     padding: 0 16px;
     border-radius: 12px;
-    background: #fff;
+    background: ${props => props.theme.palette.common.white};
     overflow: hidden;
     &:hover {
       filter: drop-shadow(0px 4px 12px rgba(92, 92, 92, 0.04));
@@ -58,24 +58,50 @@ const Div = styled.div`
       display: inline-block;
     }
   }
+  // 这里想覆盖 mui-button 的样式 做成 blocklet-button 的专有样式
   .arcblock-blocklet__button {
-    & > * {
+    & > *:not(.Mui-disabled) {
       position: relative;
+      z-index: 1;
       &::before {
+        content: '';
+        border-radius: 100vw;
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        left: 0;
+        top: 0;
+        transition: opacity 0.3s;
+      }
+      &:hover::before {
+        opacity: 0;
+      }
+      &::after {
         content: '';
         position: absolute;
-        display: block;
-        left: 50%;
-        top: 50%;
-        height: ${props => props.scaleClickZone * 100}%;
-        width: ${props => props.scaleClickZone * 100}%;
-        transform: translate(-50%, -50%);
+        height: 100%;
+        width: 100%;
+        background-color: ${props => props.theme.palette.primary.main};
+        transform: scale(0.1);
+        opacity: 0;
+        z-index: -1;
+        border-radius: 100vw;
+        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: rgba(79, 106, 246, 0.06);
       color: ${props => props.theme.palette.primary.main};
     }
+    &:hover > *:not(.Mui-disabled) {
+      color: ${props => props.theme.palette.common.white};
+    }
   }
   .arcblock-blocklet__title {
     margin: 0;

package/src/NFTDisplay/index.js

@@ -12,6 +12,15 @@ import InlineSvgEmbedder from './svg-embedder/inline-svg';
 import DefaultLoading from './loading';
 import DefaultBrokenImage from './broken';
 
+/**
+ * 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
+ * - 旧: assetState.data.value (.credentialSubject.display)
+ * - 新: assetState.display
+ */
+export function getNFTData(assetState) {
+  return assetState?.display || assetState?.data?.value;
+}
+
 function fromBase64(v) {
   if (typeof v !== 'string') {
     throw new Error('fromBase64 requires input to be a string');
@@ -19,9 +28,9 @@ function fromBase64(v) {
   return Buffer.from(base64.unescape(v), 'base64');
 }
 
-const isVC = type => {
-  return String(type).includes('VerifiableCredential');
-};
+// const isVC = type => {
+//   return String(type).includes('VerifiableCredential');
+// };
 
 // 仅针对非 url type 的情况
 const getSvgEmbedder = preferredSvgEmbedder => {
@@ -65,8 +74,11 @@ function NFTDisplay({
       parsed.current = JSON.parse(data);
       // console.log('[debug] parse data')
     }
-    const { vcId, type: assetType } = parsed.current;
-    const display = get(parsed.current, 'credentialSubject.display');
+    const { vcId } = parsed.current;
+    // 需要兼容新旧两种类型的数据结构, nft data 有 credentialSubject 属性, 说明是旧 nft data, 否则是新 nft data
+    const display = parsed.current.credentialSubject
+      ? get(parsed.current, 'credentialSubject.display')
+      : parsed.current;
     const { content, type } = display;
     const isUrlType = type === 'url';
 
@@ -90,8 +102,7 @@ function NFTDisplay({
       }
     }, [state, minimumLoadingReady]);
 
-    // VC 检查
-    if (state.error || !isVC(assetType)) {
+    if (state.error) {
       throw new Error('Failed to render NFT Display.');
     }
 
@@ -100,8 +111,14 @@ function NFTDisplay({
         switch (type) {
           case 'url': {
             const urlObj = new URL(content);
-            urlObj.searchParams.append('assetId', address);
-            urlObj.searchParams.append('vcId', vcId);
+            if (!urlObj.searchParams.has('assetId')) {
+              urlObj.searchParams.append('assetId', address);
+            }
+
+            if (!urlObj.searchParams.has('vcId')) {
+              urlObj.searchParams.append('vcId', vcId);
+            }
+
             const url = urlObj.href;
             return (
               <img
@@ -112,6 +129,16 @@ function NFTDisplay({
               />
             );
           }
+          case 'uri': {
+            return (
+              <img
+                src={content}
+                onError={() => setState({ ...state, error: true })}
+                onLoad={() => setState({ ...state, loading: false })}
+                alt="NFT Display"
+              />
+            );
+          }
           case 'svg_gzipped': {
             const buffer = pako.ungzip(fromBase64(content), {});
             const svg = Buffer.from(buffer).toString('utf8');