Стилистические изменения

src/components/Table/EditableTable.jsx

@@ -1,31 +1,34 @@
-import { Form, Table, Button, Popconfirm } from "antd"
+import { Form, Table, Button, Popconfirm } from 'antd'
 import { EditOutlined, SaveOutlined, PlusOutlined, CloseCircleOutlined, DeleteOutlined } from '@ant-design/icons'
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react'
 import { EditableCell } from './EditableCell'
-import { invokeWebApiWrapperAsync } from "../factory";
+import { invokeWebApiWrapperAsync } from '../factory'
 
 const newRowKeyValue = 'newRow'
 
-export const makeActionHandler = (action, { service, setLoader, errorMsg, onComplete }) => service && action && ((record) => invokeWebApiWrapperAsync(
+export const makeActionHandler = (action, { service, setLoader, errorMsg, onComplete }) => service && action && (
+  (record) => invokeWebApiWrapperAsync(
     async () => {
       if (action === 'insert') {
+        record.key = Date.now()
         await service.insert(record)
       } else if (record.id) {
         if (action === 'update')
-            await service.delete(record.id)
-        else if (action === 'delete')
           await service.put(record.id, record)
+        else if (action === 'delete')
+          await service.delete(record.id)
       }
       onComplete?.()
     },
     setLoader,
     errorMsg
-))
+  )
+)
 
 export const tryAddKeys = (items) => {
-  if(!items?.length || !items[0])
+  if (!items?.length || !items[0])
     return []
-  if(items[0].key)
+  if (items[0].key)
     return items
   return items.map((item, index) => ({...item, key: item.key ?? item.id ?? index }))
 }
@@ -44,9 +47,9 @@ export const EditableTable = ({
   const [data, setData] = useState(tryAddKeys(dataSource))
   const [editingKey, setEditingKey] = useState('')
 
-  useEffect(()=>{
+  useEffect(() => {
     setData(tryAddKeys(dataSource))
-  },[dataSource])
+  }, [dataSource])
 
   const isEditing = (record) => record?.key === editingKey
 
@@ -56,8 +59,7 @@ export const EditableTable = ({
   }
 
   const cancel = () => {
-    if(editingKey === newRowKeyValue)
-    {
+    if (editingKey === newRowKeyValue) {
       const newData = [...data]
       const index = newData.findIndex((item) => newRowKeyValue === item.key)
       newData.splice(index, 1)
@@ -71,6 +73,11 @@ export const EditableTable = ({
       ...form.initialValues,
       key:newRowKeyValue
     }
+    // const newRow = { key: newRowKeyValue }
+
+    // for (let column of columns)
+    //   newRow[column.dataIndex] = form.initialValues?.[column.dataIndex] ?? column.initialValue
+
     const newData = [newRow, ...data]
     setData(newData)
     edit(newRow)
@@ -86,7 +93,7 @@ export const EditableTable = ({
 
       newData.splice(index, 1, newItem)
 
-      if(item.key === newRowKeyValue)
+      if (item.key === newRowKeyValue)
         item.key = newRowKeyValue + newData.length
 
       const isAdding = editingKey === newRowKeyValue
@@ -94,22 +101,22 @@ export const EditableTable = ({
       setData(newData)
 
       if (isAdding)
-        try{
+        try {
           onRowAdd(newItem)
-        }catch(err){
+        } catch (err) {
           console.log('callback onRowAdd fault:', err)
         }
       else
-        try{
+        try {
           onRowEdit(newItem)
-        }catch(err){
+        } catch (err) {
           console.log('callback onRowEdit fault:', err)
         }
 
-      try{
-        if(onChange)
+      try {
+        if (onChange)
           onChange(newData)
-      }catch(err){
+      } catch (err) {
         console.log('callback onChange fault:', err)
       }
 
@@ -127,40 +134,41 @@ export const EditableTable = ({
 
     onRowDelete(record)
 
-    if(onChange)
+    if (onChange)
       onChange(newData)
   }
 
   const operationColumn = {
     width: 82,
-    title: (!!onRowAdd) && <Button
+    title: !!onRowAdd && (
+      <Button
         onClick={addNewRow}
         disabled={editingKey !== ''}
         icon={<PlusOutlined/>}
-      />,
+      />
+    ),
     dataIndex: 'operation',
-    render: (_, record) => {
-      const editable = isEditing(record)
-      return editable
-      ?(<span>
+    render: (_, record) => isEditing(record) ? (
+      <span>
+        <Button onClick={() => save(record)} icon={<SaveOutlined/>}/>
+        <Button onClick={cancel} icon={<CloseCircleOutlined/>}/>
+      </span>
+    ) : (
+      <span>
+        {onRowEdit && (
           <Button
-            onClick={() => save(record)}
-            icon={<SaveOutlined/>}/>
-          <Button
-            onClick={cancel}
-            icon={<CloseCircleOutlined/>}/>
-        </span>)
-        :(<span>
-          {onRowEdit&&<Button
             disabled={editingKey !== ''}
             onClick={() => edit(record)}
-            icon={<EditOutlined/>}/>}
-          {onRowDelete&&
-          <Popconfirm title="Удалить?" onConfirm={()=>deleteRow(record)}>
+            icon={<EditOutlined/>}
+          />
+        )}
+        {onRowDelete && (
+          <Popconfirm title={'Удалить?'} onConfirm={() => deleteRow(record)}>
             <Button icon={<DeleteOutlined/>}/>
-          </Popconfirm>}
-        </span>)
-    },
+          </Popconfirm>
+        )}
+      </span>
+    ),
   }
 
   const handleColumn = (col) => {

src/components/Table/index.tsx

@@ -3,6 +3,7 @@ import { Select, Table as RawTable } from 'antd'
 import { OptionsType } from 'rc-select/lib/interface'
 import { tryAddKeys } from './EditableTable'
 import { makeNumericSorter, makeStringSorter} from './sorters'
+import { Rule } from 'rc-field-form/lib/interface'
 export { makeDateSorter, makeNumericSorter, makeStringSorter} from './sorters'
 export { EditableTable, makeActionHandler } from './EditableTable'
 export { DatePickerWrapper } from './DatePickerWrapper'
@@ -55,7 +56,7 @@ interface columnPropsOther {
   // css класс для <FormItem/>, если требуется
   formItemClass?: string
   // массив правил валидации значений https://ant.design/components/form/#Rule
-  formItemRules?: any[]
+  formItemRules?: Rule[]
   // дефолтное значение при добавлении новой строки
   initialValue?: string|number
 

src/components/icons/PointerIcon.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 
-type PointerIconColors = {
+export type PointerIconColors = {
     online?: string
     active?: string
     inactive?: string
     unknown?: string
 }
 
-interface PointerIconProps {
+export interface PointerIconProps {
     width?: string | number
     height?: string | number
     online?: boolean

src/components/icons/index.ts

@@ -0,0 +1,5 @@
+export type { PointerIconColors, PointerIconProps } from './PointerIcon'
+export type { WellIconColors, WellIconProps } from './WellIcon'
+
+export { PointerIcon } from './PointerIcon'
+export { WellIcon } from './WellIcon'