@entur/table 4.5.28 → 4.5.29
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/styles.css +7 -7
- package/dist/table.cjs.development.js +65 -113
- package/dist/table.cjs.development.js.map +1 -1
- package/dist/table.cjs.production.min.js +1 -1
- package/dist/table.cjs.production.min.js.map +1 -1
- package/dist/table.esm.js +65 -113
- package/dist/table.esm.js.map +1 -1
- package/package.json +16 -11
- package/CHANGELOG.md +0 -536
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.cjs.production.min.js","sources":["../src/Table.tsx","../src/TableHead.tsx","../src/TableBody.tsx","../src/TableFooter.tsx","../src/TableRow.tsx","../src/DataCell.tsx","../src/HeaderCell.tsx","../src/useTableKeyboardNavigation.tsx","../src/index.tsx","../src/EditableCell.tsx","../src/ExpandRowButton.tsx","../src/ExpandableRow.tsx","../src/useSortableTable.ts"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableProps = {\n /** Ekstra klassenavn */\n className?: string;\n /** Setter tettheten mellom rader og kolonner. Bruk gjerne middle og small for for sider med høy informasjonstetthet\n * @default \"default\"\n */\n spacing?: 'default' | 'middle' | 'small';\n /** Setter kolonne-layout til å være uavhengig av innhold\n * @default false\n */\n fixed?: boolean;\n /** Innholdet i tabellen */\n children: React.ReactNode;\n [key: string]: any;\n};\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n (\n {\n className,\n fixed = false,\n spacing = 'default',\n sortable = false,\n ...rest\n },\n ref,\n ) => {\n return (\n <table\n className={classNames(\n 'eds-table',\n { 'eds-table--fixed': fixed },\n { 'eds-table--middle': spacing === 'middle' },\n { 'eds-table--small': spacing === 'small' },\n { 'eds-table--sortable': sortable },\n className,\n )}\n ref={ref}\n {...rest}\n />\n );\n },\n);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableHeadProps = {\n /** Kolonneoverskrifter */\n children: React.ReactNode;\n /** Esktra klassenavn */\n className?: string;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableHead = React.forwardRef<\n HTMLTableSectionElement,\n TableHeadProps\n>(({ className, ...props }, ref) => (\n <thead\n className={classNames('eds-table__head', className)}\n ref={ref}\n {...props}\n />\n));\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableBodyProps = {\n /** Tabellrader */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n ref?: React.Ref<HTMLTableSectionElement>;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableBody = React.forwardRef<\n HTMLTableSectionElement,\n TableBodyProps\n>(({ className, ...rest }, ref) => (\n <tbody\n className={classNames('eds-table__body', className)}\n ref={ref}\n {...rest}\n />\n));\n","import React from 'react';\n\nexport type TableFooterProps = {\n /** Tabellrader */\n children: React.ReactNode;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n TableFooterProps\n>(({ ...props }, ref) => <tfoot ref={ref} {...props} />);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableRowProps = {\n /** Tabellceller */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /**Hvis satt, så vil tabellraden endre fargen ved hover\n * @default false\n */\n hover?: boolean;\n /** Om raden er klikkbar, så vil raden endre farge, og musepekeren vil symbolisere interaktivitet\n * @default false\n */\n active?: boolean;\n /**Signalisere om at det er en feil i tabellraden\n * @default false\n */\n error?: boolean;\n ref?: React.Ref<HTMLTableRowElement>;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableRowElement>,\n HTMLTableRowElement\n>;\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n (\n { className, hover = false, active = false, error = false, ...rest },\n ref: React.Ref<HTMLTableRowElement>,\n ) => (\n <tr\n className={classNames('eds-table__row', className, {\n 'eds-table__row--hover': hover,\n 'eds-table__row--active': active,\n 'eds-table__row--error': error,\n })}\n ref={ref}\n {...rest}\n />\n ),\n);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type DataCellProps = {\n /** Innholdet i tabellcellen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelse som settes for DataCell for ulikt innhold av komponenter */\n padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';\n /** Viser en status-sirkel for DataCell */\n status?: 'positive' | 'negative' | 'neutral';\n} & React.DetailedHTMLProps<\n React.TdHTMLAttributes<HTMLTableDataCellElement>,\n HTMLTableDataCellElement\n>;\n\nexport const DataCell = React.forwardRef<\n HTMLTableDataCellElement,\n DataCellProps\n>(\n (\n { className, padding = 'default', status = undefined, ...rest },\n ref: React.Ref<HTMLTableDataCellElement>,\n ) => (\n <td\n ref={ref}\n className={classNames('eds-table__data-cell', className, {\n [`eds-table__data-cell--status-${status}`]: status,\n 'eds-table__data-cell--padding-checkbox': padding === 'checkbox',\n 'eds-table__data-cell--padding-radio': padding === 'radio',\n 'eds-table__data-cell--padding-overflow-menu':\n padding === 'overflow-menu',\n })}\n {...rest}\n />\n ),\n);\n","import React from 'react';\nimport classNames from 'classnames';\n\nimport { DownArrowIcon, UpArrowIcon, UnsortedIcon } from '@entur/icons';\n\nimport { ExternalSortConfig } from '.';\n\nimport './HeaderCell.scss';\n\nexport type HeaderCellProps = {\n /** Kolonneoverskrift */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelse som settes for HeaderCell for ulikt innhold av komponenter */\n padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';\n\n /** Ekstra props som kan sendes til sorteringsknappelementet. Benyttes via useSortableTable */\n sortableButtonProps?: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >;\n\n /** Om komponenten brukes til sortering. Benytt via useSortableTable\n * @default false\n */\n sortable?: boolean;\n /** Konfigurering og rekkefølgen på sortering. Benyttes via useSortableTable */\n sortConfig?: ExternalSortConfig;\n /** Navnet det skal sorteres på. Benyttes via useSortableTable */\n name?: string;\n} & React.DetailedHTMLProps<\n React.ThHTMLAttributes<HTMLTableCellElement>,\n HTMLTableCellElement\n>;\n\nexport const HeaderCell = React.forwardRef<\n HTMLTableCellElement,\n HeaderCellProps\n>(\n (\n {\n className,\n children,\n name,\n sortable = false,\n sortConfig,\n padding = 'default',\n sortableButtonProps,\n ...rest\n },\n ref,\n ) => {\n const [isCurrentlySorted, setIsCurrentlySorted] =\n React.useState<boolean>(false);\n React.useEffect(() => {\n sortConfig &&\n name &&\n setIsCurrentlySorted(sortConfig && name === sortConfig.key);\n }, [sortConfig, name]);\n const ariaSort = isCurrentlySorted\n ? sortConfig && sortConfig.order\n : 'none';\n\n return (\n <th\n className={classNames('eds-table__header-cell', className, {\n 'eds-table__header-cell--sortable': sortable,\n 'eds-table__header-cell--padding-radio': padding === 'radio',\n 'eds-table__header-cell--padding-checkbox': padding === 'checkbox',\n 'eds-table__header-cell--padding-overflow-menu':\n padding === 'overflow-menu',\n })}\n aria-sort={ariaSort}\n ref={ref}\n {...rest}\n >\n {sortable && sortConfig && sortableButtonProps ? (\n <SortableHeaderCellButton\n sortableButtonProps={sortableButtonProps}\n sortConfig={sortConfig}\n isCurrentlySorted={isCurrentlySorted}\n >\n {children}\n </SortableHeaderCellButton>\n ) : (\n children\n )}\n </th>\n );\n },\n);\n\ntype SortableHeaderCellButtonProps = {\n sortConfig: ExternalSortConfig;\n isCurrentlySorted: boolean;\n sortableButtonProps: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >;\n};\n\nconst SortableHeaderCellButton: React.FC<SortableHeaderCellButtonProps> = ({\n sortConfig,\n sortableButtonProps,\n isCurrentlySorted,\n children,\n}) => {\n const { className, ...rest } = sortableButtonProps;\n return (\n <button\n className={classNames('eds-table__header-cell-button', className)}\n type=\"button\"\n {...rest}\n >\n {children}\n {(!isCurrentlySorted || sortConfig.order === 'none') && (\n <UnsortedIcon\n size=\"16px\"\n className=\"eds-table__header-cell-button-icon\"\n aria-label=\"usortert kolonne\"\n />\n )}\n {isCurrentlySorted && sortConfig.order === 'ascending' && (\n <UpArrowIcon\n size=\"16px\"\n className=\"eds-table__header-cell-button-icon\"\n aria-label=\"stigende sortert kolonne\"\n />\n )}\n {isCurrentlySorted && sortConfig.order === 'descending' && (\n <DownArrowIcon\n size=\"16px\"\n className=\"eds-table__header-cell-button-icon\"\n aria-label=\"synkende sortert kolonne\"\n />\n )}\n </button>\n );\n};\n","import React, { useState } from 'react';\nimport { TableBodyProps, TableRowProps } from './index';\n\nfunction onTableKeypress(\n event: React.KeyboardEvent,\n currentRow: number,\n maxRow: number,\n allowWrap?: boolean,\n) {\n const keyPress = event.key;\n switch (keyPress) {\n case 'ArrowUp':\n event.preventDefault();\n if (allowWrap) {\n return currentRow === 0 ? maxRow - 1 : currentRow - 1;\n } else {\n return currentRow > 0 ? currentRow - 1 : 0;\n }\n case 'ArrowDown':\n event.preventDefault();\n if (allowWrap) {\n return currentRow === maxRow - 1 ? 0 : currentRow + 1;\n } else {\n return currentRow < maxRow - 1 ? currentRow + 1 : currentRow;\n }\n default:\n return currentRow;\n }\n}\n\nexport type useTableKeyboardNavigationProps = (\n /** Antall rader i tabellen */\n numberOfRows: number,\n /** Tillate at man kan navigere sirkulært\n * @default false\n */\n allowWrap?: boolean,\n) => {\n getTableRowNavigationProps: (\n /** Raden i tabellen (0-indeksert) */\n row: number,\n ) => Partial<TableRowProps>;\n getTableBodyNavigationProps: () => Partial<TableBodyProps>;\n};\n\nexport const useTableKeyboardNavigation: useTableKeyboardNavigationProps = (\n numberOfRows = 0,\n allowWrap = true,\n) => {\n const [currentRow, setCurrentRow] = useState(numberOfRows);\n const [maxRow, setMaxRow] = useState(0);\n\n const tableBodyRef = React.useRef<HTMLTableSectionElement>(null);\n const tableHasFocus = tableBodyRef?.current?.contains(document.activeElement);\n\n React.useEffect(() => {\n tableBodyRef &&\n tableBodyRef.current &&\n tableHasFocus &&\n tableBodyRef.current.childNodes[\n currentRow\n ].childNodes[0].parentElement?.focus();\n }, [currentRow, tableHasFocus]);\n\n function getTableBodyNavigationProps(...rest: any): Partial<TableBodyProps> {\n return {\n ref: tableBodyRef,\n ...rest,\n };\n }\n\n const tableRowRef = React.useRef<HTMLTableRowElement>(null);\n function getTableRowNavigationProps(\n row: number,\n ...rest: any\n ): Partial<TableRowProps> {\n if (row >= maxRow) {\n setMaxRow(row + 1);\n }\n const tabIndex = currentRow ? 0 : -1;\n return {\n tabIndex,\n ref: tableRowRef,\n onClick: () => setCurrentRow(row),\n onKeyDown: (e: React.KeyboardEvent) => {\n const newCell = onTableKeypress(e, currentRow, numberOfRows, allowWrap);\n setCurrentRow(newCell);\n },\n ...rest,\n };\n }\n return { getTableRowNavigationProps, getTableBodyNavigationProps };\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('table');\n\nexport * from './Table';\nexport * from './TableHead';\nexport * from './TableBody';\nexport * from './TableFooter';\nexport * from './TableRow';\nexport * from './DataCell';\nexport * from './HeaderCell';\nexport * from './useSortableTable';\nexport * from './EditableCell';\nexport * from './ExpandableRow';\nexport * from './ExpandRowButton';\nexport * from './useTableKeyboardNavigation';\n","import classNames from 'classnames';\nimport React from 'react';\nimport { DataCell } from './DataCell';\nimport { VariantProvider, VariantType } from '@entur/form';\nimport { Tooltip } from '@entur/tooltip';\nimport './EditableCell.scss';\n\ntype EditableCellProps = {\n /** Ekstra klassenavn */\n className?: string;\n /** Inputelementet som skal være i tabellcellen */\n children: React.ReactElement;\n /** Valideringsvariant for EditableCell */\n variant?: VariantType;\n /** Varselmelding, som vil komme som en Tooltip under EditableCell */\n feedback?: string;\n /** Om cellen skal vise omriss til enhver tid\n * @default false\n */\n outlined?: boolean;\n [key: string]: any;\n};\n\nexport const EditableCell: React.FC<EditableCellProps> = ({\n children,\n className,\n feedback,\n variant,\n outlined = false,\n ...rest\n}) => {\n return (\n <VariantProvider variant={variant}>\n <DataCell\n className={classNames(\n 'eds-editable-cell',\n {\n 'eds-editable-cell--outlined': outlined,\n },\n className,\n )}\n {...rest}\n >\n <Tooltip\n disableHoverListener={!feedback}\n disableFocusListener={!feedback}\n placement=\"bottom\"\n content={feedback || undefined}\n variant={feedback ? 'error' : undefined}\n >\n {children}\n </Tooltip>\n </DataCell>\n </VariantProvider>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DownArrowIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport './ExpandRowButton.scss';\n\nexport type ExpandRowButtonProps = {\n open: boolean;\n onClick: (e: React.MouseEvent) => void;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const ExpandRowButton: React.FC<ExpandRowButtonProps> = ({\n open,\n onClick,\n ...rest\n}) => {\n return (\n <IconButton\n className={classNames('eds-expand-row-button', {\n 'eds-expand-row-button--open': open,\n })}\n onClick={onClick}\n aria-label={open ? 'Lukk tabellrad' : 'Utvid tabellrad'}\n {...rest}\n >\n <DownArrowIcon className=\"eds-expand-row-button__icon\" />\n </IconButton>\n );\n};\n","import React from 'react';\nimport { BaseExpand } from '@entur/expand';\n\nexport type ExpandableRowProps = {\n /** Antall kolonner tabellraden er */\n colSpan: number;\n /** Innholdet til ExpandableRow */\n children: React.ReactNode;\n /** Om ExpandableRow er åpen\n * @default false\n */\n open?: boolean;\n};\n\nexport const ExpandableRow: React.FC<ExpandableRowProps> = ({\n open = false,\n children,\n colSpan,\n}) => {\n return (\n <tr>\n <td colSpan={colSpan}>\n <BaseExpand open={open}>{children}</BaseExpand>\n </td>\n </tr>\n );\n};\n","import React from 'react';\nimport get from 'lodash.get';\n\nexport type ExternalSortConfig = {\n /**\n * @default \"\"\n */\n key: string;\n /** @default \"none\" */\n order: 'ascending' | 'descending' | 'none';\n};\n\nexport function useSortableData<T>(\n rawData: T[],\n externalSortConfig: ExternalSortConfig = { key: '', order: 'none' },\n): {\n sortedData: T[];\n getSortableHeaderProps: (\n args: SortableHeaderProps,\n ) => SortableHeaderReturnProps;\n getSortableTableProps: (args: SortableTableProps) => SortableTableReturnProps;\n} {\n const [sortConfig, setSortConfig] = React.useState(externalSortConfig);\n const tableCopy = rawData.slice();\n\n React.useEffect(() => {\n setSortConfig({\n key: externalSortConfig.key,\n order: externalSortConfig.order,\n });\n }, [externalSortConfig.key, externalSortConfig.order]);\n\n const sortedData: T[] = React.useMemo(() => {\n if (sortConfig.order === 'none') {\n return tableCopy;\n }\n return [...rawData].sort((a: any, b: any) => {\n if (get(a, sortConfig.key) < get(b, sortConfig.key)) {\n return sortConfig.order === 'ascending' ? -1 : 1;\n } else if (get(a, sortConfig.key) > get(b, sortConfig.key)) {\n return sortConfig.order === 'ascending' ? 1 : -1;\n } else {\n return 0;\n }\n });\n }, [rawData, tableCopy, sortConfig]);\n\n const onSortRequested = (key: string) => {\n let order: 'ascending' | 'descending' | 'none' = 'ascending';\n if (sortConfig.key === key && sortConfig.order === 'ascending') {\n order = 'descending';\n } else if (sortConfig.key === key && sortConfig.order === 'descending') {\n order = 'none';\n }\n\n setSortConfig({ key, order });\n };\n\n function getSortableHeaderProps({\n name,\n sortable = true,\n buttonProps,\n ...props\n }: SortableHeaderProps): SortableHeaderReturnProps {\n return {\n name,\n sortable,\n sortConfig: sortConfig,\n sortableButtonProps: {\n onClick: () => onSortRequested(name),\n ...buttonProps,\n },\n ...props,\n };\n }\n\n function getSortableTableProps({\n sortable = true,\n ...props\n }: SortableTableProps): SortableTableReturnProps {\n return {\n sortable,\n sortConfig: sortConfig,\n ...props,\n };\n }\n\n return { sortedData, getSortableHeaderProps, getSortableTableProps };\n}\n\nexport type SortableHeaderProps = {\n /** Navnet headeren skal se etter i forhold til sortering av items */\n name: string;\n /** Om headeren skal være sorterbar eller ikke\n * @default true */\n sortable?: boolean;\n /** Props som sendes til knapp-elementet */\n buttonProps?: Omit<\n React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >,\n 'type' | 'onClick'\n >;\n [key: string]: any;\n};\n\nexport type SortableHeaderReturnProps = {\n name: string;\n sortable: boolean;\n sortConfig: ExternalSortConfig;\n [key: string]: any;\n};\n\nexport type SortableTableProps = {\n /** @default true */\n sortable?: boolean;\n [key: string]: any;\n};\n\nexport type SortableTableReturnProps = {\n /** @default true */\n sortable?: boolean;\n sortConfig: ExternalSortConfig;\n [key: string]: any;\n};\n"],"names":["Table","React","forwardRef","ref","className","fixed","spacing","sortable","rest","classNames","TableHead","props","TableBody","TableFooter","TableRow","hover","active","error","DataCell","padding","status","undefined","HeaderCell","children","name","sortConfig","sortableButtonProps","useState","isCurrentlySorted","setIsCurrentlySorted","useEffect","key","ariaSort","order","SortableHeaderCellButton","type","UnsortedIcon","size","UpArrowIcon","DownArrowIcon","onTableKeypress","event","currentRow","maxRow","allowWrap","preventDefault","warnAboutMissingStyles","feedback","variant","outlined","VariantProvider","Tooltip","disableHoverListener","disableFocusListener","placement","content","open","onClick","IconButton","colSpan","BaseExpand","rawData","externalSortConfig","setSortConfig","tableCopy","slice","sortedData","useMemo","sort","a","b","get","getSortableHeaderProps","buttonProps","getSortableTableProps","numberOfRows","setCurrentRow","setMaxRow","tableBodyRef","useRef","tableHasFocus","current","_tableBodyRef$current","contains","document","activeElement","childNodes","parentElement","_tableBodyRef$current2","focus","tableRowRef","getTableRowNavigationProps","row","tabIndex","onKeyDown","e","newCell","getTableBodyNavigationProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"table.cjs.production.min.js","sources":["../src/Table.tsx","../src/TableHead.tsx","../src/TableBody.tsx","../src/TableFooter.tsx","../src/TableRow.tsx","../src/DataCell.tsx","../src/HeaderCell.tsx","../src/useTableKeyboardNavigation.tsx","../src/index.tsx","../src/EditableCell.tsx","../src/ExpandRowButton.tsx","../src/ExpandableRow.tsx","../src/useSortableTable.ts"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableProps = {\n /** Ekstra klassenavn */\n className?: string;\n /** Setter tettheten mellom rader og kolonner. Bruk gjerne middle og small for for sider med høy informasjonstetthet\n * @default \"default\"\n */\n spacing?: 'default' | 'middle' | 'small';\n /** Setter kolonne-layout til å være uavhengig av innhold\n * @default false\n */\n fixed?: boolean;\n /** Innholdet i tabellen */\n children: React.ReactNode;\n [key: string]: any;\n};\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n (\n {\n className,\n fixed = false,\n spacing = 'default',\n sortable = false,\n ...rest\n },\n ref,\n ) => {\n return (\n <table\n className={classNames(\n 'eds-table',\n { 'eds-table--fixed': fixed },\n { 'eds-table--middle': spacing === 'middle' },\n { 'eds-table--small': spacing === 'small' },\n { 'eds-table--sortable': sortable },\n className,\n )}\n ref={ref}\n {...rest}\n />\n );\n },\n);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableHeadProps = {\n /** Kolonneoverskrifter */\n children: React.ReactNode;\n /** Esktra klassenavn */\n className?: string;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableHead = React.forwardRef<\n HTMLTableSectionElement,\n TableHeadProps\n>(({ className, ...props }, ref) => (\n <thead\n className={classNames('eds-table__head', className)}\n ref={ref}\n {...props}\n />\n));\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableBodyProps = {\n /** Tabellrader */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n ref?: React.Ref<HTMLTableSectionElement>;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableBody = React.forwardRef<\n HTMLTableSectionElement,\n TableBodyProps\n>(({ className, ...rest }, ref) => (\n <tbody\n className={classNames('eds-table__body', className)}\n ref={ref}\n {...rest}\n />\n));\n","import React from 'react';\n\nexport type TableFooterProps = {\n /** Tabellrader */\n children: React.ReactNode;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableSectionElement>,\n HTMLTableSectionElement\n>;\n\nexport const TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n TableFooterProps\n>(({ ...props }, ref) => <tfoot ref={ref} {...props} />);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type TableRowProps = {\n /** Tabellceller */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /**Hvis satt, så vil tabellraden endre fargen ved hover\n * @default false\n */\n hover?: boolean;\n /** Om raden er klikkbar, så vil raden endre farge, og musepekeren vil symbolisere interaktivitet\n * @default false\n */\n active?: boolean;\n /**Signalisere om at det er en feil i tabellraden\n * @default false\n */\n error?: boolean;\n ref?: React.Ref<HTMLTableRowElement>;\n} & React.DetailedHTMLProps<\n React.HTMLAttributes<HTMLTableRowElement>,\n HTMLTableRowElement\n>;\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n (\n { className, hover = false, active = false, error = false, ...rest },\n ref: React.Ref<HTMLTableRowElement>,\n ) => (\n <tr\n className={classNames('eds-table__row', className, {\n 'eds-table__row--hover': hover,\n 'eds-table__row--active': active,\n 'eds-table__row--error': error,\n })}\n ref={ref}\n {...rest}\n />\n ),\n);\n","import React from 'react';\nimport classNames from 'classnames';\n\nexport type DataCellProps = {\n /** Innholdet i tabellcellen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelse som settes for DataCell for ulikt innhold av komponenter */\n padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';\n /** Viser en status-sirkel for DataCell */\n status?: 'positive' | 'negative' | 'neutral';\n} & React.DetailedHTMLProps<\n React.TdHTMLAttributes<HTMLTableDataCellElement>,\n HTMLTableDataCellElement\n>;\n\nexport const DataCell = React.forwardRef<\n HTMLTableDataCellElement,\n DataCellProps\n>(\n (\n { className, padding = 'default', status = undefined, ...rest },\n ref: React.Ref<HTMLTableDataCellElement>,\n ) => (\n <td\n ref={ref}\n className={classNames('eds-table__data-cell', className, {\n [`eds-table__data-cell--status-${status}`]: status,\n 'eds-table__data-cell--padding-checkbox': padding === 'checkbox',\n 'eds-table__data-cell--padding-radio': padding === 'radio',\n 'eds-table__data-cell--padding-overflow-menu':\n padding === 'overflow-menu',\n })}\n {...rest}\n />\n ),\n);\n","import React from 'react';\nimport classNames from 'classnames';\n\nimport { DownArrowIcon, UpArrowIcon, UnsortedIcon } from '@entur/icons';\n\nimport { ExternalSortConfig } from '.';\n\nimport './HeaderCell.scss';\n\nexport type HeaderCellProps = {\n /** Kolonneoverskrift */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelse som settes for HeaderCell for ulikt innhold av komponenter */\n padding?: 'default' | 'checkbox' | 'radio' | 'overflow-menu';\n\n /** Ekstra props som kan sendes til sorteringsknappelementet. Benyttes via useSortableTable */\n sortableButtonProps?: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >;\n\n /** Om komponenten brukes til sortering. Benytt via useSortableTable\n * @default false\n */\n sortable?: boolean;\n /** Konfigurering og rekkefølgen på sortering. Benyttes via useSortableTable */\n sortConfig?: ExternalSortConfig;\n /** Navnet det skal sorteres på. Benyttes via useSortableTable */\n name?: string;\n} & React.DetailedHTMLProps<\n React.ThHTMLAttributes<HTMLTableCellElement>,\n HTMLTableCellElement\n>;\n\nexport const HeaderCell = React.forwardRef<\n HTMLTableCellElement,\n HeaderCellProps\n>(\n (\n {\n className,\n children,\n name,\n sortable = false,\n sortConfig,\n padding = 'default',\n sortableButtonProps,\n ...rest\n },\n ref,\n ) => {\n const [isCurrentlySorted, setIsCurrentlySorted] =\n React.useState<boolean>(false);\n React.useEffect(() => {\n sortConfig &&\n name &&\n setIsCurrentlySorted(sortConfig && name === sortConfig.key);\n }, [sortConfig, name]);\n const ariaSort = isCurrentlySorted\n ? sortConfig && sortConfig.order\n : 'none';\n\n return (\n <th\n className={classNames('eds-table__header-cell', className, {\n 'eds-table__header-cell--sortable': sortable,\n 'eds-table__header-cell--padding-radio': padding === 'radio',\n 'eds-table__header-cell--padding-checkbox': padding === 'checkbox',\n 'eds-table__header-cell--padding-overflow-menu':\n padding === 'overflow-menu',\n })}\n aria-sort={ariaSort}\n ref={ref}\n {...rest}\n >\n {sortable && sortConfig && sortableButtonProps ? (\n <SortableHeaderCellButton\n sortableButtonProps={sortableButtonProps}\n sortConfig={sortConfig}\n isCurrentlySorted={isCurrentlySorted}\n >\n {children}\n </SortableHeaderCellButton>\n ) : (\n children\n )}\n </th>\n );\n },\n);\n\ntype SortableHeaderCellButtonProps = {\n sortConfig: ExternalSortConfig;\n isCurrentlySorted: boolean;\n sortableButtonProps: React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >;\n};\n\nconst SortableHeaderCellButton: React.FC<SortableHeaderCellButtonProps> = ({\n sortConfig,\n sortableButtonProps,\n isCurrentlySorted,\n children,\n}) => {\n const { className, ...rest } = sortableButtonProps;\n return (\n <button\n className={classNames('eds-table__header-cell-button', className)}\n type=\"button\"\n {...rest}\n >\n {children}\n {(!isCurrentlySorted || sortConfig.order === 'none') && (\n <UnsortedIcon\n size=\"16px\"\n className=\"eds-table__header-cell-button-icon\"\n aria-label=\"usortert kolonne\"\n />\n )}\n {isCurrentlySorted && sortConfig.order === 'ascending' && (\n <UpArrowIcon\n size=\"16px\"\n className=\"eds-table__header-cell-button-icon\"\n aria-label=\"stigende sortert kolonne\"\n />\n )}\n {isCurrentlySorted && sortConfig.order === 'descending' && (\n <DownArrowIcon\n size=\"16px\"\n className=\"eds-table__header-cell-button-icon\"\n aria-label=\"synkende sortert kolonne\"\n />\n )}\n </button>\n );\n};\n","import React, { useState } from 'react';\nimport { TableBodyProps, TableRowProps } from './index';\n\nfunction onTableKeypress(\n event: React.KeyboardEvent,\n currentRow: number,\n maxRow: number,\n allowWrap?: boolean,\n) {\n const keyPress = event.key;\n switch (keyPress) {\n case 'ArrowUp':\n event.preventDefault();\n if (allowWrap) {\n return currentRow === 0 ? maxRow - 1 : currentRow - 1;\n } else {\n return currentRow > 0 ? currentRow - 1 : 0;\n }\n case 'ArrowDown':\n event.preventDefault();\n if (allowWrap) {\n return currentRow === maxRow - 1 ? 0 : currentRow + 1;\n } else {\n return currentRow < maxRow - 1 ? currentRow + 1 : currentRow;\n }\n default:\n return currentRow;\n }\n}\n\nexport type useTableKeyboardNavigationProps = (\n /** Antall rader i tabellen */\n numberOfRows: number,\n /** Tillate at man kan navigere sirkulært\n * @default false\n */\n allowWrap?: boolean,\n) => {\n getTableRowNavigationProps: (\n /** Raden i tabellen (0-indeksert) */\n row: number,\n ) => Partial<TableRowProps>;\n getTableBodyNavigationProps: () => Partial<TableBodyProps>;\n};\n\nexport const useTableKeyboardNavigation: useTableKeyboardNavigationProps = (\n numberOfRows = 0,\n allowWrap = true,\n) => {\n const [currentRow, setCurrentRow] = useState(numberOfRows);\n const [maxRow, setMaxRow] = useState(0);\n\n const tableBodyRef = React.useRef<HTMLTableSectionElement>(null);\n const tableHasFocus = tableBodyRef?.current?.contains(document.activeElement);\n\n React.useEffect(() => {\n tableBodyRef &&\n tableBodyRef.current &&\n tableHasFocus &&\n tableBodyRef.current.childNodes[\n currentRow\n ].childNodes[0].parentElement?.focus();\n }, [currentRow, tableHasFocus]);\n\n function getTableBodyNavigationProps(...rest: any): Partial<TableBodyProps> {\n return {\n ref: tableBodyRef,\n ...rest,\n };\n }\n\n const tableRowRef = React.useRef<HTMLTableRowElement>(null);\n function getTableRowNavigationProps(\n row: number,\n ...rest: any\n ): Partial<TableRowProps> {\n if (row >= maxRow) {\n setMaxRow(row + 1);\n }\n const tabIndex = currentRow ? 0 : -1;\n return {\n tabIndex,\n ref: tableRowRef,\n onClick: () => setCurrentRow(row),\n onKeyDown: (e: React.KeyboardEvent) => {\n const newCell = onTableKeypress(e, currentRow, numberOfRows, allowWrap);\n setCurrentRow(newCell);\n },\n ...rest,\n };\n }\n return { getTableRowNavigationProps, getTableBodyNavigationProps };\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('table');\n\nexport * from './Table';\nexport * from './TableHead';\nexport * from './TableBody';\nexport * from './TableFooter';\nexport * from './TableRow';\nexport * from './DataCell';\nexport * from './HeaderCell';\nexport * from './useSortableTable';\nexport * from './EditableCell';\nexport * from './ExpandableRow';\nexport * from './ExpandRowButton';\nexport * from './useTableKeyboardNavigation';\n","import classNames from 'classnames';\nimport React from 'react';\nimport { DataCell } from './DataCell';\nimport { VariantProvider, VariantType } from '@entur/form';\nimport { Tooltip } from '@entur/tooltip';\nimport './EditableCell.scss';\n\ntype EditableCellProps = {\n /** Ekstra klassenavn */\n className?: string;\n /** Inputelementet som skal være i tabellcellen */\n children: React.ReactElement;\n /** Valideringsvariant for EditableCell */\n variant?: VariantType;\n /** Varselmelding, som vil komme som en Tooltip under EditableCell */\n feedback?: string;\n /** Om cellen skal vise omriss til enhver tid\n * @default false\n */\n outlined?: boolean;\n [key: string]: any;\n};\n\nexport const EditableCell: React.FC<EditableCellProps> = ({\n children,\n className,\n feedback,\n variant,\n outlined = false,\n ...rest\n}) => {\n return (\n <VariantProvider variant={variant}>\n <DataCell\n className={classNames(\n 'eds-editable-cell',\n {\n 'eds-editable-cell--outlined': outlined,\n },\n className,\n )}\n {...rest}\n >\n <Tooltip\n disableHoverListener={!feedback}\n disableFocusListener={!feedback}\n placement=\"bottom\"\n content={feedback || undefined}\n variant={feedback ? 'error' : undefined}\n >\n {children}\n </Tooltip>\n </DataCell>\n </VariantProvider>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DownArrowIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport './ExpandRowButton.scss';\n\nexport type ExpandRowButtonProps = {\n open: boolean;\n onClick: (e: React.MouseEvent) => void;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const ExpandRowButton: React.FC<ExpandRowButtonProps> = ({\n open,\n onClick,\n ...rest\n}) => {\n return (\n <IconButton\n className={classNames('eds-expand-row-button', {\n 'eds-expand-row-button--open': open,\n })}\n onClick={onClick}\n aria-label={open ? 'Lukk tabellrad' : 'Utvid tabellrad'}\n {...rest}\n >\n <DownArrowIcon className=\"eds-expand-row-button__icon\" />\n </IconButton>\n );\n};\n","import React from 'react';\nimport { BaseExpand } from '@entur/expand';\n\nexport type ExpandableRowProps = {\n /** Antall kolonner tabellraden er */\n colSpan: number;\n /** Innholdet til ExpandableRow */\n children: React.ReactNode;\n /** Om ExpandableRow er åpen\n * @default false\n */\n open?: boolean;\n};\n\nexport const ExpandableRow: React.FC<ExpandableRowProps> = ({\n open = false,\n children,\n colSpan,\n}) => {\n return (\n <tr>\n <td colSpan={colSpan}>\n <BaseExpand open={open}>{children}</BaseExpand>\n </td>\n </tr>\n );\n};\n","import React from 'react';\nimport get from 'lodash.get';\n\nexport type ExternalSortConfig = {\n /**\n * @default \"\"\n */\n key: string;\n /** @default \"none\" */\n order: 'ascending' | 'descending' | 'none';\n};\n\nexport function useSortableData<T>(\n rawData: T[],\n externalSortConfig: ExternalSortConfig = { key: '', order: 'none' },\n): {\n sortedData: T[];\n getSortableHeaderProps: (\n args: SortableHeaderProps,\n ) => SortableHeaderReturnProps;\n getSortableTableProps: (args: SortableTableProps) => SortableTableReturnProps;\n} {\n const [sortConfig, setSortConfig] = React.useState(externalSortConfig);\n const tableCopy = rawData.slice();\n\n React.useEffect(() => {\n setSortConfig({\n key: externalSortConfig.key,\n order: externalSortConfig.order,\n });\n }, [externalSortConfig.key, externalSortConfig.order]);\n\n const sortedData: T[] = React.useMemo(() => {\n if (sortConfig.order === 'none') {\n return tableCopy;\n }\n return [...rawData].sort((a: any, b: any) => {\n if (get(a, sortConfig.key) < get(b, sortConfig.key)) {\n return sortConfig.order === 'ascending' ? -1 : 1;\n } else if (get(a, sortConfig.key) > get(b, sortConfig.key)) {\n return sortConfig.order === 'ascending' ? 1 : -1;\n } else {\n return 0;\n }\n });\n }, [rawData, tableCopy, sortConfig]);\n\n const onSortRequested = (key: string) => {\n let order: 'ascending' | 'descending' | 'none' = 'ascending';\n if (sortConfig.key === key && sortConfig.order === 'ascending') {\n order = 'descending';\n } else if (sortConfig.key === key && sortConfig.order === 'descending') {\n order = 'none';\n }\n\n setSortConfig({ key, order });\n };\n\n function getSortableHeaderProps({\n name,\n sortable = true,\n buttonProps,\n ...props\n }: SortableHeaderProps): SortableHeaderReturnProps {\n return {\n name,\n sortable,\n sortConfig: sortConfig,\n sortableButtonProps: {\n onClick: () => onSortRequested(name),\n ...buttonProps,\n },\n ...props,\n };\n }\n\n function getSortableTableProps({\n sortable = true,\n ...props\n }: SortableTableProps): SortableTableReturnProps {\n return {\n sortable,\n sortConfig: sortConfig,\n ...props,\n };\n }\n\n return { sortedData, getSortableHeaderProps, getSortableTableProps };\n}\n\nexport type SortableHeaderProps = {\n /** Navnet headeren skal se etter i forhold til sortering av items */\n name: string;\n /** Om headeren skal være sorterbar eller ikke\n * @default true */\n sortable?: boolean;\n /** Props som sendes til knapp-elementet */\n buttonProps?: Omit<\n React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >,\n 'type' | 'onClick'\n >;\n [key: string]: any;\n};\n\nexport type SortableHeaderReturnProps = {\n name: string;\n sortable: boolean;\n sortConfig: ExternalSortConfig;\n [key: string]: any;\n};\n\nexport type SortableTableProps = {\n /** @default true */\n sortable?: boolean;\n [key: string]: any;\n};\n\nexport type SortableTableReturnProps = {\n /** @default true */\n sortable?: boolean;\n sortConfig: ExternalSortConfig;\n [key: string]: any;\n};\n"],"names":["Table","React","forwardRef","ref","className","_ref$fixed","fixed","_ref$spacing","spacing","_ref$sortable","sortable","rest","classNames","TableHead","props","TableBody","TableFooter","TableRow","_ref$hover","hover","_ref$active","active","_ref$error","error","DataCell","_ref$padding","padding","_ref$status","status","undefined","HeaderCell","children","name","sortConfig","sortableButtonProps","useState","isCurrentlySorted","setIsCurrentlySorted","useEffect","key","ariaSort","order","SortableHeaderCellButton","type","UnsortedIcon","size","UpArrowIcon","DownArrowIcon","onTableKeypress","event","currentRow","maxRow","allowWrap","preventDefault","warnAboutMissingStyles","feedback","variant","_ref$outlined","outlined","VariantProvider","Tooltip","disableHoverListener","disableFocusListener","placement","content","open","onClick","IconButton","colSpan","BaseExpand","rawData","externalSortConfig","setSortConfig","tableCopy","slice","sortedData","useMemo","sort","a","b","get","getSortableHeaderProps","buttonProps","getSortableTableProps","numberOfRows","setCurrentRow","setMaxRow","tableBodyRef","useRef","tableHasFocus","current","_tableBodyRef$current","contains","document","activeElement","childNodes","parentElement","_tableBodyRef$current2","focus","tableRowRef","getTableRowNavigationProps","row","tabIndex","onKeyDown","e","newCell","getTableBodyNavigationProps"],"mappings":"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"}
|
package/dist/table.esm.js
CHANGED
|
@@ -12,46 +12,42 @@ function _extends() {
|
|
|
12
12
|
_extends = Object.assign || function (target) {
|
|
13
13
|
for (var i = 1; i < arguments.length; i++) {
|
|
14
14
|
var source = arguments[i];
|
|
15
|
-
|
|
16
15
|
for (var key in source) {
|
|
17
16
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
18
17
|
target[key] = source[key];
|
|
19
18
|
}
|
|
20
19
|
}
|
|
21
20
|
}
|
|
22
|
-
|
|
23
21
|
return target;
|
|
24
22
|
};
|
|
25
|
-
|
|
26
23
|
return _extends.apply(this, arguments);
|
|
27
24
|
}
|
|
28
|
-
|
|
25
|
+
function _objectDestructuringEmpty(obj) {
|
|
26
|
+
if (obj == null) throw new TypeError("Cannot destructure undefined");
|
|
27
|
+
}
|
|
29
28
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
30
29
|
if (source == null) return {};
|
|
31
30
|
var target = {};
|
|
32
31
|
var sourceKeys = Object.keys(source);
|
|
33
32
|
var key, i;
|
|
34
|
-
|
|
35
33
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
36
34
|
key = sourceKeys[i];
|
|
37
35
|
if (excluded.indexOf(key) >= 0) continue;
|
|
38
36
|
target[key] = source[key];
|
|
39
37
|
}
|
|
40
|
-
|
|
41
38
|
return target;
|
|
42
39
|
}
|
|
43
40
|
|
|
44
41
|
var _excluded$8 = ["className", "fixed", "spacing", "sortable"];
|
|
45
42
|
var Table = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
46
43
|
var className = _ref.className,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
44
|
+
_ref$fixed = _ref.fixed,
|
|
45
|
+
fixed = _ref$fixed === void 0 ? false : _ref$fixed,
|
|
46
|
+
_ref$spacing = _ref.spacing,
|
|
47
|
+
spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
|
|
48
|
+
_ref$sortable = _ref.sortable,
|
|
49
|
+
sortable = _ref$sortable === void 0 ? false : _ref$sortable,
|
|
50
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
|
55
51
|
return React.createElement("table", _extends({
|
|
56
52
|
className: classNames('eds-table', {
|
|
57
53
|
'eds-table--fixed': fixed
|
|
@@ -69,8 +65,7 @@ var Table = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
69
65
|
var _excluded$7 = ["className"];
|
|
70
66
|
var TableHead = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
71
67
|
var className = _ref.className,
|
|
72
|
-
|
|
73
|
-
|
|
68
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
74
69
|
return React.createElement("thead", _extends({
|
|
75
70
|
className: classNames('eds-table__head', className),
|
|
76
71
|
ref: ref
|
|
@@ -80,8 +75,7 @@ var TableHead = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
80
75
|
var _excluded$6 = ["className"];
|
|
81
76
|
var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
82
77
|
var className = _ref.className,
|
|
83
|
-
|
|
84
|
-
|
|
78
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
85
79
|
return React.createElement("tbody", _extends({
|
|
86
80
|
className: classNames('eds-table__body', className),
|
|
87
81
|
ref: ref
|
|
@@ -89,8 +83,7 @@ var TableBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
89
83
|
});
|
|
90
84
|
|
|
91
85
|
var TableFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
92
|
-
var props = _extends({}, _ref);
|
|
93
|
-
|
|
86
|
+
var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
94
87
|
return React.createElement("tfoot", _extends({
|
|
95
88
|
ref: ref
|
|
96
89
|
}, props));
|
|
@@ -99,14 +92,13 @@ var TableFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
99
92
|
var _excluded$5 = ["className", "hover", "active", "error"];
|
|
100
93
|
var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
101
94
|
var className = _ref.className,
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
95
|
+
_ref$hover = _ref.hover,
|
|
96
|
+
hover = _ref$hover === void 0 ? false : _ref$hover,
|
|
97
|
+
_ref$active = _ref.active,
|
|
98
|
+
active = _ref$active === void 0 ? false : _ref$active,
|
|
99
|
+
_ref$error = _ref.error,
|
|
100
|
+
error = _ref$error === void 0 ? false : _ref$error,
|
|
101
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
110
102
|
return React.createElement("tr", _extends({
|
|
111
103
|
className: classNames('eds-table__row', className, {
|
|
112
104
|
'eds-table__row--hover': hover,
|
|
@@ -120,14 +112,12 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
120
112
|
var _excluded$4 = ["className", "padding", "status"];
|
|
121
113
|
var DataCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
122
114
|
var _classNames;
|
|
123
|
-
|
|
124
115
|
var className = _ref.className,
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
116
|
+
_ref$padding = _ref.padding,
|
|
117
|
+
padding = _ref$padding === void 0 ? 'default' : _ref$padding,
|
|
118
|
+
_ref$status = _ref.status,
|
|
119
|
+
status = _ref$status === void 0 ? undefined : _ref$status,
|
|
120
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
131
121
|
return React.createElement("td", _extends({
|
|
132
122
|
ref: ref,
|
|
133
123
|
className: classNames('eds-table__data-cell', className, (_classNames = {}, _classNames["eds-table__data-cell--status-" + status] = status, _classNames['eds-table__data-cell--padding-checkbox'] = padding === 'checkbox', _classNames['eds-table__data-cell--padding-radio'] = padding === 'radio', _classNames['eds-table__data-cell--padding-overflow-menu'] = padding === 'overflow-menu', _classNames))
|
|
@@ -135,23 +125,21 @@ var DataCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
135
125
|
});
|
|
136
126
|
|
|
137
127
|
var _excluded$3 = ["className", "children", "name", "sortable", "sortConfig", "padding", "sortableButtonProps"],
|
|
138
|
-
|
|
128
|
+
_excluded2$1 = ["className"];
|
|
139
129
|
var HeaderCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
140
130
|
var className = _ref.className,
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
131
|
+
children = _ref.children,
|
|
132
|
+
name = _ref.name,
|
|
133
|
+
_ref$sortable = _ref.sortable,
|
|
134
|
+
sortable = _ref$sortable === void 0 ? false : _ref$sortable,
|
|
135
|
+
sortConfig = _ref.sortConfig,
|
|
136
|
+
_ref$padding = _ref.padding,
|
|
137
|
+
padding = _ref$padding === void 0 ? 'default' : _ref$padding,
|
|
138
|
+
sortableButtonProps = _ref.sortableButtonProps,
|
|
139
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
151
140
|
var _React$useState = React.useState(false),
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
141
|
+
isCurrentlySorted = _React$useState[0],
|
|
142
|
+
setIsCurrentlySorted = _React$useState[1];
|
|
155
143
|
React.useEffect(function () {
|
|
156
144
|
sortConfig && name && setIsCurrentlySorted(sortConfig && name === sortConfig.key);
|
|
157
145
|
}, [sortConfig, name]);
|
|
@@ -171,16 +159,13 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
171
159
|
isCurrentlySorted: isCurrentlySorted
|
|
172
160
|
}, children) : children);
|
|
173
161
|
});
|
|
174
|
-
|
|
175
162
|
var SortableHeaderCellButton = function SortableHeaderCellButton(_ref2) {
|
|
176
163
|
var sortConfig = _ref2.sortConfig,
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
164
|
+
sortableButtonProps = _ref2.sortableButtonProps,
|
|
165
|
+
isCurrentlySorted = _ref2.isCurrentlySorted,
|
|
166
|
+
children = _ref2.children;
|
|
181
167
|
var className = sortableButtonProps.className,
|
|
182
|
-
|
|
183
|
-
|
|
168
|
+
rest = _objectWithoutPropertiesLoose(sortableButtonProps, _excluded2$1);
|
|
184
169
|
return React.createElement("button", _extends({
|
|
185
170
|
className: classNames('eds-table__header-cell-button', className),
|
|
186
171
|
type: "button"
|
|
@@ -200,7 +185,7 @@ var SortableHeaderCellButton = function SortableHeaderCellButton(_ref2) {
|
|
|
200
185
|
};
|
|
201
186
|
|
|
202
187
|
var _excluded$2 = ["name", "sortable", "buttonProps"],
|
|
203
|
-
|
|
188
|
+
_excluded2 = ["sortable"];
|
|
204
189
|
function useSortableData(rawData, externalSortConfig) {
|
|
205
190
|
if (externalSortConfig === void 0) {
|
|
206
191
|
externalSortConfig = {
|
|
@@ -208,11 +193,9 @@ function useSortableData(rawData, externalSortConfig) {
|
|
|
208
193
|
order: 'none'
|
|
209
194
|
};
|
|
210
195
|
}
|
|
211
|
-
|
|
212
196
|
var _React$useState = React.useState(externalSortConfig),
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
197
|
+
sortConfig = _React$useState[0],
|
|
198
|
+
setSortConfig = _React$useState[1];
|
|
216
199
|
var tableCopy = rawData.slice();
|
|
217
200
|
React.useEffect(function () {
|
|
218
201
|
setSortConfig({
|
|
@@ -224,7 +207,6 @@ function useSortableData(rawData, externalSortConfig) {
|
|
|
224
207
|
if (sortConfig.order === 'none') {
|
|
225
208
|
return tableCopy;
|
|
226
209
|
}
|
|
227
|
-
|
|
228
210
|
return [].concat(rawData).sort(function (a, b) {
|
|
229
211
|
if (get(a, sortConfig.key) < get(b, sortConfig.key)) {
|
|
230
212
|
return sortConfig.order === 'ascending' ? -1 : 1;
|
|
@@ -235,29 +217,24 @@ function useSortableData(rawData, externalSortConfig) {
|
|
|
235
217
|
}
|
|
236
218
|
});
|
|
237
219
|
}, [rawData, tableCopy, sortConfig]);
|
|
238
|
-
|
|
239
220
|
var onSortRequested = function onSortRequested(key) {
|
|
240
221
|
var order = 'ascending';
|
|
241
|
-
|
|
242
222
|
if (sortConfig.key === key && sortConfig.order === 'ascending') {
|
|
243
223
|
order = 'descending';
|
|
244
224
|
} else if (sortConfig.key === key && sortConfig.order === 'descending') {
|
|
245
225
|
order = 'none';
|
|
246
226
|
}
|
|
247
|
-
|
|
248
227
|
setSortConfig({
|
|
249
228
|
key: key,
|
|
250
229
|
order: order
|
|
251
230
|
});
|
|
252
231
|
};
|
|
253
|
-
|
|
254
232
|
function getSortableHeaderProps(_ref) {
|
|
255
233
|
var name = _ref.name,
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
234
|
+
_ref$sortable = _ref.sortable,
|
|
235
|
+
sortable = _ref$sortable === void 0 ? true : _ref$sortable,
|
|
236
|
+
buttonProps = _ref.buttonProps,
|
|
237
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
261
238
|
return _extends({
|
|
262
239
|
name: name,
|
|
263
240
|
sortable: sortable,
|
|
@@ -269,18 +246,15 @@ function useSortableData(rawData, externalSortConfig) {
|
|
|
269
246
|
}, buttonProps)
|
|
270
247
|
}, props);
|
|
271
248
|
}
|
|
272
|
-
|
|
273
249
|
function getSortableTableProps(_ref2) {
|
|
274
250
|
var _ref2$sortable = _ref2.sortable,
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
251
|
+
sortable = _ref2$sortable === void 0 ? true : _ref2$sortable,
|
|
252
|
+
props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
|
278
253
|
return _extends({
|
|
279
254
|
sortable: sortable,
|
|
280
255
|
sortConfig: sortConfig
|
|
281
256
|
}, props);
|
|
282
257
|
}
|
|
283
|
-
|
|
284
258
|
return {
|
|
285
259
|
sortedData: sortedData,
|
|
286
260
|
getSortableHeaderProps: getSortableHeaderProps,
|
|
@@ -291,13 +265,12 @@ function useSortableData(rawData, externalSortConfig) {
|
|
|
291
265
|
var _excluded$1 = ["children", "className", "feedback", "variant", "outlined"];
|
|
292
266
|
var EditableCell = function EditableCell(_ref) {
|
|
293
267
|
var children = _ref.children,
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
268
|
+
className = _ref.className,
|
|
269
|
+
feedback = _ref.feedback,
|
|
270
|
+
variant = _ref.variant,
|
|
271
|
+
_ref$outlined = _ref.outlined,
|
|
272
|
+
outlined = _ref$outlined === void 0 ? false : _ref$outlined,
|
|
273
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
301
274
|
return React.createElement(VariantProvider, {
|
|
302
275
|
variant: variant
|
|
303
276
|
}, React.createElement(DataCell, _extends({
|
|
@@ -315,9 +288,9 @@ var EditableCell = function EditableCell(_ref) {
|
|
|
315
288
|
|
|
316
289
|
var ExpandableRow = function ExpandableRow(_ref) {
|
|
317
290
|
var _ref$open = _ref.open,
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
291
|
+
open = _ref$open === void 0 ? false : _ref$open,
|
|
292
|
+
children = _ref.children,
|
|
293
|
+
colSpan = _ref.colSpan;
|
|
321
294
|
return React.createElement("tr", null, React.createElement("td", {
|
|
322
295
|
colSpan: colSpan
|
|
323
296
|
}, React.createElement(BaseExpand, {
|
|
@@ -328,9 +301,8 @@ var ExpandableRow = function ExpandableRow(_ref) {
|
|
|
328
301
|
var _excluded = ["open", "onClick"];
|
|
329
302
|
var ExpandRowButton = function ExpandRowButton(_ref) {
|
|
330
303
|
var open = _ref.open,
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
304
|
+
onClick = _ref.onClick,
|
|
305
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
334
306
|
return React.createElement(IconButton, _extends({
|
|
335
307
|
className: classNames('eds-expand-row-button', {
|
|
336
308
|
'eds-expand-row-button--open': open
|
|
@@ -344,81 +316,62 @@ var ExpandRowButton = function ExpandRowButton(_ref) {
|
|
|
344
316
|
|
|
345
317
|
function onTableKeypress(event, currentRow, maxRow, allowWrap) {
|
|
346
318
|
var keyPress = event.key;
|
|
347
|
-
|
|
348
319
|
switch (keyPress) {
|
|
349
320
|
case 'ArrowUp':
|
|
350
321
|
event.preventDefault();
|
|
351
|
-
|
|
352
322
|
if (allowWrap) {
|
|
353
323
|
return currentRow === 0 ? maxRow - 1 : currentRow - 1;
|
|
354
324
|
} else {
|
|
355
325
|
return currentRow > 0 ? currentRow - 1 : 0;
|
|
356
326
|
}
|
|
357
|
-
|
|
358
327
|
case 'ArrowDown':
|
|
359
328
|
event.preventDefault();
|
|
360
|
-
|
|
361
329
|
if (allowWrap) {
|
|
362
330
|
return currentRow === maxRow - 1 ? 0 : currentRow + 1;
|
|
363
331
|
} else {
|
|
364
332
|
return currentRow < maxRow - 1 ? currentRow + 1 : currentRow;
|
|
365
333
|
}
|
|
366
|
-
|
|
367
334
|
default:
|
|
368
335
|
return currentRow;
|
|
369
336
|
}
|
|
370
337
|
}
|
|
371
|
-
|
|
372
338
|
var useTableKeyboardNavigation = function useTableKeyboardNavigation(numberOfRows, allowWrap) {
|
|
373
339
|
var _tableBodyRef$current;
|
|
374
|
-
|
|
375
340
|
if (numberOfRows === void 0) {
|
|
376
341
|
numberOfRows = 0;
|
|
377
342
|
}
|
|
378
|
-
|
|
379
343
|
if (allowWrap === void 0) {
|
|
380
344
|
allowWrap = true;
|
|
381
345
|
}
|
|
382
|
-
|
|
383
346
|
var _useState = useState(numberOfRows),
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
347
|
+
currentRow = _useState[0],
|
|
348
|
+
setCurrentRow = _useState[1];
|
|
387
349
|
var _useState2 = useState(0),
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
350
|
+
maxRow = _useState2[0],
|
|
351
|
+
setMaxRow = _useState2[1];
|
|
391
352
|
var tableBodyRef = React.useRef(null);
|
|
392
353
|
var tableHasFocus = tableBodyRef == null ? void 0 : (_tableBodyRef$current = tableBodyRef.current) == null ? void 0 : _tableBodyRef$current.contains(document.activeElement);
|
|
393
354
|
React.useEffect(function () {
|
|
394
355
|
var _tableBodyRef$current2;
|
|
395
|
-
|
|
396
356
|
tableBodyRef && tableBodyRef.current && tableHasFocus && ((_tableBodyRef$current2 = tableBodyRef.current.childNodes[currentRow].childNodes[0].parentElement) == null ? void 0 : _tableBodyRef$current2.focus());
|
|
397
357
|
}, [currentRow, tableHasFocus]);
|
|
398
|
-
|
|
399
358
|
function getTableBodyNavigationProps() {
|
|
400
359
|
for (var _len = arguments.length, rest = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
401
360
|
rest[_key] = arguments[_key];
|
|
402
361
|
}
|
|
403
|
-
|
|
404
362
|
return _extends({
|
|
405
363
|
ref: tableBodyRef
|
|
406
364
|
}, rest);
|
|
407
365
|
}
|
|
408
|
-
|
|
409
366
|
var tableRowRef = React.useRef(null);
|
|
410
|
-
|
|
411
367
|
function getTableRowNavigationProps(row) {
|
|
412
368
|
if (row >= maxRow) {
|
|
413
369
|
setMaxRow(row + 1);
|
|
414
370
|
}
|
|
415
|
-
|
|
416
371
|
var tabIndex = currentRow ? 0 : -1;
|
|
417
|
-
|
|
418
372
|
for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
|
419
373
|
rest[_key2 - 1] = arguments[_key2];
|
|
420
374
|
}
|
|
421
|
-
|
|
422
375
|
return _extends({
|
|
423
376
|
tabIndex: tabIndex,
|
|
424
377
|
ref: tableRowRef,
|
|
@@ -431,7 +384,6 @@ var useTableKeyboardNavigation = function useTableKeyboardNavigation(numberOfRow
|
|
|
431
384
|
}
|
|
432
385
|
}, rest);
|
|
433
386
|
}
|
|
434
|
-
|
|
435
387
|
return {
|
|
436
388
|
getTableRowNavigationProps: getTableRowNavigationProps,
|
|
437
389
|
getTableBodyNavigationProps: getTableBodyNavigationProps
|