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

React Wrapper for UI5 Web Components and additional components

import iconFilter from '@ui5/webcomponents-icons/dist/filter.js';
import iconGroup from '@ui5/webcomponents-icons/dist/group-2.js';
import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js';
import iconSortDescending from '@ui5/webcomponents-icons/dist/sort-descending.js';
import { ThemingParameters, useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { useRef, useState } from 'react';
import { Icon } from '../../../webComponents/Icon/index.js';
import { Text } from '../../../webComponents/Text/index.js';
import { classNames, styleData } from './ColumnHeader.module.css.js';
import { ColumnHeaderModal } from './ColumnHeaderModal.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const ColumnHeader = props => {
  useStylesheet(styleData, ColumnHeader.displayName);
  const {
    id,
    children,
    column,
    columnId,
    className,
    style,
    onSort,
    onGroupBy,
    onDragEnter,
    onDragOver,
    onDragStart,
    onDrop,
    onDragEnd,
    headerTooltip,
    isDraggable,
    dragOver,
    role,
    virtualColumn,
    columnVirtualizer,
    isRtl,
    visibleColumnIndex,
    onClick,
    onKeyDown,
    onKeyUp,
    isFiltered,
    title,
    'aria-label': ariaLabel,
    'aria-sort': ariaSort,
    showVerticalEndBorder
  } = props;
  const columnIndex = virtualColumn.index;
  const [popoverOpen, setPopoverOpen] = useState(false);
  const columnHeaderRef = useRef(null);
  const childIsString = typeof children === 'string';
  const tooltip = (() => {
    if (headerTooltip) {
      return headerTooltip;
    }
    if (childIsString) {
      return children;
    }
    return null;
  })();
  const textStyle = (() => {
    let margin = 0;
    const style = {};
    if (column.hAlign) {
      style.textAlign = column.hAlign.toLowerCase();
    }
    if (column.isSorted) margin++;
    if (column.isGrouped) margin++;
    if (isFiltered) margin++;
    if (margin === 0) {
      return style;
    }
    if (margin > 0) {
      margin += 0.625;
    }
    style.marginInlineEnd = `${margin}rem`;
    return style;
  })();
  const hasPopover = column.canGroupBy || column.canSort || column.canFilter;
  const handleHeaderCellClick = e => {
    if (typeof onClick === 'function') {
      onClick(e);
    }
    if (hasPopover) {
      setPopoverOpen(true);
    }
  };
  const directionStyles = isRtl ? {
    right: 0,
    transform: `translateX(-${virtualColumn.start}px)`
  } : {
    left: 0,
    transform: `translateX(${virtualColumn.start}px)`
  };
  const handleHeaderCellKeyDown = e => {
    if (typeof onKeyDown === 'function') {
      onKeyDown(e);
    }
    if (hasPopover && e.code === 'Enter') {
      setPopoverOpen(true);
    }
    if (e.code === 'Space') {
      e.preventDefault();
    }
  };
  const handleHeaderCellKeyUp = e => {
    if (typeof onKeyUp === 'function') {
      onKeyUp(e);
    }
    if (hasPopover && e.code === 'Space' && !e.target.hasAttribute('ui5-li')) {
      setPopoverOpen(true);
    }
  };
  if (!column) return null;
  return /*#__PURE__*/_jsx("div", {
    ref: columnHeaderRef,
    className: clsx(classNames.thContainer, showVerticalEndBorder && classNames.verticalEndBorder),
    style: {
      position: 'absolute',
      insetBlockStart: 0,
      width: `${virtualColumn.size}px`,
      ...directionStyles
    },
    children: /*#__PURE__*/_jsxs("div", {
      ref: columnVirtualizer.measureElement,
      "data-visible-column-index": visibleColumnIndex,
      "data-visible-row-index": 0,
      "data-row-index": 0,
      "data-column-index": columnIndex,
      tabIndex: -1,
      id: id,
      className: className,
      style: {
        ...style,
        borderInlineStart: dragOver ? `3px solid ${ThemingParameters.sapSelectedColor}` : undefined
      },
      "aria-haspopup": hasPopover ? 'menu' : undefined,
      role: role,
      draggable: isDraggable,
      onDragEnter: onDragEnter,
      onDragOver: onDragOver,
      onDragStart: onDragStart,
      onDrop: onDrop,
      onDragEnd: onDragEnd,
      "data-column-id": columnId,
      onClick: handleHeaderCellClick,
      onKeyDown: handleHeaderCellKeyDown,
      onKeyUp: handleHeaderCellKeyUp,
      "aria-label": ariaLabel,
      "aria-sort": ariaSort,
      title: title,
      children: [/*#__PURE__*/_jsxs("div", {
        className: clsx(classNames.header, columnId === '__ui5wcr__internal_selection_column' && classNames.selectAllCheckBoxContainer),
        "data-h-align": column.hAlign,
        "data-component-name": `AnalyticalTableHeaderContentContainer-${columnId}`,
        children: [childIsString ? /*#__PURE__*/_jsx(Text, {
          title: tooltip,
          maxLines: 1,
          style: textStyle,
          className: classNames.text,
          "data-component-name": `AnalyticalTableHeaderTextContentContainer-${columnId}`,
          children: children
        }) : /*#__PURE__*/_jsx("span", {
          title: tooltip,
          style: textStyle,
          className: classNames.text,
          "data-component-name": `AnalyticalTableHeaderContentContainer-${columnId}`,
          children: children
        }), /*#__PURE__*/_jsxs("div", {
          className: classNames.iconContainer,
          "data-component-name": `AnalyticalTableHeaderIconsContainer-${columnId}`,
          children: [isFiltered && /*#__PURE__*/_jsx(Icon, {
            name: iconFilter,
            "aria-hidden": true
          }), column.isSorted && /*#__PURE__*/_jsx(Icon, {
            name: column.isSortedDesc ? iconSortDescending : iconSortAscending,
            "aria-hidden": true
          }), column.isGrouped && /*#__PURE__*/_jsx(Icon, {
            name: iconGroup,
            "aria-hidden": true
          })]
        })]
      }), hasPopover && popoverOpen && /*#__PURE__*/_jsx(ColumnHeaderModal, {
        isRtl: isRtl,
        column: column,
        onSort: onSort,
        onGroupBy: onGroupBy,
        openerRef: columnHeaderRef,
        open: popoverOpen,
        setPopoverOpen: setPopoverOpen
      })]
    })
  });
};
ColumnHeader.displayName = 'ColumnHeader';