@arcblock/ux 1.16.60 → 1.16.63

package/lib/BlockletNFT/index.js

@@ -0,0 +1,257 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockletNFT;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Portal = _interopRequireDefault(require("@material-ui/core/Portal"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+
+var _useMediaQuery = _interopRequireDefault(require("@material-ui/core/useMediaQuery"));
+
+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", "did", "description", "cover", "size", "addons", "button", "buttonText", "buttonDisabled", "buttonLoading", "isStickyButton", "onButtonClick", "onMainClick", "onTagClick", "className", "scaleClickZone"];
+
+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; }
+
+/**
+ * 美化数字 1000-->1k
+ * @param {*} _size
+ * @param {*} digits
+ * @returns
+ */
+function prettySize(_size) {
+  let digits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  let size = _size;
+  const list = ['', 'k', 'm', 'b'];
+  let index = 0;
+
+  while (size > 1000 && index < list.length - 1) {
+    size = (size / 1000).toFixed(digits);
+    index += 1;
+  }
+
+  return _size && "".concat(size).concat(list[index]);
+}
+
+const Div = _styledComponents.default.div.withConfig({
+  displayName: "BlockletNFT__Div",
+  componentId: "sc-19lczgp-0"
+})(["&.arcblock-blocklet{padding:0 16px;background:", ";overflow:hidden;box-shadow:0px 0px 8px #f0f0f0;&:hover{box-shadow:0px 2px 12px #f0f0f0;}}.arcblock-blocklet__content{padding:16px 0 0 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;}.arcblock-blocklet__cover{width:80px;height:80px;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;.arcblock-blocklet__button{margin-top:16px;display:inline-block;}}.arcblock-blocklet__title{margin:0;font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin:0 0 2px 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{height:2.3em;margin-bottom:3px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:initial;white-space:initial;word-break:break-all;}.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__cover{width:40px;height:40px;border-radius:6px;}.arcblock-blocklet__content{padding:16px 0;}.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 {
+    name
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: name,
+    color: "inherit",
+    size: 15,
+    style: {
+      marginRight: 8
+    }
+  });
+}
+
+BlockletIcon.propTypes = {
+  name: _propTypes.default.string.isRequired
+};
+
+function BlockletNFT(_ref2) {
+  let {
+    title,
+    did,
+    description,
+    cover,
+    size,
+    addons,
+    button,
+    buttonText,
+    buttonDisabled,
+    buttonLoading,
+    isStickyButton,
+    onButtonClick,
+    onMainClick,
+    onTagClick,
+    className,
+    scaleClickZone
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  const wrapHandler = function wrapHandler(handler) {
+    let stopFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => false;
+    return function (e) {
+      if (stopFn()) {
+        e.preventDefault();
+        e.stopPropagation();
+      } else if (handler instanceof Function) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          args[_key - 1] = arguments[_key];
+        }
+
+        handler(...args);
+      }
+    };
+  };
+
+  const _onButtonClick = wrapHandler(onButtonClick, () => {
+    // stop click while custom button or buttonDisabled or buttondLoading
+    if (button || buttonDisabled || buttonLoading) {
+      return true;
+    }
+
+    return false;
+  });
+
+  const _onMainClick = wrapHandler(onMainClick);
+
+  const theme = (0, _useTheme.default)();
+  const isDownSm = (0, _useMediaQuery.default)(theme.breakpoints.down('sm'));
+  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; // eslint-disable-next-line no-nested-ternary
+
+  const didAvatarSize = size === 'auto' ? isUpLg ? 80 : 40 : size === 'md' ? 80 : 40;
+  const container = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement(Div, Object.assign({}, rest, {
+    scaleClickZone: scaleClickZone,
+    className: "".concat(className, " arcblock-blocklet arcblock-blocklet--size-").concat(actualSize)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__content"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__content--main",
+    onClick: _onMainClick,
+    ref: container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__content--body"
+  }, 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, {
+    component: "h3",
+    variant: "h3",
+    className: "arcblock-blocklet__title",
+    title: title
+  }, title), description && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    component: "div",
+    variant: "body2",
+    className: "arcblock-blocklet__describe",
+    title: description
+  }, description), ['md', 'sm', 'xs'].includes(actualSize) && /*#__PURE__*/_react.default.createElement(_Portal.default, {
+    container: container.current,
+    disablePortal: actualSize === 'md'
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__button",
+    onClick: _onButtonClick,
+    style: {
+      display: isStickyButton ? 'block' : ''
+    }
+  }, button || onButtonClick && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: "arcblock-blocklet__button--hover",
+    variant: "outlined",
+    color: "primary",
+    size: "small",
+    disabled: buttonDisabled || buttonLoading,
+    style: actualSize === 'md' ? {
+      padding: '3px 20px',
+      fontSize: '14px'
+    } : {
+      padding: '3px 15px',
+      minWidth: '54px',
+      fontSize: '13px'
+    }
+  }, buttonLoading && /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
+    size: actualSize === 'md' ? 15 : 13,
+    style: {
+      marginRight: 3,
+      color: 'inherit'
+    }
+  }), buttonText))))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "arcblock-blocklet__addons"
+  }, addons.map((item, index) => /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    component: "span",
+    variant: "caption",
+    className: "arcblock-blocklet__addons--item" // eslint-disable-next-line react/no-array-index-key
+    ,
+    key: index,
+    title: item.title
+  }, item.empty ? null : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BlockletIcon, {
+    name: item.icon
+  }), item.pretty ? prettySize(item.value) : item.value)))));
+}
+
+BlockletNFT.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  did: _propTypes.default.string,
+  isStickyButton: _propTypes.default.bool,
+  description: _propTypes.default.string,
+  cover: _propTypes.default.string,
+  buttonText: _propTypes.default.string,
+  buttonDisabled: _propTypes.default.bool,
+  buttonLoading: _propTypes.default.bool,
+  button: _propTypes.default.element,
+  addons: _propTypes.default.arrayOf(_propTypes.default.object),
+  size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'auto']),
+  onButtonClick: _propTypes.default.func,
+  onMainClick: _propTypes.default.func,
+  onTagClick: _propTypes.default.func,
+  className: _propTypes.default.string,
+  scaleClickZone: _propTypes.default.number
+};
+BlockletNFT.defaultProps = {
+  description: null,
+  cover: null,
+  did: null,
+  isStickyButton: false,
+  buttonText: 'Install',
+  buttonDisabled: false,
+  buttonLoading: false,
+  button: null,
+  size: 'auto',
+  addons: [],
+  onButtonClick: null,
+  onMainClick: null,
+  onTagClick: null,
+  className: null,
+  scaleClickZone: 1.5
+};

package/lib/Button/wrap.js

@@ -29,6 +29,49 @@ 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; }
 
+const extendedColors = {
+  danger: {
+    contained: {
+      backgroundColor: _Colors.default.error.main,
+      color: _Colors.default.common.white
+    },
+    outlined: {
+      borderColor: _Colors.default.error.main,
+      color: _Colors.default.error.main
+    }
+  },
+  warning: {
+    contained: {
+      backgroundColor: _Colors.default.warning.main,
+      color: _Colors.default.common.white
+    },
+    outlined: {
+      borderColor: _Colors.default.warning.main,
+      color: _Colors.default.warning.main
+    }
+  },
+  did: {
+    contained: {
+      backgroundColor: _Colors.default.did.primary,
+      color: _Colors.default.common.white
+    },
+    outlined: {
+      borderColor: _Colors.default.did.primary,
+      color: _Colors.default.did.primary
+    }
+  },
+  reverse: {
+    contained: {
+      backgroundColor: 'rgba(255, 255, 255, 0.9)',
+      color: _Colors.default.grey[900]
+    },
+    outlined: {
+      borderColor: _Colors.default.grey[900],
+      color: _Colors.default.grey[900]
+    }
+  }
+};
+
 function _default(BaseComponent) {
   function WrappedComponent(props) {
     const newProps = (0, _Util.mergeProps)(props, WrappedComponent, ['style']);
@@ -57,64 +100,22 @@ function _default(BaseComponent) {
         break;
 
       default:
-    }
+    } // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
+    // 这里扩展 danger/warning/reverse/did 四种 color
+
 
-    const styles = Object.assign({}, style, {
+    const matched = extendedColors[color] && extendedColors[color][rest.variant];
+    const styles = Object.assign({}, style, _objectSpread({
       boxShadow: 'none',
       textTransform: 'capitalize'
-    }); // mui 只支持 4 种 color 值: default/inherit/primary/secondary (传入这 4 种之外的值会报 warning),
-    // 这里扩展 danger/warning/reverse 三种 color
-
+    }, matched));
     let _rest = rest;
 
-    switch (color) {
-      case 'error':
-      case 'danger':
-        {
-          if (rest.variant === 'contained') {
-            styles.backgroundColor = _Colors.default.error.main;
-            styles.color = _Colors.default.common.white;
-          } else {
-            styles.borderColor = _Colors.default.error.main;
-            styles.color = _Colors.default.error.main;
-          }
-
-          break;
-        }
-
-      case 'warning':
-        {
-          if (rest.variant === 'contained') {
-            styles.backgroundColor = _Colors.default.warning.main;
-            styles.color = _Colors.default.common.white;
-          } else {
-            styles.borderColor = _Colors.default.warning.main;
-            styles.color = _Colors.default.warning.main;
-          }
-
-          break;
-        }
-
-      case 'reverse':
-        {
-          if (rest.variant === 'contained') {
-            styles.backgroundColor = 'rgba(255, 255, 255, 0.9)';
-            styles.color = _Colors.default.grey[900];
-          } else {
-            styles.borderColor = _Colors.default.grey[900];
-            styles.color = _Colors.default.grey[900];
-          }
-
-          break;
-        }
-      // 除扩展的几种 color 外, 由 mui button 自己处理 color
-
-      default:
-        {
-          _rest = _objectSpread(_objectSpread({}, _rest), {}, {
-            color
-          });
-        }
+    if (!matched) {
+      // mui button 本身支持的 color 交由 mui 处理
+      _rest = _objectSpread(_objectSpread({}, _rest), {}, {
+        color
+      });
     }
 
     if (rounded) {

package/lib/Layout/dashboard/header.js

@@ -21,6 +21,8 @@ var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
+var _Hidden = _interopRequireDefault(require("@material-ui/core/Hidden"));
+
 var _Menu = _interopRequireDefault(require("@material-ui/icons/Menu"));
 
 var _reactRouterDom = require("react-router-dom");
@@ -38,7 +40,16 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const StyledAppBar = (0, _styledComponents.default)(_AppBar.default).withConfig({
   displayName: "header__StyledAppBar",
   componentId: "sc-yt81c4-0"
-})(["&&{z-index:", ";background:", ";box-shadow:none;top:0;height:auto;}.header-toolbar{background:", ";color:", ";margin:", "px 0;}.header-link{display:flex;text-decoration:none;flex-shrink:1;overflow:hidden;}.header-logo{margin-right:20px;}.header-title{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}.header-title__primary{font-size:24px;font-weight:800;color:", ";text-transform:uppercase;display:flex;align-items:center;}.header-title__secondary{font-size:14px;line-height:1.71;color:", ";}.header-addons{display:flex;justify-content:center;align-items:center;flex-shrink:9999999;.user-addon{.header-avatar{width:32px;border-radius:16px;height:auto;}}}.header-menu{display:none;}@media (max-width:", "px){.header-logo{position:absolute;width:0;height:0;overflow:hidden;}.header-title{display:none;}.header-title__primary{font-size:20px;}.header-menu{display:block;}}"], props => props.theme.zIndex.drawer + 1, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.palette.text.primary, props => props.theme.spacing(1), props => props.theme.typography.color.main, props => props.theme.typography.color.gray, props => props.theme.breakpoints.values.md);
+})(["&&{z-index:", ";background:", ";box-shadow:none;top:0;height:auto;}.header-toolbar{background:", ";color:", ";margin:", "px 0;}.header-link{display:flex;text-decoration:none;flex-shrink:1;overflow:hidden;}.header-logo{margin-right:20px;}.header-title{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}.header-title__primary{font-size:24px;font-weight:800;color:", ";text-transform:uppercase;display:flex;align-items:center;}.header-title__secondary{font-size:14px;line-height:1.71;color:", ";}.header-addons{display:flex;justify-content:center;align-items:center;flex-shrink:9999999;.user-addon{.header-avatar{width:32px;border-radius:16px;height:auto;}}}.header-menu{display:none;}", "{.header-title{display:none;}.header-title__primary{font-size:20px;}.header-menu{display:block;}}"], props => props.theme.zIndex.drawer + 1, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.palette.text.primary, props => props.theme.spacing(1), props => props.theme.typography.color.main, props => props.theme.typography.color.gray, props => props.theme.breakpoints.down('sm'));
+/*
+  自定义 logo 相关:
+  如果为 logo prop 传入一个自定义的 svg, 并且 svg 中的元素通过 id 引用了 defs 中的元素 (比如 linearGradient),
+  这种情况下因为 header 和 sidebar 中会各有一个相同的 svg, defs 中元素的 id 会出现冲突,
+  当屏幕较窄时, header 会通过设置 display:none 将 svg logo 隐藏,
+  这会导致 svg defs 中的元素不能被正常引用 (比如 fill 引用的 color 失效), 这会进一步导致 sidebar 中的 logo 不能正常显示.
+  考虑到上述问题, 目前使用 Hidden 组件控制 logo 的显示/隐藏
+  参考: https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
+*/
 
 function Header(_ref) {
   let {
@@ -68,11 +79,13 @@ function Header(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Menu.default, null)), /*#__PURE__*/_react.default.createElement(_reactRouterDom.Link, {
     to: homeUrl,
     className: "header-link"
+  }, /*#__PURE__*/_react.default.createElement(_Hidden.default, {
+    smDown: true
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "header-logo"
   }, logo || /*#__PURE__*/_react.default.createElement(_Logo.default, {
     showText: false
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     className: "header-title"
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     component: "h2",

package/lib/Layout/dashboard/index.js

@@ -67,10 +67,10 @@ function Dashboard(_ref) {
   const {
     width
   } = (0, _useWindowSize.default)();
-  const [drawerMode, setDrawerMode] = (0, _react.useState)(width > breakpoint ? 'permanent' : 'temporary');
+  const [drawerMode, setDrawerMode] = (0, _react.useState)(width >= breakpoint ? 'permanent' : 'temporary');
   const [drawerOpen, setDrawerOpen] = (0, _react.useState)(drawerMode === 'permanent');
   (0, _react.useEffect)(() => {
-    const newMode = width > breakpoint ? 'permanent' : 'temporary';
+    const newMode = width >= breakpoint ? 'permanent' : 'temporary';
     setDrawerMode(newMode);
     setDrawerOpen(newMode !== 'temporary');
   }, [width]);

package/lib/Layout/dashboard/sidebar.js

@@ -104,13 +104,13 @@ Sidebar.defaultProps = {
 const MenuItems = /*#__PURE__*/_react.default.memo(_styledComponents.default.div.withConfig({
   displayName: "sidebar__MenuItems",
   componentId: "sc-gaosgy-0"
-})(["flex:1;display:flex;flex-direction:column;&& .sidebar-logo{display:none;border-bottom:1px solid #eee;background:", ";position:sticky;top:0;z-index:1;padding:10px 0;text-align:center;font-size:0;}@media (max-width:", "px){&& .sidebar-logo{display:block;}}"], props => props.theme.palette.background.default, props => props.theme.breakpoints.values.md));
+})(["flex:1;display:flex;flex-direction:column;&& .sidebar-logo{display:none;border-bottom:1px solid #eee;background:", ";position:sticky;top:0;z-index:1;padding:10px 0;text-align:center;font-size:0;}", "{&& .sidebar-logo{display:block;}}"], props => props.theme.palette.background.default, props => props.theme.breakpoints.down('sm')));
 
 const gradient = 'linear-gradient(32deg, rgba(144, 255, 230, 0.1), rgba(144, 255, 230, 0))';
 const MenuItem = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "sidebar__MenuItem",
   componentId: "sc-gaosgy-1"
-})(["&&{display:block;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";&:hover{background:", ";border-left-color:", ";}.menu-title{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;width:80%;}.MuiButton-label{display:flex;flex-direction:column;justify-content:center;align-items:center;}}"], props => props.selected ? gradient : '', props => props.selected ? _teal.default.A700 : 'transparent', gradient, _teal.default.A700);
+})(["&&{display:block;width:100%;transition:all 200ms ease-in-out;background:", ";padding:24px 0;border-left:2px solid ", ";border-radius:0;&:hover{background:", ";border-left-color:", ";}.menu-title{margin-top:8px;font-size:12px;font-weight:500;text-align:center;text-transform:capitalize;letter-spacing:normal;width:80%;}.MuiButton-label{display:flex;flex-direction:column;justify-content:center;align-items:center;}}"], props => props.selected ? gradient : '', props => props.selected ? _teal.default.A700 : 'transparent', gradient, _teal.default.A700);
 
 var _default = (0, _reactRouterDom.withRouter)((0, _withTheme.default)(Sidebar));
 

package/lib/Layout/index.js

@@ -232,7 +232,7 @@ Layout.defaultProps = {
 const Div = _styledComponents.default.div.withConfig({
   displayName: "Layout__Div",
   componentId: "sc-12bllvc-0"
-})(["width:100%;min-height:100vh;display:flex;flex-direction:column;.appbar{&.appbar--border{box-shadow:none;&::before{content:'';position:absolute;left:0;right:0;height:1px;bottom:-1px;display:block;background-color:rgba(0,0,0,0.12);}}}.toolbar{min-height:56px;background:inherit;white-space:nowrap;.menu-logo{font-size:0;margin-right:8px;}.nav-links{display:flex;align-items:center;.nav-link{margin:8px 12px;font-size:16px;display:flex;align-items:center;}.highlight-nav{font-weight:bolder;}}.brand{cursor:pointer;text-decoration:none;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;}.description{color:#999;font-size:15px;margin-left:10px;font-weight:normal;flex-shrink:999999;}}@media (min-width:", "px){.toolbar{.menu-button{display:none;}.menu-logo{& + .brand{padding-left:45px;margin-left:-45px;}}}}@media (max-width:", "px){.toolbar{.nav-links,.menu-logo,.description{display:none;}}}"], props => props.theme.breakpoints.values.md, props => props.theme.breakpoints.values.md - 1);
+})(["width:100%;min-height:100vh;display:flex;flex-direction:column;.appbar{&.appbar--border{box-shadow:none;&::before{content:'';position:absolute;left:0;right:0;height:1px;bottom:-1px;display:block;background-color:rgba(0,0,0,0.12);}}}.toolbar{min-height:56px;background:inherit;white-space:nowrap;.menu-logo{font-size:0;margin-right:8px;}.nav-links{display:flex;align-items:center;.nav-link{margin:8px 12px;font-size:16px;display:flex;align-items:center;}.highlight-nav{font-weight:bolder;}}.brand{cursor:pointer;text-decoration:none;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;}.description{color:#999;font-size:15px;margin-left:10px;font-weight:normal;flex-shrink:999999;}}", "{.toolbar{.menu-button{display:none;}.menu-logo{& + .brand{padding-left:45px;margin-left:-45px;}}}}", "{.toolbar{.nav-links,.menu-logo,.description{display:none;}}}"], props => props.theme.breakpoints.up('md'), props => props.theme.breakpoints.down('sm'));
 
 const DrawerDiv = _styledComponents.default.nav.withConfig({
   displayName: "Layout__DrawerDiv",

package/package.json

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