@arcblock/ux 1.16.15 → 1.16.19

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/Locale/context.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LocaleProvider = LocaleProvider;
-exports.useLocaleContext = useLocaleContext;
-exports.languages = exports.getLocale = exports.setLocale = exports.LocaleContext = exports.LocaleConsumer = void 0;
+exports.create = exports.languages = exports.getLocale = exports.setLocale = exports.useLocaleContext = exports.LocaleContext = exports.LocaleConsumer = exports.LocaleProvider = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -70,60 +68,78 @@ exports.setLocale = setLocale;
 
 const replace = (template, data) => template.replace(/{(\w*)}/g, (m, key) => data.hasOwnProperty(key) ? data[key] : '');
 
-const LocaleContext = /*#__PURE__*/_react.default.createContext();
-
-exports.LocaleContext = LocaleContext;
-const {
-  Provider,
-  Consumer
-} = LocaleContext;
-exports.LocaleConsumer = Consumer;
-
-function LocaleProvider(_ref) {
-  let {
-    children,
-    locale,
-    translations
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  const [currentLocale, setCurrentLocale] = (0, _react.useState)(getLocale(locale));
-  (0, _react.useEffect)(() => {
-    setLocale(currentLocale);
-  }, [currentLocale]);
-
-  const changeLocale = newLocale => {
-    setCurrentLocale(newLocale);
-  };
+const create = () => {
+  const LocaleContext = /*#__PURE__*/_react.default.createContext();
+
+  const {
+    Provider,
+    Consumer
+  } = LocaleContext;
+
+  function LocaleProvider(_ref) {
+    let {
+      children,
+      locale,
+      translations
+    } = _ref,
+        rest = _objectWithoutProperties(_ref, _excluded);
+
+    const [currentLocale, setCurrentLocale] = (0, _react.useState)(getLocale(locale));
+    (0, _react.useEffect)(() => {
+      setLocale(currentLocale);
+    }, [currentLocale]);
+
+    const changeLocale = newLocale => {
+      setCurrentLocale(newLocale);
+    };
+
+    const translate = (key, data) => {
+      if (!translations[currentLocale] || !translations[currentLocale][key]) {
+        console.warn("Warning: no ".concat(key, " translation of ").concat(currentLocale));
+        return key;
+      }
+
+      return replace(translations[currentLocale][key], data);
+    };
+
+    return /*#__PURE__*/_react.default.createElement(Provider, {
+      value: _objectSpread({
+        locale: currentLocale,
+        changeLocale,
+        t: translate
+      }, rest)
+    }, children);
+  }
 
-  const translate = (key, data) => {
-    if (!translations[currentLocale] || !translations[currentLocale][key]) {
-      console.warn("Warning: no ".concat(key, " translation of ").concat(currentLocale));
-      return key;
-    }
+  function useLocaleContext() {
+    const context = (0, _react.useContext)(LocaleContext);
+    return context;
+  }
 
-    return replace(translations[currentLocale][key], data);
+  LocaleProvider.propTypes = {
+    children: _propTypes.default.any.isRequired,
+    translations: _propTypes.default.object.isRequired,
+    locale: _propTypes.default.string
+  };
+  LocaleProvider.defaultProps = {
+    locale: ''
+  };
+  return {
+    Consumer,
+    LocaleProvider,
+    LocaleContext,
+    useLocaleContext
   };
-
-  return /*#__PURE__*/_react.default.createElement(Provider, {
-    value: _objectSpread({
-      locale: currentLocale,
-      changeLocale,
-      t: translate
-    }, rest)
-  }, children);
-}
-
-function useLocaleContext() {
-  const context = (0, _react.useContext)(LocaleContext);
-  return context;
-}
-
-LocaleProvider.propTypes = {
-  children: _propTypes.default.any.isRequired,
-  translations: _propTypes.default.object.isRequired,
-  locale: _propTypes.default.string
 };
-LocaleProvider.defaultProps = {
-  locale: ''
-};
+
+exports.create = create;
+const {
+  Consumer,
+  LocaleProvider,
+  LocaleContext,
+  useLocaleContext
+} = create();
+exports.useLocaleContext = useLocaleContext;
+exports.LocaleContext = LocaleContext;
+exports.LocaleProvider = LocaleProvider;
+exports.LocaleConsumer = Consumer;

package/lib/NFTDisplay/index.js

@@ -56,11 +56,10 @@ function fromBase64(v) {
   }
 
   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,8 +110,7 @@ function NFTDisplay(_ref) {
     }
 
     const {
-      vcId,
-      type: assetType
+      vcId
     } = parsed.current;
     const display = (0, _get.default)(parsed.current, 'credentialSubject.display');
     const {
@@ -142,10 +140,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 +152,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 +174,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.15",
+  "version": "1.16.19",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "34ef9d96c3a84d9f2ee694f5bfe89eca22450e48",
+  "gitHead": "88965cae9c1b0273e085c8779672cedef3abd633",
   "dependencies": {
-    "@arcblock/icons": "^1.16.15",
-    "@arcblock/react-hooks": "^1.16.15",
+    "@arcblock/icons": "^1.16.19",
+    "@arcblock/react-hooks": "^1.16.19",
     "@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/Locale/context.js

@@ -32,50 +32,55 @@ const setLocale = locale => Cookie.set(cookieName, locale, getCookieOptions());
 const replace = (template, data) =>
   template.replace(/{(\w*)}/g, (m, key) => (data.hasOwnProperty(key) ? data[key] : ''));
 
-const LocaleContext = React.createContext();
-const { Provider, Consumer } = LocaleContext;
-
-function LocaleProvider({ children, locale, translations, ...rest }) {
-  const [currentLocale, setCurrentLocale] = useState(getLocale(locale));
+const create = () => {
+  const LocaleContext = React.createContext();
+  const { Provider, Consumer } = LocaleContext;
+  function LocaleProvider({ children, locale, translations, ...rest }) {
+    const [currentLocale, setCurrentLocale] = useState(getLocale(locale));
+
+    useEffect(() => {
+      setLocale(currentLocale);
+    }, [currentLocale]);
+
+    const changeLocale = newLocale => {
+      setCurrentLocale(newLocale);
+    };
+
+    const translate = (key, data) => {
+      if (!translations[currentLocale] || !translations[currentLocale][key]) {
+        console.warn(`Warning: no ${key} translation of ${currentLocale}`);
+        return key;
+      }
+
+      return replace(translations[currentLocale][key], data);
+    };
+
+    return (
+      <Provider value={{ locale: currentLocale, changeLocale, t: translate, ...rest }}>
+        {children}
+      </Provider>
+    );
+  }
 
-  useEffect(() => {
-    setLocale(currentLocale);
-  }, [currentLocale]);
+  function useLocaleContext() {
+    const context = useContext(LocaleContext);
+    return context;
+  }
 
-  const changeLocale = newLocale => {
-    setCurrentLocale(newLocale);
+  LocaleProvider.propTypes = {
+    children: PropTypes.any.isRequired,
+    translations: PropTypes.object.isRequired,
+    locale: PropTypes.string,
   };
 
-  const translate = (key, data) => {
-    if (!translations[currentLocale] || !translations[currentLocale][key]) {
-      console.warn(`Warning: no ${key} translation of ${currentLocale}`);
-      return key;
-    }
-
-    return replace(translations[currentLocale][key], data);
+  LocaleProvider.defaultProps = {
+    locale: '',
   };
 
-  return (
-    <Provider value={{ locale: currentLocale, changeLocale, t: translate, ...rest }}>
-      {children}
-    </Provider>
-  );
-}
-
-function useLocaleContext() {
-  const context = useContext(LocaleContext);
-  return context;
-}
-
-LocaleProvider.propTypes = {
-  children: PropTypes.any.isRequired,
-  translations: PropTypes.object.isRequired,
-  locale: PropTypes.string,
+  return { Consumer, LocaleProvider, LocaleContext, useLocaleContext };
 };
 
-LocaleProvider.defaultProps = {
-  locale: '',
-};
+const { Consumer, LocaleProvider, LocaleContext, useLocaleContext } = create();
 
 export {
   LocaleProvider,
@@ -85,4 +90,5 @@ export {
   setLocale,
   getLocale,
   languages,
+  create,
 };

package/src/NFTDisplay/index.js

@@ -19,9 +19,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,7 +65,7 @@ function NFTDisplay({
       parsed.current = JSON.parse(data);
       // console.log('[debug] parse data')
     }
-    const { vcId, type: assetType } = parsed.current;
+    const { vcId } = parsed.current;
     const display = get(parsed.current, 'credentialSubject.display');
     const { content, type } = display;
     const isUrlType = type === 'url';
@@ -90,8 +90,7 @@ function NFTDisplay({
       }
     }, [state, minimumLoadingReady]);
 
-    // VC 检查
-    if (state.error || !isVC(assetType)) {
+    if (state.error) {
       throw new Error('Failed to render NFT Display.');
     }
 
@@ -100,8 +99,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 +117,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');