reduce table nested level, ant-design/ant-design#4868

react-component · Feb 16, 2017 · 6974be5 · 6974be5
1 parent 78fbd1a
commit 6974be5
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 17 deletions.
diff --git a/src/Table.jsx b/src/Table.jsx
@@ -482,6 +482,7 @@ const Table = React.createClass({
     if (useFixedHeader) {
       headTable = (
         <div
+          key="headTable"
           className={`${prefixCls}-header`}
           ref={fixed ? null : 'headTable'}
           style={headStyle}
@@ -494,8 +495,9 @@ const Table = React.createClass({
       );
     }
 
-    let BodyTable = (
+    let bodyTable = (
       <div
+        key="bodyTable"
         className={`${prefixCls}-body`}
         style={bodyStyle}
         ref="bodyTable"
@@ -516,8 +518,9 @@ const Table = React.createClass({
       }
       delete bodyStyle.overflowX;
       delete bodyStyle.overflowY;
-      BodyTable = (
+      bodyTable = (
         <div
+          key="bodyTable"
           className={`${prefixCls}-body-outer`}
           style={{ ...bodyStyle }}
         >
@@ -534,7 +537,7 @@ const Table = React.createClass({
       );
     }
 
-    return <span>{headTable}{BodyTable}</span>;
+    return [headTable, bodyTable];
   },
 
   getTitle() {
@@ -694,23 +697,38 @@ const Table = React.createClass({
                           props.scroll.x ||
                           props.scroll.y;
 
+    const isAnyColumnsFixed =
+      this.columnManager.isAnyColumnsLeftFixed() || this.columnManager.isAnyColumnsRightFixed();
+
+    if (isAnyColumnsFixed) {
+      return (
+        <div ref={node => (this.tableNode = node)} className={className} style={props.style}>
+          {this.getTitle()}
+          <div className={`${prefixCls}-content`}>
+            {this.columnManager.isAnyColumnsLeftFixed() &&
+            <div className={`${prefixCls}-fixed-left`}>
+              {this.getLeftFixedTable()}
+            </div>}
+            <div className={isTableScroll ? `${prefixCls}-scroll` : ''}>
+              {this.getTable({ columns: this.columnManager.groupedColumns() })}
+              {this.getEmptyText()}
+              {this.getFooter()}
+            </div>
+            {this.columnManager.isAnyColumnsRightFixed() &&
+            <div className={`${prefixCls}-fixed-right`}>
+              {this.getRightFixedTable()}
+            </div>}
+          </div>
+        </div>
+      );
+    }
     return (
       <div ref={node => (this.tableNode = node)} className={className} style={props.style}>
         {this.getTitle()}
         <div className={`${prefixCls}-content`}>
-          {this.columnManager.isAnyColumnsLeftFixed() &&
-          <div className={`${prefixCls}-fixed-left`}>
-            {this.getLeftFixedTable()}
-          </div>}
-          <div className={isTableScroll ? `${prefixCls}-scroll` : ''}>
-            {this.getTable({ columns: this.columnManager.groupedColumns() })}
-            {this.getEmptyText()}
-            {this.getFooter()}
-          </div>
-          {this.columnManager.isAnyColumnsRightFixed() &&
-          <div className={`${prefixCls}-fixed-right`}>
-            {this.getRightFixedTable()}
-          </div>}
+          {this.getTable({ columns: this.columnManager.groupedColumns() })}
+          {this.getEmptyText()}
+          {this.getFooter()}
         </div>
       </div>
     );

diff --git a/src/utils.js b/src/utils.js
@@ -53,7 +53,7 @@ export function debounce(func, wait, immediate) {
       func.apply(context, args);
     }
   }
-  debounceFunc.cancel = function () {
+  debounceFunc.cancel = function cancel() {
     if (timeout) {
       clearTimeout(timeout);
       timeout = null;