@arcblock/ux 1.16.17 → 1.16.21

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;.button_custom{&: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:", ";}&:not(.Mui-disabled){&:hover{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 {
@@ -182,6 +182,7 @@ function Blocklet(_ref2) {
     }
   }, button || onButtonClick && /*#__PURE__*/_react.default.createElement(_Button.default, {
     rounded: true,
+    className: "button_custom",
     variant: "contained",
     color: "primary",
     size: "small",

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,6 +51,17 @@ 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');
@@ -111,8 +123,9 @@ function NFTDisplay(_ref) {
 
     const {
       vcId
-    } = parsed.current;
-    const display = (0, _get.default)(parsed.current, 'credentialSubject.display');
+    } = 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
@@ -150,7 +163,6 @@ function NFTDisplay(_ref) {
       if (content) {
         switch (type) {
           case 'url':
-          case 'uri':
             {
               const urlObj = new URL(content);
 
@@ -175,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.17",
+  "version": "1.16.21",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "4feaf12ac23b3a1db36f43bb0e05108f343753e6",
+  "gitHead": "488de07167702b5fe7c3373bbd47751f8323693a",
   "dependencies": {
-    "@arcblock/icons": "^1.16.17",
-    "@arcblock/react-hooks": "^1.16.17",
+    "@arcblock/icons": "^1.16.21",
+    "@arcblock/react-hooks": "^1.16.21",
     "@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));
@@ -56,27 +56,56 @@ const Div = styled.div`
     .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: ${props => props.scaleClickZone * 100}%;
-        width: ${props => props.scaleClickZone * 100}%;
-        transform: translate(-50%, -50%);
+      // 覆盖 mui-button 的样式 做成 blocklet 内部 button 的专有样式
+      .button_custom {
+        &: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: ${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};
+        }
+        &:not(.Mui-disabled) {
+          &:hover {
+            color: ${props => props.theme.palette.common.white};
+          }
+        }
       }
     }
-    & > *:not(.Mui-disabled) {
-      background-color: rgba(79, 106, 246, 0.06);
-      color: ${props => props.theme.palette.primary.main};
-    }
   }
+
   .arcblock-blocklet__title {
     margin: 0;
     font-size: 18px;
@@ -261,6 +290,7 @@ export default function Blocklet({
                       (onButtonClick && (
                         <Button
                           rounded
+                          className="button_custom"
                           variant="contained"
                           color="primary"
                           size="small"

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');
@@ -66,7 +75,10 @@ function NFTDisplay({
       // console.log('[debug] parse data')
     }
     const { vcId } = parsed.current;
-    const display = get(parsed.current, 'credentialSubject.display');
+    // 需要兼容新旧两种类型的数据结构, 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';
 
@@ -97,8 +109,7 @@ function NFTDisplay({
     const renderNFT = () => {
       if (content) {
         switch (type) {
-          case 'url':
-          case 'uri': {
+          case 'url': {
             const urlObj = new URL(content);
             if (!urlObj.searchParams.has('assetId')) {
               urlObj.searchParams.append('assetId', address);
@@ -118,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');