feat(table): add update row action to Table (#378)

* feat: add update to Table's actions. add test and doc

fix(table): fix comments

* feat(table): improve type for table actions

chore: update docs

chore: remove unused types

chore(table): improve docs

Co-authored-by: William Castandet <williamcastandet@williams-air.home>
Co-authored-by: unix <unix.bio@gmail.com>

components/table/__tests__/index.test.tsx

@@ -117,6 +117,29 @@ describe('Table', () => {
     expect(() => wrapper.unmount()).not.toThrow()
   })
 
+  it('should be possible to update the row', () => {
+    const operation = (actions: cellActions) => {
+      return (
+        <button
+          onClick={() => actions.update({ property: 'test', description: 'test', operation })}>
+          Update
+        </button>
+      )
+    }
+    const data = [{ property: 'bold', description: 'boolean', operation }]
+    const wrapper = mount(
+      <Table data={data}>
+        <Table.Column prop="property" label="property" />
+        <Table.Column prop="description" label="description" />
+        <Table.Column prop="operation" label="operation" />
+      </Table>,
+    )
+    expect(wrapper.find('tbody').find('tr').length).toBe(1)
+    wrapper.find('tbody').find('button').simulate('click')
+    expect(wrapper.find('tbody').find('tr').find('td').first().text()).toContain('test')
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
   it('should render emptyText when data missing', () => {
     const data = [{ property: 'bold', description: 'boolean' }]
     const wrapper = mount(

components/table/table-body.tsx

@@ -20,16 +20,6 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type TableBodyProps = Props & typeof defaultProps & NativeAttrs
 
-export type cellActions = {
-  remove: Function
-}
-
-export type cellData = {
-  row: number
-  column: number
-  value: any
-}
-
 const TableBody: React.FC<TableBodyProps> = ({ data, hover, emptyText, onRow, onCell }) => {
   const theme = useTheme()
   const { columns } = useTableContext()

components/table/table-cell.tsx

@@ -9,19 +9,26 @@ interface Props {
   onCellClick: (cell: any, rowIndex: number, colunmIndex: number) => void
 }
 
-export type cellActions = {
-  remove: Function
-}
-
-export type cellData = {
+export type TableCellData = {
   row: number
   column: number
   rowValue: any
 }
 
+export type TableCellActionRemove = () => void
+export type TableCellActionUpdate = (data: any) => void
+export type TableCellActions = {
+  update: TableCellActionUpdate
+  remove: TableCellActionRemove
+}
+export type TableOperation = (fn: TableCellActions, rowData: any) => any
+
 const TableCell: React.FC<Props> = ({ columns, row, rowIndex, emptyText, onCellClick }) => {
-  const { removeRow } = useTableContext()
-  const actions: cellActions = {
+  const { removeRow, updateRow } = useTableContext()
+  const actions: TableCellActions = {
+    update: data => {
+      updateRow && updateRow(rowIndex, data)
+    },
     remove: () => {
       removeRow && removeRow(rowIndex)
     },
@@ -30,7 +37,7 @@ const TableCell: React.FC<Props> = ({ columns, row, rowIndex, emptyText, onCellC
   return (
     <>
       {columns.map((column, index) => {
-        const data: cellData = {
+        const data: TableCellData = {
           row: rowIndex,
           column: index,
           rowValue: row,

components/table/table-context.ts

@@ -10,6 +10,7 @@ export interface TableConfig {
   columns: Array<TableColumnItem>
   updateColumn?: (column: TableColumnItem) => void
   removeRow?: (rowIndex: number) => void
+  updateRow?: (rowIndex: number, newData: any) => void
 }
 
 const defaultContext = {

components/table/table.tsx

@@ -6,13 +6,17 @@ import useRealShape from '../utils/use-real-shape'
 import useResize from '../utils/use-resize'
 import { TableContext, TableColumnItem, TableConfig } from './table-context'
 import useCurrentState from '../utils/use-current-state'
+import { TableOperation } from './table-cell'
 
 export type TableOnRow = (row: any, index: number) => void
 export type TableOnCell = (cell: any, index: number, colunm: number) => void
 export type TableOnChange = (data: any) => void
+export type TableDataSource<T extends { [key: string]: any }> = T & {
+  operation?: TableOperation
+}
 
 interface Props {
-  data?: Array<any>
+  data?: Array<TableDataSource<any>>
   emptyText?: string
   hover?: boolean
   onRow: TableOnRow
@@ -47,7 +51,7 @@ const Table: React.FC<React.PropsWithChildren<TableProps>> = ({
   const ref = useRef<HTMLTableElement>(null)
   const [{ width }, updateShape] = useRealShape<HTMLTableElement>(ref)
   const [columns, setColumns] = useState<Array<TableColumnItem>>([])
-  const [selfData, setSelfData, dataRef] = useCurrentState<Array<TableColumnItem>>([])
+  const [selfData, setSelfData, dataRef] = useCurrentState<Array<TableDataSource<any>>>([])
   const updateColumn = (column: TableColumnItem) => {
     setColumns(last => {
       const hasColumn = last.find(item => item.value === column.value)
@@ -63,12 +67,20 @@ const Table: React.FC<React.PropsWithChildren<TableProps>> = ({
     onChange(next)
     setSelfData([...next])
   }
+  const updateRow = (rowIndex: number, newData: any) => {
+    const next = dataRef.current.map((data, index) =>
+      index === rowIndex ? { ...data, ...newData } : data,
+    )
+    onChange(next)
+    setSelfData([...next])
+  }
 
   const initialValue = useMemo<TableConfig>(
     () => ({
       columns,
       updateColumn,
       removeRow,
+      updateRow,
     }),
     [columns],
   )

pages/en-us/components/table.mdx

@@ -103,6 +103,32 @@ Display tabular data in format.
 `}
 />
 
+<Playground
+  title="update row"
+  desc="You can use custom elements to update a specific row."
+  scope={{ Table, Text, Button }}
+  code={`
+() => {
+// operation: TableOperation
+  const operation = (actions, rowData) => {
+    return <Button type="error" auto size="mini" onClick={() => actions.update({ property: 'updated', description:'updated' })}>Update</Button>
+  }
+  const data = [
+    { property: 'type', description: 'Content type', operation },
+    { property: 'Component', description: 'DOM element to use', operation },
+    { property: <Text b>bold</Text>, description: 'Bold style', operation },
+  ]
+  return (
+    <Table data={data}>
+      <Table.Column prop="property" label="property" />
+      <Table.Column prop="description" label="description" />
+      <Table.Column prop="operation" label="operation" width={150} />
+    </Table>
+  )
+}
+`}
+/>
+
 <Playground
   title="custom head"
   scope={{ Table, Code, Text }}
@@ -134,7 +160,7 @@ Display tabular data in format.
 
 | Attribute     | Description                                  | Type                                                 | Accepted values                  | Default |
 | ------------- | -------------------------------------------- | ---------------------------------------------------- | -------------------------------- | ------- |
-| **data**      | data source                                  | `Array<any>`                                         | -                                | -       |
+| **data**      | data source                                  | `Array<TableDataSource<any>>`                        | -                                | -       |
 | **emptyText** | displayed text when table's content is empty | `string`                                             | -                                | -       |
 | **hover**     | table's hover effect                         | `boolean`                                            | -                                | `true`  |
 | **onRow**     | callback row's content by click              | `(row: any, index: number) => void`                  | -                                | -       |

pages/zh-cn/components/table.mdx

@@ -103,6 +103,32 @@ export const meta = {
 `}
 />
 
+<Playground
+  title="更新行"
+  desc="你可以更新指定的行数据。"
+  scope={{ Table, Text, Button }}
+  code={`
+() => {
+// operation: TableOperation
+  const operation = (actions, rowData) => {
+    return <Button type="error" auto size="mini" onClick={() => actions.update({ property: 'updated', description:'updated' })}>Update</Button>
+  }
+  const data = [
+    { property: 'type', description: 'Content type', operation },
+    { property: 'Component', description: 'DOM element to use', operation },
+    { property: <Text b>bold</Text>, description: 'Bold style', operation },
+  ]
+  return (
+    <Table data={data}>
+      <Table.Column prop="property" label="property" />
+      <Table.Column prop="description" label="description" />
+      <Table.Column prop="operation" label="operation" width={150} />
+    </Table>
+  )
+}
+`}
+/>
+
 <Playground
   title="定制头"
   scope={{ Table, Code, Text }}
@@ -134,7 +160,7 @@ export const meta = {
 
 | 属性          | 描述                   | 类型                                                 | 推荐值                           | 默认   |
 | ------------- | ---------------------- | ---------------------------------------------------- | -------------------------------- | ------ |
-| **data**      | 数据源                 | `Array<any>`                                         | -                                | -      |
+| **data**      | 数据源                 | `Array<TableDataSource<any>>`                        | -                                | -      |
 | **emptyText** | 当数据为空时显示的文本 | `string`                                             | -                                | -      |
 | **hover**     | 是否显示 hover 效果    | `boolean`                                            | -                                | `true` |
 | **onRow**     | 行的点击事件           | `(row: any, index: number) => void`                  | -                                | -      |