@grafana/ui/dist/esm/components/Table/TableNG/Cells/HeaderCell.mjs.map

Grafana Components Library

{"version":3,"file":"HeaderCell.mjs","sources":["../../../../../../src/components/Table/TableNG/Cells/HeaderCell.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { Property } from 'csstype';\nimport React, { useLayoutEffect, useRef, useEffect } from 'react';\nimport { Column, SortDirection } from 'react-data-grid';\n\nimport { Field, GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../../../themes';\nimport { getFieldTypeIcon } from '../../../../types';\nimport { Icon } from '../../../Icon/Icon';\nimport { Filter } from '../Filter/Filter';\nimport { TableColumnResizeActionCallback, FilterType, TableRow, TableSummaryRow } from '../types';\nimport { getDisplayName } from '../utils';\n\ninterface HeaderCellProps {\n  column: Column<TableRow, TableSummaryRow>;\n  rows: TableRow[];\n  field: Field;\n  onSort: (columnKey: string, direction: SortDirection, isMultiSort: boolean) => void;\n  direction?: SortDirection;\n  justifyContent: Property.JustifyContent;\n  filter: FilterType;\n  setFilter: React.Dispatch<React.SetStateAction<FilterType>>;\n  onColumnResize?: TableColumnResizeActionCallback;\n  headerCellRefs: React.MutableRefObject<Record<string, HTMLDivElement>>;\n  crossFilterOrder: React.MutableRefObject<string[]>;\n  crossFilterRows: React.MutableRefObject<{ [key: string]: TableRow[] }>;\n  showTypeIcons?: boolean;\n}\n\nconst HeaderCell: React.FC<HeaderCellProps> = ({\n  column,\n  rows,\n  field,\n  onSort,\n  direction,\n  justifyContent,\n  filter,\n  setFilter,\n  onColumnResize,\n  headerCellRefs,\n  crossFilterOrder,\n  crossFilterRows,\n  showTypeIcons,\n}) => {\n  const styles = useStyles2(getStyles, justifyContent);\n  const headerRef = useRef<HTMLDivElement>(null);\n\n  const filterable = field.config?.custom?.filterable ?? false;\n  const displayName = getDisplayName(field);\n\n  let isColumnFilterable = filterable;\n  if (field.config.custom?.filterable !== filterable) {\n    isColumnFilterable = field.config.custom?.filterable || false;\n  }\n  // we have to remove/reset the filter if the column is not filterable\n  if (!isColumnFilterable && filter[displayName]) {\n    setFilter((filter: FilterType) => {\n      const newFilter = { ...filter };\n      delete newFilter[displayName];\n      return newFilter;\n    });\n  }\n\n  const handleSort = (event: React.MouseEvent<HTMLButtonElement>) => {\n    const isMultiSort = event.shiftKey;\n    onSort(column.key, direction === 'ASC' ? 'DESC' : 'ASC', isMultiSort);\n  };\n\n  // collecting header cell refs to handle manual column resize\n  useLayoutEffect(() => {\n    if (headerRef.current) {\n      headerCellRefs.current[column.key] = headerRef.current;\n    }\n  }, [headerRef, column.key]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // TODO: this is a workaround to handle manual column resize;\n  useEffect(() => {\n    const headerCellParent = headerRef.current?.parentElement;\n    if (headerCellParent) {\n      // `lastElement` is an HTML element added by react-data-grid for resizing columns.\n      // We add event listeners to `lastElement` to handle the resize operation.\n      const lastElement = headerCellParent.lastElementChild;\n      if (lastElement) {\n        const handleMouseUp = () => {\n          let newWidth = headerCellParent.clientWidth;\n          onColumnResize?.(column.key, newWidth);\n        };\n\n        lastElement.addEventListener('click', handleMouseUp);\n\n        return () => {\n          lastElement.removeEventListener('click', handleMouseUp);\n        };\n      }\n    }\n    // to handle \"Not all code paths return a value.\" error\n    return;\n  }, [column]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <div\n      ref={headerRef}\n      className={styles.headerCell}\n      // TODO find a better solution to this issue, see: https://github.com/adazzle/react-data-grid/issues/3535\n      // Unblock spacebar event\n      onKeyDown={(event) => {\n        if (event.key === ' ') {\n          event.stopPropagation();\n        }\n      }}\n    >\n      <button className={styles.headerCellLabel} onClick={handleSort}>\n        {showTypeIcons && <Icon name={getFieldTypeIcon(field)} title={field?.type} size=\"sm\" />}\n        {/* Used cached displayName if available, otherwise use the column name (nested tables) */}\n        <div>{field.state?.displayName ?? column.name}</div>\n        {direction && (direction === 'ASC' ? <Icon name=\"arrow-up\" size=\"lg\" /> : <Icon name=\"arrow-down\" size=\"lg\" />)}\n      </button>\n\n      {isColumnFilterable && (\n        <Filter\n          name={column.key}\n          rows={rows}\n          filter={filter}\n          setFilter={setFilter}\n          field={field}\n          crossFilterOrder={crossFilterOrder.current}\n          crossFilterRows={crossFilterRows.current}\n        />\n      )}\n    </div>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2, justifyContent: Property.JustifyContent) => ({\n  headerCell: css({\n    display: 'flex',\n    gap: theme.spacing(0.5),\n    justifyContent,\n  }),\n  headerCellLabel: css({\n    border: 'none',\n    padding: 0,\n    background: 'inherit',\n    cursor: 'pointer',\n    whiteSpace: 'nowrap',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    fontWeight: theme.typography.fontWeightMedium,\n    display: 'flex',\n    alignItems: 'center',\n    color: theme.colors.text.secondary,\n    gap: theme.spacing(1),\n\n    '&:hover': {\n      textDecoration: 'underline',\n      color: theme.colors.text.link,\n    },\n  }),\n});\n\nexport { HeaderCell };\n"],"names":["filter","_a"],"mappings":"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"}