playbook_ui 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2159 → 13.18.0.pre.alpha.PBNTR191AdvancedTableFinalFixes2176
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 +4 -5
- data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +6 -2
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +2 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +3 -0
- data/lib/playbook/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e66e5423d58b5978e3a4f4cdbb8aa6d2cf49957aa3a488b225c55efa29613511
|
|
4
|
+
data.tar.gz: 92e6cf4abbbbbd196684ef9a1ba9e98c70fc320f8b50113c38601af9becaa6af
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0f408270ac43cbbee831ed5d27e43e8fa4fdc5880fb89abf48f2e33814fee3f5d4d00f758dcdbc80a2f76ffc9a872fe06c9a696a9f595e11ce6807455fdae5cb
|
|
7
|
+
data.tar.gz: a28974b35f4ad2bc06a7f76491e510dc09a121e171e056b5b4b1653afc4898395219f72b52401472973c4979c1b77c7f7c0b04f74938c5c40ac4b923c290d56e
|
|
@@ -22,15 +22,14 @@ export const CustomCell = ({
|
|
|
22
22
|
row,
|
|
23
23
|
value,
|
|
24
24
|
}: CustomCellProps & GlobalProps) => {
|
|
25
|
-
const { setExpanded, expanded } = useContext(AdvancedTableContext);
|
|
25
|
+
const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext);
|
|
26
26
|
|
|
27
27
|
const handleOnExpand = (row: Row<DataType>) => {
|
|
28
28
|
onRowToggleClick && onRowToggleClick(row);
|
|
29
29
|
setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
|
|
30
30
|
};
|
|
31
|
-
|
|
32
31
|
const RowHasChildren = row.original.children ? true : false
|
|
33
|
-
|
|
32
|
+
const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
|
|
34
33
|
|
|
35
34
|
return (
|
|
36
35
|
<div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
|
|
@@ -38,7 +37,7 @@ export const CustomCell = ({
|
|
|
38
37
|
columnGap="xs"
|
|
39
38
|
orientation="row"
|
|
40
39
|
>
|
|
41
|
-
{
|
|
40
|
+
{renderButton ? (
|
|
42
41
|
<button
|
|
43
42
|
className="gray-icon expand-toggle-icon"
|
|
44
43
|
onClick={() => handleOnExpand(row)}
|
|
@@ -55,7 +54,7 @@ export const CustomCell = ({
|
|
|
55
54
|
)}
|
|
56
55
|
</button>
|
|
57
56
|
) : null}
|
|
58
|
-
<FlexItem paddingLeft={
|
|
57
|
+
<FlexItem paddingLeft={renderButton? "none" : "xs"}>
|
|
59
58
|
{row.depth === 0 ? getValue() : value}
|
|
60
59
|
</FlexItem>
|
|
61
60
|
</Flex>
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import React from "react"
|
|
1
|
+
import React, { useContext } from "react"
|
|
2
2
|
import Flex from "../../pb_flex/_flex"
|
|
3
3
|
import Caption from "../../pb_caption/_caption"
|
|
4
4
|
import { Row, Table } from "@tanstack/react-table"
|
|
5
5
|
|
|
6
|
+
import AdvancedTableContext from "../Context/AdvancedTableContext";
|
|
6
7
|
import { ToggleIconButton } from "./ToggleIconButton"
|
|
7
8
|
import { renderCollapsibleTrail } from "./CollapsibleTrail"
|
|
8
9
|
|
|
@@ -27,8 +28,11 @@ export const SubRowHeaderRow = ({
|
|
|
27
28
|
subRowHeaders,
|
|
28
29
|
table,
|
|
29
30
|
}: SubRowHeaderRowProps & GlobalProps) => {
|
|
31
|
+
const { inlineRowLoading } = useContext(AdvancedTableContext);
|
|
32
|
+
|
|
30
33
|
const numberOfColumns = table.getAllFlatColumns().length
|
|
31
|
-
const
|
|
34
|
+
const rowHasChildren = row.original.children ? true : false
|
|
35
|
+
const canExpand = inlineRowLoading ? rowHasChildren : row.getCanExpand()
|
|
32
36
|
|
|
33
37
|
return (
|
|
34
38
|
<tr className="custom-row bg-silver">
|
|
@@ -31,6 +31,7 @@ export const TableBody = ({
|
|
|
31
31
|
columnDefinitions,
|
|
32
32
|
enableToggleExpansion,
|
|
33
33
|
handleExpandOrCollapse,
|
|
34
|
+
inlineRowLoading,
|
|
34
35
|
loading,
|
|
35
36
|
table,
|
|
36
37
|
} = useContext(AdvancedTableContext)
|
|
@@ -51,7 +52,7 @@ export const TableBody = ({
|
|
|
51
52
|
const isFirstChildofSubrow = row.depth > 0 && row.index === 0
|
|
52
53
|
const rowHasNoChildren = row.original.children && !row.original.children.length ? true : false
|
|
53
54
|
const numberOfColumns = table.getAllFlatColumns().length
|
|
54
|
-
const isDataLoading = isExpandable && rowHasNoChildren && (row.depth < columnDefinitions[0].cellAccessors?.length)
|
|
55
|
+
const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0].cellAccessors?.length)
|
|
55
56
|
|
|
56
57
|
return (
|
|
57
58
|
<React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
|
|
@@ -33,6 +33,7 @@ type AdvancedTableProps = {
|
|
|
33
33
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
|
34
34
|
id?: string;
|
|
35
35
|
initialLoadingRowsCount?: number;
|
|
36
|
+
inlineRowLoading?: boolean;
|
|
36
37
|
loading?: boolean | string;
|
|
37
38
|
onRowToggleClick?: (arg: Row<DataType>) => void;
|
|
38
39
|
onToggleExpansionClick?: (arg: Row<DataType>) => void;
|
|
@@ -55,6 +56,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
|
55
56
|
htmlOptions = {},
|
|
56
57
|
id,
|
|
57
58
|
initialLoadingRowsCount = 10,
|
|
59
|
+
inlineRowLoading = false,
|
|
58
60
|
loading,
|
|
59
61
|
onRowToggleClick,
|
|
60
62
|
onToggleExpansionClick,
|
|
@@ -219,6 +221,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
|
219
221
|
enableToggleExpansion,
|
|
220
222
|
expanded,
|
|
221
223
|
handleExpandOrCollapse,
|
|
224
|
+
inlineRowLoading,
|
|
222
225
|
loading,
|
|
223
226
|
setExpanded,
|
|
224
227
|
sortControl,
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED