empower-container 0.1.5 → 0.1.6
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.
- package/dist/cjs/DatetimeFormatter.d.ts +3 -0
- package/dist/cjs/DatetimeFormatter.js +389 -0
- package/dist/cjs/Information.d.ts +10 -0
- package/dist/cjs/Information.js +62 -0
- package/dist/cjs/MenuBar.d.ts +24 -0
- package/dist/cjs/MenuBar.js +537 -0
- package/dist/cjs/Modal.d.ts +33 -0
- package/dist/cjs/Modal.js +32 -0
- package/dist/cjs/assets/Asset.d.ts +15 -0
- package/dist/cjs/assets/Asset.js +29 -0
- package/dist/cjs/constants/Constant.d.ts +15 -0
- package/dist/cjs/constants/Constant.js +35 -0
- package/dist/cjs/index.d.ts +3 -0
- package/dist/cjs/index.js +10 -0
- package/dist/cjs/inputs/Input.d.ts +25 -0
- package/dist/cjs/inputs/Input.js +106 -0
- package/dist/cjs/inputs/InputSelectionHandler.d.ts +3 -0
- package/dist/cjs/inputs/InputSelectionHandler.js +36 -0
- package/dist/cjs/inputs/Select.d.ts +28 -0
- package/dist/cjs/inputs/Select.js +403 -0
- package/dist/esm/DatetimeFormatter.d.ts +3 -0
- package/dist/esm/DatetimeFormatter.js +385 -0
- package/dist/esm/Information.d.ts +10 -0
- package/dist/esm/Information.js +37 -0
- package/dist/esm/MenuBar.d.ts +24 -0
- package/dist/esm/MenuBar.js +532 -0
- package/dist/esm/Modal.d.ts +33 -0
- package/dist/esm/Modal.js +27 -0
- package/dist/esm/assets/Asset.d.ts +15 -0
- package/dist/esm/assets/Asset.js +26 -0
- package/dist/esm/constants/Constant.d.ts +15 -0
- package/dist/esm/constants/Constant.js +32 -0
- package/dist/esm/index.d.ts +3 -0
- package/dist/esm/index.js +3 -0
- package/dist/esm/inputs/Input.d.ts +25 -0
- package/dist/esm/inputs/Input.js +104 -0
- package/dist/esm/inputs/InputSelectionHandler.d.ts +3 -0
- package/dist/esm/inputs/InputSelectionHandler.js +31 -0
- package/dist/esm/inputs/Select.d.ts +28 -0
- package/dist/esm/inputs/Select.js +399 -0
- package/dist/scss/components/_modal.scss +66 -0
- package/dist/scss/elements/_button.scss +107 -0
- package/dist/scss/elements/_index.scss +2 -0
- package/dist/scss/elements/_popover.scss +8 -0
- package/dist/scss/foundation/_colors.scss +60 -0
- package/dist/scss/foundation/_mixins.scss +41 -0
- package/dist/scss/foundation/_normalize.scss +204 -0
- package/dist/scss/foundation/_settings.scss +36 -0
- package/dist/scss/foundation/_typography.scss +95 -0
- package/dist/scss/library/_information.scss +68 -0
- package/dist/scss/library/_input.scss +37 -0
- package/dist/scss/library/_menubar.scss +225 -0
- package/dist/scss/library/_select.scss +258 -0
- package/dist/scss/style.scss +24 -0
- package/package.json +2 -2
@@ -0,0 +1,403 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
3
|
+
__assign = Object.assign || function(t) {
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
5
|
+
s = arguments[i];
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
7
|
+
t[p] = s[p];
|
8
|
+
}
|
9
|
+
return t;
|
10
|
+
};
|
11
|
+
return __assign.apply(this, arguments);
|
12
|
+
};
|
13
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
14
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
15
|
+
if (ar || !(i in from)) {
|
16
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
17
|
+
ar[i] = from[i];
|
18
|
+
}
|
19
|
+
}
|
20
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
21
|
+
};
|
22
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
23
|
+
exports.Popover = void 0;
|
24
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
25
|
+
var react_1 = require("react");
|
26
|
+
require("../../scss/style.scss");
|
27
|
+
// Imports
|
28
|
+
var Asset_1 = require("../assets/Asset");
|
29
|
+
var Popover = function (_a) {
|
30
|
+
var open = _a.open, origin = _a.origin, children = _a.children, onClick = _a.onClick;
|
31
|
+
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: open &&
|
32
|
+
(0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "em-overlay", onClick: function (e) { return onClick(e); } }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-popover", style: origin !== undefined && origin === "right" ? { right: 200 + 'px' } : { left: 0 + 'px' } }, { children: children }))] }) }));
|
33
|
+
};
|
34
|
+
exports.Popover = Popover;
|
35
|
+
var Dropdown = function (_a) {
|
36
|
+
var config = _a.config, customClass = _a.customClass, onChanged = _a.onChanged, isEmployeeSelection = _a.isEmployeeSelection, hideClearIcon = _a.hideClearIcon;
|
37
|
+
var _b = __assign({}, config), disabled = _b.disabled, options = _b.options, type = _b.type, value = _b.value, placeholder = _b.placeholder, id = _b.id;
|
38
|
+
// React Hook
|
39
|
+
var _c = (0, react_1.useState)(false), dropdownPopover = _c[0], setDropdownPopover = _c[1];
|
40
|
+
var _d = (0, react_1.useState)(options ? options : []), optionsArray = _d[0], setOptionsArray = _d[1];
|
41
|
+
var _e = (0, react_1.useState)(""), selectTemporaryValue = _e[0], setSelectTemporaryValue = _e[1];
|
42
|
+
var _f = (0, react_1.useState)(null), keyOption = _f[0], setKeyOption = _f[1];
|
43
|
+
var _g = (0, react_1.useState)(null), objectKeyOption = _g[0], setObjectKeyOption = _g[1];
|
44
|
+
// Dropdown Config Variable
|
45
|
+
var dropdownClass = disabled && disabled.constructor === Boolean ? 'em-input-field input-disabled' : 'em-input-field';
|
46
|
+
var multiSelectValue = type === 'multi-select' ? (value && value.constructor === Array && value.length > 0 ? (getSelectInputValue(value)) : '') : '';
|
47
|
+
var selectedValue = value && (value.constructor === String || value.constructor === Number) && value !== "" ? (getSelectInputValue(value)) : value && value.constructor === Array && value.length > 0 ? (getSelectInputValue(value)) : placeholder && placeholder.constructor === String ? placeholder : '-';
|
48
|
+
/**
|
49
|
+
* popoverRequestHandler
|
50
|
+
* hide and show the options popover
|
51
|
+
* @param {*} e - event
|
52
|
+
* @param {*} action - it can be either on-focus or on-blur
|
53
|
+
*/
|
54
|
+
function popoverRequestHandler(e, action) {
|
55
|
+
if (action === 'on-focus') {
|
56
|
+
type === 'select' ? setOptionsArray(options) : filterOptions(selectTemporaryValue, value);
|
57
|
+
setDropdownPopover(e.currentTarget);
|
58
|
+
setKeyOption(null);
|
59
|
+
setObjectKeyOption(null);
|
60
|
+
}
|
61
|
+
else {
|
62
|
+
setDropdownPopover(false);
|
63
|
+
setSelectTemporaryValue("");
|
64
|
+
}
|
65
|
+
}
|
66
|
+
/**
|
67
|
+
* optionSelectionHandler
|
68
|
+
* manipulate the selected options
|
69
|
+
* @param {*} e - event
|
70
|
+
* @param {*} opt - selected option from the list
|
71
|
+
* return Object/Array - the selected manipulated values from the list
|
72
|
+
*/
|
73
|
+
function optionSelectionHandler(e, opt) {
|
74
|
+
if (type && type === 'select') {
|
75
|
+
popoverRequestHandler(e, 'on-blur');
|
76
|
+
return onChanged ? onChanged(e, opt.value) : false;
|
77
|
+
}
|
78
|
+
else if (type && type === 'multi-select') {
|
79
|
+
var valueCopy_1 = value ? selectedOptions(__spreadArray([], value, true)) : [];
|
80
|
+
if (opt === 'select-all') {
|
81
|
+
var notSelectedOptions = [];
|
82
|
+
if (optionsArray.constructor === Array) {
|
83
|
+
notSelectedOptions = optionsArray.filter(function (item) {
|
84
|
+
return valueCopy_1.indexOf(item) < 0;
|
85
|
+
});
|
86
|
+
if (notSelectedOptions.length > 0) {
|
87
|
+
valueCopy_1 = __spreadArray(__spreadArray([], valueCopy_1, true), notSelectedOptions, true);
|
88
|
+
}
|
89
|
+
else {
|
90
|
+
valueCopy_1 = optionsArray.filter(function (item) {
|
91
|
+
return valueCopy_1.indexOf(item) < -1;
|
92
|
+
});
|
93
|
+
}
|
94
|
+
}
|
95
|
+
else if (optionsArray.constructor === Object) {
|
96
|
+
var mergeOptions_1 = [];
|
97
|
+
Object.values(optionsArray).map(function (optval) {
|
98
|
+
mergeOptions_1 = __spreadArray(__spreadArray([], mergeOptions_1, true), optval.options, true);
|
99
|
+
return optval;
|
100
|
+
});
|
101
|
+
notSelectedOptions = mergeOptions_1.filter(function (item) {
|
102
|
+
return valueCopy_1.indexOf(item) < 0;
|
103
|
+
});
|
104
|
+
if (notSelectedOptions.length > 0) {
|
105
|
+
valueCopy_1 = __spreadArray(__spreadArray([], valueCopy_1, true), notSelectedOptions, true);
|
106
|
+
}
|
107
|
+
else {
|
108
|
+
valueCopy_1 = mergeOptions_1.filter(function (item) {
|
109
|
+
return valueCopy_1.indexOf(item) < -1;
|
110
|
+
});
|
111
|
+
}
|
112
|
+
}
|
113
|
+
}
|
114
|
+
else {
|
115
|
+
var optIdx = valueCopy_1.indexOf(opt);
|
116
|
+
if (optIdx >= 0) {
|
117
|
+
valueCopy_1.splice(optIdx, 1);
|
118
|
+
}
|
119
|
+
else {
|
120
|
+
valueCopy_1 = __spreadArray(__spreadArray([], valueCopy_1, true), [opt], false);
|
121
|
+
}
|
122
|
+
}
|
123
|
+
valueCopy_1 = valueCopy_1.map(function (item) {
|
124
|
+
return item.value;
|
125
|
+
});
|
126
|
+
filterOptions(selectTemporaryValue, valueCopy_1);
|
127
|
+
e.selected = valueCopy_1;
|
128
|
+
return onChanged ? onChanged(e) : false;
|
129
|
+
}
|
130
|
+
}
|
131
|
+
/**
|
132
|
+
* inputChangedHandler
|
133
|
+
* get the current value from the input text field
|
134
|
+
* @param {*} e - event which will be used to get the changed value
|
135
|
+
*/
|
136
|
+
function inputChangedHandler(e) {
|
137
|
+
setKeyOption(null);
|
138
|
+
setObjectKeyOption(null);
|
139
|
+
setSelectTemporaryValue(e.target.value);
|
140
|
+
filterOptions(e.target.value, value);
|
141
|
+
}
|
142
|
+
/**
|
143
|
+
* getSelectInputValue
|
144
|
+
* manipulate the selected multiple values into string
|
145
|
+
* @param {*} val - multi-select selected value
|
146
|
+
* return String - the converted string from multi-select array values
|
147
|
+
*/
|
148
|
+
function getSelectInputValue(val) {
|
149
|
+
if (type === 'multi-select' && val.constructor === Array) {
|
150
|
+
var selectedLabels = selectedOptions(val);
|
151
|
+
if (val.length < 6) {
|
152
|
+
selectedLabels = selectedLabels.map(function (item) {
|
153
|
+
return item.label;
|
154
|
+
});
|
155
|
+
}
|
156
|
+
else {
|
157
|
+
selectedLabels = [val.length + (isEmployeeSelection ? ' employees' : ' Selected Item(s)')];
|
158
|
+
}
|
159
|
+
return selectedLabels.join(', ');
|
160
|
+
}
|
161
|
+
else if (type === 'select' && (val.constructor === String || val.constructor === Number)) {
|
162
|
+
var optArray = selectedOptions(val);
|
163
|
+
return optArray.length > 0 ? optArray[0].label : val.toString();
|
164
|
+
}
|
165
|
+
else {
|
166
|
+
return '';
|
167
|
+
}
|
168
|
+
}
|
169
|
+
/**
|
170
|
+
* selectedOptions
|
171
|
+
* get the selected options from the values given
|
172
|
+
* @param {*} val - values selected
|
173
|
+
* return String - converted values into string
|
174
|
+
*/
|
175
|
+
function selectedOptions(val) {
|
176
|
+
var selectedOptionValue = [];
|
177
|
+
if (options && options.constructor === Array) {
|
178
|
+
selectedOptionValue = options.filter(function (item) {
|
179
|
+
return (val && val.constructor === Array && val.indexOf(item.value) > -1) || item.value === val;
|
180
|
+
});
|
181
|
+
}
|
182
|
+
else if (options && options.constructor === Object) {
|
183
|
+
var mergeOptions_2 = [];
|
184
|
+
Object.values(options).map(function (optval) {
|
185
|
+
mergeOptions_2 = __spreadArray(__spreadArray([], mergeOptions_2, true), optval.options, true);
|
186
|
+
return optval;
|
187
|
+
});
|
188
|
+
selectedOptionValue = mergeOptions_2.filter(function (item) {
|
189
|
+
return (val && val.constructor === Array && val.indexOf(item.value) > -1) || item.value === val;
|
190
|
+
});
|
191
|
+
}
|
192
|
+
return selectedOptionValue;
|
193
|
+
}
|
194
|
+
/**
|
195
|
+
* filterOptions (for multi-select only)
|
196
|
+
* filter the options to search specific values
|
197
|
+
* @param {*} search - type value from the input text field
|
198
|
+
* @param {*} values - selected values of multi-select
|
199
|
+
*/
|
200
|
+
function filterOptions(search, values) {
|
201
|
+
var selectedOptionsVariable = null;
|
202
|
+
if (type === 'multi-select') {
|
203
|
+
if (optionsArray && optionsArray.constructor === Array) {
|
204
|
+
selectedOptionsVariable = selectedOptions(values);
|
205
|
+
if (options && options.constructor === Array && options.length > 0) {
|
206
|
+
optionsArray = options.filter(function (item) {
|
207
|
+
return values.indexOf(item.value) < 0 && item.label.toLowerCase().search(search.toLowerCase()) > -1;
|
208
|
+
});
|
209
|
+
}
|
210
|
+
values = selectedOptionsVariable.filter(function (item) {
|
211
|
+
return item.label.toLowerCase().search(search.toLowerCase()) > -1;
|
212
|
+
});
|
213
|
+
setOptionsArray(__spreadArray(__spreadArray([], values, true), optionsArray, true));
|
214
|
+
}
|
215
|
+
else if (optionsArray && optionsArray.constructor === Object) {
|
216
|
+
var optionsArrayCopy_1 = {};
|
217
|
+
selectedOptionsVariable = selectedOptions(values);
|
218
|
+
if (selectedOptionsVariable.length > 0) {
|
219
|
+
selectedOptionsVariable = selectedOptionsVariable.filter(function (item) {
|
220
|
+
return item.label.toLowerCase().search(search.toLowerCase()) > -1;
|
221
|
+
});
|
222
|
+
if (selectedOptionsVariable.length > 0) {
|
223
|
+
optionsArrayCopy_1['selected-values'] = { label: 'Selected', options: selectedOptionsVariable };
|
224
|
+
}
|
225
|
+
}
|
226
|
+
if (options && options.constructor === Object && Object.keys(options).length > 0) {
|
227
|
+
Object.keys(options).map(function (optgroup) {
|
228
|
+
var filterOptionsArray = [];
|
229
|
+
if (options[optgroup].label.toLowerCase().search(search.toLowerCase()) > -1) {
|
230
|
+
filterOptionsArray = options[optgroup].options.filter(function (item) {
|
231
|
+
return values.indexOf(item.value) < 0;
|
232
|
+
});
|
233
|
+
}
|
234
|
+
else {
|
235
|
+
filterOptionsArray = options[optgroup].options.filter(function (item) {
|
236
|
+
return values.indexOf(item.value) < 0 && item.label.toLowerCase().search(search.toLowerCase()) > -1;
|
237
|
+
});
|
238
|
+
}
|
239
|
+
if (filterOptionsArray.length > 0) {
|
240
|
+
optionsArrayCopy_1[optgroup] = { label: options[optgroup].label, options: filterOptionsArray };
|
241
|
+
}
|
242
|
+
return optgroup;
|
243
|
+
});
|
244
|
+
}
|
245
|
+
setOptionsArray(optionsArrayCopy_1);
|
246
|
+
}
|
247
|
+
}
|
248
|
+
else {
|
249
|
+
if (optionsArray && optionsArray.constructor === Array) {
|
250
|
+
optionsArray = options.filter(function (item) {
|
251
|
+
return item.label.toLowerCase().search(search.toLowerCase()) > -1;
|
252
|
+
});
|
253
|
+
setOptionsArray(__spreadArray([], optionsArray, true));
|
254
|
+
}
|
255
|
+
else if (optionsArray && optionsArray.constructor === Object) {
|
256
|
+
var optionsArrayCopy_2 = {};
|
257
|
+
Object.keys(options).map(function (optgroup) {
|
258
|
+
var _a;
|
259
|
+
if (((_a = options[optgroup]) === null || _a === void 0 ? void 0 : _a.label.toLowerCase().search(search.toLowerCase())) > -1) {
|
260
|
+
optionsArrayCopy_2[optgroup] = __assign({}, options[optgroup]);
|
261
|
+
}
|
262
|
+
else {
|
263
|
+
var filterOptionsArray = options[optgroup].options.filter(function (item) {
|
264
|
+
return item.label.toLowerCase().search(search.toLowerCase()) > -1;
|
265
|
+
});
|
266
|
+
if (filterOptionsArray.length > 0) {
|
267
|
+
optionsArrayCopy_2[optgroup] = { label: options[optgroup].label, options: filterOptionsArray };
|
268
|
+
}
|
269
|
+
}
|
270
|
+
return optgroup;
|
271
|
+
});
|
272
|
+
setOptionsArray(optionsArrayCopy_2);
|
273
|
+
}
|
274
|
+
}
|
275
|
+
}
|
276
|
+
/**
|
277
|
+
* handleCheckedOptions
|
278
|
+
* determine if the item from the options were selected
|
279
|
+
* @param {*} opt - item from the options
|
280
|
+
* return Boolean - selected/not
|
281
|
+
*/
|
282
|
+
function handleCheckedOptions(opt) {
|
283
|
+
if (opt === 'select-all') {
|
284
|
+
var notSelectedOptions = null;
|
285
|
+
if (value && value.constructor === Array) {
|
286
|
+
if (optionsArray.constructor === Array) {
|
287
|
+
notSelectedOptions = optionsArray.filter(function (item) {
|
288
|
+
return value.indexOf(item.value) < 0;
|
289
|
+
});
|
290
|
+
}
|
291
|
+
else if (optionsArray.constructor === Object) {
|
292
|
+
var mergeOptions_3 = [];
|
293
|
+
Object.values(optionsArray).map(function (optval) {
|
294
|
+
mergeOptions_3 = __spreadArray(__spreadArray([], mergeOptions_3, true), optval.options, true);
|
295
|
+
return optval;
|
296
|
+
});
|
297
|
+
notSelectedOptions = mergeOptions_3.filter(function (item) {
|
298
|
+
return value.indexOf(item.value) < 0;
|
299
|
+
});
|
300
|
+
}
|
301
|
+
}
|
302
|
+
return notSelectedOptions && notSelectedOptions.length === 0 ? true : false;
|
303
|
+
}
|
304
|
+
else {
|
305
|
+
return value && value.constructor === Array && value.filter(function (val) { return (opt.value === val); }).length > 0 ? true : false;
|
306
|
+
}
|
307
|
+
}
|
308
|
+
function handleKeyPress(event) {
|
309
|
+
var updatedKey;
|
310
|
+
if (Boolean(dropdownPopover)) {
|
311
|
+
if (optionsArray && optionsArray.constructor === Array && optionsArray.length > 0) {
|
312
|
+
if (event.key === 'ArrowDown') {
|
313
|
+
if (keyOption === null) {
|
314
|
+
setKeyOption(0);
|
315
|
+
}
|
316
|
+
else {
|
317
|
+
updatedKey = (keyOption + 1) >= optionsArray.length ? (optionsArray.length - 1) : keyOption + 1;
|
318
|
+
setKeyOption(updatedKey);
|
319
|
+
}
|
320
|
+
}
|
321
|
+
else if (event.key === 'ArrowUp') {
|
322
|
+
if (keyOption === null) {
|
323
|
+
setKeyOption(0);
|
324
|
+
}
|
325
|
+
else {
|
326
|
+
updatedKey = keyOption > 0 ? (keyOption - 1) : 0;
|
327
|
+
setKeyOption(updatedKey);
|
328
|
+
}
|
329
|
+
}
|
330
|
+
else if (event.key === 'Enter') {
|
331
|
+
if (keyOption !== null && optionsArray[keyOption]) {
|
332
|
+
optionSelectionHandler(event, optionsArray[keyOption]);
|
333
|
+
}
|
334
|
+
}
|
335
|
+
}
|
336
|
+
else if (optionsArray && optionsArray.constructor === Object && Object.keys(optionsArray).length > 0) {
|
337
|
+
var optionsKeyArray = Object.keys(optionsArray);
|
338
|
+
if (event.key === 'ArrowDown') {
|
339
|
+
if (keyOption === null || objectKeyOption === null) {
|
340
|
+
setKeyOption(0);
|
341
|
+
setObjectKeyOption(0);
|
342
|
+
}
|
343
|
+
else {
|
344
|
+
if (optionsArray[optionsKeyArray[objectKeyOption]].options.length <= keyOption + 1) {
|
345
|
+
if (objectKeyOption + 1 < optionsKeyArray.length) {
|
346
|
+
setKeyOption(0);
|
347
|
+
setObjectKeyOption(objectKeyOption + 1);
|
348
|
+
}
|
349
|
+
}
|
350
|
+
else {
|
351
|
+
setKeyOption(keyOption + 1);
|
352
|
+
}
|
353
|
+
}
|
354
|
+
}
|
355
|
+
else if (event.key === 'ArrowUp') {
|
356
|
+
if (keyOption === null || objectKeyOption === null) {
|
357
|
+
setKeyOption(0);
|
358
|
+
setObjectKeyOption(0);
|
359
|
+
}
|
360
|
+
else {
|
361
|
+
if (keyOption > 0) {
|
362
|
+
setKeyOption(keyOption - 1);
|
363
|
+
}
|
364
|
+
else {
|
365
|
+
if (objectKeyOption > 0) {
|
366
|
+
var updatedKey_1 = optionsArray[optionsKeyArray[objectKeyOption - 1]].options.length - 1;
|
367
|
+
setKeyOption(updatedKey_1);
|
368
|
+
setObjectKeyOption(objectKeyOption - 1);
|
369
|
+
}
|
370
|
+
}
|
371
|
+
}
|
372
|
+
}
|
373
|
+
else if (event.key === 'Enter') {
|
374
|
+
if (keyOption !== null && objectKeyOption !== null && optionsArray[optionsKeyArray[objectKeyOption]].options[keyOption]) {
|
375
|
+
optionSelectionHandler(event, optionsArray[optionsKeyArray[objectKeyOption]].options[keyOption]);
|
376
|
+
}
|
377
|
+
}
|
378
|
+
}
|
379
|
+
}
|
380
|
+
else {
|
381
|
+
if (event.key === 'Enter' || event.key === 'ArrowDown') {
|
382
|
+
popoverRequestHandler(event, 'on-focus');
|
383
|
+
}
|
384
|
+
}
|
385
|
+
}
|
386
|
+
/**
|
387
|
+
* clearValuesHandler
|
388
|
+
* reset value into null and return it to parent
|
389
|
+
* @param {*} event - event
|
390
|
+
*/
|
391
|
+
var clearValuesHandler = function (event) {
|
392
|
+
event && event.preventDefault();
|
393
|
+
return onChanged && onChanged(event);
|
394
|
+
};
|
395
|
+
return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: 'em-select ' + customClass }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: dropdownClass, id: id && id.constructor === String ? id : 'select-default-id', "data-testid": id && id.constructor === String ? id : 'select-default-id' }, { children: [type === 'select' ? ((0, jsx_runtime_1.jsx)("input", { className: "em-select-input", "data-testid": id && id.constructor === String ? "select-input-".concat(id) : 'select-input-default-id', id: id && id.constructor === String ? "".concat(id, "-select-input-default-id") : "select-input-default-id", type: "text", onFocus: function (event) { return popoverRequestHandler(event, 'on-focus'); }, onClick: function (event) { return popoverRequestHandler(event, 'on-focus'); }, onChange: function (event) { return inputChangedHandler(event); }, value: value ? selectedValue : selectTemporaryValue, placeholder: selectedValue, autoComplete: 'off', disabled: disabled ? disabled : false, onKeyDown: function (event) { return handleKeyPress(event); } })) : ((0, jsx_runtime_1.jsx)("input", { className: "em-select-input", "data-testid": id && id.constructor === String ? "".concat(id, "-multi-select-input") : "multi-select-input-default-id", id: id && id.constructor === String ? "".concat(id, "-multi-select-input-default-id") : "multi-select-input-default-id", type: "text", onClick: function (event) { return popoverRequestHandler(event, 'on-focus'); }, placeholder: selectedValue, autoComplete: 'off', value: value && value.length > 0 ? multiSelectValue : "", disabled: disabled ? disabled : false, readOnly: true })), type === 'select' ? (disabled ? ((0, jsx_runtime_1.jsx)("div", __assign({ "data-testid": 'dropdown-icon', className: "em-field-icon" }, { children: Asset_1.SVG_ARROWDOWN }))) : (value && value !== "" && !hideClearIcon ? ((0, jsx_runtime_1.jsx)("div", __assign({ "data-testid": 'clear-icon', onClick: function (event) { return clearValuesHandler(event); }, className: 'em-field-icon' }, { children: Asset_1.SVG_CLOSE_GRAY }))) : ((0, jsx_runtime_1.jsx)("div", __assign({ "data-testid": 'dropdown-icon', className: "em-field-icon", onClick: function (event) { return popoverRequestHandler(event, 'on-focus'); } }, { children: Asset_1.SVG_ARROWDOWN }))))) : null] })), (0, jsx_runtime_1.jsx)(exports.Popover, __assign({ id: "select-popover", className: Boolean(dropdownPopover) ? 'open-popover' : '', open: Boolean(dropdownPopover), onClick: function (event) { return popoverRequestHandler(event, 'on-blur'); } }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-select-popover" }, { children: [type === 'multi-select' ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "em-select-search e-input" }, { children: (0, jsx_runtime_1.jsx)("input", { id: "multi-select-input-search", type: "text", onFocus: function (event) { return popoverRequestHandler(event, 'on-focus'); }, onChange: function (event) { return inputChangedHandler(event); }, placeholder: "Search", value: selectTemporaryValue, disabled: disabled ? disabled : false, autoComplete: "off" }) }))) : null, optionsArray && optionsArray.constructor === Array && optionsArray.length > 0 ? (
|
396
|
+
// Default array display of options
|
397
|
+
(0, jsx_runtime_1.jsx)(react_1.Fragment, { children: type === 'select' ? (optionsArray.map(function (opt, idx) { return ((0, jsx_runtime_1.jsx)("option", __assign({ className: keyOption === idx ? 'is-highlighted' : '', onClick: function (event) { return optionSelectionHandler(event, opt); } }, { children: opt.label }), idx)); })) : type === 'multi-select' ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-select-multiple" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "em-select-all" }, { children: optionsArray.length > 1 ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-select-check", onClick: function (event) { return optionSelectionHandler(event, 'select-all'); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: handleCheckedOptions('select-all'), id: 'select-all', readOnly: true, autoComplete: "off" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: "" }), (0, jsx_runtime_1.jsx)("span", { children: "Select All" })] }), 'select-all')) : null })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-select-checklist" }, { children: optionsArray.map(function (opt, idx) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ id: 'option-div', className: "em-select-check", onClick: function (event) { return optionSelectionHandler(event, opt); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: handleCheckedOptions(opt), id: opt.value, readOnly: true, autoComplete: "off" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: "" }), (0, jsx_runtime_1.jsx)("span", { children: opt.label })] }), idx)); }) }))] })) })) : (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: "No options" }) })) : optionsArray && optionsArray.constructor === Object && Object.keys(optionsArray).length > 0 ? (
|
398
|
+
// Display of options when grouped (*its only applicable on select type)
|
399
|
+
(0, jsx_runtime_1.jsx)(react_1.Fragment, { children: type === 'select' ? (Object.keys(optionsArray).map(function (id, grpIdx) { return ((0, jsx_runtime_1.jsx)("optgroup", __assign({ label: optionsArray[id].label ? optionsArray[id].label : 'Invalid Group Label' }, { children: optionsArray[id].options && optionsArray[id].options.constructor === Array && optionsArray[id].options.length > 0 ? (optionsArray[id].options.map(function (opt, idx) { return ((0, jsx_runtime_1.jsx)("option", __assign({ className: (grpIdx === objectKeyOption && keyOption === idx) ? 'is-highlighted' : '', onClick: function (event) { return optionSelectionHandler(event, opt); } }, { children: opt.label }), idx)); })) : null }), id)); })) : type === 'multi-select' ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-select-multiple" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "em-select-all" }, { children: Object.keys(optionsArray).length > 1 || (Object.keys(optionsArray).length === 1 && optionsArray[Object.keys(optionsArray)[0]].options && optionsArray[Object.keys(optionsArray)[0]].options.constructor === Array && optionsArray[Object.keys(optionsArray)[0]].options.length > 1) ? ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-select-check", onClick: function (event) { return optionSelectionHandler(event, 'select-all'); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: handleCheckedOptions('select-all'), id: 'select-all', readOnly: true, autoComplete: "off" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: "" }), (0, jsx_runtime_1.jsx)("span", { children: "Select All" })] }), 'select-all')) : null })), Object.keys(optionsArray).map(function (id) { return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "em-select-checklist" }, { children: [id !== 'selected-values' ? ((0, jsx_runtime_1.jsx)("optgroup", { label: optionsArray[id].label ? optionsArray[id].label : 'Invalid Group Label' })) : null, optionsArray[id].options && optionsArray[id].options.constructor === Array && optionsArray[id].options.length > 0 ? (optionsArray[id].options.map(function (opt, idx) { return ((0, jsx_runtime_1.jsxs)("div", __assign({ id: 'option-div', className: "em-select-check", onClick: function (event) { return optionSelectionHandler(event, opt); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox",
|
400
|
+
// checked={handleCheckedOptions(opt)}
|
401
|
+
checked: value, id: opt.value, readOnly: true, autoComplete: "off" }), (0, jsx_runtime_1.jsx)("label", { htmlFor: "" }), (0, jsx_runtime_1.jsx)("span", { children: opt.label })] }), idx)); })) : (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: "No options" })] })) }, id)); })] })) })) : (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: "No options" }) })) : (0, jsx_runtime_1.jsx)("div", __assign({ className: "em-noresult" }, { children: "No options" }))] })) }))] })));
|
402
|
+
};
|
403
|
+
exports.default = Dropdown;
|