playbook_ui 13.19.0 → 13.20.0.pre.alpha.PBNTR225advancedtablefeedback2375
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +21 -19
- data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +6 -3
- data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +12 -8
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +14 -9
- data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +9 -5
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +14 -10
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +12 -8
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +0 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +2 -9
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +82 -78
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +54 -54
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_chrome_styles.scss +13 -0
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +4 -8
- data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
- data/app/pb_kits/playbook/pb_icon/icon.rb +27 -10
- data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +4 -0
- data/app/pb_kits/playbook/pb_table/_table.tsx +86 -67
- data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +47 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +7 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/styles/_content.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_hover.scss +11 -11
- data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_reset.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_striped.scss +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_structure.scss +22 -8
- data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +7 -7
- data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +14 -14
- data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +3 -4
- data/app/pb_kits/playbook/pb_table/table.html.erb +12 -2
- data/app/pb_kits/playbook/pb_table/table.rb +3 -0
- data/app/pb_kits/playbook/pb_table/table_body.html.erb +17 -0
- data/app/pb_kits/playbook/pb_table/table_body.rb +15 -0
- data/app/pb_kits/playbook/pb_table/table_cell.html.erb +17 -0
- data/app/pb_kits/playbook/pb_table/table_cell.rb +17 -0
- data/app/pb_kits/playbook/pb_table/table_head.html.erb +17 -0
- data/app/pb_kits/playbook/pb_table/table_head.rb +15 -0
- data/app/pb_kits/playbook/pb_table/table_header.html.erb +49 -39
- data/app/pb_kits/playbook/pb_table/table_header.rb +8 -1
- data/app/pb_kits/playbook/pb_table/table_row.html.erb +17 -7
- data/app/pb_kits/playbook/pb_table/table_row.rb +8 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +9 -5
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +20 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md +30 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +2 -1
- data/app/pb_kits/playbook/pb_user/docs/example.yml +1 -0
- data/dist/playbook-rails.js +2 -2
- data/lib/playbook/version.rb +2 -2
- metadata +21 -7
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e15b75aa8e734fcf7c1d4a4d6125f4bdb85d88513c1f0f8815c35220855b044e
|
4
|
+
data.tar.gz: 9e7cee23ebd94a5a90bd9d35902b7bc671d9f284311048197e6e15c76ae65630
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c16e3c834fd8dc73924855756f1b4baaa88c96904968fbe1233f673621018aa3bbb5812ec1b03c6e903c5f99d01e3e41442e07ecfda409a4f95724e37279b053
|
7
|
+
data.tar.gz: 2bd9cfe1dc2a14974eb3f3c7cbffa5ff5493c26770ad8aaaa9fe5cb2bb5d0476b6e62abaa7e642967a45774b7af6fbd69fce21b3b32dfddafae68a1218beb8e9
|
@@ -1,19 +1,21 @@
|
|
1
|
-
import React, { useContext } from "react"
|
1
|
+
import React, { useContext } from "react"
|
2
|
+
import { Getter, Row } from "@tanstack/react-table"
|
2
3
|
|
3
|
-
import
|
4
|
-
import FlexItem from "../../pb_flex/_flex_item";
|
5
|
-
import Icon from "../../pb_icon/_icon";
|
6
|
-
import { GlobalProps } from "../../utilities/globalProps";
|
4
|
+
import { GenericObject } from "../../types"
|
7
5
|
|
8
|
-
import {
|
9
|
-
|
10
|
-
import
|
6
|
+
import { GlobalProps } from "../../utilities/globalProps"
|
7
|
+
|
8
|
+
import Flex from "../../pb_flex/_flex"
|
9
|
+
import FlexItem from "../../pb_flex/_flex_item"
|
10
|
+
import Icon from "../../pb_icon/_icon"
|
11
|
+
|
12
|
+
import AdvancedTableContext from "../Context/AdvancedTableContext"
|
11
13
|
|
12
14
|
interface CustomCellProps {
|
13
|
-
getValue?: Getter<string
|
14
|
-
onRowToggleClick?: (arg: Row<
|
15
|
-
row: Row<
|
16
|
-
value?: string
|
15
|
+
getValue?: Getter<string>
|
16
|
+
onRowToggleClick?: (arg: Row<GenericObject>) => void
|
17
|
+
row: Row<GenericObject>
|
18
|
+
value?: string
|
17
19
|
}
|
18
20
|
|
19
21
|
export const CustomCell = ({
|
@@ -22,12 +24,12 @@ export const CustomCell = ({
|
|
22
24
|
row,
|
23
25
|
value,
|
24
26
|
}: CustomCellProps & GlobalProps) => {
|
25
|
-
const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext)
|
27
|
+
const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext)
|
26
28
|
|
27
|
-
const handleOnExpand = (row: Row<
|
28
|
-
onRowToggleClick && onRowToggleClick(row)
|
29
|
-
setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() })
|
30
|
-
}
|
29
|
+
const handleOnExpand = (row: Row<GenericObject>) => {
|
30
|
+
onRowToggleClick && onRowToggleClick(row)
|
31
|
+
setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() })
|
32
|
+
}
|
31
33
|
const RowHasChildren = row.original.children ? true : false
|
32
34
|
const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
|
33
35
|
|
@@ -59,5 +61,5 @@ export const CustomCell = ({
|
|
59
61
|
</FlexItem>
|
60
62
|
</Flex>
|
61
63
|
</div>
|
62
|
-
)
|
63
|
-
}
|
64
|
+
)
|
65
|
+
}
|
@@ -1,11 +1,14 @@
|
|
1
1
|
import React from "react"
|
2
|
-
import Icon from "../../pb_icon/_icon"
|
3
2
|
import { Header } from "@tanstack/react-table"
|
4
|
-
|
3
|
+
|
4
|
+
import { GenericObject } from "../../types"
|
5
|
+
|
6
|
+
import Icon from "../../pb_icon/_icon"
|
7
|
+
|
5
8
|
import { displayIcon } from "../Utilities/IconHelpers"
|
6
9
|
|
7
10
|
type SortIconButtonProps = {
|
8
|
-
header: Header<
|
11
|
+
header: Header<GenericObject, unknown>
|
9
12
|
sortIcon?: string | string[]
|
10
13
|
}
|
11
14
|
export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
|
@@ -1,23 +1,27 @@
|
|
1
1
|
import React, { useContext } from "react"
|
2
|
+
import { Row, Table } from "@tanstack/react-table"
|
3
|
+
|
4
|
+
import { GenericObject } from "../../types"
|
5
|
+
|
6
|
+
import { GlobalProps } from "../../utilities/globalProps"
|
7
|
+
|
2
8
|
import Flex from "../../pb_flex/_flex"
|
3
9
|
import Caption from "../../pb_caption/_caption"
|
4
|
-
import { Row, Table } from "@tanstack/react-table"
|
5
10
|
|
6
|
-
import AdvancedTableContext from "../Context/AdvancedTableContext";
|
7
11
|
import { ToggleIconButton } from "./ToggleIconButton"
|
8
12
|
import { renderCollapsibleTrail } from "./CollapsibleTrail"
|
9
13
|
|
10
14
|
import { isChrome } from "../Utilities/BrowserCheck"
|
11
|
-
|
12
|
-
import
|
15
|
+
|
16
|
+
import AdvancedTableContext from "../Context/AdvancedTableContext"
|
13
17
|
|
14
18
|
interface SubRowHeaderRowProps {
|
15
19
|
collapsibleTrail?: boolean
|
16
20
|
enableToggleExpansion?: "all" | "header" | "none"
|
17
|
-
onClick: (row: Row<
|
18
|
-
row: Row<
|
21
|
+
onClick: (row: Row<GenericObject>) => void
|
22
|
+
row: Row<GenericObject>
|
19
23
|
subRowHeaders?: string[]
|
20
|
-
table: Table<
|
24
|
+
table: Table<GenericObject>
|
21
25
|
}
|
22
26
|
|
23
27
|
export const SubRowHeaderRow = ({
|
@@ -28,7 +32,7 @@ export const SubRowHeaderRow = ({
|
|
28
32
|
subRowHeaders,
|
29
33
|
table,
|
30
34
|
}: SubRowHeaderRowProps & GlobalProps) => {
|
31
|
-
const { inlineRowLoading } = useContext(AdvancedTableContext)
|
35
|
+
const { inlineRowLoading } = useContext(AdvancedTableContext)
|
32
36
|
|
33
37
|
const numberOfColumns = table.getAllFlatColumns().length
|
34
38
|
const rowHasChildren = row.original.children ? true : false
|
@@ -1,20 +1,25 @@
|
|
1
1
|
import React, { useContext } from "react"
|
2
|
-
import classnames from "classnames"
|
3
|
-
import Flex from "../../pb_flex/_flex"
|
2
|
+
import classnames from "classnames"
|
4
3
|
import { flexRender, Header } from "@tanstack/react-table"
|
5
4
|
|
5
|
+
import { GenericObject } from "../../types"
|
6
|
+
|
7
|
+
import { GlobalProps } from "../../utilities/globalProps"
|
8
|
+
|
9
|
+
import Flex from "../../pb_flex/_flex"
|
10
|
+
|
6
11
|
import { SortIconButton } from "./SortIconButton"
|
7
12
|
import { ToggleIconButton } from "./ToggleIconButton"
|
13
|
+
|
8
14
|
import { isChrome } from "../Utilities/BrowserCheck"
|
9
|
-
|
15
|
+
|
10
16
|
import AdvancedTableContext from "../Context/AdvancedTableContext"
|
11
|
-
import { GlobalProps } from "../../utilities/globalProps"
|
12
17
|
|
13
18
|
type TableHeaderCellProps = {
|
14
19
|
enableSorting?: boolean
|
15
20
|
enableToggleExpansion?: "all" | "header" | "none"
|
16
21
|
handleExpandOrCollapse?: () => void
|
17
|
-
header?: Header<
|
22
|
+
header?: Header<GenericObject, unknown>
|
18
23
|
headerChildren?: React.ReactNode | React.ReactNode[]
|
19
24
|
loading?: boolean
|
20
25
|
sortIcon?: string | string[]
|
@@ -45,24 +50,24 @@ export const TableHeaderCell = ({
|
|
45
50
|
const cellClassName = classnames("table-header-cells",
|
46
51
|
`${isChrome() ? "chrome-styles" : ""}`,
|
47
52
|
`${enableSorting ? "table-header-cells-active" : ""}`
|
48
|
-
)
|
53
|
+
)
|
49
54
|
|
50
55
|
const cellId = `${loading ?
|
51
56
|
`loading-${header.id}`
|
52
57
|
: `${header.id}`
|
53
|
-
}
|
58
|
+
}`
|
54
59
|
|
55
60
|
const isToggleExpansionEnabledLoading =
|
56
61
|
header.index === 0 &&
|
57
62
|
loading &&
|
58
63
|
(enableToggleExpansion === "all" || "header") &&
|
59
|
-
enableToggleExpansion !== "none"
|
64
|
+
enableToggleExpansion !== "none"
|
60
65
|
|
61
66
|
const isToggleExpansionEnabled =
|
62
67
|
header.index === 0 &&
|
63
68
|
!loading &&
|
64
69
|
(enableToggleExpansion === "all" || "header") &&
|
65
|
-
enableToggleExpansion !== "none"
|
70
|
+
enableToggleExpansion !== "none"
|
66
71
|
|
67
72
|
return (
|
68
73
|
<th
|
@@ -1,13 +1,17 @@
|
|
1
1
|
import React, { useContext } from "react"
|
2
|
-
import Icon from "../../pb_icon/_icon"
|
3
2
|
import { Row } from "@tanstack/react-table"
|
4
|
-
|
5
|
-
import {
|
3
|
+
|
4
|
+
import { GenericObject } from "../../types"
|
5
|
+
|
6
|
+
import Icon from "../../pb_icon/_icon"
|
7
|
+
|
6
8
|
import { displayIcon } from "../Utilities/IconHelpers"
|
7
9
|
|
10
|
+
import AdvancedTableContext from "../Context/AdvancedTableContext"
|
11
|
+
|
8
12
|
interface ToggleIconButtonProps {
|
9
|
-
onClick: (row: Row<
|
10
|
-
row?: Row<
|
13
|
+
onClick: (row: Row<GenericObject>) => void
|
14
|
+
row?: Row<GenericObject>
|
11
15
|
}
|
12
16
|
|
13
17
|
export const ToggleIconButton = ({ row, onClick }: ToggleIconButtonProps) => {
|
@@ -1,21 +1,25 @@
|
|
1
1
|
import React, { useContext } from "react"
|
2
|
-
import classnames from "classnames"
|
3
|
-
import { buildCss } from "../../utilities/props";
|
4
|
-
import { globalProps } from "../../utilities/globalProps";
|
5
|
-
import LoadingInline from "../../pb_loading_inline/_loading_inline"
|
2
|
+
import classnames from "classnames"
|
6
3
|
import { flexRender, Row } from "@tanstack/react-table"
|
7
4
|
|
5
|
+
import { GenericObject } from "../../types"
|
6
|
+
|
7
|
+
import { buildCss } from "../../utilities/props"
|
8
|
+
import { globalProps } from "../../utilities/globalProps"
|
9
|
+
import { isChrome } from "../Utilities/BrowserCheck"
|
10
|
+
|
11
|
+
import LoadingInline from "../../pb_loading_inline/_loading_inline"
|
12
|
+
|
8
13
|
import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
|
9
14
|
import { LoadingCell } from "../Components/LoadingCell"
|
10
15
|
import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
|
16
|
+
|
11
17
|
import AdvancedTableContext from "../Context/AdvancedTableContext"
|
12
|
-
import { isChrome } from "../Utilities/BrowserCheck"
|
13
|
-
import { DataType } from "../Utilities/types"
|
14
18
|
|
15
19
|
type TableBodyProps = {
|
16
|
-
className?: string
|
20
|
+
className?: string
|
17
21
|
collapsibleTrail?: boolean
|
18
|
-
id?: string
|
22
|
+
id?: string
|
19
23
|
subRowHeaders?: string[]
|
20
24
|
}
|
21
25
|
|
@@ -40,14 +44,14 @@ export const TableBody = ({
|
|
40
44
|
buildCss("pb_advanced_table_body"),
|
41
45
|
globalProps(props),
|
42
46
|
className
|
43
|
-
)
|
47
|
+
)
|
44
48
|
|
45
49
|
return (
|
46
50
|
<>
|
47
51
|
<tbody className={classes}
|
48
52
|
id={id}
|
49
53
|
>
|
50
|
-
{table.getRowModel().rows.map((row: Row<
|
54
|
+
{table.getRowModel().rows.map((row: Row<GenericObject>) => {
|
51
55
|
const isExpandable = row.getIsExpanded()
|
52
56
|
const isFirstChildofSubrow = row.depth > 0 && row.index === 0
|
53
57
|
const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
|
@@ -1,17 +1,21 @@
|
|
1
1
|
import React, { useContext } from "react"
|
2
|
-
import classnames from "classnames"
|
3
|
-
import { buildCss } from "../../utilities/props";
|
4
|
-
import { globalProps } from "../../utilities/globalProps";
|
2
|
+
import classnames from "classnames"
|
5
3
|
import { HeaderGroup } from "@tanstack/react-table"
|
6
|
-
|
4
|
+
|
5
|
+
import { GenericObject } from "../../types"
|
6
|
+
|
7
|
+
import { buildCss } from "../../utilities/props"
|
8
|
+
import { globalProps } from "../../utilities/globalProps"
|
9
|
+
|
7
10
|
import { TableHeaderCell } from "../Components/TableHeaderCell"
|
8
|
-
|
11
|
+
|
12
|
+
import AdvancedTableContext from "../Context/AdvancedTableContext"
|
9
13
|
|
10
14
|
type TableHeaderProps = {
|
11
15
|
children?: React.ReactNode | React.ReactNode[]
|
12
16
|
className?: string
|
13
17
|
enableSorting?: boolean
|
14
|
-
id?: string
|
18
|
+
id?: string
|
15
19
|
sortIcon?: string | string[]
|
16
20
|
}
|
17
21
|
|
@@ -34,7 +38,7 @@ export const TableHeader = ({
|
|
34
38
|
buildCss("pb_advanced_table_header"),
|
35
39
|
globalProps(props),
|
36
40
|
className
|
37
|
-
)
|
41
|
+
)
|
38
42
|
|
39
43
|
|
40
44
|
return (
|
@@ -43,7 +47,7 @@ export const TableHeader = ({
|
|
43
47
|
id={id}
|
44
48
|
>
|
45
49
|
{/* Get the header groups (only one in this example) */}
|
46
|
-
{table.getHeaderGroups().map((headerGroup: HeaderGroup<
|
50
|
+
{table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
|
47
51
|
<tr key={`${headerGroup.id}-headerGroup`}>
|
48
52
|
{headerGroup.headers.map(header => (
|
49
53
|
<TableHeaderCell
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { RowModel } from "@tanstack/react-table"
|
2
|
-
import {
|
2
|
+
import { ExpandedStateObject } from "./types"
|
3
|
+
import { GenericObject } from "../../types"
|
3
4
|
|
4
5
|
const filterExpandableRows = (expandedState: Record<string, boolean>) => {
|
5
6
|
for (const expandedRow in expandedState) {
|
@@ -11,7 +12,7 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
|
|
11
12
|
}
|
12
13
|
|
13
14
|
export const updateExpandAndCollapseState = (
|
14
|
-
tableRows: RowModel<
|
15
|
+
tableRows: RowModel<GenericObject>,
|
15
16
|
expanded: Record<string, boolean>,
|
16
17
|
targetParent: string
|
17
18
|
) => {
|
@@ -4,6 +4,7 @@
|
|
4
4
|
@import "../tokens/spacing";
|
5
5
|
@import "./scss_partials/loading";
|
6
6
|
@import "./scss_partials/pseudo_states";
|
7
|
+
@import "./scss_partials/chrome_styles";
|
7
8
|
|
8
9
|
.pb_advanced_table {
|
9
10
|
$border-color: 1px solid $border_light !important;
|
@@ -86,13 +87,5 @@
|
|
86
87
|
box-shadow: 1px 0px 0px 0px #e4e8f0 !important;
|
87
88
|
}
|
88
89
|
|
89
|
-
|
90
|
-
border-right: $border-color;
|
91
|
-
}
|
92
|
-
|
93
|
-
.table-card {
|
94
|
-
.chrome-styles:first-child {
|
95
|
-
border-right: $transparent !important;
|
96
|
-
}
|
97
|
-
}
|
90
|
+
@include chrome_styles($border-color);
|
98
91
|
}
|
@@ -1,8 +1,8 @@
|
|
1
|
-
import React, { useState, useEffect, useCallback } from "react"
|
2
|
-
import classnames from "classnames"
|
3
|
-
|
4
|
-
import {
|
5
|
-
|
1
|
+
import React, { useState, useEffect, useCallback } from "react"
|
2
|
+
import classnames from "classnames"
|
3
|
+
|
4
|
+
import { GenericObject } from "../types"
|
5
|
+
|
6
6
|
import {
|
7
7
|
createColumnHelper,
|
8
8
|
getCoreRowModel,
|
@@ -11,38 +11,42 @@ import {
|
|
11
11
|
Row,
|
12
12
|
useReactTable,
|
13
13
|
Getter,
|
14
|
-
} from "@tanstack/react-table"
|
14
|
+
} from "@tanstack/react-table"
|
15
|
+
|
16
|
+
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props"
|
17
|
+
import { globalProps, GlobalProps } from "../utilities/globalProps"
|
15
18
|
|
16
|
-
import
|
19
|
+
import Table from "../pb_table/_table"
|
17
20
|
|
18
|
-
import
|
19
|
-
import AdvancedTableContext from "./Context/AdvancedTableContext";
|
20
|
-
import { TableHeader } from "./SubKits/TableHeader";
|
21
|
-
import { TableBody } from "./SubKits/TableBody";
|
21
|
+
import AdvancedTableContext from "./Context/AdvancedTableContext"
|
22
22
|
|
23
|
-
import {
|
23
|
+
import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelpers"
|
24
|
+
|
25
|
+
import { CustomCell } from "./Components/CustomCell"
|
26
|
+
import { TableHeader } from "./SubKits/TableHeader"
|
27
|
+
import { TableBody } from "./SubKits/TableBody"
|
24
28
|
|
25
29
|
type AdvancedTableProps = {
|
26
|
-
aria?: { [key: string]: string }
|
27
|
-
children?: React.ReactNode | React.ReactNode[]
|
28
|
-
className?: string
|
29
|
-
columnDefinitions:
|
30
|
-
data?: { [key: string]: string }
|
31
|
-
enableToggleExpansion?: "all" | "header" | "none"
|
32
|
-
expandedControl?:
|
30
|
+
aria?: { [key: string]: string }
|
31
|
+
children?: React.ReactNode | React.ReactNode[]
|
32
|
+
className?: string
|
33
|
+
columnDefinitions: GenericObject[]
|
34
|
+
data?: { [key: string]: string }
|
35
|
+
enableToggleExpansion?: "all" | "header" | "none"
|
36
|
+
expandedControl?: GenericObject
|
33
37
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
34
|
-
id?: string
|
35
|
-
initialLoadingRowsCount?: number
|
36
|
-
inlineRowLoading?: boolean
|
37
|
-
loading?: boolean | string
|
38
|
-
onRowToggleClick?: (arg: Row<
|
39
|
-
onToggleExpansionClick?: (arg: Row<
|
40
|
-
sortControl?:
|
41
|
-
tableData:
|
42
|
-
tableOptions?:
|
43
|
-
tableProps?:
|
44
|
-
toggleExpansionIcon?: string | string[]
|
45
|
-
} & GlobalProps
|
38
|
+
id?: string
|
39
|
+
initialLoadingRowsCount?: number
|
40
|
+
inlineRowLoading?: boolean
|
41
|
+
loading?: boolean | string
|
42
|
+
onRowToggleClick?: (arg: Row<GenericObject>) => void
|
43
|
+
onToggleExpansionClick?: (arg: Row<GenericObject>) => void
|
44
|
+
sortControl?: GenericObject
|
45
|
+
tableData: GenericObject[]
|
46
|
+
tableOptions?: GenericObject
|
47
|
+
tableProps?: GenericObject
|
48
|
+
toggleExpansionIcon?: string | string[]
|
49
|
+
} & GlobalProps
|
46
50
|
|
47
51
|
const AdvancedTable = (props: AdvancedTableProps) => {
|
48
52
|
const {
|
@@ -65,22 +69,22 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
65
69
|
tableOptions,
|
66
70
|
tableProps,
|
67
71
|
toggleExpansionIcon = "arrows-from-line",
|
68
|
-
} = props
|
72
|
+
} = props
|
69
73
|
|
70
74
|
const [loadingStateRowCount, setLoadingStateRowCount] = useState(
|
71
75
|
initialLoadingRowsCount
|
72
|
-
)
|
76
|
+
)
|
73
77
|
|
74
78
|
// Create a local state for expanded and setExpanded if expandedControl not used
|
75
|
-
const [localExpanded, setLocalExpanded] = useState({})
|
79
|
+
const [localExpanded, setLocalExpanded] = useState({})
|
76
80
|
|
77
81
|
// Determine whether to use the prop or the local state
|
78
|
-
const expanded = expandedControl ? expandedControl.value : localExpanded
|
82
|
+
const expanded = expandedControl ? expandedControl.value : localExpanded
|
79
83
|
const setExpanded = expandedControl
|
80
84
|
? expandedControl.onChange
|
81
|
-
: setLocalExpanded
|
85
|
+
: setLocalExpanded
|
82
86
|
|
83
|
-
const columnHelper = createColumnHelper
|
87
|
+
const columnHelper = createColumnHelper()
|
84
88
|
|
85
89
|
//Create cells for first columns
|
86
90
|
const createCellFunction = (cellAccessors: string[]) => {
|
@@ -88,10 +92,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
88
92
|
row,
|
89
93
|
getValue,
|
90
94
|
}: {
|
91
|
-
row: Row<
|
92
|
-
getValue: Getter<string
|
95
|
+
row: Row<GenericObject>
|
96
|
+
getValue: Getter<string>
|
93
97
|
}) => {
|
94
|
-
const rowData = row.original
|
98
|
+
const rowData = row.original
|
95
99
|
|
96
100
|
switch (row.depth) {
|
97
101
|
case 0: {
|
@@ -101,12 +105,12 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
101
105
|
onRowToggleClick={onRowToggleClick}
|
102
106
|
row={row}
|
103
107
|
/>
|
104
|
-
)
|
108
|
+
)
|
105
109
|
}
|
106
110
|
default: {
|
107
111
|
// Handle other depths based on cellAccessors
|
108
|
-
const depthAccessor = cellAccessors[row.depth - 1]
|
109
|
-
const accessorValue = rowData[depthAccessor]
|
112
|
+
const depthAccessor = cellAccessors[row.depth - 1] // Adjust index for depth
|
113
|
+
const accessorValue = rowData[depthAccessor]
|
110
114
|
return accessorValue ? (
|
111
115
|
<CustomCell
|
112
116
|
onRowToggleClick={onRowToggleClick}
|
@@ -115,13 +119,13 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
115
119
|
/>
|
116
120
|
) : (
|
117
121
|
"N/A"
|
118
|
-
)
|
122
|
+
)
|
119
123
|
}
|
120
124
|
}
|
121
|
-
}
|
125
|
+
}
|
122
126
|
|
123
|
-
return columnCells
|
124
|
-
}
|
127
|
+
return columnCells
|
128
|
+
}
|
125
129
|
|
126
130
|
//Create column array in format needed by Tanstack
|
127
131
|
const columns =
|
@@ -132,12 +136,12 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
132
136
|
...columnHelper.accessor(column.accessor, {
|
133
137
|
header: column.label,
|
134
138
|
}),
|
135
|
-
}
|
139
|
+
}
|
136
140
|
if (column.cellAccessors) {
|
137
|
-
columnStructure.cell = createCellFunction(column.cellAccessors)
|
141
|
+
columnStructure.cell = createCellFunction(column.cellAccessors)
|
138
142
|
}
|
139
|
-
return columnStructure
|
140
|
-
})
|
143
|
+
return columnStructure
|
144
|
+
})
|
141
145
|
|
142
146
|
//Syntax for sorting Array if we want to manage state ourselves
|
143
147
|
const sorting = [
|
@@ -148,22 +152,22 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
148
152
|
? !sortControl.value.desc
|
149
153
|
: false,
|
150
154
|
},
|
151
|
-
]
|
155
|
+
]
|
152
156
|
|
153
157
|
const expandAndSortState = () => {
|
154
158
|
if (sortControl) {
|
155
|
-
return { state: { expanded, sorting } }
|
159
|
+
return { state: { expanded, sorting } }
|
156
160
|
} else {
|
157
|
-
return { state: { expanded } }
|
161
|
+
return { state: { expanded } }
|
158
162
|
}
|
159
|
-
}
|
163
|
+
}
|
160
164
|
|
161
165
|
//initialize table
|
162
166
|
const table = useReactTable({
|
163
167
|
data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
|
164
168
|
columns,
|
165
169
|
onExpandedChange: setExpanded,
|
166
|
-
getSubRows: (row) => row.children,
|
170
|
+
getSubRows: (row: GenericObject) => row.children,
|
167
171
|
getCoreRowModel: getCoreRowModel(),
|
168
172
|
getExpandedRowModel: getExpandedRowModel(),
|
169
173
|
getSortedRowModel: getSortedRowModel(),
|
@@ -171,42 +175,42 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
171
175
|
sortDescFirst: true,
|
172
176
|
...expandAndSortState(),
|
173
177
|
...tableOptions,
|
174
|
-
})
|
178
|
+
})
|
175
179
|
|
176
|
-
const tableRows = table.getRowModel()
|
180
|
+
const tableRows = table.getRowModel()
|
177
181
|
|
178
182
|
// Set table row count for loading state
|
179
183
|
const updateLoadingStateRowCount = useCallback(() => {
|
180
|
-
const rowsCount = table.getRowModel().rows.length
|
184
|
+
const rowsCount = table.getRowModel().rows.length
|
181
185
|
if (rowsCount !== loadingStateRowCount && rowsCount !== 0) {
|
182
|
-
setLoadingStateRowCount(rowsCount)
|
186
|
+
setLoadingStateRowCount(rowsCount)
|
183
187
|
}
|
184
|
-
}, [tableData, loadingStateRowCount])
|
188
|
+
}, [tableData, loadingStateRowCount])
|
185
189
|
|
186
190
|
useEffect(() => {
|
187
191
|
if (!loading) {
|
188
|
-
updateLoadingStateRowCount()
|
192
|
+
updateLoadingStateRowCount()
|
189
193
|
}
|
190
|
-
}, [loading, updateLoadingStateRowCount])
|
194
|
+
}, [loading, updateLoadingStateRowCount])
|
191
195
|
|
192
|
-
const handleExpandOrCollapse = (row: Row<
|
193
|
-
onToggleExpansionClick && onToggleExpansionClick(row)
|
196
|
+
const handleExpandOrCollapse = (row: Row<GenericObject>) => {
|
197
|
+
onToggleExpansionClick && onToggleExpansionClick(row)
|
194
198
|
|
195
|
-
const expandedState = expanded
|
196
|
-
const targetParent = row?.parentId
|
199
|
+
const expandedState = expanded
|
200
|
+
const targetParent = row?.parentId
|
197
201
|
return setExpanded(
|
198
202
|
updateExpandAndCollapseState(tableRows, expandedState, targetParent)
|
199
|
-
)
|
200
|
-
}
|
203
|
+
)
|
204
|
+
}
|
201
205
|
|
202
|
-
const ariaProps = buildAriaProps(aria)
|
203
|
-
const dataProps = buildDataProps(data)
|
204
|
-
const htmlProps = buildHtmlProps(htmlOptions)
|
206
|
+
const ariaProps = buildAriaProps(aria)
|
207
|
+
const dataProps = buildDataProps(data)
|
208
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
205
209
|
const classes = classnames(
|
206
210
|
buildCss("pb_advanced_table"),
|
207
211
|
globalProps(props),
|
208
212
|
className
|
209
|
-
)
|
213
|
+
)
|
210
214
|
|
211
215
|
return (
|
212
216
|
<div {...ariaProps}
|
@@ -247,10 +251,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
247
251
|
</Table>
|
248
252
|
</AdvancedTableContext.Provider>
|
249
253
|
</div>
|
250
|
-
)
|
251
|
-
}
|
254
|
+
)
|
255
|
+
}
|
252
256
|
|
253
|
-
AdvancedTable.Header = TableHeader
|
254
|
-
AdvancedTable.Body = TableBody
|
257
|
+
AdvancedTable.Header = TableHeader
|
258
|
+
AdvancedTable.Body = TableBody
|
255
259
|
|
256
|
-
export default AdvancedTable
|
260
|
+
export default AdvancedTable
|