playbook_ui 14.17.0.pre.alpha.PLAY2040removeunnecessarystickytableclasses7300 → 14.17.0.pre.alpha.PLAY20547307
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +49 -2
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +29 -19
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +65 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +9 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
- data/dist/chunks/_typeahead-DytFGjSn.js +22 -0
- data/dist/chunks/_weekday_stacked-B7twaUlt.js +45 -0
- data/dist/chunks/{lib-BV_AF_eh.js → lib-Cj4H6j1c.js} +2 -2
- data/dist/chunks/{pb_form_validation-nsvkJU2J.js → pb_form_validation-Bx1OK6xs.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +7 -5
- data/dist/chunks/_typeahead-CHd0V9EL.js +0 -22
- data/dist/chunks/_weekday_stacked-CdE0nXPu.js +0 -45
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 06c3be1f56543c7c3eaaa61b499fcd468b2d949490d1e63a9633466889d2a82f
|
4
|
+
data.tar.gz: 40597dc6319352c9362e3f165228a93daa9adbe5853f3145581d038eb58a09b7
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f013f65db3bc6a708f1009b8103d8da9f1dd0bd762b18a5c48dc8745160955249ea53ea784496257401ee0820499a441514f758d5ae6709aa928de5b1dee4a73
|
7
|
+
data.tar.gz: bf8c87674cbf08d0b905a6c2b769c373c1d63c23a968010950ca1d35449cbe91c7e06a282f909244c9abcba56b2186812c38a9083ed0dca60446f354bde86dcb
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { useContext } from "react"
|
2
2
|
import classnames from "classnames"
|
3
|
-
import { flexRender, Header, Table } from "@tanstack/react-table"
|
3
|
+
import { flexRender, Header, Table, RowModel } from "@tanstack/react-table"
|
4
4
|
|
5
5
|
import { GenericObject } from "../../types"
|
6
6
|
|
@@ -8,9 +8,16 @@ import { GlobalProps } from "../../utilities/globalProps"
|
|
8
8
|
|
9
9
|
import Flex from "../../pb_flex/_flex"
|
10
10
|
import Checkbox from "../../pb_checkbox/_checkbox"
|
11
|
+
import Dropdown from "../../pb_dropdown/_dropdown"
|
12
|
+
import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger"
|
13
|
+
import DropdownOption from "../../pb_dropdown/subcomponents/DropdownOption"
|
14
|
+
import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer"
|
15
|
+
import Icon from "../../pb_icon/_icon"
|
11
16
|
|
12
17
|
import { SortIconButton } from "./SortIconButton"
|
13
18
|
import { ToggleIconButton } from "./ToggleIconButton"
|
19
|
+
import { displayIcon } from "../Utilities/IconHelpers"
|
20
|
+
import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
|
14
21
|
|
15
22
|
import { isChrome } from "../Utilities/BrowserCheck"
|
16
23
|
|
@@ -40,6 +47,10 @@ export const TableHeaderCell = ({
|
|
40
47
|
table
|
41
48
|
}: TableHeaderCellProps) => {
|
42
49
|
const {
|
50
|
+
expanded,
|
51
|
+
setExpanded,
|
52
|
+
expandByDepth,
|
53
|
+
toggleExpansionIcon,
|
43
54
|
sortControl,
|
44
55
|
responsive,
|
45
56
|
selectableRows,
|
@@ -107,6 +118,17 @@ const isToggleExpansionEnabled =
|
|
107
118
|
justifyHeader = isLeafColumn ? "end" : "center";
|
108
119
|
}
|
109
120
|
|
121
|
+
const handleExpandDepth = (depth: number) => {
|
122
|
+
const updated = updateExpandAndCollapseState(
|
123
|
+
table.getRowModel(),
|
124
|
+
expanded,
|
125
|
+
undefined,
|
126
|
+
depth
|
127
|
+
)
|
128
|
+
setExpanded(updated)
|
129
|
+
}
|
130
|
+
|
131
|
+
|
110
132
|
return (
|
111
133
|
<th
|
112
134
|
align="right"
|
@@ -143,9 +165,34 @@ const isToggleExpansionEnabled =
|
|
143
165
|
/>
|
144
166
|
)
|
145
167
|
}
|
146
|
-
{isToggleExpansionEnabled && hasAnySubRows && (
|
168
|
+
{isToggleExpansionEnabled && hasAnySubRows && !expandByDepth && (
|
147
169
|
<ToggleIconButton onClick={handleExpandOrCollapse} />
|
148
170
|
)}
|
171
|
+
{isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (
|
172
|
+
<Dropdown options={expandByDepth}>
|
173
|
+
<DropdownTrigger className="gray-icon toggle-all-icon">
|
174
|
+
<Icon icon={displayIcon(toggleExpansionIcon)[0]} />
|
175
|
+
</DropdownTrigger>
|
176
|
+
<DropdownContainer className="expand-by-depth-dropdown">
|
177
|
+
{expandByDepth.map((option:{ [key: string]: any }, index: number) => (
|
178
|
+
<DropdownOption
|
179
|
+
key={index}
|
180
|
+
option={option}
|
181
|
+
padding="none"
|
182
|
+
>
|
183
|
+
<Flex
|
184
|
+
alignItems="center"
|
185
|
+
htmlOptions={{onClick: () => {handleExpandDepth(option.depth)} }}
|
186
|
+
paddingX="sm"
|
187
|
+
paddingY="xs"
|
188
|
+
>
|
189
|
+
{option.label}
|
190
|
+
</Flex>
|
191
|
+
</DropdownOption>
|
192
|
+
))}
|
193
|
+
</DropdownContainer>
|
194
|
+
</Dropdown>
|
195
|
+
)}
|
149
196
|
|
150
197
|
{isToggleExpansionEnabledLoading &&(
|
151
198
|
<div className="loading-toggle-icon header-toggle-icon" />
|
@@ -22,10 +22,9 @@ export function useTableActions({
|
|
22
22
|
// Handle expand/collapse
|
23
23
|
const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
|
24
24
|
onToggleExpansionClick && onToggleExpansionClick(row);
|
25
|
-
|
26
25
|
const expandedState = expanded;
|
27
26
|
const targetParent = row?.parentId;
|
28
|
-
const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent);
|
27
|
+
const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent, undefined);
|
29
28
|
setExpanded(updatedRows);
|
30
29
|
}, [expanded, setExpanded, onToggleExpansionClick, table]);
|
31
30
|
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { RowModel } from "@tanstack/react-table"
|
1
|
+
import { RowModel, Row } from "@tanstack/react-table"
|
2
2
|
import { ExpandedStateObject } from "./types"
|
3
3
|
import { GenericObject } from "../../types"
|
4
4
|
|
@@ -14,30 +14,40 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
|
|
14
14
|
export const updateExpandAndCollapseState = (
|
15
15
|
tableRows: RowModel<GenericObject>,
|
16
16
|
expanded: Record<string, boolean>,
|
17
|
-
targetParent
|
17
|
+
targetParent?: string,
|
18
|
+
targetDepth?: number,
|
18
19
|
) => {
|
19
20
|
const updateExpandedRows: Record<string, boolean> = {};
|
20
|
-
const rows = tableRows.rows;
|
21
|
+
const rows = targetDepth !== undefined ? tableRows.flatRows : tableRows.rows;
|
21
22
|
|
22
|
-
|
23
|
-
const areRowsExpanded = new Set<boolean>();
|
23
|
+
const rowsToToggle: Row<GenericObject>[] = [];
|
24
24
|
|
25
25
|
for (const row of rows) {
|
26
|
-
const shouldBeUpdated =
|
27
|
-
|
26
|
+
const shouldBeUpdated =
|
27
|
+
targetDepth !== undefined
|
28
|
+
? row.depth <= targetDepth
|
29
|
+
: targetParent === undefined
|
30
|
+
? row.depth === 0
|
31
|
+
: targetParent === row.parentId;
|
32
|
+
|
28
33
|
if (shouldBeUpdated) {
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
34
|
+
rowsToToggle.push(row);
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
// Check if we are expanding or collapsing
|
39
|
+
const anyCollapsed = rowsToToggle.some((row) => !row.getIsExpanded());
|
40
|
+
const isExpandAction = anyCollapsed;
|
41
|
+
|
42
|
+
|
43
|
+
for (const row of rowsToToggle) {
|
44
|
+
const shouldUpdate =
|
45
|
+
isExpandAction || targetDepth === undefined
|
46
|
+
? true
|
47
|
+
: row.depth === targetDepth;
|
48
|
+
|
49
|
+
if (shouldUpdate) {
|
50
|
+
updateExpandedRows[row.id] = isExpandAction;
|
41
51
|
}
|
42
52
|
}
|
43
53
|
|
@@ -38,6 +38,7 @@ type AdvancedTableProps = {
|
|
38
38
|
data?: { [key: string]: string }
|
39
39
|
enableToggleExpansion?: "all" | "header" | "none"
|
40
40
|
expandedControl?: GenericObject
|
41
|
+
expandByDepth?: { [key: string]: string | number }
|
41
42
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
42
43
|
id?: string
|
43
44
|
initialLoadingRowsCount?: number
|
@@ -73,6 +74,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
73
74
|
data = {},
|
74
75
|
enableToggleExpansion = "header",
|
75
76
|
expandedControl,
|
77
|
+
expandByDepth,
|
76
78
|
htmlOptions = {},
|
77
79
|
id,
|
78
80
|
initialLoadingRowsCount = 10,
|
@@ -280,6 +282,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
280
282
|
columnDefinitions={columnDefinitions}
|
281
283
|
enableToggleExpansion={enableToggleExpansion}
|
282
284
|
enableVirtualization={virtualizedRows}
|
285
|
+
expandByDepth={expandByDepth}
|
283
286
|
expanded={expanded}
|
284
287
|
expandedControl={expandedControl}
|
285
288
|
handleExpandOrCollapse={handleExpandOrCollapse}
|
@@ -0,0 +1,65 @@
|
|
1
|
+
import React from "react"
|
2
|
+
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
4
|
+
|
5
|
+
const AdvancedTableExpandByDepth = (props) => {
|
6
|
+
const columnDefinitions = [
|
7
|
+
{
|
8
|
+
accessor: "year",
|
9
|
+
label: "Year",
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
11
|
+
},
|
12
|
+
{
|
13
|
+
accessor: "newEnrollments",
|
14
|
+
label: "New Enrollments",
|
15
|
+
},
|
16
|
+
{
|
17
|
+
accessor: "scheduledMeetings",
|
18
|
+
label: "Scheduled Meetings",
|
19
|
+
},
|
20
|
+
{
|
21
|
+
accessor: "attendanceRate",
|
22
|
+
label: "Attendance Rate",
|
23
|
+
},
|
24
|
+
{
|
25
|
+
accessor: "completedClasses",
|
26
|
+
label: "Completed Classes",
|
27
|
+
},
|
28
|
+
{
|
29
|
+
accessor: "classCompletionRate",
|
30
|
+
label: "Class Completion Rate",
|
31
|
+
},
|
32
|
+
{
|
33
|
+
accessor: "graduatedStudents",
|
34
|
+
label: "Graduated Students",
|
35
|
+
},
|
36
|
+
]
|
37
|
+
|
38
|
+
const expandByDepth = [
|
39
|
+
{
|
40
|
+
depth: 0,
|
41
|
+
label: "Year",
|
42
|
+
},
|
43
|
+
{
|
44
|
+
depth: 1,
|
45
|
+
label: "Quarter",
|
46
|
+
},
|
47
|
+
{
|
48
|
+
depth: 2,
|
49
|
+
label: "Month",
|
50
|
+
}
|
51
|
+
]
|
52
|
+
|
53
|
+
return (
|
54
|
+
<div>
|
55
|
+
<AdvancedTable
|
56
|
+
columnDefinitions={columnDefinitions}
|
57
|
+
expandByDepth={expandByDepth}
|
58
|
+
tableData={MOCK_DATA}
|
59
|
+
{...props}
|
60
|
+
/>
|
61
|
+
</div>
|
62
|
+
)
|
63
|
+
}
|
64
|
+
|
65
|
+
export default AdvancedTableExpandByDepth
|
@@ -0,0 +1,9 @@
|
|
1
|
+
The `expandByDepth` prop enables users to expand or collapse table rows by specific levels of nesting. When provided, it renders a dropdown that appears when the toggle icon in the header is clicked.
|
2
|
+
|
3
|
+
`expandByDepth` accepts an array of objects, where each object defines the depth level to target and the label to display in the dropdown. When a user selects an option:
|
4
|
+
|
5
|
+
**Expanding a depth**: Expands all rows at the selected depth AND all parent levels above it (if parent levels were closed), ensuring nested content is visible.
|
6
|
+
|
7
|
+
**Collapsing a depth**: Only collapses rows at the selected depth, keeping parent rows expanded for context.
|
8
|
+
|
9
|
+
|
@@ -22,6 +22,7 @@ examples:
|
|
22
22
|
- advanced_table_sort: Enable Sorting
|
23
23
|
- advanced_table_sort_control: Sort Control
|
24
24
|
- advanced_table_expanded_control: Expanded Control
|
25
|
+
- advanced_table_expand_by_depth: Expand by Depth
|
25
26
|
- advanced_table_subrow_headers: SubRow Headers
|
26
27
|
- advanced_table_collapsible_trail: Collapsible Trail
|
27
28
|
- advanced_table_table_options: Table Options
|
@@ -25,4 +25,5 @@ export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_
|
|
25
25
|
export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
|
26
26
|
export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
|
27
27
|
export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
|
28
|
-
export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
|
28
|
+
export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
|
29
|
+
export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
|
@@ -22,7 +22,7 @@ type DropdownOptionProps = {
|
|
22
22
|
data?: { [key: string]: string };
|
23
23
|
htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
|
24
24
|
id?: string;
|
25
|
-
key?: string;
|
25
|
+
key?: string | number;
|
26
26
|
option?: GenericObject;
|
27
27
|
padding?: string;
|
28
28
|
} & GlobalProps;
|
@@ -84,8 +84,8 @@ const Table = (props: TableProps): React.ReactElement => {
|
|
84
84
|
'single-line': singleLine,
|
85
85
|
'no-hover': disableHover,
|
86
86
|
'sticky-header': sticky,
|
87
|
-
'sticky-left-column': stickyLeftColumn
|
88
|
-
'sticky-right-column': stickyRightColumn
|
87
|
+
'sticky-left-column': stickyLeftColumn,
|
88
|
+
'sticky-right-column': stickyRightColumn,
|
89
89
|
'striped': striped,
|
90
90
|
'header-borderless': headerStyle === 'borderless',
|
91
91
|
'header-floating': headerStyle === 'floating',
|