playbook_ui 14.10.0.pre.rc.11 → 14.10.0.pre.rc.13
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_collapsible/_collapsible.tsx +9 -4
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +2 -2
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +75 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +108 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +94 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md +0 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +83 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +120 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_table/styles/_all.scss +2 -1
- data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +35 -0
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +106 -1
- data/dist/chunks/{_typeahead-4sdDeM4X.js → _typeahead-DCXvj_rm.js} +3 -3
- data/dist/chunks/_weekday_stacked-FHf01JZY.js +45 -0
- data/dist/chunks/{lib-CVPInSs5.js → lib-BBLdPbau.js} +3 -3
- data/dist/chunks/{pb_form_validation-CDLJ5eAG.js → pb_form_validation-CbtUE6Nr.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 +17 -6
- data/dist/chunks/_weekday_stacked-CblTZ9cd.js +0 -45
@@ -7,14 +7,21 @@ import {
|
|
7
7
|
buildHtmlProps,
|
8
8
|
} from "../../utilities/props";
|
9
9
|
import { globalProps } from "../../utilities/globalProps";
|
10
|
+
import Collapsible from "../../pb_collapsible/_collapsible";
|
11
|
+
import useCollapsible from "../../pb_collapsible/useCollapsible";
|
10
12
|
|
11
13
|
type TableRowPropTypes = {
|
12
14
|
aria?: { [key: string]: string };
|
13
15
|
children: React.ReactNode[] | React.ReactNode;
|
14
16
|
className: string;
|
17
|
+
collapsible?: boolean;
|
18
|
+
collapsibleContent?: React.ReactNode[] | React.ReactNode;
|
19
|
+
collapsibleSideHighlight?: boolean;
|
15
20
|
data?: { [key: string]: string };
|
21
|
+
dark?: boolean;
|
16
22
|
htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
|
17
23
|
id?: string;
|
24
|
+
toggleCellId?: string;
|
18
25
|
sideHighlightColor: string;
|
19
26
|
tag?: "table" | "div";
|
20
27
|
};
|
@@ -23,10 +30,15 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
|
|
23
30
|
const {
|
24
31
|
aria = {},
|
25
32
|
children,
|
33
|
+
collapsible,
|
34
|
+
collapsibleContent,
|
35
|
+
collapsibleSideHighlight = true,
|
26
36
|
className,
|
27
37
|
data = {},
|
38
|
+
dark = false,
|
28
39
|
htmlOptions = {},
|
29
40
|
id,
|
41
|
+
toggleCellId,
|
30
42
|
sideHighlightColor = "none",
|
31
43
|
tag = "table",
|
32
44
|
} = props;
|
@@ -36,17 +48,110 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
|
|
36
48
|
const htmlProps = buildHtmlProps(htmlOptions);
|
37
49
|
const sideHighlightClass =
|
38
50
|
sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
|
51
|
+
|
52
|
+
const [isCollapsed, setIsCollapsed] = useCollapsible(true);
|
53
|
+
|
54
|
+
const collapsibleRow = collapsible && isCollapsed === true ? "collapsible_table_row" : null;
|
39
55
|
const classes = classnames(
|
40
56
|
buildCss("pb_table_row_kit", sideHighlightClass),
|
41
57
|
"pb_table_tr",
|
58
|
+
collapsibleRow,
|
42
59
|
globalProps(props),
|
43
60
|
className
|
44
61
|
);
|
45
62
|
const isTableTag = tag === "table";
|
46
63
|
|
64
|
+
// const [isCollapsed, setIsCollapsed] = useCollapsible(true);
|
65
|
+
|
66
|
+
const colSpan = React.Children.count(children);
|
67
|
+
|
68
|
+
const handleRowClick = (event: React.MouseEvent) => {
|
69
|
+
if (toggleCellId) {
|
70
|
+
const target = event.target as HTMLElement;
|
71
|
+
const clickedCell = target.closest(`#${toggleCellId}`);
|
72
|
+
const isIconClick =
|
73
|
+
target instanceof SVGElement &&
|
74
|
+
(target.matches("svg.pb_custom_icon") || target.closest("svg.pb_custom_icon"));
|
75
|
+
|
76
|
+
if (clickedCell || isIconClick) {
|
77
|
+
setIsCollapsed(!isCollapsed);
|
78
|
+
}
|
79
|
+
} else {
|
80
|
+
setIsCollapsed(!isCollapsed);
|
81
|
+
}
|
82
|
+
};
|
83
|
+
|
47
84
|
return (
|
48
85
|
<>
|
49
|
-
{
|
86
|
+
{collapsible ? (
|
87
|
+
isTableTag ? (
|
88
|
+
<>
|
89
|
+
<tr
|
90
|
+
{...ariaProps}
|
91
|
+
{...dataProps}
|
92
|
+
{...htmlProps}
|
93
|
+
className={classes}
|
94
|
+
id={id}
|
95
|
+
onClick={(e)=>handleRowClick(e)}
|
96
|
+
style={{ cursor: toggleCellId ? "default" : "pointer" }}
|
97
|
+
>
|
98
|
+
{children}
|
99
|
+
</tr>
|
100
|
+
<tr>
|
101
|
+
<Collapsible
|
102
|
+
collapsed={isCollapsed}
|
103
|
+
dark={dark}
|
104
|
+
htmlOptions={{ colSpan: colSpan }}
|
105
|
+
padding="none"
|
106
|
+
tag="td"
|
107
|
+
>
|
108
|
+
<tr/>
|
109
|
+
<Collapsible.Content
|
110
|
+
className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
|
111
|
+
dark={dark}
|
112
|
+
margin="none"
|
113
|
+
padding="none"
|
114
|
+
>
|
115
|
+
{collapsibleContent}
|
116
|
+
</Collapsible.Content>
|
117
|
+
</Collapsible>
|
118
|
+
</tr>
|
119
|
+
</>
|
120
|
+
) : (
|
121
|
+
<>
|
122
|
+
<div
|
123
|
+
{...ariaProps}
|
124
|
+
{...dataProps}
|
125
|
+
{...htmlProps}
|
126
|
+
className={classes}
|
127
|
+
id={id}
|
128
|
+
onClick={handleRowClick}
|
129
|
+
style={{ cursor: "pointer" }}
|
130
|
+
>
|
131
|
+
{children}
|
132
|
+
</div>
|
133
|
+
<tr>
|
134
|
+
<Collapsible
|
135
|
+
collapsed={isCollapsed}
|
136
|
+
dark={dark}
|
137
|
+
htmlOptions={{ colSpan: colSpan }}
|
138
|
+
padding="none"
|
139
|
+
tag="td"
|
140
|
+
>
|
141
|
+
<tr/>
|
142
|
+
<Collapsible.Content
|
143
|
+
className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
|
144
|
+
dark={dark}
|
145
|
+
margin="none"
|
146
|
+
padding="none"
|
147
|
+
>
|
148
|
+
{collapsibleContent}
|
149
|
+
</Collapsible.Content>
|
150
|
+
</Collapsible>
|
151
|
+
</tr>
|
152
|
+
</>
|
153
|
+
)
|
154
|
+
) : isTableTag ? (
|
50
155
|
<tr
|
51
156
|
{...ariaProps}
|
52
157
|
{...dataProps}
|