playbook_ui 14.13.0.pre.alpha.PBNTR5596029 → 14.13.0.pre.alpha.PBNTR5596084
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_date_picker/_date_picker.tsx +3 -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 +4 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb +1 -2
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb +27 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +1 -1
- data/app/pb_kits/playbook/pb_icon_button/icon_button.rb +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb +47 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx +88 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +96 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +101 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +3 -1
- data/app/pb_kits/playbook/pb_table/table_body.html.erb +13 -7
- data/app/pb_kits/playbook/pb_table/table_body.rb +2 -0
- data/app/pb_kits/playbook/pb_table/table_row.html.erb +13 -7
- data/app/pb_kits/playbook/pb_table/table_row.rb +4 -0
- data/dist/chunks/{_typeahead-TUUtEUg8.js → _typeahead-C_q1qAtC.js} +1 -1
- data/dist/chunks/_weekday_stacked-DCeouuO3.js +45 -0
- data/dist/chunks/{lib-DjpLC8uO.js → lib-WQEeEj3t.js} +1 -1
- data/dist/chunks/{pb_form_validation-S56UaHZl.js → pb_form_validation-Cq64l4zn.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 +13 -6
- data/dist/chunks/_weekday_stacked--GSH9pBR.js +0 -45
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a3d8f304390d68b67ec72165d7759d59c5f1f35fd02c1ad803f62fcb04e39058
|
|
4
|
+
data.tar.gz: 2e740481d027db9bed21f7cf8a44c4d8bb9c37d1e7a4258132447423e4f9649e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e7a393c56605d3dab94dc839550ad37e2510a04f6fd3cb1fb7dcd111a1e960697872c658cba608dca30cf0830c3ca44dfede96abfb193e7a4352042539133d63
|
|
7
|
+
data.tar.gz: 8e2aadc02eabaafbdfc0f380316c1ab0d7e4b606e0034abaa7a39ea136b78bfaf44789bf09f5d86a298edd9f73a31d8638e7df267e180fe34b9e5d8adb6731cf
|
|
@@ -29,6 +29,7 @@ type DatePickerProps = {
|
|
|
29
29
|
hideLabel?: boolean,
|
|
30
30
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
|
31
31
|
id?: string,
|
|
32
|
+
initializeOnce?: boolean,
|
|
32
33
|
inLine?: boolean,
|
|
33
34
|
inputAria?: { [key: string]: string },
|
|
34
35
|
inputData?: { [key: string]: string },
|
|
@@ -73,6 +74,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
|
73
74
|
hideLabel = false,
|
|
74
75
|
htmlOptions = {},
|
|
75
76
|
id,
|
|
77
|
+
initializeOnce = false,
|
|
76
78
|
inLine = false,
|
|
77
79
|
inputAria = {},
|
|
78
80
|
inputData = {},
|
|
@@ -134,7 +136,7 @@ useEffect(() => {
|
|
|
134
136
|
yearRange,
|
|
135
137
|
required: false,
|
|
136
138
|
}, scrollContainer)
|
|
137
|
-
})
|
|
139
|
+
}, initializeOnce ? [] : undefined)
|
|
138
140
|
const filteredProps = {...props}
|
|
139
141
|
if (filteredProps.marginBottom === undefined) {
|
|
140
142
|
filteredProps.marginBottom = "sm"
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
<% end %>
|
|
44
44
|
<% end %>
|
|
45
45
|
|
|
46
|
-
<%= pb_rails("
|
|
46
|
+
<%= pb_rails("table/table_body", props: {draggable_container: true}) do %>
|
|
47
47
|
<% initial_items.each do |item| %>
|
|
48
|
-
<%= pb_rails("
|
|
48
|
+
<%= pb_rails("table/table_row", props:{drag_id: item[:id], draggable_item: true}) do %>
|
|
49
49
|
<%= pb_rails("table/table_cell", props: { text: item[:id]}) %>
|
|
50
50
|
<%= pb_rails("table/table_cell") do %>
|
|
51
51
|
<%= pb_rails("flex", props:{align:"center"}) do %>
|
|
@@ -1 +1,4 @@
|
|
|
1
|
-
The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this
|
|
1
|
+
The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
|
|
2
|
+
|
|
3
|
+
- use the `draggable_container` prop on the table/table_body to designate it as the Draggable Container
|
|
4
|
+
- use the `draggable_item` prop on the table/table_row to designate it as the Draggable Item. Make sure to also pass id to the `drag_id` prop here.
|
|
@@ -4,8 +4,8 @@ examples:
|
|
|
4
4
|
- draggable_with_list: Draggable with List Kit
|
|
5
5
|
- draggable_with_selectable_list: Draggable with SelectableList Kit
|
|
6
6
|
- draggable_with_cards: Draggable with Cards
|
|
7
|
-
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
8
7
|
- draggable_with_table_react: Draggable with Table
|
|
8
|
+
- draggable_multiple_containers: Dragging Across Multiple Containers
|
|
9
9
|
|
|
10
10
|
rails:
|
|
11
11
|
- draggable_default_rails: Default
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { align: "center"}) do %>
|
|
2
|
+
<%= pb_rails("icon_button", props: {size: "lg"}) %> <span>Large</span>
|
|
3
|
+
<% end %>
|
|
4
|
+
|
|
5
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
|
6
|
+
<%= pb_rails("icon_button", props: {size: "sm"}) %> <span>Small</span>
|
|
7
|
+
<% end %>
|
|
8
|
+
|
|
9
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
|
10
|
+
<%= pb_rails("icon_button", props: {size: "xs"}) %> <span>XSmall</span>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("flex", props: { align: "center", margin_top: "md" }) do %>
|
|
14
|
+
<%= pb_rails("icon_button", props: {size: "1x"}) %> <span>1x</span>
|
|
15
|
+
<% end %>
|
|
16
|
+
|
|
17
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
|
18
|
+
<%= pb_rails("icon_button", props: {size: "2x"}) %> <span>2x</span>
|
|
19
|
+
<% end %>
|
|
20
|
+
|
|
21
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
|
22
|
+
<%= pb_rails("icon_button", props: {size: "3x"}) %> <span>3x</span>
|
|
23
|
+
<% end %>
|
|
24
|
+
|
|
25
|
+
<%= pb_rails("flex", props: { align: "center" }) do %>
|
|
26
|
+
<%= pb_rails("icon_button", props: {size: "4x"}) %> <span>4x</span>
|
|
27
|
+
<% end %>
|
|
@@ -14,6 +14,9 @@ module Playbook
|
|
|
14
14
|
prop :variant, type: Playbook::Props::Enum,
|
|
15
15
|
values: %w[default link],
|
|
16
16
|
default: "default"
|
|
17
|
+
prop :size, type: Playbook::Props::Enum,
|
|
18
|
+
values: %w[1x 2x 3x 4x 5x 6x 7x 8x 9x 10x xs sm lg],
|
|
19
|
+
default: "2x"
|
|
17
20
|
def classname
|
|
18
21
|
generate_classname("pb_icon_button_kit", variant)
|
|
19
22
|
end
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
2
|
+
<%= pb_rails("table/table_head") do %>
|
|
3
|
+
<%= pb_rails("table/table_row") do %>
|
|
4
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1" }) %>
|
|
5
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2" }) %>
|
|
6
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3" }) %>
|
|
7
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4" }) %>
|
|
8
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5" }) %>
|
|
9
|
+
<%= pb_rails("table/table_header", props: { text: "" }) %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% end %>
|
|
12
|
+
<%= pb_rails("table/table_body") do %>
|
|
13
|
+
<%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 1 clicked')" } }) do %>
|
|
14
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
|
|
15
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
|
|
16
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
|
|
17
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
|
|
18
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
|
|
19
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
|
|
20
|
+
<%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
|
|
21
|
+
<% end %>
|
|
22
|
+
<% end %>
|
|
23
|
+
|
|
24
|
+
<%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 2 clicked')" } }) do %>
|
|
25
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
|
|
26
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
|
|
27
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
|
|
28
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
|
|
29
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
|
|
30
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
|
|
31
|
+
<%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
|
|
32
|
+
<% end %>
|
|
33
|
+
<% end %>
|
|
34
|
+
|
|
35
|
+
<%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 3 clicked')" } }) do %>
|
|
36
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 1" }) %>
|
|
37
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
|
|
38
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
|
|
39
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
|
|
40
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
|
|
41
|
+
<%= pb_rails("table/table_cell", props: { text_align: "right" }) do %>
|
|
42
|
+
<%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
|
|
43
|
+
<% end %>
|
|
44
|
+
<% end %>
|
|
45
|
+
<% end %>
|
|
46
|
+
<% end %>
|
|
47
|
+
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Table, Icon } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const TableWithClickableRows = (props) => {
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<Table
|
|
9
|
+
size="sm"
|
|
10
|
+
{...props}
|
|
11
|
+
>
|
|
12
|
+
<Table.Head>
|
|
13
|
+
<Table.Row>
|
|
14
|
+
<Table.Header>{"Column 1"}</Table.Header>
|
|
15
|
+
<Table.Header>{"Column 2"}</Table.Header>
|
|
16
|
+
<Table.Header>{"Column 3"}</Table.Header>
|
|
17
|
+
<Table.Header>{"Column 4"}</Table.Header>
|
|
18
|
+
<Table.Header>{"Column 5"}</Table.Header>
|
|
19
|
+
<Table.Header>{""}</Table.Header>
|
|
20
|
+
</Table.Row>
|
|
21
|
+
</Table.Head>
|
|
22
|
+
<Table.Body>
|
|
23
|
+
<Table.Row
|
|
24
|
+
cursor="pointer"
|
|
25
|
+
htmlOptions={{ onClick: () => alert("Row 1 clicked") }}
|
|
26
|
+
{...props}
|
|
27
|
+
>
|
|
28
|
+
<Table.Cell>{"Value 1"}</Table.Cell>
|
|
29
|
+
<Table.Cell>{"Value 2"}</Table.Cell>
|
|
30
|
+
<Table.Cell>{"Value 3"}</Table.Cell>
|
|
31
|
+
<Table.Cell>{"Value 4"}</Table.Cell>
|
|
32
|
+
<Table.Cell>{"Value 5"}</Table.Cell>
|
|
33
|
+
<Table.Cell textAlign="right">
|
|
34
|
+
<Icon
|
|
35
|
+
color="primary_action"
|
|
36
|
+
fixedWidth
|
|
37
|
+
icon="chevron-right"
|
|
38
|
+
size="xs"
|
|
39
|
+
{...props}
|
|
40
|
+
/>
|
|
41
|
+
</Table.Cell>
|
|
42
|
+
</Table.Row>
|
|
43
|
+
<Table.Row
|
|
44
|
+
cursor="pointer"
|
|
45
|
+
htmlOptions={{ onClick: () => alert("Row 2 clicked") }}
|
|
46
|
+
{...props}
|
|
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_action"
|
|
56
|
+
fixedWidth
|
|
57
|
+
icon="chevron-right"
|
|
58
|
+
size="xs"
|
|
59
|
+
{...props}
|
|
60
|
+
/>
|
|
61
|
+
</Table.Cell>
|
|
62
|
+
</Table.Row>
|
|
63
|
+
<Table.Row
|
|
64
|
+
cursor="pointer"
|
|
65
|
+
htmlOptions={{ onClick: () => alert("Row 3 clicked") }}
|
|
66
|
+
{...props}
|
|
67
|
+
>
|
|
68
|
+
<Table.Cell>{"Value 1"}</Table.Cell>
|
|
69
|
+
<Table.Cell>{"Value 2"}</Table.Cell>
|
|
70
|
+
<Table.Cell>{"Value 3"}</Table.Cell>
|
|
71
|
+
<Table.Cell>{"Value 4"}</Table.Cell>
|
|
72
|
+
<Table.Cell>{"Value 5"}</Table.Cell>
|
|
73
|
+
<Table.Cell textAlign="right">
|
|
74
|
+
<Icon
|
|
75
|
+
color="primary_action"
|
|
76
|
+
fixedWidth
|
|
77
|
+
icon="chevron-right"
|
|
78
|
+
size="xs"
|
|
79
|
+
{...props}
|
|
80
|
+
/>
|
|
81
|
+
</Table.Cell>
|
|
82
|
+
</Table.Row>
|
|
83
|
+
</Table.Body>
|
|
84
|
+
</Table>
|
|
85
|
+
)
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
export default TableWithClickableRows
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Clickable table rows do not require any additional props. This doc example showcases how to set them up using `html_options`/`htmlOptions` and click events. Using the global prop for cursor to set it to "pointer" is also recommended for better UX.
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
<% checkboxes = [
|
|
2
|
+
{ name: 'Coffee', id: 'coffee', checked: false },
|
|
3
|
+
{ name: 'Ice Cream', id: 'ice-cream', checked: false },
|
|
4
|
+
{ name: 'Chocolate', id: 'chocolate', checked: true }
|
|
5
|
+
] %>
|
|
6
|
+
|
|
7
|
+
<%= pb_rails("flex", props: { justify: "end", margin_bottom: "sm" }) do %>
|
|
8
|
+
<%= pb_rails("flex", props: { justify: "end", margin_bottom: "sm" }) do %>
|
|
9
|
+
<%= pb_rails("button", props: { text: "Delete", id: "delete-button" }) %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("table", props: { size: "sm" }) do %>
|
|
14
|
+
<%= pb_rails("table/table_head") do %>
|
|
15
|
+
<%= pb_rails("table/table_row") do %>
|
|
16
|
+
<%= pb_rails("table/table_header") do %>
|
|
17
|
+
<%= pb_rails("checkbox", props: {
|
|
18
|
+
checked: true,
|
|
19
|
+
value: "checkbox-value",
|
|
20
|
+
name: "main-checkbox-selectable",
|
|
21
|
+
indeterminate: true,
|
|
22
|
+
id: "checkbox-selectable"
|
|
23
|
+
}) %>
|
|
24
|
+
<% end %>
|
|
25
|
+
<%= pb_rails("table/table_header", props: { text: "Column 1" }) %>
|
|
26
|
+
<%= pb_rails("table/table_header", props: { text: "Column 2" }) %>
|
|
27
|
+
<%= pb_rails("table/table_header", props: { text: "Column 3" }) %>
|
|
28
|
+
<%= pb_rails("table/table_header", props: { text: "Column 4" }) %>
|
|
29
|
+
<%= pb_rails("table/table_header", props: { text: "Column 5" }) %>
|
|
30
|
+
<% end %>
|
|
31
|
+
<% end %>
|
|
32
|
+
<%= pb_rails("table/table_body") do %>
|
|
33
|
+
<% checkboxes.each_with_index do |checkbox, index| %>
|
|
34
|
+
<%= pb_rails("table/table_row") do %>
|
|
35
|
+
<%= pb_rails("table/table_cell") do %>
|
|
36
|
+
<%= pb_rails("checkbox", props: { checked: checkbox[:checked], id: "#{checkbox[:id]}-selectable-checkbox", name: "#{checkbox[:id]}-selectable-checkbox", on_change: "updateCheckboxes(#{index})", value: "check-box value" }) %>
|
|
37
|
+
<% end %>
|
|
38
|
+
<%= pb_rails("table/table_cell") do %>
|
|
39
|
+
<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
|
|
40
|
+
<% end %>
|
|
41
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
|
|
42
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
|
|
43
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
|
|
44
|
+
<%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
|
|
45
|
+
<% end %>
|
|
46
|
+
<% end %>
|
|
47
|
+
<% end %>
|
|
48
|
+
<% end %>
|
|
49
|
+
|
|
50
|
+
<script>
|
|
51
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
52
|
+
const mainCheckboxWrapper = document.getElementById('checkbox-selectable');
|
|
53
|
+
const mainCheckbox = document.getElementsByName("main-checkbox-selectable")[0];
|
|
54
|
+
const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="selectable-checkbox"]');
|
|
55
|
+
const deleteButton = document.getElementById('delete-button');
|
|
56
|
+
|
|
57
|
+
const updateDeleteButton = () => {
|
|
58
|
+
const anyChecked = Array.from(childCheckboxes).some(checkbox => checkbox.checked);
|
|
59
|
+
deleteButton.style.display = anyChecked ? 'block' : 'none';
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
const updateMainCheckbox = () => {
|
|
63
|
+
// Count the number of checked child checkboxes
|
|
64
|
+
const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
|
|
65
|
+
// Determine if the main checkbox should be in an indeterminate state
|
|
66
|
+
const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
|
|
67
|
+
|
|
68
|
+
// Set the main checkbox states
|
|
69
|
+
mainCheckbox.indeterminate = indeterminate;
|
|
70
|
+
mainCheckbox.checked = checkedCount > 0;
|
|
71
|
+
|
|
72
|
+
// Determine the icon class to add and remove based on the number of checked checkboxes
|
|
73
|
+
const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
|
|
74
|
+
const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
|
|
75
|
+
|
|
76
|
+
// Add and remove the icon class to the main checkbox wrapper
|
|
77
|
+
mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
|
|
78
|
+
mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
|
|
79
|
+
|
|
80
|
+
// Toggle the visibility of the checkbox icon based on the indeterminate state
|
|
81
|
+
mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
|
|
82
|
+
mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
|
|
83
|
+
|
|
84
|
+
updateDeleteButton();
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
mainCheckbox.addEventListener('change', function() {
|
|
88
|
+
childCheckboxes.forEach(cb => cb.checked = this.checked);
|
|
89
|
+
updateMainCheckbox();
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
childCheckboxes.forEach(cb => {
|
|
93
|
+
cb.addEventListener('change', updateMainCheckbox);
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
</script>
|
|
@@ -0,0 +1,101 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Use the Checkbox kit with the Table to achieve the selectable row functionality seen here.
|
|
@@ -34,6 +34,8 @@ examples:
|
|
|
34
34
|
- table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
|
|
35
35
|
- table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
|
|
36
36
|
- table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
|
|
37
|
+
- table_with_clickable_rows: Table with Clickable Rows
|
|
38
|
+
- table_with_selectable_rows: Table with Selectable Rows
|
|
37
39
|
|
|
38
40
|
react:
|
|
39
41
|
- table_sm: Small
|
|
@@ -70,3 +72,5 @@ examples:
|
|
|
70
72
|
- table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
|
|
71
73
|
- table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
|
|
72
74
|
- table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
|
|
75
|
+
- table_with_clickable_rows: Table with Clickable Rows
|
|
76
|
+
- table_with_selectable_rows: Table with Selectable Rows
|
|
@@ -32,4 +32,6 @@ export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
|
|
|
32
32
|
export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
|
|
33
33
|
export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
|
|
34
34
|
export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
|
|
35
|
-
export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
|
|
35
|
+
export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
|
|
36
|
+
export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
|
|
37
|
+
export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
<% if object.tag == "table" %>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
<% if object.draggable_container %>
|
|
3
|
+
<%= pb_rails("draggable/draggable_container", props: { tag: "tbody", classname: object.classname, data: object.data }) do %>
|
|
4
|
+
<%= content.presence %>
|
|
5
|
+
<% end %>
|
|
6
|
+
<% else %>
|
|
7
|
+
<%= content_tag(:tbody,
|
|
8
|
+
aria: object.aria,
|
|
9
|
+
class: object.classname,
|
|
10
|
+
data: object.data,
|
|
11
|
+
id: object.id,
|
|
12
|
+
**combined_html_options) do %>
|
|
13
|
+
<%= content.presence %>
|
|
14
|
+
<% end %>
|
|
9
15
|
<% end %>
|
|
10
16
|
<% else %>
|
|
11
17
|
<%= content_tag(:div,
|
|
@@ -18,13 +18,19 @@
|
|
|
18
18
|
<% end %>
|
|
19
19
|
</tr>
|
|
20
20
|
<% elsif object.tag == "table" %>
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
<% if object.draggable_item %>
|
|
22
|
+
<%= pb_rails("draggable/draggable_item", props:{ drag_id: object.drag_id, tag: "tr", classname: object.classname, data: object.data }) do %>
|
|
23
|
+
<%= content.presence %>
|
|
24
|
+
<% end %>
|
|
25
|
+
<% else %>
|
|
26
|
+
<%= content_tag(:tr,
|
|
27
|
+
aria: object.aria,
|
|
28
|
+
class: object.classname,
|
|
29
|
+
data: object.data,
|
|
30
|
+
id: object.id,
|
|
31
|
+
**combined_html_options) do %>
|
|
32
|
+
<%= content.presence %>
|
|
33
|
+
<% end %>
|
|
28
34
|
<% end %>
|
|
29
35
|
<% else %>
|
|
30
36
|
<%= content_tag(:div,
|
|
@@ -13,6 +13,10 @@ module Playbook
|
|
|
13
13
|
prop :collapsible_content
|
|
14
14
|
prop :collapsible_side_highlight, type: Playbook::Props::Boolean,
|
|
15
15
|
default: true
|
|
16
|
+
prop :draggable_item, type: Playbook::Props::Boolean,
|
|
17
|
+
default: false
|
|
18
|
+
prop :drag_id, type: Playbook::Props::String,
|
|
19
|
+
default: nil
|
|
16
20
|
|
|
17
21
|
def classname
|
|
18
22
|
generate_classname("pb_table_row_kit", side_highlight_class) + tag_class
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,createElement,useRef,useState,useLayoutEffect,forwardRef,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,z as get,j as getAllIcons,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-
|
|
1
|
+
import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,createElement,useRef,useState,useLayoutEffect,forwardRef,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,z as get,j as getAllIcons,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-WQEeEj3t.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},item),{container:action.payload.container}):item))});case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return Object.assign(Object.assign({},state),{items:newItems})}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver})=>{const[state,dispatch]=useReducer(reducer,initialState);useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
|
|
2
2
|
/*!
|
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
|
4
4
|
Licensed under the MIT License (MIT), see
|