@ui5/webcomponents-react/dist/components/AnalyticalTable/util/index.js

React Wrapper for UI5 Web Components and additional components

import { CssSizeVariablesNames } from '@ui5/webcomponents-react-base/CssSizeVariables';
import { TextAlign } from '../../../enums/TextAlign.js';
import { VerticalAlign } from '../../../enums/VerticalAlign.js';

// ╔════════════════════════ Constants ═══════════════════════╗

const DEFAULT_SELECTION_COLUMN_WIDTH = 44;
export const NAVIGATION_KEYS = new Set(['End', 'Home', 'PageDown', 'PageUp', 'ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp']);
export const tagNamesWhichShouldNotSelectARow = new Set(['UI5-AI-BUTTON', 'UI5-AI-PROMPT-INPUT', 'UI5-AVATAR', 'UI5-BUTTON', 'UI5-CALENDAR', 'UI5-CHECKBOX', 'UI5-COLOR-PICKER', 'UI5-COMBOBOX', 'UI5-DATE-PICKER', 'UI5-DATERANGE-PICKER', 'UI5-DATETIME-PICKER', 'UI5-DURATION-PICKER', 'UI5-DYNAMIC-DATE-RANGE', 'UI5-FILE-UPLOADER', 'UI5-ICON', 'UI5-INPUT', 'UI5-LINK', 'UI5-MENU-ITEM', 'UI5-MENU-ITEM-GROUP', 'UI5-MULTI-COMBOBOX', 'UI5-MULTI-INPUT', 'UI5-RADIO-BUTTON', 'UI5-RANGE-SLIDER', 'UI5-RATING-INDICATOR', 'UI5-SEGMENTED-BUTTON', 'UI5-SELECT', 'UI5-SLIDER', 'UI5-SPLIT-BUTTON', 'UI5-STEP-INPUT', 'UI5-SWITCH', 'UI5-TEXT-AREA', 'UI5-TIME-PICKER', 'UI5-TOGGLE-BUTTON', 'UI5-UPLOAD-COLLECTION']);

// ╔════════════════════════ Util Functions ═══════════════════════╗

/**
 * Reads the selection column width from the CSS variable on the table element.
 * Returns `undefined` if `tableRef` is not mounted yet.
 */
export function getSelectionColumnWidth(tableRef) {
  if (!tableRef?.current) {
    return undefined;
  }
  const cssWidth = parseInt(getComputedStyle(tableRef.current).getPropertyValue(CssSizeVariablesNames.ui5WcrAnalyticalTableSelectionColumnWidth), 10);
  return !isNaN(cssWidth) && cssWidth > 0 ? cssWidth : DEFAULT_SELECTION_COLUMN_WIDTH;
}
export const resolveCellAlignment = column => {
  const style = {};
  switch (column.hAlign) {
    case TextAlign.Begin:
      style.justifyContent = 'flex-start';
      style.textAlign = 'start';
      break;
    case TextAlign.Center:
      style.justifyContent = 'center';
      style.textAlign = 'center';
      break;
    case TextAlign.End:
      style.justifyContent = 'flex-end';
      style.textAlign = 'end';
      break;
    case TextAlign.Left:
      style.justifyContent = 'left';
      style.textAlign = 'left';
      break;
    case TextAlign.Right:
      style.justifyContent = 'right';
      style.textAlign = 'right';
      break;
    case TextAlign.Initial:
      style.justifyContent = 'initial';
      style.textAlign = 'initial';
      break;
  }
  switch (column.vAlign) {
    case VerticalAlign.Bottom:
      style.alignItems = 'flex-end';
      break;
    case VerticalAlign.Middle:
      style.alignItems = 'center';
      break;
    case VerticalAlign.Top:
      style.alignItems = 'flex-start';
      break;
  }
  return style;
};

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function getRowHeight(rowHeight, tableRef) {
  if (rowHeight) {
    return rowHeight;
  }
  if (typeof document !== 'undefined') {
    return parseInt(getComputedStyle(tableRef.current ?? document.body).getPropertyValue('--_ui5wcr-AnalyticalTableRowHeight') || '44');
  }

  // fallback for SSR
  return 44;
}
export function getSubRowsByString(subRowsKey, row) {
  if (!subRowsKey.includes('.')) {
    return row.subRows || row[subRowsKey];
  } else {
    return subRowsKey.split('.').reduce((acc, cur) => acc?.[cur], row);
  }
}

// copied from https://github.com/TanStack/table/blob/06703a56890122cedf1b2fa4b82982999537774e/src/plugin-hooks/useResizeColumns.js#L286-L296 (22. Aug 2023)
export function getLeafHeaders(header) {
  const leafHeaders = [];
  const recurseHeader = header => {
    if (header.columns && header.columns.length) {
      header.columns.map(recurseHeader);
    }
    leafHeaders.push(header);
  };
  recurseHeader(header);
  return leafHeaders;
}
export const getCombinedElementsHeight = (prevHeightRef, ...refs) => {
  const prevHeight = prevHeightRef.current;
  let height = 0;
  for (const ref of refs) {
    const el = ref.current;
    if (!el) {
      continue;
    }
    height += el.offsetHeight;
  }
  // Math.abs is required, because of subpixel rounding errors
  const updatedHeight = Math.abs(prevHeight - height) > 1 ? height : prevHeight;
  prevHeightRef.current = updatedHeight;
  return updatedHeight;
};