From 78c7f789351194108ccb8d6531b21f22c9978e94 Mon Sep 17 00:00:00 2001
From: goodm2ice <hamel2517@gmail.com>
Date: Mon, 13 Dec 2021 10:28:10 +0500
Subject: [PATCH] =?UTF-8?q?=D0=A1=D1=82=D0=B8=D0=BB=D0=B8=D1=81=D1=82?=
 =?UTF-8?q?=D0=B8=D1=87=D0=B5=D1=81=D0=BA=D0=B8=D0=B5=20=D0=B8=D0=B7=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table/EditableTable.jsx | 114 +++++++++++++------------
 src/components/Table/index.tsx         |   3 +-
 src/components/icons/PointerIcon.tsx   |   4 +-
 src/components/icons/index.ts          |   5 ++
 4 files changed, 70 insertions(+), 56 deletions(-)
 create mode 100644 src/components/icons/index.ts

diff --git a/src/components/Table/EditableTable.jsx b/src/components/Table/EditableTable.jsx
index 4d9fdd8..9499467 100644
--- a/src/components/Table/EditableTable.jsx
+++ b/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(
-  async () => {
-    if (action === 'insert') {
+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) {
+      } else if (record.id) {
         if (action === 'update')
-            await service.delete(record.id)
+          await service.put(record.id, record)
         else if (action === 'delete')
-            await service.put(record.id, record)
-    }
-    onComplete?.()
-  },
-  setLoader,
-  errorMsg
-))
+          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
-      onClick={addNewRow}
-      disabled={editingKey !== ''}
-      icon={<PlusOutlined/>}
-      />,
+    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) => {
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index 060a2ef..051bf11 100644
--- a/src/components/Table/index.tsx
+++ b/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
 
diff --git a/src/components/icons/PointerIcon.tsx b/src/components/icons/PointerIcon.tsx
index 474133f..4c66b6b 100644
--- a/src/components/icons/PointerIcon.tsx
+++ b/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
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
new file mode 100644
index 0000000..3dce827
--- /dev/null
+++ b/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'