playbook_ui 14.13.0.pre.alpha.PBNTR5596029 → 14.13.0.pre.alpha.PBNTR5596084
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_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
|