@arcblock/ux 1.17.14 → 1.17.15

package/package.json

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

package/src/Header/header.js

@@ -0,0 +1,157 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Box from '@material-ui/core/Box';
+import Container from '@material-ui/core/Container';
+import useTheme from '@material-ui/core/styles/useTheme';
+
+/**
+ * Header 组件
+ * TODO: Layout/dashboard 可以复用此处的 header
+ */
+function Header({
+  logo,
+  brand,
+  brandAddon,
+  description,
+  children,
+  addons,
+  prepend,
+  containerComponent: ContainerComponent,
+  ...rest
+}) {
+  const theme = useTheme();
+  return (
+    <Root {...rest} $theme={theme}>
+      <ContainerComponent className="header-container">
+        {prepend}
+        {logo && <div className="header-logo">{logo}</div>}
+        <div className="header-brand">
+          <div className="header-brand-title">
+            <h2>{brand}</h2>
+            <div className="header-brand-addon">{brandAddon}</div>
+          </div>
+          <div className="header-brand-desc">{description}</div>
+        </div>
+        {children}
+        <Box flexGrow={1} />
+        <div className="header-addons">{addons}</div>
+      </ContainerComponent>
+    </Root>
+  );
+}
+
+Header.propTypes = {
+  logo: PropTypes.node,
+  // 相当于 Title
+  brand: PropTypes.string,
+  // brand 右侧的内容区域, 可显示一个 badge 或 tag
+  brandAddon: PropTypes.node,
+  // brand 下方的描述
+  description: PropTypes.string,
+  children: PropTypes.node,
+  // 右侧区域, 可以放置 icons/actions/login 等
+  addons: PropTypes.node,
+  // logo 左侧内容
+  prepend: PropTypes.node,
+  // 默认使用 mui 的 Container, 如果不想限制 header 内容区域的宽度, 可以设置为 div
+  containerComponent: PropTypes.elementType,
+};
+
+Header.defaultProps = {
+  logo: null,
+  brand: null,
+  brandAddon: null,
+  description: null,
+  children: null,
+  addons: null,
+  prepend: null,
+  containerComponent: Container,
+};
+
+const Root = styled.div`
+  position: relative;
+  z-index: ${props => props.$theme.zIndex.drawer + 1};
+  font-size: 14px;
+  background: ${props => props.$theme.palette.common.white};
+  .header-container {
+    display: flex;
+    align-items: center;
+    height: 64px;
+    padding: 8px 16px;
+  }
+  .header-logo {
+    display: inline-flex;
+    justify-content: center;
+    position: relative;
+    height: 40px;
+    margin-right: 16px;
+    img,
+    svg {
+      width: auto;
+      height: 100%;
+    }
+    > a {
+      height: 100%;
+      line-height: 1;
+    }
+    > a::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: transparent;
+      content: '';
+    }
+  }
+  .header-brand {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    margin-right: 16px;
+    .header-brand-title {
+      display: flex;
+      align-items: center;
+      h2 {
+        font-size: 16px;
+      }
+      .header-brand-addon {
+        margin-left: 8px;
+      }
+    }
+    .header-brand-desc {
+      color: #9397a1;
+    }
+  }
+  .header-addons {
+    display: flex;
+    align-items: center;
+  }
+  ${props => props.$theme.breakpoints.down('md')} {
+    .header-brand {
+      margin-right: 12px;
+      .header-brand-title {
+        h2 {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+  ${props => props.$theme.breakpoints.down('sm')} {
+    .header-container {
+      height: 56px;
+    }
+    .header-menu {
+      display: inline-block;
+    }
+    .header-logo {
+      height: 32px;
+    }
+    .header-brand {
+      display: none;
+    }
+  }
+`;
+
+export default Header;

package/src/Header/index.js

@@ -1,156 +1,2 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import Box from '@material-ui/core/Box';
-import useTheme from '@material-ui/core/styles/useTheme';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import MenuIcon from '@material-ui/icons/Menu';
-import Button from '@material-ui/core/IconButton';
-
-/**
- * Header 组件
- * TODO: Layout/dashboard 可以复用此处的 header
- */
-function Header({
-  logo,
-  brand,
-  brandAddon,
-  description,
-  children,
-  addons,
-  mobile,
-  onToggleMenu,
-  ...rest
-}) {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-  const _mobile = { ...Header.defaultProps.mobile, ...mobile };
-  // 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
-  const hideLogo = isMobile && _mobile.hideLogo;
-  return (
-    <Root {...rest} $theme={theme}>
-      {_mobile.enableMenu && (
-        <Button color="inherit" edge="start" className="header-menu" onClick={onToggleMenu}>
-          <MenuIcon />
-        </Button>
-      )}
-      {!hideLogo && <div className="header-logo">{logo}</div>}
-      <div className="header-brand">
-        <div className="header-brand-title">
-          <h2>{brand}</h2>
-          <div className="header-brand-addon">{brandAddon}</div>
-        </div>
-        <div className="header-brand-desc">{description}</div>
-      </div>
-      {children}
-      <Box flexGrow={1} />
-      <div className="header-addons">{addons}</div>
-    </Root>
-  );
-}
-
-Header.propTypes = {
-  logo: PropTypes.any,
-  // 相当于 Title
-  brand: PropTypes.string,
-  // brand 右侧的内容区域, 可显示一个 badge 或 tag
-  brandAddon: PropTypes.any,
-  // brand 下方的描述
-  description: PropTypes.string,
-  children: PropTypes.any,
-  // 右侧区域, 可以放置 icons/actions/login 等
-  addons: PropTypes.any,
-  // 窄屏下配置
-  mobile: PropTypes.shape({
-    enableMenu: PropTypes.bool,
-    hideLogo: PropTypes.bool,
-  }),
-  onToggleMenu: PropTypes.func,
-};
-
-Header.defaultProps = {
-  logo: null,
-  brand: null,
-  brandAddon: null,
-  description: null,
-  children: null,
-  addons: null,
-  mobile: { enableMenu: true, hideLogo: true },
-  onToggleMenu: () => {},
-};
-
-const Root = styled.div`
-  display: flex;
-  align-items: center;
-  position: relative;
-  z-index: ${props => props.$theme.zIndex.drawer + 1};
-  height: 64px;
-  padding: 12px 24px;
-  font-size: 14px;
-  background: #fff;
-  .header-menu {
-    display: none;
-  }
-  .header-logo {
-    display: inline-flex;
-    justify-content: center;
-    position: relative;
-    height: 40px;
-    margin-right: 16px;
-    img,
-    svg {
-      width: auto;
-      height: 100%;
-    }
-    > a {
-      height: 100%;
-      line-height: 1;
-    }
-    > a::before {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-color: transparent;
-      content: '';
-    }
-  }
-  .header-brand {
-    display: flex;
-    flex-direction: column;
-    margin-right: 16px;
-    .header-brand-title {
-      display: flex;
-      align-items: center;
-      h2 {
-        font-size: 16px;
-      }
-      .header-brand-addon {
-        margin-left: 8px;
-      }
-    }
-    .header-brand-desc {
-      color: #9397a1;
-    }
-  }
-  .header-addons {
-    display: flex;
-    align-items: center;
-  }
-  ${props => props.$theme.breakpoints.down('sm')} {
-    height: 56px;
-    padding: 8px 16px;
-    .header-menu {
-      display: inline-block;
-    }
-    .header-logo {
-      height: 32px;
-    }
-    .header-brand {
-      display: none;
-    }
-  }
-`;
-
-export default Header;
+export { default as Header } from './header';
+export { default as ResponsiveHeader } from './responsive-header';

package/src/Header/responsive-header.js

@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import MenuIcon from '@material-ui/icons/Menu';
+import Button from '@material-ui/core/IconButton';
+import useTheme from '@material-ui/core/styles/useTheme';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import Drawer from '@material-ui/core/Drawer';
+import Header from './header';
+
+/**
+ * ResponsiveHeader
+ * - 窄屏下显示 burge menu
+ * - 窄屏下将 children 区域显示到 menu 中
+ *
+ * 注意: 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
+ */
+function ResponsiveHeader({ menu, prepend, children, ...rest }) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const _children =
+    typeof children === 'function'
+      ? children({ isMobile, closeMenu: () => setDrawerOpen(false) })
+      : children;
+  const { logo, brand, brandAddon, description } = rest;
+  // 如果 children 没有值, 则使用普通的 Header 组件渲染 (此时并没有什么内容需要在 menu 中显示)
+  if (!children) {
+    return <Header prepend={prepend} {...rest} />;
+  }
+  return (
+    <Root
+      prepend={
+        prepend || (
+          <Button
+            color="inherit"
+            edge="start"
+            className="header-menu"
+            onClick={() => setDrawerOpen(true)}>
+            <MenuIcon />
+          </Button>
+        )
+      }
+      {...rest}
+      logo={isMobile ? null : logo}
+      $theme={theme}>
+      {!isMobile && _children}
+      {isMobile && (
+        <Drawer
+          open={drawerOpen}
+          onClose={() => setDrawerOpen(false)}
+          ModalProps={{ disablePortal: true, keepMounted: true }}>
+          <Sidebar>
+            <div className="header-sidebar-head">
+              <div className="header-sidebar-logo">{logo}</div>
+              {brand && <h2>{brand}</h2>}
+              {description && <p className="header-sidebar-description">{description}</p>}
+              {brandAddon && <div className="header-sidebar-brandaddon">{brandAddon}</div>}
+            </div>
+            <div className="header-sidebar-content">{_children}</div>
+          </Sidebar>
+        </Drawer>
+      )}
+    </Root>
+  );
+}
+
+ResponsiveHeader.propTypes = {
+  ...Header.PropTypes,
+  // 如果是 function, 则
+  // - 会传入一个 isMobile 参数, isMobile 为 true 时, 表示 children 会显示在 menu 中, 可以根据 isMobile 参数调整要渲染的内容, 比如如果 isMobile 为 true 则使用 inline 模式的 NavMenu (适用于移动端)
+  // - 会传入一个 closeMenu 参数, 可以关闭 menu
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+};
+
+ResponsiveHeader.defaultProps = {
+  ...Header.defaultProps,
+};
+
+const Root = styled(Header)`
+  .header-menu {
+    display: none;
+  }
+  ${props => props.$theme.breakpoints.down('sm')} {
+    .header-menu {
+      display: block;
+    }
+  }
+`;
+
+/**
+ * Sidebar
+ */
+const Sidebar = styled.div`
+  min-width: 280px;
+  font-size: 14px;
+  .header-sidebar-head {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 24px 0;
+    border-bottom: 1px solid #eee;
+    font-size: 12px;
+    .header-sidebar-logo {
+      min-width: 44px;
+      height: 44px;
+      font-size: 44px;
+      > * {
+        width: auto;
+        height: 100%;
+      }
+      > a {
+        display: block;
+      }
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+    h2 {
+      margin-top: 12px;
+      font-size: 14px;
+    }
+    .header-sidebar-description {
+      margin: 2px 0 0 0;
+    }
+    .header-sidebar-brandaddon {
+      margin-top: 8px;
+    }
+  }
+  .header-sidebar-content {
+    padding: 16px 0;
+  }
+`;
+
+export default ResponsiveHeader;