[FIX] wrong addToTarget functional behavior

agentlab · Sep 28, 2021 · 78e7131 · 78e7131
1 parent 00a7316
commit 78e7131
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 31 deletions.
diff --git a/src/table/basetable/BaseTableMenu.tsx b/src/table/basetable/BaseTableMenu.tsx
@@ -96,7 +96,7 @@ export const BaseTableMenu: React.FC<BaseTablrMenu> = ({
             ? t('table.menu.linkArtifacts')
             : t('table.menu.linkArtifacts', { count: selection.length })}
         </li>
-        {selection.length != 0 && target ? (
+        {selection.length !== 0 && target ? (
           <React.Fragment>
             <Divider style={{ margin: '2px' }} />
             <li onClick={() => addDataToTarget(selection)}>

diff --git a/src/table/basetable/ReactBaseTable.tsx b/src/table/basetable/ReactBaseTable.tsx
@@ -117,7 +117,6 @@ export const EditableTable: React.FC<EditableTableProps<any>> = React.memo(
     const [popupVisible, setPopupVisible] = useState<boolean>(false);
     const [popupCoords, setPopupCoords] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
     const [popupRecord, setPopupRecord] = useState<any>({});
-    const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
     const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
     const sortColumns = createSortColumnsObject(sortDir);
     const [loadingMore, setLoadingMore] = useState(false);
@@ -136,39 +135,42 @@ export const EditableTable: React.FC<EditableTableProps<any>> = React.memo(
       ),
       headerRenderer: ({ columns, column, columnIndex, headerIndex, container }: any) => <Test />,
     };
+    const onAddDataToTarget = (data: any) => {
+      setSelection([]);
+      addDataToTarget(data);
+    };
 
     const handleSelectChange = ({ selected, rowData, rowIndex }: any) => {
-      let newSelectedRowKeys = [...selectedRowKeys];
-      const key = rowData[rowKey];
-      const index = newSelectedRowKeys.indexOf(key);
+      let newSelection = [...selection];
+      const index = newSelection.indexOf(rowData);
       if (multiSelect) {
         if (selected) {
-          if (!newSelectedRowKeys.includes(key)) newSelectedRowKeys.push(key);
+          if (index === -1) newSelection.push(rowData);
         } else {
-          if (index > -1) {
-            newSelectedRowKeys.splice(index, 1);
+          if (index !== -1) {
+            newSelection.splice(index, 1);
           }
         }
       } else {
         if (selected) {
-          newSelectedRowKeys = [key];
+          newSelection = [rowData];
         } else {
           if (index !== -1) {
-            newSelectedRowKeys = [];
+            newSelection = [];
           }
         }
       }
-      setSelectedRowKeys(newSelectedRowKeys);
+      setSelection(newSelection);
     };
 
-    const handleSelectHeaderChange = ({ selected }: any) => {
-      let newSelectedRowKeys;
+    const handleSelectHeaderChange = ({ selected, data }: any) => {
+      let newSelection;
       if (selected) {
-        newSelectedRowKeys = dataSource.map((e: any) => e[rowKey]);
+        newSelection = data;
       } else {
-        newSelectedRowKeys = [];
+        newSelection = [];
       }
-      setSelectedRowKeys(newSelectedRowKeys);
+      setSelection(newSelection);
     };
     const selectionColumn = {
       key: '__selection__',
@@ -182,7 +184,7 @@ export const EditableTable: React.FC<EditableTableProps<any>> = React.memo(
       headerRenderer: SelectionHeaderCell,
       dataSize: dataSource.length,
       multiSelect,
-      selectedRowKeys: selectedRowKeys,
+      selection,
       onChange: handleSelectChange,
       onHeaderChange: handleSelectHeaderChange,
     };
@@ -236,8 +238,7 @@ export const EditableTable: React.FC<EditableTableProps<any>> = React.memo(
         setPopupCoords({ x: event.clientX, y: event.clientY });
       },
       onClick: ({ rowData, event, ...props }: any) => {
-        const key = rowData[rowKey];
-        const idx = selectedRowKeys.indexOf(key);
+        const idx = selection.indexOf(rowData);
         handleSelectChange({ selected: idx === -1, rowData, rowIndex: null });
       },
     };
@@ -319,9 +320,7 @@ export const EditableTable: React.FC<EditableTableProps<any>> = React.memo(
     };
 
     const rowClassName = ({ rowData, rowIndex }: any): string => {
-      const key = rowData[rowKey];
-
-      return selectedRowKeys.includes(key) && 'row-selected';
+      return selection.includes(rowData) ? 'row-selected' : '';
     };
 
     const renderOverlay = () => {
@@ -344,7 +343,6 @@ export const EditableTable: React.FC<EditableTableProps<any>> = React.memo(
       setData(newData);
     };
     useEffect(() => {
-      setSelectedRowKeys([]);
       setExpandedRowKeys([]);
       setSelection([]);
       onSelect([]);
@@ -408,7 +406,7 @@ export const EditableTable: React.FC<EditableTableProps<any>> = React.memo(
           visible={popupVisible}
           onCreateArtifactBefore={() => {}}
           target={target}
-          addDataToTarget={addDataToTarget}
+          addDataToTarget={onAddDataToTarget}
           onCreateArtifactAfter={() => {}}
           onDeleteArtifacts={() => {
             onDeleteRows(selection);

diff --git a/src/table/basetable/TableCellsAndRows.tsx b/src/table/basetable/TableCellsAndRows.tsx
@@ -42,9 +42,8 @@ export const rowProps = ({ rowData, ...rest }: any) => ({
 
 export const SelectionCell: React.FC<any> = (props: any) => {
   const { rowData, rowIndex, column } = props;
-  const { rowKey, onChange, selectedRowKeys, multiSelect } = column;
-  //console.log('SELECTED ROQ KEYS', selectedRowKeys);
-  const checked = rowData ? selectedRowKeys.includes(rowData[rowKey]) : false;
+  const { onChange, selection, multiSelect } = column;
+  const checked = rowData ? selection.includes(rowData) : false;
   const handleChange = (e: any) => onChange({ selected: e.target.checked, rowData, rowIndex });
 
   return multiSelect ? (

diff --git a/src/table/basetable/TableHeader.tsx b/src/table/basetable/TableHeader.tsx
@@ -13,10 +13,10 @@ import { Checkbox } from 'antd';
 import './TableHeader.css';
 
 export const SelectionHeaderCell: React.FC<any> = (props: any) => {
-  const { column } = props;
-  const { dataSize, onHeaderChange, selectedRowKeys, multiSelect } = column;
-  const checked = selectedRowKeys.length === dataSize && dataSize !== 0;
-  const handleChange = (e: any) => onHeaderChange({ selected: e.target.checked });
+  const { column, container } = props;
+  const { dataSize, onHeaderChange, selection, multiSelect } = column;
+  const checked = selection.length === dataSize && dataSize !== 0;
+  const handleChange = (e: any) => onHeaderChange({ selected: e.target.checked, data: container._data });
 
   return multiSelect ? <Checkbox checked={checked} onChange={handleChange} /> : null;
 };

diff --git a/stories/TwoTables.stories.tsx b/stories/TwoTables.stories.tsx
@@ -166,6 +166,7 @@ const viewKinds = [
                     name: 'правую таблицу',
                     iri: 'mktp:ProductCards_in_Product_Coll',
                   },
+                  multiSelect: true,
                   draggable: true,
                   resizeableHeader: true,
                   height: 'all-empty-space',