playbook_ui 14.9.0.pre.alpha.PBNTR746datepickerdefaultbug4903 → 14.9.0.pre.alpha.PLAY1660reactdropzone5020
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_bar_graph/docs/_bar_graph_custom.jsx +53 -49
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb +29 -36
- 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_date_picker/date_picker_helper.ts +2 -4
- data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +2 -2
- data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +24 -15
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx +3 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx +4 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +1 -1
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +30 -11
- data/app/pb_kits/playbook/pb_link/_link.scss +3 -3
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx +166 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +2 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx +89 -0
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_skeleton_loading/docs/index.js +2 -0
- 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/app/pb_kits/playbook/pb_text_input/_text_input.tsx +35 -3
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx +88 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_text_input/inputMask.ts +64 -0
- data/app/pb_kits/playbook/pb_text_input/text_input.test.js +139 -2
- data/dist/chunks/_typeahead-CZ_5SxHq.js +36 -0
- data/dist/chunks/_weekday_stacked-D345GDEZ.js +45 -0
- data/dist/chunks/lib-CuCy3_xO.js +29 -0
- data/dist/chunks/{pb_form_validation-DXJs12Hd.js → pb_form_validation-D37k10a0.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +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 +21 -6
- data/dist/chunks/_typeahead-8iXlv4ii.js +0 -22
- data/dist/chunks/_weekday_stacked-QiMNKnzf.js +0 -45
- data/dist/chunks/lib-orI4wF5u.js +0 -29
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
|
|
3
|
+
|
|
4
|
+
const SortingChangeCallback = (sortOptions) => {
|
|
5
|
+
alert(JSON.stringify(sortOptions[0]))
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const SkeletonLoadingFilter = (props) => {
|
|
9
|
+
const isLoading = true
|
|
10
|
+
|
|
11
|
+
const options = [
|
|
12
|
+
{ value: 'USA' },
|
|
13
|
+
{ value: 'Canada' },
|
|
14
|
+
{ value: 'Brazil' },
|
|
15
|
+
{ value: 'Philippines' },
|
|
16
|
+
{ value: 'A galaxy far far away, like really far away...' },
|
|
17
|
+
]
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<div>
|
|
21
|
+
<div>
|
|
22
|
+
{isLoading ? (
|
|
23
|
+
<Card
|
|
24
|
+
marginBottom="lg"
|
|
25
|
+
{...props}
|
|
26
|
+
>
|
|
27
|
+
<Flex
|
|
28
|
+
alignItems="center"
|
|
29
|
+
justify="between"
|
|
30
|
+
orientation="row"
|
|
31
|
+
>
|
|
32
|
+
<Flex
|
|
33
|
+
alignItems="center"
|
|
34
|
+
justify="start"
|
|
35
|
+
orientation="row"
|
|
36
|
+
>
|
|
37
|
+
<SkeletonLoading
|
|
38
|
+
borderRadius="rounded"
|
|
39
|
+
height="40px"
|
|
40
|
+
marginRight="sm"
|
|
41
|
+
width="40px"
|
|
42
|
+
{...props}
|
|
43
|
+
/>
|
|
44
|
+
<SkeletonLoading
|
|
45
|
+
height="16px"
|
|
46
|
+
marginRight="md"
|
|
47
|
+
width="80px"
|
|
48
|
+
{...props}
|
|
49
|
+
/>
|
|
50
|
+
</Flex>
|
|
51
|
+
<Flex
|
|
52
|
+
alignItems="center"
|
|
53
|
+
justify="end"
|
|
54
|
+
orientation="row"
|
|
55
|
+
>
|
|
56
|
+
<SkeletonLoading
|
|
57
|
+
height="18px"
|
|
58
|
+
width="120px"
|
|
59
|
+
{...props}
|
|
60
|
+
/>
|
|
61
|
+
</Flex>
|
|
62
|
+
</Flex>
|
|
63
|
+
</Card>
|
|
64
|
+
) : (
|
|
65
|
+
<Filter
|
|
66
|
+
filters={{ 'Full Name': 'John Wick' }}
|
|
67
|
+
marginBottom="lg"
|
|
68
|
+
minWidth="375px"
|
|
69
|
+
results={546}
|
|
70
|
+
sortOptions={{
|
|
71
|
+
popularity: 'Popularity',
|
|
72
|
+
// eslint-disable-next-line
|
|
73
|
+
manager_title: 'Manager\'s Title',
|
|
74
|
+
// eslint-disable-next-line
|
|
75
|
+
manager_name: 'Manager\'s Name',
|
|
76
|
+
}}
|
|
77
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
|
78
|
+
>
|
|
79
|
+
{({ closePopover }) => (
|
|
80
|
+
<form>
|
|
81
|
+
<TextInput
|
|
82
|
+
label="Example Text Field"
|
|
83
|
+
placeholder="Enter Text"
|
|
84
|
+
/>
|
|
85
|
+
<Select
|
|
86
|
+
blankSelection="Select One..."
|
|
87
|
+
label="Example Collection Select"
|
|
88
|
+
name="Collection Select"
|
|
89
|
+
options={options}
|
|
90
|
+
/>
|
|
91
|
+
<Flex spacing="between">
|
|
92
|
+
<Button
|
|
93
|
+
onClick={closePopover}
|
|
94
|
+
text="Filter"
|
|
95
|
+
/>
|
|
96
|
+
<Button
|
|
97
|
+
text="Defaults"
|
|
98
|
+
variant="secondary"
|
|
99
|
+
/>
|
|
100
|
+
</Flex>
|
|
101
|
+
</form>
|
|
102
|
+
)}
|
|
103
|
+
</Filter>
|
|
104
|
+
)}
|
|
105
|
+
</div>
|
|
106
|
+
<div>
|
|
107
|
+
{isLoading ? (
|
|
108
|
+
<SkeletonLoading
|
|
109
|
+
height="127px"
|
|
110
|
+
marginBottom="lg"
|
|
111
|
+
width="100%"
|
|
112
|
+
{...props}
|
|
113
|
+
/>
|
|
114
|
+
) : (
|
|
115
|
+
<Filter
|
|
116
|
+
double
|
|
117
|
+
filters={{
|
|
118
|
+
'Full Name': 'John Wick',
|
|
119
|
+
'City': 'San Francisco',
|
|
120
|
+
}}
|
|
121
|
+
marginBottom="xl"
|
|
122
|
+
minWidth="375px"
|
|
123
|
+
onSortChange={SortingChangeCallback}
|
|
124
|
+
results={1}
|
|
125
|
+
sortOptions={{
|
|
126
|
+
popularity: 'Popularity',
|
|
127
|
+
// eslint-disable-next-line
|
|
128
|
+
manager_title: 'Manager\'s Title',
|
|
129
|
+
// eslint-disable-next-line
|
|
130
|
+
manager_name: 'Manager\'s Name',
|
|
131
|
+
}}
|
|
132
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
|
133
|
+
>
|
|
134
|
+
{({ closePopover }) => (
|
|
135
|
+
<form>
|
|
136
|
+
<TextInput
|
|
137
|
+
label="Full Name"
|
|
138
|
+
placeholder="Enter name"
|
|
139
|
+
/>
|
|
140
|
+
<Select
|
|
141
|
+
blankSelection="Select One..."
|
|
142
|
+
label="Territory"
|
|
143
|
+
maxWidth="sm"
|
|
144
|
+
name="location"
|
|
145
|
+
options={options}
|
|
146
|
+
/>
|
|
147
|
+
<Flex spacing="between">
|
|
148
|
+
<Button
|
|
149
|
+
onClick={closePopover}
|
|
150
|
+
text="Filter"
|
|
151
|
+
/>
|
|
152
|
+
<Button
|
|
153
|
+
text="Defaults"
|
|
154
|
+
variant="secondary"
|
|
155
|
+
/>
|
|
156
|
+
</Flex>
|
|
157
|
+
</form>
|
|
158
|
+
)}
|
|
159
|
+
</Filter>
|
|
160
|
+
)}
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
)
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
export default SkeletonLoadingFilter;
|
|
@@ -20,6 +20,7 @@ const SkeletonLoadingHeightWidth = (props) => (
|
|
|
20
20
|
<Card htmlOptions={{ style: { height: '200px', width: '100%' }}}
|
|
21
21
|
marginBottom="md"
|
|
22
22
|
padding="none"
|
|
23
|
+
{...props}
|
|
23
24
|
>
|
|
24
25
|
<SkeletonLoading
|
|
25
26
|
borderRadius="md"
|
|
@@ -31,6 +32,7 @@ const SkeletonLoadingHeightWidth = (props) => (
|
|
|
31
32
|
</Card>
|
|
32
33
|
<Card htmlOptions={{ style: { height: '200px', width: '100%' }}}
|
|
33
34
|
padding="none"
|
|
35
|
+
{...props}
|
|
34
36
|
>
|
|
35
37
|
<SkeletonLoading
|
|
36
38
|
borderRadius="md"
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Flex, SkeletonLoading, User } from "playbook-ui";
|
|
3
|
+
|
|
4
|
+
const SkeletonLoadingUser = (props) => {
|
|
5
|
+
const isLoading = true
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<div>
|
|
9
|
+
<div>
|
|
10
|
+
{isLoading ? (
|
|
11
|
+
<Flex alignItems="center">
|
|
12
|
+
<SkeletonLoading
|
|
13
|
+
borderRadius="rounded"
|
|
14
|
+
height="38px"
|
|
15
|
+
paddingRight="sm"
|
|
16
|
+
width="38px"
|
|
17
|
+
{...props}
|
|
18
|
+
/>
|
|
19
|
+
<SkeletonLoading
|
|
20
|
+
gap="xxs"
|
|
21
|
+
height="18px"
|
|
22
|
+
stack="2"
|
|
23
|
+
width="161px"
|
|
24
|
+
{...props}
|
|
25
|
+
/>
|
|
26
|
+
</Flex>
|
|
27
|
+
) : (
|
|
28
|
+
<User
|
|
29
|
+
align="left"
|
|
30
|
+
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
|
31
|
+
name="Anna Black"
|
|
32
|
+
orientation="horizontal"
|
|
33
|
+
title="Remodeling Consultant"
|
|
34
|
+
{...props}
|
|
35
|
+
/>
|
|
36
|
+
)}
|
|
37
|
+
</div>
|
|
38
|
+
<div>
|
|
39
|
+
{isLoading ? (
|
|
40
|
+
<Flex
|
|
41
|
+
alignItems="start"
|
|
42
|
+
paddingTop="md"
|
|
43
|
+
>
|
|
44
|
+
<Flex
|
|
45
|
+
alignItems="center"
|
|
46
|
+
flexDirection="column"
|
|
47
|
+
>
|
|
48
|
+
<SkeletonLoading
|
|
49
|
+
borderRadius="rounded"
|
|
50
|
+
height="80px"
|
|
51
|
+
paddingBottom="xs"
|
|
52
|
+
width="80px"
|
|
53
|
+
{...props}
|
|
54
|
+
/>
|
|
55
|
+
<SkeletonLoading
|
|
56
|
+
height="32px"
|
|
57
|
+
paddingBottom="xxs"
|
|
58
|
+
width="144px"
|
|
59
|
+
{...props}
|
|
60
|
+
/>
|
|
61
|
+
<SkeletonLoading
|
|
62
|
+
height="21px"
|
|
63
|
+
width="164px"
|
|
64
|
+
{...props}
|
|
65
|
+
/>
|
|
66
|
+
</Flex>
|
|
67
|
+
</Flex>
|
|
68
|
+
) : (
|
|
69
|
+
<Flex
|
|
70
|
+
alignItems="start"
|
|
71
|
+
paddingTop="md"
|
|
72
|
+
>
|
|
73
|
+
<User
|
|
74
|
+
align="center"
|
|
75
|
+
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
|
76
|
+
name="Anna Black"
|
|
77
|
+
orientation="vertical"
|
|
78
|
+
size="lg"
|
|
79
|
+
title="Remodeling Consultant"
|
|
80
|
+
{...props}
|
|
81
|
+
/>
|
|
82
|
+
</Flex>
|
|
83
|
+
)}
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
)
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
export default SkeletonLoadingUser;
|
|
@@ -3,3 +3,5 @@ export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
|
|
|
3
3
|
export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
|
|
4
4
|
export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
|
|
5
5
|
export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'
|
|
6
|
+
export { default as SkeletonLoadingUser } from './_skeleton_loading_user.jsx'
|
|
7
|
+
export { default as SkeletonLoadingFilter } from './_skeleton_loading_filter.jsx'
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Table, Icon, Body, Card } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const TableWithCollapsible = (props) => {
|
|
5
|
+
|
|
6
|
+
const Content = () => {
|
|
7
|
+
return (
|
|
8
|
+
<Card
|
|
9
|
+
borderNone
|
|
10
|
+
borderRadius="none"
|
|
11
|
+
padding="md"
|
|
12
|
+
{...props}
|
|
13
|
+
>
|
|
14
|
+
<Body {...props}>Nested content inside a Table Row</Body>
|
|
15
|
+
</Card>
|
|
16
|
+
);
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
return (
|
|
20
|
+
<Table
|
|
21
|
+
size="sm"
|
|
22
|
+
{...props}
|
|
23
|
+
>
|
|
24
|
+
<Table.Head>
|
|
25
|
+
<Table.Row>
|
|
26
|
+
<Table.Header>{'Column 1'}</Table.Header>
|
|
27
|
+
<Table.Header>{'Column 2'}</Table.Header>
|
|
28
|
+
<Table.Header>{'Column 3'}</Table.Header>
|
|
29
|
+
<Table.Header>{'Column 4'}</Table.Header>
|
|
30
|
+
<Table.Header>{'Column 5'}</Table.Header>
|
|
31
|
+
<Table.Header>{''}</Table.Header>
|
|
32
|
+
</Table.Row>
|
|
33
|
+
|
|
34
|
+
</Table.Head>
|
|
35
|
+
<Table.Body>
|
|
36
|
+
<Table.Row collapsible
|
|
37
|
+
collapsibleContent={<Content/>}
|
|
38
|
+
{...props}
|
|
39
|
+
>
|
|
40
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
41
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
42
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
43
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
44
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
45
|
+
<Table.Cell textAlign="right">{
|
|
46
|
+
<Icon
|
|
47
|
+
color="primary"
|
|
48
|
+
fixedWidth
|
|
49
|
+
icon="chevron-down"
|
|
50
|
+
/>}
|
|
51
|
+
</Table.Cell>
|
|
52
|
+
|
|
53
|
+
</Table.Row>
|
|
54
|
+
<Table.Row>
|
|
55
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
56
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
57
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
58
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
59
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
60
|
+
<Table.Cell>{''}</Table.Cell>
|
|
61
|
+
</Table.Row>
|
|
62
|
+
<Table.Row>
|
|
63
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
64
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
65
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
66
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
67
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
68
|
+
<Table.Cell>{''}</Table.Cell>
|
|
69
|
+
</Table.Row>
|
|
70
|
+
</Table.Body>
|
|
71
|
+
</Table>
|
|
72
|
+
)
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export default TableWithCollapsible
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Table, Card, Icon, Body } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const TableWithCollapsibleWithCustomClick = (props) => {
|
|
5
|
+
|
|
6
|
+
const Content = () => {
|
|
7
|
+
return (
|
|
8
|
+
<Card
|
|
9
|
+
borderNone
|
|
10
|
+
borderRadius="none"
|
|
11
|
+
padding="md"
|
|
12
|
+
{...props}
|
|
13
|
+
>
|
|
14
|
+
<Body {...props}>Nested content inside a Table Row</Body>
|
|
15
|
+
</Card>
|
|
16
|
+
);
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<Table
|
|
22
|
+
size="sm"
|
|
23
|
+
{...props}
|
|
24
|
+
>
|
|
25
|
+
<Table.Head>
|
|
26
|
+
<Table.Row>
|
|
27
|
+
<Table.Header>{'Column 1'}</Table.Header>
|
|
28
|
+
<Table.Header>{'Column 2'}</Table.Header>
|
|
29
|
+
<Table.Header>{'Column 3'}</Table.Header>
|
|
30
|
+
<Table.Header>{'Column 4'}</Table.Header>
|
|
31
|
+
<Table.Header>{'Column 5'}</Table.Header>
|
|
32
|
+
<Table.Header>{''}</Table.Header>
|
|
33
|
+
</Table.Row>
|
|
34
|
+
|
|
35
|
+
</Table.Head>
|
|
36
|
+
<Table.Body>
|
|
37
|
+
<Table.Row collapsible
|
|
38
|
+
collapsibleContent={<Content/>}
|
|
39
|
+
toggleCellId="cell-1"
|
|
40
|
+
{...props}
|
|
41
|
+
>
|
|
42
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
43
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
44
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
45
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
46
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
47
|
+
<Table.Cell cursor="pointer"
|
|
48
|
+
id="cell-1"
|
|
49
|
+
textAlign="right"
|
|
50
|
+
>
|
|
51
|
+
<Icon
|
|
52
|
+
color="primary"
|
|
53
|
+
fixedWidth
|
|
54
|
+
icon="chevron-down"
|
|
55
|
+
/>
|
|
56
|
+
</Table.Cell>
|
|
57
|
+
|
|
58
|
+
</Table.Row>
|
|
59
|
+
<Table.Row collapsible
|
|
60
|
+
collapsibleContent={<Content/>}
|
|
61
|
+
toggleCellId="cell-2"
|
|
62
|
+
{...props}
|
|
63
|
+
>
|
|
64
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
65
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
66
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
67
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
68
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
69
|
+
<Table.Cell cursor="pointer"
|
|
70
|
+
id="cell-2"
|
|
71
|
+
textAlign="right"
|
|
72
|
+
>
|
|
73
|
+
<Icon
|
|
74
|
+
color="primary"
|
|
75
|
+
fixedWidth
|
|
76
|
+
icon="chevron-down"
|
|
77
|
+
/>
|
|
78
|
+
</Table.Cell>
|
|
79
|
+
|
|
80
|
+
</Table.Row>
|
|
81
|
+
<Table.Row collapsible
|
|
82
|
+
collapsibleContent={<Content/>}
|
|
83
|
+
toggleCellId="cell-3"
|
|
84
|
+
{...props}
|
|
85
|
+
>
|
|
86
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
87
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
88
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
89
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
90
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
91
|
+
<Table.Cell cursor="pointer"
|
|
92
|
+
id="cell-3"
|
|
93
|
+
textAlign="right"
|
|
94
|
+
>
|
|
95
|
+
<Icon
|
|
96
|
+
color="primary"
|
|
97
|
+
fixedWidth
|
|
98
|
+
icon="chevron-down"
|
|
99
|
+
/>
|
|
100
|
+
</Table.Cell>
|
|
101
|
+
|
|
102
|
+
</Table.Row>
|
|
103
|
+
</Table.Body>
|
|
104
|
+
</Table>
|
|
105
|
+
)
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
export default TableWithCollapsibleWithCustomClick
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggleCellId` prop to pass in the id of the Cell you want to use as the trigger.
|
|
2
|
+
__NOTE__: `toggleCellId` and the id on the Cell you want to use as the trigger MUST be the same.
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const TableWithCollapsibleWithCustomContent = (props) => {
|
|
5
|
+
|
|
6
|
+
const Content = () => {
|
|
7
|
+
return (
|
|
8
|
+
<Card
|
|
9
|
+
borderNone
|
|
10
|
+
borderRadius="none"
|
|
11
|
+
color="light"
|
|
12
|
+
paddingX="xl"
|
|
13
|
+
paddingY="md"
|
|
14
|
+
{...props}
|
|
15
|
+
>
|
|
16
|
+
<Body paddingBottom="sm"
|
|
17
|
+
text="Expanded Custom Layout"
|
|
18
|
+
{...props}
|
|
19
|
+
/>
|
|
20
|
+
<Flex justify="between">
|
|
21
|
+
<Image
|
|
22
|
+
url="https://via.placeholder.com/150"
|
|
23
|
+
/>
|
|
24
|
+
<Image
|
|
25
|
+
url="https://via.placeholder.com/150"
|
|
26
|
+
/>
|
|
27
|
+
<Image
|
|
28
|
+
url="https://via.placeholder.com/150"
|
|
29
|
+
/>
|
|
30
|
+
<Image
|
|
31
|
+
url="https://via.placeholder.com/150"
|
|
32
|
+
/>
|
|
33
|
+
</Flex>
|
|
34
|
+
</Card>
|
|
35
|
+
);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<Table
|
|
40
|
+
size="sm"
|
|
41
|
+
{...props}
|
|
42
|
+
>
|
|
43
|
+
<Table.Head>
|
|
44
|
+
<Table.Row>
|
|
45
|
+
<Table.Header>{'Column 1'}</Table.Header>
|
|
46
|
+
<Table.Header>{'Column 2'}</Table.Header>
|
|
47
|
+
<Table.Header>{'Column 3'}</Table.Header>
|
|
48
|
+
<Table.Header>{'Column 4'}</Table.Header>
|
|
49
|
+
<Table.Header>{'Column 5'}</Table.Header>
|
|
50
|
+
<Table.Header>{''}</Table.Header>
|
|
51
|
+
</Table.Row>
|
|
52
|
+
|
|
53
|
+
</Table.Head>
|
|
54
|
+
<Table.Body>
|
|
55
|
+
<Table.Row collapsible
|
|
56
|
+
collapsibleContent={<Content/>}
|
|
57
|
+
{...props}
|
|
58
|
+
>
|
|
59
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
60
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
61
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
62
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
63
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
64
|
+
<Table.Cell textAlign="right">{
|
|
65
|
+
<Icon
|
|
66
|
+
color="primary"
|
|
67
|
+
fixedWidth
|
|
68
|
+
icon="chevron-down"
|
|
69
|
+
/>}
|
|
70
|
+
</Table.Cell>
|
|
71
|
+
|
|
72
|
+
</Table.Row>
|
|
73
|
+
<Table.Row>
|
|
74
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
75
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
76
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
77
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
78
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
79
|
+
<Table.Cell>{''}</Table.Cell>
|
|
80
|
+
</Table.Row>
|
|
81
|
+
<Table.Row>
|
|
82
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
83
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
84
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
85
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
86
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
87
|
+
<Table.Cell>{''}</Table.Cell>
|
|
88
|
+
</Table.Row>
|
|
89
|
+
</Table.Body>
|
|
90
|
+
</Table>
|
|
91
|
+
)
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
export default TableWithCollapsibleWithCustomContent
|
|
File without changes
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Table, Background, Icon } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const TableWithCollapsibleWithNestedRows = (props) => {
|
|
5
|
+
|
|
6
|
+
const Content = () => {
|
|
7
|
+
return (
|
|
8
|
+
<Table
|
|
9
|
+
borderRadius="none"
|
|
10
|
+
container={false}
|
|
11
|
+
size="sm"
|
|
12
|
+
{...props}
|
|
13
|
+
>
|
|
14
|
+
<Background tag="tr"
|
|
15
|
+
{...props}
|
|
16
|
+
>
|
|
17
|
+
<Table.Cell>Expanded</Table.Cell>
|
|
18
|
+
<Table.Cell>Expanded</Table.Cell>
|
|
19
|
+
<Table.Cell>Expanded</Table.Cell>
|
|
20
|
+
<Table.Cell>Expanded</Table.Cell>
|
|
21
|
+
<Table.Cell>Expanded</Table.Cell>
|
|
22
|
+
</Background>
|
|
23
|
+
</Table>
|
|
24
|
+
);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<Table
|
|
29
|
+
size="sm"
|
|
30
|
+
{...props}
|
|
31
|
+
>
|
|
32
|
+
<Table.Head>
|
|
33
|
+
<Table.Row>
|
|
34
|
+
<Table.Header>{'Column 1'}</Table.Header>
|
|
35
|
+
<Table.Header>{'Column 2'}</Table.Header>
|
|
36
|
+
<Table.Header>{'Column 3'}</Table.Header>
|
|
37
|
+
<Table.Header>{'Column 4'}</Table.Header>
|
|
38
|
+
<Table.Header>{'Column 5'}</Table.Header>
|
|
39
|
+
<Table.Header>{''}</Table.Header>
|
|
40
|
+
</Table.Row>
|
|
41
|
+
|
|
42
|
+
</Table.Head>
|
|
43
|
+
<Table.Body>
|
|
44
|
+
<Table.Row collapsible
|
|
45
|
+
collapsibleContent={<Content/>}
|
|
46
|
+
collapsibleSideHighlight={false}
|
|
47
|
+
>
|
|
48
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
49
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
50
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
51
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
52
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
53
|
+
<Table.Cell textAlign="right">{
|
|
54
|
+
<Icon
|
|
55
|
+
color="primary"
|
|
56
|
+
fixedWidth
|
|
57
|
+
icon="chevron-down"
|
|
58
|
+
/>}
|
|
59
|
+
</Table.Cell>
|
|
60
|
+
|
|
61
|
+
</Table.Row>
|
|
62
|
+
<Table.Row>
|
|
63
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
64
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
65
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
66
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
67
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
68
|
+
<Table.Cell>{''}</Table.Cell>
|
|
69
|
+
</Table.Row>
|
|
70
|
+
<Table.Row>
|
|
71
|
+
<Table.Cell>{'Value 1'}</Table.Cell>
|
|
72
|
+
<Table.Cell>{'Value 2'}</Table.Cell>
|
|
73
|
+
<Table.Cell>{'Value 3'}</Table.Cell>
|
|
74
|
+
<Table.Cell>{'Value 4'}</Table.Cell>
|
|
75
|
+
<Table.Cell>{'Value 5'}</Table.Cell>
|
|
76
|
+
<Table.Cell>{''}</Table.Cell>
|
|
77
|
+
</Table.Row>
|
|
78
|
+
</Table.Body>
|
|
79
|
+
</Table>
|
|
80
|
+
)
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
export default TableWithCollapsibleWithNestedRows
|