UNPKG

@grafana/ui

Version:
1 lines 5.37 kB
{"version":3,"file":"ExpandedRow.mjs","sources":["../../../../../src/components/Table/TableRT/ExpandedRow.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { CSSProperties } from 'react';\nimport * as React from 'react';\n\nimport { DataFrame, Field, GrafanaTheme2 } from '@grafana/data';\nimport { TableCellHeight } from '@grafana/schema';\n\nimport { useStyles2, useTheme2 } from '../../../themes/ThemeContext';\nimport { EXPANDER_WIDTH } from '../utils';\n\nimport { Table } from './Table';\nimport { TableStyles } from './styles';\n\nexport interface Props {\n nestedData: Field;\n tableStyles: TableStyles;\n rowIndex: number;\n width: number;\n cellHeight: TableCellHeight;\n}\n\nexport function ExpandedRow({ tableStyles, nestedData, rowIndex, width, cellHeight }: Props) {\n const frames: DataFrame[][] = nestedData.values;\n const subTables: React.ReactNode[] = [];\n const theme = useTheme2();\n const styles = useStyles2(getStyles);\n\n let top = tableStyles.rowHeight + theme.spacing.gridSize; // initial height for row that expands above sub tables + 1 grid unit spacing\n\n frames[rowIndex].forEach((nf: DataFrame, nfIndex: number) => {\n const noHeader = !!nf.meta?.custom?.noHeader;\n const height = tableStyles.rowHeight * (nf.length + (noHeader ? 0 : 1)); // account for the header with + 1\n\n const subTable: CSSProperties = {\n height: height,\n paddingLeft: EXPANDER_WIDTH,\n position: 'absolute',\n top,\n backgroundColor: theme.colors.background.primary,\n color: theme.colors.text.primary,\n };\n\n top += height + theme.spacing.gridSize;\n\n subTables.push(\n <div style={subTable} key={`subTable_${rowIndex}_${nfIndex}`}>\n <Table\n data={nf}\n width={width - EXPANDER_WIDTH}\n height={tableStyles.rowHeight * (nf.length + 1)}\n noHeader={noHeader}\n cellHeight={cellHeight}\n />\n </div>\n );\n });\n\n return <div className={styles.subTables}>{subTables}</div>;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n subTables: css({\n '&:before': {\n content: '\"\"',\n position: 'absolute',\n width: '1px',\n top: theme.spacing(5),\n left: theme.spacing(1),\n bottom: theme.spacing(2),\n background: theme.colors.border.medium,\n },\n }),\n };\n};\n\nexport function getExpandedRowHeight(nestedData: Field, rowIndex: number, tableStyles: TableStyles) {\n const frames: DataFrame[][] = nestedData.values;\n\n const height = frames[rowIndex].reduce((acc: number, frame: DataFrame) => {\n if (frame.length) {\n const noHeader = !!frame.meta?.custom?.noHeader;\n return acc + tableStyles.rowHeight * (frame.length + (noHeader ? 0 : 1)) + 8; // account for the header with + 1\n }\n return acc;\n }, tableStyles.rowHeight); // initial height for row that expands above sub tables\n\n return height ?? tableStyles.rowHeight;\n}\n"],"names":[],"mappings":"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"}