playbook_ui 14.13.0.pre.alpha.play1753updatepbcontenttags6065 → 14.13.0.pre.alpha.play1851checkboxreacthook6083
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_checkbox/_checkbox.tsx +17 -8
- data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +16 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx +69 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +3 -1
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +6 -1
- data/app/pb_kits/playbook/pb_nav/item.html.erb +19 -7
- data/app/pb_kits/playbook/pb_nav/nav.html.erb +8 -3
- data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +6 -1
- data/app/pb_kits/playbook/pb_popover/popover.html.erb +6 -1
- 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 +3 -1
- data/app/pb_kits/playbook/pb_table/docs/index.js +2 -1
- data/dist/chunks/{_typeahead-btjo1UN5.js → _typeahead-CR2Xkt-o.js} +2 -2
- data/dist/chunks/_weekday_stacked-9LU-xxnS.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 +11 -6
- data/dist/chunks/_weekday_stacked-TIh9nTmZ.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: bb3a9002f9a8764511848a3c3d772fadf25f5f54630059aa06c9a4369335179d
|
4
|
+
data.tar.gz: a6a46c5bfdb0e7a0a93957852210185c6e9eece5faa63454c1815b5b75e6c63d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9224cd88c0f6759480689ee6637464d0a05ff61e69093a1f834f5b1a0477543883204e81b0cce35d67b0ca66b6d00bfc2bcd2f5302e15bd4c008d21c2e3fc352
|
7
|
+
data.tar.gz: 70771f474c26f416e72a5906f06e4b8b36109daa5d492bc21a5e2a8b8cbb0ac49eb7e4c68ab36a6952dbc8d3be99db7d835390987d8ccc647304b61c8d0cebce
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useEffect, useRef } from 'react'
|
1
|
+
import React, { useEffect, useRef, forwardRef } from 'react'
|
2
2
|
import Body from '../pb_body/_body'
|
3
3
|
import Icon from '../pb_icon/_icon'
|
4
4
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
@@ -24,7 +24,7 @@ type CheckboxProps = {
|
|
24
24
|
value?: string,
|
25
25
|
} & GlobalProps
|
26
26
|
|
27
|
-
const Checkbox = (props
|
27
|
+
const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
|
28
28
|
const {
|
29
29
|
aria = {},
|
30
30
|
checked = false,
|
@@ -44,7 +44,15 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
|
|
44
44
|
value = '',
|
45
45
|
} = props
|
46
46
|
|
47
|
-
const
|
47
|
+
const internalRef = useRef<HTMLInputElement>(null)
|
48
|
+
const setRefs = (el: HTMLInputElement) => {
|
49
|
+
internalRef.current = el
|
50
|
+
if (typeof ref === 'function') {
|
51
|
+
ref(el)
|
52
|
+
} else if (ref) {
|
53
|
+
(ref as React.MutableRefObject<HTMLInputElement | null>).current = el
|
54
|
+
}
|
55
|
+
}
|
48
56
|
const ariaProps = buildAriaProps(aria)
|
49
57
|
const dataProps = buildDataProps(data)
|
50
58
|
const htmlProps = buildHtmlProps(htmlOptions)
|
@@ -56,9 +64,9 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
|
|
56
64
|
)
|
57
65
|
|
58
66
|
useEffect(() => {
|
59
|
-
if (
|
60
|
-
|
61
|
-
|
67
|
+
if (internalRef.current) {
|
68
|
+
internalRef.current.checked = checked
|
69
|
+
internalRef.current.indeterminate = indeterminate
|
62
70
|
}
|
63
71
|
}, [indeterminate, checked])
|
64
72
|
|
@@ -72,7 +80,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
|
|
72
80
|
disabled={disabled}
|
73
81
|
name={name}
|
74
82
|
onChange={onChange}
|
75
|
-
ref={
|
83
|
+
ref={setRefs}
|
76
84
|
tabIndex={tabIndex}
|
77
85
|
type="checkbox"
|
78
86
|
value={value}
|
@@ -119,6 +127,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
|
|
119
127
|
</Body>
|
120
128
|
</label>
|
121
129
|
)
|
122
|
-
}
|
130
|
+
})
|
123
131
|
|
132
|
+
Checkbox.displayName = "Checkbox"
|
124
133
|
export default Checkbox
|
@@ -106,3 +106,19 @@ test('has disabled attribute', () => {
|
|
106
106
|
const input = kit.querySelector('input')
|
107
107
|
expect(input).toHaveAttribute('disabled')
|
108
108
|
})
|
109
|
+
|
110
|
+
test('has ref in the input element', () => {
|
111
|
+
const ref = React.createRef()
|
112
|
+
render(
|
113
|
+
<Checkbox
|
114
|
+
data={{ testid: testId }}
|
115
|
+
name="checkbox-name"
|
116
|
+
ref={ref}
|
117
|
+
text="Checkbox"
|
118
|
+
value="check-box value"
|
119
|
+
/>
|
120
|
+
)
|
121
|
+
|
122
|
+
expect(ref.current).not.toBeNull()
|
123
|
+
expect(ref.current?.tagName).toBe('INPUT')
|
124
|
+
})
|
@@ -0,0 +1,69 @@
|
|
1
|
+
import React, { useState } from "react"
|
2
|
+
import { useForm } from "react-hook-form"
|
3
|
+
import { Button, Checkbox, Flex, Body } from "playbook-ui"
|
4
|
+
|
5
|
+
const CheckboxReactHook = () => {
|
6
|
+
const { register, handleSubmit } = useForm({
|
7
|
+
defaultValues: {
|
8
|
+
Small: false,
|
9
|
+
Medium: false,
|
10
|
+
Large: false,
|
11
|
+
},
|
12
|
+
})
|
13
|
+
|
14
|
+
const [submittedData, setSubmittedData] = useState({
|
15
|
+
Small: false,
|
16
|
+
Medium: false,
|
17
|
+
Large: false,
|
18
|
+
})
|
19
|
+
|
20
|
+
const onSubmit = (data) => {
|
21
|
+
setSubmittedData(data)
|
22
|
+
}
|
23
|
+
|
24
|
+
return (
|
25
|
+
<Flex orientation="row">
|
26
|
+
<Flex align="start"
|
27
|
+
orientation="column"
|
28
|
+
paddingRight="lg"
|
29
|
+
>
|
30
|
+
<form onSubmit={handleSubmit(onSubmit)}>
|
31
|
+
<Checkbox padding="xs"
|
32
|
+
text="Small"
|
33
|
+
{...register("Small")}
|
34
|
+
/>
|
35
|
+
<br />
|
36
|
+
<Checkbox padding="xs"
|
37
|
+
text="Medium"
|
38
|
+
{...register("Medium")}
|
39
|
+
/>
|
40
|
+
<br />
|
41
|
+
<Checkbox padding="xs"
|
42
|
+
text="Large"
|
43
|
+
{...register("Large")}
|
44
|
+
/>
|
45
|
+
<br />
|
46
|
+
<Button htmlType="submit"
|
47
|
+
marginTop="sm"
|
48
|
+
text="submit"
|
49
|
+
/>
|
50
|
+
</form>
|
51
|
+
</Flex>
|
52
|
+
<Flex align="start"
|
53
|
+
orientation="column"
|
54
|
+
>
|
55
|
+
<Body padding="xs"
|
56
|
+
text={`Small: ${submittedData.Small ? "true" : "false"}`}
|
57
|
+
/>
|
58
|
+
<Body padding="xs"
|
59
|
+
text={`Medium: ${submittedData.Medium ? "true" : "false"}`}
|
60
|
+
/>
|
61
|
+
<Body padding="xs"
|
62
|
+
text={`Large: ${submittedData.Large ? "true" : "false"}`}
|
63
|
+
/>
|
64
|
+
</Flex>
|
65
|
+
</Flex>
|
66
|
+
)
|
67
|
+
}
|
68
|
+
|
69
|
+
export default CheckboxReactHook
|
@@ -0,0 +1 @@
|
|
1
|
+
You can pass react hook props to the checkbox kit.
|
@@ -11,6 +11,7 @@ examples:
|
|
11
11
|
react:
|
12
12
|
- checkbox_default: Default
|
13
13
|
- checkbox_checked: Load as checked
|
14
|
+
- checkbox_react_hook: React Hook Form
|
14
15
|
- checkbox_custom: Custom Checkbox
|
15
16
|
- checkbox_error: Default w/ Error
|
16
17
|
- checkbox_indeterminate: Indeterminate Checkbox
|
@@ -21,4 +22,4 @@ examples:
|
|
21
22
|
- checkbox_error_swift: Default w/ Error
|
22
23
|
- checkbox_indeterminate_swift: Indeterminate Checkbox
|
23
24
|
- checkbox_props_swift: ""
|
24
|
-
|
25
|
+
|
@@ -1,5 +1,6 @@
|
|
1
1
|
export { default as CheckboxDefault } from './_checkbox_default.jsx'
|
2
2
|
export { default as CheckboxCustom } from './_checkbox_custom.jsx'
|
3
|
+
export { default as CheckboxReactHook } from './_checkbox_react_hook.jsx'
|
3
4
|
export { default as CheckboxError } from './_checkbox_error.jsx'
|
4
5
|
export { default as CheckboxChecked } from './_checkbox_checked.jsx'
|
5
6
|
export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
|
@@ -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"
|
@@ -1,9 +1,15 @@
|
|
1
1
|
<% if object.collapsible %>
|
2
2
|
<%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
|
3
3
|
<%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
|
4
|
-
<%=
|
5
|
-
|
6
|
-
|
4
|
+
<%= content_tag(object.tag,
|
5
|
+
aria: object.aria,
|
6
|
+
class: object.classname,
|
7
|
+
data: object.data,
|
8
|
+
dark: object.dark,
|
9
|
+
id: object.id,
|
10
|
+
href: object.link && object.link,
|
11
|
+
target: object.link && object.target,
|
12
|
+
**combined_html_options
|
7
13
|
) do %>
|
8
14
|
<% if object.image_url %>
|
9
15
|
<%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
|
@@ -14,16 +20,22 @@
|
|
14
20
|
<span class="pb_nav_list_item_text_collapsible">
|
15
21
|
<%= object.text %>
|
16
22
|
</span>
|
17
|
-
<% end %>
|
23
|
+
<% end %>
|
18
24
|
<% end %>
|
19
25
|
<%= pb_rails("collapsible/collapsible_content", props: {collapsed: object.collapsed}) do %>
|
20
26
|
<%= content.presence %>
|
21
27
|
<% end %>
|
22
28
|
<% end %>
|
23
29
|
<% else %>
|
24
|
-
<%=
|
25
|
-
|
26
|
-
|
30
|
+
<%= content_tag(object.tag,
|
31
|
+
aria: object.aria,
|
32
|
+
class: object.classname,
|
33
|
+
**combined_html_options,
|
34
|
+
data: object.data,
|
35
|
+
dark: object.dark,
|
36
|
+
id: object.id,
|
37
|
+
href: object.link && object.link,
|
38
|
+
target: object.link && object.target
|
27
39
|
) do %>
|
28
40
|
<% if object.image_url %>
|
29
41
|
<%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
|
@@ -1,7 +1,12 @@
|
|
1
|
-
<%=
|
1
|
+
<%= content_tag(:nav,
|
2
|
+
aria: object.aria,
|
3
|
+
class: object.classname,
|
4
|
+
data: object.data,
|
5
|
+
id: object.id,
|
6
|
+
**combined_html_options) do %>
|
2
7
|
<% if object.title %>
|
3
|
-
<%=
|
4
|
-
<%=
|
8
|
+
<%= content_tag(:div, class: "pb_nav_list_title") do %>
|
9
|
+
<%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>
|
5
10
|
<%= pb_rails("caption", props: { text: object.title, dark: dark }) %>
|
6
11
|
<% end %>
|
7
12
|
<% end %>
|
@@ -1,4 +1,9 @@
|
|
1
|
-
<%=
|
1
|
+
<%= content_tag(:div,
|
2
|
+
aria: object.aria,
|
3
|
+
class: object.classname,
|
4
|
+
data: object.data,
|
5
|
+
id: object.id,
|
6
|
+
**combined_html_options) do %>
|
2
7
|
<div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
|
3
8
|
<div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
|
4
9
|
<%= content.presence %>
|
@@ -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.
|
@@ -35,6 +35,7 @@ examples:
|
|
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
37
|
- table_with_clickable_rows: Table with Clickable Rows
|
38
|
+
- table_with_selectable_rows: Table with Selectable Rows
|
38
39
|
|
39
40
|
react:
|
40
41
|
- table_sm: Small
|
@@ -71,4 +72,5 @@ examples:
|
|
71
72
|
- table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
|
72
73
|
- table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
|
73
74
|
- table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
|
74
|
-
- table_with_clickable_rows: Table with Clickable Rows
|
75
|
+
- table_with_clickable_rows: Table with Clickable Rows
|
76
|
+
- table_with_selectable_rows: Table with Selectable Rows
|
@@ -33,4 +33,5 @@ export { default as TableWithCollapsibleWithCustomContent } from './_table_with_
|
|
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
35
|
export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
|
36
|
-
export { default as
|
36
|
+
export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
|
37
|
+
export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
|