diff --git a/src/table/basetable/BaseTableMenu.tsx b/src/table/basetable/BaseTableMenu.tsx index 8efb0df..2867a56 100644 --- 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 index cb5bbee..825eb3c 100644 --- 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 index f7b5eef..8444711 100644 --- 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 index d02c871..78c5720 100644 --- 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 index 0449b85..f96cfea 100644 --- 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',