From d594ecab68c5cf9b8d626101954adff95d09be3f Mon Sep 17 00:00:00 2001 From: MarcusNotheis Date: Fri, 20 Dec 2019 11:32:53 +0100 Subject: [PATCH 1/2] feat(AnalyticalTable): Add prop selectionMode Allows different selection modes via `TableSelectionMode` enum with values `NONE`, `SINGLE_SELECT`, `MULTI_SELECT` BREAKING CHANGE: Replace prop `selectable` with `selectionMode` --- .../AnalyticalTable/AnalyticalTable.test.tsx | 4 +- .../ColumnHeader/ColumnHeaderModal.tsx | 4 +- .../AnalyticalTable.test.tsx.snap | 8 +- .../AnalyticalTable/demo/demo.stories.tsx | 11 +- .../hooks/useTableCellStyling.ts | 100 +++++++++--------- .../hooks/useTableHeaderGroupStyling.ts | 20 ++-- .../hooks/useTableHeaderStyling.ts | 31 +++--- .../hooks/useTableRowStyling.ts | 75 +++++++------ .../AnalyticalTable/hooks/useTableStyling.ts | 22 ++-- .../hooks/useToggleRowExpand.ts | 38 ++++--- .../src/components/AnalyticalTable/index.tsx | 29 +++-- .../AnalyticalTable/types/ColumnType.ts | 5 +- .../virtualization/VirtualTableBody.tsx | 10 +- packages/main/src/enums/TableSelectionMode.ts | 5 + packages/main/src/index.ts | 2 + packages/main/src/lib/TableSelectionMode.ts | 3 + 16 files changed, 190 insertions(+), 177 deletions(-) create mode 100644 packages/main/src/enums/TableSelectionMode.ts create mode 100644 packages/main/src/lib/TableSelectionMode.ts diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx index 3e543972e3e..940d683d9b2 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx @@ -1,7 +1,7 @@ import { mountThemedComponent } from '@shared/tests/utils'; import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable'; +import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode'; import React from 'react'; -import { act } from 'react-dom/test-utils'; const columns = [ { @@ -172,7 +172,7 @@ describe('AnalyticalTable', () => { filterable={true} visibleRows={15} minRows={5} - selectable={true} + selectionMode={TableSelectionMode.SINGLE_SELECT} subRowsKey="subRows" isTreeTable={true} /> diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx index 9f8e6c2b3d5..23b54533eb3 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx @@ -104,8 +104,8 @@ export const ColumnHeaderModal: FC = (props) => { {showFilter && !column.isGrouped && ( - - + + )} diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap index 2d0c1949177..ebc341309eb 100644 --- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap +++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap @@ -1569,7 +1569,7 @@ exports[`AnalyticalTable Tree Table 1`] = ` { visibleRows={number('visibleRows', 5)} minRows={number('minRows', 5)} groupable={boolean('groupable', true)} - selectable={boolean('selectable', true)} + selectionMode={select( + 'selectionMode', + TableSelectionMode, + TableSelectionMode.SINGLE_SELECT + )} onRowSelected={action('onRowSelected')} onSort={action('onSort')} onGroup={action('onGroup')} @@ -101,7 +106,7 @@ export const treeTable = () => { filterable={boolean('filterable', true)} visibleRows={number('visibleRows', 15)} minRows={number('minRows', 5)} - selectable={boolean('selectable', true)} + selectionMode={select('selectionMode', TableSelectionMode, TableSelectionMode.SINGLE_SELECT)} onRowSelected={action('onRowSelected')} onSort={action('onSort')} onRowExpandChange={action('onRowExpandChange')} diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts index 89f3fc0e55d..72f3a91b844 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts @@ -3,59 +3,57 @@ import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign'; import { CSSProperties } from 'react'; import { PluginHook } from 'react-table'; -export const useTableCellStyling = (classes, rowHeight) => { - const hook: PluginHook<{}> = (instance) => { - instance.getCellProps.push((cellProps, { cell: { column } }) => { - const style: CSSProperties = {}; +export const useTableCellStyling: PluginHook<{}> = (hooks) => { + hooks.getCellProps.push((cellProps, { cell: { column }, instance }) => { + const { classes, rowHeight } = instance.webComponentsReactProperties; + const style: CSSProperties = {}; - if (rowHeight) { - style.height = `${rowHeight}px`; - } + if (rowHeight) { + style.height = `${rowHeight}px`; + } - switch (column.hAlign) { - case TextAlign.Begin: - style.textAlign = 'start'; - break; - case TextAlign.Center: - style.textAlign = 'center'; - break; - case TextAlign.End: - style.textAlign = 'end'; - break; - case TextAlign.Left: - style.textAlign = 'left'; - break; - case TextAlign.Right: - style.textAlign = 'right'; - break; - } - switch (column.vAlign) { - case VerticalAlign.Bottom: - style.verticalAlign = 'bottom'; - break; - case VerticalAlign.Middle: - style.verticalAlign = 'middle'; - break; - case VerticalAlign.Top: - style.verticalAlign = 'top'; - break; - } + switch (column.hAlign) { + case TextAlign.Begin: + style.textAlign = 'start'; + break; + case TextAlign.Center: + style.textAlign = 'center'; + break; + case TextAlign.End: + style.textAlign = 'end'; + break; + case TextAlign.Left: + style.textAlign = 'left'; + break; + case TextAlign.Right: + style.textAlign = 'right'; + break; + } + switch (column.vAlign) { + case VerticalAlign.Bottom: + style.verticalAlign = 'bottom'; + break; + case VerticalAlign.Middle: + style.verticalAlign = 'middle'; + break; + case VerticalAlign.Top: + style.verticalAlign = 'top'; + break; + } - let className = classes.tableCell; - if (column.className) { - className += ` ${column.className}`; - } + let className = classes.tableCell; + if (column.className) { + className += ` ${column.className}`; + } - return { - ...cellProps, - className, - style: { - ...cellProps.style, - style - } - }; - }); - }; - hook.pluginName = 'useTableCellStyling'; - return hook; + return { + ...cellProps, + className, + style: { + ...cellProps.style, + style + } + }; + }); }; +useTableCellStyling.pluginName = 'useTableCellStyling'; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts index 6632245fcd3..b18091e406b 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts @@ -1,14 +1,12 @@ import { PluginHook } from 'react-table'; -export const useTableHeaderGroupStyling = (classes) => { - const hook: PluginHook<{}> = (instance) => { - instance.getHeaderGroupProps.push((headerGroupProps) => { - return { - ...headerGroupProps, - className: classes.tableHeaderRow - }; - }); - }; - hook.pluginName = 'useTableHeaderGroupStyling'; - return hook; +export const useTableHeaderGroupStyling: PluginHook<{}> = (hooks) => { + hooks.getHeaderGroupProps.push((headerGroupProps, { instance }) => { + const { classes } = instance.webComponentsReactProperties; + return { + ...headerGroupProps, + className: classes.tableHeaderRow + }; + }); }; +useTableHeaderGroupStyling.pluginName = 'useTableHeaderGroupStyling'; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts index d59798a6c17..ce6aca0d8d5 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts @@ -1,20 +1,17 @@ import { PluginHook } from 'react-table'; -export const useTableHeaderStyling = (classes) => { - const hook: PluginHook<{}> = (instance) => { - instance.getHeaderProps.push((columnProps, { column }) => { - return { - ...columnProps, - className: classes.th, - column, - style: { - ...columnProps.style, - position: 'absolute' // TODO should be removed at some point in time - } - }; - }); - return instance; - }; - hook.pluginName = 'useTableHeaderStyling'; - return hook; +export const useTableHeaderStyling: PluginHook<{}> = (hooks) => { + hooks.getHeaderProps.push((columnProps, { instance, column }) => { + const { classes } = instance.webComponentsReactProperties; + return { + ...columnProps, + className: classes.th, + column, + style: { + ...columnProps.style, + position: 'absolute' // TODO should be removed at some point in time + } + }; + }); }; +useTableHeaderStyling.pluginName = 'useTableHeaderStyling'; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts index 501f024ef17..2c3c558a6f3 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts @@ -1,48 +1,47 @@ import { Event } from '@ui5/webcomponents-react-base/lib/Event'; +import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode'; const ROW_SELECTION_ATTRIBUTE = 'data-is-selected'; -export const useTableRowStyling = (classes, selectable, onRowSelected) => { - const hook = (instance) => { - instance.getRowProps.push((passedRowProps, { row }) => { - let className = classes.tr; - if (row.isGrouped) { - className += ` ${classes.tableGroupHeader}`; - } +export const useTableRowStyling = (hooks) => { + hooks.getRowProps.push((passedRowProps, { instance, row }) => { + const { classes, selectionMode, onRowSelected } = instance.webComponentsReactProperties; + console.log('Outer', selectionMode); + let className = classes.tr; + if (row.isGrouped) { + className += ` ${classes.tableGroupHeader}`; + } - const rowProps: any = { - ...passedRowProps, - className, - role: 'row' - }; + const rowProps: any = { + ...passedRowProps, + className, + role: 'row' + }; + if ([TableSelectionMode.SINGLE_SELECT, TableSelectionMode.MULTI_SELECT].includes(selectionMode)) { + rowProps.onClick = (e) => { + if (row.isGrouped) { + return; + } - if (selectable) { - rowProps.onClick = (e) => { - if (row.isGrouped) { - return; - } + row.toggleRowSelected(); - row.toggleRowSelected(); - if (typeof onRowSelected === 'function') { - onRowSelected(Event.of(null, e, { row, isSelected: !row.isSelected })); - } - const clickedRow = e.currentTarget as HTMLDivElement; - if (clickedRow.hasAttribute(ROW_SELECTION_ATTRIBUTE)) { - clickedRow.removeAttribute(ROW_SELECTION_ATTRIBUTE); - } else { - clickedRow.setAttribute(ROW_SELECTION_ATTRIBUTE, ''); - } - }; - if (row.isSelected) { - rowProps['data-is-selected'] = ''; + if (typeof onRowSelected === 'function') { + onRowSelected(Event.of(null, e, { row, isSelected: !row.isSelected })); } - } - return rowProps; - }); - - return instance; - }; - hook.pluginName = 'useTableRowStyling'; - return hook; + console.log('Inner', selectionMode); + if (selectionMode === TableSelectionMode.SINGLE_SELECT) { + instance.selectedFlatRows.forEach(({ id }) => { + instance.toggleRowSelected(id, false); + }); + } + }; + if (row.isSelected) { + rowProps[ROW_SELECTION_ATTRIBUTE] = ''; + } + } + return rowProps; + }); }; + +useTableRowStyling.pluginName = 'useTableRowStyling'; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts index c32572ad2b6..8fb085884e6 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts @@ -1,14 +1,10 @@ -import { PluginHook } from 'react-table'; - -export const useTableStyling = (classes) => { - const hook: PluginHook<{}> = (tableHooks) => { - tableHooks.getTableProps.push((tableProps) => { - return { - ...tableProps, - className: classes.table - }; - }); - }; - hook.pluginName = 'useTableStyling'; - return hook; +export const useTableStyling = (tableHooks) => { + tableHooks.getTableProps.push((tableProps, { instance }) => { + const { classes } = instance.webComponentsReactProperties; + return { + ...tableProps, + className: classes.table + }; + }); }; +useTableStyling.pluginName = 'useTableStyling'; diff --git a/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts b/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts index 466dd8ec707..9a83a81459c 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts @@ -1,25 +1,23 @@ import { Event } from '@ui5/webcomponents-react-base/lib/Event'; import { PluginHook } from 'react-table'; -export const useToggleRowExpand = (onRowExpandChange, isTreeTable) => { - const hook: PluginHook = (instance) => { - instance.getExpandedToggleProps.push((rowProps, { row }) => { - return { - ...rowProps, - onClick: (e) => { - e.stopPropagation(); - e.persist(); - row.toggleExpanded(); - let column = null; - if (!isTreeTable) { - column = row.cells.find((cell) => cell.column.id === row.groupByID).column; - } - - onRowExpandChange(Event.of(null, e, { row, column })); +export const useToggleRowExpand: PluginHook = (hooks) => { + hooks.getExpandedToggleProps.push((rowProps, { row, instance }) => { + const { onRowExpandChange, isTreeTable } = instance.webComponentsReactProperties; + return { + ...rowProps, + onClick: (e) => { + e.stopPropagation(); + e.persist(); + row.toggleExpanded(); + let column = null; + if (!isTreeTable) { + column = row.cells.find((cell) => cell.column.id === row.groupByID).column; } - }; - }); - }; - hook.pluginName = 'useToggleRowExpand'; - return hook; + + onRowExpandChange(Event.of(null, e, { row, column })); + } + }; + }); }; +useToggleRowExpand.pluginName = 'useToggleRowExpand'; diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx index 41ba8f8e846..c96e08b1c10 100644 --- a/packages/main/src/components/AnalyticalTable/index.tsx +++ b/packages/main/src/components/AnalyticalTable/index.tsx @@ -2,6 +2,7 @@ import { Device } from '@ui5/webcomponents-react-base/lib/Device'; import { Event } from '@ui5/webcomponents-react-base/lib/Event'; import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper'; import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity'; +import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode'; import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign'; import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign'; import React, { @@ -98,7 +99,7 @@ export interface TableProps extends CommonProps { sortable?: boolean; groupable?: boolean; groupBy?: string[]; - selectable?: boolean; + selectionMode?: TableSelectionMode; columnOrder?: object[]; // events @@ -139,7 +140,7 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< renderExtension, loading, groupBy, - selectable, + selectionMode, onRowSelected, reactTableOptions, tableHooks, @@ -195,6 +196,14 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< defaultColumn, getSubRows, stateReducer, + webComponentsReactProperties: { + selectionMode, + classes, + onRowSelected, + rowHeight, + onRowExpandChange, + isTreeTable + }, ...reactTableOptions }, useAbsoluteLayout, @@ -205,12 +214,12 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< useExpanded, useRowSelect, useResizeColumns, - useTableStyling(classes), - useTableHeaderGroupStyling(classes), - useTableHeaderStyling(classes), - useTableRowStyling(classes, selectable, onRowSelected), - useTableCellStyling(classes, rowHeight), - useToggleRowExpand(onRowExpandChange, isTreeTable), + useTableStyling, + useTableHeaderGroupStyling, + useTableHeaderStyling, + useTableRowStyling, + useTableCellStyling, + useToggleRowExpand, ...tableHooks ); @@ -354,7 +363,7 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref< rows={rows} minRows={minRows} columns={columns} - selectable={selectable} + selectionMode={selectionMode} reactWindowRef={reactWindowRef} isTreeTable={isTreeTable} internalRowHeight={internalRowHeight} @@ -380,7 +389,7 @@ AnalyticalTable.defaultProps = { sortable: true, filterable: false, groupable: false, - selectable: false, + selectionMode: TableSelectionMode.NONE, data: [], columns: [], title: null, diff --git a/packages/main/src/components/AnalyticalTable/types/ColumnType.ts b/packages/main/src/components/AnalyticalTable/types/ColumnType.ts index 93ffa6544f6..34d31beba16 100644 --- a/packages/main/src/components/AnalyticalTable/types/ColumnType.ts +++ b/packages/main/src/components/AnalyticalTable/types/ColumnType.ts @@ -1,10 +1,11 @@ -import { ComponentType } from 'react'; +import { ComponentType, RefObject } from 'react'; import { Column } from 'react-table'; +import { Ui5PopoverDomRef } from '../../../interfaces/Ui5PopoverDomRef'; export interface ColumnType extends Column { show: boolean; id: string; - Filter: ComponentType<{ column: ColumnType }>; + Filter: ComponentType<{ column: ColumnType; popoverRef?: RefObject }>; toggleSortBy: (descending: boolean, multi?: any) => void; toggleGroupBy: (set: boolean) => void; canFilter: boolean; diff --git a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx index b4a75d97d8e..0b78ea950ba 100644 --- a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx +++ b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx @@ -2,6 +2,7 @@ import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow'; import '@ui5/webcomponents-icons/dist/icons/navigation-right-arrow'; import React, { useCallback, useEffect, useMemo, useRef } from 'react'; import { FixedSizeList } from 'react-window'; +import { TableSelectionMode } from '../../../lib/TableSelectionMode'; import { VirtualTableRow } from './VirtualTableRow'; export const VirtualTableBody = (props) => { @@ -11,7 +12,7 @@ export const VirtualTableBody = (props) => { rows, minRows, columns, - selectable, + selectionMode, reactWindowRef, isTreeTable, internalRowHeight, @@ -26,10 +27,11 @@ export const VirtualTableBody = (props) => { const innerDivRef = useRef(null); useEffect(() => { + selectionMode; if (innerDivRef.current) { innerDivRef.current.classList = ''; innerDivRef.current.classList.add(classes.tbody); - if (selectable) { + if (selectionMode === TableSelectionMode.SINGLE_SELECT || selectionMode === TableSelectionMode.MULTI_SELECT) { innerDivRef.current.classList.add(classes.selectable); } if (alternateRowColor) { @@ -38,7 +40,7 @@ export const VirtualTableBody = (props) => { } }, [ innerDivRef.current, - selectable, + selectionMode, classes.tbody, classes.selectable, alternateRowColor, @@ -57,7 +59,7 @@ export const VirtualTableBody = (props) => { columns } }; - }, [rows, prepareRow, isTreeTable, classes, columns, selectedFlatRows]); + }, [rows, prepareRow, isTreeTable, classes, columns, selectedFlatRows, selectionMode]); const getItemKey = useCallback( (index, data) => { diff --git a/packages/main/src/enums/TableSelectionMode.ts b/packages/main/src/enums/TableSelectionMode.ts new file mode 100644 index 00000000000..d7ecc3ce3ae --- /dev/null +++ b/packages/main/src/enums/TableSelectionMode.ts @@ -0,0 +1,5 @@ +export enum TableSelectionMode { + NONE = 'None', + SINGLE_SELECT = 'SingleSelect', + MULTI_SELECT = 'MultiSelect' +} diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts index 071e4b339f7..9e08a9c88da 100644 --- a/packages/main/src/index.ts +++ b/packages/main/src/index.ts @@ -104,6 +104,7 @@ import { TableCell } from './lib/TableCell'; import { TableColumn } from './lib/TableColumn'; import { TablePlaceholder } from './lib/TablePlaceholder'; import { TableRow } from './lib/TableRow'; +import { TableSelectionMode } from './lib/TableSelectionMode'; import { Text } from './lib/Text'; import { TextAlign } from './lib/TextAlign'; import { TextArea } from './lib/TextArea'; @@ -223,6 +224,7 @@ export { TableColumn, TablePlaceholder, TableRow, + TableSelectionMode, Text, TextAlign, TextArea, diff --git a/packages/main/src/lib/TableSelectionMode.ts b/packages/main/src/lib/TableSelectionMode.ts new file mode 100644 index 00000000000..087c5ae7cc2 --- /dev/null +++ b/packages/main/src/lib/TableSelectionMode.ts @@ -0,0 +1,3 @@ +import { TableSelectionMode } from '../enums/TableSelectionMode'; + +export { TableSelectionMode }; From d8e2a1cc84bb6047bba2d6b91b16c11f094d0bc4 Mon Sep 17 00:00:00 2001 From: MarcusNotheis Date: Fri, 20 Dec 2019 12:39:33 +0100 Subject: [PATCH 2/2] WIP: PR Comments --- .../src/components/AnalyticalTable/hooks/useTableRowStyling.ts | 2 -- .../main/src/components/AnalyticalTable/types/ColumnType.ts | 2 +- .../AnalyticalTable/virtualization/VirtualTableBody.tsx | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts index 2c3c558a6f3..850cf90c6db 100644 --- a/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts +++ b/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts @@ -6,7 +6,6 @@ const ROW_SELECTION_ATTRIBUTE = 'data-is-selected'; export const useTableRowStyling = (hooks) => { hooks.getRowProps.push((passedRowProps, { instance, row }) => { const { classes, selectionMode, onRowSelected } = instance.webComponentsReactProperties; - console.log('Outer', selectionMode); let className = classes.tr; if (row.isGrouped) { className += ` ${classes.tableGroupHeader}`; @@ -29,7 +28,6 @@ export const useTableRowStyling = (hooks) => { onRowSelected(Event.of(null, e, { row, isSelected: !row.isSelected })); } - console.log('Inner', selectionMode); if (selectionMode === TableSelectionMode.SINGLE_SELECT) { instance.selectedFlatRows.forEach(({ id }) => { instance.toggleRowSelected(id, false); diff --git a/packages/main/src/components/AnalyticalTable/types/ColumnType.ts b/packages/main/src/components/AnalyticalTable/types/ColumnType.ts index 34d31beba16..a3f995f58c6 100644 --- a/packages/main/src/components/AnalyticalTable/types/ColumnType.ts +++ b/packages/main/src/components/AnalyticalTable/types/ColumnType.ts @@ -1,6 +1,6 @@ +import { Ui5PopoverDomRef } from '@ui5/webcomponents-react/interfaces/Ui5PopoverDomRef'; import { ComponentType, RefObject } from 'react'; import { Column } from 'react-table'; -import { Ui5PopoverDomRef } from '../../../interfaces/Ui5PopoverDomRef'; export interface ColumnType extends Column { show: boolean; diff --git a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx index 0b78ea950ba..17615651f91 100644 --- a/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx +++ b/packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx @@ -2,7 +2,7 @@ import '@ui5/webcomponents-icons/dist/icons/navigation-down-arrow'; import '@ui5/webcomponents-icons/dist/icons/navigation-right-arrow'; import React, { useCallback, useEffect, useMemo, useRef } from 'react'; import { FixedSizeList } from 'react-window'; -import { TableSelectionMode } from '../../../lib/TableSelectionMode'; +import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode'; import { VirtualTableRow } from './VirtualTableRow'; export const VirtualTableBody = (props) => {