UNPKG

@grafana/ui

Version:
1 lines 1.88 kB
{"version":3,"file":"index.mjs","sources":["../../../../../src/components/InteractiveTable/Expander/index.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { CellProps, HeaderProps } from 'react-table';\n\nimport { t } from '../../../utils/i18n';\nimport { IconButton } from '../../IconButton/IconButton';\n\nconst expanderContainerStyles = css({\n display: 'flex',\n alignItems: 'center',\n height: '100%',\n});\n\nexport function ExpanderCell<K extends object>({ row, __rowID }: CellProps<K, void>) {\n return (\n <div className={expanderContainerStyles}>\n <IconButton\n tooltip={t('grafana-ui.interactive-table.expand-row-tooltip', 'Toggle row expanded')}\n aria-controls={__rowID}\n // @ts-expect-error react-table doesn't ship with useExpanded types and we can't use declaration merging without affecting the table viz\n name={row.isExpanded ? 'angle-down' : 'angle-right'}\n // @ts-expect-error same as the line above\n aria-expanded={row.isExpanded}\n // @ts-expect-error same as the line above\n {...row.getToggleRowExpandedProps()}\n size=\"lg\"\n />\n </div>\n );\n}\n\nexport function ExpanderHeader<K extends object>({ isAllRowsExpanded, toggleAllRowsExpanded }: HeaderProps<K>) {\n return (\n <div className={expanderContainerStyles}>\n <IconButton\n aria-label={!isAllRowsExpanded ? 'Expand all rows' : 'Collapse all rows'}\n name={!isAllRowsExpanded ? 'table-expand-all' : 'table-collapse-all'}\n onClick={() => toggleAllRowsExpanded()}\n size={'lg'}\n tooltip={!isAllRowsExpanded ? 'Expand all rows' : 'Collapse all rows'}\n variant={'secondary'}\n />\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;AAMgC,GAAI,CAAA;AAAA,EAClC,OAAS,EAAA,MAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,MAAQ,EAAA;AACV,CAAC"}