empower-container 0.1.13 → 0.1.14
Sign up to get free protection for your applications and to get access to all the features.
- package/{src/main → dist}/assets/Asset.d.ts +0 -0
- package/{src/main → dist}/assets/Asset.js +0 -0
- package/{src/main → dist}/assets/Asset.tsx +0 -0
- package/{src/main → dist}/assets/icons/icon-check-white-sm.svg +0 -0
- package/{src/main → dist}/assets/images/icon-arrowdown-graydark.svg +0 -0
- package/{src/main → dist}/assets/images/icon-arrowleft-graydark.svg +0 -0
- package/{src/main → dist}/assets/images/icon-arrowright-graydark.svg +0 -0
- package/{src/main → dist}/assets/images/icon-arrowup-graydark.svg +0 -0
- package/{src/main → dist}/assets/images/icon-check-graydark.svg +0 -0
- package/{src/main → dist/cjs}/DatetimeFormatter.d.ts +0 -0
- package/{src/main → dist/cjs}/DatetimeFormatter.js +0 -0
- package/{src/main → dist/cjs}/Information.d.ts +0 -0
- package/dist/cjs/Information.js +63 -0
- package/{src/main → dist/cjs}/MenuBar.d.ts +0 -0
- package/dist/cjs/MenuBar.js +537 -0
- package/{src/main → dist/cjs}/Modal.d.ts +0 -0
- package/dist/cjs/Modal.js +32 -0
- package/dist/cjs/assets/Asset.d.ts +16 -0
- package/dist/cjs/assets/Asset.js +30 -0
- package/{src/main → dist/cjs}/constants/Constant.d.ts +0 -0
- package/dist/cjs/constants/Constant.js +35 -0
- package/{src/main → dist/cjs}/index.d.ts +0 -0
- package/{src/main → dist/cjs}/index.js +0 -0
- package/{src/main → dist/cjs}/inputs/Input.d.ts +0 -0
- package/{src/main → dist/cjs}/inputs/Input.js +7 -36
- package/{src/main → dist/cjs}/inputs/InputSelectionHandler.d.ts +0 -0
- package/{src/main → dist/cjs}/inputs/InputSelectionHandler.js +3 -3
- package/{src/main → dist/cjs}/inputs/Select.d.ts +0 -0
- package/{src/main → dist/cjs}/inputs/Select.js +11 -64
- package/dist/esm/DatetimeFormatter.d.ts +3 -0
- package/{src/main/DatetimeFormatter.tsx → dist/esm/DatetimeFormatter.js} +132 -139
- package/dist/esm/Information.d.ts +10 -0
- package/dist/esm/Information.js +38 -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 +16 -0
- package/dist/esm/assets/Asset.js +27 -0
- package/dist/esm/constants/Constant.d.ts +15 -0
- package/{src/main → dist/esm}/constants/Constant.js +9 -21
- package/{src/main/index.tsx → dist/esm/index.d.ts} +1 -3
- 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/{src → dist}/scss/components/_modal.scss +0 -0
- package/{src → dist}/scss/elements/_button.scss +0 -0
- package/{src → dist}/scss/elements/_index.scss +0 -0
- package/{src → dist}/scss/elements/_popover.scss +0 -0
- package/{src → dist}/scss/foundation/_colors.scss +0 -0
- package/{src → dist}/scss/foundation/_mixins.scss +0 -0
- package/{src → dist}/scss/foundation/_normalize.scss +0 -0
- package/{src → dist}/scss/foundation/_settings.scss +0 -0
- package/{src → dist}/scss/foundation/_typography.scss +0 -0
- package/{src → dist}/scss/library/_information.scss +0 -0
- package/{src → dist}/scss/library/_input.scss +0 -0
- package/{src → dist}/scss/library/_menubar.scss +0 -0
- package/{src → dist}/scss/library/_select.scss +0 -0
- package/{src → dist}/scss/style.scss +0 -0
- package/package.json +1 -1
- package/public/favicon.ico +0 -0
- package/public/index.html +0 -43
- package/public/logo192.png +0 -0
- package/public/logo512.png +0 -0
- package/public/manifest.json +0 -25
- package/public/robots.txt +0 -3
- package/src/index.tsx +0 -15
- package/src/main/Information.js +0 -65
- package/src/main/Information.tsx +0 -112
- package/src/main/MenuBar.js +0 -651
- package/src/main/MenuBar.tsx +0 -1074
- package/src/main/Modal.js +0 -24
- package/src/main/Modal.tsx +0 -83
- package/src/main/inputs/Input.tsx +0 -193
- package/src/main/inputs/InputSelectionHandler.tsx +0 -21
- package/src/main/inputs/Select.tsx +0 -654
- package/src/main/tsconfig.common.json +0 -34
- package/src/main/tsconfig.json +0 -35
- package/src/sample/App.css +0 -38
- package/src/sample/App.d.ts +0 -3
- package/src/sample/App.js +0 -13
- package/src/sample/App.test.d.ts +0 -1
- package/src/sample/App.test.js +0 -13
- package/src/sample/App.test.tsx +0 -9
- package/src/sample/App.tsx +0 -15
- package/src/sample/TestMenuBar.d.ts +0 -3
- package/src/sample/TestMenuBar.js +0 -529
- package/src/sample/TestMenuBar.tsx +0 -380
- package/src/sample/react-app-env.d.ts +0 -1
- package/src/sample/reportWebVitals.d.ts +0 -3
- package/src/sample/reportWebVitals.js +0 -38
- package/src/sample/reportWebVitals.ts +0 -15
- package/src/sample/setupTests.d.ts +0 -1
- package/src/sample/setupTests.js +0 -7
- package/src/sample/setupTests.ts +0 -5
- package/src/sample/tsconfig.json +0 -36
@@ -1,654 +0,0 @@
|
|
1
|
-
import React, { useState, Fragment } from "react";
|
2
|
-
import '../../scss/style.scss';
|
3
|
-
|
4
|
-
// Imports
|
5
|
-
import { SVG_BACK, SVG_CLOSE_GRAY, SVG_ARROWLEFT, SVG_ARROWRIGHT, SVG_CHECK, SVG_ARROWDOWN } from '../assets/Asset';
|
6
|
-
|
7
|
-
interface IPropsPopover{
|
8
|
-
id:String,
|
9
|
-
className:String
|
10
|
-
open: Boolean,
|
11
|
-
origin?:String,
|
12
|
-
onClick:(event:React.MouseEvent<HTMLDivElement, MouseEvent>) => void,
|
13
|
-
}
|
14
|
-
|
15
|
-
|
16
|
-
export const Popover: React.FC<IPropsPopover> = ({ open, origin, children, onClick }) => {
|
17
|
-
|
18
|
-
return (
|
19
|
-
<Fragment>
|
20
|
-
{
|
21
|
-
open &&
|
22
|
-
<Fragment>
|
23
|
-
<div className="em-overlay" onClick={e=>onClick(e)}>
|
24
|
-
</div>
|
25
|
-
<div className="em-popover" style={origin !== undefined && origin === "right" ? { right: 200 + 'px' } : { left: 0 + 'px' }}>
|
26
|
-
{children}
|
27
|
-
</div>
|
28
|
-
</Fragment>
|
29
|
-
}
|
30
|
-
</Fragment>
|
31
|
-
)
|
32
|
-
}
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
interface IPropsDropDown {
|
37
|
-
config: {
|
38
|
-
id: string | keyof Object,
|
39
|
-
type: string,
|
40
|
-
value?: string | Array<string> | any,
|
41
|
-
placeholder?: string,
|
42
|
-
label?: string,
|
43
|
-
readOnly?: boolean,
|
44
|
-
disabled?: boolean,
|
45
|
-
options?: Array<string | object> | object | any
|
46
|
-
|
47
|
-
|
48
|
-
},
|
49
|
-
customClass?: string,
|
50
|
-
hideClearIcon: boolean,
|
51
|
-
isEmployeeSelection: boolean,
|
52
|
-
|
53
|
-
onChanged?: (event: React.ChangeEvent<HTMLInputElement>
|
54
|
-
| React.MouseEvent<HTMLDivElement, MouseEvent>
|
55
|
-
| React.MouseEvent<HTMLInputElement, MouseEvent>
|
56
|
-
| React.KeyboardEvent<HTMLInputElement>
|
57
|
-
| undefined
|
58
|
-
| any, val?: string | any) => void,
|
59
|
-
|
60
|
-
}
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
const Dropdown: React.FC<IPropsDropDown> = ({ config, customClass, onChanged, isEmployeeSelection, hideClearIcon }) => {
|
65
|
-
let { disabled, options, type, value, placeholder, id } = { ...config };
|
66
|
-
// React Hook
|
67
|
-
let [dropdownPopover, setDropdownPopover] = useState<Boolean>(false);
|
68
|
-
let [optionsArray, setOptionsArray] = useState<any>(options ? options : []);
|
69
|
-
let [selectTemporaryValue, setSelectTemporaryValue] = useState<string>("");
|
70
|
-
let [keyOption, setKeyOption] = useState<any>(null);
|
71
|
-
let [objectKeyOption, setObjectKeyOption] = useState<any>(null);
|
72
|
-
|
73
|
-
|
74
|
-
// Dropdown Config Variable
|
75
|
-
let dropdownClass = disabled && disabled.constructor === Boolean ? 'em-input-field input-disabled' : 'em-input-field';
|
76
|
-
|
77
|
-
let multiSelectValue = type === 'multi-select' ? (
|
78
|
-
value && value.constructor === Array && value.length > 0 ? (
|
79
|
-
getSelectInputValue(value)
|
80
|
-
) : ''
|
81
|
-
) : '';
|
82
|
-
|
83
|
-
const selectedValue = value && (value.constructor === String || value.constructor === Number) && value !== "" ? (
|
84
|
-
getSelectInputValue(value)
|
85
|
-
) : value && value.constructor === Array && value.length > 0 ? (
|
86
|
-
getSelectInputValue(value)
|
87
|
-
) : placeholder && placeholder.constructor === String ? placeholder : '-';
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
/**
|
92
|
-
* popoverRequestHandler
|
93
|
-
* hide and show the options popover
|
94
|
-
* @param {*} e - event
|
95
|
-
* @param {*} action - it can be either on-focus or on-blur
|
96
|
-
*/
|
97
|
-
function popoverRequestHandler(e: React.KeyboardEvent<HTMLInputElement>
|
98
|
-
| React.MouseEvent<HTMLOptionElement, MouseEvent>
|
99
|
-
| React.FocusEvent<HTMLInputElement, Element>
|
100
|
-
| React.MouseEvent<HTMLInputElement, MouseEvent>
|
101
|
-
| React.MouseEvent<HTMLOptionElement, MouseEvent>
|
102
|
-
| React.MouseEvent<HTMLDivElement, MouseEvent>
|
103
|
-
| React.FocusEvent<HTMLInputElement, HTMLDivElement>
|
104
|
-
| any, action: string) {
|
105
|
-
if (action === 'on-focus') {
|
106
|
-
type === 'select' ? setOptionsArray(options) : filterOptions(selectTemporaryValue, value);
|
107
|
-
setDropdownPopover(e.currentTarget)
|
108
|
-
setKeyOption(null);
|
109
|
-
setObjectKeyOption(null);
|
110
|
-
} else {
|
111
|
-
setDropdownPopover(false);
|
112
|
-
setSelectTemporaryValue("");
|
113
|
-
}
|
114
|
-
}
|
115
|
-
|
116
|
-
/**
|
117
|
-
* optionSelectionHandler
|
118
|
-
* manipulate the selected options
|
119
|
-
* @param {*} e - event
|
120
|
-
* @param {*} opt - selected option from the list
|
121
|
-
* return Object/Array - the selected manipulated values from the list
|
122
|
-
*/
|
123
|
-
function optionSelectionHandler(e: React.MouseEvent<HTMLInputElement, MouseEvent>
|
124
|
-
| React.KeyboardEvent<HTMLInputElement>
|
125
|
-
| React.MouseEvent<HTMLDivElement, MouseEvent>
|
126
|
-
| React.MouseEvent<HTMLOptionElement, MouseEvent>
|
127
|
-
| any, opt: any) {
|
128
|
-
|
129
|
-
|
130
|
-
if (type && type === 'select') {
|
131
|
-
popoverRequestHandler(e, 'on-blur');
|
132
|
-
return onChanged ? onChanged(e, opt.value) : false;
|
133
|
-
} else if (type && type === 'multi-select') {
|
134
|
-
let valueCopy= value ? selectedOptions([...value]) : []
|
135
|
-
|
136
|
-
|
137
|
-
if (opt === 'select-all') {
|
138
|
-
let notSelectedOptions = [];
|
139
|
-
if (optionsArray.constructor === Array) {
|
140
|
-
notSelectedOptions = optionsArray.filter((item:any) => {
|
141
|
-
return valueCopy.indexOf(item) < 0;
|
142
|
-
});
|
143
|
-
if (notSelectedOptions.length > 0) {
|
144
|
-
valueCopy = [...valueCopy, ...notSelectedOptions];
|
145
|
-
} else {
|
146
|
-
valueCopy = optionsArray.filter((item:any) => {
|
147
|
-
return valueCopy.indexOf(item) < -1;
|
148
|
-
});
|
149
|
-
}
|
150
|
-
} else if (optionsArray.constructor === Object) {
|
151
|
-
let mergeOptions:Array<string> = [];
|
152
|
-
Object.values(optionsArray).map((optval:any) => {
|
153
|
-
mergeOptions = [...mergeOptions, ...optval.options];
|
154
|
-
return optval;
|
155
|
-
});
|
156
|
-
notSelectedOptions = mergeOptions.filter((item:any) => {
|
157
|
-
return valueCopy.indexOf(item) < 0;
|
158
|
-
});
|
159
|
-
if (notSelectedOptions.length > 0) {
|
160
|
-
valueCopy = [...valueCopy, ...notSelectedOptions];
|
161
|
-
} else {
|
162
|
-
valueCopy = mergeOptions.filter((item:any) => {
|
163
|
-
return valueCopy.indexOf(item) < -1;
|
164
|
-
});
|
165
|
-
}
|
166
|
-
}
|
167
|
-
} else {
|
168
|
-
let optIdx = valueCopy.indexOf(opt);
|
169
|
-
if (optIdx >= 0) {
|
170
|
-
valueCopy.splice(optIdx, 1);
|
171
|
-
} else {
|
172
|
-
valueCopy = [...valueCopy, opt];
|
173
|
-
}
|
174
|
-
}
|
175
|
-
valueCopy = valueCopy.map((item:any):any => {
|
176
|
-
return item.value;
|
177
|
-
});
|
178
|
-
filterOptions(selectTemporaryValue, valueCopy);
|
179
|
-
e.selected = valueCopy;
|
180
|
-
return onChanged ? onChanged(e) : false;
|
181
|
-
}
|
182
|
-
}
|
183
|
-
|
184
|
-
/**
|
185
|
-
* inputChangedHandler
|
186
|
-
* get the current value from the input text field
|
187
|
-
* @param {*} e - event which will be used to get the changed value
|
188
|
-
*/
|
189
|
-
function inputChangedHandler(e: React.ChangeEvent<HTMLInputElement>) {
|
190
|
-
setKeyOption(null);
|
191
|
-
setObjectKeyOption(null);
|
192
|
-
setSelectTemporaryValue(e.target.value);
|
193
|
-
filterOptions(e.target.value, value);
|
194
|
-
}
|
195
|
-
|
196
|
-
/**
|
197
|
-
* getSelectInputValue
|
198
|
-
* manipulate the selected multiple values into string
|
199
|
-
* @param {*} val - multi-select selected value
|
200
|
-
* return String - the converted string from multi-select array values
|
201
|
-
*/
|
202
|
-
function getSelectInputValue (val: Array<string> | string[] | any){
|
203
|
-
if (type === 'multi-select' && val.constructor === Array) {
|
204
|
-
let selectedLabels = selectedOptions(val);
|
205
|
-
if (val.length < 6) {
|
206
|
-
selectedLabels = selectedLabels.map((item:any) => {
|
207
|
-
return item.label
|
208
|
-
});
|
209
|
-
} else {
|
210
|
-
selectedLabels = [val.length + (isEmployeeSelection ? ' employees' : ' Selected Item(s)')];
|
211
|
-
}
|
212
|
-
|
213
|
-
return selectedLabels.join(', ');
|
214
|
-
} else if (type === 'select' && (val.constructor === String || val.constructor === Number)) {
|
215
|
-
let optArray= selectedOptions(val);
|
216
|
-
return optArray.length > 0 ? (optArray[0] as any).label : val.toString();
|
217
|
-
} else {
|
218
|
-
return '';
|
219
|
-
}
|
220
|
-
}
|
221
|
-
|
222
|
-
|
223
|
-
/**
|
224
|
-
* selectedOptions
|
225
|
-
* get the selected options from the values given
|
226
|
-
* @param {*} val - values selected
|
227
|
-
* return String - converted values into string
|
228
|
-
*/
|
229
|
-
function selectedOptions (val: string[] | number| any) {
|
230
|
-
var selectedOptionValue:Array<string | object> = [];
|
231
|
-
if (options && options.constructor === Array) {
|
232
|
-
selectedOptionValue = options.filter((item:any) => {
|
233
|
-
return (val && val.constructor === Array && val.indexOf(item.value) > -1) || item.value === val;
|
234
|
-
});
|
235
|
-
} else if (options && options.constructor === Object) {
|
236
|
-
let mergeOptions:Array<object> = [];
|
237
|
-
Object.values(options).map((optval:any) => {
|
238
|
-
mergeOptions = [...mergeOptions, ...optval.options];
|
239
|
-
return optval;
|
240
|
-
});
|
241
|
-
selectedOptionValue = mergeOptions.filter((item:any) => {
|
242
|
-
return (val && val.constructor === Array && val.indexOf(item.value) > -1) || item.value === val;
|
243
|
-
});
|
244
|
-
}
|
245
|
-
return selectedOptionValue;
|
246
|
-
}
|
247
|
-
|
248
|
-
/**
|
249
|
-
* filterOptions (for multi-select only)
|
250
|
-
* filter the options to search specific values
|
251
|
-
* @param {*} search - type value from the input text field
|
252
|
-
* @param {*} values - selected values of multi-select
|
253
|
-
*/
|
254
|
-
function filterOptions(search: string, values: any) {
|
255
|
-
let selectedOptionsVariable = null;
|
256
|
-
if (type === 'multi-select') {
|
257
|
-
if (optionsArray && optionsArray.constructor === Array) {
|
258
|
-
selectedOptionsVariable = selectedOptions(values);
|
259
|
-
if (options && options.constructor===Array && options.length > 0) {
|
260
|
-
optionsArray = options.filter((item:any) => {
|
261
|
-
return values.indexOf(item.value) < 0 && item.label.toLowerCase().search(search.toLowerCase()) > -1;
|
262
|
-
});
|
263
|
-
}
|
264
|
-
|
265
|
-
values = selectedOptionsVariable.filter((item:any) => {
|
266
|
-
return item.label.toLowerCase().search(search.toLowerCase()) > -1;
|
267
|
-
})
|
268
|
-
setOptionsArray([...values, ...optionsArray]);
|
269
|
-
} else if (optionsArray && optionsArray.constructor === Object) {
|
270
|
-
let optionsArrayCopy:{[index: string]:any} = {};
|
271
|
-
selectedOptionsVariable = selectedOptions(values);
|
272
|
-
if (selectedOptionsVariable.length > 0) {
|
273
|
-
selectedOptionsVariable = selectedOptionsVariable.filter((item:any) => {
|
274
|
-
return item.label.toLowerCase().search(search.toLowerCase()) > -1;
|
275
|
-
})
|
276
|
-
if (selectedOptionsVariable.length > 0) {
|
277
|
-
optionsArrayCopy['selected-values'] = { label: 'Selected', options: selectedOptionsVariable }
|
278
|
-
}
|
279
|
-
}
|
280
|
-
if (options && options.constructor === Object && Object.keys(options).length > 0) {
|
281
|
-
Object.keys(options).map((optgroup: any) => {
|
282
|
-
let filterOptionsArray:Array<string> = [];
|
283
|
-
|
284
|
-
|
285
|
-
if (options[optgroup].label.toLowerCase().search(search.toLowerCase()) > -1) {
|
286
|
-
filterOptionsArray = options[optgroup].options.filter((item:any) => {
|
287
|
-
return values.indexOf(item.value) < 0;
|
288
|
-
});
|
289
|
-
} else {
|
290
|
-
filterOptionsArray = options[optgroup].options.filter((item:any) => {
|
291
|
-
return values.indexOf(item.value) < 0 && item.label.toLowerCase().search(search.toLowerCase()) > -1;
|
292
|
-
});
|
293
|
-
}
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
if (filterOptionsArray.length > 0) {
|
300
|
-
optionsArrayCopy[optgroup] = { label: options[optgroup].label, options: filterOptionsArray };
|
301
|
-
}
|
302
|
-
return optgroup;
|
303
|
-
});
|
304
|
-
}
|
305
|
-
|
306
|
-
setOptionsArray(optionsArrayCopy);
|
307
|
-
}
|
308
|
-
} else {
|
309
|
-
if (optionsArray && optionsArray.constructor === Array) {
|
310
|
-
optionsArray = options.filter((item:any) => {
|
311
|
-
return item.label.toLowerCase().search(search.toLowerCase()) > -1;
|
312
|
-
});
|
313
|
-
setOptionsArray([...optionsArray]);
|
314
|
-
} else if (optionsArray && optionsArray.constructor === Object) {
|
315
|
-
let optionsArrayCopy:{[index: string]:any} = {};
|
316
|
-
Object.keys(options).map((optgroup:any) => {
|
317
|
-
if (options[optgroup]?.label.toLowerCase().search(search.toLowerCase()) > -1) {
|
318
|
-
optionsArrayCopy[optgroup] = { ...options[optgroup] };
|
319
|
-
} else {
|
320
|
-
let filterOptionsArray = options[optgroup].options.filter((item:any) => {
|
321
|
-
return item.label.toLowerCase().search(search.toLowerCase()) > -1;
|
322
|
-
});
|
323
|
-
if (filterOptionsArray.length > 0) {
|
324
|
-
optionsArrayCopy[optgroup] = { label: options[optgroup].label, options: filterOptionsArray };
|
325
|
-
}
|
326
|
-
}
|
327
|
-
return optgroup;
|
328
|
-
});
|
329
|
-
setOptionsArray(optionsArrayCopy);
|
330
|
-
}
|
331
|
-
}
|
332
|
-
}
|
333
|
-
|
334
|
-
/**
|
335
|
-
* handleCheckedOptions
|
336
|
-
* determine if the item from the options were selected
|
337
|
-
* @param {*} opt - item from the options
|
338
|
-
* return Boolean - selected/not
|
339
|
-
*/
|
340
|
-
function handleCheckedOptions(opt: any): boolean {
|
341
|
-
if (opt === 'select-all') {
|
342
|
-
var notSelectedOptions = null;
|
343
|
-
if (value && value.constructor === Array) {
|
344
|
-
if (optionsArray.constructor === Array) {
|
345
|
-
notSelectedOptions = optionsArray.filter((item:any) => {
|
346
|
-
return value.indexOf(item.value) < 0;
|
347
|
-
});
|
348
|
-
} else if (optionsArray.constructor === Object) {
|
349
|
-
let mergeOptions:Array<string> = [];
|
350
|
-
Object.values(optionsArray).map((optval:any) => {
|
351
|
-
mergeOptions = [...mergeOptions, ...optval.options];
|
352
|
-
return optval;
|
353
|
-
});
|
354
|
-
notSelectedOptions = mergeOptions.filter((item:any) => {
|
355
|
-
return value.indexOf(item.value) < 0;
|
356
|
-
});
|
357
|
-
}
|
358
|
-
}
|
359
|
-
return notSelectedOptions && notSelectedOptions.length === 0 ? true : false;
|
360
|
-
} else {
|
361
|
-
return value && value.constructor === Array && value.filter((val:any) => (opt.value === val)).length > 0 ? true : false;
|
362
|
-
}
|
363
|
-
}
|
364
|
-
|
365
|
-
|
366
|
-
function handleKeyPress(event: React.KeyboardEvent<HTMLInputElement>) {
|
367
|
-
let updatedKey:any;
|
368
|
-
if (Boolean(dropdownPopover)) {
|
369
|
-
if (optionsArray && optionsArray.constructor === Array && optionsArray.length > 0) {
|
370
|
-
if (event.key === 'ArrowDown') {
|
371
|
-
if (keyOption === null) {
|
372
|
-
setKeyOption(0);
|
373
|
-
} else {
|
374
|
-
updatedKey = (keyOption + 1) >= optionsArray.length ? (optionsArray.length - 1) : keyOption + 1;
|
375
|
-
setKeyOption(updatedKey);
|
376
|
-
}
|
377
|
-
} else if (event.key === 'ArrowUp') {
|
378
|
-
if (keyOption === null) {
|
379
|
-
setKeyOption(0);
|
380
|
-
} else {
|
381
|
-
updatedKey = keyOption > 0 ? (keyOption - 1) : 0;
|
382
|
-
setKeyOption(updatedKey);
|
383
|
-
}
|
384
|
-
} else if (event.key === 'Enter') {
|
385
|
-
if (keyOption !== null && optionsArray[keyOption]) {
|
386
|
-
optionSelectionHandler(event, optionsArray[keyOption]);
|
387
|
-
}
|
388
|
-
}
|
389
|
-
} else if (optionsArray && optionsArray.constructor === Object && Object.keys(optionsArray).length > 0) {
|
390
|
-
let optionsKeyArray = Object.keys(optionsArray);
|
391
|
-
if (event.key === 'ArrowDown') {
|
392
|
-
if (keyOption === null || objectKeyOption === null) {
|
393
|
-
setKeyOption(0);
|
394
|
-
setObjectKeyOption(0);
|
395
|
-
} else {
|
396
|
-
if (optionsArray[optionsKeyArray[objectKeyOption]].options.length <= keyOption + 1) {
|
397
|
-
if (objectKeyOption + 1 < optionsKeyArray.length) {
|
398
|
-
setKeyOption(0);
|
399
|
-
setObjectKeyOption(objectKeyOption + 1);
|
400
|
-
}
|
401
|
-
} else {
|
402
|
-
setKeyOption(keyOption + 1)
|
403
|
-
}
|
404
|
-
}
|
405
|
-
} else if (event.key === 'ArrowUp') {
|
406
|
-
if (keyOption === null || objectKeyOption === null) {
|
407
|
-
setKeyOption(0);
|
408
|
-
setObjectKeyOption(0);
|
409
|
-
} else {
|
410
|
-
if (keyOption > 0) {
|
411
|
-
setKeyOption(keyOption - 1);
|
412
|
-
} else {
|
413
|
-
if (objectKeyOption > 0) {
|
414
|
-
let updatedKey = optionsArray[optionsKeyArray[objectKeyOption - 1]].options.length - 1;
|
415
|
-
setKeyOption(updatedKey);
|
416
|
-
setObjectKeyOption(objectKeyOption - 1);
|
417
|
-
}
|
418
|
-
}
|
419
|
-
}
|
420
|
-
} else if (event.key === 'Enter') {
|
421
|
-
if (keyOption !== null && objectKeyOption !== null && optionsArray[optionsKeyArray[objectKeyOption]].options[keyOption]) {
|
422
|
-
optionSelectionHandler(event, optionsArray[optionsKeyArray[objectKeyOption]].options[keyOption]);
|
423
|
-
}
|
424
|
-
}
|
425
|
-
}
|
426
|
-
} else {
|
427
|
-
if (event.key === 'Enter' || event.key === 'ArrowDown') {
|
428
|
-
popoverRequestHandler(event, 'on-focus')
|
429
|
-
}
|
430
|
-
}
|
431
|
-
}
|
432
|
-
|
433
|
-
/**
|
434
|
-
* clearValuesHandler
|
435
|
-
* reset value into null and return it to parent
|
436
|
-
* @param {*} event - event
|
437
|
-
*/
|
438
|
-
const clearValuesHandler = (event: React.MouseEvent<HTMLDivElement, MouseEvent>| any):any=> {
|
439
|
-
event && event.preventDefault();
|
440
|
-
return onChanged && onChanged(event);
|
441
|
-
}
|
442
|
-
|
443
|
-
return (
|
444
|
-
<div className={'em-select ' + customClass}>
|
445
|
-
<div className={dropdownClass} id={id && id.constructor === String ? id : 'select-default-id'} data-testid={id && id.constructor === String ? id : 'select-default-id'}>
|
446
|
-
{
|
447
|
-
type === 'select' ? (
|
448
|
-
<input
|
449
|
-
className="em-select-input"
|
450
|
-
data-testid={id && id.constructor === String ? `select-input-${id}` : 'select-input-default-id'}
|
451
|
-
id={id && id.constructor === String ? `${id}-select-input-default-id` : "select-input-default-id"}
|
452
|
-
type="text"
|
453
|
-
onFocus={event => popoverRequestHandler(event, 'on-focus')}
|
454
|
-
onClick={event => popoverRequestHandler(event, 'on-focus')}
|
455
|
-
onChange={event => inputChangedHandler(event)}
|
456
|
-
value={value ? selectedValue : selectTemporaryValue}
|
457
|
-
placeholder={selectedValue}
|
458
|
-
autoComplete={'off'}
|
459
|
-
disabled={disabled ? disabled : false}
|
460
|
-
onKeyDown={event => handleKeyPress(event)} />
|
461
|
-
) : (
|
462
|
-
<input
|
463
|
-
className="em-select-input"
|
464
|
-
data-testid={id && id.constructor === String ? `${id}-multi-select-input` : "multi-select-input-default-id"}
|
465
|
-
id={id && id.constructor === String ? `${id}-multi-select-input-default-id` : "multi-select-input-default-id"}
|
466
|
-
type="text"
|
467
|
-
onClick={event => popoverRequestHandler(event, 'on-focus')}
|
468
|
-
placeholder={selectedValue}
|
469
|
-
autoComplete={'off'}
|
470
|
-
value={value && value.length > 0 ? multiSelectValue : ""}
|
471
|
-
disabled={disabled ? disabled : false}
|
472
|
-
readOnly />
|
473
|
-
)
|
474
|
-
|
475
|
-
}
|
476
|
-
|
477
|
-
{
|
478
|
-
type === 'select' ? (
|
479
|
-
disabled ? (
|
480
|
-
<div data-testid={'dropdown-icon'} className="em-field-icon">
|
481
|
-
{SVG_ARROWDOWN}
|
482
|
-
</div>
|
483
|
-
) : (
|
484
|
-
value && value !== "" && !hideClearIcon ? (
|
485
|
-
<div data-testid={'clear-icon'} onClick={event => clearValuesHandler(event)} className='em-field-icon'>
|
486
|
-
{SVG_CLOSE_GRAY}
|
487
|
-
</div>
|
488
|
-
) : (
|
489
|
-
<div data-testid={'dropdown-icon'} className="em-field-icon" onClick={event => popoverRequestHandler(event, 'on-focus')}>
|
490
|
-
{SVG_ARROWDOWN}
|
491
|
-
</div>
|
492
|
-
)
|
493
|
-
)
|
494
|
-
) : null
|
495
|
-
}
|
496
|
-
</div>
|
497
|
-
<Popover
|
498
|
-
id="select-popover"
|
499
|
-
className={Boolean(dropdownPopover) ? 'open-popover' : ''}
|
500
|
-
open={Boolean(dropdownPopover)}
|
501
|
-
onClick={(event:any) => popoverRequestHandler(event, 'on-blur')}>
|
502
|
-
<div className="em-select-popover">
|
503
|
-
{
|
504
|
-
type === 'multi-select' ? (
|
505
|
-
<div className="em-select-search e-input">
|
506
|
-
<input
|
507
|
-
id="multi-select-input-search"
|
508
|
-
type="text"
|
509
|
-
onFocus={event => popoverRequestHandler(event, 'on-focus')}
|
510
|
-
onChange={event => inputChangedHandler(event)}
|
511
|
-
placeholder={"Search"}
|
512
|
-
value={selectTemporaryValue}
|
513
|
-
disabled={disabled ? disabled : false}
|
514
|
-
autoComplete="off" />
|
515
|
-
</div>
|
516
|
-
) : null
|
517
|
-
}
|
518
|
-
{
|
519
|
-
optionsArray && optionsArray.constructor === Array && optionsArray.length > 0 ? (
|
520
|
-
// Default array display of options
|
521
|
-
<Fragment>
|
522
|
-
{
|
523
|
-
type === 'select' ? (
|
524
|
-
optionsArray.map((opt:any, idx:number) => (
|
525
|
-
<option className={keyOption === idx ? 'is-highlighted' : ''} key={idx}
|
526
|
-
onClick={event => optionSelectionHandler(event, opt)}>
|
527
|
-
{opt.label}
|
528
|
-
</option>
|
529
|
-
))
|
530
|
-
) : type === 'multi-select' ? (
|
531
|
-
<Fragment>
|
532
|
-
<div className="em-select-multiple">
|
533
|
-
<div className="em-select-all">
|
534
|
-
{
|
535
|
-
optionsArray.length > 1 ? (
|
536
|
-
<div className="em-select-check" key='select-all' onClick={event => optionSelectionHandler(event, 'select-all')}>
|
537
|
-
<input
|
538
|
-
type="checkbox"
|
539
|
-
checked={handleCheckedOptions('select-all')}
|
540
|
-
id='select-all'
|
541
|
-
readOnly
|
542
|
-
autoComplete="off" />
|
543
|
-
<label htmlFor=""></label>
|
544
|
-
<span>Select All</span>
|
545
|
-
</div>
|
546
|
-
) : null
|
547
|
-
}
|
548
|
-
</div>
|
549
|
-
<div className="em-select-checklist">
|
550
|
-
{
|
551
|
-
optionsArray.map((opt:any, idx:number) => (
|
552
|
-
<div id='option-div' className="em-select-check" key={idx} onClick={event => optionSelectionHandler(event, opt)}>
|
553
|
-
<input
|
554
|
-
type="checkbox"
|
555
|
-
checked={handleCheckedOptions(opt)}
|
556
|
-
id={opt.value}
|
557
|
-
readOnly
|
558
|
-
autoComplete="off"
|
559
|
-
/>
|
560
|
-
<label htmlFor=""></label>
|
561
|
-
<span >{opt.label}</span>
|
562
|
-
</div>
|
563
|
-
))
|
564
|
-
}
|
565
|
-
</div>
|
566
|
-
</div>
|
567
|
-
</Fragment>
|
568
|
-
) : <Fragment>No options</Fragment>
|
569
|
-
}
|
570
|
-
</Fragment>
|
571
|
-
) : optionsArray && optionsArray.constructor === Object && Object.keys(optionsArray).length > 0 ? (
|
572
|
-
// Display of options when grouped (*its only applicable on select type)
|
573
|
-
<Fragment>
|
574
|
-
{
|
575
|
-
type === 'select' ? (
|
576
|
-
Object.keys(optionsArray).map((id, grpIdx) => (
|
577
|
-
<optgroup key={id} label={optionsArray[id].label ? optionsArray[id].label : 'Invalid Group Label'}>
|
578
|
-
{
|
579
|
-
optionsArray[id].options && optionsArray[id].options.constructor === Array && optionsArray[id].options.length > 0 ? (
|
580
|
-
optionsArray[id].options.map((opt:any, idx:number) => (
|
581
|
-
<option key={idx} className={(grpIdx === objectKeyOption && keyOption === idx) ? 'is-highlighted' : ''} onClick={event => optionSelectionHandler(event, opt)}>
|
582
|
-
{opt.label}
|
583
|
-
</option>
|
584
|
-
))
|
585
|
-
) : null
|
586
|
-
}
|
587
|
-
</optgroup>
|
588
|
-
))
|
589
|
-
) : type === 'multi-select' ? (
|
590
|
-
<Fragment>
|
591
|
-
<div className="em-select-multiple">
|
592
|
-
<div className="em-select-all">
|
593
|
-
{
|
594
|
-
Object.keys(optionsArray).length > 1 || (
|
595
|
-
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) ? (
|
596
|
-
<div className="em-select-check" key='select-all' onClick={event => optionSelectionHandler(event, 'select-all')}>
|
597
|
-
<input
|
598
|
-
type="checkbox"
|
599
|
-
checked={handleCheckedOptions('select-all')}
|
600
|
-
id='select-all'
|
601
|
-
readOnly
|
602
|
-
autoComplete="off"
|
603
|
-
/>
|
604
|
-
<label htmlFor=""></label>
|
605
|
-
<span>Select All</span>
|
606
|
-
</div>
|
607
|
-
) : null
|
608
|
-
}
|
609
|
-
</div>
|
610
|
-
{
|
611
|
-
Object.keys(optionsArray).map(id => (
|
612
|
-
<Fragment key={id}>
|
613
|
-
<div className="em-select-checklist">
|
614
|
-
{
|
615
|
-
id !== 'selected-values' ? (
|
616
|
-
<optgroup label={optionsArray[id].label ? optionsArray[id].label : 'Invalid Group Label'} />
|
617
|
-
) : null
|
618
|
-
}
|
619
|
-
{
|
620
|
-
optionsArray[id].options && optionsArray[id].options.constructor === Array && optionsArray[id].options.length > 0 ? (
|
621
|
-
optionsArray[id].options.map((opt:any, idx:number) => (
|
622
|
-
<div id='option-div' className="em-select-check" key={idx} onClick={event => optionSelectionHandler(event, opt)}>
|
623
|
-
<input
|
624
|
-
type="checkbox"
|
625
|
-
// checked={handleCheckedOptions(opt)}
|
626
|
-
checked={value}
|
627
|
-
id={opt.value}
|
628
|
-
readOnly
|
629
|
-
autoComplete="off"
|
630
|
-
/>
|
631
|
-
<label htmlFor=""></label>
|
632
|
-
<span>{opt.label}</span>
|
633
|
-
</div>
|
634
|
-
))
|
635
|
-
) : <Fragment>No options</Fragment>
|
636
|
-
}
|
637
|
-
</div>
|
638
|
-
</Fragment>
|
639
|
-
))
|
640
|
-
}
|
641
|
-
</div>
|
642
|
-
</Fragment>
|
643
|
-
) : <Fragment>No options</Fragment>
|
644
|
-
}
|
645
|
-
</Fragment>
|
646
|
-
) : <div className="em-noresult">No options</div>
|
647
|
-
}
|
648
|
-
</div>
|
649
|
-
</Popover>
|
650
|
-
</div>
|
651
|
-
);
|
652
|
-
}
|
653
|
-
|
654
|
-
export default Dropdown;
|