react-core-ts 2.0.5 → 2.0.7
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 +119 -101
- package/dist/ReactAutoComplete.js.map +1 -1
- package/package.json +1 -1
- package/src/ReactAutoComplete.tsx +145 -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,13 @@ 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
|
+
setDropOpen(true);
|
|
165
166
|
}
|
|
166
|
-
else if (type ===
|
|
167
|
-
var filteredData_2 = value && value !==
|
|
167
|
+
else if (type === 'custom_search_select' && data && (data === null || data === void 0 ? void 0 : data.length) > 0) {
|
|
168
|
+
var filteredData_2 = value && value !== '*'
|
|
168
169
|
? data.filter(function (item) {
|
|
169
170
|
return checkIncludes(item.name, value, item.param1, item.param2, item.param3);
|
|
170
171
|
})
|
|
@@ -200,10 +201,10 @@ var ModernAutoComplete = function (_a) {
|
|
|
200
201
|
var _a;
|
|
201
202
|
if (!isDisabled) {
|
|
202
203
|
(_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
203
|
-
if (autoFilter && inputValue ===
|
|
204
|
-
handleValChange(
|
|
204
|
+
if (autoFilter && inputValue === '') {
|
|
205
|
+
handleValChange('*');
|
|
205
206
|
}
|
|
206
|
-
else if ((type ===
|
|
207
|
+
else if ((type === 'custom_select' || type === 'custom_search_select') &&
|
|
207
208
|
data &&
|
|
208
209
|
(data === null || data === void 0 ? void 0 : data.length) > 0) {
|
|
209
210
|
handleDropData();
|
|
@@ -212,8 +213,15 @@ var ModernAutoComplete = function (_a) {
|
|
|
212
213
|
}
|
|
213
214
|
};
|
|
214
215
|
var handleClickOutside = function (event) {
|
|
216
|
+
var target = event.target;
|
|
217
|
+
var dropButton = document.getElementById('autocomplete-drop-icon');
|
|
218
|
+
var closeButton = document.getElementById('autocomplete-close-icon');
|
|
215
219
|
if (dropdownref.current &&
|
|
216
|
-
!dropdownref.current.contains(
|
|
220
|
+
!dropdownref.current.contains(target) &&
|
|
221
|
+
target !== dropButton &&
|
|
222
|
+
!(dropButton === null || dropButton === void 0 ? void 0 : dropButton.contains(target)) &&
|
|
223
|
+
target !== closeButton &&
|
|
224
|
+
!(closeButton === null || closeButton === void 0 ? void 0 : closeButton.contains(target))) {
|
|
217
225
|
setDropOpen(false);
|
|
218
226
|
}
|
|
219
227
|
};
|
|
@@ -236,8 +244,8 @@ var ModernAutoComplete = function (_a) {
|
|
|
236
244
|
case 1:
|
|
237
245
|
_a.trys.push([1, 3, , 4]);
|
|
238
246
|
setIsLoading(true);
|
|
239
|
-
handlePickSuggestions(
|
|
240
|
-
return [4 /*yield*/, (getData === null || getData === void 0 ? void 0 : getData(
|
|
247
|
+
handlePickSuggestions('*');
|
|
248
|
+
return [4 /*yield*/, (getData === null || getData === void 0 ? void 0 : getData('*'))];
|
|
241
249
|
case 2:
|
|
242
250
|
fetchedSuggestions = _a.sent();
|
|
243
251
|
fetchedSuggestions === null || fetchedSuggestions === void 0 ? void 0 : fetchedSuggestions.forEach(function (element) {
|
|
@@ -254,9 +262,9 @@ var ModernAutoComplete = function (_a) {
|
|
|
254
262
|
});
|
|
255
263
|
}); };
|
|
256
264
|
(0, react_1.useEffect)(function () {
|
|
257
|
-
document.addEventListener(
|
|
265
|
+
document.addEventListener('click', handleClickOutside);
|
|
258
266
|
return function () {
|
|
259
|
-
document.removeEventListener(
|
|
267
|
+
document.removeEventListener('click', handleClickOutside);
|
|
260
268
|
};
|
|
261
269
|
}, []);
|
|
262
270
|
(0, react_1.useEffect)(function () {
|
|
@@ -266,10 +274,10 @@ var ModernAutoComplete = function (_a) {
|
|
|
266
274
|
}, [autoFocus]);
|
|
267
275
|
var onInputFocus = function () {
|
|
268
276
|
if (!isDisabled) {
|
|
269
|
-
if (autoFilter && inputValue ===
|
|
270
|
-
handleValChange(
|
|
277
|
+
if (autoFilter && inputValue === '') {
|
|
278
|
+
handleValChange('*');
|
|
271
279
|
}
|
|
272
|
-
else if ((type ===
|
|
280
|
+
else if ((type === 'custom_select' || type === 'custom_search_select') &&
|
|
273
281
|
data &&
|
|
274
282
|
(data === null || data === void 0 ? void 0 : data.length) > 0) {
|
|
275
283
|
handleDropData();
|
|
@@ -282,20 +290,24 @@ var ModernAutoComplete = function (_a) {
|
|
|
282
290
|
}, [disabled]);
|
|
283
291
|
var handleSuggestionClick = function (suggestion, index) {
|
|
284
292
|
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 !==
|
|
293
|
+
if (type !== 'custom_select')
|
|
286
294
|
setInputValue(suggestion.name);
|
|
287
295
|
setDropOpen(false);
|
|
288
296
|
setSelectedIndex(index);
|
|
289
297
|
};
|
|
290
298
|
var handleOpen = function (e) {
|
|
299
|
+
if (e) {
|
|
300
|
+
e.preventDefault();
|
|
301
|
+
e.stopPropagation();
|
|
302
|
+
}
|
|
291
303
|
if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0) {
|
|
292
304
|
handleDropData();
|
|
293
305
|
return;
|
|
294
306
|
}
|
|
295
307
|
if (!isLoading) {
|
|
296
308
|
setDropOpen(!dropOpen);
|
|
297
|
-
if (type !==
|
|
298
|
-
setInputValue(
|
|
309
|
+
if (type !== 'custom_select')
|
|
310
|
+
setInputValue('');
|
|
299
311
|
}
|
|
300
312
|
};
|
|
301
313
|
var handleScroll = function () {
|
|
@@ -304,43 +316,43 @@ var ModernAutoComplete = function (_a) {
|
|
|
304
316
|
(0, react_1.useEffect)(function () {
|
|
305
317
|
if (!insideOpen) {
|
|
306
318
|
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(
|
|
319
|
+
window.addEventListener('scroll', handleScroll);
|
|
320
|
+
var mainElement = document.querySelector('main');
|
|
321
|
+
mainElement === null || mainElement === void 0 ? void 0 : mainElement.addEventListener('scroll', handleScroll);
|
|
322
|
+
var gridElements = document.querySelectorAll('.k-grid-content, .overflow-auto, .overflow-y-auto, .overflow-x-auto');
|
|
311
323
|
gridElements.forEach(function (gridElement) {
|
|
312
|
-
gridElement.addEventListener(
|
|
324
|
+
gridElement.addEventListener('scroll', handleScroll);
|
|
313
325
|
});
|
|
314
|
-
window.addEventListener(
|
|
326
|
+
window.addEventListener('resize', getDropPosition);
|
|
315
327
|
getDropPosition();
|
|
316
328
|
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(
|
|
329
|
+
window.removeEventListener('scroll', handleScroll);
|
|
330
|
+
var mainElement = document.querySelector('main');
|
|
331
|
+
mainElement === null || mainElement === void 0 ? void 0 : mainElement.removeEventListener('scroll', handleScroll);
|
|
332
|
+
window.addEventListener('resize', getDropPosition);
|
|
333
|
+
var gridElements = document.querySelectorAll('.k-grid-content');
|
|
322
334
|
gridElements.forEach(function (gridElement) {
|
|
323
|
-
gridElement.removeEventListener(
|
|
335
|
+
gridElement.removeEventListener('scroll', handleScroll);
|
|
324
336
|
});
|
|
325
337
|
};
|
|
326
338
|
}
|
|
327
339
|
}, [dropOpen]);
|
|
328
340
|
var handleClear = function () {
|
|
329
341
|
setDropOpen(false);
|
|
330
|
-
setInputValue(
|
|
331
|
-
onChange({ id: undefined, name:
|
|
342
|
+
setInputValue('');
|
|
343
|
+
onChange({ id: undefined, name: '', from: 3 });
|
|
332
344
|
onLabelClick();
|
|
333
345
|
};
|
|
334
346
|
(0, react_1.useEffect)(function () {
|
|
335
347
|
var _a;
|
|
336
|
-
setInputValue((_a = value === null || value === void 0 ? void 0 : value.name) !== null && _a !== void 0 ? _a :
|
|
348
|
+
setInputValue((_a = value === null || value === void 0 ? void 0 : value.name) !== null && _a !== void 0 ? _a : '');
|
|
337
349
|
}, [value === null || value === void 0 ? void 0 : value.name]);
|
|
338
350
|
(0, react_1.useEffect)(function () {
|
|
339
351
|
setSuggestions(data);
|
|
340
352
|
}, [data]);
|
|
341
353
|
var getErrors = function (err) {
|
|
342
354
|
var _a, _b, _c, _d;
|
|
343
|
-
var errMsg =
|
|
355
|
+
var errMsg = '';
|
|
344
356
|
if (err.message) {
|
|
345
357
|
errMsg = err === null || err === void 0 ? void 0 : err.message;
|
|
346
358
|
}
|
|
@@ -355,44 +367,44 @@ var ModernAutoComplete = function (_a) {
|
|
|
355
367
|
var generateClassName = function (type) {
|
|
356
368
|
var className = propsClassName;
|
|
357
369
|
switch (type) {
|
|
358
|
-
case
|
|
370
|
+
case 'input':
|
|
359
371
|
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
|
-
:
|
|
372
|
+
? 'placeholder-transparent'
|
|
373
|
+
: 'focus:placeholder-grey-secondary placeholder-input-label', " focus:placeholder-grey-secondary");
|
|
362
374
|
if (errors && errors[name]) {
|
|
363
375
|
className +=
|
|
364
|
-
|
|
376
|
+
' border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 focus:outline-[#FDA29B] input-outline';
|
|
365
377
|
}
|
|
366
378
|
else {
|
|
367
379
|
className +=
|
|
368
|
-
|
|
380
|
+
' text-grey-dark border-input-light focus:border-blue-navy focus:outline-none focus:ring-0';
|
|
369
381
|
}
|
|
370
382
|
className += getHeight();
|
|
371
383
|
break;
|
|
372
|
-
case
|
|
384
|
+
case 'label':
|
|
373
385
|
className += " flex modern-input-label-truncate peer-focus:modern-input-peer-focus-label-size \n ".concat(isDisabled
|
|
374
|
-
?
|
|
375
|
-
:
|
|
376
|
-
?
|
|
386
|
+
? 'cursor-pointer'
|
|
387
|
+
: 'cursor-text peer-focus:cursor-pointer', " ").concat(isDisabled && !checkIsEmptyField()
|
|
388
|
+
? 'disabled-input-label-bg'
|
|
377
389
|
: !isDisabled || !checkIsEmptyField()
|
|
378
|
-
?
|
|
379
|
-
:
|
|
380
|
-
?
|
|
381
|
-
:
|
|
382
|
-
?
|
|
383
|
-
:
|
|
390
|
+
? 'active-input-label-bg'
|
|
391
|
+
: '', " 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
|
|
392
|
+
? 'cursor-pointer'
|
|
393
|
+
: 'cursor-text peer-focus:cursor-pointer', "\n ").concat(checkIsEmptyField()
|
|
394
|
+
? 'modern-input-label-size'
|
|
395
|
+
: 'modern-input-peer-focus-label-size');
|
|
384
396
|
if (errors && errors[name]) {
|
|
385
|
-
className +=
|
|
397
|
+
className += ' text-error-light ';
|
|
386
398
|
}
|
|
387
399
|
else {
|
|
388
|
-
className +=
|
|
400
|
+
className += ' text-grey-dark peer-focus:text-blue-navy';
|
|
389
401
|
}
|
|
390
402
|
break;
|
|
391
|
-
case
|
|
392
|
-
className =
|
|
403
|
+
case 'message':
|
|
404
|
+
className = ' text-error-icon ';
|
|
393
405
|
break;
|
|
394
|
-
case
|
|
395
|
-
className +=
|
|
406
|
+
case 'adorement':
|
|
407
|
+
className += ' absolute right-0 adorement gap-1 flex items-center ';
|
|
396
408
|
break;
|
|
397
409
|
default:
|
|
398
410
|
break;
|
|
@@ -416,23 +428,23 @@ var ModernAutoComplete = function (_a) {
|
|
|
416
428
|
// const getPosition = () => {
|
|
417
429
|
// return 'bottom'
|
|
418
430
|
// }
|
|
419
|
-
var filteredData = inputValue !==
|
|
420
|
-
inputValue !==
|
|
421
|
-
type !==
|
|
431
|
+
var filteredData = inputValue !== '*' &&
|
|
432
|
+
inputValue !== '' &&
|
|
433
|
+
type !== 'custom_select' &&
|
|
422
434
|
!noLocalFilter
|
|
423
435
|
? suggestions === null || suggestions === void 0 ? void 0 : suggestions.filter(function (item) {
|
|
424
436
|
var _a, _b, _c, _d;
|
|
425
|
-
return checkIncludes(item.name, inputValue, (_a = item.param1) !== null && _a !== void 0 ? _a :
|
|
437
|
+
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
438
|
})
|
|
427
439
|
: suggestions;
|
|
428
440
|
var handleError = function (data) {
|
|
429
441
|
var _a;
|
|
430
|
-
if (getErrors(data[name]) ===
|
|
431
|
-
getErrors(data[name]) ===
|
|
442
|
+
if (getErrors(data[name]) === 'required' ||
|
|
443
|
+
getErrors(data[name]) === 'Required') {
|
|
432
444
|
return "".concat(label !== null && label !== void 0 ? label : labelTitle, " is ").concat(getErrors(data[name]));
|
|
433
445
|
}
|
|
434
446
|
else {
|
|
435
|
-
return (_a = getErrors(data[name])) !== null && _a !== void 0 ? _a :
|
|
447
|
+
return (_a = getErrors(data[name])) !== null && _a !== void 0 ? _a : '';
|
|
436
448
|
}
|
|
437
449
|
};
|
|
438
450
|
var getDropPosition = function () {
|
|
@@ -476,14 +488,14 @@ var ModernAutoComplete = function (_a) {
|
|
|
476
488
|
var handleKeyDown = function (e) {
|
|
477
489
|
if (!dropOpen)
|
|
478
490
|
return;
|
|
479
|
-
var nextIndex = e.key ===
|
|
491
|
+
var nextIndex = e.key === 'ArrowDown'
|
|
480
492
|
? (selectedIndex + 1) % filteredData.length
|
|
481
|
-
: e.key ===
|
|
493
|
+
: e.key === 'ArrowUp'
|
|
482
494
|
? (selectedIndex - 1 + filteredData.length) % filteredData.length
|
|
483
495
|
: selectedIndex;
|
|
484
496
|
switch (e.key) {
|
|
485
|
-
case
|
|
486
|
-
case
|
|
497
|
+
case 'ArrowDown':
|
|
498
|
+
case 'ArrowUp':
|
|
487
499
|
e.preventDefault();
|
|
488
500
|
// Update index first
|
|
489
501
|
setSelectedIndex(nextIndex);
|
|
@@ -505,11 +517,11 @@ var ModernAutoComplete = function (_a) {
|
|
|
505
517
|
}
|
|
506
518
|
});
|
|
507
519
|
break;
|
|
508
|
-
case
|
|
520
|
+
case 'Enter':
|
|
509
521
|
e.preventDefault();
|
|
510
522
|
handleSuggestionClick(filteredData[selectedIndex], selectedIndex);
|
|
511
523
|
break;
|
|
512
|
-
case
|
|
524
|
+
case 'Escape':
|
|
513
525
|
e.preventDefault();
|
|
514
526
|
setDropOpen(false);
|
|
515
527
|
break;
|
|
@@ -518,9 +530,9 @@ var ModernAutoComplete = function (_a) {
|
|
|
518
530
|
}
|
|
519
531
|
};
|
|
520
532
|
if ((filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) > 0 && !isLoading) {
|
|
521
|
-
window.addEventListener(
|
|
533
|
+
window.addEventListener('keydown', handleKeyDown);
|
|
522
534
|
return function () {
|
|
523
|
-
window.removeEventListener(
|
|
535
|
+
window.removeEventListener('keydown', handleKeyDown);
|
|
524
536
|
};
|
|
525
537
|
}
|
|
526
538
|
}, [
|
|
@@ -533,8 +545,8 @@ var ModernAutoComplete = function (_a) {
|
|
|
533
545
|
]);
|
|
534
546
|
var setDropDown = function () {
|
|
535
547
|
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 ?
|
|
548
|
+
? 'bg-blue-navy text-white'
|
|
549
|
+
: "".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
550
|
!isLoading &&
|
|
539
551
|
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
552
|
};
|
|
@@ -556,7 +568,7 @@ var ModernAutoComplete = function (_a) {
|
|
|
556
568
|
}, [isHovered]);
|
|
557
569
|
(0, react_1.useEffect)(function () {
|
|
558
570
|
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) ===
|
|
571
|
+
((value === null || value === void 0 ? void 0 : value.id) || String(value === null || value === void 0 ? void 0 : value.id) === '0') &&
|
|
560
572
|
!disabled &&
|
|
561
573
|
!readOnly &&
|
|
562
574
|
isClose;
|
|
@@ -570,7 +582,7 @@ var ModernAutoComplete = function (_a) {
|
|
|
570
582
|
if (inputRef.current) {
|
|
571
583
|
var _a = inputRef.current, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, value_1 = _a.value;
|
|
572
584
|
// Check for overflow only when there's content
|
|
573
|
-
if (value_1.trim() !==
|
|
585
|
+
if (value_1.trim() !== '') {
|
|
574
586
|
setShowTooltip(scrollWidth > clientWidth + 2);
|
|
575
587
|
}
|
|
576
588
|
else {
|
|
@@ -579,12 +591,12 @@ var ModernAutoComplete = function (_a) {
|
|
|
579
591
|
}
|
|
580
592
|
};
|
|
581
593
|
if (inputRef.current) {
|
|
582
|
-
inputRef.current.addEventListener(
|
|
594
|
+
inputRef.current.addEventListener('input', checkOverflow);
|
|
583
595
|
checkOverflow(); // Initial check
|
|
584
596
|
}
|
|
585
597
|
return function () {
|
|
586
598
|
if (inputRef.current) {
|
|
587
|
-
inputRef.current.removeEventListener(
|
|
599
|
+
inputRef.current.removeEventListener('input', checkOverflow);
|
|
588
600
|
}
|
|
589
601
|
};
|
|
590
602
|
}, [inputValue]);
|
|
@@ -594,25 +606,31 @@ var ModernAutoComplete = function (_a) {
|
|
|
594
606
|
var handleMouseLeave = function () {
|
|
595
607
|
setTooltipIsHovered(false);
|
|
596
608
|
};
|
|
597
|
-
return ((0, jsx_runtime_1.jsxs)("div", __assign({ id: id ? "autocomplete-container-".concat(id) : "autocomplete-container-".concat(name), className: " flex-grow ".concat(fullWidth ?
|
|
609
|
+
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
610
|
? {
|
|
599
611
|
borderRight: getBorderRight(),
|
|
600
612
|
borderTopRightRadius: 0,
|
|
601
613
|
borderBottomRightRadius: 0,
|
|
602
614
|
}
|
|
603
|
-
: {})), className: " ".concat(generateClassName(
|
|
615
|
+
: {})), className: " ".concat(generateClassName('input')), onChange: handleChange, placeholder: type === 'auto_complete'
|
|
604
616
|
? placeholder && isCustomPlaceholder
|
|
605
617
|
? placeholder
|
|
606
|
-
:
|
|
607
|
-
: placeholder !== null && placeholder !== void 0 ? placeholder :
|
|
608
|
-
if (type ===
|
|
609
|
-
|
|
610
|
-
|
|
618
|
+
: 'Type to search'
|
|
619
|
+
: placeholder !== null && placeholder !== void 0 ? placeholder : '--Select--', onFocus: onInputFocus, onClick: function (e) {
|
|
620
|
+
if (type === 'custom_select') {
|
|
621
|
+
e.stopPropagation();
|
|
622
|
+
if (!suggestions || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) === 0) {
|
|
623
|
+
handleDropData();
|
|
624
|
+
}
|
|
625
|
+
if (!isLoading) {
|
|
626
|
+
setDropOpen(!dropOpen);
|
|
627
|
+
}
|
|
611
628
|
}
|
|
612
629
|
else {
|
|
630
|
+
e.stopPropagation();
|
|
613
631
|
setDropOpen(!dropOpen);
|
|
614
632
|
}
|
|
615
|
-
} }), isModern && ((0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: id, onClick: function () { return onLabelClick(); }, className: generateClassName(
|
|
633
|
+
} }), 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
634
|
};
|
|
617
635
|
exports.default = ModernAutoComplete;
|
|
618
636
|
//# sourceMappingURL=ReactAutoComplete.js.map
|