@arcblock/ux 1.16.64 → 1.16.67

package/lib/Blocklet/blocklet.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = BlockletStore;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -17,6 +17,10 @@ var _CircularProgress = _interopRequireDefault(require("@material-ui/core/Circul
 
 var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
 
+var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+
+var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
+
 var _Button = _interopRequireDefault(require("../Button"));
 
 var _Img = _interopRequireDefault(require("../Img"));
@@ -25,10 +29,6 @@ const _excluded = ["title", "did", "description", "cover", "version", "button",
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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, 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; }
 
 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; }
@@ -36,7 +36,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const Div = _styledComponents.default.div.withConfig({
   displayName: "blocklet__Div",
   componentId: "sc-atxvkd-0"
-})([".arcblock-blocklet__content{padding:24px 16px 0 16px;display:flex;align-items:center;cursor:pointer;}.arcblock-blocklet__content--body{overflow:hidden;flex:1;display:flex;align-items:flex-start;}.arcblock-blocklet__cover{width:64px;height:64px;margin-right:12px;overflow:hidden;border-radius:12px;transform:translateZ(0);}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';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;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:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__info{flex:1;overflow:hidden;border-bottom:1px solid ", ";padding-bottom:24px;}.arcblock-blocklet__text{height:65px;overflow:hidden;}.arcblock-blocklet__title{margin:0;font-size:18px;font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:44px;word-break:break-all;}.arcblock-blocklet__describe{margin:0;color:", ";font-size:14px;font-weight:500;line-height:17px;max-height:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__version{color:", ";}"], props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white, props => props.theme.palette.divider, props => props.theme.palette.grey[600], props => props.theme.palette.grey[600]);
+})(["&.arcblock-blocklet{padding:16px 16px 0 16px;}.arcblock-blocklet__content{cursor:pointer;display:flex;", "{align-items:center;}}.arcblock-blocklet__cover{width:64px;height:64px;margin-right:16px;overflow:hidden;border-radius:12px;transform:translateZ(0);", "{width:80px;height:80px;margin-bottom:12px;}}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';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;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:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__info{flex:1;overflow:hidden;border-bottom:1px solid ", ";padding-bottom:24px;}.arcblock-blocklet__text{height:57px;overflow:hidden;}.arcblock-blocklet__title{margin:0;font-size:16px;font-weight:500;line-height:19px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:38px;word-break:break-all;}.arcblock-blocklet__describe{margin-top:2px;color:", ";font-size:14px;font-weight:500;line-height:17px;max-height:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__version{color:", ";font-size:12px;}"], props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.up('sm'), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white, props => props.theme.palette.divider, props => props.theme.palette.grey[600], props => props.theme.palette.grey[600]);
 
 function BlockletStore(_ref) {
   let {
@@ -83,15 +83,17 @@ function BlockletStore(_ref) {
     return false;
   });
 
+  const theme = (0, _useTheme.default)();
+  const isUpSm = (0, _useMediaQuery.default)(theme.breakpoints.up('sm'));
+
   const _onMainClick = wrapHandler(onMainClick);
 
-  const container = (0, _react.useRef)(null);
-  return /*#__PURE__*/_react.default.createElement(Div, rest, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(className, " arcblock-blocklet__content"),
-    onClick: _onMainClick,
-    ref: container
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "arcblock-blocklet__content--body"
+  const didAvatarSize = isUpSm ? 80 : 64;
+  return /*#__PURE__*/_react.default.createElement(Div, Object.assign({
+    className: "".concat(className, " arcblock-blocklet")
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__content",
+    onClick: _onMainClick
   }, cover ? /*#__PURE__*/_react.default.createElement("div", {
     className: "arcblock-blocklet__cover"
   }, /*#__PURE__*/_react.default.createElement(_Img.default, {
@@ -100,7 +102,7 @@ function BlockletStore(_ref) {
     className: "arcblock-blocklet__cover"
   }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
     did: did,
-    size: 64
+    size: didAvatarSize
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "arcblock-blocklet__info"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -119,7 +121,7 @@ function BlockletStore(_ref) {
     style: {
       display: 'flex',
       alignItems: 'center',
-      marginTop: '12px',
+      marginTop: '10px',
       flexFlow: 'wrap'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -147,7 +149,7 @@ function BlockletStore(_ref) {
     }
   }), buttonText)), /*#__PURE__*/_react.default.createElement("div", {
     className: "arcblock-blocklet__version"
-  }, version && "v".concat(version)))))));
+  }, version && "v".concat(version))))));
 }
 
 BlockletStore.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.16.64",
+  "version": "1.16.67",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "d1401d5c1563aa2995d5ebdb5c4d1fb44245f6ae",
+  "gitHead": "9fc7e3166b8ff17a65008f0037b6d5e9d9a6488e",
   "dependencies": {
-    "@arcblock/icons": "^1.16.64",
-    "@arcblock/react-hooks": "^1.16.64",
+    "@arcblock/icons": "^1.16.67",
+    "@arcblock/react-hooks": "^1.16.67",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/lato": "^4.5.3",
     "@material-ui/core": "^4.12.3",

package/src/Blocklet/blocklet.js

@@ -1,34 +1,39 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import Avatar from '@arcblock/did-connect/lib/Avatar';
+import useTheme from '@material-ui/core/styles/useTheme';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 
 import Button from '../Button';
 import Img from '../Img';
 
 const Div = styled.div`
+  &.arcblock-blocklet {
+    padding: 16px 16px 0 16px;
+  }
   .arcblock-blocklet__content {
-    padding: 24px 16px 0 16px;
-    display: flex;
-    align-items: center;
     cursor: pointer;
-  }
-  .arcblock-blocklet__content--body {
-    overflow: hidden;
-    flex: 1;
     display: flex;
-    align-items: flex-start;
+    ${props => props.theme.breakpoints.up('sm')} {
+      align-items: center;
+    }
   }
   .arcblock-blocklet__cover {
     width: 64px;
     height: 64px;
-    margin-right: 12px;
+    margin-right: 16px;
     overflow: hidden;
     border-radius: 12px;
     /* see: https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari */
     transform: translateZ(0);
+    ${props => props.theme.breakpoints.up('sm')} {
+      width: 80px;
+      height: 80px;
+      margin-bottom: 12px;
+    }
   }
   .arcblock-blocklet__button--hover {
     &:not(.Mui-disabled) {
@@ -81,25 +86,25 @@ const Div = styled.div`
     padding-bottom: 24px;
   }
   .arcblock-blocklet__text {
-    height: 65px;
+    height: 57px;
     overflow: hidden;
   }
   /* 设置多行文本溢出显示省略号 兼容fireFox、safari */
   .arcblock-blocklet__title {
     margin: 0;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 500;
-    line-height: 22px;
+    line-height: 19px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-    max-height: 44px;
+    max-height: 38px;
     word-break: break-all;
   }
   .arcblock-blocklet__describe {
-    margin: 0;
+    margin-top: 2px;
     color: ${props => props.theme.palette.grey[600]};
     font-size: 14px;
     font-weight: 500;
@@ -111,6 +116,7 @@ const Div = styled.div`
   }
   .arcblock-blocklet__version {
     color: ${props => props.theme.palette.grey[600]};
+    font-size: 12px;
   }
 `;
 export default function BlockletStore({
@@ -147,77 +153,74 @@ export default function BlockletStore({
     }
     return false;
   });
+  const theme = useTheme();
+  const isUpSm = useMediaQuery(theme.breakpoints.up('sm'));
   const _onMainClick = wrapHandler(onMainClick);
-  const container = useRef(null);
+  const didAvatarSize = isUpSm ? 80 : 64;
 
   return (
-    <Div {...rest}>
-      <div
-        className={`${className} arcblock-blocklet__content`}
-        onClick={_onMainClick}
-        ref={container}>
-        <div className="arcblock-blocklet__content--body">
-          {cover ? (
+    <Div className={`${className} arcblock-blocklet`} {...rest}>
+      <div className="arcblock-blocklet__content" onClick={_onMainClick}>
+        {cover ? (
+          <div className="arcblock-blocklet__cover">
+            <Img src={cover} />
+          </div>
+        ) : (
+          did && (
             <div className="arcblock-blocklet__cover">
-              <Img src={cover} />
+              <Avatar did={did} size={didAvatarSize} />
             </div>
-          ) : (
-            did && (
-              <div className="arcblock-blocklet__cover">
-                <Avatar did={did} size={64} />
-              </div>
-            )
-          )}
-          <div className="arcblock-blocklet__info">
-            <div className="arcblock-blocklet__text">
+          )
+        )}
+        <div className="arcblock-blocklet__info">
+          <div className="arcblock-blocklet__text">
+            <Typography
+              component="h3"
+              variant="h3"
+              className="arcblock-blocklet__title"
+              title={title}>
+              {title}
+            </Typography>
+            {description && (
               <Typography
-                component="h3"
-                variant="h3"
-                className="arcblock-blocklet__title"
-                title={title}>
-                {title}
+                component="div"
+                variant="body2"
+                className="arcblock-blocklet__describe"
+                title={description}>
+                {description}
               </Typography>
-              {description && (
-                <Typography
-                  component="div"
-                  variant="body2"
-                  className="arcblock-blocklet__describe"
-                  title={description}>
-                  {description}
-                </Typography>
-              )}
-            </div>
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                marginTop: '12px',
-                flexFlow: 'wrap',
-              }}>
-              <div onClick={_onButtonClick} style={{ marginRight: '12px' }}>
-                {button ||
-                  (onButtonClick && (
-                    <Button
-                      className="arcblock-blocklet__button--hover"
-                      variant="outlined"
-                      color="primary"
-                      size="small"
-                      disabled={buttonDisabled || buttonLoading}
-                      style={{
-                        padding: '3px 6px',
-                        fontSize: '14px',
-                        minWidth: '92px',
-                        textAlign: 'center',
-                      }}>
-                      {buttonLoading && (
-                        <CircularProgress size={15} style={{ marginRight: 3, color: 'inherit' }} />
-                      )}
-                      {buttonText}
-                    </Button>
-                  ))}
-              </div>
-              <div className="arcblock-blocklet__version">{version && `v${version}`}</div>
+            )}
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              marginTop: '10px',
+              flexFlow: 'wrap',
+            }}>
+            <div onClick={_onButtonClick} style={{ marginRight: '12px' }}>
+              {button ||
+                (onButtonClick && (
+                  <Button
+                    className="arcblock-blocklet__button--hover"
+                    variant="outlined"
+                    color="primary"
+                    size="small"
+                    disabled={buttonDisabled || buttonLoading}
+                    style={{
+                      padding: '3px 6px',
+                      fontSize: '14px',
+                      minWidth: '92px',
+                      textAlign: 'center',
+                    }}>
+                    {buttonLoading && (
+                      <CircularProgress size={15} style={{ marginRight: 3, color: 'inherit' }} />
+                    )}
+                    {buttonText}
+                  </Button>
+                ))}
             </div>
+            <div className="arcblock-blocklet__version">{version && `v${version}`}</div>
           </div>
         </div>
       </div>