playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4073 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4077
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/_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 {
|