react-core-ts 2.0.5 → 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 +118 -101
- package/dist/ReactAutoComplete.js.map +1 -1
- package/package.json +1 -1
- package/src/ReactAutoComplete.tsx +144 -127
|
@@ -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,20 +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) {
|
|
298
|
+
if (e) {
|
|
299
|
+
e.preventDefault();
|
|
300
|
+
e.stopPropagation();
|
|
301
|
+
}
|
|
291
302
|
if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0) {
|
|
292
303
|
handleDropData();
|
|
293
304
|
return;
|
|
294
305
|
}
|
|
295
306
|
if (!isLoading) {
|
|
296
307
|
setDropOpen(!dropOpen);
|
|
297
|
-
if (type !==
|
|
298
|
-
setInputValue(
|
|
308
|
+
if (type !== 'custom_select')
|
|
309
|
+
setInputValue('');
|
|
299
310
|
}
|
|
300
311
|
};
|
|
301
312
|
var handleScroll = function () {
|
|
@@ -304,43 +315,43 @@ var ModernAutoComplete = function (_a) {
|
|
|
304
315
|
(0, react_1.useEffect)(function () {
|
|
305
316
|
if (!insideOpen) {
|
|
306
317
|
setSelectedIndex(0);
|
|
307
|
-
window.addEventListener(
|
|
308
|
-
var mainElement = document.querySelector(
|
|
309
|
-
mainElement === null || mainElement === void 0 ? void 0 : mainElement.addEventListener(
|
|
310
|
-
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');
|
|
311
322
|
gridElements.forEach(function (gridElement) {
|
|
312
|
-
gridElement.addEventListener(
|
|
323
|
+
gridElement.addEventListener('scroll', handleScroll);
|
|
313
324
|
});
|
|
314
|
-
window.addEventListener(
|
|
325
|
+
window.addEventListener('resize', getDropPosition);
|
|
315
326
|
getDropPosition();
|
|
316
327
|
return function () {
|
|
317
|
-
window.removeEventListener(
|
|
318
|
-
var mainElement = document.querySelector(
|
|
319
|
-
mainElement === null || mainElement === void 0 ? void 0 : mainElement.removeEventListener(
|
|
320
|
-
window.addEventListener(
|
|
321
|
-
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');
|
|
322
333
|
gridElements.forEach(function (gridElement) {
|
|
323
|
-
gridElement.removeEventListener(
|
|
334
|
+
gridElement.removeEventListener('scroll', handleScroll);
|
|
324
335
|
});
|
|
325
336
|
};
|
|
326
337
|
}
|
|
327
338
|
}, [dropOpen]);
|
|
328
339
|
var handleClear = function () {
|
|
329
340
|
setDropOpen(false);
|
|
330
|
-
setInputValue(
|
|
331
|
-
onChange({ id: undefined, name:
|
|
341
|
+
setInputValue('');
|
|
342
|
+
onChange({ id: undefined, name: '', from: 3 });
|
|
332
343
|
onLabelClick();
|
|
333
344
|
};
|
|
334
345
|
(0, react_1.useEffect)(function () {
|
|
335
346
|
var _a;
|
|
336
|
-
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 : '');
|
|
337
348
|
}, [value === null || value === void 0 ? void 0 : value.name]);
|
|
338
349
|
(0, react_1.useEffect)(function () {
|
|
339
350
|
setSuggestions(data);
|
|
340
351
|
}, [data]);
|
|
341
352
|
var getErrors = function (err) {
|
|
342
353
|
var _a, _b, _c, _d;
|
|
343
|
-
var errMsg =
|
|
354
|
+
var errMsg = '';
|
|
344
355
|
if (err.message) {
|
|
345
356
|
errMsg = err === null || err === void 0 ? void 0 : err.message;
|
|
346
357
|
}
|
|
@@ -355,44 +366,44 @@ var ModernAutoComplete = function (_a) {
|
|
|
355
366
|
var generateClassName = function (type) {
|
|
356
367
|
var className = propsClassName;
|
|
357
368
|
switch (type) {
|
|
358
|
-
case
|
|
369
|
+
case 'input':
|
|
359
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
|
|
360
|
-
?
|
|
361
|
-
:
|
|
371
|
+
? 'placeholder-transparent'
|
|
372
|
+
: 'focus:placeholder-grey-secondary placeholder-input-label', " focus:placeholder-grey-secondary");
|
|
362
373
|
if (errors && errors[name]) {
|
|
363
374
|
className +=
|
|
364
|
-
|
|
375
|
+
' border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 focus:outline-[#FDA29B] input-outline';
|
|
365
376
|
}
|
|
366
377
|
else {
|
|
367
378
|
className +=
|
|
368
|
-
|
|
379
|
+
' text-grey-dark border-input-light focus:border-blue-navy focus:outline-none focus:ring-0';
|
|
369
380
|
}
|
|
370
381
|
className += getHeight();
|
|
371
382
|
break;
|
|
372
|
-
case
|
|
383
|
+
case 'label':
|
|
373
384
|
className += " flex modern-input-label-truncate peer-focus:modern-input-peer-focus-label-size \n ".concat(isDisabled
|
|
374
|
-
?
|
|
375
|
-
:
|
|
376
|
-
?
|
|
385
|
+
? 'cursor-pointer'
|
|
386
|
+
: 'cursor-text peer-focus:cursor-pointer', " ").concat(isDisabled && !checkIsEmptyField()
|
|
387
|
+
? 'disabled-input-label-bg'
|
|
377
388
|
: !isDisabled || !checkIsEmptyField()
|
|
378
|
-
?
|
|
379
|
-
:
|
|
380
|
-
?
|
|
381
|
-
:
|
|
382
|
-
?
|
|
383
|
-
:
|
|
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');
|
|
384
395
|
if (errors && errors[name]) {
|
|
385
|
-
className +=
|
|
396
|
+
className += ' text-error-light ';
|
|
386
397
|
}
|
|
387
398
|
else {
|
|
388
|
-
className +=
|
|
399
|
+
className += ' text-grey-dark peer-focus:text-blue-navy';
|
|
389
400
|
}
|
|
390
401
|
break;
|
|
391
|
-
case
|
|
392
|
-
className =
|
|
402
|
+
case 'message':
|
|
403
|
+
className = ' text-error-icon ';
|
|
393
404
|
break;
|
|
394
|
-
case
|
|
395
|
-
className +=
|
|
405
|
+
case 'adorement':
|
|
406
|
+
className += ' absolute right-0 adorement gap-1 flex items-center ';
|
|
396
407
|
break;
|
|
397
408
|
default:
|
|
398
409
|
break;
|
|
@@ -416,23 +427,23 @@ var ModernAutoComplete = function (_a) {
|
|
|
416
427
|
// const getPosition = () => {
|
|
417
428
|
// return 'bottom'
|
|
418
429
|
// }
|
|
419
|
-
var filteredData = inputValue !==
|
|
420
|
-
inputValue !==
|
|
421
|
-
type !==
|
|
430
|
+
var filteredData = inputValue !== '*' &&
|
|
431
|
+
inputValue !== '' &&
|
|
432
|
+
type !== 'custom_select' &&
|
|
422
433
|
!noLocalFilter
|
|
423
434
|
? suggestions === null || suggestions === void 0 ? void 0 : suggestions.filter(function (item) {
|
|
424
435
|
var _a, _b, _c, _d;
|
|
425
|
-
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 : '');
|
|
426
437
|
})
|
|
427
438
|
: suggestions;
|
|
428
439
|
var handleError = function (data) {
|
|
429
440
|
var _a;
|
|
430
|
-
if (getErrors(data[name]) ===
|
|
431
|
-
getErrors(data[name]) ===
|
|
441
|
+
if (getErrors(data[name]) === 'required' ||
|
|
442
|
+
getErrors(data[name]) === 'Required') {
|
|
432
443
|
return "".concat(label !== null && label !== void 0 ? label : labelTitle, " is ").concat(getErrors(data[name]));
|
|
433
444
|
}
|
|
434
445
|
else {
|
|
435
|
-
return (_a = getErrors(data[name])) !== null && _a !== void 0 ? _a :
|
|
446
|
+
return (_a = getErrors(data[name])) !== null && _a !== void 0 ? _a : '';
|
|
436
447
|
}
|
|
437
448
|
};
|
|
438
449
|
var getDropPosition = function () {
|
|
@@ -476,14 +487,14 @@ var ModernAutoComplete = function (_a) {
|
|
|
476
487
|
var handleKeyDown = function (e) {
|
|
477
488
|
if (!dropOpen)
|
|
478
489
|
return;
|
|
479
|
-
var nextIndex = e.key ===
|
|
490
|
+
var nextIndex = e.key === 'ArrowDown'
|
|
480
491
|
? (selectedIndex + 1) % filteredData.length
|
|
481
|
-
: e.key ===
|
|
492
|
+
: e.key === 'ArrowUp'
|
|
482
493
|
? (selectedIndex - 1 + filteredData.length) % filteredData.length
|
|
483
494
|
: selectedIndex;
|
|
484
495
|
switch (e.key) {
|
|
485
|
-
case
|
|
486
|
-
case
|
|
496
|
+
case 'ArrowDown':
|
|
497
|
+
case 'ArrowUp':
|
|
487
498
|
e.preventDefault();
|
|
488
499
|
// Update index first
|
|
489
500
|
setSelectedIndex(nextIndex);
|
|
@@ -505,11 +516,11 @@ var ModernAutoComplete = function (_a) {
|
|
|
505
516
|
}
|
|
506
517
|
});
|
|
507
518
|
break;
|
|
508
|
-
case
|
|
519
|
+
case 'Enter':
|
|
509
520
|
e.preventDefault();
|
|
510
521
|
handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
|
|
511
522
|
break;
|
|
512
|
-
case
|
|
523
|
+
case 'Escape':
|
|
513
524
|
e.preventDefault();
|
|
514
525
|
setDropOpen(false);
|
|
515
526
|
break;
|
|
@@ -518,9 +529,9 @@ var ModernAutoComplete = function (_a) {
|
|
|
518
529
|
}
|
|
519
530
|
};
|
|
520
531
|
if ((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && !isLoading) {
|
|
521
|
-
window.addEventListener(
|
|
532
|
+
window.addEventListener('keydown', handleKeyDown);
|
|
522
533
|
return function () {
|
|
523
|
-
window.removeEventListener(
|
|
534
|
+
window.removeEventListener('keydown', handleKeyDown);
|
|
524
535
|
};
|
|
525
536
|
}
|
|
526
537
|
}, [
|
|
@@ -533,8 +544,8 @@ var ModernAutoComplete = function (_a) {
|
|
|
533
544
|
]);
|
|
534
545
|
var setDropDown = function () {
|
|
535
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)
|
|
536
|
-
?
|
|
537
|
-
: "".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 &&
|
|
538
549
|
!isLoading &&
|
|
539
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" })))) })) }))));
|
|
540
551
|
};
|
|
@@ -556,7 +567,7 @@ var ModernAutoComplete = function (_a) {
|
|
|
556
567
|
}, [isHovered]);
|
|
557
568
|
(0, react_1.useEffect)(function () {
|
|
558
569
|
var shouldShowClose = (value === null || value === void 0 ? void 0 : value.name) &&
|
|
559
|
-
((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') &&
|
|
560
571
|
!disabled &&
|
|
561
572
|
!readOnly &&
|
|
562
573
|
isClose;
|
|
@@ -570,7 +581,7 @@ var ModernAutoComplete = function (_a) {
|
|
|
570
581
|
if (inputRef.current) {
|
|
571
582
|
var _a = inputRef.current, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, value_1 = _a.value;
|
|
572
583
|
// Check for overflow only when there's content
|
|
573
|
-
if (value_1.trim() !==
|
|
584
|
+
if (value_1.trim() !== '') {
|
|
574
585
|
setShowTooltip(scrollWidth > clientWidth + 2);
|
|
575
586
|
}
|
|
576
587
|
else {
|
|
@@ -579,12 +590,12 @@ var ModernAutoComplete = function (_a) {
|
|
|
579
590
|
}
|
|
580
591
|
};
|
|
581
592
|
if (inputRef.current) {
|
|
582
|
-
inputRef.current.addEventListener(
|
|
593
|
+
inputRef.current.addEventListener('input', checkOverflow);
|
|
583
594
|
checkOverflow(); // Initial check
|
|
584
595
|
}
|
|
585
596
|
return function () {
|
|
586
597
|
if (inputRef.current) {
|
|
587
|
-
inputRef.current.removeEventListener(
|
|
598
|
+
inputRef.current.removeEventListener('input', checkOverflow);
|
|
588
599
|
}
|
|
589
600
|
};
|
|
590
601
|
}, [inputValue]);
|
|
@@ -594,25 +605,31 @@ var ModernAutoComplete = function (_a) {
|
|
|
594
605
|
var handleMouseLeave = function () {
|
|
595
606
|
setTooltipIsHovered(false);
|
|
596
607
|
};
|
|
597
|
-
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
|
|
598
609
|
? {
|
|
599
610
|
borderRight: getBorderRight(),
|
|
600
611
|
borderTopRightRadius: 0,
|
|
601
612
|
borderBottomRightRadius: 0,
|
|
602
613
|
}
|
|
603
|
-
: {})), className: " ".concat(generateClassName(
|
|
614
|
+
: {})), className: " ".concat(generateClassName('input')), onChange: handleChange, placeholder: type === 'auto_complete'
|
|
604
615
|
? placeholder && isCustomPlaceholder
|
|
605
616
|
? placeholder
|
|
606
|
-
:
|
|
607
|
-
: placeholder !== null && placeholder !== void 0 ? placeholder :
|
|
608
|
-
if (type ===
|
|
609
|
-
|
|
610
|
-
|
|
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
|
+
}
|
|
611
627
|
}
|
|
612
628
|
else {
|
|
629
|
+
e.stopPropagation();
|
|
613
630
|
setDropOpen(!dropOpen);
|
|
614
631
|
}
|
|
615
|
-
} }), 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() }) }))] }))] }))] })));
|
|
616
633
|
};
|
|
617
634
|
exports.default = ModernAutoComplete;
|
|
618
635
|
//# sourceMappingURL=ReactAutoComplete.js.map
|