playbook_ui_docs 14.15.0.pre.alpha.play1949lodashremoval3of36758 → 14.15.0.pre.alpha.play1949lodashremoval3of36815
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_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_form/docs/_form_form_with.html.erb +67 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +67 -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_icon_button/docs/_icon_button_click.jsx +13 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/index.js +1 -0
- 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/_multi_level_select_error.html.erb +72 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx +97 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +71 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +91 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +14 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +6 -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 +25 -2
|
@@ -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.
|
|
@@ -0,0 +1,74 @@
|
|
|
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-default-rails",
|
|
72
|
+
name: "disabled_options_parent_default",
|
|
73
|
+
tree_data: treeData
|
|
74
|
+
}) %>
|
|
@@ -0,0 +1,92 @@
|
|
|
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 MultiLevelSelectDisabledOptionsParentDefault = (props) => {
|
|
75
|
+
return (
|
|
76
|
+
<div>
|
|
77
|
+
<MultiLevelSelect
|
|
78
|
+
id='multiselect-disabled-options-parent-default'
|
|
79
|
+
onSelect={(selectedNodes) =>
|
|
80
|
+
console.log(
|
|
81
|
+
"Selected Items",
|
|
82
|
+
selectedNodes
|
|
83
|
+
)
|
|
84
|
+
}
|
|
85
|
+
treeData={treeData}
|
|
86
|
+
{...props}
|
|
87
|
+
/>
|
|
88
|
+
</div>
|
|
89
|
+
)
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
export default MultiLevelSelectDisabledOptionsParentDefault;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<% treeData = [{
|
|
2
|
+
label: "Power Home Remodeling",
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
|
+
id: "100",
|
|
5
|
+
expanded: true,
|
|
6
|
+
children: [
|
|
7
|
+
{
|
|
8
|
+
label: "People",
|
|
9
|
+
value: "People",
|
|
10
|
+
id: "101",
|
|
11
|
+
expanded: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Talent Acquisition",
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
|
+
id: "102",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: "Business Affairs",
|
|
20
|
+
value: "Business Affairs",
|
|
21
|
+
id: "103",
|
|
22
|
+
children: [
|
|
23
|
+
{
|
|
24
|
+
label: "Initiatives",
|
|
25
|
+
value: "Initiatives",
|
|
26
|
+
id: "104",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
label: "Learning & Development",
|
|
30
|
+
value: "Learning & Development",
|
|
31
|
+
id: "105",
|
|
32
|
+
},
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
label: "People Experience",
|
|
37
|
+
value: "People Experience",
|
|
38
|
+
id: "106",
|
|
39
|
+
},
|
|
40
|
+
],
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
label: "Contact Center",
|
|
44
|
+
value: "Contact Center",
|
|
45
|
+
id: "107",
|
|
46
|
+
children: [
|
|
47
|
+
{
|
|
48
|
+
label: "Appointment Management",
|
|
49
|
+
value: "Appointment Management",
|
|
50
|
+
id: "108",
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
label: "Customer Service",
|
|
54
|
+
value: "Customer Service",
|
|
55
|
+
id: "109",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
label: "Energy",
|
|
59
|
+
value: "Energy",
|
|
60
|
+
id: "110",
|
|
61
|
+
},
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
}] %>
|
|
66
|
+
|
|
67
|
+
<%= pb_rails("multi_level_select", props: {
|
|
68
|
+
error: "Please make a valid selection",
|
|
69
|
+
id: "multi-level-select-error-rails",
|
|
70
|
+
name: "my_array",
|
|
71
|
+
tree_data: treeData
|
|
72
|
+
}) %>
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import React, { useState, useEffect } 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
|
+
children: [
|
|
27
|
+
{
|
|
28
|
+
label: "Initiatives",
|
|
29
|
+
value: "Initiatives",
|
|
30
|
+
id: "initiative1",
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
label: "Learning & Development",
|
|
34
|
+
value: "Learning & Development",
|
|
35
|
+
id: "development1",
|
|
36
|
+
},
|
|
37
|
+
],
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
label: "People Experience",
|
|
41
|
+
value: "People Experience",
|
|
42
|
+
id: "experience1",
|
|
43
|
+
},
|
|
44
|
+
],
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
label: "Contact Center",
|
|
48
|
+
value: "Contact Center",
|
|
49
|
+
id: "contact1",
|
|
50
|
+
children: [
|
|
51
|
+
{
|
|
52
|
+
label: "Appointment Management",
|
|
53
|
+
value: "Appointment Management",
|
|
54
|
+
id: "appointment1",
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
label: "Customer Service",
|
|
58
|
+
value: "Customer Service",
|
|
59
|
+
id: "customer1",
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
label: "Energy",
|
|
63
|
+
value: "Energy",
|
|
64
|
+
id: "energy1",
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
},
|
|
68
|
+
],
|
|
69
|
+
},
|
|
70
|
+
];
|
|
71
|
+
|
|
72
|
+
const MultiLevelSelectError = (props) => {
|
|
73
|
+
const [selectedItems, setSelectedItems] = useState([]);
|
|
74
|
+
const [errorState, setErrorState] = useState("Please make a valid selection");
|
|
75
|
+
|
|
76
|
+
useEffect(() => {
|
|
77
|
+
if (selectedItems.length === 0) {
|
|
78
|
+
setErrorState("Please make a valid selection");
|
|
79
|
+
} else {
|
|
80
|
+
setErrorState(null);
|
|
81
|
+
}
|
|
82
|
+
}, [selectedItems]);
|
|
83
|
+
|
|
84
|
+
return (
|
|
85
|
+
<div>
|
|
86
|
+
<MultiLevelSelect
|
|
87
|
+
error={errorState}
|
|
88
|
+
id="multiselect-error"
|
|
89
|
+
onSelect={(selectedNodes) => setSelectedItems(selectedNodes)}
|
|
90
|
+
treeData={treeData}
|
|
91
|
+
{...props}
|
|
92
|
+
/>
|
|
93
|
+
</div>
|
|
94
|
+
);
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
export default MultiLevelSelectError;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<% treeData = [{
|
|
2
|
+
label: "Power Home Remodeling",
|
|
3
|
+
value: "Power Home Remodeling",
|
|
4
|
+
id: "100",
|
|
5
|
+
expanded: true,
|
|
6
|
+
children: [
|
|
7
|
+
{
|
|
8
|
+
label: "People",
|
|
9
|
+
value: "People",
|
|
10
|
+
id: "101",
|
|
11
|
+
expanded: true,
|
|
12
|
+
children: [
|
|
13
|
+
{
|
|
14
|
+
label: "Talent Acquisition",
|
|
15
|
+
value: "Talent Acquisition",
|
|
16
|
+
id: "102",
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: "Business Affairs",
|
|
20
|
+
value: "Business Affairs",
|
|
21
|
+
id: "103",
|
|
22
|
+
children: [
|
|
23
|
+
{
|
|
24
|
+
label: "Initiatives",
|
|
25
|
+
value: "Initiatives",
|
|
26
|
+
id: "104",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
label: "Learning & Development",
|
|
30
|
+
value: "Learning & Development",
|
|
31
|
+
id: "105",
|
|
32
|
+
},
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
label: "People Experience",
|
|
37
|
+
value: "People Experience",
|
|
38
|
+
id: "106",
|
|
39
|
+
},
|
|
40
|
+
],
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
label: "Contact Center",
|
|
44
|
+
value: "Contact Center",
|
|
45
|
+
id: "107",
|
|
46
|
+
children: [
|
|
47
|
+
{
|
|
48
|
+
label: "Appointment Management",
|
|
49
|
+
value: "Appointment Management",
|
|
50
|
+
id: "108",
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
label: "Customer Service",
|
|
54
|
+
value: "Customer Service",
|
|
55
|
+
id: "109",
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
label: "Energy",
|
|
59
|
+
value: "Energy",
|
|
60
|
+
id: "110",
|
|
61
|
+
},
|
|
62
|
+
],
|
|
63
|
+
},
|
|
64
|
+
],
|
|
65
|
+
}] %>
|
|
66
|
+
|
|
67
|
+
<%= pb_rails("multi_level_select", props: {
|
|
68
|
+
id: "multi-level-select-label-rails",
|
|
69
|
+
label: "Select a department",
|
|
70
|
+
tree_data: treeData
|
|
71
|
+
}) %>
|
|
@@ -0,0 +1,91 @@
|
|
|
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
|
+
children: [
|
|
27
|
+
{
|
|
28
|
+
label: "Initiatives",
|
|
29
|
+
value: "Initiatives",
|
|
30
|
+
id: "initiative1",
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
label: "Learning & Development",
|
|
34
|
+
value: "Learning & Development",
|
|
35
|
+
id: "development1",
|
|
36
|
+
},
|
|
37
|
+
],
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
label: "People Experience",
|
|
41
|
+
value: "People Experience",
|
|
42
|
+
id: "experience1",
|
|
43
|
+
},
|
|
44
|
+
],
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
label: "Contact Center",
|
|
48
|
+
value: "Contact Center",
|
|
49
|
+
id: "contact1",
|
|
50
|
+
children: [
|
|
51
|
+
{
|
|
52
|
+
label: "Appointment Management",
|
|
53
|
+
value: "Appointment Management",
|
|
54
|
+
id: "appointment1",
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
label: "Customer Service",
|
|
58
|
+
value: "Customer Service",
|
|
59
|
+
id: "customer1",
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
label: "Energy",
|
|
63
|
+
value: "Energy",
|
|
64
|
+
id: "energy1",
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
},
|
|
68
|
+
],
|
|
69
|
+
},
|
|
70
|
+
];
|
|
71
|
+
|
|
72
|
+
const MultiLevelSelectDefault = (props) => {
|
|
73
|
+
return (
|
|
74
|
+
<div>
|
|
75
|
+
<MultiLevelSelect
|
|
76
|
+
id='multiselect-label'
|
|
77
|
+
label="Select a Department"
|
|
78
|
+
onSelect={(selectedNodes) =>
|
|
79
|
+
console.log(
|
|
80
|
+
"Selected Items",
|
|
81
|
+
selectedNodes
|
|
82
|
+
)
|
|
83
|
+
}
|
|
84
|
+
treeData={treeData}
|
|
85
|
+
{...props}
|
|
86
|
+
/>
|
|
87
|
+
</div>
|
|
88
|
+
)
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
export default MultiLevelSelectDefault;
|
|
@@ -8,7 +8,13 @@ examples:
|
|
|
8
8
|
- multi_level_select_with_form: With Form
|
|
9
9
|
- multi_level_select_color: With Pills (Custom Color)
|
|
10
10
|
- multi_level_select_reset: Reset Selection
|
|
11
|
-
-
|
|
11
|
+
- multi_level_select_label: With Label
|
|
12
|
+
- multi_level_select_error: Error
|
|
13
|
+
- multi_level_select_disabled: Disabled Input
|
|
14
|
+
- multi_level_select_disabled_options_default: Disabled Options (Default)
|
|
15
|
+
- multi_level_select_disabled_options: Disabled Options (Return All Selected)
|
|
16
|
+
- multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
|
|
17
|
+
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|
|
12
18
|
|
|
13
19
|
react:
|
|
14
20
|
- multi_level_select_default: Default
|
|
@@ -20,4 +26,10 @@ examples:
|
|
|
20
26
|
- multi_level_select_color: With Pills (Custom Color)
|
|
21
27
|
- multi_level_select_with_children: Checkboxes With Children
|
|
22
28
|
- multi_level_select_with_children_with_radios: Single Select With Children
|
|
23
|
-
-
|
|
29
|
+
- multi_level_select_label: With Label
|
|
30
|
+
- multi_level_select_error: Error
|
|
31
|
+
- multi_level_select_disabled: Disabled Input
|
|
32
|
+
- multi_level_select_disabled_options_default: Disabled Options (Default)
|
|
33
|
+
- multi_level_select_disabled_options: Disabled Options (Return All Selected)
|
|
34
|
+
- multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
|
|
35
|
+
- multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
|