@arcblock/ux 1.16.3 → 1.16.7

package/lib/Blocklet/index.js

@@ -21,13 +21,15 @@ var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQ
 
 var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
 
+var _Avatar = _interopRequireDefault(require("@arcblock/did-connect/lib/Avatar"));
+
 var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
 var _Img = _interopRequireDefault(require("../Img"));
 
-const _excluded = ["title", "description", "cover", "type", "size", "addons", "button", "buttonText", "buttonDisabled", "buttonLoading", "isStickyButton", "onButtonClick", "onMainClick", "onTagClick", "className", "scaleClickZone"];
+const _excluded = ["title", "did", "description", "cover", "type", "size", "addons", "button", "buttonText", "buttonDisabled", "buttonLoading", "isStickyButton", "onButtonClick", "onMainClick", "onTagClick", "className", "scaleClickZone"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -78,6 +80,7 @@ function prettySize(_size) {
 function Blocklet(_ref2) {
   let {
     title,
+    did,
     description,
     cover,
     type,
@@ -128,10 +131,13 @@ function Blocklet(_ref2) {
 
   const theme = (0, _useTheme.default)();
   const isDownSm = (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
-  const isDownMd = (0, _useMediaQuery.default)(theme.breakpoints.down('md')); // If size is auto, need calculate actual size according to screen size
+  const isDownMd = (0, _useMediaQuery.default)(theme.breakpoints.down('md'));
+  const isUPLg = (0, _useMediaQuery.default)(theme.breakpoints.up('lg')); // If size is auto, need calculate actual size according to screen size
   // eslint-disable-next-line no-nested-ternary
 
-  const actualSize = size === 'auto' ? isDownSm ? 'xs' : isDownMd ? 'sm' : 'md' : size;
+  const actualSize = size === 'auto' ? isDownSm ? 'xs' : isDownMd ? 'sm' : 'md' : size; // eslint-disable-next-line no-nested-ternary
+
+  const didAvatarSize = size === 'auto' ? isUPLg ? 100 : 48 : size === 'md' ? 100 : 48;
   const container = (0, _react.useRef)(null);
   return /*#__PURE__*/_react.default.createElement(Div, Object.assign({}, rest, {
     scaleClickZone: scaleClickZone,
@@ -144,10 +150,15 @@ function Blocklet(_ref2) {
     ref: container
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "arcblock-blocklet__content--body"
-  }, cover && /*#__PURE__*/_react.default.createElement("div", {
+  }, cover ? /*#__PURE__*/_react.default.createElement("div", {
     className: "arcblock-blocklet__cover"
   }, /*#__PURE__*/_react.default.createElement(_Img.default, {
     src: cover
+  })) : did && /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__cover"
+  }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+    did: did,
+    size: didAvatarSize
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "arcblock-blocklet__info"
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -205,6 +216,7 @@ function Blocklet(_ref2) {
 
 Blocklet.propTypes = {
   title: _propTypes.default.string.isRequired,
+  did: _propTypes.default.string,
   isStickyButton: _propTypes.default.bool,
   description: _propTypes.default.string,
   cover: _propTypes.default.string,
@@ -224,6 +236,7 @@ Blocklet.propTypes = {
 Blocklet.defaultProps = {
   description: null,
   cover: null,
+  did: null,
   isStickyButton: false,
   buttonText: 'Install',
   buttonDisabled: false,

package/lib/CodeBlock/index.js

@@ -51,6 +51,8 @@ var _FileCopy = _interopRequireDefault(require("@material-ui/icons/FileCopy"));
 
 var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
 
+var _Colors = _interopRequireDefault(require("../Colors"));
+
 const _excluded = ["code", "language", "children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -171,4 +173,4 @@ const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monos
 const Pre = _styledComponents.default.pre.withConfig({
   displayName: "CodeBlock__Pre",
   componentId: "sc-1bpapaq-0"
-})(["font-family:", ";display:block;font-size:14px;line-height:1.42857143;margin:0 0 32px;word-break:break-word;word-wrap:break-word;text-align:left;border-radius:5px;border:1px solid #dedede;background:#222;color:#fff;position:relative;.codeblock__inner{display:block;width:100%;max-height:46.25rem;overflow:scroll;}.copy-button{display:none;position:absolute;top:8px;right:24px;}&:hover{.copy-button{display:block;}}code{counter-reset:line;counter-increment:line;padding:16px;font-family:", ";color:#fff;*{font-family:", ";}}.hljs *{white-space:normal;}"], fontFamily, fontFamily, fontFamily);
+})(["font-family:", ";display:block;font-size:14px;line-height:1.42857143;margin:0 0 32px;word-break:break-word;word-wrap:break-word;text-align:left;border-radius:5px;border:1px solid #dedede;background:#222;color:#fff;position:relative;.codeblock__inner{display:block;width:100%;max-height:46.25rem;overflow:scroll;}.copy-button{display:none;position:absolute;top:8px;right:24px;padding:4px;border-radius:4px;&,&:hover,&.Mui-disabled{background:", ";}}&:hover{.copy-button{display:block;}}code{counter-reset:line;counter-increment:line;padding:16px;font-family:", ";color:#fff;*{font-family:", ";}}.hljs *{white-space:normal;}"], fontFamily, _Colors.default.primary.main, fontFamily, fontFamily);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.16.3",
+  "version": "1.16.7",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "84ae55baf4d6614c13ec202e12b91faf18225474",
+  "gitHead": "02a50de3fa9e4a2f5c88bed4a701e8ac80f305e1",
   "dependencies": {
-    "@arcblock/icons": "^1.16.3",
-    "@arcblock/react-hooks": "^1.16.3",
+    "@arcblock/icons": "^1.16.7",
+    "@arcblock/react-hooks": "^1.16.7",
     "@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

@@ -6,6 +6,7 @@ import Typography from '@material-ui/core/Typography';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import useTheme from '@material-ui/core/styles/useTheme';
+import Avatar from '@arcblock/did-connect/lib/Avatar';
 
 import Icon from '../Icon';
 import Button from '../Button';
@@ -163,6 +164,7 @@ function prettySize(_size) {
 
 export default function Blocklet({
   title,
+  did,
   description,
   cover,
   type,
@@ -204,10 +206,13 @@ export default function Blocklet({
   const theme = useTheme();
   const isDownSm = useMediaQuery(theme.breakpoints.down('sm'));
   const isDownMd = useMediaQuery(theme.breakpoints.down('md'));
+  const isUPLg = useMediaQuery(theme.breakpoints.up('lg'));
 
   // If size is auto, need calculate actual size according to screen size
   // eslint-disable-next-line no-nested-ternary
   const actualSize = size === 'auto' ? (isDownSm ? 'xs' : isDownMd ? 'sm' : 'md') : size;
+  // eslint-disable-next-line no-nested-ternary
+  const didAvatarSize = size === 'auto' ? (isUPLg ? 100 : 48) : size === 'md' ? 100 : 48;
   const container = useRef(null);
 
   return (
@@ -218,10 +223,16 @@ export default function Blocklet({
       <div className="arcblock-blocklet__content">
         <div className="arcblock-blocklet__content--main" onClick={_onMainClick} ref={container}>
           <div className="arcblock-blocklet__content--body">
-            {cover && (
+            {cover ? (
               <div className="arcblock-blocklet__cover">
                 <Img src={cover} />
               </div>
+            ) : (
+              did && (
+                <div className="arcblock-blocklet__cover">
+                  <Avatar did={did} size={didAvatarSize} />
+                </div>
+              )
             )}
             <div className="arcblock-blocklet__info">
               <Typography
@@ -299,6 +310,7 @@ export default function Blocklet({
 
 Blocklet.propTypes = {
   title: PropTypes.string.isRequired,
+  did: PropTypes.string,
   isStickyButton: PropTypes.bool,
   description: PropTypes.string,
   cover: PropTypes.string,
@@ -319,6 +331,7 @@ Blocklet.propTypes = {
 Blocklet.defaultProps = {
   description: null,
   cover: null,
+  did: null,
   isStickyButton: false,
   buttonText: 'Install',
   buttonDisabled: false,

package/src/CodeBlock/index.js

@@ -25,6 +25,7 @@ import 'highlight.js/styles/atom-one-dark.css';
 
 import CopyIcon from '@material-ui/icons/FileCopy';
 import CheckIcon from '@material-ui/icons/Check';
+import colors from '../Colors';
 
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('js', javascript);
@@ -126,6 +127,14 @@ const Pre = styled.pre`
     position: absolute;
     top: 8px;
     right: 24px;
+    padding: 4px;
+    border-radius: 4px;
+
+    &,
+    &:hover,
+    &.Mui-disabled {
+      background: ${colors.primary.main};
+    }
   }
 
   &:hover {