react-core-ts 2.0.4 → 2.0.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/ReactAutoComplete.d.ts +4 -4
- package/dist/ReactAutoComplete.js +122 -102
- package/dist/ReactAutoComplete.js.map +1 -1
- package/package.json +1 -1
- package/src/ReactAutoComplete.tsx +149 -129
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { FieldErrors } from
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FieldErrors } from 'react-hook-form';
|
|
3
3
|
type valueProps = {
|
|
4
4
|
id?: string | number;
|
|
5
5
|
name: string;
|
|
@@ -23,7 +23,7 @@ interface AutoSuggestionInputProps {
|
|
|
23
23
|
value?: valueProps;
|
|
24
24
|
onChange: (value?: valueProps) => void;
|
|
25
25
|
data?: any[];
|
|
26
|
-
type?:
|
|
26
|
+
type?: 'custom_select' | 'auto_complete' | 'custom_search_select';
|
|
27
27
|
placeholder?: string;
|
|
28
28
|
getData?: ((key?: string) => Promise<any>) | ((key?: string) => any);
|
|
29
29
|
errors?: FieldErrors;
|
|
@@ -42,7 +42,7 @@ interface AutoSuggestionInputProps {
|
|
|
42
42
|
width?: number;
|
|
43
43
|
labelTitle?: string;
|
|
44
44
|
isModern?: boolean;
|
|
45
|
-
size?:
|
|
45
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xxs';
|
|
46
46
|
}
|
|
47
47
|
declare const ModernAutoComplete: React.FC<AutoSuggestionInputProps>;
|
|
48
48
|
export default ModernAutoComplete;
|
|
@@ -60,8 +60,8 @@ var getPosition_1 = require("./utilities/getPosition");
|
|
|
60
60
|
var icons_1 = require("./utilities/icons");
|
|
61
61
|
var ModernAutoComplete = function (_a) {
|
|
62
62
|
var _b;
|
|
63
|
-
var label = _a.label, onChange = _a.onChange, getData = _a.getData, data = _a.data, errors = _a.errors, _c = _a.required, required = _c === void 0 ? false : _c, autoFocus = _a.autoFocus, name = _a.name, _d = _a.shortCode, shortCode = _d === void 0 ?
|
|
64
|
-
var _r = (0, react_1.useState)((_b = value === null || value === void 0 ? void 0 : value.name) !== null && _b !== void 0 ? _b :
|
|
63
|
+
var label = _a.label, onChange = _a.onChange, getData = _a.getData, data = _a.data, errors = _a.errors, _c = _a.required, required = _c === void 0 ? false : _c, autoFocus = _a.autoFocus, name = _a.name, _d = _a.shortCode, shortCode = _d === void 0 ? '' : _d, _e = _a.labelCode, labelCode = _e === void 0 ? '' : _e, fullWidth = _a.fullWidth, placeholder = _a.placeholder, id = _a.id, propsClassName = _a.className, _f = _a.type, type = _f === void 0 ? 'custom_select' : _f, readOnly = _a.readOnly, _g = _a.disabled, disabled = _g === void 0 ? false : _g, value = _a.value, _h = _a.autoFilter, autoFilter = _h === void 0 ? false : _h, _j = _a.insideOpen, insideOpen = _j === void 0 ? false : _j, _k = _a.isClose, isClose = _k === void 0 ? true : _k, _l = _a.noLocalFilter, noLocalFilter = _l === void 0 ? false : _l, _m = _a.isStaticList, isStaticList = _m === void 0 ? false : _m, _o = _a.isCustomPlaceholder, isCustomPlaceholder = _o === void 0 ? false : _o, checkParams = _a.checkParams, width = _a.width, hasParentError = _a.hasParentError, fromPrefix = _a.fromPrefix, labelTitle = _a.labelTitle, _p = _a.isModern, isModern = _p === void 0 ? true : _p, _q = _a.size, size = _q === void 0 ? 'md' : _q;
|
|
64
|
+
var _r = (0, react_1.useState)((_b = value === null || value === void 0 ? void 0 : value.name) !== null && _b !== void 0 ? _b : ''), inputValue = _r[0], setInputValue = _r[1];
|
|
65
65
|
var _s = (0, react_1.useState)(false), isHovered = _s[0], setIsHovered = _s[1];
|
|
66
66
|
var _t = (0, react_1.useState)(false), isLoading = _t[0], setIsLoading = _t[1];
|
|
67
67
|
var _u = (0, react_1.useState)(false), dropOpen = _u[0], setDropOpen = _u[1];
|
|
@@ -88,8 +88,8 @@ var ModernAutoComplete = function (_a) {
|
|
|
88
88
|
var checkIncludesIfExists = function (mainString, substring) {
|
|
89
89
|
return substring &&
|
|
90
90
|
mainString &&
|
|
91
|
-
typeof mainString ===
|
|
92
|
-
typeof subString ===
|
|
91
|
+
typeof mainString === 'string' &&
|
|
92
|
+
typeof subString === 'string'
|
|
93
93
|
? mainString
|
|
94
94
|
.toString()
|
|
95
95
|
.toLowerCase()
|
|
@@ -99,21 +99,21 @@ var ModernAutoComplete = function (_a) {
|
|
|
99
99
|
var checkArrayContains = function (strArray, param) { var _a; return (_a = strArray === null || strArray === void 0 ? void 0 : strArray.includes(param)) !== null && _a !== void 0 ? _a : false; };
|
|
100
100
|
return (checkIncludesIfExists(mainString, subString) ||
|
|
101
101
|
(!!checkParams &&
|
|
102
|
-
((checkArrayContains(checkParams,
|
|
102
|
+
((checkArrayContains(checkParams, 'param1') &&
|
|
103
103
|
checkIncludesIfExists(param1, subString)) ||
|
|
104
|
-
(checkArrayContains(checkParams,
|
|
104
|
+
(checkArrayContains(checkParams, 'param2') &&
|
|
105
105
|
checkIncludesIfExists(param2, subString)) ||
|
|
106
|
-
(checkArrayContains(checkParams,
|
|
106
|
+
(checkArrayContains(checkParams, 'param3') &&
|
|
107
107
|
checkIncludesIfExists(param3, subString)) ||
|
|
108
|
-
(checkArrayContains(checkParams,
|
|
108
|
+
(checkArrayContains(checkParams, 'param4') &&
|
|
109
109
|
checkIncludesIfExists(param4, subString)))));
|
|
110
110
|
};
|
|
111
111
|
var getHeight = function () {
|
|
112
112
|
switch (size) {
|
|
113
|
-
case
|
|
114
|
-
return
|
|
113
|
+
case 'sm':
|
|
114
|
+
return ' h-[34px] ';
|
|
115
115
|
default:
|
|
116
|
-
return
|
|
116
|
+
return ' ';
|
|
117
117
|
}
|
|
118
118
|
};
|
|
119
119
|
var handleChange = function (event) {
|
|
@@ -122,17 +122,17 @@ var ModernAutoComplete = function (_a) {
|
|
|
122
122
|
setInputValue(value);
|
|
123
123
|
handleValChange(value);
|
|
124
124
|
if (!value) {
|
|
125
|
-
setInputValue(
|
|
126
|
-
onChange({ id: undefined, name:
|
|
125
|
+
setInputValue('');
|
|
126
|
+
onChange({ id: undefined, name: '', from: 2 });
|
|
127
127
|
}
|
|
128
128
|
};
|
|
129
129
|
var handleValChange = (0, react_1.useCallback)((0, debounce_1.debounce)(function (value) {
|
|
130
130
|
setDropOpen(true);
|
|
131
|
-
onChange({ id: undefined, name:
|
|
132
|
-
if (value.trim() ===
|
|
131
|
+
onChange({ id: undefined, name: '', from: 1 });
|
|
132
|
+
if (value.trim() === '' && type === 'auto_complete') {
|
|
133
133
|
setSuggestions([]);
|
|
134
134
|
if (autoFilter) {
|
|
135
|
-
handleDropData(
|
|
135
|
+
handleDropData('*');
|
|
136
136
|
}
|
|
137
137
|
else {
|
|
138
138
|
setDropOpen(false);
|
|
@@ -146,10 +146,10 @@ var ModernAutoComplete = function (_a) {
|
|
|
146
146
|
}, 200);
|
|
147
147
|
}, isStaticList ? 0 : 1000), []);
|
|
148
148
|
var handleDropData = function (value) {
|
|
149
|
-
if (type ===
|
|
149
|
+
if (type === 'auto_complete') {
|
|
150
150
|
if (isStaticList) {
|
|
151
151
|
loadStaticData();
|
|
152
|
-
var filteredData_1 = value && value !==
|
|
152
|
+
var filteredData_1 = value && value !== '*'
|
|
153
153
|
? data === null || data === void 0 ? void 0 : data.filter(function (item) {
|
|
154
154
|
return checkIncludes(item.name, value, item.param1, item.param2, item.param3);
|
|
155
155
|
})
|
|
@@ -159,12 +159,12 @@ var ModernAutoComplete = function (_a) {
|
|
|
159
159
|
else
|
|
160
160
|
handlePickSuggestions(value);
|
|
161
161
|
}
|
|
162
|
-
else if ((type ===
|
|
162
|
+
else if ((type === 'custom_select' || type === 'custom_search_select') &&
|
|
163
163
|
(!data || (data === null || data === void 0 ? void 0 : data.length) === 0)) {
|
|
164
164
|
handlePickSuggestions();
|
|
165
165
|
}
|
|
166
|
-
else if (type ===
|
|
167
|
-
var filteredData_2 = value && value !==
|
|
166
|
+
else if (type === 'custom_search_select' && data && (data === null || data === void 0 ? void 0 : data.length) > 0) {
|
|
167
|
+
var filteredData_2 = value && value !== '*'
|
|
168
168
|
? data.filter(function (item) {
|
|
169
169
|
return checkIncludes(item.name, value, item.param1, item.param2, item.param3);
|
|
170
170
|
})
|
|
@@ -200,10 +200,10 @@ var ModernAutoComplete = function (_a) {
|
|
|
200
200
|
var _a;
|
|
201
201
|
if (!isDisabled) {
|
|
202
202
|
(_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
203
|
-
if (autoFilter && inputValue ===
|
|
204
|
-
handleValChange(
|
|
203
|
+
if (autoFilter && inputValue === '') {
|
|
204
|
+
handleValChange('*');
|
|
205
205
|
}
|
|
206
|
-
else if ((type ===
|
|
206
|
+
else if ((type === 'custom_select' || type === 'custom_search_select') &&
|
|
207
207
|
data &&
|
|
208
208
|
(data === null || data === void 0 ? void 0 : data.length) > 0) {
|
|
209
209
|
handleDropData();
|
|
@@ -212,8 +212,15 @@ var ModernAutoComplete = function (_a) {
|
|
|
212
212
|
}
|
|
213
213
|
};
|
|
214
214
|
var handleClickOutside = function (event) {
|
|
215
|
+
var target = event.target;
|
|
216
|
+
var dropButton = document.getElementById('autocomplete-drop-icon');
|
|
217
|
+
var closeButton = document.getElementById('autocomplete-close-icon');
|
|
215
218
|
if (dropdownref.current &&
|
|
216
|
-
!dropdownref.current.contains(
|
|
219
|
+
!dropdownref.current.contains(target) &&
|
|
220
|
+
target !== dropButton &&
|
|
221
|
+
!(dropButton === null || dropButton === void 0 ? void 0 : dropButton.contains(target)) &&
|
|
222
|
+
target !== closeButton &&
|
|
223
|
+
!(closeButton === null || closeButton === void 0 ? void 0 : closeButton.contains(target))) {
|
|
217
224
|
setDropOpen(false);
|
|
218
225
|
}
|
|
219
226
|
};
|
|
@@ -236,8 +243,8 @@ var ModernAutoComplete = function (_a) {
|
|
|
236
243
|
case 1:
|
|
237
244
|
_a.trys.push([1, 3, , 4]);
|
|
238
245
|
setIsLoading(true);
|
|
239
|
-
handlePickSuggestions(
|
|
240
|
-
return [4 /*yield*/, (getData === null || getData === void 0 ? void 0 : getData(
|
|
246
|
+
handlePickSuggestions('*');
|
|
247
|
+
return [4 /*yield*/, (getData === null || getData === void 0 ? void 0 : getData('*'))];
|
|
241
248
|
case 2:
|
|
242
249
|
fetchedSuggestions = _a.sent();
|
|
243
250
|
fetchedSuggestions === null || fetchedSuggestions === void 0 ? void 0 : fetchedSuggestions.forEach(function (element) {
|
|
@@ -254,9 +261,9 @@ var ModernAutoComplete = function (_a) {
|
|
|
254
261
|
});
|
|
255
262
|
}); };
|
|
256
263
|
(0, react_1.useEffect)(function () {
|
|
257
|
-
document.addEventListener(
|
|
264
|
+
document.addEventListener('click', handleClickOutside);
|
|
258
265
|
return function () {
|
|
259
|
-
document.removeEventListener(
|
|
266
|
+
document.removeEventListener('click', handleClickOutside);
|
|
260
267
|
};
|
|
261
268
|
}, []);
|
|
262
269
|
(0, react_1.useEffect)(function () {
|
|
@@ -266,10 +273,10 @@ var ModernAutoComplete = function (_a) {
|
|
|
266
273
|
}, [autoFocus]);
|
|
267
274
|
var onInputFocus = function () {
|
|
268
275
|
if (!isDisabled) {
|
|
269
|
-
if (autoFilter && inputValue ===
|
|
270
|
-
handleValChange(
|
|
276
|
+
if (autoFilter && inputValue === '') {
|
|
277
|
+
handleValChange('*');
|
|
271
278
|
}
|
|
272
|
-
else if ((type ===
|
|
279
|
+
else if ((type === 'custom_select' || type === 'custom_search_select') &&
|
|
273
280
|
data &&
|
|
274
281
|
(data === null || data === void 0 ? void 0 : data.length) > 0) {
|
|
275
282
|
handleDropData();
|
|
@@ -282,17 +289,24 @@ var ModernAutoComplete = function (_a) {
|
|
|
282
289
|
}, [disabled]);
|
|
283
290
|
var handleSuggestionClick = function (suggestion, index) {
|
|
284
291
|
onChange(__assign(__assign(__assign({}, suggestion), { id: suggestion === null || suggestion === void 0 ? void 0 : suggestion.id, name: suggestion.name }), ((suggestion === null || suggestion === void 0 ? void 0 : suggestion.label) ? { label: suggestion === null || suggestion === void 0 ? void 0 : suggestion.label } : {})));
|
|
285
|
-
if (type !==
|
|
292
|
+
if (type !== 'custom_select')
|
|
286
293
|
setInputValue(suggestion.name);
|
|
287
294
|
setDropOpen(false);
|
|
288
295
|
setSelectedIndex(index);
|
|
289
296
|
};
|
|
290
297
|
var handleOpen = function (e) {
|
|
291
|
-
if (
|
|
298
|
+
if (e) {
|
|
299
|
+
e.preventDefault();
|
|
300
|
+
e.stopPropagation();
|
|
301
|
+
}
|
|
302
|
+
if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0) {
|
|
292
303
|
handleDropData();
|
|
293
|
-
|
|
304
|
+
return;
|
|
305
|
+
}
|
|
306
|
+
if (!isLoading) {
|
|
294
307
|
setDropOpen(!dropOpen);
|
|
295
|
-
|
|
308
|
+
if (type !== 'custom_select')
|
|
309
|
+
setInputValue('');
|
|
296
310
|
}
|
|
297
311
|
};
|
|
298
312
|
var handleScroll = function () {
|
|
@@ -301,43 +315,43 @@ var ModernAutoComplete = function (_a) {
|
|
|
301
315
|
(0, react_1.useEffect)(function () {
|
|
302
316
|
if (!insideOpen) {
|
|
303
317
|
setSelectedIndex(0);
|
|
304
|
-
window.addEventListener(
|
|
305
|
-
var mainElement = document.querySelector(
|
|
306
|
-
mainElement === null || mainElement === void 0 ? void 0 : mainElement.addEventListener(
|
|
307
|
-
var gridElements = document.querySelectorAll(
|
|
318
|
+
window.addEventListener('scroll', handleScroll);
|
|
319
|
+
var mainElement = document.querySelector('main');
|
|
320
|
+
mainElement === null || mainElement === void 0 ? void 0 : mainElement.addEventListener('scroll', handleScroll);
|
|
321
|
+
var gridElements = document.querySelectorAll('.k-grid-content, .overflow-auto, .overflow-y-auto, .overflow-x-auto');
|
|
308
322
|
gridElements.forEach(function (gridElement) {
|
|
309
|
-
gridElement.addEventListener(
|
|
323
|
+
gridElement.addEventListener('scroll', handleScroll);
|
|
310
324
|
});
|
|
311
|
-
window.addEventListener(
|
|
325
|
+
window.addEventListener('resize', getDropPosition);
|
|
312
326
|
getDropPosition();
|
|
313
327
|
return function () {
|
|
314
|
-
window.removeEventListener(
|
|
315
|
-
var mainElement = document.querySelector(
|
|
316
|
-
mainElement === null || mainElement === void 0 ? void 0 : mainElement.removeEventListener(
|
|
317
|
-
window.addEventListener(
|
|
318
|
-
var gridElements = document.querySelectorAll(
|
|
328
|
+
window.removeEventListener('scroll', handleScroll);
|
|
329
|
+
var mainElement = document.querySelector('main');
|
|
330
|
+
mainElement === null || mainElement === void 0 ? void 0 : mainElement.removeEventListener('scroll', handleScroll);
|
|
331
|
+
window.addEventListener('resize', getDropPosition);
|
|
332
|
+
var gridElements = document.querySelectorAll('.k-grid-content');
|
|
319
333
|
gridElements.forEach(function (gridElement) {
|
|
320
|
-
gridElement.removeEventListener(
|
|
334
|
+
gridElement.removeEventListener('scroll', handleScroll);
|
|
321
335
|
});
|
|
322
336
|
};
|
|
323
337
|
}
|
|
324
338
|
}, [dropOpen]);
|
|
325
339
|
var handleClear = function () {
|
|
326
340
|
setDropOpen(false);
|
|
327
|
-
setInputValue(
|
|
328
|
-
onChange({ id: undefined, name:
|
|
341
|
+
setInputValue('');
|
|
342
|
+
onChange({ id: undefined, name: '', from: 3 });
|
|
329
343
|
onLabelClick();
|
|
330
344
|
};
|
|
331
345
|
(0, react_1.useEffect)(function () {
|
|
332
346
|
var _a;
|
|
333
|
-
setInputValue((_a = value === null || value === void 0 ? void 0 : value.name) !== null && _a !== void 0 ? _a :
|
|
347
|
+
setInputValue((_a = value === null || value === void 0 ? void 0 : value.name) !== null && _a !== void 0 ? _a : '');
|
|
334
348
|
}, [value === null || value === void 0 ? void 0 : value.name]);
|
|
335
349
|
(0, react_1.useEffect)(function () {
|
|
336
350
|
setSuggestions(data);
|
|
337
351
|
}, [data]);
|
|
338
352
|
var getErrors = function (err) {
|
|
339
353
|
var _a, _b, _c, _d;
|
|
340
|
-
var errMsg =
|
|
354
|
+
var errMsg = '';
|
|
341
355
|
if (err.message) {
|
|
342
356
|
errMsg = err === null || err === void 0 ? void 0 : err.message;
|
|
343
357
|
}
|
|
@@ -352,44 +366,44 @@ var ModernAutoComplete = function (_a) {
|
|
|
352
366
|
var generateClassName = function (type) {
|
|
353
367
|
var className = propsClassName;
|
|
354
368
|
switch (type) {
|
|
355
|
-
case
|
|
369
|
+
case 'input':
|
|
356
370
|
className += " block text-common text-input-text font-normal px-3.5 w-full text-sm text-gray-900 bg-transparent border appearance-none peer h-10 rounded-[4px] disabled:text-input-disabled bg-white disabled:bg-disabled ".concat(label && isModern
|
|
357
|
-
?
|
|
358
|
-
:
|
|
371
|
+
? 'placeholder-transparent'
|
|
372
|
+
: 'focus:placeholder-grey-secondary placeholder-input-label', " focus:placeholder-grey-secondary");
|
|
359
373
|
if (errors && errors[name]) {
|
|
360
374
|
className +=
|
|
361
|
-
|
|
375
|
+
' border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 focus:outline-[#FDA29B] input-outline';
|
|
362
376
|
}
|
|
363
377
|
else {
|
|
364
378
|
className +=
|
|
365
|
-
|
|
379
|
+
' text-grey-dark border-input-light focus:border-blue-navy focus:outline-none focus:ring-0';
|
|
366
380
|
}
|
|
367
381
|
className += getHeight();
|
|
368
382
|
break;
|
|
369
|
-
case
|
|
383
|
+
case 'label':
|
|
370
384
|
className += " flex modern-input-label-truncate peer-focus:modern-input-peer-focus-label-size \n ".concat(isDisabled
|
|
371
|
-
?
|
|
372
|
-
:
|
|
373
|
-
?
|
|
385
|
+
? 'cursor-pointer'
|
|
386
|
+
: 'cursor-text peer-focus:cursor-pointer', " ").concat(isDisabled && !checkIsEmptyField()
|
|
387
|
+
? 'disabled-input-label-bg'
|
|
374
388
|
: !isDisabled || !checkIsEmptyField()
|
|
375
|
-
?
|
|
376
|
-
:
|
|
377
|
-
?
|
|
378
|
-
:
|
|
379
|
-
?
|
|
380
|
-
:
|
|
389
|
+
? 'active-input-label-bg'
|
|
390
|
+
: '', " absolute duration-300 transform -translate-y-4 top-2 z-1 origin-[0] px-0 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto ").concat(isDisabled
|
|
391
|
+
? 'cursor-pointer'
|
|
392
|
+
: 'cursor-text peer-focus:cursor-pointer', "\n ").concat(checkIsEmptyField()
|
|
393
|
+
? 'modern-input-label-size'
|
|
394
|
+
: 'modern-input-peer-focus-label-size');
|
|
381
395
|
if (errors && errors[name]) {
|
|
382
|
-
className +=
|
|
396
|
+
className += ' text-error-light ';
|
|
383
397
|
}
|
|
384
398
|
else {
|
|
385
|
-
className +=
|
|
399
|
+
className += ' text-grey-dark peer-focus:text-blue-navy';
|
|
386
400
|
}
|
|
387
401
|
break;
|
|
388
|
-
case
|
|
389
|
-
className =
|
|
402
|
+
case 'message':
|
|
403
|
+
className = ' text-error-icon ';
|
|
390
404
|
break;
|
|
391
|
-
case
|
|
392
|
-
className +=
|
|
405
|
+
case 'adorement':
|
|
406
|
+
className += ' absolute right-0 adorement gap-1 flex items-center ';
|
|
393
407
|
break;
|
|
394
408
|
default:
|
|
395
409
|
break;
|
|
@@ -413,23 +427,23 @@ var ModernAutoComplete = function (_a) {
|
|
|
413
427
|
// const getPosition = () => {
|
|
414
428
|
// return 'bottom'
|
|
415
429
|
// }
|
|
416
|
-
var filteredData = inputValue !==
|
|
417
|
-
inputValue !==
|
|
418
|
-
type !==
|
|
430
|
+
var filteredData = inputValue !== '*' &&
|
|
431
|
+
inputValue !== '' &&
|
|
432
|
+
type !== 'custom_select' &&
|
|
419
433
|
!noLocalFilter
|
|
420
434
|
? suggestions === null || suggestions === void 0 ? void 0 : suggestions.filter(function (item) {
|
|
421
435
|
var _a, _b, _c, _d;
|
|
422
|
-
return checkIncludes(item.name, inputValue, (_a = item.param1) !== null && _a !== void 0 ? _a :
|
|
436
|
+
return checkIncludes(item.name, inputValue, (_a = item.param1) !== null && _a !== void 0 ? _a : '', (_b = item.param2) !== null && _b !== void 0 ? _b : '', (_c = item.param3) !== null && _c !== void 0 ? _c : '', (_d = item.param4) !== null && _d !== void 0 ? _d : '');
|
|
423
437
|
})
|
|
424
438
|
: suggestions;
|
|
425
439
|
var handleError = function (data) {
|
|
426
440
|
var _a;
|
|
427
|
-
if (getErrors(data[name]) ===
|
|
428
|
-
getErrors(data[name]) ===
|
|
441
|
+
if (getErrors(data[name]) === 'required' ||
|
|
442
|
+
getErrors(data[name]) === 'Required') {
|
|
429
443
|
return "".concat(label !== null && label !== void 0 ? label : labelTitle, " is ").concat(getErrors(data[name]));
|
|
430
444
|
}
|
|
431
445
|
else {
|
|
432
|
-
return (_a = getErrors(data[name])) !== null && _a !== void 0 ? _a :
|
|
446
|
+
return (_a = getErrors(data[name])) !== null && _a !== void 0 ? _a : '';
|
|
433
447
|
}
|
|
434
448
|
};
|
|
435
449
|
var getDropPosition = function () {
|
|
@@ -473,14 +487,14 @@ var ModernAutoComplete = function (_a) {
|
|
|
473
487
|
var handleKeyDown = function (e) {
|
|
474
488
|
if (!dropOpen)
|
|
475
489
|
return;
|
|
476
|
-
var nextIndex = e.key ===
|
|
490
|
+
var nextIndex = e.key === 'ArrowDown'
|
|
477
491
|
? (selectedIndex + 1) % filteredData.length
|
|
478
|
-
: e.key ===
|
|
492
|
+
: e.key === 'ArrowUp'
|
|
479
493
|
? (selectedIndex - 1 + filteredData.length) % filteredData.length
|
|
480
494
|
: selectedIndex;
|
|
481
495
|
switch (e.key) {
|
|
482
|
-
case
|
|
483
|
-
case
|
|
496
|
+
case 'ArrowDown':
|
|
497
|
+
case 'ArrowUp':
|
|
484
498
|
e.preventDefault();
|
|
485
499
|
// Update index first
|
|
486
500
|
setSelectedIndex(nextIndex);
|
|
@@ -502,11 +516,11 @@ var ModernAutoComplete = function (_a) {
|
|
|
502
516
|
}
|
|
503
517
|
});
|
|
504
518
|
break;
|
|
505
|
-
case
|
|
519
|
+
case 'Enter':
|
|
506
520
|
e.preventDefault();
|
|
507
521
|
handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
|
|
508
522
|
break;
|
|
509
|
-
case
|
|
523
|
+
case 'Escape':
|
|
510
524
|
e.preventDefault();
|
|
511
525
|
setDropOpen(false);
|
|
512
526
|
break;
|
|
@@ -515,9 +529,9 @@ var ModernAutoComplete = function (_a) {
|
|
|
515
529
|
}
|
|
516
530
|
};
|
|
517
531
|
if ((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && !isLoading) {
|
|
518
|
-
window.addEventListener(
|
|
532
|
+
window.addEventListener('keydown', handleKeyDown);
|
|
519
533
|
return function () {
|
|
520
|
-
window.removeEventListener(
|
|
534
|
+
window.removeEventListener('keydown', handleKeyDown);
|
|
521
535
|
};
|
|
522
536
|
}
|
|
523
537
|
}, [
|
|
@@ -530,8 +544,8 @@ var ModernAutoComplete = function (_a) {
|
|
|
530
544
|
]);
|
|
531
545
|
var setDropDown = function () {
|
|
532
546
|
return (((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 || showNoResults) && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "autocomplete-suggections absolute bg-white shadow-gray-300 shadow-md border border-grey-light z-50 mt-9", style: dropPosition }, { children: (0, jsx_runtime_1.jsx)("ul", __assign({ className: "h-auto max-h-40 overflow-auto w-full py-1.5", ref: scrollContainerRef }, { children: (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredData.map(function (suggestion, index) { return ((0, jsx_runtime_1.jsxs)("li", __assign({ className: "".concat((value === null || value === void 0 ? void 0 : value.id) === (suggestion === null || suggestion === void 0 ? void 0 : suggestion.id)
|
|
533
|
-
?
|
|
534
|
-
: "".concat(index === selectedIndex ?
|
|
547
|
+
? 'bg-blue-navy text-white'
|
|
548
|
+
: "".concat(index === selectedIndex ? 'is-selected' : '', " hover:bg-table-hover"), " cursor-pointer p-1 text-xxs ps-3.5 pl-[10px] qbs-autocomplete-suggections-items"), "data-testid": suggestion.name, onClick: function () { return handleSuggestionClick(suggestion, index); }, tabIndex: index, ref: function (el) { return (itemRefs.current[index] = el); } }, { children: [(0, jsx_runtime_1.jsx)("span", { children: (suggestion === null || suggestion === void 0 ? void 0 : suggestion.label) ? suggestion === null || suggestion === void 0 ? void 0 : suggestion.label : suggestion.name }), labelCode && (suggestion === null || suggestion === void 0 ? void 0 : suggestion[labelCode]) && ((0, jsx_runtime_1.jsx)("span", __assign({ className: "label-code" }, { children: suggestion === null || suggestion === void 0 ? void 0 : suggestion[labelCode] }))), shortCode && (suggestion === null || suggestion === void 0 ? void 0 : suggestion[shortCode]) && ((0, jsx_runtime_1.jsx)("span", __assign({ className: "short-code" }, { children: suggestion === null || suggestion === void 0 ? void 0 : suggestion[shortCode] })))] }), suggestion === null || suggestion === void 0 ? void 0 : suggestion.id)); }) })) : (showNoResults &&
|
|
535
549
|
!isLoading &&
|
|
536
550
|
timerRef.current === 1 && ((0, jsx_runtime_1.jsx)("li", __assign({ className: "$ cursor-pointer p-1 rounded-sm text-xxs", onClick: handleClose }, { children: "No Results Found" })))) })) }))));
|
|
537
551
|
};
|
|
@@ -553,7 +567,7 @@ var ModernAutoComplete = function (_a) {
|
|
|
553
567
|
}, [isHovered]);
|
|
554
568
|
(0, react_1.useEffect)(function () {
|
|
555
569
|
var shouldShowClose = (value === null || value === void 0 ? void 0 : value.name) &&
|
|
556
|
-
((value === null || value === void 0 ? void 0 : value.id) || String(value === null || value === void 0 ? void 0 : value.id) ===
|
|
570
|
+
((value === null || value === void 0 ? void 0 : value.id) || String(value === null || value === void 0 ? void 0 : value.id) === '0') &&
|
|
557
571
|
!disabled &&
|
|
558
572
|
!readOnly &&
|
|
559
573
|
isClose;
|
|
@@ -567,7 +581,7 @@ var ModernAutoComplete = function (_a) {
|
|
|
567
581
|
if (inputRef.current) {
|
|
568
582
|
var _a = inputRef.current, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, value_1 = _a.value;
|
|
569
583
|
// Check for overflow only when there's content
|
|
570
|
-
if (value_1.trim() !==
|
|
584
|
+
if (value_1.trim() !== '') {
|
|
571
585
|
setShowTooltip(scrollWidth > clientWidth + 2);
|
|
572
586
|
}
|
|
573
587
|
else {
|
|
@@ -576,12 +590,12 @@ var ModernAutoComplete = function (_a) {
|
|
|
576
590
|
}
|
|
577
591
|
};
|
|
578
592
|
if (inputRef.current) {
|
|
579
|
-
inputRef.current.addEventListener(
|
|
593
|
+
inputRef.current.addEventListener('input', checkOverflow);
|
|
580
594
|
checkOverflow(); // Initial check
|
|
581
595
|
}
|
|
582
596
|
return function () {
|
|
583
597
|
if (inputRef.current) {
|
|
584
|
-
inputRef.current.removeEventListener(
|
|
598
|
+
inputRef.current.removeEventListener('input', checkOverflow);
|
|
585
599
|
}
|
|
586
600
|
};
|
|
587
601
|
}, [inputValue]);
|
|
@@ -591,25 +605,31 @@ var ModernAutoComplete = function (_a) {
|
|
|
591
605
|
var handleMouseLeave = function () {
|
|
592
606
|
setTooltipIsHovered(false);
|
|
593
607
|
};
|
|
594
|
-
return ((0, jsx_runtime_1.jsxs)("div", __assign({ id: id ? "autocomplete-container-".concat(id) : "autocomplete-container-".concat(name), className: " flex-grow ".concat(fullWidth ?
|
|
608
|
+
return ((0, jsx_runtime_1.jsxs)("div", __assign({ id: id ? "autocomplete-container-".concat(id) : "autocomplete-container-".concat(name), className: " flex-grow ".concat(fullWidth ? 'w-full' : 'w-auto'), ref: dropdownref }, { children: [label && !isModern && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "mb-3" }, { children: (0, jsx_runtime_1.jsxs)("label", __assign({ className: "text-xs font-medium" }, { children: [label, required ? (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-error" }, { children: " *" })) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "tooltip-container" }, { children: [isHovered && errors && errors[name] && ((0, jsx_runtime_1.jsxs)("span", __assign({ className: "tooltip" }, { children: [handleError(errors), " "] }))), tooltipIsHovered && showToolTip && !dropOpen && inputValue && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "tooltip-info" }, { children: inputValue }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "flex relative ".concat(fullWidth ? 'w-full' : 'w-auto'), style: { width: width } }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "relative w-full", onMouseEnter: function () { return handleMouseEnter(); }, onMouseLeave: function () { return handleMouseLeave(); } }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : type === 'custom_select', value: inputValue ? inputValue : '', onBlur: handleClearInputValue, autoComplete: "off", disabled: disabled, ref: inputRef, id: id ? "custom-autocomplete-".concat(id) : "custom-autocomplete-".concat(name), "data-testid": "custom-autocomplete", "aria-describedby": id, style: __assign({ paddingRight: getInnerWidth() }, (fromPrefix
|
|
595
609
|
? {
|
|
596
610
|
borderRight: getBorderRight(),
|
|
597
611
|
borderTopRightRadius: 0,
|
|
598
612
|
borderBottomRightRadius: 0,
|
|
599
613
|
}
|
|
600
|
-
: {})), className: " ".concat(generateClassName(
|
|
614
|
+
: {})), className: " ".concat(generateClassName('input')), onChange: handleChange, placeholder: type === 'auto_complete'
|
|
601
615
|
? placeholder && isCustomPlaceholder
|
|
602
616
|
? placeholder
|
|
603
|
-
:
|
|
604
|
-
: placeholder !== null && placeholder !== void 0 ? placeholder :
|
|
605
|
-
if (type ===
|
|
606
|
-
|
|
607
|
-
|
|
617
|
+
: 'Type to search'
|
|
618
|
+
: placeholder !== null && placeholder !== void 0 ? placeholder : '--Select--', onFocus: onInputFocus, onClick: function (e) {
|
|
619
|
+
if (type === 'custom_select') {
|
|
620
|
+
e.stopPropagation();
|
|
621
|
+
if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0) {
|
|
622
|
+
handleDropData();
|
|
623
|
+
}
|
|
624
|
+
if (!isLoading) {
|
|
625
|
+
setDropOpen(!dropOpen);
|
|
626
|
+
}
|
|
608
627
|
}
|
|
609
628
|
else {
|
|
629
|
+
e.stopPropagation();
|
|
610
630
|
setDropOpen(!dropOpen);
|
|
611
631
|
}
|
|
612
|
-
} }), isModern && ((0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: id, onClick: function () { return onLabelClick(); }, className: generateClassName(
|
|
632
|
+
} }), isModern && ((0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: id, onClick: function () { return onLabelClick(); }, className: generateClassName('label') }, { children: [label ? (0, jsx_runtime_1.jsx)("span", __assign({ className: "truncate" }, { children: label })) : '', required ? (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-error" }, { children: " *" })) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "flex items-center justify-center " }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ ref: adorementRef, className: "".concat(generateClassName('adorement'), " qbs-autocomplete-adorement custom-dorpdown-adorement mr-[1px] ").concat(isLoading ? 'bg-white' : '') }, { children: [showClose && ((0, jsx_runtime_1.jsx)("button", __assign({ onClick: function () { return handleClear(); }, className: " text-table-bodyColor text-[#667085]", "aria-label": "close", type: "button", id: "autocomplete-close-icon" }, { children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "close", type: "large-m" }) }))), isLoading && (0, jsx_runtime_1.jsx)(Spinner_1.default, {}), type !== 'auto_complete' && !disabled && !readOnly && ((0, jsx_runtime_1.jsx)("button", __assign({ disabled: disabled !== null && disabled !== void 0 ? disabled : readOnly, onClick: function (e) { return handleOpen(e); }, className: " text-[#667085] focus-visible:outline-slate-100", "data-testid": "drop-arrow", type: "button", id: "autocomplete-drop-icon", ref: dropBtnRef }, { children: !dropOpen ? ((0, jsx_runtime_1.jsx)(icons_1.DropArrow, { uniqueDropArrowId: "drop-arrow-icon" })) : ((0, jsx_runtime_1.jsx)(icons_1.DropArrow, { className: "rotate-180", uniqueDropArrowId: "drop-arrow-icon" })) }))), errors && errors[name] && ((0, jsx_runtime_1.jsx)("div", __assign({ className: " text-error-label relative cursor-pointer ".concat(generateClassName('message')), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "alert", type: "medium" }) })))] })) })), dropOpen && (!isLoading || (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: insideOpen ? setDropDown() : (0, jsx_runtime_1.jsx)(portal_1.default, { children: setDropDown() }) }))] }))] }))] })));
|
|
613
633
|
};
|
|
614
634
|
exports.default = ModernAutoComplete;
|
|
615
635
|
//# sourceMappingURL=ReactAutoComplete.js.map
|