From abfc6610c818982555b600b77fc1e3c813f6a2e8 Mon Sep 17 00:00:00 2001
From: Redjue <pingfj77@gmail.com>
Date: Wed, 15 Feb 2023 17:43:07 +0800
Subject: [PATCH 1/2] perf: make column support jsx conditions

---
 src/hooks/useColumns.tsx               | 49 ++++++++-------
 tests/Table.spec.js                    | 45 ++++++++++++++
 tests/__snapshots__/Table.spec.js.snap | 83 ++++++++++++++++++++++++--
 3 files changed, 148 insertions(+), 29 deletions(-)

diff --git a/src/hooks/useColumns.tsx b/src/hooks/useColumns.tsx
index 457b7a8c8..d2066a58f 100644
--- a/src/hooks/useColumns.tsx
+++ b/src/hooks/useColumns.tsx
@@ -1,19 +1,19 @@
-import * as React from 'react';
-import warning from 'rc-util/lib/warning';
 import toArray from 'rc-util/lib/Children/toArray';
+import warning from 'rc-util/lib/warning';
+import * as React from 'react';
+import { EXPAND_COLUMN } from '../constant';
 import type {
+  ColumnGroupType,
   ColumnsType,
   ColumnType,
+  Direction,
   FixedType,
-  Key,
   GetRowKey,
-  TriggerEventHandler,
+  Key,
   RenderExpandIcon,
-  ColumnGroupType,
-  Direction,
+  TriggerEventHandler,
 } from '../interface';
 import { INTERNAL_COL_DEFINE } from '../utils/legacyUtil';
-import { EXPAND_COLUMN } from '../constant';
 
 export function convertChildrenToColumns<RecordType>(
   children: React.ReactNode,
@@ -37,28 +37,31 @@ export function convertChildrenToColumns<RecordType>(
 
 function flatColumns<RecordType>(columns: ColumnsType<RecordType>): ColumnType<RecordType>[] {
   return columns.reduce((list, column) => {
-    const { fixed } = column;
+    if (column) {
+      const { fixed } = column;
+      // Convert `fixed='true'` to `fixed='left'` instead
+      const parsedFixed = fixed === true ? 'left' : fixed;
 
-    // Convert `fixed='true'` to `fixed='left'` instead
-    const parsedFixed = fixed === true ? 'left' : fixed;
-
-    const subColumns = (column as ColumnGroupType<RecordType>).children;
-    if (subColumns && subColumns.length > 0) {
+      const subColumns = (column as ColumnGroupType<RecordType>).children;
+      if (subColumns && subColumns.length > 0) {
+        return [
+          ...list,
+          ...flatColumns(subColumns).map(subColum => ({
+            fixed: parsedFixed,
+            ...subColum,
+          })),
+        ];
+      }
       return [
         ...list,
-        ...flatColumns(subColumns).map(subColum => ({
+        {
+          ...column,
           fixed: parsedFixed,
-          ...subColum,
-        })),
+        },
       ];
+    } else {
+      return [...list];
     }
-    return [
-      ...list,
-      {
-        ...column,
-        fixed: parsedFixed,
-      },
-    ];
   }, []);
 }
 
diff --git a/tests/Table.spec.js b/tests/Table.spec.js
index 1a60f7f6c..cd1ca8fd3 100644
--- a/tests/Table.spec.js
+++ b/tests/Table.spec.js
@@ -1153,4 +1153,49 @@ describe('Table.Basic', () => {
     expect(wrapper.render()).toMatchSnapshot();
     expect(wrapper.find('col')).toHaveLength(tColumns.length + 1);
   });
+  it('columns support JSX condition', () => {
+    const Example = () => {
+      const [count, setCount] = React.useState(0);
+      const columns = [
+        {
+          title: 'title',
+          dataIndex: 'a',
+          render: () => count,
+        },
+        count === 1 && {
+          title: 'title2',
+          dataIndex: 'b',
+          render: () => count + 1,
+        },
+        count === 2
+          ? {
+              title: 'title3',
+              dataIndex: 'c',
+              render: () => count + 1,
+            }
+          : null,
+      ];
+      return (
+        <>
+          <button
+            onClick={() => {
+              setCount(val => val + 1);
+            }}
+          >
+            Click {count} times
+          </button>
+          <Table columns={columns} data={data} />
+        </>
+      );
+    };
+    const wrapper = mount(<Example />);
+
+    wrapper.find('button').simulate('click');
+    expect(wrapper.find('.rc-table-cell').at(1).text()).toEqual('title2');
+
+    wrapper.find('button').simulate('click');
+    expect(wrapper.find('.rc-table-cell').at(1).text()).toEqual('title3');
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });
diff --git a/tests/__snapshots__/Table.spec.js.snap b/tests/__snapshots__/Table.spec.js.snap
index 4df87d27e..13d03fd8c 100644
--- a/tests/__snapshots__/Table.spec.js.snap
+++ b/tests/__snapshots__/Table.spec.js.snap
@@ -1,5 +1,82 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Table.Basic columns support JSX condition 1`] = `
+[
+  <button>
+    Click 2 times
+  </button>,
+  <div
+    class="rc-table"
+  >
+    <div
+      class="rc-table-container"
+    >
+      <div
+        class="rc-table-content"
+      >
+        <table
+          style="table-layout: auto;"
+        >
+          <colgroup />
+          <thead
+            class="rc-table-thead"
+          >
+            <tr>
+              <th
+                class="rc-table-cell"
+                scope="col"
+              >
+                title
+              </th>
+              <th
+                class="rc-table-cell"
+                scope="col"
+              >
+                title3
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="rc-table-tbody"
+          >
+            <tr
+              class="rc-table-row rc-table-row-level-0"
+              data-row-key="key0"
+            >
+              <td
+                class="rc-table-cell"
+              >
+                2
+              </td>
+              <td
+                class="rc-table-cell"
+              >
+                3
+              </td>
+            </tr>
+            <tr
+              class="rc-table-row rc-table-row-level-0"
+              data-row-key="key1"
+            >
+              <td
+                class="rc-table-cell"
+              >
+                2
+              </td>
+              <td
+                class="rc-table-cell"
+              >
+                3
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`Table.Basic custom components renders correctly 1`] = `
 <div
   class="rc-table"
@@ -609,9 +686,6 @@ exports[`Table.Basic renders correctly falsy columns 1`] = `
             >
               Lucy
             </td>
-            <td
-              class="rc-table-cell"
-            />
           </tr>
           <tr
             class="rc-table-row rc-table-row-level-0"
@@ -622,9 +696,6 @@ exports[`Table.Basic renders correctly falsy columns 1`] = `
             >
               Jack
             </td>
-            <td
-              class="rc-table-cell"
-            />
           </tr>
         </tbody>
       </table>

From e9c395571650a270c2d48d6c70e20c277b115290 Mon Sep 17 00:00:00 2001
From: Redjue <pingfj77@gmail.com>
Date: Wed, 15 Feb 2023 18:10:12 +0800
Subject: [PATCH 2/2] refactor: filter logic

---
 src/hooks/useColumns.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useColumns.tsx b/src/hooks/useColumns.tsx
index d2066a58f..ae1f0cee4 100644
--- a/src/hooks/useColumns.tsx
+++ b/src/hooks/useColumns.tsx
@@ -36,8 +36,9 @@ export function convertChildrenToColumns<RecordType>(
 }
 
 function flatColumns<RecordType>(columns: ColumnsType<RecordType>): ColumnType<RecordType>[] {
-  return columns.reduce((list, column) => {
-    if (column) {
+  return columns
+    .filter(column => column && typeof column === 'object')
+    .reduce((list, column) => {
       const { fixed } = column;
       // Convert `fixed='true'` to `fixed='left'` instead
       const parsedFixed = fixed === true ? 'left' : fixed;
@@ -59,10 +60,7 @@ function flatColumns<RecordType>(columns: ColumnsType<RecordType>): ColumnType<R
           fixed: parsedFixed,
         },
       ];
-    } else {
-      return [...list];
-    }
-  }, []);
+    }, []);
 }
 
 function warningFixed(flattenColumns: readonly { fixed?: FixedType }[]) {