playbook_ui 12.26.0.pre.alpha.multiselectfixes798 → 12.26.0.pre.alpha.railsmultilevelimprovements805

Sign up to get free protection for your applications and to get access to all the features.
@@ -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
- For the Rails version, the array of checked items is attached to the DOM in a data attribute titled `data-tree` on the wrapping div around the MultiLevelSelect.
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.
@@ -64,9 +64,8 @@
64
64
  ],
65
65
  }] %>
66
66
 
67
-
68
67
  <%= pb_rails("multi_level_select", props: {
69
68
  id: "parent-persistence-multi-level-select",
70
69
  tree_data:treeData,
71
70
  return_all_selected: true
72
- }) %>
71
+ }) %>
@@ -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
+
@@ -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