feat(Shell): support fixedHeader&Navigation fixed mode (alibaba-fusio…

…n#1738)
rosky · Apr 3, 2020 · 0b674b6 · 0b674b6
1 parent 43cd5a3
commit 0b674b6
Show file tree

Hide file tree

Showing 8 changed files with 208 additions and 33 deletions.
diff --git a/docs/shell/index.en-us.md b/docs/shell/index.en-us.md
@@ -46,6 +46,9 @@ Shell is the infrastructure framework of the whole application. It embodies the
 | Param                | Description  | Type              | Default Value      |
 | -------------------- | ------------ | ----------------- | ------------------ |
 | device             | Preset screen width, tt determines whether `Navigation` `LocalNavigation` `Ancillary`take space or not<br><br>**option**:<br>'phone', 'tablet', 'desktop'     | Enum         |  desktop    |
+| type             | type of Shell <br><br>**可选值**:<br>'light', 'dark', 'brand'     | Enum         |  light    |
+| fixedHeader   | fixed header or not. Doesn't work under IE11    | Boolean         | false     |
+
 
 ### Shell.Navigation
 It will tell his children whether it's collapse or not by `isCollapse` via Context.
@@ -56,7 +59,7 @@ It will tell his children whether it's collapse or not by `isCollapse` via Conte
 | direction  | header or asider<br><br>**option**:<br>'hoz', 'ver'    | Enum         |  hoz    |
 | align      | Arrangement of Navigation when direction is hoz<br><br>**option**:<br>'left', 'right', 'center'   | Enum        |  right  |
 | onCollapseChange   | this will be triggered when collapse changed by inner icon   | Function        | () => {}   |
-
+| fixed   | fixed or not, only worked when Shell fixedHeader is true   | Boolean         | false     |
 
 ### Shell.LocalNavigation
 | Param                | Description  | Type              | Default Value      |
@@ -69,6 +72,7 @@ It will tell his children whether it's collapse or not by `isCollapse` via Conte
 | -------------------- | ------------ | ----------------- | ------------------ |
 | collapse   | collapse or not   | Boolean         | false     |
 | onCollapseChange   | this will be triggered when collapse changed by inner icon   | Function        | () => {}   |
+| fixed   | fixed or not, only worked when Shell fixedHeader is true   | Boolean         | false     |
 
 ### Shell.Ancillary
 | Param                | Description  | Type              | Default Value      |

diff --git a/docs/shell/index.md b/docs/shell/index.md
@@ -47,6 +47,7 @@ Shell 是整个应用的基础结构框架。它体现应用的结构形式和
 | -------------------- | ------------ | ----------------- | ------------------ |
 | device             | 预设屏幕宽度，会影响`Navigation` `LocalNavigation` `Ancillary`等是否占据空间<br><br>**可选值**:<br>'phone', 'tablet', 'desktop'     | Enum         |  desktop    |
 | type             | 样式类型，分浅色主题、深色主题、主题色主题，用户可自定义配置<br><br>**可选值**:<br>'light', 'dark', 'brand'     | Enum         |  light    |
+| fixedHeader   | 是否固定Header，采用sticky布局，不支持 IE11    | Boolean         | false     |
 
 ### Shell.Navigation
 向子组件透传 isCollapse 的Context，表示当前是否处于折叠状态
@@ -57,7 +58,7 @@ Shell 是整个应用的基础结构框架。它体现应用的结构形式和
 | collapse   | 是否折叠(折叠成只有icon状态)   | Boolean         | false     |
 | align   | 横向模式下，导航排布的位置<br><br>**可选值**:<br>'left', 'right', 'center'   | Enum        |  right  |
 | onCollapseChange   | 默认按钮触发的展开收起状态   | Function        | () => {}   |
-
+| fixed   | 是否固定，且需要在在 Shell fixedHeader时生效    | Boolean         | false     |
 
 ### Shell.LocalNavigation
 | 参数                  | 说明          | 类型              | 默认值              |
@@ -70,6 +71,7 @@ Shell 是整个应用的基础结构框架。它体现应用的结构形式和
 | -------------------- | ------------ | ----------------- | ------------------ |
 | collapse   | 是否折叠（完全收起）   | Boolean         | false     |
 | onCollapseChange   | 默认按钮触发的展开收起状态   | Function        | () => {}   |
+| fixed   | 是否固定，且需要在在 Shell fixedHeader时生效    | Boolean         | false     |
 
 ### Shell.Ancillary
 | 参数                  | 说明          | 类型              | 默认值              |

diff --git a/src/shell/base.jsx b/src/shell/base.jsx
@@ -25,12 +25,17 @@ export default function Base(props) {
              * @param {Boolean} collapse 弹层是否显示
              */
             onCollapseChange: PropTypes.func,
+            /**
+             * 是否固定，仅对 Shell.Navigation Shell.ToolDock 生效，且需要在在 Shell fixedHeader时生效
+             */
+            fixed: PropTypes.bool,
         };
 
         static defaultProps = {
             prefix: 'next-',
             component: 'div',
             onCollapseChange: () => {},
+            fixed: false,
         };
 
         static childContextTypes = {
@@ -61,7 +66,7 @@ export default function Base(props) {
                 ...others
             } = this.props;
 
-            let Tag = component;
+            const Tag = component;
 
             const cls = classnames({
                 [`${prefix}shell-${componentName.toLowerCase()}`]: true,
@@ -87,13 +92,6 @@ export default function Base(props) {
                 return children;
             }
 
-            if (
-                ['ToolDock'].indexOf(componentName) > -1 ||
-                (componentName === 'Navigation' && direction === 'ver')
-            ) {
-                Tag = 'aside';
-            }
-
             return (
                 <Tag className={cls} {...others}>
                     {newChildren}

diff --git a/src/shell/main.scss b/src/shell/main.scss
@@ -42,6 +42,11 @@
             margin-left: 10px;
         }
 
+        &#{$shell-prefix}-fixed-header {
+            position: sticky;
+            top: 0;
+        }
+
         #{$shell-prefix}-navigation {
             flex: 1;
             display: flex;
@@ -95,6 +100,23 @@
         }
     }
 
+    .#{$css-prefix}aside-navigation,
+    .#{$css-prefix}aside-tooldock {
+        display: flex;
+        &.fixed {
+            position: fixed;
+            top: 0;
+            bottom: 0;
+        }
+    }
+
+    .#{$css-prefix}aside-navigation.fixed {
+        left: 0;
+    }
+    .#{$css-prefix}aside-tooldock.fixed {
+        right: 0;
+    }
+
     &-aside {
         transition: all .2s $motion-ease;
 

diff --git a/src/shell/shell.jsx b/src/shell/shell.jsx
@@ -3,11 +3,11 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { polyfill } from 'react-lifecycles-compat';
 import ConfigProvider from '../config-provider';
+import Affix from '../affix';
 import Icon from '../icon';
-import { KEYCODE } from '../util';
+import { KEYCODE, dom, env } from '../util';
 
 import { isBoolean, getCollapseMap } from './util';
-
 /**
  * Shell
  */
@@ -31,12 +31,17 @@ export default function ShellBase(props) {
              * @enumdesc 浅色, 深色, 主题色
              */
             type: PropTypes.oneOf(['light', 'dark', 'brand']),
+            /**
+             * 是否固定 header, 用sticky实现，IE下降级为Affix
+             */
+            fixedHeader: PropTypes.bool,
         };
 
         static defaultProps = {
             prefix: 'next-',
             device: 'desktop',
             type: 'light',
+            fixedHeader: false,
         };
 
         constructor(props) {
@@ -67,6 +72,10 @@ export default function ShellBase(props) {
             return {};
         }
 
+        componentDidMount() {
+            this.checkAsideFixed();
+        }
+
         componentDidUpdate(prevProps) {
             if (prevProps.device !== this.props.device) {
                 const deviceMapBefore = getCollapseMap(prevProps.device);
@@ -84,8 +93,47 @@ export default function ShellBase(props) {
                     }
                 });
             }
+
+            setTimeout(() => {
+                // 如果左侧边栏固定
+                this.checkAsideFixed();
+            }, 201);
         }
 
+        checkAsideFixed = () => {
+            const { fixedHeader } = this.props;
+
+            if (!fixedHeader) {
+                return;
+            }
+
+            let headerHeight;
+            if (
+                this.headerRef &&
+                (this.navigationFixed || this.toolDockFixed)
+            ) {
+                headerHeight = dom.getStyle(this.headerRef, 'height');
+            }
+
+            if (this.navigationFixed) {
+                const style = {};
+                style.marginLeft = dom.getStyle(this.navRef, 'width');
+                dom.addClass(this.navRef, 'fixed');
+                headerHeight &&
+                    dom.setStyle(this.navRef, { top: headerHeight });
+                dom.setStyle(this.localNavRef || this.submainRef, style);
+            }
+
+            if (this.toolDockFixed) {
+                const style = {};
+                style.marginRight = dom.getStyle(this.toolDockRef, 'width');
+                dom.addClass(this.toolDockRef, 'fixed');
+                headerHeight &&
+                    dom.setStyle(this.toolDockRef, { top: headerHeight });
+                dom.setStyle(this.localNavRef || this.submainRef, style);
+            }
+        };
+
         setChildCollapse = (child, mark) => {
             const { device, collapseMap, controll } = this.state;
             const { collapse } = child.props;
@@ -197,8 +245,34 @@ export default function ShellBase(props) {
             this.toggleAside(mark, props, e);
         };
 
+        saveHeaderRef = ref => {
+            this.headerRef = ref;
+        };
+        saveLocalNavRef = ref => {
+            this.localNavRef = ref;
+        };
+
+        saveNavRef = ref => {
+            this.navRef = ref;
+        };
+
+        saveSubmainRef = ref => {
+            this.submainRef = ref;
+        };
+
+        saveToolDockRef = ref => {
+            this.toolDockRef = ref;
+        };
+
         renderShell = props => {
-            const { prefix, children, className, type, ...others } = props;
+            const {
+                prefix,
+                children,
+                className,
+                type,
+                fixedHeader,
+                ...others
+            } = props;
 
             const { device } = this.state;
 
@@ -239,6 +313,7 @@ export default function ShellBase(props) {
                                 layout[mark] = [];
                             }
 
+                            this.toolDockFixed = child.props.fixed;
                             const childT = this.setChildCollapse(child, mark);
                             layout[mark] = childT;
 
@@ -262,7 +337,7 @@ export default function ShellBase(props) {
                                 }
 
                                 needNavigationTrigger = true;
-
+                                this.navigationFixed = child.props.fixed;
                                 const childN = this.setChildCollapse(
                                     child,
                                     mark
@@ -278,6 +353,7 @@ export default function ShellBase(props) {
 
             const headerCls = classnames({
                 [`${prefix}shell-header`]: true,
+                [`${prefix}shell-fixed-header`]: fixedHeader,
             });
 
             const mainCls = classnames({
@@ -292,6 +368,14 @@ export default function ShellBase(props) {
                 [`${prefix}shell-aside`]: true,
             });
 
+            const toolDockCls = classnames({
+                [`${prefix}aside-tooldock`]: true,
+            });
+
+            const navigationCls = classnames({
+                [`${prefix}aside-navigation`]: true,
+            });
+
             if (hasToolDock) {
                 if (device === 'phone') {
                     needDockTrigger = true;
@@ -437,7 +521,11 @@ export default function ShellBase(props) {
                 });
 
                 innerArr.push(
-                    <aside key="localnavigation" className={localNavCls}>
+                    <aside
+                        key="localnavigation"
+                        className={localNavCls}
+                        ref={this.saveLocalNavRef}
+                    >
                         {React.cloneElement(layout.LocalNavigation, {}, [
                             <div
                                 key="wrapper"
@@ -453,7 +541,11 @@ export default function ShellBase(props) {
 
             if (layout.content) {
                 innerArr.push(
-                    <section key="submain" className={submainCls}>
+                    <section
+                        key="submain"
+                        className={submainCls}
+                        ref={this.saveSubmainRef}
+                    >
                         {layout.content}
                     </section>
                 );
@@ -512,24 +604,38 @@ export default function ShellBase(props) {
 
             // 按照dom结构, arr 包括 header Navigation ToolDock 和 innerArr
             if (Object.keys(layout.header).length > 0) {
-                headerDom = (
-                    <header key="header" className={headerCls}>
+                const dom = (
+                    <header
+                        key="header"
+                        className={headerCls}
+                        ref={this.saveHeaderRef}
+                    >
                         {layout.header.Branding}
                         {layout.header.Navigation}
                         {layout.header.Action}
                     </header>
                 );
+                if (fixedHeader && env.ieVersion) {
+                    headerDom = <Affix style={{ zIndex: 9 }}>{dom}</Affix>;
+                } else {
+                    headerDom = dom;
+                }
             }
 
             layout.Navigation &&
                 contentArr.push(
-                    React.cloneElement(layout.Navigation, {
-                        className: classnames(
-                            asideCls,
-                            layout.Navigation.props.className
-                        ),
-                        key: 'navigation',
-                    })
+                    <aside
+                        key="navigation"
+                        className={navigationCls}
+                        ref={this.saveNavRef}
+                    >
+                        {React.cloneElement(layout.Navigation, {
+                            className: classnames(
+                                asideCls,
+                                layout.Navigation.props.className
+                            ),
+                        })}
+                    </aside>
                 );
 
             // const contentArea = innerArr.length > 0
@@ -543,13 +649,19 @@ export default function ShellBase(props) {
 
             layout.ToolDock &&
                 contentArr.push(
-                    React.cloneElement(layout.ToolDock, {
-                        className: classnames(
-                            asideCls,
-                            layout.ToolDock.props.className
-                        ),
-                        key: 'tooldock',
-                    })
+                    <aside
+                        key="tooldock"
+                        className={toolDockCls}
+                        ref={this.saveToolDockRef}
+                    >
+                        {React.cloneElement(layout.ToolDock, {
+                            className: classnames(
+                                asideCls,
+                                layout.ToolDock.props.className
+                            ),
+                            key: 'tooldock',
+                        })}
+                    </aside>
                 );
 
             const cls = classnames({