@ui5/webcomponents-react/wrappers/components/AnalyticalTable/hooks/useSingleRowStateSelection.js

React Wrapper for UI5 Web Components and additional components

import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
import { AnalyticalTableSelectionBehavior } from '../../../enums/AnalyticalTableSelectionBehavior.js';
import { AnalyticalTableSelectionMode } from '../../../enums/AnalyticalTableSelectionMode.js';
import { getTagNameWithoutScopingSuffix } from '../../../internal/utils.js';
const getRowProps = (rowProps, {
  row,
  instance
}) => {
  const {
    webComponentsReactProperties,
    toggleRowSelected,
    selectedFlatRows
  } = instance;
  const {
    onRowContextMenu
  } = webComponentsReactProperties;
  const handleRowSelect = e => {
    const isSelectionCell = e.target.dataset.selectionCell === 'true';
    if (e.target?.dataset?.name !== 'internal_selection_column' && !(e.markerAllowTableRowSelection === true || e.nativeEvent?.markerAllowTableRowSelection === true) && webComponentsReactProperties.tagNamesWhichShouldNotSelectARow.has(getTagNameWithoutScopingSuffix(e.target.tagName))) {
      return;
    }

    // don't select grouped rows
    if (row.isGrouped) {
      return;
    }
    const {
      selectionBehavior,
      selectionMode,
      onRowSelect,
      onRowClick
    } = webComponentsReactProperties;
    if (typeof onRowClick === 'function' && e.target?.dataset?.name !== 'internal_selection_column') {
      onRowClick(enrichEventWithDetails(e, {
        row
      }));
    }
    if (selectionMode === AnalyticalTableSelectionMode.None) {
      return;
    }

    // don't continue if the row was clicked and selection mode is row selector only
    if (selectionBehavior === AnalyticalTableSelectionBehavior.RowSelector && !isSelectionCell) {
      return;
    }

    // deselect other rows
    if (selectionMode === AnalyticalTableSelectionMode.Single) {
      for (const selectedRow of selectedFlatRows) {
        if (selectedRow.id !== row.id) {
          toggleRowSelected(selectedRow.id, false);
        }
      }
    }
    if (typeof onRowSelect === 'function') {
      // Store pending event on table instance
      instance.pendingSelectEvent = {
        event: e,
        row
      };
    }
    toggleRowSelected(row.id);
  };
  const handleKeyDown = e => {
    if ((!e.target.hasAttribute('aria-expanded') || e.shiftKey && e.code === 'Space') && e.code === 'Enter') {
      if (!webComponentsReactProperties.tagNamesWhichShouldNotSelectARow.has(getTagNameWithoutScopingSuffix(e.target.tagName))) {
        e.preventDefault();
      }
      handleRowSelect(e);
    }

    // only prevent the default behavior if event was invoked in cell (not e.g. Input)
    if (e.code === 'Space' && e.target.role === 'gridcell') {
      e.preventDefault();
    }
  };
  const handleKeyUp = e => {
    if (!e.target.hasAttribute('aria-expanded') && !e.shiftKey && e.code === 'Space') {
      if (!webComponentsReactProperties.tagNamesWhichShouldNotSelectARow.has(getTagNameWithoutScopingSuffix(e.target.tagName))) {
        e.preventDefault();
      }
      handleRowSelect(e);
    }
  };
  const handleContextMenu = e => {
    if (typeof onRowContextMenu === 'function') {
      const cellElement = e.target.closest('[data-column-index]');
      const columnIndex = cellElement ? parseInt(cellElement.dataset.columnIndex, 10) : undefined;
      const column = columnIndex != null ? row.cells[columnIndex]?.column : undefined;
      onRowContextMenu(enrichEventWithDetails(e, {
        row,
        column
      }));
    }
  };
  return [rowProps, {
    onKeyDown: handleKeyDown,
    onKeyUp: handleKeyUp,
    onClick: handleRowSelect,
    onContextMenu: handleContextMenu
  }];
};
export const useSingleRowStateSelection = hooks => {
  hooks.getRowProps.push(getRowProps);
};
useSingleRowStateSelection.pluginName = 'useSingleRowStateSelection';