diff --git a/components/table/__tests__/index.test.tsx b/components/table/__tests__/index.test.tsx
index 581f4cc..cfae28a 100644
--- a/components/table/__tests__/index.test.tsx
+++ b/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 (
+
+ )
+ }
+ const wrapper = mount()
+ 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()
+ })
})
diff --git a/components/table/table-column.tsx b/components/table/table-column.tsx
index b79a159..41acb39 100644
--- a/components/table/table-column.tsx
+++ b/components/table/table-column.tsx
@@ -16,19 +16,19 @@ const TableColumn: React.FC> = ({
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
}
diff --git a/components/table/table-context.ts b/components/table/table-context.ts
index 26ec628..a01b926 100644
--- a/components/table/table-context.ts
+++ b/components/table/table-context.ts
@@ -8,7 +8,7 @@ export type TableColumnItem = {
export interface TableConfig {
columns: Array
- appendColumn?: (column: TableColumnItem) => void
+ updateColumn?: (column: TableColumnItem) => void
removeRow?: (rowIndex: number) => void
}
diff --git a/components/table/table.tsx b/components/table/table.tsx
index eeea224..0637448 100644
--- a/components/table/table.tsx
+++ b/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> = ({
}) => {
const ref = useRef(null)
const [{ width }, updateShape] = useRealShape(ref)
- const [columns, setColumns, columnsRef] = useCurrentState>([])
+ const [columns, setColumns] = useState>([])
const [selfData, setSelfData, dataRef] = useCurrentState>([])
- 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> = ({
const initialValue = useMemo(
() => ({
columns,
- appendColumn,
+ updateColumn,
removeRow,
}),
[columns],