playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4073 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4077
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +17 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +93 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +3 -6
- data/dist/chunks/{_typeahead-CY44rh9x.js → _typeahead-ICFw7Umq.js} +1 -1
- data/dist/chunks/{_weekday_stacked-NcRanohJ.js → _weekday_stacked-BbASNHK_.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +5 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d42f1110a8a20f8551570f0838a04c79c4101cd23e99dcfd4de572eae0311937
|
4
|
+
data.tar.gz: ac930a9c82feef01f65ed6e7a75a99dee87d543953c29a7c95627edb359d6e57
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 127549a61089ed9a07131d295dd1b2ae709b305f9088fd8ce8020bb4abcf524da905da22d6404d9d458cc271a2f58456559d031554831fe2a3ea8acbaa71133a
|
7
|
+
data.tar.gz: 91e89aaa949bda7c4cd680737dd78d977a88d69af7bebdc5da2f4fd296da84be60746d178e7f9712a3042866c9d21f146fd5f5a1ee3bbc1a47bfb5968bb62851
|
@@ -202,6 +202,23 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
|
|
202
202
|
};
|
203
203
|
}, []);
|
204
204
|
|
205
|
+
useEffect(() => {
|
206
|
+
if (id) {
|
207
|
+
// Attach the clear function to the window, scoped by the id
|
208
|
+
(window as any)[`clearMultiLevelSelect_${id}`] = () => {
|
209
|
+
const resetData = modifyRecursive(formattedData, false);
|
210
|
+
setFormattedData(resetData);
|
211
|
+
setReturnedArray([]);
|
212
|
+
setDefaultReturn([]);
|
213
|
+
setSingleSelectedItem({ id: [], value: "", item: [] });
|
214
|
+
onSelect([]);
|
215
|
+
};
|
216
|
+
return () => {
|
217
|
+
delete (window as any)[`clearMultiLevelSelect_${id}`];
|
218
|
+
};
|
219
|
+
}
|
220
|
+
}, [formattedData, id, onSelect]);
|
221
|
+
|
205
222
|
// Iterate over tree, find item and set checked or unchecked
|
206
223
|
const modifyValue = (
|
207
224
|
id: string,
|
@@ -0,0 +1,93 @@
|
|
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-reset-example",
|
69
|
+
name: "my_array",
|
70
|
+
tree_data: treeData,
|
71
|
+
return_all_selected: true
|
72
|
+
}) %>
|
73
|
+
|
74
|
+
<%= pb_rails("button", props: { text: "Reset", margin_top: "lg", id:"multilevelselect-reset-button" }) %>
|
75
|
+
|
76
|
+
|
77
|
+
<script>
|
78
|
+
window.addEventListener('DOMContentLoaded', () => {
|
79
|
+
const exampleResetButton = document.querySelector("#multilevelselect-reset-button");
|
80
|
+
|
81
|
+
exampleResetButton.addEventListener("click", () => {
|
82
|
+
clearMultiLevelSelectById('multi-level-select-reset-example');
|
83
|
+
});
|
84
|
+
function clearMultiLevelSelectById(id) {
|
85
|
+
const clearFunction = window[`clearMultiLevelSelect_${id}`];
|
86
|
+
if (clearFunction) {
|
87
|
+
clearFunction();
|
88
|
+
} else {
|
89
|
+
console.warn(`No clear function found for MultiLevelSelect with id: ${id}`);
|
90
|
+
}
|
91
|
+
}
|
92
|
+
})
|
93
|
+
</script>
|
@@ -0,0 +1 @@
|
|
1
|
+
In order to clear the multilevelselect selection using an external trigger (like a reset button), the `clearMultiLevelSelect` function can be used. See the code snippet below to see this in action. The function is scoped by id so an id MUST be used on the multilevelselect kit and passed to the function as shown for it to work.
|
@@ -98,10 +98,6 @@ $flag-min-resolution: 192dpi;
|
|
98
98
|
}
|
99
99
|
}
|
100
100
|
|
101
|
-
.iti--allow-dropdown .iti__country-container:hover .iti__selected-country {
|
102
|
-
background-color: $focus_input_light;
|
103
|
-
}
|
104
|
-
|
105
101
|
.iti__country-container:hover + .text_input {
|
106
102
|
background-color: $focus_input_light;
|
107
103
|
}
|
@@ -114,8 +110,9 @@ $flag-min-resolution: 192dpi;
|
|
114
110
|
.iti__flag.iti__globe {
|
115
111
|
background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
|
116
112
|
background-position: center;
|
117
|
-
height:
|
118
|
-
|
113
|
+
height: 16px;
|
114
|
+
width: 16px;
|
115
|
+
background-size: 16px 16px;
|
119
116
|
}
|
120
117
|
|
121
118
|
.iti--show-flags .iti__selected-country {
|