@arcblock/ux 1.16.61 → 1.16.62

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,7 +104,7 @@ 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({

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.61",
+  "version": "1.16.62",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "7fea6393d63b83059873613993172a6dc98508ce",
+  "gitHead": "2c6b82d4b6ccdd21ea910734c00fce236f9e260a",
   "dependencies": {
-    "@arcblock/icons": "^1.16.61",
-    "@arcblock/react-hooks": "^1.16.61",
+    "@arcblock/icons": "^1.16.62",
+    "@arcblock/react-hooks": "^1.16.62",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/lato": "^4.5.3",
     "@material-ui/core": "^4.12.3",

package/src/Layout/dashboard/header.js

@@ -6,6 +6,7 @@ import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
+import Hidden from '@material-ui/core/Hidden';
 import MenuIcon from '@material-ui/icons/Menu';
 import { Link } from 'react-router-dom';
 
@@ -70,19 +71,7 @@ const StyledAppBar = styled(AppBar)`
   .header-menu {
     display: none;
   }
-  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
-    /*
-      以下样式用来替代 display:none, 如果为 logo prop 传入一个自定义的 svg, 并且 svg 中的元素通过 id 引用了 defs 中的元素 (比如 linearGradient),
-      这种情况下因为 header 和 sidebar 中会各有一个相同的 svg, defs 中元素的 id 会出现冲突,
-      当屏幕很窄的情况, header 会通过设置 display:none 将 svg logo 隐藏,
-      这会导致 svg defs 中的元素不能被正常引用 (比如 fill 引用的 color 失效), 这会进一步导致 sidebar 中的 logo 不能正常显示
-    */
-    .header-logo {
-      position: absolute;
-      width: 0;
-      height: 0;
-      overflow: hidden;
-    }
+  ${props => props.theme.breakpoints.down('sm')} {
     .header-title {
       display: none;
     }
@@ -95,6 +84,15 @@ const StyledAppBar = styled(AppBar)`
   }
 `;
 
+/*
+  自定义 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/
+*/
 export default function Header({
   children,
   brand,
@@ -118,7 +116,9 @@ export default function Header({
           <MenuIcon />
         </Button>
         <Link to={homeUrl} className="header-link">
-          <div className="header-logo">{logo || <Logo showText={false} />}</div>
+          <Hidden smDown>
+            <div className="header-logo">{logo || <Logo showText={false} />}</div>
+          </Hidden>
           <div className="header-title">
             <Typography component="h2" noWrap className="header-title__primary">
               {brand}

package/src/Layout/dashboard/index.js

@@ -64,11 +64,11 @@ export default function Dashboard({
 }) {
   const breakpoint = 960;
   const { width } = useWindowSize();
-  const [drawerMode, setDrawerMode] = useState(width > breakpoint ? 'permanent' : 'temporary');
+  const [drawerMode, setDrawerMode] = useState(width >= breakpoint ? 'permanent' : 'temporary');
   const [drawerOpen, setDrawerOpen] = useState(drawerMode === 'permanent');
 
   useEffect(() => {
-    const newMode = width > breakpoint ? 'permanent' : 'temporary';
+    const newMode = width >= breakpoint ? 'permanent' : 'temporary';
     setDrawerMode(newMode);
     setDrawerOpen(newMode !== 'temporary');
   }, [width]);

package/src/Layout/dashboard/sidebar.js

@@ -77,7 +77,7 @@ const MenuItems = React.memo(styled.div`
     text-align: center;
     font-size: 0;
   }
-  @media (max-width: ${props => props.theme.breakpoints.values.md}px) {
+  ${props => props.theme.breakpoints.down('sm')} {
     && .sidebar-logo {
       display: block;
     }

package/src/Layout/index.js

@@ -264,7 +264,7 @@ const Div = styled.div`
     }
   }
 
-  @media (min-width: ${props => props.theme.breakpoints.values.md}px) {
+  ${props => props.theme.breakpoints.up('md')} {
     .toolbar {
       .menu-button {
         display: none;
@@ -278,7 +278,7 @@ const Div = styled.div`
     }
   }
 
-  @media (max-width: ${props => props.theme.breakpoints.values.md - 1}px) {
+  ${props => props.theme.breakpoints.down('sm')} {
     .toolbar {
       .nav-links,
       .menu-logo,