fix(Table): style chaos when head sticky

alibaba-fusion · Nov 15, 2018 · e952632 · e952632
1 parent 1438cdf
commit e952632
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 2 deletions.
diff --git a/src/table/base/filter.jsx b/src/table/base/filter.jsx
@@ -157,6 +157,7 @@ export default class Filter extends React.Component {
             triggerType="click"
             visible={visible}
             autoFocus
+            container={node => node.parentNode}
             onVisibleChange={this.onFilterVisible}>
                 <Menu footer={footer}
                     selectedKeys={selectedKeys}

diff --git a/src/table/column.jsx b/src/table/column.jsx
@@ -14,11 +14,13 @@ export default class Column extends React.Component {
         dataIndex: PropTypes.string,
         /**
          * 行渲染的逻辑
+         * value, rowIndex, record, context四个属性只可读不可被更改
          * Function(value, index, record) => Element
          */
         cell: PropTypes.oneOfType([PropTypes.element, PropTypes.node, PropTypes.func]),
         /**
          * 表头显示的内容
+         * value, rowIndex, record, context四个属性只可读不可被更改
          */
         title: PropTypes.oneOfType([PropTypes.element, PropTypes.node, PropTypes.func]),
         /**

diff --git a/src/table/main.scss b/src/table/main.scss
@@ -29,6 +29,9 @@
         font-weight: $table-th-font-weight;
         border: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
     }
+    &-affix {
+        z-index: 1;
+    }
     &-header-resizable {
         position: relative;
         #{$table-prefix}-resize-handler {

diff --git a/src/table/selection.jsx b/src/table/selection.jsx
@@ -109,6 +109,7 @@ export default function selection(BaseComponent) {
                 mode = rowSelection.mode ? rowSelection.mode : 'multiple';
 
             let checked = !!selectedRowKeys.length;
+            let indeterminate = false;
             this.flatDataSource(dataSource)
                 .filter((record, index) => {
                     if (!rowSelection.getProps) {
@@ -121,13 +122,18 @@ export default function selection(BaseComponent) {
                 .forEach(id => {
                     if (selectedRowKeys.indexOf(id) === -1) {
                         checked = false;
+                    } else {
+                        indeterminate = true;
                     }
                 });
             attrs.onClick = makeChain((e) => {
                 e.stopPropagation();
             }, attrs.onClick);
 
-            return mode === 'multiple' ? <Checkbox aria-label={locale.selectAll} checked={checked} onChange={onChange} {...attrs} /> : null;
+            if (checked) {
+                indeterminate = false;
+            }
+            return mode === 'multiple' ? <Checkbox indeterminate={indeterminate} aria-label={locale.selectAll} checked={checked} onChange={onChange} {...attrs} /> : null;
         }
 
         renderSelectionBody = (value, index, record) => {

diff --git a/src/table/sticky/header.jsx b/src/table/sticky/header.jsx
@@ -1,17 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import Affix from '../../affix';
 
 /* eslint-disable react/prefer-stateless-function*/
 export default class StickHeader extends React.Component {
+    static propTypes = {
+        prefix: PropTypes.string,
+    }
     static contextTypes = {
         Header: PropTypes.any,
         offsetTop: PropTypes.number,
         affixProps: PropTypes.object
     }
     render() {
+        const { prefix } = this.props;
         const { Header, offsetTop, affixProps } = this.context;
-        return (<Affix {...affixProps} offsetTop={offsetTop}>
+
+        const newAffixProps = affixProps || {};
+        const { className, others } = newAffixProps;
+        const cls = classnames({
+            [`${prefix}table-affix`]: true,
+            className
+        });
+
+        return (<Affix {...others} className={cls} offsetTop={offsetTop}>
             <Header {...this.props}/>
         </Affix>);
     }