@ui5/webcomponents-react/dist/components/AnalyticalTable/hooks/useRowSelectionColumn.js

React Wrapper for UI5 Web Components and additional components

import { AnalyticalTableSelectionBehavior } from '../../../enums/AnalyticalTableSelectionBehavior.js';
import { AnalyticalTableSelectionMode } from '../../../enums/AnalyticalTableSelectionMode.js';
import { CheckBox } from '../../../webComponents/CheckBox/index.js';
import { getSelectionColumnWidth } from '../util/index.js';
/*
 * COMPONENTS
 */
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const Header = instance => {
  const {
    getToggleAllRowsSelectedProps,
    rows,
    webComponentsReactProperties: {
      selectionMode,
      translatableTexts,
      classes
    }
  } = instance;
  if (selectionMode === AnalyticalTableSelectionMode.Single || !rows.length) {
    return null;
  }
  const checkBoxProps = getToggleAllRowsSelectedProps();
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(CheckBox, {
      ...checkBoxProps,
      tabIndex: -1,
      onChange: undefined,
      checked: checkBoxProps.indeterminate ? true : checkBoxProps.checked,
      "aria-hidden": "true"
    }), /*#__PURE__*/_jsx("span", {
      className: classes.hiddenA11yText,
      children: translatableTexts.selectAllText
    })]
  });
};
const Cell = ({
  row,
  webComponentsReactProperties: {
    selectionMode
  }
}) => {
  if (selectionMode === AnalyticalTableSelectionMode.Single || row.isGrouped) {
    return null;
  }
  return /*#__PURE__*/_jsx(CheckBox, {
    ...row.getToggleRowSelectedProps(),
    tabIndex: -1,
    "aria-hidden": "true",
    "data-name": "internal_selection_column"
  });
};
const headerProps = (props, {
  instance
}) => {
  const {
    webComponentsReactProperties: {
      onRowSelect,
      selectionMode,
      translatableTexts: {
        selectAllText,
        deselectAllText
      }
    },
    toggleAllRowsSelected,
    isAllRowsSelected
  } = instance;
  const style = {
    ...props.style,
    cursor: 'pointer',
    display: 'flex',
    justifyContent: 'center'
  };
  if (props.key === 'header___ui5wcr__internal_selection_column' && selectionMode === AnalyticalTableSelectionMode.Multiple) {
    const onClick = e => {
      if (typeof props.onClick === 'function') {
        props.onClick(e);
      }
      if (typeof onRowSelect === 'function') {
        instance.pendingSelectEvent = {
          event: e,
          row: undefined,
          selectAll: true
        };
      }
      toggleAllRowsSelected(!isAllRowsSelected);
    };
    const onKeyDown = e => {
      if (typeof props.onKeyDown === 'function') {
        props.onKeyDown(e);
      }
      if (e.code === 'Enter' || e.code === 'Space') {
        e.preventDefault();
        if (e.code === 'Enter') {
          onClick(e);
        }
      }
    };
    const onKeyUp = e => {
      if (typeof props.onKeyUp === 'function') {
        props.onKeyUp(e);
      }
      if (e.code === 'Space') {
        e.preventDefault();
        onClick(e);
      }
    };
    return [props, {
      onClick,
      onKeyDown,
      onKeyUp,
      style,
      title: isAllRowsSelected ? deselectAllText : selectAllText
    }];
  }
  return props;
};
const visibleColumns = (currentVisibleColumns, {
  instance: {
    webComponentsReactProperties
  }
}) => {
  if (webComponentsReactProperties.selectionMode === AnalyticalTableSelectionMode.None || webComponentsReactProperties.selectionBehavior === AnalyticalTableSelectionBehavior.RowOnly) {
    return currentVisibleColumns;
  }
  const selectionColumn = currentVisibleColumns.find(({
    id
  }) => id === '__ui5wcr__internal_selection_column');
  return [selectionColumn, ...currentVisibleColumns.filter(({
    id
  }) => id !== '__ui5wcr__internal_selection_column')];
};
const columns = (currentColumns, {
  instance
}) => {
  const {
    webComponentsReactProperties
  } = instance;
  const {
    selectionMode,
    selectionBehavior,
    tableRef
  } = webComponentsReactProperties;
  if (selectionMode === AnalyticalTableSelectionMode.None || selectionBehavior === AnalyticalTableSelectionBehavior.RowOnly) {
    return currentColumns;
  }
  const selectionColumnWidth = getSelectionColumnWidth(tableRef);
  return [{
    id: '__ui5wcr__internal_selection_column',
    disableFilters: true,
    disableSortBy: true,
    disableGroupBy: true,
    disableResizing: true,
    disableDragAndDrop: true,
    width: selectionColumnWidth,
    minWidth: selectionColumnWidth,
    maxWidth: selectionColumnWidth,
    Header,
    Cell
  }, ...currentColumns];
};
const getCellProps = (props, {
  cell
}) => {
  if (cell.column.id === '__ui5wcr__internal_selection_column') {
    const style = {
      ...props.style,
      cursor: 'pointer',
      justifyContent: 'center'
    };
    return [props, {
      style
    }];
  }
  return props;
};
export const useRowSelectionColumn = hooks => {
  hooks.getCellProps.push(getCellProps);
  hooks.getHeaderProps.push(headerProps);
  hooks.columns.push(columns);
  hooks.visibleColumns.push(visibleColumns);
};
useRowSelectionColumn.pluginName = 'useRowSelectionColumn';