playbook_ui_docs 14.15.0.pre.alpha.play1949lodashremoval3of36746 → 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795
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_drawer/docs/_drawer_breakpoints.html.erb +3 -0
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb +10 -4
- data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx +49 -24
- 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_typeahead/docs/_typeahead_disabled.html.erb +19 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.jsx +23 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_font_options.html.erb +22 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx +40 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_font_options_rails.md +5 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_font_options_react.md +5 -0
- data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +20 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 884bd8daec859284c610f8482afee88a70e85e7130eac71b2c51e94bae81fc0d
|
|
4
|
+
data.tar.gz: 64ea887fbc447010ce1656636b80b9b340e987cf1ab87beb20adb2aa31faffa5
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 5ba95c85a66ae722087343838dc243025e81831b530e74e0ed03764df43030e0117551466a99509da9824ca5635eefa9e5cce664583395ce5bdc58a8b2c5c7e7
|
|
7
|
+
data.tar.gz: f71107a75bd11b3b6fbc3990e37c6ed8ea00c331ee5eb20f83b7fcbe08bbbf825e25adc24e57baed1806894bd4bb49ab5914cd1114732733807d4d2a1f776509
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
|
|
2
|
+
<%= pb_rails("body", props: { text: " The breakpoint prop determines when the Drawer is always visible. Above the specified breakpoint, the Drawer remains open on the page. Below it, only the trigger element is shown, allowing you to toggle the drawer open and closed. To see this in action, click the button below and resize your window.", padding_bottom: "md" }) %>
|
|
3
|
+
<%= pb_rails("button", props: { text: "Open Doc Example in New Tab", new_window: true, link: "/drawer_page", margin_right: "lg" }) %>
|
|
@@ -1,5 +1,11 @@
|
|
|
1
|
-
<%= pb_rails("flex", props: {
|
|
2
|
-
<%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary",
|
|
3
|
-
<%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4",
|
|
1
|
+
<%= pb_rails("flex", props: { margin_bottom: "sm" }) do %>
|
|
2
|
+
<%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", size: "2x" }) %>
|
|
3
|
+
<%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", size: "2x" }) %>
|
|
4
4
|
<%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "product_5_background", size: "2x" }) %>
|
|
5
|
-
<% end %>
|
|
5
|
+
<% end %>
|
|
6
|
+
|
|
7
|
+
<%= pb_rails("flex", props: {}) do %>
|
|
8
|
+
<%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "light", size: "2x" }) %>
|
|
9
|
+
<%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "lighter", size: "2x" }) %>
|
|
10
|
+
<%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "link", size: "2x" }) %>
|
|
11
|
+
<% end %>
|
|
@@ -1,32 +1,57 @@
|
|
|
1
1
|
import React from "react"
|
|
2
2
|
import Icon from "../_icon"
|
|
3
|
+
import Flex from "../../pb_flex/_flex"
|
|
3
4
|
|
|
4
5
|
const IconDefault = (props) => {
|
|
5
6
|
return (
|
|
6
|
-
<div
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
7
|
+
<div>
|
|
8
|
+
<Flex marginBottom="sm">
|
|
9
|
+
<Icon
|
|
10
|
+
color="primary"
|
|
11
|
+
fixedWidth
|
|
12
|
+
icon="user"
|
|
13
|
+
size="2x"
|
|
14
|
+
{...props}
|
|
15
|
+
/>
|
|
16
|
+
<Icon
|
|
17
|
+
color="data_4"
|
|
18
|
+
fixedWidth
|
|
19
|
+
icon="recycle"
|
|
20
|
+
size="2x"
|
|
21
|
+
{...props}
|
|
22
|
+
/>
|
|
23
|
+
<Icon
|
|
24
|
+
color="product_5_background"
|
|
25
|
+
fixedWidth
|
|
26
|
+
icon="product-roofing"
|
|
27
|
+
size="2x"
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
</Flex>
|
|
31
|
+
|
|
32
|
+
<Flex>
|
|
33
|
+
<Icon
|
|
34
|
+
color="light"
|
|
35
|
+
fixedWidth
|
|
36
|
+
icon="user"
|
|
37
|
+
size="2x"
|
|
38
|
+
{...props}
|
|
39
|
+
/>
|
|
40
|
+
<Icon
|
|
41
|
+
color="lighter"
|
|
42
|
+
fixedWidth
|
|
43
|
+
icon="recycle"
|
|
44
|
+
size="2x"
|
|
45
|
+
{...props}
|
|
46
|
+
/>
|
|
47
|
+
<Icon
|
|
48
|
+
color="link"
|
|
49
|
+
fixedWidth
|
|
50
|
+
icon="product-roofing"
|
|
51
|
+
size="2x"
|
|
52
|
+
{...props}
|
|
53
|
+
/>
|
|
54
|
+
</Flex>
|
|
30
55
|
</div>
|
|
31
56
|
)
|
|
32
57
|
}
|
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.
|