fix(table): fix column's props are not tracked (#362)

components/table/__tests__/index.test.tsx

@@ -3,6 +3,7 @@ import { mount } from 'enzyme'
 import { Table, Code } from 'components'
 import { cellActions } from 'components/table/table-cell'
 import { nativeEvent, updateWrapper } from 'tests/utils'
+import { act } from 'react-dom/test-utils'
 
 const data = [
   { property: 'type', description: 'Content type', default: '-' },
@@ -166,4 +167,22 @@ describe('Table', () => {
     expect(wrapper.find('thead').find('code').length).not.toBe(0)
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('the changes of column should be tracked', () => {
+    const Mock = ({ label }: { label: string }) => {
+      return (
+        <Table data={data}>
+          <Table.Column prop="description" label={label} />
+        </Table>
+      )
+    }
+    const wrapper = mount(<Mock label="test1" />)
+    expect(wrapper.find('thead').find('tr').at(0).text()).toBe('test1')
+
+    act(() => {
+      wrapper.setProps({ label: 'test2' })
+    })
+    expect(wrapper.find('thead').find('tr').at(0).text()).toBe('test2')
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
 })

components/table/table-column.tsx

@@ -16,19 +16,19 @@ const TableColumn: React.FC<React.PropsWithChildren<TableColumnProps>> = ({
   label,
   width,
 }) => {
-  const { appendColumn } = useTableContext()
+  const { updateColumn } = useTableContext()
   if (!prop || prop.trim() === '') {
     useWarning('The props "prop" is required.', 'Table.Column')
   }
 
   useEffect(() => {
-    appendColumn &&
-      appendColumn({
+    updateColumn &&
+      updateColumn({
         label: children || label,
         value: `${prop}`.trim(),
         width,
       })
-  }, [])
+  }, [label, prop, width])
 
   return null
 }

components/table/table-context.ts

@@ -8,7 +8,7 @@ export type TableColumnItem = {
 
 export interface TableConfig {
   columns: Array<TableColumnItem>
-  appendColumn?: (column: TableColumnItem) => void
+  updateColumn?: (column: TableColumnItem) => void
   removeRow?: (rowIndex: number) => void
 }
 

components/table/table.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import TableColumn from './table-column'
 import TableHead from './table-head'
 import TableBody from './table-body'
@@ -46,11 +46,17 @@ const Table: React.FC<React.PropsWithChildren<TableProps>> = ({
 }) => {
   const ref = useRef<HTMLTableElement>(null)
   const [{ width }, updateShape] = useRealShape<HTMLTableElement>(ref)
-  const [columns, setColumns, columnsRef] = useCurrentState<Array<TableColumnItem>>([])
+  const [columns, setColumns] = useState<Array<TableColumnItem>>([])
   const [selfData, setSelfData, dataRef] = useCurrentState<Array<TableColumnItem>>([])
-  const appendColumn = (column: TableColumnItem) => {
-    const pureCurrent = columnsRef.current.filter(item => item.value !== column.value)
-    setColumns([...pureCurrent, column])
+  const updateColumn = (column: TableColumnItem) => {
+    setColumns(last => {
+      const hasColumn = last.find(item => item.value === column.value)
+      if (!hasColumn) return [...last, column]
+      return last.map(item => {
+        if (item.value !== column.value) return item
+        return column
+      })
+    })
   }
   const removeRow = (rowIndex: number) => {
     const next = dataRef.current.filter((_, index) => index !== rowIndex)
@@ -61,7 +67,7 @@ const Table: React.FC<React.PropsWithChildren<TableProps>> = ({
   const initialValue = useMemo<TableConfig>(
     () => ({
       columns,
-      appendColumn,
+      updateColumn,
       removeRow,
     }),
     [columns],