Добавлен метод makeTableAction на замену makeActionHandler

src/components/Table/EditableTable.jsx

@@ -1,21 +1,59 @@
-import { memo, useCallback, useState, useEffect } from 'react'
+import { memo, useCallback, useState, useEffect, useMemo } from 'react'
 import { Form, Button, Popconfirm } 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 { EditableCell } from './EditableCell'
 
 const newRowKeyValue = 'newRow'
 
-const actions = [
+const actions = {
-  [['insert'], (data) => [data]],
+    insert: (data, idWell) => [idWell, data],
-  [['insertRange'], (data) => [[data].flat(1)]],
+    insertRange: (data, idWell) => [idWell, [data].flat(1)],
-  [['edit', 'update', 'put'], (data) => data.id && [data.id, data]],
+    update: (data, idWell, idRecord) => [idWell, idRecord && data.id, data],
-  [['delete'], (data) => data.id && [data.id]],
+    delete: (data, idWell) => [idWell, data.id],
-]
+}
 
+export const makeTableAction = ({
+    service,
+    permission,
+    action,
+    actionName,
+    recordParser,
+    idWell,
+    idRecord = false,
+    setLoader,
+    errorMsg = 'Не удалось выполнить операцию',
+    onComplete,
+}) => hasPermission(permission) && service && action && (
+    (record) => invokeWebApiWrapperAsync(
+        async () => {
+            const data = recordParser?.(record) ?? record
+            const params = actions[action]?.(data, idWell, idRecord).filter(Boolean)
+            if (params?.length > 0)
+                await service[action](...params)
+            await onComplete?.()
+        },
+        setLoader,
+        errorMsg,
+        actionName
+    )
+)
+
+// TODO: Remove makeActionHandler
+const actions2 = {
+    insert: (data) => [data],
+    insertRange: (data) => [[data].flat(1)],
+    update: (data) => data.id && [data.id, data],
+    delete: (data) => data.id && [data.id],
+}
+
+/**
+ * @deprecated используйте {@link makeTableAction}
+ */
 export const makeActionHandler = (action, { idWell, service, setLoader, errorMsg, onComplete }, recordParser, actionName) => service && action && (
     (record) => invokeWebApiWrapperAsync(
         async () => {
@@ -23,8 +61,7 @@ export const makeActionHandler = (action, { idWell, service, setLoader, errorMsg
             if (typeof recordParser === 'function')
                 record = recordParser(record)
 
-      const actionId = actions.findIndex((elm) => elm[0].includes(action))
+            const params = actions2[action]?.(record)
-      const params = actions[actionId]?.[1](record)
 
             if (params) await service[action](...addIdWell(...params))
             await onComplete?.()
@@ -43,13 +80,21 @@ export const tryAddKeys = (items) => {
     return items.map((item, index) => ({...item, key: item.key ?? item.id ?? index }))
 }
 
+const EditableTableComponents = { body: { cell: EditableCell }}
+
+/**
+ * @param onChange - Метод вызывается со всем dataSource с измененными элементами после любого действия
+ * @param onRowAdd - Метод вызывается с новой добавленной записью. Если метод не определен, то кнопка добавления строки не показывается
+ * @param onRowEdit - Метод вызывается с новой отредактированной записью. Если метод не поределен, то кнопка редактирования строки не показывается
+ * @param onRowDelete - Метод вызывается с удаленной записью. Если метод не поределен, то кнопка удаления строки не показывается
+ */
 export const EditableTable = memo(({
     columns,
     dataSource,
-  onChange, // Метод вызывается со всем dataSource с измененными элементами после любого действия
+    onChange,
-  onRowAdd, // Метод вызывается с новой добавленной записью. Если метод не определен, то кнопка добавления строки не показывается
+    onRowAdd,
-  onRowEdit, // Метод вызывается с новой отредактированной записью. Если метод не поределен, то кнопка редактирования строки не показывается
+    onRowEdit,
-  onRowDelete, // Метод вызывается с удаленной записью. Если метод не поределен, то кнопка удаления строки не показывается
+    onRowDelete,
     additionalButtons,
     buttonsWidth,
     ...otherTableProps
@@ -59,9 +104,9 @@ export const EditableTable = memo(({
     const [data, setData] = useState(tryAddKeys(dataSource))
     const [editingKey, setEditingKey] = useState('')
 
-  useEffect(() => {
+    const onAdd = useMemo(() => typeof onRowAdd === 'function' ? onRowAdd : makeTableAction(onRowAdd), [onRowAdd])
-    setData(tryAddKeys(dataSource))
+    const onEdit = useMemo(() => typeof onRowEdit === 'function' ? onRowEdit : makeTableAction(onRowEdit), [onRowEdit])
-  }, [dataSource])
+    const onDelete = useMemo(() => typeof onRowDelete === 'function' ? onRowDelete : makeTableAction(onRowDelete), [onRowDelete])
 
     const isEditing = useCallback((record) => record?.key === editingKey, [editingKey])
 
@@ -110,13 +155,13 @@ export const EditableTable = memo(({
 
             if (isAdding)
                 try {
-          onRowAdd(newItem)
+                    onAdd(newItem)
                 } catch (err) {
                     console.log('callback onRowAdd fault:', err)
                 }
             else
                 try {
-          onRowEdit(newItem)
+                    onEdit(newItem)
                 } catch (err) {
                     console.log('callback onRowEdit fault:', err)
                 }
@@ -126,11 +171,10 @@ export const EditableTable = memo(({
             } catch (err) {
                 console.log('callback onChange fault:', err)
             }
-
         } catch (errInfo) {
             console.log('Validate Failed:', errInfo)
         }
-  }, [data, editingKey, form, onChange, onRowAdd, onRowEdit])
+    }, [data, editingKey, form, onChange, onAdd, onEdit])
 
     const deleteRow = useCallback((record) => {
         const newData = [...data]
@@ -139,44 +183,9 @@ export const EditableTable = memo(({
         newData.splice(index, 1)
         setData(newData)
 
-    onRowDelete(record)
+        onDelete(record)
         onChange?.(newData)
-  }, [data, onChange, onRowDelete])
+    }, [data, onChange, onDelete])
-
-  const operationColumn = {
-    width: buttonsWidth ?? 82,
-    title: !!onRowAdd && (
-      <Button
-        onClick={addNewRow}
-        disabled={editingKey !== ''}
-        icon={<PlusOutlined/>}
-      />
-    ),
-    dataIndex: 'operation',
-    render: (_, record) => isEditing(record) ? (
-      <span>
-        <Button onClick={() => save(record)} icon={<SaveOutlined/>}/>
-        <Button onClick={cancel} icon={<CloseCircleOutlined/>}/>
-        {additionalButtons?.(record, editingKey)}
-      </span>
-    ) : (
-      <span>
-        {onRowEdit && (
-          <Button
-            disabled={editingKey !== ''}
-            onClick={() => edit(record)}
-            icon={<EditOutlined/>}
-          />
-        )}
-        {onRowDelete && (
-          <Popconfirm title={'Удалить?'} onConfirm={() => deleteRow(record)}>
-            <Button icon={<DeleteOutlined/>}/>
-          </Popconfirm>
-        )}
-        {additionalButtons?.(record, editingKey)}
-      </span>
-    ),
-  }
 
     const handleColumn = useCallback((col) => {
         if (col.children)
@@ -204,16 +213,51 @@ export const EditableTable = memo(({
         }
     }, [isEditing])
 
-  const mergedColumns = [...columns.map(handleColumn), operationColumn]
+    const operationColumn = useMemo(() => ({
+        width: buttonsWidth ?? 82,
+        title: !!onAdd && (
+            <Button
+                onClick={addNewRow}
+                disabled={editingKey !== ''}
+                icon={<PlusOutlined/>}
+            />
+        ),
+        dataIndex: 'operation',
+        render: (_, record) => isEditing(record) ? (
+            <span>
+                <Button onClick={() => save(record)} icon={<SaveOutlined/>}/>
+                <Button onClick={cancel} icon={<CloseCircleOutlined/>}/>
+                {additionalButtons?.(record, editingKey)}
+            </span>
+        ) : (
+            <span>
+                {onEdit && (
+                    <Button
+                        disabled={editingKey !== ''}
+                        onClick={() => edit(record)}
+                        icon={<EditOutlined/>}
+                    />
+                )}
+                {onDelete && (
+                    <Popconfirm title={'Удалить?'} onConfirm={() => deleteRow(record)}>
+                        <Button icon={<DeleteOutlined/>}/>
+                    </Popconfirm>
+                )}
+                {additionalButtons?.(record, editingKey)}
+            </span>
+        ),
+    }), [onAdd, onEdit, onDelete, isEditing, editingKey, save, cancel, edit, deleteRow])
+
+    const mergedColumns = useMemo(() => [...columns.map(handleColumn), operationColumn], [columns, handleColumn, operationColumn])
+
+    useEffect(() => {
+        setData(tryAddKeys(dataSource))
+    }, [dataSource])
 
     return (
         <Form form={form}>
             <Table
-        components={{
+                components={EditableTableComponents}
-          body: {
-            cell: EditableCell,
-          },
-        }}
                 columns={mergedColumns}
                 dataSource={data}
                 {...otherTableProps}

src/components/Table/index.tsx

@@ -1,5 +1,5 @@
 export { makeDateSorter, makeNumericSorter, makeStringSorter, makeTimeSorter } from './sorters'
-export { EditableTable, makeActionHandler } from './EditableTable'
+export { EditableTable, makeActionHandler, makeTableAction } from './EditableTable'
 export { DatePickerWrapper } from './DatePickerWrapper'
 export { TimePickerWrapper } from './TimePickerWrapper'
 export { DateRangeWrapper } from './DateRangeWrapper'