playbook_ui 12.30.1.pre.alpha.PLAY906multilevelselectedidsprop916 → 12.30.1.pre.alpha.PLAY906multilevelselectedidsprop917

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ae638588fb6c5f4caddfe39199ce1ec6da73b976d14f8881c23f246054124bd7
4
- data.tar.gz: 8ca4ea7f743771b0a000be6aa5efc536c65a36d0d62310f84548b7a371897d38
3
+ metadata.gz: 404d26f3703a426ecde67500a1798f2813ae70c028e98ddfdd7e8f8d80105d8c
4
+ data.tar.gz: 64eb45d4f46d4961bd448ea55a5fae0de8b8a1ee6a30ba4dcd930d8b8062d82a
5
5
  SHA512:
6
- metadata.gz: 5899884bd4f18da1c43e8c4e7d296d0a51f60e22e126fbdcf5102f2bea2dad8a0e53303df41ad4007dc697c016c69efd5e97d42d8569fd43fab33de9b6267a0c
7
- data.tar.gz: 4ebaf1f49c55fd8308f2bcda3637c999f00cd2a3242c389c54fd60c073bec3d3e9cf623b48c7f002c93f2234ef964ef611e5b48bc25ce09c4b90bbf4231dd7cd
6
+ metadata.gz: 4d764ae50195612ea62e69302bea613063a6dbc42311320b044a41a198b98de8fd5a018a4eceb9ec703d230cd7a638e62e80bfc91a1dd75f9e8c8dc58f86468f
7
+ data.tar.gz: efb6027ee7c683ba70cb59aa19410dc1f5d0c488558e40476a21a818b50276781a70d16e5a57a42548062a4cb16f2b5f01508a9f29c0a29fd3372b38ca415bd0
@@ -135,7 +135,7 @@ export const recursiveCheckParent = (
135
135
  return data;
136
136
  };
137
137
 
138
- export const getExpandedItems = (treeData: { [key: string]: string }[]) => {
138
+ export const getExpandedItems = (treeData: { [key: string]: string }[], selectedIds: string[]) => {
139
139
  let expandedItems: any[] = [];
140
140
 
141
141
  const traverse = (items: string | any[], ancestors: any[] = []) => {
@@ -146,6 +146,9 @@ export const getExpandedItems = (treeData: { [key: string]: string }[]) => {
146
146
  if (item.expanded) {
147
147
  expandedItems.push(item.id);
148
148
  }
149
+ if (selectedIds && selectedIds.length && selectedIds.includes(item.id)) {
150
+ expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
151
+ }
149
152
  if (Array.isArray(item.children)) {
150
153
  const hasCheckedChildren = item.children.some(
151
154
  (child: { [key: string]: string }) => child.checked
@@ -66,7 +66,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
66
66
  //state for return for default
67
67
  const [defaultReturn, setDefaultReturn] = useState([])
68
68
  // Get expanded items from treeData.
69
- const initialExpandedItems = getExpandedItems(treeData);
69
+ const initialExpandedItems = getExpandedItems(treeData, selectedIds);
70
70
  // Initialize state with expanded items.
71
71
  const [expanded, setExpanded] = useState(initialExpandedItems);
72
72
 
@@ -0,0 +1,76 @@
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
+ children: [
12
+ {
13
+ label: "Talent Acquisition",
14
+ value: "Talent Acquisition",
15
+ id: "102",
16
+ },
17
+ {
18
+ label: "Business Affairs",
19
+ value: "Business Affairs",
20
+ id: "103",
21
+ children: [
22
+ {
23
+ label: "Initiatives",
24
+ value: "Initiatives",
25
+ id: "104",
26
+ },
27
+ {
28
+ label: "Learning & Development",
29
+ value: "Learning & Development",
30
+ id: "105",
31
+ },
32
+ ],
33
+ },
34
+ {
35
+ label: "People Experience",
36
+ value: "People Experience",
37
+ id: "106",
38
+ },
39
+ ],
40
+ },
41
+ {
42
+ label: "Contact Center",
43
+ value: "Contact Center",
44
+ id: "107",
45
+ children: [
46
+ {
47
+ label: "Appointment Management",
48
+ value: "Appointment Management",
49
+ id: "108",
50
+ },
51
+ {
52
+ label: "Customer Service",
53
+ value: "Customer Service",
54
+ id: "109",
55
+ },
56
+ {
57
+ label: "Energy",
58
+ value: "Energy",
59
+ id: "110",
60
+ },
61
+ ],
62
+ },
63
+ ],
64
+ }] %>
65
+
66
+
67
+
68
+
69
+ <%= pb_rails("multi_level_select", props: {
70
+ id: "multi-level-select-seelcted_ids",
71
+ name: "my_data_array_selected",
72
+ return_all_selected: true,
73
+ selected_ids:["110","102"],
74
+ tree_data: treeData,
75
+ }) %>
76
+
@@ -0,0 +1,88 @@
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 MultiLevelSelectSelectedIds = (props) => {
72
+ return (
73
+ <div>
74
+ <MultiLevelSelect
75
+ id="multi-level-select-selected_ids"
76
+ onSelect={(selectedNodes) =>
77
+ console.log("Selected Items with Return All Selected Data", selectedNodes)
78
+ }
79
+ returnAllSelected
80
+ selectedIds={["energy1","talent1"]}
81
+ treeData={treeData}
82
+ {...props}
83
+ />
84
+ </div>
85
+ );
86
+ };
87
+
88
+ export default MultiLevelSelectSelectedIds;
@@ -0,0 +1,3 @@
1
+ The `selectedIds` prop (`selected_ids` for Rails) allows you to pass in an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load. The prop however is optional, and items that include checked:true on the treeData itself will also load checked data.
2
+
3
+ When an item is marked as checked on page load, the dropdown will expand to show the checked items for easier accessibility.
@@ -2,9 +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_selected_ids: Selected Ids
5
6
  - multi_level_select_with_form: With Form
6
7
 
7
8
  react:
8
9
  - multi_level_select_default: Default
9
10
  - multi_level_select_return_all_selected: Return All Selected
11
+ - multi_level_select_selected_ids: Selected Ids
10
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 MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"