playbook_ui 12.26.0.pre.alpha.multiselectfixes825 → 12.26.0.pre.alpha.railsmultilevelimprovements805
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_multi_level_select/_helper_functions.tsx +125 -47
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +259 -190
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +2 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +1 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.html.erb +73 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.jsx +87 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +72 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +6 -0
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/forms/builder/multi_level_select_field.rb +12 -0
- data/lib/playbook/forms/builder.rb +1 -0
- data/lib/playbook/version.rb +1 -1
- metadata +6 -2
|
@@ -0,0 +1,73 @@
|
|
|
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
|
+
children: [
|
|
12
|
+
{
|
|
13
|
+
label: "Talent Acquisition",
|
|
14
|
+
value: "Talent Acquisition",
|
|
15
|
+
id: "talent1",
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
label: "Business Affairs",
|
|
19
|
+
value: "Business Affairs",
|
|
20
|
+
id: "business1",
|
|
21
|
+
children: [
|
|
22
|
+
{
|
|
23
|
+
label: "Initiatives",
|
|
24
|
+
value: "Initiatives",
|
|
25
|
+
id: "initiative1",
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
label: "Learning & Development",
|
|
29
|
+
value: "Learning & Development",
|
|
30
|
+
id: "development1",
|
|
31
|
+
},
|
|
32
|
+
],
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
label: "People Experience",
|
|
36
|
+
value: "People Experience",
|
|
37
|
+
id: "experience1",
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
label: "Contact Center",
|
|
43
|
+
value: "Contact Center",
|
|
44
|
+
id: "contact1",
|
|
45
|
+
children: [
|
|
46
|
+
{
|
|
47
|
+
label: "Appointment Management",
|
|
48
|
+
value: "Appointment Management",
|
|
49
|
+
id: "appointment1",
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
label: "Customer Service",
|
|
53
|
+
value: "Customer Service",
|
|
54
|
+
id: "customer1",
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
label: "Energy",
|
|
58
|
+
value: "Energy",
|
|
59
|
+
id: "energy1",
|
|
60
|
+
},
|
|
61
|
+
],
|
|
62
|
+
},
|
|
63
|
+
],
|
|
64
|
+
}] %>
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
<%= pb_rails("multi_level_select", props: {
|
|
68
|
+
id: "default-multi-level-select",
|
|
69
|
+
tree_data: treeData,
|
|
70
|
+
return_complete_data: true
|
|
71
|
+
}) %>
|
|
72
|
+
|
|
73
|
+
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_complete_data.jsx
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
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
|
+
children: [
|
|
16
|
+
{
|
|
17
|
+
label: "Talent Acquisition",
|
|
18
|
+
value: "Talent Acquisition",
|
|
19
|
+
id: "talent1",
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
label: "Business Affairs",
|
|
23
|
+
value: "Business Affairs",
|
|
24
|
+
id: "business1",
|
|
25
|
+
children: [
|
|
26
|
+
{
|
|
27
|
+
label: "Initiatives",
|
|
28
|
+
value: "Initiatives",
|
|
29
|
+
id: "initiative1",
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
label: "Learning & Development",
|
|
33
|
+
value: "Learning & Development",
|
|
34
|
+
id: "development1",
|
|
35
|
+
},
|
|
36
|
+
],
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
label: "People Experience",
|
|
40
|
+
value: "People Experience",
|
|
41
|
+
id: "experience1",
|
|
42
|
+
},
|
|
43
|
+
],
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
label: "Contact Center",
|
|
47
|
+
value: "Contact Center",
|
|
48
|
+
id: "contact1",
|
|
49
|
+
children: [
|
|
50
|
+
{
|
|
51
|
+
label: "Appointment Management",
|
|
52
|
+
value: "Appointment Management",
|
|
53
|
+
id: "appointment1",
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
label: "Customer Service",
|
|
57
|
+
value: "Customer Service",
|
|
58
|
+
id: "customer1",
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
label: "Energy",
|
|
62
|
+
value: "Energy",
|
|
63
|
+
id: "energy1",
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
},
|
|
67
|
+
],
|
|
68
|
+
},
|
|
69
|
+
]
|
|
70
|
+
|
|
71
|
+
const MultiLevelSelectDefault = (props) => {
|
|
72
|
+
return (
|
|
73
|
+
<div>
|
|
74
|
+
<MultiLevelSelect
|
|
75
|
+
id='multiselect-default'
|
|
76
|
+
onSelect={(selectedNodes) =>
|
|
77
|
+
console.log("Selected Items with Complete Data", selectedNodes)
|
|
78
|
+
}
|
|
79
|
+
returnCompleteData
|
|
80
|
+
treeData={treeData}
|
|
81
|
+
{...props}
|
|
82
|
+
/>
|
|
83
|
+
</div>
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
export default MultiLevelSelectDefault
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
|
|
2
|
+
|
|
3
|
+
<% treeData = [{
|
|
4
|
+
label: "Power Home Remodeling",
|
|
5
|
+
value: "Power Home Remodeling",
|
|
6
|
+
id: "powerhome1",
|
|
7
|
+
expanded: true,
|
|
8
|
+
children: [
|
|
9
|
+
{
|
|
10
|
+
label: "People",
|
|
11
|
+
value: "People",
|
|
12
|
+
id: "people1",
|
|
13
|
+
children: [
|
|
14
|
+
{
|
|
15
|
+
label: "Talent Acquisition",
|
|
16
|
+
value: "Talent Acquisition",
|
|
17
|
+
id: "talent1",
|
|
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
|
+
},
|
|
29
|
+
{
|
|
30
|
+
label: "Learning & Development",
|
|
31
|
+
value: "Learning & Development",
|
|
32
|
+
id: "development1",
|
|
33
|
+
},
|
|
34
|
+
],
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
label: "People Experience",
|
|
38
|
+
value: "People Experience",
|
|
39
|
+
id: "experience1",
|
|
40
|
+
},
|
|
41
|
+
],
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
label: "Contact Center",
|
|
45
|
+
value: "Contact Center",
|
|
46
|
+
id: "contact1",
|
|
47
|
+
children: [
|
|
48
|
+
{
|
|
49
|
+
label: "Appointment Management",
|
|
50
|
+
value: "Appointment Management",
|
|
51
|
+
id: "appointment1",
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
label: "Customer Service",
|
|
55
|
+
value: "Customer Service",
|
|
56
|
+
id: "customer1",
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
label: "Energy",
|
|
60
|
+
value: "Energy",
|
|
61
|
+
id: "energy1",
|
|
62
|
+
},
|
|
63
|
+
],
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
}] %>
|
|
67
|
+
|
|
68
|
+
<%= form.multi_level_select :example, props: {id: "with-form-multi-level-select", tree_data: treeData, return_all_selected: true } %>
|
|
69
|
+
<%= form.actions do |action| %>
|
|
70
|
+
<%= action.button props: { type: "submit", text: "Submit", variant: "primary", margin_top: "lg" } %>
|
|
71
|
+
<% end %>
|
|
72
|
+
<% end %>
|
|
@@ -2,8 +2,11 @@ examples:
|
|
|
2
2
|
rails:
|
|
3
3
|
- multi_level_select_default: Default
|
|
4
4
|
- multi_level_select_return_all_selected: Return All Selected
|
|
5
|
+
- multi_level_select_return_complete_data: Return Complete Data
|
|
6
|
+
- multi_level_select_with_form: With Form
|
|
5
7
|
|
|
6
8
|
react:
|
|
7
9
|
- multi_level_select_default: Default
|
|
8
10
|
- multi_level_select_return_all_selected: Return All Selected
|
|
11
|
+
- multi_level_select_return_complete_data: Return Complete Data
|
|
9
12
|
|
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
|
|
2
|
-
export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
|
|
2
|
+
export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
|
|
3
|
+
export { default as MultiLevelSelectReturnCompleteData } from './_multi_level_select_return_complete_data.jsx'
|
|
@@ -3,10 +3,14 @@
|
|
|
3
3
|
module Playbook
|
|
4
4
|
module PbMultiLevelSelect
|
|
5
5
|
class MultiLevelSelect < Playbook::KitBase
|
|
6
|
+
prop :id
|
|
7
|
+
prop :name
|
|
6
8
|
prop :tree_data, type: Playbook::Props::Array,
|
|
7
9
|
default: []
|
|
8
10
|
prop :return_all_selected, type: Playbook::Props::Boolean,
|
|
9
11
|
default: false
|
|
12
|
+
prop :return_complete_data, type: Playbook::Props::Boolean,
|
|
13
|
+
default: false
|
|
10
14
|
|
|
11
15
|
def classname
|
|
12
16
|
generate_classname("pb_multi_level_select")
|
|
@@ -15,8 +19,10 @@ module Playbook
|
|
|
15
19
|
def multi_level_select_options
|
|
16
20
|
{
|
|
17
21
|
id: id,
|
|
22
|
+
name: name,
|
|
18
23
|
treeData: tree_data,
|
|
19
24
|
returnAllSelected: return_all_selected,
|
|
25
|
+
returnCompleteData: return_complete_data,
|
|
20
26
|
}
|
|
21
27
|
end
|
|
22
28
|
end
|