@laerdal/life-react-components 3.2.1-dev.2 → 3.2.1-dev.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Table/TableBody.cjs +2 -1
- package/dist/Table/TableBody.cjs.map +1 -1
- package/dist/Table/TableBody.js +2 -1
- package/dist/Table/TableBody.js.map +1 -1
- package/dist/Table/TableStyles.cjs +3 -1
- package/dist/Table/TableStyles.cjs.map +1 -1
- package/dist/Table/TableStyles.d.ts +3 -1
- package/dist/Table/TableStyles.js +3 -1
- package/dist/Table/TableStyles.js.map +1 -1
- package/dist/Table/TableTypes.cjs.map +1 -1
- package/dist/Table/TableTypes.js.map +1 -1
- package/package.json +1 -1
package/dist/Table/TableBody.cjs
CHANGED
|
@@ -119,6 +119,7 @@ var TableBody = function TableBody(props) {
|
|
|
119
119
|
children: [column.icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableCellIcon, {
|
|
120
120
|
children: column.icon
|
|
121
121
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableCellTextWrapper, {
|
|
122
|
+
textWrap: !column.shortenText,
|
|
122
123
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableCellText, {
|
|
123
124
|
children: row[column.key]
|
|
124
125
|
}), Boolean(column.noteKey) && Boolean(row[column.noteKey]) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
@@ -213,7 +214,7 @@ var TableBody = function TableBody(props) {
|
|
|
213
214
|
style: {
|
|
214
215
|
maxWidth: column.width
|
|
215
216
|
},
|
|
216
|
-
title: column.shortenText
|
|
217
|
+
title: column.shortenText ? "".concat(row[column.key], " \n ").concat(column.noteKey ? row[column.noteKey] : '') : '',
|
|
217
218
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableCellContent, {
|
|
218
219
|
withNote: Boolean(column.noteKey),
|
|
219
220
|
className: "".concat(column.shortenText ? "truncate-text" : '', " ").concat(column.justify || ''),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableBody.cjs","names":["ColumnLabel","styled","span","TableBody","props","useDimensionsRef","updateOnResize","scrollContainerRef","dimensions","node","React","useState","scrollable","setScrollable","useEffect","clientWidth","scrollWidth","columns","rows","renderCellBody","column","row","type","tmp","variant","href","tabIndex","showLoadingIndicator","additionalProps","colorFn","color","key","e","preventDefault","stopPropagation","action","iconColor","shape","useTransparentBackground","icon","size","Size","Small","customContent","Boolean","noteKey","isSelected","multiSelect","selected","indexOf","keyExpr","layout","selectAllState","onSelectAllClick","map","defaultOnMouseDownHandler","sortable","sortByColumn","sortProps","direction","undefined","width","justify","name","currentPageRows","length","index","selectable","onRowClick","maxWidth","shortenText","noRowsLabel"],"sources":["../../src/Table/TableBody.tsx"],"sourcesContent":["import { TableColumn, TableProps } from './TableTypes';\nimport { Button } from '../Button';\nimport { Size } from '../types';\nimport * as React from 'react';\nimport { Checkbox } from '../InputFields';\nimport { ButtonProps } from '../Button/Button';\nimport IconButton, { IconButtonProps } from '../Button/Iconbutton';\nimport { HyperlinkProps } from '../HyperLink/HyperLink';\nimport { HyperLink } from '../HyperLink';\nimport {\n StyledTableBody,\n StyledTableBodyRow,\n StyledTableCell,\n StyledTableCellContent,\n StyledTableCellIcon,\n StyledTableCellText,\n StyledTableHeaderColumn,\n StyledTableHeaderColumnContent,\n StyledTableHeaderColumns,\n StyledTableNoRowsLabelRow,\n StyledTable,\n StyledTableBodyWrapper,\n StyledTableHeaderRow,\n StyledTableHeaderColumnSortDirection,\n StyledTableCellNoteText,\n StyledTableCellTextWrapper,\n} from './TableStyles';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { SystemIcons } from '../icons';\nimport { useDimensionsRef } from 'rooks';\nimport styled from 'styled-components';\n\ninterface TableBodyProps extends TableProps {\n currentPageRows: any[];\n onRowClick?: (row: any) => void;\n selected?: any | any[];\n sortByColumn: (column: TableColumn) => void;\n onSelectAllClick: () => void;\n selectAllState: 'all' | 'some' | 'none';\n}\n\nconst ColumnLabel = styled.span`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n`;\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n const [scrollContainerRef, dimensions, node] = useDimensionsRef({ updateOnResize: true });\n const [scrollable, setScrollable] = React.useState(false);\n\n React.useEffect(() => {\n const clientWidth = node?.clientWidth ?? 0;\n const scrollWidth = node?.scrollWidth ?? 0;\n setScrollable(scrollWidth > clientWidth);\n }, [dimensions, node, props.columns, props.rows]);\n\n const renderCellBody = (column: TableColumn, row: any) => {\n switch (column.type) {\n case 'link': {\n const tmp = {\n variant: 'default',\n href: '#',\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n ...column.additionalProps,\n } as HyperlinkProps;\n return (\n <HyperLink\n style={column.colorFn && { color: column.colorFn(row, column.key) }}\n {...tmp}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </HyperLink>\n );\n }\n case 'icon': {\n const tmp = {\n iconColor: column.colorFn && column.colorFn(row, column.key),\n variant: 'secondary',\n shape: 'circular',\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n useTransparentBackground: true,\n ...column.additionalProps,\n } as IconButtonProps;\n return (\n <IconButton\n {...tmp}\n action={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {column.icon}\n </IconButton>\n );\n }\n case 'button': {\n const tmp = {\n variant: 'tertiary',\n size: Size.Small,\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n ...column.additionalProps,\n } as ButtonProps;\n return (\n <Button\n style={column.colorFn && { color: column.colorFn(row, column.key) }}\n {...tmp}\n onClick={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </Button>\n );\n }\n case 'boolean':\n return <Checkbox selected={!!row[column.key]} readOnly={true} />;\n case 'custom':\n return column.customContent && column.customContent(row, column.key);\n case 'number':\n case 'text':\n default:\n return (\n <>\n {column.icon && <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>}\n <StyledTableCellTextWrapper>\n <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n {Boolean(column.noteKey) && Boolean(row[column.noteKey!]) && (\n <>\n <StyledTableCellNoteText>{row[column.noteKey!]}</StyledTableCellNoteText>\n </>\n )}\n </StyledTableCellTextWrapper>\n </>\n );\n }\n };\n\n const isSelected = (row: any) => {\n return (\n (props.multiSelect && props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1) ||\n (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row))\n );\n };\n\n return (\n <StyledTableBodyWrapper ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={`table ${props.layout || ''}`}>\n <StyledTableHeaderRow>\n <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n {props.multiSelect && (\n <StyledTableHeaderColumn>\n <StyledTableHeaderColumnContent>\n <Checkbox\n selected={props.selectAllState === 'all'}\n disabled={props.showLoadingIndicator}\n semiSelected={props.selectAllState === 'some'}\n select={props.onSelectAllClick}\n />\n </StyledTableHeaderColumnContent>\n </StyledTableHeaderColumn>\n )}\n {props.columns.map((column: TableColumn) => (\n <StyledTableHeaderColumn\n key={column.key}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e) => column.sortable && props.sortByColumn(column)}\n onKeyPress={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n column.sortable && props.sortByColumn(column);\n }\n }}\n aria-pressed={column.key === props.sortProps?.column && !!props.sortProps?.direction ? true : undefined}\n aria-sort={column.key === props.sortProps?.column && !!props.sortProps?.direction ? (props.sortProps?.direction == 'asc' ? 'ascending' : 'descending') : undefined}\n style={{ width: column.width }}\n tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n className={`${!!column.sortable ? 'sortable' : ''} ${column.key === props.sortProps?.column && !!props.sortProps?.direction ? 'sorted' : ''} ${\n column.justify || ''\n }`}>\n <StyledTableHeaderColumnContent>\n <ColumnLabel>{column.name}</ColumnLabel>\n {column.key === props.sortProps?.column && (\n <StyledTableHeaderColumnSortDirection>\n {props.sortProps?.direction === 'asc' ? <SystemIcons.ArrowLineUp size={'20px'} /> : <SystemIcons.ArrowLineDown size={'20px'} />}\n </StyledTableHeaderColumnSortDirection>\n )}\n </StyledTableHeaderColumnContent>\n </StyledTableHeaderColumn>\n ))}\n </StyledTableHeaderColumns>\n </StyledTableHeaderRow>\n <StyledTableBody>\n {props.currentPageRows.length > 0 ? (\n props.currentPageRows.map((row: any, index: number) => (\n <StyledTableBodyRow\n key={`row_${index}`}\n className={`${props.selectable ? 'selectable' : ''} ${isSelected(row) ? 'selected' : ''}`}\n onClick={() => props.onRowClick && props.onRowClick(row)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={(e) => {\n if (e.key === 'Enter') {\n props.onRowClick && props.onRowClick(row);\n }\n }}\n tabIndex={props.selectable && !props.showLoadingIndicator ? 0 : undefined}\n data-testid=\"TestTableDataRow\">\n {props.multiSelect && (\n <StyledTableCell>\n <StyledTableCellContent>\n <Checkbox selected={isSelected(row)} />\n </StyledTableCellContent>\n </StyledTableCell>\n )}\n {props.columns.map((column: TableColumn) => (\n <StyledTableCell key={`row_${index}_${column.key}`} style={{ maxWidth: column.width }} title={column.shortenText && row[column.key]}>\n <StyledTableCellContent\n withNote={Boolean(column.noteKey)}\n className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}\n style={{\n color: column.colorFn && column.colorFn(row, column.key),\n }}>\n {renderCellBody(column, row)}\n </StyledTableCellContent>\n </StyledTableCell>\n ))}\n </StyledTableBodyRow>\n ))\n ) : (\n <StyledTableNoRowsLabelRow data-testid=\"TestTableNoDataRow\">\n <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n <StyledTableCellContent className={'center'}>{props.noRowsLabel ?? 'There are no rows to display'}</StyledTableCellContent>\n </StyledTableCell>\n </StyledTableNoRowsLabelRow>\n )}\n </StyledTableBody>\n </StyledTable>\n </StyledTableBodyWrapper>\n );\n};\nexport default TableBody;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TableBody.cjs","names":["ColumnLabel","styled","span","TableBody","props","useDimensionsRef","updateOnResize","scrollContainerRef","dimensions","node","React","useState","scrollable","setScrollable","useEffect","clientWidth","scrollWidth","columns","rows","renderCellBody","column","row","type","tmp","variant","href","tabIndex","showLoadingIndicator","additionalProps","colorFn","color","key","e","preventDefault","stopPropagation","action","iconColor","shape","useTransparentBackground","icon","size","Size","Small","customContent","shortenText","Boolean","noteKey","isSelected","multiSelect","selected","indexOf","keyExpr","layout","selectAllState","onSelectAllClick","map","defaultOnMouseDownHandler","sortable","sortByColumn","sortProps","direction","undefined","width","justify","name","currentPageRows","length","index","selectable","onRowClick","maxWidth","noRowsLabel"],"sources":["../../src/Table/TableBody.tsx"],"sourcesContent":["import { TableColumn, TableProps } from './TableTypes';\nimport { Button } from '../Button';\nimport { Size } from '../types';\nimport * as React from 'react';\nimport { Checkbox } from '../InputFields';\nimport { ButtonProps } from '../Button/Button';\nimport IconButton, { IconButtonProps } from '../Button/Iconbutton';\nimport { HyperlinkProps } from '../HyperLink/HyperLink';\nimport { HyperLink } from '../HyperLink';\nimport {\n StyledTableBody,\n StyledTableBodyRow,\n StyledTableCell,\n StyledTableCellContent,\n StyledTableCellIcon,\n StyledTableCellText,\n StyledTableHeaderColumn,\n StyledTableHeaderColumnContent,\n StyledTableHeaderColumns,\n StyledTableNoRowsLabelRow,\n StyledTable,\n StyledTableBodyWrapper,\n StyledTableHeaderRow,\n StyledTableHeaderColumnSortDirection,\n StyledTableCellNoteText,\n StyledTableCellTextWrapper,\n} from './TableStyles';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { SystemIcons } from '../icons';\nimport { useDimensionsRef } from 'rooks';\nimport styled from 'styled-components';\n\ninterface TableBodyProps extends TableProps {\n currentPageRows: any[];\n onRowClick?: (row: any) => void;\n selected?: any | any[];\n sortByColumn: (column: TableColumn) => void;\n onSelectAllClick: () => void;\n selectAllState: 'all' | 'some' | 'none';\n}\n\nconst ColumnLabel = styled.span`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n`;\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n const [scrollContainerRef, dimensions, node] = useDimensionsRef({ updateOnResize: true });\n const [scrollable, setScrollable] = React.useState(false);\n\n React.useEffect(() => {\n const clientWidth = node?.clientWidth ?? 0;\n const scrollWidth = node?.scrollWidth ?? 0;\n setScrollable(scrollWidth > clientWidth);\n }, [dimensions, node, props.columns, props.rows]);\n\n const renderCellBody = (column: TableColumn, row: any) => {\n switch (column.type) {\n case 'link': {\n const tmp = {\n variant: 'default',\n href: '#',\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n ...column.additionalProps,\n } as HyperlinkProps;\n return (\n <HyperLink\n style={column.colorFn && { color: column.colorFn(row, column.key) }}\n {...tmp}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </HyperLink>\n );\n }\n case 'icon': {\n const tmp = {\n iconColor: column.colorFn && column.colorFn(row, column.key),\n variant: 'secondary',\n shape: 'circular',\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n useTransparentBackground: true,\n ...column.additionalProps,\n } as IconButtonProps;\n return (\n <IconButton\n {...tmp}\n action={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {column.icon}\n </IconButton>\n );\n }\n case 'button': {\n const tmp = {\n variant: 'tertiary',\n size: Size.Small,\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n ...column.additionalProps,\n } as ButtonProps;\n return (\n <Button\n style={column.colorFn && { color: column.colorFn(row, column.key) }}\n {...tmp}\n onClick={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </Button>\n );\n }\n case 'boolean':\n return <Checkbox selected={!!row[column.key]} readOnly={true} />;\n case 'custom':\n return column.customContent && column.customContent(row, column.key);\n case 'number':\n case 'text':\n default:\n return (\n <>\n {column.icon && <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>}\n <StyledTableCellTextWrapper textWrap={!column.shortenText}>\n <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n {Boolean(column.noteKey) && Boolean(row[column.noteKey!]) && (\n <>\n <StyledTableCellNoteText>{row[column.noteKey!]}</StyledTableCellNoteText>\n </>\n )}\n </StyledTableCellTextWrapper>\n </>\n );\n }\n };\n\n const isSelected = (row: any) => {\n return (\n (props.multiSelect && props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1) ||\n (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row))\n );\n };\n\n return (\n <StyledTableBodyWrapper ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={`table ${props.layout || ''}`}>\n <StyledTableHeaderRow>\n <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n {props.multiSelect && (\n <StyledTableHeaderColumn>\n <StyledTableHeaderColumnContent>\n <Checkbox\n selected={props.selectAllState === 'all'}\n disabled={props.showLoadingIndicator}\n semiSelected={props.selectAllState === 'some'}\n select={props.onSelectAllClick}\n />\n </StyledTableHeaderColumnContent>\n </StyledTableHeaderColumn>\n )}\n {props.columns.map((column: TableColumn) => (\n <StyledTableHeaderColumn\n key={column.key}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e) => column.sortable && props.sortByColumn(column)}\n onKeyPress={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n column.sortable && props.sortByColumn(column);\n }\n }}\n aria-pressed={column.key === props.sortProps?.column && !!props.sortProps?.direction ? true : undefined}\n aria-sort={column.key === props.sortProps?.column && !!props.sortProps?.direction ? (props.sortProps?.direction == 'asc' ? 'ascending' : 'descending') : undefined}\n style={{ width: column.width }}\n tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n className={`${!!column.sortable ? 'sortable' : ''} ${column.key === props.sortProps?.column && !!props.sortProps?.direction ? 'sorted' : ''} ${\n column.justify || ''\n }`}>\n <StyledTableHeaderColumnContent>\n <ColumnLabel>{column.name}</ColumnLabel>\n {column.key === props.sortProps?.column && (\n <StyledTableHeaderColumnSortDirection>\n {props.sortProps?.direction === 'asc' ? <SystemIcons.ArrowLineUp size={'20px'} /> : <SystemIcons.ArrowLineDown size={'20px'} />}\n </StyledTableHeaderColumnSortDirection>\n )}\n </StyledTableHeaderColumnContent>\n </StyledTableHeaderColumn>\n ))}\n </StyledTableHeaderColumns>\n </StyledTableHeaderRow>\n <StyledTableBody>\n {props.currentPageRows.length > 0 ? (\n props.currentPageRows.map((row: any, index: number) => (\n <StyledTableBodyRow\n key={`row_${index}`}\n className={`${props.selectable ? 'selectable' : ''} ${isSelected(row) ? 'selected' : ''}`}\n onClick={() => props.onRowClick && props.onRowClick(row)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={(e) => {\n if (e.key === 'Enter') {\n props.onRowClick && props.onRowClick(row);\n }\n }}\n tabIndex={props.selectable && !props.showLoadingIndicator ? 0 : undefined}\n data-testid=\"TestTableDataRow\">\n {props.multiSelect && (\n <StyledTableCell>\n <StyledTableCellContent>\n <Checkbox selected={isSelected(row)} />\n </StyledTableCellContent>\n </StyledTableCell>\n )}\n {props.columns.map((column: TableColumn) => (\n <StyledTableCell key={`row_${index}_${column.key}`} style={{ maxWidth: column.width }} title={column.shortenText ? `${row[column.key]} \\n ${column.noteKey ? row[column.noteKey!] : ''}` : ''}>\n <StyledTableCellContent\n withNote={Boolean(column.noteKey)}\n className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}\n style={{\n color: column.colorFn && column.colorFn(row, column.key),\n }}>\n {renderCellBody(column, row)}\n </StyledTableCellContent>\n </StyledTableCell>\n ))}\n </StyledTableBodyRow>\n ))\n ) : (\n <StyledTableNoRowsLabelRow data-testid=\"TestTableNoDataRow\">\n <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n <StyledTableCellContent className={'center'}>{props.noRowsLabel ?? 'There are no rows to display'}</StyledTableCellContent>\n </StyledTableCell>\n </StyledTableNoRowsLabelRow>\n )}\n </StyledTableBody>\n </StyledTable>\n </StyledTableBodyWrapper>\n );\n};\nexport default TableBody;\n"],"mappings":"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"}
|
package/dist/Table/TableBody.js
CHANGED
|
@@ -111,6 +111,7 @@ var TableBody = function TableBody(props) {
|
|
|
111
111
|
children: [column.icon && /*#__PURE__*/_jsx(StyledTableCellIcon, {
|
|
112
112
|
children: column.icon
|
|
113
113
|
}), /*#__PURE__*/_jsxs(StyledTableCellTextWrapper, {
|
|
114
|
+
textWrap: !column.shortenText,
|
|
114
115
|
children: [/*#__PURE__*/_jsx(StyledTableCellText, {
|
|
115
116
|
children: row[column.key]
|
|
116
117
|
}), Boolean(column.noteKey) && Boolean(row[column.noteKey]) && /*#__PURE__*/_jsx(_Fragment, {
|
|
@@ -205,7 +206,7 @@ var TableBody = function TableBody(props) {
|
|
|
205
206
|
style: {
|
|
206
207
|
maxWidth: column.width
|
|
207
208
|
},
|
|
208
|
-
title: column.shortenText
|
|
209
|
+
title: column.shortenText ? "".concat(row[column.key], " \n ").concat(column.noteKey ? row[column.noteKey] : '') : '',
|
|
209
210
|
children: /*#__PURE__*/_jsx(StyledTableCellContent, {
|
|
210
211
|
withNote: Boolean(column.noteKey),
|
|
211
212
|
className: "".concat(column.shortenText ? "truncate-text" : '', " ").concat(column.justify || ''),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableBody.js","names":["Button","Size","React","Checkbox","IconButton","HyperLink","StyledTableBody","StyledTableBodyRow","StyledTableCell","StyledTableCellContent","StyledTableCellIcon","StyledTableCellText","StyledTableHeaderColumn","StyledTableHeaderColumnContent","StyledTableHeaderColumns","StyledTableNoRowsLabelRow","StyledTable","StyledTableBodyWrapper","StyledTableHeaderRow","StyledTableHeaderColumnSortDirection","StyledTableCellNoteText","StyledTableCellTextWrapper","defaultOnMouseDownHandler","SystemIcons","useDimensionsRef","styled","ColumnLabel","span","TableBody","props","updateOnResize","scrollContainerRef","dimensions","node","useState","scrollable","setScrollable","useEffect","clientWidth","scrollWidth","columns","rows","renderCellBody","column","row","type","tmp","variant","href","tabIndex","showLoadingIndicator","additionalProps","colorFn","color","key","e","preventDefault","stopPropagation","action","iconColor","shape","useTransparentBackground","icon","size","Small","customContent","Boolean","noteKey","isSelected","multiSelect","selected","indexOf","keyExpr","layout","selectAllState","onSelectAllClick","map","sortable","sortByColumn","sortProps","direction","undefined","width","justify","name","currentPageRows","length","index","selectable","onRowClick","maxWidth","shortenText","noRowsLabel"],"sources":["../../src/Table/TableBody.tsx"],"sourcesContent":["import { TableColumn, TableProps } from './TableTypes';\nimport { Button } from '../Button';\nimport { Size } from '../types';\nimport * as React from 'react';\nimport { Checkbox } from '../InputFields';\nimport { ButtonProps } from '../Button/Button';\nimport IconButton, { IconButtonProps } from '../Button/Iconbutton';\nimport { HyperlinkProps } from '../HyperLink/HyperLink';\nimport { HyperLink } from '../HyperLink';\nimport {\n StyledTableBody,\n StyledTableBodyRow,\n StyledTableCell,\n StyledTableCellContent,\n StyledTableCellIcon,\n StyledTableCellText,\n StyledTableHeaderColumn,\n StyledTableHeaderColumnContent,\n StyledTableHeaderColumns,\n StyledTableNoRowsLabelRow,\n StyledTable,\n StyledTableBodyWrapper,\n StyledTableHeaderRow,\n StyledTableHeaderColumnSortDirection,\n StyledTableCellNoteText,\n StyledTableCellTextWrapper,\n} from './TableStyles';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { SystemIcons } from '../icons';\nimport { useDimensionsRef } from 'rooks';\nimport styled from 'styled-components';\n\ninterface TableBodyProps extends TableProps {\n currentPageRows: any[];\n onRowClick?: (row: any) => void;\n selected?: any | any[];\n sortByColumn: (column: TableColumn) => void;\n onSelectAllClick: () => void;\n selectAllState: 'all' | 'some' | 'none';\n}\n\nconst ColumnLabel = styled.span`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n`;\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n const [scrollContainerRef, dimensions, node] = useDimensionsRef({ updateOnResize: true });\n const [scrollable, setScrollable] = React.useState(false);\n\n React.useEffect(() => {\n const clientWidth = node?.clientWidth ?? 0;\n const scrollWidth = node?.scrollWidth ?? 0;\n setScrollable(scrollWidth > clientWidth);\n }, [dimensions, node, props.columns, props.rows]);\n\n const renderCellBody = (column: TableColumn, row: any) => {\n switch (column.type) {\n case 'link': {\n const tmp = {\n variant: 'default',\n href: '#',\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n ...column.additionalProps,\n } as HyperlinkProps;\n return (\n <HyperLink\n style={column.colorFn && { color: column.colorFn(row, column.key) }}\n {...tmp}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </HyperLink>\n );\n }\n case 'icon': {\n const tmp = {\n iconColor: column.colorFn && column.colorFn(row, column.key),\n variant: 'secondary',\n shape: 'circular',\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n useTransparentBackground: true,\n ...column.additionalProps,\n } as IconButtonProps;\n return (\n <IconButton\n {...tmp}\n action={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {column.icon}\n </IconButton>\n );\n }\n case 'button': {\n const tmp = {\n variant: 'tertiary',\n size: Size.Small,\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n ...column.additionalProps,\n } as ButtonProps;\n return (\n <Button\n style={column.colorFn && { color: column.colorFn(row, column.key) }}\n {...tmp}\n onClick={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </Button>\n );\n }\n case 'boolean':\n return <Checkbox selected={!!row[column.key]} readOnly={true} />;\n case 'custom':\n return column.customContent && column.customContent(row, column.key);\n case 'number':\n case 'text':\n default:\n return (\n <>\n {column.icon && <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>}\n <StyledTableCellTextWrapper>\n <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n {Boolean(column.noteKey) && Boolean(row[column.noteKey!]) && (\n <>\n <StyledTableCellNoteText>{row[column.noteKey!]}</StyledTableCellNoteText>\n </>\n )}\n </StyledTableCellTextWrapper>\n </>\n );\n }\n };\n\n const isSelected = (row: any) => {\n return (\n (props.multiSelect && props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1) ||\n (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row))\n );\n };\n\n return (\n <StyledTableBodyWrapper ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={`table ${props.layout || ''}`}>\n <StyledTableHeaderRow>\n <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n {props.multiSelect && (\n <StyledTableHeaderColumn>\n <StyledTableHeaderColumnContent>\n <Checkbox\n selected={props.selectAllState === 'all'}\n disabled={props.showLoadingIndicator}\n semiSelected={props.selectAllState === 'some'}\n select={props.onSelectAllClick}\n />\n </StyledTableHeaderColumnContent>\n </StyledTableHeaderColumn>\n )}\n {props.columns.map((column: TableColumn) => (\n <StyledTableHeaderColumn\n key={column.key}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e) => column.sortable && props.sortByColumn(column)}\n onKeyPress={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n column.sortable && props.sortByColumn(column);\n }\n }}\n aria-pressed={column.key === props.sortProps?.column && !!props.sortProps?.direction ? true : undefined}\n aria-sort={column.key === props.sortProps?.column && !!props.sortProps?.direction ? (props.sortProps?.direction == 'asc' ? 'ascending' : 'descending') : undefined}\n style={{ width: column.width }}\n tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n className={`${!!column.sortable ? 'sortable' : ''} ${column.key === props.sortProps?.column && !!props.sortProps?.direction ? 'sorted' : ''} ${\n column.justify || ''\n }`}>\n <StyledTableHeaderColumnContent>\n <ColumnLabel>{column.name}</ColumnLabel>\n {column.key === props.sortProps?.column && (\n <StyledTableHeaderColumnSortDirection>\n {props.sortProps?.direction === 'asc' ? <SystemIcons.ArrowLineUp size={'20px'} /> : <SystemIcons.ArrowLineDown size={'20px'} />}\n </StyledTableHeaderColumnSortDirection>\n )}\n </StyledTableHeaderColumnContent>\n </StyledTableHeaderColumn>\n ))}\n </StyledTableHeaderColumns>\n </StyledTableHeaderRow>\n <StyledTableBody>\n {props.currentPageRows.length > 0 ? (\n props.currentPageRows.map((row: any, index: number) => (\n <StyledTableBodyRow\n key={`row_${index}`}\n className={`${props.selectable ? 'selectable' : ''} ${isSelected(row) ? 'selected' : ''}`}\n onClick={() => props.onRowClick && props.onRowClick(row)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={(e) => {\n if (e.key === 'Enter') {\n props.onRowClick && props.onRowClick(row);\n }\n }}\n tabIndex={props.selectable && !props.showLoadingIndicator ? 0 : undefined}\n data-testid=\"TestTableDataRow\">\n {props.multiSelect && (\n <StyledTableCell>\n <StyledTableCellContent>\n <Checkbox selected={isSelected(row)} />\n </StyledTableCellContent>\n </StyledTableCell>\n )}\n {props.columns.map((column: TableColumn) => (\n <StyledTableCell key={`row_${index}_${column.key}`} style={{ maxWidth: column.width }} title={column.shortenText && row[column.key]}>\n <StyledTableCellContent\n withNote={Boolean(column.noteKey)}\n className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}\n style={{\n color: column.colorFn && column.colorFn(row, column.key),\n }}>\n {renderCellBody(column, row)}\n </StyledTableCellContent>\n </StyledTableCell>\n ))}\n </StyledTableBodyRow>\n ))\n ) : (\n <StyledTableNoRowsLabelRow data-testid=\"TestTableNoDataRow\">\n <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n <StyledTableCellContent className={'center'}>{props.noRowsLabel ?? 'There are no rows to display'}</StyledTableCellContent>\n </StyledTableCell>\n </StyledTableNoRowsLabelRow>\n )}\n </StyledTableBody>\n </StyledTable>\n </StyledTableBodyWrapper>\n );\n};\nexport default TableBody;\n"],"mappings":";;;;;;;AACA,SAASA,MAAM,QAAQ,WAAW;AAClC,SAASC,IAAI,QAAQ,UAAU;AAC/B,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,gBAAgB;AAEzC,OAAOC,UAAU,MAA2B,sBAAsB;AAElE,SAASC,SAAS,QAAQ,cAAc;AACxC,SACEC,eAAe,EACfC,kBAAkB,EAClBC,eAAe,EACfC,sBAAsB,EACtBC,mBAAmB,EACnBC,mBAAmB,EACnBC,uBAAuB,EACvBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,yBAAyB,EACzBC,WAAW,EACXC,sBAAsB,EACtBC,oBAAoB,EACpBC,oCAAoC,EACpCC,uBAAuB,EACvBC,0BAA0B,QACrB,eAAe;AACtB,SAASC,yBAAyB,QAAQ,WAAW;AACrD,SAASC,WAAW,QAAQ,UAAU;AACtC,SAASC,gBAAgB,QAAQ,OAAO;AACxC,OAAOC,MAAM,MAAM,mBAAmB;AAAC;AAAA;AAAA;AAWvC,IAAMC,WAAW,GAAGD,MAAM,CAACE,IAAI,gJAI9B;AAED,IAAMC,SAAmC,GAAG,SAAtCA,SAAmC,CAAIC,KAAK,EAAK;EAAA;EACrD,wBAA+CL,gBAAgB,CAAC;MAAEM,cAAc,EAAE;IAAK,CAAC,CAAC;IAAA;IAAlFC,kBAAkB;IAAEC,UAAU;IAAEC,IAAI;EAC3C,sBAAoC/B,KAAK,CAACgC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAAlDC,UAAU;IAAEC,aAAa;EAEhClC,KAAK,CAACmC,SAAS,CAAC,YAAM;IAAA;IACpB,IAAMC,WAAW,wBAAGL,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,WAAW,iEAAI,CAAC;IAC1C,IAAMC,WAAW,wBAAGN,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEM,WAAW,iEAAI,CAAC;IAC1CH,aAAa,CAACG,WAAW,GAAGD,WAAW,CAAC;EAC1C,CAAC,EAAE,CAACN,UAAU,EAAEC,IAAI,EAAEJ,KAAK,CAACW,OAAO,EAAEX,KAAK,CAACY,IAAI,CAAC,CAAC;EAEjD,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIC,MAAmB,EAAEC,GAAQ,EAAK;IACxD,QAAQD,MAAM,CAACE,IAAI;MACjB,KAAK,MAAM;QAAE;UACX,IAAMC,GAAG;YACPC,OAAO,EAAE,SAAS;YAClBC,IAAI,EAAE,GAAG;YACTC,QAAQ,EAAEpB,KAAK,CAACqB,oBAAoB,GAAG,CAAC,CAAC,GAAG;UAAC,GAC1CP,MAAM,CAACQ,eAAe,CACR;UACnB,oBACE,KAAC,SAAS;YACR,KAAK,EAAER,MAAM,CAACS,OAAO,IAAI;cAAEC,KAAK,EAAEV,MAAM,CAACS,OAAO,CAACR,GAAG,EAAED,MAAM,CAACW,GAAG;YAAE;UAAE,GAChER,GAAG;YACP,OAAO,EAAE,iBAACS,CAAC,EAAK;cACdA,CAAC,CAACC,cAAc,EAAE;cAClBD,CAAC,CAACE,eAAe,EAAE;cACnBd,MAAM,CAACe,MAAM,IAAIf,MAAM,CAACe,MAAM,CAACd,GAAG,EAAEW,CAAC,CAAC;YACxC,CAAE;YAAA,UACDX,GAAG,CAACD,MAAM,CAACW,GAAG;UAAC,GACN;QAEhB;MACA,KAAK,MAAM;QAAE;UACX,IAAMR,IAAG;YACPa,SAAS,EAAEhB,MAAM,CAACS,OAAO,IAAIT,MAAM,CAACS,OAAO,CAACR,GAAG,EAAED,MAAM,CAACW,GAAG,CAAC;YAC5DP,OAAO,EAAE,WAAW;YACpBa,KAAK,EAAE,UAAU;YACjBX,QAAQ,EAAEpB,KAAK,CAACqB,oBAAoB,GAAG,CAAC,CAAC,GAAG,CAAC;YAC7CW,wBAAwB,EAAE;UAAI,GAC3BlB,MAAM,CAACQ,eAAe,CACP;UACpB,oBACE,KAAC,UAAU,kCACLL,IAAG;YACP,MAAM,EAAE,gBAACS,CAAC,EAAK;cACbA,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEE,eAAe,EAAE;cACpBd,MAAM,CAACe,MAAM,IAAIf,MAAM,CAACe,MAAM,CAACd,GAAG,EAAEW,CAAC,CAAC;YACxC,CAAE;YAAA,UACDZ,MAAM,CAACmB;UAAI,GACD;QAEjB;MACA,KAAK,QAAQ;QAAE;UACb,IAAMhB,KAAG;YACPC,OAAO,EAAE,UAAU;YACnBgB,IAAI,EAAE9D,IAAI,CAAC+D,KAAK;YAChBf,QAAQ,EAAEpB,KAAK,CAACqB,oBAAoB,GAAG,CAAC,CAAC,GAAG;UAAC,GAC1CP,MAAM,CAACQ,eAAe,CACX;UAChB,oBACE,KAAC,MAAM;YACL,KAAK,EAAER,MAAM,CAACS,OAAO,IAAI;cAAEC,KAAK,EAAEV,MAAM,CAACS,OAAO,CAACR,GAAG,EAAED,MAAM,CAACW,GAAG;YAAE;UAAE,GAChER,KAAG;YACP,OAAO,EAAE,iBAACS,CAAC,EAAK;cACdA,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEE,eAAe,EAAE;cACpBd,MAAM,CAACe,MAAM,IAAIf,MAAM,CAACe,MAAM,CAACd,GAAG,EAAEW,CAAC,CAAC;YACxC,CAAE;YAAA,UACDX,GAAG,CAACD,MAAM,CAACW,GAAG;UAAC,GACT;QAEb;MACA,KAAK,SAAS;QACZ,oBAAO,KAAC,QAAQ;UAAC,QAAQ,EAAE,CAAC,CAACV,GAAG,CAACD,MAAM,CAACW,GAAG,CAAE;UAAC,QAAQ,EAAE;QAAK,EAAG;MAClE,KAAK,QAAQ;QACX,OAAOX,MAAM,CAACsB,aAAa,IAAItB,MAAM,CAACsB,aAAa,CAACrB,GAAG,EAAED,MAAM,CAACW,GAAG,CAAC;MACtE,KAAK,QAAQ;MACb,KAAK,MAAM;MACX;QACE,oBACE;UAAA,WACGX,MAAM,CAACmB,IAAI,iBAAI,KAAC,mBAAmB;YAAA,UAAEnB,MAAM,CAACmB;UAAI,EAAuB,eACxE,MAAC,0BAA0B;YAAA,wBACzB,KAAC,mBAAmB;cAAA,UAAElB,GAAG,CAACD,MAAM,CAACW,GAAG;YAAC,EAAuB,EAC3DY,OAAO,CAACvB,MAAM,CAACwB,OAAO,CAAC,IAAID,OAAO,CAACtB,GAAG,CAACD,MAAM,CAACwB,OAAO,CAAE,CAAC,iBACvD;cAAA,uBACE,KAAC,uBAAuB;gBAAA,UAAEvB,GAAG,CAACD,MAAM,CAACwB,OAAO;cAAE;YAA2B,EAE5E;UAAA,EAC0B;QAAA,EAC5B;IACH;EAER,CAAC;EAED,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIxB,GAAQ,EAAK;IAAA;IAC/B,OACGf,KAAK,CAACwC,WAAW,IAAI,oBAAAxC,KAAK,CAACyC,QAAQ,oDAAd,gBAAgBC,OAAO,CAAC1C,KAAK,CAAC2C,OAAO,GAAG5B,GAAG,CAACf,KAAK,CAAC2C,OAAO,CAAC,GAAG5B,GAAG,CAAC,IAAG,CAAC,CAAC,IAC3F,CAACf,KAAK,CAACwC,WAAW,IAAIxC,KAAK,CAACyC,QAAQ,MAAMzC,KAAK,CAAC2C,OAAO,GAAG5B,GAAG,CAACf,KAAK,CAAC2C,OAAO,CAAC,GAAG5B,GAAG,CAAE;EAEzF,CAAC;EAED,oBACE,KAAC,sBAAsB;IAAC,GAAG,EAAEb,kBAA0B;IAAC,SAAS,EAAEI,UAAU,GAAG,YAAY,GAAG,EAAG;IAAA,uBAChG,MAAC,WAAW;MAAC,WAAW,EAAC,GAAG;MAAC,WAAW,EAAC,GAAG;MAAC,eAAY,WAAW;MAAC,SAAS,kBAAWN,KAAK,CAAC4C,MAAM,IAAI,EAAE,CAAG;MAAA,wBAC5G,KAAC,oBAAoB;QAAA,uBACnB,MAAC,wBAAwB;UAAC,eAAY,0BAA0B;UAAA,WAC7D5C,KAAK,CAACwC,WAAW,iBAChB,KAAC,uBAAuB;YAAA,uBACtB,KAAC,8BAA8B;cAAA,uBAC7B,KAAC,QAAQ;gBACP,QAAQ,EAAExC,KAAK,CAAC6C,cAAc,KAAK,KAAM;gBACzC,QAAQ,EAAE7C,KAAK,CAACqB,oBAAqB;gBACrC,YAAY,EAAErB,KAAK,CAAC6C,cAAc,KAAK,MAAO;gBAC9C,MAAM,EAAE7C,KAAK,CAAC8C;cAAiB;YAC/B;UAC6B,EAEpC,EACA9C,KAAK,CAACW,OAAO,CAACoC,GAAG,CAAC,UAACjC,MAAmB;YAAA;YAAA,oBACrC,KAAC,uBAAuB;cAEtB,WAAW,EAAErB,yBAA0B;cACvC,OAAO,EAAE,iBAACiC,CAAC;gBAAA,OAAKZ,MAAM,CAACkC,QAAQ,IAAIhD,KAAK,CAACiD,YAAY,CAACnC,MAAM,CAAC;cAAA,CAAC;cAC9D,UAAU,EAAE,oBAACY,CAAC,EAAK;gBACjB,IAAIA,CAAC,CAACD,GAAG,KAAK,OAAO,IAAIC,CAAC,CAACD,GAAG,KAAK,GAAG,EAAE;kBACtCX,MAAM,CAACkC,QAAQ,IAAIhD,KAAK,CAACiD,YAAY,CAACnC,MAAM,CAAC;gBAC/C;cACF,CAAE;cACF,gBAAcA,MAAM,CAACW,GAAG,0BAAKzB,KAAK,CAACkD,SAAS,qDAAf,iBAAiBpC,MAAM,KAAI,CAAC,uBAACd,KAAK,CAACkD,SAAS,8CAAf,kBAAiBC,SAAS,IAAG,IAAI,GAAGC,SAAU;cACxG,aAAWtC,MAAM,CAACW,GAAG,2BAAKzB,KAAK,CAACkD,SAAS,sDAAf,kBAAiBpC,MAAM,KAAI,CAAC,uBAACd,KAAK,CAACkD,SAAS,8CAAf,kBAAiBC,SAAS,IAAI,sBAAAnD,KAAK,CAACkD,SAAS,sDAAf,kBAAiBC,SAAS,KAAI,KAAK,GAAG,WAAW,GAAG,YAAY,GAAIC,SAAU;cACnK,KAAK,EAAE;gBAAEC,KAAK,EAAEvC,MAAM,CAACuC;cAAM,CAAE;cAC/B,QAAQ,EAAEvC,MAAM,CAACkC,QAAQ,IAAI,CAAChD,KAAK,CAACqB,oBAAoB,GAAG,CAAC,GAAG,CAAC,CAAE;cAClE,SAAS,YAAK,CAAC,CAACP,MAAM,CAACkC,QAAQ,GAAG,UAAU,GAAG,EAAE,cAAIlC,MAAM,CAACW,GAAG,2BAAKzB,KAAK,CAACkD,SAAS,sDAAf,kBAAiBpC,MAAM,KAAI,CAAC,uBAACd,KAAK,CAACkD,SAAS,8CAAf,kBAAiBC,SAAS,IAAG,QAAQ,GAAG,EAAE,cACzIrC,MAAM,CAACwC,OAAO,IAAI,EAAE,CACnB;cAAA,uBACH,MAAC,8BAA8B;gBAAA,wBAC7B,KAAC,WAAW;kBAAA,UAAExC,MAAM,CAACyC;gBAAI,EAAe,EACvCzC,MAAM,CAACW,GAAG,2BAAKzB,KAAK,CAACkD,SAAS,sDAAf,kBAAiBpC,MAAM,kBACrC,KAAC,oCAAoC;kBAAA,UAClC,sBAAAd,KAAK,CAACkD,SAAS,sDAAf,kBAAiBC,SAAS,MAAK,KAAK,gBAAG,KAAC,WAAW,CAAC,WAAW;oBAAC,IAAI,EAAE;kBAAO,EAAG,gBAAG,KAAC,WAAW,CAAC,aAAa;oBAAC,IAAI,EAAE;kBAAO;gBAAG,EAElI;cAAA;YAC8B,GAtB5BrC,MAAM,CAACW,GAAG,CAuBS;UAAA,CAC3B,CAAC;QAAA;MACuB,EACN,eACvB,KAAC,eAAe;QAAA,UACbzB,KAAK,CAACwD,eAAe,CAACC,MAAM,GAAG,CAAC,GAC/BzD,KAAK,CAACwD,eAAe,CAACT,GAAG,CAAC,UAAChC,GAAQ,EAAE2C,KAAa;UAAA,oBAChD,MAAC,kBAAkB;YAEjB,SAAS,YAAK1D,KAAK,CAAC2D,UAAU,GAAG,YAAY,GAAG,EAAE,cAAIpB,UAAU,CAACxB,GAAG,CAAC,GAAG,UAAU,GAAG,EAAE,CAAG;YAC1F,OAAO,EAAE;cAAA,OAAMf,KAAK,CAAC4D,UAAU,IAAI5D,KAAK,CAAC4D,UAAU,CAAC7C,GAAG,CAAC;YAAA,CAAC;YACzD,WAAW,EAAEtB,yBAA0B;YACvC,UAAU,EAAE,oBAACiC,CAAC,EAAK;cACjB,IAAIA,CAAC,CAACD,GAAG,KAAK,OAAO,EAAE;gBACrBzB,KAAK,CAAC4D,UAAU,IAAI5D,KAAK,CAAC4D,UAAU,CAAC7C,GAAG,CAAC;cAC3C;YACF,CAAE;YACF,QAAQ,EAAEf,KAAK,CAAC2D,UAAU,IAAI,CAAC3D,KAAK,CAACqB,oBAAoB,GAAG,CAAC,GAAG+B,SAAU;YAC1E,eAAY,kBAAkB;YAAA,WAC7BpD,KAAK,CAACwC,WAAW,iBAChB,KAAC,eAAe;cAAA,uBACd,KAAC,sBAAsB;gBAAA,uBACrB,KAAC,QAAQ;kBAAC,QAAQ,EAAED,UAAU,CAACxB,GAAG;gBAAE;cAAG;YAChB,EAE5B,EACAf,KAAK,CAACW,OAAO,CAACoC,GAAG,CAAC,UAACjC,MAAmB;cAAA,oBACrC,KAAC,eAAe;gBAAoC,KAAK,EAAE;kBAAE+C,QAAQ,EAAE/C,MAAM,CAACuC;gBAAM,CAAE;gBAAC,KAAK,EAAEvC,MAAM,CAACgD,WAAW,IAAI/C,GAAG,CAACD,MAAM,CAACW,GAAG,CAAE;gBAAA,uBAClI,KAAC,sBAAsB;kBACrB,QAAQ,EAAEY,OAAO,CAACvB,MAAM,CAACwB,OAAO,CAAE;kBAClC,SAAS,YAAKxB,MAAM,CAACgD,WAAW,qBAAqB,EAAE,cAAIhD,MAAM,CAACwC,OAAO,IAAI,EAAE,CAAG;kBAClF,KAAK,EAAE;oBACL9B,KAAK,EAAEV,MAAM,CAACS,OAAO,IAAIT,MAAM,CAACS,OAAO,CAACR,GAAG,EAAED,MAAM,CAACW,GAAG;kBACzD,CAAE;kBAAA,UACDZ,cAAc,CAACC,MAAM,EAAEC,GAAG;gBAAC;cACL,iBARE2C,KAAK,cAAI5C,MAAM,CAACW,GAAG,EAS9B;YAAA,CACnB,CAAC;UAAA,iBA7BUiC,KAAK,EA8BE;QAAA,CACtB,CAAC,gBAEF,KAAC,yBAAyB;UAAC,eAAY,oBAAoB;UAAA,uBACzD,KAAC,eAAe;YAAC,OAAO,EAAE1D,KAAK,CAACW,OAAO,CAAC8C,MAAM,IAAIzD,KAAK,CAACwC,WAAW,GAAG,CAAC,GAAG,CAAC,CAAE;YAAA,uBAC3E,KAAC,sBAAsB;cAAC,SAAS,EAAE,QAAS;cAAA,gCAAExC,KAAK,CAAC+D,WAAW,mEAAI;YAA8B;UAA0B;QAC3G;MAErB,EACe;IAAA;EACN,EACS;AAE7B,CAAC;AAAC;EAhNAP,eAAe;EACfI,UAAU;EACVnB,QAAQ;EACRQ,YAAY;EACZH,gBAAgB;EAChBD,cAAc,aAAE,KAAK,EAAG,MAAM,EAAG,MAAM;AAAA;AA4MzC,eAAe9C,SAAS"}
|
|
1
|
+
{"version":3,"file":"TableBody.js","names":["Button","Size","React","Checkbox","IconButton","HyperLink","StyledTableBody","StyledTableBodyRow","StyledTableCell","StyledTableCellContent","StyledTableCellIcon","StyledTableCellText","StyledTableHeaderColumn","StyledTableHeaderColumnContent","StyledTableHeaderColumns","StyledTableNoRowsLabelRow","StyledTable","StyledTableBodyWrapper","StyledTableHeaderRow","StyledTableHeaderColumnSortDirection","StyledTableCellNoteText","StyledTableCellTextWrapper","defaultOnMouseDownHandler","SystemIcons","useDimensionsRef","styled","ColumnLabel","span","TableBody","props","updateOnResize","scrollContainerRef","dimensions","node","useState","scrollable","setScrollable","useEffect","clientWidth","scrollWidth","columns","rows","renderCellBody","column","row","type","tmp","variant","href","tabIndex","showLoadingIndicator","additionalProps","colorFn","color","key","e","preventDefault","stopPropagation","action","iconColor","shape","useTransparentBackground","icon","size","Small","customContent","shortenText","Boolean","noteKey","isSelected","multiSelect","selected","indexOf","keyExpr","layout","selectAllState","onSelectAllClick","map","sortable","sortByColumn","sortProps","direction","undefined","width","justify","name","currentPageRows","length","index","selectable","onRowClick","maxWidth","noRowsLabel"],"sources":["../../src/Table/TableBody.tsx"],"sourcesContent":["import { TableColumn, TableProps } from './TableTypes';\nimport { Button } from '../Button';\nimport { Size } from '../types';\nimport * as React from 'react';\nimport { Checkbox } from '../InputFields';\nimport { ButtonProps } from '../Button/Button';\nimport IconButton, { IconButtonProps } from '../Button/Iconbutton';\nimport { HyperlinkProps } from '../HyperLink/HyperLink';\nimport { HyperLink } from '../HyperLink';\nimport {\n StyledTableBody,\n StyledTableBodyRow,\n StyledTableCell,\n StyledTableCellContent,\n StyledTableCellIcon,\n StyledTableCellText,\n StyledTableHeaderColumn,\n StyledTableHeaderColumnContent,\n StyledTableHeaderColumns,\n StyledTableNoRowsLabelRow,\n StyledTable,\n StyledTableBodyWrapper,\n StyledTableHeaderRow,\n StyledTableHeaderColumnSortDirection,\n StyledTableCellNoteText,\n StyledTableCellTextWrapper,\n} from './TableStyles';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { SystemIcons } from '../icons';\nimport { useDimensionsRef } from 'rooks';\nimport styled from 'styled-components';\n\ninterface TableBodyProps extends TableProps {\n currentPageRows: any[];\n onRowClick?: (row: any) => void;\n selected?: any | any[];\n sortByColumn: (column: TableColumn) => void;\n onSelectAllClick: () => void;\n selectAllState: 'all' | 'some' | 'none';\n}\n\nconst ColumnLabel = styled.span`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n`;\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n const [scrollContainerRef, dimensions, node] = useDimensionsRef({ updateOnResize: true });\n const [scrollable, setScrollable] = React.useState(false);\n\n React.useEffect(() => {\n const clientWidth = node?.clientWidth ?? 0;\n const scrollWidth = node?.scrollWidth ?? 0;\n setScrollable(scrollWidth > clientWidth);\n }, [dimensions, node, props.columns, props.rows]);\n\n const renderCellBody = (column: TableColumn, row: any) => {\n switch (column.type) {\n case 'link': {\n const tmp = {\n variant: 'default',\n href: '#',\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n ...column.additionalProps,\n } as HyperlinkProps;\n return (\n <HyperLink\n style={column.colorFn && { color: column.colorFn(row, column.key) }}\n {...tmp}\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </HyperLink>\n );\n }\n case 'icon': {\n const tmp = {\n iconColor: column.colorFn && column.colorFn(row, column.key),\n variant: 'secondary',\n shape: 'circular',\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n useTransparentBackground: true,\n ...column.additionalProps,\n } as IconButtonProps;\n return (\n <IconButton\n {...tmp}\n action={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {column.icon}\n </IconButton>\n );\n }\n case 'button': {\n const tmp = {\n variant: 'tertiary',\n size: Size.Small,\n tabIndex: props.showLoadingIndicator ? -1 : 0,\n ...column.additionalProps,\n } as ButtonProps;\n return (\n <Button\n style={column.colorFn && { color: column.colorFn(row, column.key) }}\n {...tmp}\n onClick={(e) => {\n e?.stopPropagation();\n column.action && column.action(row, e);\n }}>\n {row[column.key]}\n </Button>\n );\n }\n case 'boolean':\n return <Checkbox selected={!!row[column.key]} readOnly={true} />;\n case 'custom':\n return column.customContent && column.customContent(row, column.key);\n case 'number':\n case 'text':\n default:\n return (\n <>\n {column.icon && <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>}\n <StyledTableCellTextWrapper textWrap={!column.shortenText}>\n <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n {Boolean(column.noteKey) && Boolean(row[column.noteKey!]) && (\n <>\n <StyledTableCellNoteText>{row[column.noteKey!]}</StyledTableCellNoteText>\n </>\n )}\n </StyledTableCellTextWrapper>\n </>\n );\n }\n };\n\n const isSelected = (row: any) => {\n return (\n (props.multiSelect && props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1) ||\n (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row))\n );\n };\n\n return (\n <StyledTableBodyWrapper ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={`table ${props.layout || ''}`}>\n <StyledTableHeaderRow>\n <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n {props.multiSelect && (\n <StyledTableHeaderColumn>\n <StyledTableHeaderColumnContent>\n <Checkbox\n selected={props.selectAllState === 'all'}\n disabled={props.showLoadingIndicator}\n semiSelected={props.selectAllState === 'some'}\n select={props.onSelectAllClick}\n />\n </StyledTableHeaderColumnContent>\n </StyledTableHeaderColumn>\n )}\n {props.columns.map((column: TableColumn) => (\n <StyledTableHeaderColumn\n key={column.key}\n onMouseDown={defaultOnMouseDownHandler}\n onClick={(e) => column.sortable && props.sortByColumn(column)}\n onKeyPress={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n column.sortable && props.sortByColumn(column);\n }\n }}\n aria-pressed={column.key === props.sortProps?.column && !!props.sortProps?.direction ? true : undefined}\n aria-sort={column.key === props.sortProps?.column && !!props.sortProps?.direction ? (props.sortProps?.direction == 'asc' ? 'ascending' : 'descending') : undefined}\n style={{ width: column.width }}\n tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n className={`${!!column.sortable ? 'sortable' : ''} ${column.key === props.sortProps?.column && !!props.sortProps?.direction ? 'sorted' : ''} ${\n column.justify || ''\n }`}>\n <StyledTableHeaderColumnContent>\n <ColumnLabel>{column.name}</ColumnLabel>\n {column.key === props.sortProps?.column && (\n <StyledTableHeaderColumnSortDirection>\n {props.sortProps?.direction === 'asc' ? <SystemIcons.ArrowLineUp size={'20px'} /> : <SystemIcons.ArrowLineDown size={'20px'} />}\n </StyledTableHeaderColumnSortDirection>\n )}\n </StyledTableHeaderColumnContent>\n </StyledTableHeaderColumn>\n ))}\n </StyledTableHeaderColumns>\n </StyledTableHeaderRow>\n <StyledTableBody>\n {props.currentPageRows.length > 0 ? (\n props.currentPageRows.map((row: any, index: number) => (\n <StyledTableBodyRow\n key={`row_${index}`}\n className={`${props.selectable ? 'selectable' : ''} ${isSelected(row) ? 'selected' : ''}`}\n onClick={() => props.onRowClick && props.onRowClick(row)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={(e) => {\n if (e.key === 'Enter') {\n props.onRowClick && props.onRowClick(row);\n }\n }}\n tabIndex={props.selectable && !props.showLoadingIndicator ? 0 : undefined}\n data-testid=\"TestTableDataRow\">\n {props.multiSelect && (\n <StyledTableCell>\n <StyledTableCellContent>\n <Checkbox selected={isSelected(row)} />\n </StyledTableCellContent>\n </StyledTableCell>\n )}\n {props.columns.map((column: TableColumn) => (\n <StyledTableCell key={`row_${index}_${column.key}`} style={{ maxWidth: column.width }} title={column.shortenText ? `${row[column.key]} \\n ${column.noteKey ? row[column.noteKey!] : ''}` : ''}>\n <StyledTableCellContent\n withNote={Boolean(column.noteKey)}\n className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}\n style={{\n color: column.colorFn && column.colorFn(row, column.key),\n }}>\n {renderCellBody(column, row)}\n </StyledTableCellContent>\n </StyledTableCell>\n ))}\n </StyledTableBodyRow>\n ))\n ) : (\n <StyledTableNoRowsLabelRow data-testid=\"TestTableNoDataRow\">\n <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n <StyledTableCellContent className={'center'}>{props.noRowsLabel ?? 'There are no rows to display'}</StyledTableCellContent>\n </StyledTableCell>\n </StyledTableNoRowsLabelRow>\n )}\n </StyledTableBody>\n </StyledTable>\n </StyledTableBodyWrapper>\n );\n};\nexport default TableBody;\n"],"mappings":"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"}
|
|
@@ -53,7 +53,9 @@ var StyledTableCellIcon = _styledComponents.default.div(_templateObject16 || (_t
|
|
|
53
53
|
exports.StyledTableCellIcon = StyledTableCellIcon;
|
|
54
54
|
var StyledTableCellText = _styledComponents.default.span(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n display: block;\n"])));
|
|
55
55
|
exports.StyledTableCellText = StyledTableCellText;
|
|
56
|
-
var StyledTableCellTextWrapper = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n padding: 12px 0px;\n width: 100%;\n
|
|
56
|
+
var StyledTableCellTextWrapper = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n padding: 12px 0px;\n width: 100%;\n ", "\n"])), function (props) {
|
|
57
|
+
return !props.textWrap ? "\n overflow: hidden;\n text-overflow: ellipsis;\n " : "";
|
|
58
|
+
});
|
|
57
59
|
exports.StyledTableCellTextWrapper = StyledTableCellTextWrapper;
|
|
58
60
|
var StyledTableCellNoteText = _styledComponents.default.span(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n display: inline-block;\n width: 100%;\n"])), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_600));
|
|
59
61
|
exports.StyledTableCellNoteText = StyledTableCellNoteText;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableStyles.cjs","names":["TableWrapper","styled","div","COLORS","neutral_200","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","ComponentLStyling","ComponentTextStyle","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","ComponentSStyling","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","props","withNote","Regular","StyledCheckBox","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableCellTextWrapper","StyledTableCellNoteText","ComponentXSStyling","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","zindex","loader","StyledTableFooterCollapseButton","button","ComponentMStyling","StyledTableBodyWrapper","scrollBarStyling","Size","Small"],"sources":["../../src/Table/TableStyles.ts"],"sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n position: relative;\n\n &.border{\n border-left: 1px solid ${COLORS.neutral_200};\n border-right: 1px solid ${COLORS.neutral_200};\n }\n`;\n\n\nexport const StyledTable = styled.table`\n background: transparent;\n border-collapse: collapse;\n width: 100%;\n\n &.fixed {\n table-layout: fixed;\n }\n\n &.auto {\n table-layout: auto;\n }\n`;\n\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n box-sizing: border-box;\n min-height: 56px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 2px solid ${COLORS.neutral_200};\n padding: 0 16px;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n .title-menu {\n margin-right: -16px;\n }\n`;\n\nexport const StyledTableHeaderRow = styled.thead`\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n box-sizing: border-box;\n min-height: 56px;\n padding: 0 16px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-top: 1px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumnSortDirection = styled.span`\n width: 24px;\n height: 24px;\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n position: relative;\n text-align: unset;\n background-color: ${COLORS.white};\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n\n &.left {\n & > div {\n justify-content: left;\n }\n }\n\n &.right {\n & > div {\n justify-content: right;\n }\n }\n\n &.center {\n & > div {\n justify-content: center;\n }\n }\n\n &.sortable ${StyledTableHeaderColumnContent} > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n opacity: 1;\n }\n\n &.sorted {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n cursor: pointer;\n position: relative;\n outline: none;\n background-color: ${COLORS.white};\n \n &:not(:last-child) {\n border-bottom: 1px solid ${COLORS.neutral_200};\n }\n\n &.selected{\n background-color: ${COLORS.primary_100};\n }\n \n &:hover {\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n position: relative;\n outline: none;\n background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div<{withNote?: boolean}>`\n min-height: ${props => props.withNote ? '64px' : '48px'};\n\n padding: 0 16px;\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n display: flex;\n align-items: center;\n justify-content: left;\n gap: 8px;\n\n &.truncate-text,\n &.truncate-text span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.left {\n justify-content: left;\n }\n\n &.right {\n justify-content: right;\n }\n\n &.center {\n justify-content: center;\n }\n\n a:first-letter,\n span:first-letter {\n text-transform: uppercase;\n }\n \n ${StyledCheckBox}{\n width: fit-content;\n }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n color: ${COLORS.neutral_700};\n width: 20px;\n height: 20px;\n\n svg {\n color: ${COLORS.neutral_700};\n width: 20px;\n height: 20px;\n }\n`;\n\nexport const StyledTableCellText = styled.span`\n display: block;\n`;\n\nexport const StyledTableCellTextWrapper = styled.div`\n padding: 12px 0px;\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const StyledTableCellNoteText = styled.span`\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n display: inline-block;\n width: 100%;\n`;\n\n\nexport const StyledTableFooter = styled.div`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n border-top: 2px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n padding: 0 16px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div<{zindex?: string}>`\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(255, 255, 255, 0.75);\n top: 0;\n z-index: ${(props) => (props.zindex ?? Z_INDEXES.loader)};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n position: relative;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 1px solid ${COLORS.neutral_200};\n border-left: none;\n border-right: none;\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 4px;\n background: ${COLORS.white};\n\n cursor: pointer;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n \n &:focus {\n ${focusStyles}\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &:disabled {\n display: none;\n }\n\n`;\n\n\nexport const StyledTableBodyWrapper = styled.div`\n overflow-x: auto;\n ${scrollBarStyling(Size.Small)}\n\n ::-webkit-scrollbar-track {\n margin: 6px;\n }\n\n &.scrollable{\n margin-bottom: 6px;\n padding-bottom: 10px;\n }\n`;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TableStyles.cjs","names":["TableWrapper","styled","div","COLORS","neutral_200","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","ComponentLStyling","ComponentTextStyle","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","ComponentSStyling","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","props","withNote","Regular","StyledCheckBox","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableCellTextWrapper","textWrap","StyledTableCellNoteText","ComponentXSStyling","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","zindex","loader","StyledTableFooterCollapseButton","button","ComponentMStyling","StyledTableBodyWrapper","scrollBarStyling","Size","Small"],"sources":["../../src/Table/TableStyles.ts"],"sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n position: relative;\n\n &.border{\n border-left: 1px solid ${COLORS.neutral_200};\n border-right: 1px solid ${COLORS.neutral_200};\n }\n`;\n\n\nexport const StyledTable = styled.table`\n background: transparent;\n border-collapse: collapse;\n width: 100%;\n\n &.fixed {\n table-layout: fixed;\n }\n\n &.auto {\n table-layout: auto;\n }\n`;\n\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n box-sizing: border-box;\n min-height: 56px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 2px solid ${COLORS.neutral_200};\n padding: 0 16px;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n .title-menu {\n margin-right: -16px;\n }\n`;\n\nexport const StyledTableHeaderRow = styled.thead`\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n box-sizing: border-box;\n min-height: 56px;\n padding: 0 16px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-top: 1px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumnSortDirection = styled.span`\n width: 24px;\n height: 24px;\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n position: relative;\n text-align: unset;\n background-color: ${COLORS.white};\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n\n &.left {\n & > div {\n justify-content: left;\n }\n }\n\n &.right {\n & > div {\n justify-content: right;\n }\n }\n\n &.center {\n & > div {\n justify-content: center;\n }\n }\n\n &.sortable ${StyledTableHeaderColumnContent} > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n opacity: 1;\n }\n\n &.sorted {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n cursor: pointer;\n position: relative;\n outline: none;\n background-color: ${COLORS.white};\n \n &:not(:last-child) {\n border-bottom: 1px solid ${COLORS.neutral_200};\n }\n\n &.selected{\n background-color: ${COLORS.primary_100};\n }\n \n &:hover {\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n position: relative;\n outline: none;\n background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div<{withNote?: boolean}>`\n min-height: ${props => props.withNote ? '64px' : '48px'};\n\n padding: 0 16px;\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n display: flex;\n align-items: center;\n justify-content: left;\n gap: 8px;\n\n &.truncate-text,\n &.truncate-text span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.left {\n justify-content: left;\n }\n\n &.right {\n justify-content: right;\n }\n\n &.center {\n justify-content: center;\n }\n\n a:first-letter,\n span:first-letter {\n text-transform: uppercase;\n }\n \n ${StyledCheckBox}{\n width: fit-content;\n }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n color: ${COLORS.neutral_700};\n width: 20px;\n height: 20px;\n\n svg {\n color: ${COLORS.neutral_700};\n width: 20px;\n height: 20px;\n }\n`;\n\nexport const StyledTableCellText = styled.span`\n display: block;\n`;\n\nexport const StyledTableCellTextWrapper = styled.div<{ textWrap?: boolean }>`\n padding: 12px 0px;\n width: 100%;\n ${props => !props.textWrap ? `\n overflow: hidden;\n text-overflow: ellipsis;\n ` : ``}\n`;\n\nexport const StyledTableCellNoteText = styled.span`\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n display: inline-block;\n width: 100%;\n`;\n\n\nexport const StyledTableFooter = styled.div`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n border-top: 2px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n padding: 0 16px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div<{zindex?: string}>`\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(255, 255, 255, 0.75);\n top: 0;\n z-index: ${(props) => (props.zindex ?? Z_INDEXES.loader)};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n position: relative;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 1px solid ${COLORS.neutral_200};\n border-left: none;\n border-right: none;\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 4px;\n background: ${COLORS.white};\n\n cursor: pointer;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n \n &:focus {\n ${focusStyles}\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &:disabled {\n display: none;\n }\n\n`;\n\n\nexport const StyledTableBodyWrapper = styled.div`\n overflow-x: auto;\n ${scrollBarStyling(Size.Small)}\n\n ::-webkit-scrollbar-track {\n margin: 6px;\n }\n\n &.scrollable{\n margin-bottom: 6px;\n padding-bottom: 10px;\n }\n`;\n"],"mappings":"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"}
|
|
@@ -20,7 +20,9 @@ export declare const StyledTableCellContent: import("styled-components").StyledC
|
|
|
20
20
|
}, never>;
|
|
21
21
|
export declare const StyledTableCellIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
22
22
|
export declare const StyledTableCellText: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
23
|
-
export declare const StyledTableCellTextWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
23
|
+
export declare const StyledTableCellTextWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
24
|
+
textWrap?: boolean | undefined;
|
|
25
|
+
}, never>;
|
|
24
26
|
export declare const StyledTableCellNoteText: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
25
27
|
export declare const StyledTableFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
26
28
|
export declare const StyledTableFooterContent: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -37,7 +37,9 @@ export var StyledTableCellContent = styled.div(_templateObject15 || (_templateOb
|
|
|
37
37
|
}, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), StyledCheckBox);
|
|
38
38
|
export var StyledTableCellIcon = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n color: ", ";\n width: 20px;\n height: 20px;\n\n svg {\n color: ", ";\n width: 20px;\n height: 20px;\n }\n"])), COLORS.neutral_700, COLORS.neutral_700);
|
|
39
39
|
export var StyledTableCellText = styled.span(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n display: block;\n"])));
|
|
40
|
-
export var StyledTableCellTextWrapper = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n padding: 12px 0px;\n width: 100%;\n
|
|
40
|
+
export var StyledTableCellTextWrapper = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n padding: 12px 0px;\n width: 100%;\n ", "\n"])), function (props) {
|
|
41
|
+
return !props.textWrap ? "\n overflow: hidden;\n text-overflow: ellipsis;\n " : "";
|
|
42
|
+
});
|
|
41
43
|
export var StyledTableCellNoteText = styled.span(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n ", "\n display: inline-block;\n width: 100%;\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600));
|
|
42
44
|
export var StyledTableFooter = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n"])));
|
|
43
45
|
export var StyledTableFooterContent = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n border-top: 2px solid ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n"])), COLORS.neutral_200, COLORS.neutral_200);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableStyles.js","names":["styled","COLORS","focusStyles","scrollBarStyling","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","Size","TableWrapper","div","neutral_200","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_20","StyledTableBodyRow","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","props","withNote","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableCellTextWrapper","StyledTableCellNoteText","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","zindex","loader","StyledTableFooterCollapseButton","button","StyledTableBodyWrapper","Small"],"sources":["../../src/Table/TableStyles.ts"],"sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n position: relative;\n\n &.border{\n border-left: 1px solid ${COLORS.neutral_200};\n border-right: 1px solid ${COLORS.neutral_200};\n }\n`;\n\n\nexport const StyledTable = styled.table`\n background: transparent;\n border-collapse: collapse;\n width: 100%;\n\n &.fixed {\n table-layout: fixed;\n }\n\n &.auto {\n table-layout: auto;\n }\n`;\n\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n box-sizing: border-box;\n min-height: 56px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 2px solid ${COLORS.neutral_200};\n padding: 0 16px;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n .title-menu {\n margin-right: -16px;\n }\n`;\n\nexport const StyledTableHeaderRow = styled.thead`\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n box-sizing: border-box;\n min-height: 56px;\n padding: 0 16px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-top: 1px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumnSortDirection = styled.span`\n width: 24px;\n height: 24px;\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n position: relative;\n text-align: unset;\n background-color: ${COLORS.white};\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n\n &.left {\n & > div {\n justify-content: left;\n }\n }\n\n &.right {\n & > div {\n justify-content: right;\n }\n }\n\n &.center {\n & > div {\n justify-content: center;\n }\n }\n\n &.sortable ${StyledTableHeaderColumnContent} > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n opacity: 1;\n }\n\n &.sorted {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n cursor: pointer;\n position: relative;\n outline: none;\n background-color: ${COLORS.white};\n \n &:not(:last-child) {\n border-bottom: 1px solid ${COLORS.neutral_200};\n }\n\n &.selected{\n background-color: ${COLORS.primary_100};\n }\n \n &:hover {\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n position: relative;\n outline: none;\n background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div<{withNote?: boolean}>`\n min-height: ${props => props.withNote ? '64px' : '48px'};\n\n padding: 0 16px;\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n display: flex;\n align-items: center;\n justify-content: left;\n gap: 8px;\n\n &.truncate-text,\n &.truncate-text span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.left {\n justify-content: left;\n }\n\n &.right {\n justify-content: right;\n }\n\n &.center {\n justify-content: center;\n }\n\n a:first-letter,\n span:first-letter {\n text-transform: uppercase;\n }\n \n ${StyledCheckBox}{\n width: fit-content;\n }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n color: ${COLORS.neutral_700};\n width: 20px;\n height: 20px;\n\n svg {\n color: ${COLORS.neutral_700};\n width: 20px;\n height: 20px;\n }\n`;\n\nexport const StyledTableCellText = styled.span`\n display: block;\n`;\n\nexport const StyledTableCellTextWrapper = styled.div`\n padding: 12px 0px;\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const StyledTableCellNoteText = styled.span`\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n display: inline-block;\n width: 100%;\n`;\n\n\nexport const StyledTableFooter = styled.div`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n border-top: 2px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n padding: 0 16px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div<{zindex?: string}>`\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(255, 255, 255, 0.75);\n top: 0;\n z-index: ${(props) => (props.zindex ?? Z_INDEXES.loader)};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n position: relative;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 1px solid ${COLORS.neutral_200};\n border-left: none;\n border-right: none;\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 4px;\n background: ${COLORS.white};\n\n cursor: pointer;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n \n &:focus {\n ${focusStyles}\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &:disabled {\n display: none;\n }\n\n`;\n\n\nexport const StyledTableBodyWrapper = styled.div`\n overflow-x: auto;\n ${scrollBarStyling(Size.Small)}\n\n ::-webkit-scrollbar-track {\n margin: 6px;\n }\n\n &.scrollable{\n margin-bottom: 6px;\n padding-bottom: 10px;\n }\n`;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TableStyles.js","names":["styled","COLORS","focusStyles","scrollBarStyling","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","Size","TableWrapper","div","neutral_200","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_20","StyledTableBodyRow","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","props","withNote","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableCellTextWrapper","textWrap","StyledTableCellNoteText","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","zindex","loader","StyledTableFooterCollapseButton","button","StyledTableBodyWrapper","Small"],"sources":["../../src/Table/TableStyles.ts"],"sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n position: relative;\n\n &.border{\n border-left: 1px solid ${COLORS.neutral_200};\n border-right: 1px solid ${COLORS.neutral_200};\n }\n`;\n\n\nexport const StyledTable = styled.table`\n background: transparent;\n border-collapse: collapse;\n width: 100%;\n\n &.fixed {\n table-layout: fixed;\n }\n\n &.auto {\n table-layout: auto;\n }\n`;\n\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n box-sizing: border-box;\n min-height: 56px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 2px solid ${COLORS.neutral_200};\n padding: 0 16px;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n .title-menu {\n margin-right: -16px;\n }\n`;\n\nexport const StyledTableHeaderRow = styled.thead`\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n box-sizing: border-box;\n min-height: 56px;\n padding: 0 16px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-top: 1px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumnSortDirection = styled.span`\n width: 24px;\n height: 24px;\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n position: relative;\n text-align: unset;\n background-color: ${COLORS.white};\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n\n &.left {\n & > div {\n justify-content: left;\n }\n }\n\n &.right {\n & > div {\n justify-content: right;\n }\n }\n\n &.center {\n & > div {\n justify-content: center;\n }\n }\n\n &.sortable ${StyledTableHeaderColumnContent} > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n opacity: 1;\n }\n\n &.sorted {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n cursor: pointer;\n position: relative;\n outline: none;\n background-color: ${COLORS.white};\n \n &:not(:last-child) {\n border-bottom: 1px solid ${COLORS.neutral_200};\n }\n\n &.selected{\n background-color: ${COLORS.primary_100};\n }\n \n &:hover {\n background-color: ${COLORS.primary_100};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n position: relative;\n outline: none;\n background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div<{withNote?: boolean}>`\n min-height: ${props => props.withNote ? '64px' : '48px'};\n\n padding: 0 16px;\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n display: flex;\n align-items: center;\n justify-content: left;\n gap: 8px;\n\n &.truncate-text,\n &.truncate-text span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.left {\n justify-content: left;\n }\n\n &.right {\n justify-content: right;\n }\n\n &.center {\n justify-content: center;\n }\n\n a:first-letter,\n span:first-letter {\n text-transform: uppercase;\n }\n \n ${StyledCheckBox}{\n width: fit-content;\n }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n color: ${COLORS.neutral_700};\n width: 20px;\n height: 20px;\n\n svg {\n color: ${COLORS.neutral_700};\n width: 20px;\n height: 20px;\n }\n`;\n\nexport const StyledTableCellText = styled.span`\n display: block;\n`;\n\nexport const StyledTableCellTextWrapper = styled.div<{ textWrap?: boolean }>`\n padding: 12px 0px;\n width: 100%;\n ${props => !props.textWrap ? `\n overflow: hidden;\n text-overflow: ellipsis;\n ` : ``}\n`;\n\nexport const StyledTableCellNoteText = styled.span`\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n display: inline-block;\n width: 100%;\n`;\n\n\nexport const StyledTableFooter = styled.div`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n border-top: 2px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n padding: 0 16px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div<{zindex?: string}>`\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(255, 255, 255, 0.75);\n top: 0;\n z-index: ${(props) => (props.zindex ?? Z_INDEXES.loader)};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n position: relative;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 1px solid ${COLORS.neutral_200};\n border-left: none;\n border-right: none;\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 4px;\n background: ${COLORS.white};\n\n cursor: pointer;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n \n &:focus {\n ${focusStyles}\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &:disabled {\n display: none;\n }\n\n`;\n\n\nexport const StyledTableBodyWrapper = styled.div`\n overflow-x: auto;\n ${scrollBarStyling(Size.Small)}\n\n ::-webkit-scrollbar-track {\n margin: 6px;\n }\n\n &.scrollable{\n margin-bottom: 6px;\n padding-bottom: 10px;\n }\n`;\n"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,mBAAmB;;AAEtC;AACA;AACA;AACA,SAAQC,MAAM,EAAEC,WAAW,EAAEC,gBAAgB,QAAO,WAAW;AAC/D,SACEC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,kBAAkB,QACb,sBAAsB;AAC7B,SAAQC,SAAS,QAAO,qBAAqB;AAC7C,SAAQC,cAAc,QAAO,yBAAyB;AACtD,SAAQC,IAAI,QAAO,UAAU;;AAE7B;AACA;AACA;;AAEA,OAAO,IAAMC,YAAY,GAAGZ,MAAM,CAACa,GAAG,wLAITZ,MAAM,CAACa,WAAW,EACjBb,MAAM,CAACa,WAAW,CAE/C;AAGD,OAAO,IAAMC,WAAW,GAAGf,MAAM,CAACgB,KAAK,6OAYtC;AAED,OAAO,IAAMC,iBAAiB,GAAGjB,MAAM,CAACa,GAAG,yEAC1C;AAED,OAAO,IAAMK,sBAAsB,GAAGlB,MAAM,CAACa,GAAG,yEAC/C;AAED,OAAO,IAAMM,6BAA6B,GAAGnB,MAAM,CAACa,GAAG,sWAO1BZ,MAAM,CAACa,WAAW,EACrBb,MAAM,CAACa,WAAW,EAGxCV,iBAAiB,CAACG,kBAAkB,CAACa,IAAI,EAAEnB,MAAM,CAACoB,KAAK,CAAC,CAI3D;AAED,OAAO,IAAMC,oBAAoB,GAAGtB,MAAM,CAACuB,KAAK,yEAC/C;AAED,OAAO,IAAMC,wBAAwB,GAAGxB,MAAM,CAACyB,EAAE,yEAChD;AAED,OAAO,IAAMC,8BAA8B,GAAG1B,MAAM,CAACa,GAAG,6SAQ9BZ,MAAM,CAACa,WAAW,EACfb,MAAM,CAACa,WAAW,CAC9C;AAED,OAAO,IAAMa,oCAAoC,GAAG3B,MAAM,CAAC4B,IAAI,0GAG9D;AAED,OAAO,IAAMC,uBAAuB,GAAG7B,MAAM,CAAC8B,EAAE,k2BAC5CxB,iBAAiB,CAACC,kBAAkB,CAACa,IAAI,EAAEnB,MAAM,CAAC8B,WAAW,CAAC,EAG5C9B,MAAM,CAAC+B,KAAK,EASR/B,MAAM,CAACgC,UAAU,EAC5BhC,MAAM,CAACiC,WAAW,EAChBzB,SAAS,CAAC0B,KAAK,EAINlC,MAAM,CAACmC,WAAW,EAC7BnC,MAAM,CAACoC,WAAW,EAChB5B,SAAS,CAAC6B,MAAM,EAIzBpC,WAAW,EAsBJwB,8BAA8B,EAIvBA,8BAA8B,EAK5BzB,MAAM,CAACsC,UAAU,CAExC;AAED,OAAO,IAAMC,kBAAkB,GAAGxC,MAAM,CAACyB,EAAE,4aAIrBxB,MAAM,CAAC+B,KAAK,EAGH/B,MAAM,CAACa,WAAW,EAIzBb,MAAM,CAACmC,WAAW,EAIlBnC,MAAM,CAACmC,WAAW,EAC3B3B,SAAS,CAAC0B,KAAK,EAIxBjC,WAAW,EAIFO,SAAS,CAAC6B,MAAM,CAG9B;AAED,OAAO,IAAMG,yBAAyB,GAAGzC,MAAM,CAACyB,EAAE,gJAG5BxB,MAAM,CAACyC,UAAU,CACtC;AAED,OAAO,IAAMC,eAAe,GAAG3C,MAAM,CAAC4C,KAAK,2EAC1C;AAGD,OAAO,IAAMC,eAAe,GAAG7C,MAAM,CAAC8C,EAAE,yEAAE;AAE1C,OAAO,IAAMC,sBAAsB,GAAG/C,MAAM,CAACa,GAAG,qmBAChC,UAAAmC,KAAK;EAAA,OAAIA,KAAK,CAACC,QAAQ,GAAG,MAAM,GAAG,MAAM;AAAA,GAGrD3C,iBAAiB,CAACC,kBAAkB,CAAC2C,OAAO,EAAEjD,MAAM,CAACoB,KAAK,CAAC,EA+B3DX,cAAc,CAGjB;AAED,OAAO,IAAMyC,mBAAmB,GAAGnD,MAAM,CAACa,GAAG,oMAClCZ,MAAM,CAACmD,WAAW,EAKhBnD,MAAM,CAACmD,WAAW,CAI9B;AAED,OAAO,IAAMC,mBAAmB,GAAGrD,MAAM,CAAC4B,IAAI,8FAE7C;AAED,OAAO,IAAM0B,0BAA0B,GAAGtD,MAAM,CAACa,GAAG,0HAGhD,UAAAmC,KAAK;EAAA,OAAI,CAACA,KAAK,CAACO,QAAQ,+DAGpB;AAAA,EACP;AAED,OAAO,IAAMC,uBAAuB,GAAGxD,MAAM,CAAC4B,IAAI,8HAC9CpB,kBAAkB,CAACD,kBAAkB,CAAC2C,OAAO,EAAEjD,MAAM,CAAC8B,WAAW,CAAC,CAGrE;AAGD,OAAO,IAAM0B,iBAAiB,GAAGzD,MAAM,CAACa,GAAG,2EAC1C;AAED,OAAO,IAAM6C,wBAAwB,GAAG1D,MAAM,CAACa,GAAG,sQACxBZ,MAAM,CAACa,WAAW,EACfb,MAAM,CAACa,WAAW,CAQ9C;AAED,OAAO,IAAM6C,4BAA4B,GAAG3D,MAAM,CAAC4B,IAAI,wGAEnDpB,kBAAkB,CAACD,kBAAkB,CAAC2C,OAAO,EAAEjD,MAAM,CAACoB,KAAK,CAAC,CAC/D;AAED,OAAO,IAAMuC,yBAAyB,GAAG5D,MAAM,CAACa,GAAG,6FAElD;AAED,OAAO,IAAMgD,kBAAkB,GAAG7D,MAAM,CAACa,GAAG,iNAM/B,UAACmC,KAAK;EAAA;EAAA,wBAAMA,KAAK,CAACc,MAAM,yDAAIrD,SAAS,CAACsD,MAAM;AAAA,CAAC,CACzD;AAED,OAAO,IAAMC,+BAA+B,GAAGhE,MAAM,CAACiE,MAAM,yoBAE/BhE,MAAM,CAACa,WAAW,EACrBb,MAAM,CAACa,WAAW,EAU5Bb,MAAM,CAAC+B,KAAK,EAIxB3B,iBAAiB,CAACE,kBAAkB,CAACa,IAAI,EAAEnB,MAAM,CAAC8B,WAAW,CAAC,EAG5D7B,WAAW,EAIFO,SAAS,CAAC0B,KAAK,EACZlC,MAAM,CAACgC,UAAU,EACtBhC,MAAM,CAACiC,WAAW,EAIhBzB,SAAS,CAAC6B,MAAM,EACbrC,MAAM,CAACmC,WAAW,EACvBnC,MAAM,CAACoC,WAAW,CAO9B;AAGD,OAAO,IAAM6B,sBAAsB,GAAGlE,MAAM,CAACa,GAAG,6OAE5CV,gBAAgB,CAACQ,IAAI,CAACwD,KAAK,CAAC,CAU/B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableTypes.cjs","names":[],"sources":["../../src/Table/TableTypes.ts"],"sourcesContent":["/**\n * Types for the table.\n */\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\n\nexport interface TableProps {\n title?: string; // Will render header row\n\n columns: TableColumn[];\n rows: any[];\n\n border?: boolean;\n accordion?: boolean; // Will render accordion table\n collapsed?: boolean; // whether table should be collapsed or not\n collapsedRows?: number; // Number of rows to show when table is collapsed\n sortProps?: TableSortProps;\n\n remoteOperations?: boolean; // Indicates that pagination should be done remotely\n pagination?: TablePagination; // Required only in case remotePagination is set to true\n onPreviousPageClick?: () => void; // Will fire on previous page click in case remotePagination is set to true\n onNextPageClick?: () => void; // Will fire on next page click in case remotePagination is set to true\n onRowsPerPageChange?: (count: number) => void; // Will fire when rows per page changes in case remotePagination is set to true\n onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void; // Will fire when the sorting direction changes. Used with remote pagination,\n\n showLoadingIndicator?: boolean;\n rowsPerPageLabel? :string; //label that will be shown next to the rows per page selector\n noRowsLabel?: string; //label that will be shown when there are no rows in the grid\n showMoreLabel?: string; //label that will be shown for 'accordion' grid when there are some rows collapsed\n showFewerLabel?: string; //label that will be shown for 'accordion' grid when user can 'collapse' some of the rows\n\n menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;\n\n selectable?: boolean;\n onSelectionChange?: (value: any | any[]) => void;\n multiSelect?: boolean;\n keyExpr?: string;\n selectedRows?: any[];\n loaderZIndex?: string;\n\n layout?: TableLayout;\n}\n\nexport interface TableSortProps {\n column: string;\n direction: TableSortingDirection;\n allowClearingSort?: boolean;\n}\n\nexport interface TableColumn {\n key: string;\n noteKey?: string;\n name: string;\n filterValue?: string;\n\n icon?: React.ReactNode;\n\n width?: string | number;\n colorFn?: (row: any, key: string) => string;\n justify?: TableJustification;\n shortenText?: boolean;\n\n action?: (row: any, event: any) => void;\n type?: TableColumnTypes;\n additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled' | 'tooltip'> | Pick<HyperlinkProps, 'variant'>;\n customContent?: (row: any, key: string) => any;\n
|
|
1
|
+
{"version":3,"file":"TableTypes.cjs","names":[],"sources":["../../src/Table/TableTypes.ts"],"sourcesContent":["/**\n * Types for the table.\n */\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\n\nexport interface TableProps {\n title?: string; // Will render header row\n\n columns: TableColumn[];\n rows: any[];\n\n border?: boolean;\n accordion?: boolean; // Will render accordion table\n collapsed?: boolean; // whether table should be collapsed or not\n collapsedRows?: number; // Number of rows to show when table is collapsed\n sortProps?: TableSortProps;\n\n remoteOperations?: boolean; // Indicates that pagination should be done remotely\n pagination?: TablePagination; // Required only in case remotePagination is set to true\n onPreviousPageClick?: () => void; // Will fire on previous page click in case remotePagination is set to true\n onNextPageClick?: () => void; // Will fire on next page click in case remotePagination is set to true\n onRowsPerPageChange?: (count: number) => void; // Will fire when rows per page changes in case remotePagination is set to true\n onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void; // Will fire when the sorting direction changes. Used with remote pagination,\n\n showLoadingIndicator?: boolean;\n rowsPerPageLabel? :string; //label that will be shown next to the rows per page selector\n noRowsLabel?: string; //label that will be shown when there are no rows in the grid\n showMoreLabel?: string; //label that will be shown for 'accordion' grid when there are some rows collapsed\n showFewerLabel?: string; //label that will be shown for 'accordion' grid when user can 'collapse' some of the rows\n\n menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;\n\n selectable?: boolean;\n onSelectionChange?: (value: any | any[]) => void;\n multiSelect?: boolean;\n keyExpr?: string;\n selectedRows?: any[];\n loaderZIndex?: string;\n\n layout?: TableLayout;\n}\n\nexport interface TableSortProps {\n column: string;\n direction: TableSortingDirection;\n allowClearingSort?: boolean;\n}\n\nexport interface TableColumn {\n key: string;\n noteKey?: string;\n name: string;\n filterValue?: string;\n\n icon?: React.ReactNode;\n\n width?: string | number;\n colorFn?: (row: any, key: string) => string;\n justify?: TableJustification;\n shortenText?: boolean;\n\n action?: (row: any, event: any) => void;\n type?: TableColumnTypes;\n additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled' | 'tooltip'> | Pick<HyperlinkProps, 'variant'>;\n customContent?: (row: any, key: string) => any;\n sortable?: boolean;\n}\n\nexport type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';\n\nexport type TableJustification = 'right' | 'left' | 'center';\n\nexport type TableSortingDirection = 'asc' | 'desc';\n\nexport type TableLayout = 'auto' | 'fixed';\n\nexport interface TablePagination {\n from: number;\n to: number;\n total: number;\n currentPage: number;\n rowsPerPage: number;\n}\n\n// will override component properties in case of button, icon and link\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableTypes.js","names":[],"sources":["../../src/Table/TableTypes.ts"],"sourcesContent":["/**\n * Types for the table.\n */\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\n\nexport interface TableProps {\n title?: string; // Will render header row\n\n columns: TableColumn[];\n rows: any[];\n\n border?: boolean;\n accordion?: boolean; // Will render accordion table\n collapsed?: boolean; // whether table should be collapsed or not\n collapsedRows?: number; // Number of rows to show when table is collapsed\n sortProps?: TableSortProps;\n\n remoteOperations?: boolean; // Indicates that pagination should be done remotely\n pagination?: TablePagination; // Required only in case remotePagination is set to true\n onPreviousPageClick?: () => void; // Will fire on previous page click in case remotePagination is set to true\n onNextPageClick?: () => void; // Will fire on next page click in case remotePagination is set to true\n onRowsPerPageChange?: (count: number) => void; // Will fire when rows per page changes in case remotePagination is set to true\n onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void; // Will fire when the sorting direction changes. Used with remote pagination,\n\n showLoadingIndicator?: boolean;\n rowsPerPageLabel? :string; //label that will be shown next to the rows per page selector\n noRowsLabel?: string; //label that will be shown when there are no rows in the grid\n showMoreLabel?: string; //label that will be shown for 'accordion' grid when there are some rows collapsed\n showFewerLabel?: string; //label that will be shown for 'accordion' grid when user can 'collapse' some of the rows\n\n menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;\n\n selectable?: boolean;\n onSelectionChange?: (value: any | any[]) => void;\n multiSelect?: boolean;\n keyExpr?: string;\n selectedRows?: any[];\n loaderZIndex?: string;\n\n layout?: TableLayout;\n}\n\nexport interface TableSortProps {\n column: string;\n direction: TableSortingDirection;\n allowClearingSort?: boolean;\n}\n\nexport interface TableColumn {\n key: string;\n noteKey?: string;\n name: string;\n filterValue?: string;\n\n icon?: React.ReactNode;\n\n width?: string | number;\n colorFn?: (row: any, key: string) => string;\n justify?: TableJustification;\n shortenText?: boolean;\n\n action?: (row: any, event: any) => void;\n type?: TableColumnTypes;\n additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled' | 'tooltip'> | Pick<HyperlinkProps, 'variant'>;\n customContent?: (row: any, key: string) => any;\n
|
|
1
|
+
{"version":3,"file":"TableTypes.js","names":[],"sources":["../../src/Table/TableTypes.ts"],"sourcesContent":["/**\n * Types for the table.\n */\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\n\nexport interface TableProps {\n title?: string; // Will render header row\n\n columns: TableColumn[];\n rows: any[];\n\n border?: boolean;\n accordion?: boolean; // Will render accordion table\n collapsed?: boolean; // whether table should be collapsed or not\n collapsedRows?: number; // Number of rows to show when table is collapsed\n sortProps?: TableSortProps;\n\n remoteOperations?: boolean; // Indicates that pagination should be done remotely\n pagination?: TablePagination; // Required only in case remotePagination is set to true\n onPreviousPageClick?: () => void; // Will fire on previous page click in case remotePagination is set to true\n onNextPageClick?: () => void; // Will fire on next page click in case remotePagination is set to true\n onRowsPerPageChange?: (count: number) => void; // Will fire when rows per page changes in case remotePagination is set to true\n onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void; // Will fire when the sorting direction changes. Used with remote pagination,\n\n showLoadingIndicator?: boolean;\n rowsPerPageLabel? :string; //label that will be shown next to the rows per page selector\n noRowsLabel?: string; //label that will be shown when there are no rows in the grid\n showMoreLabel?: string; //label that will be shown for 'accordion' grid when there are some rows collapsed\n showFewerLabel?: string; //label that will be shown for 'accordion' grid when user can 'collapse' some of the rows\n\n menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;\n\n selectable?: boolean;\n onSelectionChange?: (value: any | any[]) => void;\n multiSelect?: boolean;\n keyExpr?: string;\n selectedRows?: any[];\n loaderZIndex?: string;\n\n layout?: TableLayout;\n}\n\nexport interface TableSortProps {\n column: string;\n direction: TableSortingDirection;\n allowClearingSort?: boolean;\n}\n\nexport interface TableColumn {\n key: string;\n noteKey?: string;\n name: string;\n filterValue?: string;\n\n icon?: React.ReactNode;\n\n width?: string | number;\n colorFn?: (row: any, key: string) => string;\n justify?: TableJustification;\n shortenText?: boolean;\n\n action?: (row: any, event: any) => void;\n type?: TableColumnTypes;\n additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled' | 'tooltip'> | Pick<HyperlinkProps, 'variant'>;\n customContent?: (row: any, key: string) => any;\n sortable?: boolean;\n}\n\nexport type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';\n\nexport type TableJustification = 'right' | 'left' | 'center';\n\nexport type TableSortingDirection = 'asc' | 'desc';\n\nexport type TableLayout = 'auto' | 'fixed';\n\nexport interface TablePagination {\n from: number;\n to: number;\n total: number;\n currentPage: number;\n rowsPerPage: number;\n}\n\n// will override component properties in case of button, icon and link\n"],"mappings":""}
|