playbook_ui 14.16.0.pre.rc.5 → 14.16.0.pre.rc.6
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_draggable/docs/_draggable_default.jsx +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +5 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +14 -5
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb +76 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx +94 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb +75 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx +93 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.md +3 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.html.erb +75 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx +93 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.md +3 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb +74 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx +92 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.md +3 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +10 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +4 -0
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +1 -0
- data/dist/chunks/{_typeahead-D720juMS.js → _typeahead-CRAPc8k-.js} +1 -1
- data/dist/chunks/{_weekday_stacked-D_IMHltv.js → _weekday_stacked-T0kFfioG.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/lib/playbook/version.rb +1 -1
- metadata +15 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 4e376bd1a55dc2e6666d919754327203ae8c500673ee5228c08c1991e67a9666
|
|
4
|
+
data.tar.gz: 4f4fa0ef28b813c53d27ebc46637fa591fcf9b1ede2ad232b1ec5ca5954a159b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e88944c44a944ee0f786032ec7069c4ab32252a9fc6f10701a8eca2173bf50f0b038c549a90ab51778999443ab7ad4557dda03e6f665ea773b694fa2c9112a96
|
|
7
|
+
data.tar.gz: 40d1baee316d24c49263c4d1ed3139c6bec3b4a8fa609b5ed845e3db01a2dd00fefc9370a72b8de4a871c179d93747b6b328877d26c3bc4c59ede14d169a8f01
|
|
@@ -88,7 +88,11 @@ export const getDefaultCheckedItems = (
|
|
|
88
88
|
items.forEach((item: { [key: string]: any }) => {
|
|
89
89
|
if (item.checked) {
|
|
90
90
|
if (item.children && item.children.length > 0) {
|
|
91
|
-
|
|
91
|
+
// Filter out disabled children (only consider selectable items)
|
|
92
|
+
const selectableChildren = item.children.filter(
|
|
93
|
+
(child: { [key: string]: any }) => !child.disabled
|
|
94
|
+
);
|
|
95
|
+
const uncheckedChildren = selectableChildren.filter(
|
|
92
96
|
(child: { [key: string]: any }) => !child.checked
|
|
93
97
|
);
|
|
94
98
|
if (uncheckedChildren.length === 0) {
|
|
@@ -113,7 +113,9 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
|
|
|
113
113
|
return;
|
|
114
114
|
}
|
|
115
115
|
return tree.map((item: { [key: string]: any }) => {
|
|
116
|
-
item.
|
|
116
|
+
if (!item.disabled) {
|
|
117
|
+
item.checked = check;
|
|
118
|
+
}
|
|
117
119
|
item.children = modifyRecursive(item.children, check);
|
|
118
120
|
return item;
|
|
119
121
|
});
|
|
@@ -124,12 +126,16 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
|
|
|
124
126
|
treeData: { [key: string]: any }[],
|
|
125
127
|
selectedIds: string[],
|
|
126
128
|
parent_id: string | null = null,
|
|
127
|
-
depth = 0
|
|
129
|
+
depth = 0,
|
|
130
|
+
parentDisabled = false
|
|
128
131
|
) => {
|
|
129
132
|
if (!Array.isArray(treeData)) {
|
|
130
133
|
return;
|
|
131
134
|
}
|
|
132
135
|
return treeData.map((item: { [key: string]: any } | any) => {
|
|
136
|
+
// An item is disabled if it is explicitly set as disabled or if its parent is disabled
|
|
137
|
+
const isDisabled = item.disabled || (parentDisabled && !returnAllSelected);
|
|
138
|
+
|
|
133
139
|
const newItem = {
|
|
134
140
|
...item,
|
|
135
141
|
checked: Boolean(
|
|
@@ -137,6 +143,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
|
|
|
137
143
|
),
|
|
138
144
|
parent_id,
|
|
139
145
|
depth,
|
|
146
|
+
disabled: isDisabled,
|
|
140
147
|
};
|
|
141
148
|
if (newItem.children && newItem.children.length > 0) {
|
|
142
149
|
const children =
|
|
@@ -147,7 +154,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
|
|
|
147
154
|
children,
|
|
148
155
|
selectedIds,
|
|
149
156
|
newItem.id,
|
|
150
|
-
depth + 1
|
|
157
|
+
depth + 1,
|
|
158
|
+
isDisabled
|
|
151
159
|
);
|
|
152
160
|
}
|
|
153
161
|
return newItem;
|
|
@@ -244,8 +252,9 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
|
|
|
244
252
|
return tree.map((item: any) => {
|
|
245
253
|
if (item.id != id) item.children = modifyValue(id, item.children, check);
|
|
246
254
|
else {
|
|
247
|
-
item.
|
|
248
|
-
|
|
255
|
+
if (!item.disabled) {
|
|
256
|
+
item.checked = check;
|
|
257
|
+
}
|
|
249
258
|
if (variant === "single") {
|
|
250
259
|
// Single select: no children should be checked
|
|
251
260
|
item.children = modifyRecursive(item.children, !check);
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<% treeData = [{
|
|
2
|
+
label: "Power Home Remodeling",
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
|
+
id: "powerhome1",
|
|
5
|
+
expanded: true,
|
|
6
|
+
children: [
|
|
7
|
+
{
|
|
8
|
+
label: "People",
|
|
9
|
+
value: "People",
|
|
10
|
+
id: "people1",
|
|
11
|
+
expanded: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Talent Acquisition",
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
|
+
id: "talent1",
|
|
17
|
+
disabled: true,
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
label: "Business Affairs",
|
|
21
|
+
value: "Business Affairs",
|
|
22
|
+
id: "business1",
|
|
23
|
+
children: [
|
|
24
|
+
{
|
|
25
|
+
label: "Initiatives",
|
|
26
|
+
value: "Initiatives",
|
|
27
|
+
id: "initiative1",
|
|
28
|
+
disabled: true,
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
label: "Learning & Development",
|
|
32
|
+
value: "Learning & Development",
|
|
33
|
+
id: "development1",
|
|
34
|
+
},
|
|
35
|
+
],
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
label: "People Experience",
|
|
39
|
+
value: "People Experience",
|
|
40
|
+
id: "experience1",
|
|
41
|
+
},
|
|
42
|
+
],
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
label: "Contact Center",
|
|
46
|
+
value: "Contact Center",
|
|
47
|
+
id: "contact1",
|
|
48
|
+
children: [
|
|
49
|
+
{
|
|
50
|
+
label: "Appointment Management",
|
|
51
|
+
value: "Appointment Management",
|
|
52
|
+
id: "appointment1",
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
label: "Customer Service",
|
|
56
|
+
value: "Customer Service",
|
|
57
|
+
id: "customer1",
|
|
58
|
+
disabled: true,
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
label: "Energy",
|
|
62
|
+
value: "Energy",
|
|
63
|
+
id: "energy1",
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
},
|
|
67
|
+
],
|
|
68
|
+
}] %>
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
<%= pb_rails("multi_level_select", props: {
|
|
72
|
+
id: "multi-level-select-disabled-options-rails",
|
|
73
|
+
name: "disabled_options",
|
|
74
|
+
return_all_selected: true,
|
|
75
|
+
tree_data: treeData
|
|
76
|
+
}) %>
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import MultiLevelSelect from "../_multi_level_select";
|
|
3
|
+
|
|
4
|
+
const treeData = [
|
|
5
|
+
{
|
|
6
|
+
label: "Power Home Remodeling",
|
|
7
|
+
value: "Power Home Remodeling",
|
|
8
|
+
id: "powerhome1",
|
|
9
|
+
expanded: true,
|
|
10
|
+
children: [
|
|
11
|
+
{
|
|
12
|
+
label: "People",
|
|
13
|
+
value: "People",
|
|
14
|
+
id: "people1",
|
|
15
|
+
expanded: true,
|
|
16
|
+
children: [
|
|
17
|
+
{
|
|
18
|
+
label: "Talent Acquisition",
|
|
19
|
+
value: "Talent Acquisition",
|
|
20
|
+
id: "talent1",
|
|
21
|
+
disabled: true,
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Business Affairs",
|
|
25
|
+
value: "Business Affairs",
|
|
26
|
+
id: "business1",
|
|
27
|
+
children: [
|
|
28
|
+
{
|
|
29
|
+
label: "Initiatives",
|
|
30
|
+
value: "Initiatives",
|
|
31
|
+
id: "initiative1",
|
|
32
|
+
disabled: true,
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
label: "Learning & Development",
|
|
36
|
+
value: "Learning & Development",
|
|
37
|
+
id: "development1",
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
label: "People Experience",
|
|
43
|
+
value: "People Experience",
|
|
44
|
+
id: "experience1",
|
|
45
|
+
},
|
|
46
|
+
],
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
label: "Contact Center",
|
|
50
|
+
value: "Contact Center",
|
|
51
|
+
id: "contact1",
|
|
52
|
+
children: [
|
|
53
|
+
{
|
|
54
|
+
label: "Appointment Management",
|
|
55
|
+
value: "Appointment Management",
|
|
56
|
+
id: "appointment1",
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
label: "Customer Service",
|
|
60
|
+
value: "Customer Service",
|
|
61
|
+
id: "customer1",
|
|
62
|
+
disabled: true,
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
label: "Energy",
|
|
66
|
+
value: "Energy",
|
|
67
|
+
id: "energy1",
|
|
68
|
+
},
|
|
69
|
+
],
|
|
70
|
+
},
|
|
71
|
+
],
|
|
72
|
+
},
|
|
73
|
+
];
|
|
74
|
+
|
|
75
|
+
const MultiLevelSelectDisabledOptions = (props) => {
|
|
76
|
+
return (
|
|
77
|
+
<div>
|
|
78
|
+
<MultiLevelSelect
|
|
79
|
+
id='multiselect-disabled-options'
|
|
80
|
+
onSelect={(selectedNodes) =>
|
|
81
|
+
console.log(
|
|
82
|
+
"Selected Items",
|
|
83
|
+
selectedNodes
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
returnAllSelected
|
|
87
|
+
treeData={treeData}
|
|
88
|
+
{...props}
|
|
89
|
+
/>
|
|
90
|
+
</div>
|
|
91
|
+
)
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
export default MultiLevelSelectDisabledOptions;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
<% treeData = [{
|
|
2
|
+
label: "Power Home Remodeling",
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
|
+
id: "powerhome1",
|
|
5
|
+
expanded: true,
|
|
6
|
+
children: [
|
|
7
|
+
{
|
|
8
|
+
label: "People",
|
|
9
|
+
value: "People",
|
|
10
|
+
id: "people1",
|
|
11
|
+
expanded: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Talent Acquisition",
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
|
+
id: "talent1",
|
|
17
|
+
disabled: true,
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
label: "Business Affairs",
|
|
21
|
+
value: "Business Affairs",
|
|
22
|
+
id: "business1",
|
|
23
|
+
children: [
|
|
24
|
+
{
|
|
25
|
+
label: "Initiatives",
|
|
26
|
+
value: "Initiatives",
|
|
27
|
+
id: "initiative1",
|
|
28
|
+
disabled: true,
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
label: "Learning & Development",
|
|
32
|
+
value: "Learning & Development",
|
|
33
|
+
id: "development1",
|
|
34
|
+
},
|
|
35
|
+
],
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
label: "People Experience",
|
|
39
|
+
value: "People Experience",
|
|
40
|
+
id: "experience1",
|
|
41
|
+
},
|
|
42
|
+
],
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
label: "Contact Center",
|
|
46
|
+
value: "Contact Center",
|
|
47
|
+
id: "contact1",
|
|
48
|
+
children: [
|
|
49
|
+
{
|
|
50
|
+
label: "Appointment Management",
|
|
51
|
+
value: "Appointment Management",
|
|
52
|
+
id: "appointment1",
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
label: "Customer Service",
|
|
56
|
+
value: "Customer Service",
|
|
57
|
+
id: "customer1",
|
|
58
|
+
disabled: true,
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
label: "Energy",
|
|
62
|
+
value: "Energy",
|
|
63
|
+
id: "energy1",
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
},
|
|
67
|
+
],
|
|
68
|
+
}] %>
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
<%= pb_rails("multi_level_select", props: {
|
|
72
|
+
id: "multi-level-select-disabled-options-default-rails",
|
|
73
|
+
name: "disabled_options_default",
|
|
74
|
+
tree_data: treeData
|
|
75
|
+
}) %>
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import MultiLevelSelect from "../_multi_level_select";
|
|
3
|
+
|
|
4
|
+
const treeData = [
|
|
5
|
+
{
|
|
6
|
+
label: "Power Home Remodeling",
|
|
7
|
+
value: "Power Home Remodeling",
|
|
8
|
+
id: "powerhome1",
|
|
9
|
+
expanded: true,
|
|
10
|
+
children: [
|
|
11
|
+
{
|
|
12
|
+
label: "People",
|
|
13
|
+
value: "People",
|
|
14
|
+
id: "people1",
|
|
15
|
+
expanded: true,
|
|
16
|
+
children: [
|
|
17
|
+
{
|
|
18
|
+
label: "Talent Acquisition",
|
|
19
|
+
value: "Talent Acquisition",
|
|
20
|
+
id: "talent1",
|
|
21
|
+
disabled: true,
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: "Business Affairs",
|
|
25
|
+
value: "Business Affairs",
|
|
26
|
+
id: "business1",
|
|
27
|
+
children: [
|
|
28
|
+
{
|
|
29
|
+
label: "Initiatives",
|
|
30
|
+
value: "Initiatives",
|
|
31
|
+
id: "initiative1",
|
|
32
|
+
disabled: true,
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
label: "Learning & Development",
|
|
36
|
+
value: "Learning & Development",
|
|
37
|
+
id: "development1",
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
label: "People Experience",
|
|
43
|
+
value: "People Experience",
|
|
44
|
+
id: "experience1",
|
|
45
|
+
},
|
|
46
|
+
],
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
label: "Contact Center",
|
|
50
|
+
value: "Contact Center",
|
|
51
|
+
id: "contact1",
|
|
52
|
+
children: [
|
|
53
|
+
{
|
|
54
|
+
label: "Appointment Management",
|
|
55
|
+
value: "Appointment Management",
|
|
56
|
+
id: "appointment1",
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
label: "Customer Service",
|
|
60
|
+
value: "Customer Service",
|
|
61
|
+
id: "customer1",
|
|
62
|
+
disabled: true,
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
label: "Energy",
|
|
66
|
+
value: "Energy",
|
|
67
|
+
id: "energy1",
|
|
68
|
+
},
|
|
69
|
+
],
|
|
70
|
+
},
|
|
71
|
+
],
|
|
72
|
+
},
|
|
73
|
+
];
|
|
74
|
+
|
|
75
|
+
const MultiLevelSelectDisabledOptionsDefault = (props) => {
|
|
76
|
+
return (
|
|
77
|
+
<div>
|
|
78
|
+
<MultiLevelSelect
|
|
79
|
+
id='multiselect-disabled-options-default'
|
|
80
|
+
onSelect={(selectedNodes) =>
|
|
81
|
+
console.log(
|
|
82
|
+
"Selected Items",
|
|
83
|
+
selectedNodes
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
treeData={treeData}
|
|
87
|
+
{...props}
|
|
88
|
+
/>
|
|
89
|
+
</div>
|
|
90
|
+
)
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
export default MultiLevelSelectDisabledOptionsDefault;
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.md
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
To disable individual items in the treeData, include `disabled:true` within the object on the treeData that you want disabled. See the code snippet below for an example of how to do this.
|
|
2
|
+
|
|
3
|
+
If a parent is selected, the parent will be returned in the selected items list, even if it has disabled children.
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
<% treeData = [{
|
|
2
|
+
label: "Power Home Remodeling",
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
|
+
id: "powerhome1",
|
|
5
|
+
expanded: true,
|
|
6
|
+
children: [
|
|
7
|
+
{
|
|
8
|
+
label: "People",
|
|
9
|
+
value: "People",
|
|
10
|
+
id: "people1",
|
|
11
|
+
expanded: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Talent Acquisition",
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
|
+
id: "talent1",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: "Business Affairs",
|
|
20
|
+
value: "Business Affairs",
|
|
21
|
+
id: "business1",
|
|
22
|
+
expanded: true,
|
|
23
|
+
disabled: true,
|
|
24
|
+
children: [
|
|
25
|
+
{
|
|
26
|
+
label: "Initiatives",
|
|
27
|
+
value: "Initiatives",
|
|
28
|
+
id: "initiative1",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
label: "Learning & Development",
|
|
32
|
+
value: "Learning & Development",
|
|
33
|
+
id: "development1",
|
|
34
|
+
},
|
|
35
|
+
],
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
label: "People Experience",
|
|
39
|
+
value: "People Experience",
|
|
40
|
+
id: "experience1",
|
|
41
|
+
},
|
|
42
|
+
],
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
label: "Contact Center",
|
|
46
|
+
value: "Contact Center",
|
|
47
|
+
id: "contact1",
|
|
48
|
+
children: [
|
|
49
|
+
{
|
|
50
|
+
label: "Appointment Management",
|
|
51
|
+
value: "Appointment Management",
|
|
52
|
+
id: "appointment1",
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
label: "Customer Service",
|
|
56
|
+
value: "Customer Service",
|
|
57
|
+
id: "customer1",
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
label: "Energy",
|
|
61
|
+
value: "Energy",
|
|
62
|
+
id: "energy1",
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
}] %>
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
<%= pb_rails("multi_level_select", props: {
|
|
71
|
+
id: "mls-disabled-options-parent-rails",
|
|
72
|
+
name: "disabled_options_parent",
|
|
73
|
+
return_all_selected: true,
|
|
74
|
+
tree_data: treeData
|
|
75
|
+
}) %>
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import MultiLevelSelect from "../_multi_level_select";
|
|
3
|
+
|
|
4
|
+
const treeData = [
|
|
5
|
+
{
|
|
6
|
+
label: "Power Home Remodeling",
|
|
7
|
+
value: "Power Home Remodeling",
|
|
8
|
+
id: "powerhome1",
|
|
9
|
+
expanded: true,
|
|
10
|
+
children: [
|
|
11
|
+
{
|
|
12
|
+
label: "People",
|
|
13
|
+
value: "People",
|
|
14
|
+
id: "people1",
|
|
15
|
+
expanded: true,
|
|
16
|
+
children: [
|
|
17
|
+
{
|
|
18
|
+
label: "Talent Acquisition",
|
|
19
|
+
value: "Talent Acquisition",
|
|
20
|
+
id: "talent1",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
label: "Business Affairs",
|
|
24
|
+
value: "Business Affairs",
|
|
25
|
+
id: "business1",
|
|
26
|
+
expanded: true,
|
|
27
|
+
disabled: true,
|
|
28
|
+
children: [
|
|
29
|
+
{
|
|
30
|
+
label: "Initiatives",
|
|
31
|
+
value: "Initiatives",
|
|
32
|
+
id: "initiative1",
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
label: "Learning & Development",
|
|
36
|
+
value: "Learning & Development",
|
|
37
|
+
id: "development1",
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
label: "People Experience",
|
|
43
|
+
value: "People Experience",
|
|
44
|
+
id: "experience1",
|
|
45
|
+
},
|
|
46
|
+
],
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
label: "Contact Center",
|
|
50
|
+
value: "Contact Center",
|
|
51
|
+
id: "contact1",
|
|
52
|
+
children: [
|
|
53
|
+
{
|
|
54
|
+
label: "Appointment Management",
|
|
55
|
+
value: "Appointment Management",
|
|
56
|
+
id: "appointment1",
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
label: "Customer Service",
|
|
60
|
+
value: "Customer Service",
|
|
61
|
+
id: "customer1",
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
label: "Energy",
|
|
65
|
+
value: "Energy",
|
|
66
|
+
id: "energy1",
|
|
67
|
+
},
|
|
68
|
+
],
|
|
69
|
+
},
|
|
70
|
+
],
|
|
71
|
+
},
|
|
72
|
+
];
|
|
73
|
+
|
|
74
|
+
const MultiLevelSelectDisabledOptionsParent = (props) => {
|
|
75
|
+
return (
|
|
76
|
+
<div>
|
|
77
|
+
<MultiLevelSelect
|
|
78
|
+
id='multiselect-disabled-options-parent'
|
|
79
|
+
onSelect={(selectedNodes) =>
|
|
80
|
+
console.log(
|
|
81
|
+
"Selected Items",
|
|
82
|
+
selectedNodes
|
|
83
|
+
)
|
|
84
|
+
}
|
|
85
|
+
returnAllSelected
|
|
86
|
+
treeData={treeData}
|
|
87
|
+
{...props}
|
|
88
|
+
/>
|
|
89
|
+
</div>
|
|
90
|
+
)
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
export default MultiLevelSelectDisabledOptionsParent;
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.md
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
For the `returnAllSelected`/`return_all_selected` variant, disabling the parent item will NOT automatically disable it's children since this version allows you to select a parent even if all children are unselected.
|
|
2
|
+
|
|
3
|
+
You can manually pass `disabled:true` to any and all children of a disabled parent if you want to do so.
|