delete row in table feature

src/client/Containers/Calculation/Sections/list.js

@@ -1360,6 +1360,9 @@ export default [
                 Component: Table,
                 props: {
                   name: 'fruitTable',
+                  features: {
+                    canDeleteRow: true,
+                  },
                   columns: [
                     {
                       name: 'fruit',

src/client/Elements/Table.jsx

@@ -1,9 +1,11 @@
 import { withTableValue } from 'client/hocs/withStore';
 import colors from 'client/UIKit/colors';
-import { Box } from 'client/UIKit/grid';
+import { Box, Flex } from 'client/UIKit/grid';
 import React from 'react';
 import styled from 'styled-components';
 
+import { Button as AntButton } from 'antd';
+
 const TableWrapper = styled(Box)`
   table {
     width: 100%;
@@ -19,6 +21,10 @@ const TableWrapper = styled(Box)`
           border-bottom: 0;
         }
       }
+      transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
+      :hover {
+        background: ${colors.white[25]};
+      }
     }
 
     th {
@@ -47,7 +53,16 @@ const TableWrapper = styled(Box)`
   }
 `;
 
-const Table = ({ name: tableName, columns, values }) => {
+const DeleteRowButton = ({ onClick }) => (
+  <Flex justifyContent="flex-end">
+    <AntButton type="text" danger onClick={onClick}>
+      Удалить
+    </AntButton>
+  </Flex>
+);
+
+const Table = ({ name: tableName, columns, values, features, actions }) => {
+  const { canDeleteRow } = features;
   if (!values) {
     values = [];
   }
@@ -59,6 +74,7 @@ const Table = ({ name: tableName, columns, values }) => {
             {columns.map(({ name, title }, ci) => {
               return <th key={ci}>{title}</th>;
             })}
+            {canDeleteRow && <th />}
           </tr>
         </thead>
         <tbody>
@@ -80,6 +96,15 @@ const Table = ({ name: tableName, columns, values }) => {
                     </td>
                   );
                 })}
+                {canDeleteRow && (
+                  <td>
+                    <DeleteRowButton
+                      onClick={() => {
+                        actions.deleteRow(ri);
+                      }}
+                    />
+                  </td>
+                )}
               </tr>
             );
           })}

src/client/hocs/withStore.js

@@ -48,10 +48,21 @@ export const withStoreValue = Component => ({
 
 export const withTableData = Table => props => {
   const { name: tableName } = props;
+  const ObservedTable = observer(Table);
   const TableWithStore = useObserver(() => {
     const { calculationStore } = useStores();
     const tableData = calculationStore.tables[tableName];
-    return <Table {...props} {...tableData} />;
+    return (
+      <ObservedTable
+        {...props}
+        {...tableData}
+        actions={{
+          deleteRow: rowIndex => {
+            calculationStore.deleteTableRow(tableName, rowIndex);
+          },
+        }}
+      />
+    );
   });
   return () => TableWithStore;
 };

src/client/stores/CalculationStore/Data/tables.js

@@ -53,10 +53,12 @@ const tablesActions = {
 
   deleteTableRow(tableName, rowIndex) {
     const targetTable = this.tables[tableName];
-    targetTable.values.splice(rowIndex, 1);
-    targetTable.options.splice(rowIndex, 1);
-    targetTable.filters.splice(rowIndex, 1);
-    targetTable.statuses.splice(rowIndex, 1);
+    if (!targetTable) {
+      throw new Error(`Table ${tableName} doesn't exist in store`);
+    }
+    if (targetTable.values) targetTable.values.splice(rowIndex, 1);
+    if (targetTable.filters) targetTable.filters.splice(rowIndex, 1);
+    if (targetTable.statuses) targetTable.statuses.splice(rowIndex, 1);
   },
 
   cleanTable(tableName) {

src/core/config/initialTables.ts

@@ -1,20 +1,23 @@
 import { IStoreTable } from './../types/tables';
 const initialTables: IStoreTable = {
-  // fruitTable: {
-  //   values: [
-  //     {
-  //       fruit: 'apple',
-  //       number: '5',
-  //     },
-  //     {
-  //       fruit: 'orange',
-  //       number: '10',
-  //     },
-  //   ],
-  //   options: {
-  //     fruit: [{ name: 'Apple', value: 'apple' }],
-  //   },
-  // },
+  fruitTable: {
+    values: [
+      {
+        fruit: 'apple',
+        number: '5',
+      },
+      {
+        fruit: 'orange',
+        number: '10',
+      },
+    ],
+    options: {
+      fruit: [
+        { name: 'Apple', value: 'apple' },
+        { name: 'Grusha', value: 'grusha' },
+      ],
+    },
+  },
 };
 
 export default initialTables;

src/core/types/stores.ts

@@ -46,6 +46,6 @@ export interface ICalculationStore {
     values: { [prop in TableValuesNames]?: any }[],
   ) => void;
 
-  deleteTableRow: (tableName: string, rowIndex: number) => void;
+  deleteTableRow: (tableName: TableNames, rowIndex: number) => void;
   cleanTable: (tableName: TableNames) => void;
 }