playbook_ui_docs 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/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/dist/playbook-doc.js +9 -9
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 48fa54ed21292bb753557e9c8175abc9b04e07c835d86bc2a42e362dd5ad4898
|
|
4
|
+
data.tar.gz: e3fa566ebd27f5b90e046c56a2e5b58fc60f33c27f254bea42565b7e56b75c5c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a0372d75667c45e895f60695316d3138132b694cc31c9c73135c24f527f8a269a6ea96686319f3fd2f7e3bc9ab1443e355e5e0a941c578d12abe0012ce156c83
|
|
7
|
+
data.tar.gz: 61f753d24ec060e002db18d5d552669506e4f6a0ad4161dd4ec372bc5c6324985d5ba27bfe00759e487cbd0f267e75d3ee9509d7a7f1ec02bce89d2bc6d2efcb
|
|
@@ -74,7 +74,7 @@ const MultiLevelSelectDefault = (props) => {
|
|
|
74
74
|
<MultiLevelSelect
|
|
75
75
|
id="multiselect-default"
|
|
76
76
|
onSelect={(selectedNodes) =>
|
|
77
|
-
console.log("Selected Items", selectedNodes)
|
|
77
|
+
console.log("Selected Items (default... with ids only)", selectedNodes)
|
|
78
78
|
}
|
|
79
79
|
treeData={treeData}
|
|
80
80
|
{...props}
|
|
@@ -2,4 +2,4 @@ The MultiLevelSelect kit renders a multi leveled select dropdown based on data f
|
|
|
2
2
|
|
|
3
3
|
For the React version of the kit, the `onSelect` prop returns an array of all checked items, irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
By default, the return will be an array of Id's. If you want to return the entire object, you can pass `returnCompleteData` as true. This will return an array of objects.
|
data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx
CHANGED
|
@@ -74,7 +74,7 @@ const MultiLevelSelectReturnAllSelected = (props) => {
|
|
|
74
74
|
<MultiLevelSelect
|
|
75
75
|
id="multiselect-parent-persistence"
|
|
76
76
|
onSelect={(selectedNodes) =>
|
|
77
|
-
console.log("Selected Items", selectedNodes)
|
|
77
|
+
console.log("Selected Items with Return All Selected Data", selectedNodes)
|
|
78
78
|
}
|
|
79
79
|
returnAllSelected
|
|
80
80
|
treeData={treeData}
|
|
@@ -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'
|