feat(AnalyticalTable): Add prop selectionMode

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}
       />

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx

@@ -104,8 +104,8 @@ export const ColumnHeaderModal: FC<ColumnHeaderModalProperties> = (props) => {
         {showFilter && !column.isGrouped && (
           <CustomListItem type={ListItemTypes.Inactive}>
             <FlexBox alignItems={FlexBoxAlignItems.Center} style={{ padding: '0px 1rem' }}>
-              <Icon name="filter" style={{ paddingRight: '1rem' }} />
-              <Filter column={column} />
+              <Icon name="filter" style={{ paddingRight: '0.5rem', minWidth: '1rem', minHeight: '1rem' }} />
+              <Filter column={column} popoverRef={popoverRef} />
             </FlexBox>
           </CustomListItem>
         )}

packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap

@@ -1569,7 +1569,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
                   <ui5-icon
                     class=""
                     name="filter"
-                    style="padding-right: 1rem;"
+                    style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
                   />
                   <ui5-input
                     class=""
@@ -1657,7 +1657,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
                   <ui5-icon
                     class=""
                     name="filter"
-                    style="padding-right: 1rem;"
+                    style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
                   />
                   <ui5-input
                     class=""
@@ -1745,7 +1745,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
                   <ui5-icon
                     class=""
                     name="filter"
-                    style="padding-right: 1rem;"
+                    style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
                   />
                   <ui5-input
                     class=""
@@ -1834,7 +1834,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
                   <ui5-icon
                     class=""
                     name="filter"
-                    style="padding-right: 1rem;"
+                    style="padding-right: 0.5rem; min-width: 1rem; min-height: 1rem;"
                   />
                   <ui5-input
                     class=""

packages/main/src/components/AnalyticalTable/demo/demo.stories.tsx

@@ -1,7 +1,8 @@
 import { action } from '@storybook/addon-actions';
-import { array, boolean, number, text, object } from '@storybook/addon-knobs';
+import { array, boolean, number, object, select, text } from '@storybook/addon-knobs';
 import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
+import { TableSelectionMode } from '@ui5/webcomponents-react/lib/TableSelectionMode';
 import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
 import { Title } from '@ui5/webcomponents-react/lib/Title';
 import React from 'react';
@@ -71,7 +72,11 @@ export const defaultTable = () => {
         visibleRows={number('visibleRows', 5)}
         minRows={number('minRows', 5)}
         groupable={boolean('groupable', true)}
-        selectable={boolean('selectable', true)}
+        selectionMode={select<TableSelectionMode>(
+          '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<TableSelectionMode>('selectionMode', TableSelectionMode, TableSelectionMode.SINGLE_SELECT)}
       onRowSelected={action('onRowSelected')}
       onSort={action('onSort')}
       onRowExpandChange={action('onRowExpandChange')}

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';

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';

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';

packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts

@@ -1,48 +1,45 @@
 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;
+    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;
+        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';

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';