playbook_ui_docs 14.13.0.pre.alpha.play1754pbtagprogressradio6160 → 14.13.0.pre.alpha.play1834depupdatesass6024
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_bar_graph/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +2 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +1 -4
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb +2 -1
- data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +1 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -5
- data/app/pb_kits/playbook/pb_table/docs/index.js +1 -3
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +0 -14
- data/dist/playbook-doc.js +1 -1
- metadata +3 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +0 -90
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +0 -5
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb +0 -27
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb +0 -47
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx +0 -88
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb +0 -51
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md +0 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +0 -96
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +0 -101
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md +0 -1
- /data/app/pb_kits/playbook/pb_table/docs/{_table_with_collapsible_with_custom_click_react.md → _table_with_collapsible_with_custom_click.md} +0 -0
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react'
|
|
2
|
-
import { Table, Checkbox, Image, Flex, Button } from 'playbook-ui'
|
|
3
|
-
|
|
4
|
-
const TableWithSelectableRows = (props) => {
|
|
5
|
-
const [checkboxes, setCheckboxes] = useState([
|
|
6
|
-
{ name: "Coffee", checked: false },
|
|
7
|
-
{ name: "Ice Cream", checked: false },
|
|
8
|
-
{ name: "Chocolate", checked: true },
|
|
9
|
-
]);
|
|
10
|
-
|
|
11
|
-
const isAllChecked = !checkboxes.find((checkbox) => !checkbox.checked);
|
|
12
|
-
const isNoneChecked = !checkboxes.find((checkbox) => checkbox.checked);
|
|
13
|
-
|
|
14
|
-
const processCheckboxes = (checked) =>
|
|
15
|
-
checkboxes.slice(0).map((checkbox) => {
|
|
16
|
-
checkbox.checked = checked;
|
|
17
|
-
return checkbox;
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
const onToggleAll = () => {
|
|
21
|
-
setCheckboxes(
|
|
22
|
-
isNoneChecked ? processCheckboxes(true) : processCheckboxes(false)
|
|
23
|
-
);
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
const updateCheckboxes = (checkbox, index) => {
|
|
27
|
-
const newCheckboxes = checkboxes.slice(0);
|
|
28
|
-
newCheckboxes[index].checked = !checkbox.checked;
|
|
29
|
-
setCheckboxes(newCheckboxes);
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
return (
|
|
33
|
-
<>
|
|
34
|
-
<Flex
|
|
35
|
-
justify="end"
|
|
36
|
-
marginBottom="sm"
|
|
37
|
-
>
|
|
38
|
-
{!isNoneChecked && (
|
|
39
|
-
<Flex
|
|
40
|
-
justify="end"
|
|
41
|
-
marginBottom="sm"
|
|
42
|
-
>
|
|
43
|
-
<Button>Delete</Button>
|
|
44
|
-
</Flex>
|
|
45
|
-
)}
|
|
46
|
-
</Flex>
|
|
47
|
-
<Table
|
|
48
|
-
size="sm"
|
|
49
|
-
{...props}
|
|
50
|
-
>
|
|
51
|
-
<Table.Head>
|
|
52
|
-
<Table.Row>
|
|
53
|
-
<Table.Header>
|
|
54
|
-
<Checkbox
|
|
55
|
-
checked={isAllChecked}
|
|
56
|
-
indeterminate={!isAllChecked && !isNoneChecked}
|
|
57
|
-
name="checkbox-name"
|
|
58
|
-
onChange={onToggleAll}
|
|
59
|
-
value="check-box value"
|
|
60
|
-
/>
|
|
61
|
-
</Table.Header>
|
|
62
|
-
<Table.Header>{"Column 1"}</Table.Header>
|
|
63
|
-
<Table.Header>{"Column 2"}</Table.Header>
|
|
64
|
-
<Table.Header>{"Column 3"}</Table.Header>
|
|
65
|
-
<Table.Header>{"Column 4"}</Table.Header>
|
|
66
|
-
<Table.Header>{"Column 5"}</Table.Header>
|
|
67
|
-
</Table.Row>
|
|
68
|
-
</Table.Head>
|
|
69
|
-
<Table.Body>
|
|
70
|
-
{checkboxes.map((checkbox, index) => (
|
|
71
|
-
<Table.Row key={index}>
|
|
72
|
-
<Table.Cell>
|
|
73
|
-
<Checkbox
|
|
74
|
-
checked={checkbox.checked}
|
|
75
|
-
name={checkbox.name}
|
|
76
|
-
onChange={() => {
|
|
77
|
-
updateCheckboxes(checkbox, index);
|
|
78
|
-
}}
|
|
79
|
-
value="check-box value"
|
|
80
|
-
/>
|
|
81
|
-
</Table.Cell>
|
|
82
|
-
<Table.Cell>
|
|
83
|
-
<Image
|
|
84
|
-
alt="picture of a misty forest"
|
|
85
|
-
size="xs"
|
|
86
|
-
url="https://unsplash.it/500/400/?image=634"
|
|
87
|
-
/>
|
|
88
|
-
</Table.Cell>
|
|
89
|
-
<Table.Cell>{"Value 2"}</Table.Cell>
|
|
90
|
-
<Table.Cell>{"Value 3"}</Table.Cell>
|
|
91
|
-
<Table.Cell>{"Value 4"}</Table.Cell>
|
|
92
|
-
<Table.Cell>{"Value 5"}</Table.Cell>
|
|
93
|
-
</Table.Row>
|
|
94
|
-
))}
|
|
95
|
-
</Table.Body>
|
|
96
|
-
</Table>
|
|
97
|
-
</>
|
|
98
|
-
)
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
export default TableWithSelectableRows
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Use the Checkbox kit with the Table to achieve the selectable row functionality seen here.
|