Начата типизация EditableTable

src/components/Table/EditableTable.tsx

@@ -1,39 +1,72 @@
-import { memo, useCallback, useState, useEffect, useMemo } from 'react'
+import { memo, useCallback, useState, useEffect, useMemo, Dispatch, SetStateAction, ReactNode } from 'react'
-import { Form, Button, Popconfirm } from 'antd'
+import { Form, Button, Popconfirm, TableProps } from 'antd'
 import { EditOutlined, SaveOutlined, PlusOutlined, CloseCircleOutlined, DeleteOutlined } from '@ant-design/icons'
 
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { hasPermission } from '@utils'
 
-import { Table } from '.'
+import { Table, TableColumns } from '.'
 import { EditableCell } from './EditableCell'
+import { ColumnsType } from 'antd/lib/table'
+import { ArrayElement } from '@asb/utils/types'
 
 const newRowKeyValue = 'newRow'
 
-const actions = {
+type CrudObject = {
+    id?: string | number
+    key?: string | number
+}
+
+interface CrudService<T extends CrudObject> {
+    insert: (((data: T) => Promise<number>) | ((idWell: number, data: T) => Promise<number>))
+    insertRange: (((data: T[]) => Promise<number>) | ((idWell: number, data: T[]) => Promise<number>))
+    update: (((data: T) => Promise<number> | ((idWell: number, data: T) => Promise<number>) | ((idWell: number, id: number, data: T) => Promise<number>)))
+    delete: (((id: number) => Promise<number>) | ((idWell: number, id: number) => Promise<number>))
+    new(...args: any[]): any
+}
+
+type TableAction<T extends CrudObject> = Record<keyof CrudService<T>, (data: T, idWell?: number, idRecord?: number) => any[]>
+
+const makeActions = <T extends CrudObject>(): TableAction<T> => ({
     insert: (data, idWell) => [idWell, data],
     insertRange: (data, idWell) => [idWell, [data].flat(1)],
     update: (data, idWell, idRecord) => [idWell, idRecord && data.id, data],
     delete: (data, idWell) => [idWell, data.id],
+})
+
+type TableActionProps<T extends CrudObject, S extends CrudService<T>> = {
+    service?: S
+    permission?: string | string[]
+    action?: keyof CrudService<T>
+    actionName?: string
+    recordParser?: (record: T) => T
+    idWell?: number
+    idRecord?: number
+    setLoader?: Dispatch<SetStateAction<boolean>>
+    errorMsg?: string
+    onComplete?: () => Promise<void>
 }
 
-export const makeTableAction = ({
+export const makeTableAction = <T extends CrudObject, S extends CrudService<T>>({
     service,
     permission,
     action,
     actionName,
     recordParser,
     idWell,
-    idRecord = false,
+    idRecord,
     setLoader,
     errorMsg = 'Не удалось выполнить операцию',
     onComplete,
-}) => hasPermission(permission) && service && action && (
+}: TableActionProps<T, S>) => {
-    (record) => invokeWebApiWrapperAsync(
+    if (!hasPermission(permission) || !service || !action) return async (record: T) => {}
+    const actions = makeActions<T>()
+    return async (record: T) => await invokeWebApiWrapperAsync(
         async () => {
             const data = recordParser?.(record) ?? record
             const params = actions[action]?.(data, idWell, idRecord).filter(Boolean)
             if (params?.length > 0)
+                //@ts-ignore
                 await service[action](...params)
             await onComplete?.()
         },
@@ -41,25 +74,34 @@ export const makeTableAction = ({
         errorMsg,
         { actionName }
     )
-)
+}
 
-export const tryAddKeys = (items) => {
+export const tryAddKeys = <T extends object & Record<string, any>>(items?: T[]): T[] => {
-    if (!items?.length || !items[0])
+    if (!items?.length || !items[0]) return items ?? []
-        return []
+    if (items[0].key) return items
-    if (items[0].key)
-        return items
     return items.map((item, index) => ({...item, key: item.key ?? item.id ?? index }))
 }
 
 const EditableTableComponents = { body: { cell: EditableCell }}
 
+export type EditableTableProps<T extends CrudObject, S extends CrudService<T>> = TableProps<T> & {
+    columns: ColumnsType<T> & TableColumns<T>
+    dataSource?: T[]
+    onChange
+    onRowAdd?: TableActionProps<T, S> | ((record: T) => Promise<void>)
+    onRowEdit?: TableActionProps<T, S> | ((record: T) => Promise<void>)
+    onRowDelete?: TableActionProps<T, S> | ((record: T) => Promise<void>)
+    additionalButtons?: (record: T, editingKey: string | number) => ReactNode
+    buttonsWidth
+}
+
 /**
  * @param onChange - Метод вызывается со всем dataSource с измененными элементами после любого действия
  * @param onRowAdd - Метод вызывается с новой добавленной записью. Если метод не определен, то кнопка добавления строки не показывается
  * @param onRowEdit - Метод вызывается с новой отредактированной записью. Если метод не поределен, то кнопка редактирования строки не показывается
  * @param onRowDelete - Метод вызывается с удаленной записью. Если метод не поределен, то кнопка удаления строки не показывается
  */
-export const EditableTable = memo(({
+const _EditableTable = <T extends CrudObject, S extends CrudService<T>>({
     columns,
     dataSource,
     onChange,
@@ -69,19 +111,20 @@ export const EditableTable = memo(({
     additionalButtons,
     buttonsWidth,
     ...otherTableProps
-}) => {
+}: EditableTableProps<T, S>) => {
 
     const [form] = Form.useForm()
-    const [data, setData] = useState(tryAddKeys(dataSource))
+    const [data, setData] = useState<T[]>(tryAddKeys(dataSource))
-    const [editingKey, setEditingKey] = useState('')
+    const [editingKey, setEditingKey] = useState<string | number>('')
 
     const onAdd = useMemo(() => onRowAdd && typeof onRowAdd !== 'function' ? makeTableAction(onRowAdd) : onRowAdd, [onRowAdd])
     const onEdit = useMemo(() => onRowEdit && typeof onRowEdit !== 'function' ? makeTableAction(onRowEdit) : onRowEdit, [onRowEdit])
     const onDelete = useMemo(() => onRowDelete && typeof onRowDelete !== 'function' ? makeTableAction(onRowDelete) : onRowDelete, [onRowDelete])
 
-    const isEditing = useCallback((record) => record?.key === editingKey, [editingKey])
+    const isEditing = useCallback((record: T) => record?.key === editingKey, [editingKey])
 
-    const edit = useCallback((record) => {
+    const edit = useCallback((record: T) => {
+        if (!record.key) return
         form.setFieldsValue({...record})
         setEditingKey(record.key)
     }, [form])
@@ -97,17 +140,12 @@ export const EditableTable = memo(({
     }, [data, editingKey])
 
     const addNewRow = useCallback(async () => {
-        let newRow = {
+        const newRow: any = { key: newRowKeyValue } // TODO: Исправить тип
-            ...form.initialValues,
+        setData((prevData) => [newRow, ...prevData])
-            key:newRowKeyValue
-        }
-
-        const newData = [newRow, ...data]
-        setData(newData)
         edit(newRow)
-    }, [data, edit, form.initialValues])
+    }, [edit])
 
-    const save = useCallback(async (record) => {
+    const save = useCallback(async (record: T) => {
         try {
             const row = await form.validateFields()
             const newData = [...data]
@@ -126,13 +164,13 @@ export const EditableTable = memo(({
 
             if (isAdding)
                 try {
-                    onAdd(newItem)
+                    onAdd?.(newItem)
                 } catch (err) {
                     console.log('callback onRowAdd fault:', err)
                 }
             else
                 try {
-                    onEdit(newItem)
+                    onEdit?.(newItem)
                 } catch (err) {
                     console.log('callback onRowEdit fault:', err)
                 }
@@ -147,18 +185,18 @@ export const EditableTable = memo(({
         }
     }, [data, editingKey, form, onChange, onAdd, onEdit])
 
-    const deleteRow = useCallback((record) => {
+    const deleteRow = useCallback((record: T) => {
         const newData = [...data]
         const index = newData.findIndex((item) => record.key === item.key)
 
         newData.splice(index, 1)
         setData(newData)
 
-        onDelete(record)
+        onDelete?.(record)
         onChange?.(newData)
     }, [data, onChange, onDelete])
 
-    const handleColumn = useCallback((col) => {
+    const handleColumn = useCallback((col: any) => { // TODO: Исправить тип
         if (col.children)
             col.children = col.children.map(handleColumn)
 
@@ -167,7 +205,7 @@ export const EditableTable = memo(({
 
         return {
             ...col,
-            onCell: (record) => ({
+            onCell: (record: T) => ({
                 ...col.onCell?.(record),
                 editing: isEditing(record),
                 record,
@@ -194,7 +232,7 @@ export const EditableTable = memo(({
             />
         ),
         dataIndex: 'operation',
-        render: (_, record) => isEditing(record) ? (
+        render: (_: any, record: T) => isEditing(record) ? (
             <span>
                 <Button onClick={() => save(record)} icon={<SaveOutlined/>}/>
                 <Button onClick={cancel} icon={<CloseCircleOutlined/>}/>
@@ -219,15 +257,13 @@ export const EditableTable = memo(({
         ),
     }), [onAdd, onEdit, onDelete, isEditing, editingKey, save, cancel, edit, deleteRow])
 
-    const mergedColumns = useMemo(() => [...columns.map(handleColumn), operationColumn], [columns, handleColumn, operationColumn])
+    const mergedColumns: TableColumns<T> = useMemo(() => [...columns.map(handleColumn), operationColumn], [columns, handleColumn, operationColumn])
 
-    useEffect(() => {
+    useEffect(() => setData(tryAddKeys(dataSource)), [dataSource])
-        setData(tryAddKeys(dataSource))
-    }, [dataSource])
 
     return (
         <Form form={form}>
-            <Table
+            <Table<T>
                 components={EditableTableComponents}
                 columns={mergedColumns}
                 dataSource={data}
@@ -235,4 +271,8 @@ export const EditableTable = memo(({
             />
         </Form>
     )
-})
+}
+
+export const EditableTable = memo(_EditableTable) as typeof _EditableTable
+
+export default EditableTable