playbook_ui 14.17.0.pre.alpha.PLAY20547327 → 14.17.0.pre.alpha.alphaforaudiences7167
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/RegularTableView.tsx +3 -23
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +3 -67
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +2 -1
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +19 -29
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +128 -67
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -9
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +2 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +2 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +2 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -5
- data/app/pb_kits/playbook/pb_background/_background.scss +0 -26
- data/app/pb_kits/playbook/pb_background/_background.tsx +3 -5
- data/app/pb_kits/playbook/pb_background/background.test.js +0 -5
- data/app/pb_kits/playbook/pb_background/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_background/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +45 -19
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_draggable/_draggable.scss +20 -43
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +105 -102
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +3 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +48 -50
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.jsx → _draggable_with_table_react.jsx} +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +1 -3
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +6 -9
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +1 -4
- data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +0 -68
- data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +3 -4
- 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_form_group/_form_group.scss +3 -23
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +5 -15
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +6 -39
- data/app/pb_kits/playbook/pb_layout/_layout.scss +1 -70
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -29
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +118 -322
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
- data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +43 -74
- data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +4 -21
- data/app/pb_kits/playbook/pb_overlay/_overlay.scss +22 -49
- data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +4 -15
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +7 -1
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +0 -3
- data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +1 -39
- data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +7 -19
- data/app/pb_kits/playbook/pb_table/table.rb +1 -13
- data/app/pb_kits/playbook/pb_table/table_header.rb +1 -13
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +5 -13
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_text_input/inputMask.ts +1 -8
- data/dist/chunks/_typeahead-7W5Ha5Td.js +22 -0
- data/dist/chunks/_weekday_stacked-DSKatW3m.js +45 -0
- data/dist/chunks/lib-BGzBzFZX.js +29 -0
- data/dist/chunks/{pb_form_validation-Bx1OK6xs.js → pb_form_validation-BvNy9Bd6.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 +18 -49
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +0 -66
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +0 -10
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +0 -58
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +0 -64
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +0 -8
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +0 -55
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +0 -33
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +0 -97
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +0 -35
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +0 -1
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +0 -54
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +0 -3
- data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +0 -45
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +0 -110
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +0 -5
- data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +0 -79
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +0 -63
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +0 -3
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +0 -39
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +0 -1
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +0 -40
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +0 -5
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +0 -34
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +0 -36
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +0 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +0 -94
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +0 -1
- data/dist/chunks/_typeahead-aRwivA3u.js +0 -22
- data/dist/chunks/_weekday_stacked-Bm5175-u.js +0 -45
- data/dist/chunks/lib-Cj4H6j1c.js +0 -29
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_react.md → _draggable_default.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.html.erb → _draggable_default_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_react.md → _draggable_multiple_containers.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.html.erb → _draggable_multiple_containers_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_react.md → _draggable_with_cards.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.html.erb → _draggable_with_cards_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_react.md → _draggable_with_list.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.html.erb → _draggable_with_list_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_react.md → _draggable_with_selectable_list.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.html.erb → _draggable_with_selectable_list_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_rails.md → _draggable_with_table.md} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2d4e1505953fc9d8679af10f4517e1db1910b806f2540bcba412afbaca8eb912
|
4
|
+
data.tar.gz: e1ec597e443b273d2037e5e0a572a9ca8f52ce25fb3754ccbc24edebd969377b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c5e5f58405349fa05f6942b377efee9d7c845c74dfbbe1009fe28e9c50459871f1dcc0e23f9a4bc2e190493ef648fce14e3b06bd0e697fa8a07114c95068c219
|
7
|
+
data.tar.gz: 84723e76ae32724c3926bf9ac0a7b9b048ae640635f982ca9126ae99fdbd97528215d7c7dd563e739d9a3718787a98f31ce31729a725080466de72ffb50cbf61
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useContext
|
1
|
+
import React, { useContext } from "react"
|
2
2
|
import classnames from "classnames"
|
3
3
|
import { flexRender, Row, Cell } from "@tanstack/react-table"
|
4
4
|
|
@@ -32,21 +32,9 @@ export const RegularTableView = ({
|
|
32
32
|
table,
|
33
33
|
selectableRows,
|
34
34
|
hasAnySubRows,
|
35
|
-
|
35
|
+
isPinnedLeft = false,
|
36
36
|
} = useContext(AdvancedTableContext)
|
37
37
|
|
38
|
-
|
39
|
-
useEffect(() => {
|
40
|
-
if (stickyLeftColumn && Array.isArray(stickyLeftColumn)) {
|
41
|
-
stickyLeftColumn.forEach((columnId) => {
|
42
|
-
const column = table.getColumn(columnId);
|
43
|
-
if (column && column.getCanPin()) {
|
44
|
-
column.pin('left');
|
45
|
-
}
|
46
|
-
});
|
47
|
-
}
|
48
|
-
},[stickyLeftColumn, table]);
|
49
|
-
|
50
38
|
const columnPinning = table.getState().columnPinning || { left: [] };
|
51
39
|
const columnDefinitions = table.options.meta?.columnDefinitions || [];
|
52
40
|
|
@@ -94,7 +82,7 @@ export const RegularTableView = ({
|
|
94
82
|
{row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
|
95
83
|
const isPinnedLeft = columnPinning.left.includes(cell.column.id);
|
96
84
|
const isLastCell = cell.column.parent?.columns?.at(-1)?.id === cell.column.id;
|
97
|
-
|
85
|
+
|
98
86
|
return (
|
99
87
|
<td
|
100
88
|
align="right"
|
@@ -102,17 +90,9 @@ export const RegularTableView = ({
|
|
102
90
|
`${cell.id}-cell position_relative`,
|
103
91
|
isChrome() ? "chrome-styles" : "",
|
104
92
|
isPinnedLeft && 'pinned-left',
|
105
|
-
stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft && 'sticky-left',
|
106
93
|
isLastCell && 'last-cell',
|
107
94
|
)}
|
108
95
|
key={`${cell.id}-data`}
|
109
|
-
style={{
|
110
|
-
left: isPinnedLeft
|
111
|
-
? i === 1 //Accounting for set min-width for first column
|
112
|
-
? '180px'
|
113
|
-
: `${column.getStart("left")}px`
|
114
|
-
: undefined,
|
115
|
-
}}
|
116
96
|
>
|
117
97
|
{collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
|
118
98
|
<span id={`${cell.id}-span`}>
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { useContext } from "react"
|
2
2
|
import classnames from "classnames"
|
3
|
-
import { flexRender, Header, Table
|
3
|
+
import { flexRender, Header, Table } from "@tanstack/react-table"
|
4
4
|
|
5
5
|
import { GenericObject } from "../../types"
|
6
6
|
|
@@ -8,16 +8,9 @@ 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"
|
16
11
|
|
17
12
|
import { SortIconButton } from "./SortIconButton"
|
18
13
|
import { ToggleIconButton } from "./ToggleIconButton"
|
19
|
-
import { displayIcon } from "../Utilities/IconHelpers"
|
20
|
-
import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
|
21
14
|
|
22
15
|
import { isChrome } from "../Utilities/BrowserCheck"
|
23
16
|
|
@@ -47,17 +40,11 @@ export const TableHeaderCell = ({
|
|
47
40
|
table
|
48
41
|
}: TableHeaderCellProps) => {
|
49
42
|
const {
|
50
|
-
expanded,
|
51
|
-
setExpanded,
|
52
|
-
expandByDepth,
|
53
|
-
onExpandByDepthClick,
|
54
|
-
toggleExpansionIcon,
|
55
43
|
sortControl,
|
56
44
|
responsive,
|
57
45
|
selectableRows,
|
58
46
|
hasAnySubRows,
|
59
47
|
showActionsBar,
|
60
|
-
stickyLeftColumn,
|
61
48
|
inlineRowLoading,
|
62
49
|
isActionBarVisible,
|
63
50
|
} = useContext(AdvancedTableContext);
|
@@ -89,9 +76,7 @@ const cellClassName = classnames(
|
|
89
76
|
`${isChrome() ? "chrome-styles" : ""}`,
|
90
77
|
`${enableSorting ? "table-header-cells-active" : ""}`,
|
91
78
|
{ "pinned-left": responsive === "scroll" && isPinnedLeft },
|
92
|
-
isLastHeaderCell ? "last-header-cell" : ""
|
93
|
-
stickyLeftColumn && stickyLeftColumn.length > 0 && isPinnedLeft ? 'sticky-left' : "",
|
94
|
-
|
79
|
+
isLastHeaderCell ? "last-header-cell" : ""
|
95
80
|
);
|
96
81
|
|
97
82
|
const cellId = `${loading ?
|
@@ -119,21 +104,6 @@ const isToggleExpansionEnabled =
|
|
119
104
|
justifyHeader = isLeafColumn ? "end" : "center";
|
120
105
|
}
|
121
106
|
|
122
|
-
const handleExpandDepth = (depth: number) => {
|
123
|
-
if (onExpandByDepthClick) {
|
124
|
-
const flatRows = table?.getRowModel().flatRows
|
125
|
-
onExpandByDepthClick(depth, flatRows)
|
126
|
-
}
|
127
|
-
const updated = updateExpandAndCollapseState(
|
128
|
-
table.getRowModel(),
|
129
|
-
expanded,
|
130
|
-
undefined,
|
131
|
-
depth
|
132
|
-
)
|
133
|
-
setExpanded(updated)
|
134
|
-
}
|
135
|
-
|
136
|
-
|
137
107
|
return (
|
138
108
|
<th
|
139
109
|
align="right"
|
@@ -141,13 +111,6 @@ const isToggleExpansionEnabled =
|
|
141
111
|
colSpan={header?.colSpan}
|
142
112
|
id={cellId}
|
143
113
|
key={`${header?.id}-header`}
|
144
|
-
style={{
|
145
|
-
left: isPinnedLeft
|
146
|
-
? header?.index === 1 //Accounting for set min-width for first column
|
147
|
-
? '180px'
|
148
|
-
: `${header?.column.getStart("left")}px`
|
149
|
-
: undefined,
|
150
|
-
}}
|
151
114
|
>
|
152
115
|
{header?.isPlaceholder ? null : headerChildren && header?.index === 0 ? (
|
153
116
|
<Flex alignItems="center">
|
@@ -170,36 +133,9 @@ const isToggleExpansionEnabled =
|
|
170
133
|
/>
|
171
134
|
)
|
172
135
|
}
|
173
|
-
{isToggleExpansionEnabled && hasAnySubRows &&
|
136
|
+
{isToggleExpansionEnabled && hasAnySubRows && (
|
174
137
|
<ToggleIconButton onClick={handleExpandOrCollapse} />
|
175
138
|
)}
|
176
|
-
{isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (
|
177
|
-
<Dropdown className="expand-by-depth-dropdown-wrapper"
|
178
|
-
options={expandByDepth}
|
179
|
-
>
|
180
|
-
<DropdownTrigger className="gray-icon toggle-all-icon">
|
181
|
-
<Icon icon={displayIcon(toggleExpansionIcon)[0]} />
|
182
|
-
</DropdownTrigger>
|
183
|
-
<DropdownContainer className="expand-by-depth-dropdown">
|
184
|
-
{expandByDepth.map((option:{ [key: string]: any }, index: number) => (
|
185
|
-
<DropdownOption
|
186
|
-
key={index}
|
187
|
-
option={option}
|
188
|
-
padding="none"
|
189
|
-
>
|
190
|
-
<Flex
|
191
|
-
alignItems="center"
|
192
|
-
htmlOptions={{onClick: () => {handleExpandDepth(option.depth)} }}
|
193
|
-
paddingX="sm"
|
194
|
-
paddingY="xs"
|
195
|
-
>
|
196
|
-
{option.label}
|
197
|
-
</Flex>
|
198
|
-
</DropdownOption>
|
199
|
-
))}
|
200
|
-
</DropdownContainer>
|
201
|
-
</Dropdown>
|
202
|
-
)}
|
203
139
|
|
204
140
|
{isToggleExpansionEnabledLoading &&(
|
205
141
|
<div className="loading-toggle-icon header-toggle-icon" />
|
@@ -22,9 +22,10 @@ export function useTableActions({
|
|
22
22
|
// Handle expand/collapse
|
23
23
|
const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
|
24
24
|
onToggleExpansionClick && onToggleExpansionClick(row);
|
25
|
+
|
25
26
|
const expandedState = expanded;
|
26
27
|
const targetParent = row?.parentId;
|
27
|
-
const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent
|
28
|
+
const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent);
|
28
29
|
setExpanded(updatedRows);
|
29
30
|
}, [expanded, setExpanded, onToggleExpansionClick, table]);
|
30
31
|
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { RowModel
|
1
|
+
import { RowModel } from "@tanstack/react-table"
|
2
2
|
import { ExpandedStateObject } from "./types"
|
3
3
|
import { GenericObject } from "../../types"
|
4
4
|
|
@@ -14,40 +14,30 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
|
|
14
14
|
export const updateExpandAndCollapseState = (
|
15
15
|
tableRows: RowModel<GenericObject>,
|
16
16
|
expanded: Record<string, boolean>,
|
17
|
-
targetParent
|
18
|
-
targetDepth?: number,
|
17
|
+
targetParent: string
|
19
18
|
) => {
|
20
19
|
const updateExpandedRows: Record<string, boolean> = {};
|
21
|
-
const rows =
|
20
|
+
const rows = tableRows.rows;
|
22
21
|
|
23
|
-
|
22
|
+
let isExpansionConsistent = true;
|
23
|
+
const areRowsExpanded = new Set<boolean>();
|
24
24
|
|
25
25
|
for (const row of rows) {
|
26
|
-
const shouldBeUpdated =
|
27
|
-
|
28
|
-
? row.depth <= targetDepth
|
29
|
-
: targetParent === undefined
|
30
|
-
? row.depth === 0
|
31
|
-
: targetParent === row.parentId;
|
32
|
-
|
26
|
+
const shouldBeUpdated = targetParent === undefined ? row.depth === 0 : targetParent === row.parentId;
|
27
|
+
|
33
28
|
if (shouldBeUpdated) {
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
? true
|
47
|
-
: row.depth === targetDepth;
|
48
|
-
|
49
|
-
if (shouldUpdate) {
|
50
|
-
updateExpandedRows[row.id] = isExpandAction;
|
29
|
+
const isExpanded = row.getIsExpanded();
|
30
|
+
areRowsExpanded.add(isExpanded);
|
31
|
+
|
32
|
+
updateExpandedRows[row.id] = !isExpansionConsistent ? true : !isExpanded;
|
33
|
+
|
34
|
+
if (areRowsExpanded.size > 1) {
|
35
|
+
isExpansionConsistent = false;
|
36
|
+
// If expansion inconsistent, ensure all target rows are set to expand
|
37
|
+
for (const key in updateExpandedRows) {
|
38
|
+
updateExpandedRows[key] = true;
|
39
|
+
}
|
40
|
+
}
|
51
41
|
}
|
52
42
|
}
|
53
43
|
|
@@ -8,7 +8,6 @@
|
|
8
8
|
@import "../tokens/screen_sizes";
|
9
9
|
@import "../tokens/shadows";
|
10
10
|
@import "../tokens/positioning";
|
11
|
-
@import "./scss_partials/advanced_table_sticky_mixin";
|
12
11
|
|
13
12
|
.pb_advanced_table {
|
14
13
|
$border-color: 1px solid $border_light;
|
@@ -94,8 +93,8 @@
|
|
94
93
|
border-right: 1px solid $border_light !important;
|
95
94
|
}
|
96
95
|
.table-header-cells-custom {
|
97
|
-
text-align:
|
98
|
-
[class^=
|
96
|
+
text-align:center;
|
97
|
+
[class^=pb_checkbox_kit] .pb_checkbox_label {
|
99
98
|
padding-left: 0px;
|
100
99
|
}
|
101
100
|
}
|
@@ -105,7 +104,7 @@
|
|
105
104
|
}
|
106
105
|
// Right align header content of first data column in selectable row no subrow setup
|
107
106
|
&.selectable-rows-enabled {
|
108
|
-
tr {
|
107
|
+
tr {
|
109
108
|
th:nth-child(2),
|
110
109
|
.pb_flex_kit_orientation_row_justify_content_start_align_items_center_spacing_none.gap_none {
|
111
110
|
justify-content: flex-end;
|
@@ -123,20 +122,13 @@
|
|
123
122
|
}
|
124
123
|
|
125
124
|
// Set fixed width for checkbox column
|
126
|
-
&.table-header-cells-custom,
|
125
|
+
&.table-header-cells-custom,
|
127
126
|
&.checkbox-cell.checkbox-cell-header {
|
128
127
|
width: 40px !important;
|
129
128
|
min-width: 40px !important;
|
130
129
|
box-sizing: border-box !important;
|
131
130
|
}
|
132
131
|
}
|
133
|
-
.expand-by-depth-dropdown-wrapper {
|
134
|
-
position: unset !important;
|
135
|
-
}
|
136
|
-
.expand-by-depth-dropdown {
|
137
|
-
width: unset !important;
|
138
|
-
text-align: left;
|
139
|
-
}
|
140
132
|
}
|
141
133
|
|
142
134
|
.pb_advanced_table_body {
|
@@ -153,7 +145,7 @@
|
|
153
145
|
.checkbox-cell {
|
154
146
|
display: flex;
|
155
147
|
justify-content: center;
|
156
|
-
[class^=
|
148
|
+
[class^=pb_checkbox_kit] .pb_checkbox_label {
|
157
149
|
padding-left: 0px;
|
158
150
|
}
|
159
151
|
}
|
@@ -181,7 +173,7 @@
|
|
181
173
|
}
|
182
174
|
}
|
183
175
|
td {
|
184
|
-
[class^=
|
176
|
+
[class^=pb_text_input_kit] .text_input_wrapper input {
|
185
177
|
padding: 0 $space_xxs;
|
186
178
|
font-size: 14px;
|
187
179
|
text-align: right;
|
@@ -238,12 +230,12 @@
|
|
238
230
|
max-height: 1920px;
|
239
231
|
overflow-y: auto;
|
240
232
|
}
|
241
|
-
|
233
|
+
|
242
234
|
// Fullscreen
|
243
235
|
&.advanced-table-allow-fullscreen {
|
244
236
|
transition: all 0.3s ease;
|
245
237
|
}
|
246
|
-
|
238
|
+
|
247
239
|
&.advanced-table-fullscreen {
|
248
240
|
background-color: $bg_light;
|
249
241
|
box-sizing: border-box;
|
@@ -256,10 +248,7 @@
|
|
256
248
|
z-index: $z_10;
|
257
249
|
|
258
250
|
.pb_table {
|
259
|
-
th,
|
260
|
-
td,
|
261
|
-
div,
|
262
|
-
button {
|
251
|
+
th, td, div, button {
|
263
252
|
font-size: calc(100%);
|
264
253
|
}
|
265
254
|
box-sizing: border-box;
|
@@ -277,7 +266,7 @@
|
|
277
266
|
}
|
278
267
|
}
|
279
268
|
}
|
280
|
-
|
269
|
+
|
281
270
|
.advanced-table-fullscreen-header {
|
282
271
|
background-color: $white;
|
283
272
|
height: 44px;
|
@@ -383,32 +372,78 @@
|
|
383
372
|
width: 2px;
|
384
373
|
}
|
385
374
|
|
386
|
-
// Sticky Left Columns Styling
|
387
|
-
&[class*="advanced-table-sticky-left-columns"] {
|
388
|
-
overflow-x: scroll;
|
389
|
-
.sticky-left {
|
390
|
-
position: sticky !important;
|
391
|
-
z-index: 2;
|
392
|
-
background-color: $white;
|
393
|
-
box-shadow: $shadow_deep;
|
394
|
-
}
|
395
|
-
@include advanced-table-sticky-mixin(
|
396
|
-
$border_light,
|
397
|
-
$white,
|
398
|
-
lighten($silver, $opacity_7)
|
399
|
-
);
|
400
|
-
}
|
401
|
-
|
402
375
|
// Responsive Styles
|
403
376
|
@media only screen and (max-width: $screen-xl-min) {
|
404
377
|
&[class*="advanced-table-responsive-scroll"] {
|
378
|
+
border-radius: 4px;
|
379
|
+
box-shadow: 1px 0 0 0px $border_light,
|
380
|
+
-1px 0 0 0px $border_light;
|
381
|
+
display: block;
|
405
382
|
overflow-x: auto;
|
406
383
|
width: 100%;
|
407
|
-
|
408
|
-
|
409
|
-
|
410
|
-
|
411
|
-
|
384
|
+
[class^=pb_table].table-sm.table-card thead tr th:first-child,
|
385
|
+
[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
|
386
|
+
border-left-width: 0px !important;
|
387
|
+
}
|
388
|
+
[class^=pb_table].table-sm.table-card thead tr th:last-child,
|
389
|
+
[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
|
390
|
+
border-right-width: 0px;
|
391
|
+
}
|
392
|
+
[class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
|
393
|
+
[class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
|
394
|
+
border-radius: 0 0 0 0;
|
395
|
+
}
|
396
|
+
.table-header-cells:first-child,
|
397
|
+
td:first-child,
|
398
|
+
.pb_table_td:first-child,
|
399
|
+
.checkbox-cell.checkbox-cell-header:first-child,
|
400
|
+
[class*="pinned-left"] {
|
401
|
+
background-color: $white;
|
402
|
+
box-shadow: $shadow_deep !important;
|
403
|
+
position: sticky !important;
|
404
|
+
left: 0;
|
405
|
+
z-index: 2;
|
406
|
+
}
|
407
|
+
.bg-silver td:first-child {
|
408
|
+
background-color: lighten($silver, $opacity_7);
|
409
|
+
}
|
410
|
+
.bg-white td:first-child {
|
411
|
+
background-color: $white;
|
412
|
+
}
|
413
|
+
|
414
|
+
.virtualized-table-row {
|
415
|
+
&.bg-silver td:first-child {
|
416
|
+
background-color: lighten($silver, $opacity_7);
|
417
|
+
}
|
418
|
+
&.bg-white td:first-child {
|
419
|
+
background-color: $white;
|
420
|
+
}
|
421
|
+
&.bg-row-selection td:first-child {
|
422
|
+
background-color: $info_subtle;
|
423
|
+
}
|
424
|
+
}
|
425
|
+
|
426
|
+
.row-selection-actions-card {
|
427
|
+
border-right-width: 0px;
|
428
|
+
border-left-width: 0px;
|
429
|
+
position: sticky;
|
430
|
+
top: 0;
|
431
|
+
left: 0;
|
432
|
+
border-radius: unset;
|
433
|
+
}
|
434
|
+
.checkbox-cell {
|
435
|
+
display: table-cell !important;
|
436
|
+
}
|
437
|
+
.sticky-header {
|
438
|
+
thead {
|
439
|
+
th:first-child {
|
440
|
+
box-shadow: 1px 0 10px -2px $border_light !important;
|
441
|
+
}
|
442
|
+
}
|
443
|
+
.pb_advanced_table_header {
|
444
|
+
box-shadow: none !important;
|
445
|
+
}
|
446
|
+
}
|
412
447
|
}
|
413
448
|
}
|
414
449
|
@media only screen and (min-width: $screen-xl-min) {
|
@@ -445,9 +480,7 @@
|
|
445
480
|
}
|
446
481
|
}
|
447
482
|
|
448
|
-
.table-header-cells:first-child,
|
449
|
-
td:first-child,
|
450
|
-
.pb_table_td:first-child {
|
483
|
+
.table-header-cells:first-child, td:first-child, .pb_table_td:first-child {
|
451
484
|
box-shadow: 1px 0px 0px 0px $border_dark !important;
|
452
485
|
}
|
453
486
|
|
@@ -455,14 +488,12 @@
|
|
455
488
|
background-color: $border_dark !important;
|
456
489
|
}
|
457
490
|
|
458
|
-
.sort-button-icon,
|
459
|
-
.header-sort-button > div,
|
460
|
-
.pb_th_link {
|
491
|
+
.sort-button-icon, .header-sort-button > div, .pb_th_link {
|
461
492
|
color: $white !important;
|
462
493
|
}
|
463
494
|
|
464
495
|
.gray-icon {
|
465
|
-
color:
|
496
|
+
color: $text_dk_light !important;
|
466
497
|
}
|
467
498
|
|
468
499
|
.sticky-header {
|
@@ -505,33 +536,63 @@
|
|
505
536
|
z-index: $z_10;
|
506
537
|
}
|
507
538
|
|
508
|
-
&[class*="advanced-table-sticky-left-columns"] {
|
509
|
-
.sticky-left {
|
510
|
-
background-color: $bg_dark;
|
511
|
-
}
|
512
|
-
@include advanced-table-sticky-mixin(
|
513
|
-
$border_dark,
|
514
|
-
$bg_dark_card,
|
515
|
-
$bg_dark
|
516
|
-
);
|
517
|
-
}
|
518
|
-
|
519
539
|
// Dark Mode Responsive Styles
|
520
540
|
@media only screen and (max-width: $screen-xl-min) {
|
521
541
|
&[class*="advanced-table-responsive-scroll"] {
|
542
|
+
border-radius: 4px;
|
543
|
+
box-shadow: 1px 0 0 0px $border_dark,
|
544
|
+
-1px 0 0 0px $border_dark;
|
545
|
+
display: block;
|
546
|
+
overflow-x: scroll;
|
547
|
+
width: 100%;
|
548
|
+
[class^=pb_table].table-sm.table-card thead tr th:first-child,
|
549
|
+
[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
|
550
|
+
border-left-width: 0px;
|
551
|
+
}
|
552
|
+
[class^=pb_table].table-sm.table-card thead tr th:last-child,
|
553
|
+
[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
|
554
|
+
border-right-width: 0px;
|
555
|
+
}
|
556
|
+
[class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
|
557
|
+
[class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
|
558
|
+
border-radius: 0 0 0 0;
|
559
|
+
}
|
560
|
+
.table-header-cells:first-child,
|
561
|
+
td:first-child,
|
562
|
+
.pb_table_td:first-child,
|
563
|
+
.checkbox-cell.checkbox-cell-header:first-child,
|
564
|
+
[class*="pinned-left"] {
|
565
|
+
background: $bg_dark_card;
|
566
|
+
border-right: $border_dark;
|
567
|
+
box-shadow: $shadow_deep !important;
|
568
|
+
position: sticky !important;
|
569
|
+
}
|
570
|
+
.bg-silver td:first-child {
|
571
|
+
background-color: $bg_dark;
|
572
|
+
}
|
573
|
+
.bg-white td:first-child {
|
574
|
+
background-color: $bg_dark_card;
|
575
|
+
}
|
576
|
+
|
577
|
+
// Dark mode virtualized rows
|
578
|
+
.virtualized-table-row {
|
579
|
+
&.bg-silver td:first-child {
|
580
|
+
background-color: $bg_dark;
|
581
|
+
}
|
582
|
+
&.bg-white td:first-child {
|
583
|
+
background-color: $bg_dark_card;
|
584
|
+
}
|
585
|
+
}
|
586
|
+
|
522
587
|
.sticky-header {
|
523
588
|
thead {
|
524
589
|
th:first-child {
|
525
|
-
background: $
|
590
|
+
background: $bg_dark;
|
591
|
+
box-shadow: 1px 0 10px -2px $border_dark !important;
|
526
592
|
}
|
527
593
|
}
|
528
594
|
}
|
529
|
-
@include advanced-table-sticky-mixin(
|
530
|
-
$border_dark,
|
531
|
-
$bg_dark_card,
|
532
|
-
$bg_dark
|
533
|
-
);
|
534
595
|
}
|
535
596
|
}
|
536
597
|
}
|
537
|
-
}
|
598
|
+
}
|
@@ -38,8 +38,6 @@ type AdvancedTableProps = {
|
|
38
38
|
data?: { [key: string]: string }
|
39
39
|
enableToggleExpansion?: "all" | "header" | "none"
|
40
40
|
expandedControl?: GenericObject
|
41
|
-
expandByDepth?: { [key: string]: string | number }
|
42
|
-
onExpandByDepthClick?: (arg: number, arg1: any) => void
|
43
41
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
44
42
|
id?: string
|
45
43
|
initialLoadingRowsCount?: number
|
@@ -75,8 +73,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
75
73
|
data = {},
|
76
74
|
enableToggleExpansion = "header",
|
77
75
|
expandedControl,
|
78
|
-
expandByDepth,
|
79
|
-
onExpandByDepthClick,
|
80
76
|
htmlOptions = {},
|
81
77
|
id,
|
82
78
|
initialLoadingRowsCount = 10,
|
@@ -91,7 +87,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
91
87
|
showActionsBar = true,
|
92
88
|
selectableRows,
|
93
89
|
sortControl,
|
94
|
-
stickyLeftColumn,
|
95
90
|
tableData,
|
96
91
|
tableOptions,
|
97
92
|
tableProps,
|
@@ -238,7 +233,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
238
233
|
'advanced-table-fullscreen': isFullscreen,
|
239
234
|
'advanced-table-allow-fullscreen': allowFullScreen
|
240
235
|
},
|
241
|
-
{'advanced-table-sticky-left-columns': stickyLeftColumn && stickyLeftColumn.length > 0},
|
242
236
|
globalProps(props),
|
243
237
|
className
|
244
238
|
);
|
@@ -284,7 +278,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
284
278
|
columnDefinitions={columnDefinitions}
|
285
279
|
enableToggleExpansion={enableToggleExpansion}
|
286
280
|
enableVirtualization={virtualizedRows}
|
287
|
-
expandByDepth={expandByDepth}
|
288
281
|
expanded={expanded}
|
289
282
|
expandedControl={expandedControl}
|
290
283
|
handleExpandOrCollapse={handleExpandOrCollapse}
|
@@ -293,13 +286,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
293
286
|
isActionBarVisible={isActionBarVisible}
|
294
287
|
isFullscreen={isFullscreen}
|
295
288
|
loading={loading}
|
296
|
-
onExpandByDepthClick={onExpandByDepthClick}
|
297
289
|
responsive={responsive}
|
298
290
|
selectableRows={selectableRows}
|
299
291
|
setExpanded={setExpanded}
|
300
292
|
showActionsBar={showActionsBar}
|
301
293
|
sortControl={sortControl}
|
302
|
-
stickyLeftColumn={stickyLeftColumn}
|
303
294
|
subRowHeaders={tableOptions?.subRowHeaders}
|
304
295
|
table={table}
|
305
296
|
tableContainerRef={tableWrapperRef}
|
@@ -30,4 +30,4 @@
|
|
30
30
|
}
|
31
31
|
] %>
|
32
32
|
|
33
|
-
<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: {
|
33
|
+
<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { container: false, sticky: true }}) %>
|
@@ -37,13 +37,14 @@ const AdvancedTableTableProps = (props) => {
|
|
37
37
|
|
38
38
|
const tableProps = {
|
39
39
|
container: false,
|
40
|
-
|
40
|
+
sticky: true
|
41
41
|
}
|
42
42
|
|
43
43
|
return (
|
44
44
|
<div>
|
45
45
|
<AdvancedTable
|
46
46
|
columnDefinitions={columnDefinitions}
|
47
|
+
responsive="none"
|
47
48
|
tableData={MOCK_DATA}
|
48
49
|
tableProps={tableProps}
|
49
50
|
{...props}
|
@@ -1,3 +1,3 @@
|
|
1
|
-
This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table
|
1
|
+
This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `table_props` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table).
|
2
2
|
|
3
|
-
This doc example showcases
|
3
|
+
This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#table-props-sticky-header) doc example below.
|
@@ -1,3 +1,3 @@
|
|
1
1
|
This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with its own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).
|
2
2
|
|
3
|
-
This doc example showcases
|
3
|
+
This doc example showcases how to set a sticky header for a nonresponsive table. To achieve sticky header AND responsive functionality, see the ["Table Props Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#table-props-sticky-header) doc example below.
|