@sydsoft/base 1.34.0 → 1.35.0
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.
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { __assign, __rest, __spreadArray } from "tslib";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import { Icon } from
|
|
7
|
-
import {
|
|
8
|
-
import styles from
|
|
3
|
+
import React, { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
4
|
+
import { Input } from './Input';
|
|
5
|
+
import { isDev } from '../_lib/baseFunctions';
|
|
6
|
+
import { Icon } from '../icon';
|
|
7
|
+
import { Button } from './Button';
|
|
8
|
+
import styles from './styles/SearchableInput.module.css';
|
|
9
9
|
var Component = function (_a, forwardedRef) {
|
|
10
|
-
var _b = _a.autoCompleteList, autoCompleteList = _b === void 0 ? [] : _b, _c = _a.isDataFromApi, isDataFromApi = _c === void 0 ? false : _c, onText = _a.onText, onSelect = _a.onSelect, onLoad = _a.onLoad, onChange = _a.onChange, _d = _a.newCreate, newCreate = _d === void 0 ? false : _d, name = _a.name, value = _a.value, itemComponent = _a.itemComponent, inputRef = _a.inputRef, _e = _a.valueKey, valueKey = _e === void 0 ?
|
|
10
|
+
var _b = _a.autoCompleteList, autoCompleteList = _b === void 0 ? [] : _b, _c = _a.isDataFromApi, isDataFromApi = _c === void 0 ? false : _c, onText = _a.onText, onSelect = _a.onSelect, onLoad = _a.onLoad, onChange = _a.onChange, _d = _a.newCreate, newCreate = _d === void 0 ? false : _d, name = _a.name, value = _a.value, itemComponent = _a.itemComponent, inputRef = _a.inputRef, _e = _a.valueKey, valueKey = _e === void 0 ? 'value' : _e, _f = _a.labelKey, labelKey = _f === void 0 ? 'label' : _f, placeholder = _a.placeholder, endAdornment = _a.endAdornment, refModal = _a.refModal, style = _a.style, disabled = _a.disabled, parentInputValue = _a.parentInputValue, _g = _a.listPositionRelative, listPositionRelative = _g === void 0 ? false : _g, other = __rest(_a, ["autoCompleteList", "isDataFromApi", "onText", "onSelect", "onLoad", "onChange", "newCreate", "name", "value", "itemComponent", "inputRef", "valueKey", "labelKey", "placeholder", "endAdornment", "refModal", "style", "disabled", "parentInputValue", "listPositionRelative"]);
|
|
11
11
|
var refMain = useRef(null);
|
|
12
12
|
var refInput = useRef(null);
|
|
13
13
|
var refComponentInput = useRef(null);
|
|
14
14
|
var refList = useRef(null);
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
18
|
-
var
|
|
19
|
-
var
|
|
20
|
-
var
|
|
15
|
+
var _h = useState([]), data = _h[0], setData = _h[1];
|
|
16
|
+
var _j = useState(''), text = _j[0], setText = _j[1]; //Inputta görünen
|
|
17
|
+
var _k = useState(''), filter = _k[0], setFilter = _k[1]; // Filtrelemeye tabi tutulan
|
|
18
|
+
var _l = useState(false), open = _l[0], setOpen = _l[1];
|
|
19
|
+
var _m = useState(isDataFromApi), loading = _m[0], setLoading = _m[1];
|
|
20
|
+
var _o = useState({ created: false }), newItemCreate = _o[0], setNewItemCreate = _o[1];
|
|
21
21
|
useImperativeHandle(forwardedRef, function () { return ({
|
|
22
22
|
open: function () { return setOpen(true); },
|
|
23
23
|
close: function () { return setOpen(false); },
|
|
@@ -37,31 +37,36 @@ var Component = function (_a, forwardedRef) {
|
|
|
37
37
|
if (openList === void 0) { openList = false; }
|
|
38
38
|
if (focusInput === void 0) { focusInput = false; }
|
|
39
39
|
return clear(openList, focusInput);
|
|
40
|
-
}
|
|
40
|
+
}
|
|
41
41
|
}); });
|
|
42
|
+
var handleUpdatePosition = function () {
|
|
43
|
+
if (open && !listPositionRelative && refMain) {
|
|
44
|
+
setFixedPosition(refMain);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
42
47
|
useEffect(function () {
|
|
43
48
|
if (onLoad)
|
|
44
|
-
onLoad(value !== null && value !== void 0 ? value :
|
|
49
|
+
onLoad(value !== null && value !== void 0 ? value : '');
|
|
45
50
|
}, []);
|
|
46
51
|
useEffect(function () {
|
|
47
52
|
if (inputRef)
|
|
48
53
|
inputRef.current = refInput.current;
|
|
49
54
|
}, [refInput.current]);
|
|
50
55
|
useEffect(function () {
|
|
51
|
-
if (parentInputValue)
|
|
56
|
+
if (parentInputValue !== undefined && parentInputValue !== null) {
|
|
52
57
|
clear(false);
|
|
58
|
+
isDev && console.log(name, 'parentInputValueDeğişti =>', parentInputValue);
|
|
59
|
+
}
|
|
53
60
|
}, [parentInputValue]);
|
|
54
|
-
// autoCompleteList prop'u değiştiğinde data state'ini güncelle
|
|
55
61
|
useEffect(function () {
|
|
56
|
-
if (autoCompleteList && Array.isArray(autoCompleteList)) {
|
|
62
|
+
if (autoCompleteList && Array.isArray(autoCompleteList) && autoCompleteList.length > 0) {
|
|
57
63
|
setData(autoCompleteList);
|
|
58
|
-
isDev && console.log(
|
|
64
|
+
isDev && console.log('autoCompleteList =>', name, autoCompleteList);
|
|
59
65
|
}
|
|
60
66
|
}, [autoCompleteList]);
|
|
61
67
|
useEffect(function () {
|
|
62
68
|
if (!isDataFromApi && data.length > 0)
|
|
63
69
|
checkByValue(value, open);
|
|
64
|
-
// if (data.length > 0) checkByValue(value, open);
|
|
65
70
|
}, [data]);
|
|
66
71
|
useEffect(function () {
|
|
67
72
|
if (data.length > 0) {
|
|
@@ -73,7 +78,6 @@ var Component = function (_a, forwardedRef) {
|
|
|
73
78
|
clear(false);
|
|
74
79
|
}
|
|
75
80
|
}
|
|
76
|
-
isDev && console.log("useEffect-value =>", name, value);
|
|
77
81
|
}, [value]);
|
|
78
82
|
useEffect(function () {
|
|
79
83
|
var checkHideBackDrop = function (e) {
|
|
@@ -82,18 +86,18 @@ var Component = function (_a, forwardedRef) {
|
|
|
82
86
|
}
|
|
83
87
|
};
|
|
84
88
|
var checkESC = function (e) {
|
|
85
|
-
if (e.keyCode === 27 || e.key ===
|
|
89
|
+
if (e.keyCode === 27 || e.key === 'Escape' || e.code === 'Escape')
|
|
86
90
|
checkByInput();
|
|
87
91
|
};
|
|
88
|
-
window.addEventListener(
|
|
92
|
+
window.addEventListener('mousedown', checkHideBackDrop);
|
|
89
93
|
if (refMain.current)
|
|
90
|
-
refMain.current.addEventListener(
|
|
94
|
+
refMain.current.addEventListener('keydown', checkESC);
|
|
91
95
|
if (refModal && refModal.current) {
|
|
92
96
|
if (open) {
|
|
93
|
-
refModal.current.style.overflow =
|
|
97
|
+
refModal.current.style.overflow = 'visible';
|
|
94
98
|
}
|
|
95
99
|
else {
|
|
96
|
-
refModal.current.style.overflow =
|
|
100
|
+
refModal.current.style.overflow = 'auto overlay';
|
|
97
101
|
}
|
|
98
102
|
}
|
|
99
103
|
if (open) {
|
|
@@ -101,27 +105,34 @@ var Component = function (_a, forwardedRef) {
|
|
|
101
105
|
if (refModal && refModal.current && refMain && refMain.current) {
|
|
102
106
|
refModal.current.scrollTop = refMain.current.offsetTop + 300;
|
|
103
107
|
}
|
|
108
|
+
if (!listPositionRelative) {
|
|
109
|
+
window.addEventListener('scroll', handleUpdatePosition, true);
|
|
110
|
+
window.addEventListener('resize', handleUpdatePosition);
|
|
111
|
+
}
|
|
104
112
|
}
|
|
105
113
|
return function () {
|
|
106
|
-
window.removeEventListener(
|
|
114
|
+
window.removeEventListener('mousedown', checkHideBackDrop);
|
|
107
115
|
if (refMain.current)
|
|
108
|
-
refMain.current.removeEventListener(
|
|
116
|
+
refMain.current.removeEventListener('keydown', checkESC);
|
|
117
|
+
window.removeEventListener('scroll', handleUpdatePosition, true);
|
|
118
|
+
window.removeEventListener('resize', handleUpdatePosition);
|
|
109
119
|
};
|
|
110
120
|
}, [open]);
|
|
121
|
+
useLayoutEffect(function () { return handleUpdatePosition(); }, [open]);
|
|
111
122
|
var cevirTumuKucuk = function (text) {
|
|
112
|
-
if (text === void 0) { text =
|
|
113
|
-
return text.toString().toLocaleLowerCase(
|
|
123
|
+
if (text === void 0) { text = ''; }
|
|
124
|
+
return text.toString().toLocaleLowerCase('tr-TR');
|
|
114
125
|
};
|
|
115
126
|
var convertForSearch = useCallback(function (value) {
|
|
116
127
|
var data = cevirTumuKucuk(value);
|
|
117
|
-
data = data.replace(/ö/g,
|
|
118
|
-
data = data.replace(/ç/g,
|
|
119
|
-
data = data.replace(/ş/g,
|
|
120
|
-
data = data.replace(/ı/g,
|
|
121
|
-
data = data.replace(/ğ/g,
|
|
122
|
-
data = data.replace(/ü/g,
|
|
123
|
-
data = data.replace(/[^a-z\d]/g,
|
|
124
|
-
data = data.replace(/^\s+|\s+$/g,
|
|
128
|
+
data = data.replace(/ö/g, 'o');
|
|
129
|
+
data = data.replace(/ç/g, 'c');
|
|
130
|
+
data = data.replace(/ş/g, 's');
|
|
131
|
+
data = data.replace(/ı/g, 'i');
|
|
132
|
+
data = data.replace(/ğ/g, 'g');
|
|
133
|
+
data = data.replace(/ü/g, 'u');
|
|
134
|
+
data = data.replace(/[^a-z\d]/g, ''); // %_- are allowed
|
|
135
|
+
data = data.replace(/^\s+|\s+$/g, '');
|
|
125
136
|
return data;
|
|
126
137
|
}, [cevirTumuKucuk]);
|
|
127
138
|
var filteredData = useMemo(function () {
|
|
@@ -149,18 +160,18 @@ var Component = function (_a, forwardedRef) {
|
|
|
149
160
|
}, [data, filter, newCreate, text, valueKey, labelKey]);
|
|
150
161
|
var setValue = useCallback(function (result, openList) {
|
|
151
162
|
setOpen(openList);
|
|
152
|
-
var newValue = result && result[valueKey] ? result[valueKey] :
|
|
163
|
+
var newValue = result && result[valueKey] ? result[valueKey] : '';
|
|
153
164
|
if (result) {
|
|
154
|
-
var newLabel = result && result[labelKey] ? result[labelKey] :
|
|
165
|
+
var newLabel = result && result[labelKey] ? result[labelKey] : '';
|
|
155
166
|
setText(newLabel);
|
|
156
167
|
}
|
|
157
|
-
setFilter(
|
|
168
|
+
setFilter('');
|
|
158
169
|
if (onChange && newValue != value) {
|
|
159
170
|
onChange({
|
|
160
171
|
target: {
|
|
161
172
|
name: name,
|
|
162
|
-
value: newValue
|
|
163
|
-
}
|
|
173
|
+
value: newValue
|
|
174
|
+
}
|
|
164
175
|
});
|
|
165
176
|
}
|
|
166
177
|
if (onSelect)
|
|
@@ -192,33 +203,33 @@ var Component = function (_a, forwardedRef) {
|
|
|
192
203
|
}
|
|
193
204
|
setValue(findByLabel, false);
|
|
194
205
|
if (!findByLabel)
|
|
195
|
-
setText(
|
|
206
|
+
setText('');
|
|
196
207
|
if (isDataFromApi && !findByLabel && data.length === 0) {
|
|
197
208
|
if (onText)
|
|
198
|
-
onText(
|
|
209
|
+
onText('');
|
|
199
210
|
}
|
|
200
211
|
}, [data, labelKey, value, valueKey, isDataFromApi, onText, setValue]);
|
|
201
212
|
var clear = useCallback(function (openList, focusInput) {
|
|
202
213
|
var _a;
|
|
203
214
|
if (openList === void 0) { openList = true; }
|
|
204
215
|
if (focusInput === void 0) { focusInput = false; }
|
|
205
|
-
setFilter(
|
|
206
|
-
setText(
|
|
216
|
+
setFilter('');
|
|
217
|
+
setText('');
|
|
207
218
|
setValue(false, openList);
|
|
208
219
|
if (onText)
|
|
209
|
-
onText(
|
|
220
|
+
onText('');
|
|
210
221
|
if (focusInput)
|
|
211
222
|
(_a = refInput === null || refInput === void 0 ? void 0 : refInput.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
212
223
|
}, [setValue, onText]);
|
|
213
224
|
function setScrollPosition() {
|
|
214
225
|
if (refList.current) {
|
|
215
226
|
var position = 0;
|
|
216
|
-
var text_1 = refList.current.querySelector(
|
|
227
|
+
var text_1 = refList.current.querySelector('li.item.selected');
|
|
217
228
|
if (text_1) {
|
|
218
229
|
position = text_1.offsetTop - 35;
|
|
219
230
|
}
|
|
220
|
-
else if (refList.current.querySelector(
|
|
221
|
-
position = refList.current.querySelector(
|
|
231
|
+
else if (refList.current.querySelector('li.item.active')) {
|
|
232
|
+
position = refList.current.querySelector('li.item.active').offsetTop - 35;
|
|
222
233
|
}
|
|
223
234
|
refList.current.scrollTop = position;
|
|
224
235
|
}
|
|
@@ -227,35 +238,35 @@ var Component = function (_a, forwardedRef) {
|
|
|
227
238
|
if (!open)
|
|
228
239
|
return null;
|
|
229
240
|
function selectEnter() {
|
|
230
|
-
var text = refList.current.querySelector(
|
|
241
|
+
var text = refList.current.querySelector('li.item.selected');
|
|
231
242
|
if (text) {
|
|
232
243
|
checkByValue(text.dataset.value);
|
|
233
244
|
}
|
|
234
|
-
else if (refList.current.querySelectorAll(
|
|
235
|
-
checkByValue(refList.current.querySelectorAll(
|
|
245
|
+
else if (refList.current.querySelectorAll('li.item').length > 0) {
|
|
246
|
+
checkByValue(refList.current.querySelectorAll('li.item')[0].dataset.value);
|
|
236
247
|
}
|
|
237
248
|
else {
|
|
238
249
|
clear(true, true);
|
|
239
250
|
}
|
|
240
251
|
}
|
|
241
252
|
function selectFirst() {
|
|
242
|
-
var showList = refList.current.querySelectorAll(
|
|
253
|
+
var showList = refList.current.querySelectorAll('li.item');
|
|
243
254
|
if (showList.length > 0) {
|
|
244
|
-
showList[0].classList.add(
|
|
255
|
+
showList[0].classList.add('selected');
|
|
245
256
|
}
|
|
246
257
|
}
|
|
247
258
|
function selectLast() {
|
|
248
|
-
var showList = refList.current.querySelectorAll(
|
|
259
|
+
var showList = refList.current.querySelectorAll('li.item');
|
|
249
260
|
if (showList.length > 0) {
|
|
250
|
-
showList[showList.length - 1].classList.add(
|
|
261
|
+
showList[showList.length - 1].classList.add('selected');
|
|
251
262
|
}
|
|
252
263
|
}
|
|
253
264
|
function selectNext(element) {
|
|
254
|
-
element.classList.remove(
|
|
265
|
+
element.classList.remove('selected');
|
|
255
266
|
var next = element.nextElementSibling;
|
|
256
267
|
if (next && next.nodeType !== -1) {
|
|
257
|
-
if (next.classList.contains(
|
|
258
|
-
next.classList.add(
|
|
268
|
+
if (next.classList.contains('item')) {
|
|
269
|
+
next.classList.add('selected');
|
|
259
270
|
}
|
|
260
271
|
else {
|
|
261
272
|
selectNext(next);
|
|
@@ -266,11 +277,11 @@ var Component = function (_a, forwardedRef) {
|
|
|
266
277
|
}
|
|
267
278
|
}
|
|
268
279
|
function selectPrev(element) {
|
|
269
|
-
element.classList.remove(
|
|
280
|
+
element.classList.remove('selected');
|
|
270
281
|
var next = element.previousElementSibling;
|
|
271
282
|
if (next && next.nodeType !== -1) {
|
|
272
|
-
if (next.classList.contains(
|
|
273
|
-
next.classList.add(
|
|
283
|
+
if (next.classList.contains('item')) {
|
|
284
|
+
next.classList.add('selected');
|
|
274
285
|
}
|
|
275
286
|
else {
|
|
276
287
|
selectPrev(next);
|
|
@@ -280,7 +291,7 @@ var Component = function (_a, forwardedRef) {
|
|
|
280
291
|
selectLast();
|
|
281
292
|
}
|
|
282
293
|
}
|
|
283
|
-
var selected = refList.current.querySelector(
|
|
294
|
+
var selected = refList.current.querySelector('li.item.selected');
|
|
284
295
|
if (e.which == 40) {
|
|
285
296
|
if (selected) {
|
|
286
297
|
selectNext(selected);
|
|
@@ -311,10 +322,40 @@ var Component = function (_a, forwardedRef) {
|
|
|
311
322
|
}
|
|
312
323
|
setScrollPosition();
|
|
313
324
|
};
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
325
|
+
var ListComponent = function () {
|
|
326
|
+
return (_jsx("div", { className: 'listDiv', "data-relative": listPositionRelative, children: _jsxs("ul", { ref: refList, className: "list ".concat(open ? 'open' : ''), children: [(filteredData.length === 0 || loading) && _jsx("div", { className: "message ".concat(loading ? 'loading' : ''), children: loading ? 'Lütfen bekleyiniz...' : 'Kayıt bulunamadı...' }), filteredData.map(function (item, key) {
|
|
327
|
+
var itemValue = item[valueKey];
|
|
328
|
+
var itemLabel = item[labelKey];
|
|
329
|
+
return (_jsxs("li", { className: "item ".concat(itemValue === value ? 'active' : ''), "data-value": itemValue, "data-label": itemLabel, onClick: function () { return setValue(item, false); }, children: [item.create && _jsx("span", { className: 'newCreate', children: "Yeni Olu\u015Ftur: " }), itemComponent ? itemComponent(item) : itemLabel] }, key));
|
|
330
|
+
})] }) }));
|
|
331
|
+
};
|
|
332
|
+
return (_jsxs("div", { ref: refMain, className: styles.searchableInputComponent, onKeyDown: onKeyDown, style: style, children: [_jsx(Input, __assign({}, other, { name: name, value: text, inputRef: refInput, componentRef: refComponentInput, onFocus: function () { return setOpen(true); }, onChange: Change, endAdornment: !disabled && (_jsxs("div", { style: { marginRight: 5 }, tabIndex: -1, children: [_jsx(Button, { title: 'Temizle', tabIndex: -1, hidden: !(text && text.length > 0), onClick: function () { return clear(true, true); }, onlyIcon: _jsx(Icon, { name: 'close', style: { color: '#444' } }) }), endAdornment, _jsx(Button, { tabIndex: -1, hidden: !(data.length > 0), onClick: function () { return setOpen(!open); }, onlyIcon: _jsx(Icon, { name: open ? 'keyboard_arrow_up' : 'keyboard_arrow_down', style: { color: '#444' } }) })] })), placeholder: loading ? 'Lütfen bekleyiniz...' : placeholder, loading: loading, disabled: disabled, propsInput: __assign(__assign({}, other === null || other === void 0 ? void 0 : other.propsInput), { autoComplete: 'off' }) })), open && _jsx(ListComponent, {})] }));
|
|
319
333
|
};
|
|
320
334
|
export var SearchableInput = React.forwardRef(Component);
|
|
335
|
+
var setFixedPosition = function (refMain) {
|
|
336
|
+
if (!refMain.current)
|
|
337
|
+
return;
|
|
338
|
+
var target = refMain.current;
|
|
339
|
+
var targetPosition = target.getBoundingClientRect();
|
|
340
|
+
var listDiv = target.querySelector('.listDiv');
|
|
341
|
+
if (listDiv) {
|
|
342
|
+
var listDivUL = target.querySelector('ul');
|
|
343
|
+
if (!listDiv)
|
|
344
|
+
return;
|
|
345
|
+
var listHeight = listDivUL.getBoundingClientRect().height;
|
|
346
|
+
var style = [];
|
|
347
|
+
style.push("position:fixed");
|
|
348
|
+
style.push("z-index:111111111111 !important");
|
|
349
|
+
style.push("width:".concat(targetPosition.width, "px"));
|
|
350
|
+
var spaceBelow = window.innerHeight - (targetPosition.top + targetPosition.height);
|
|
351
|
+
var spaceAbove = targetPosition.top;
|
|
352
|
+
if (spaceBelow < listHeight && spaceAbove > listHeight) {
|
|
353
|
+
style.push("top:".concat(targetPosition.top - listHeight, "px"));
|
|
354
|
+
style.push("margin-top:-1px");
|
|
355
|
+
}
|
|
356
|
+
else {
|
|
357
|
+
style.push("top:".concat(targetPosition.top + targetPosition.height, "px"));
|
|
358
|
+
}
|
|
359
|
+
listDiv.setAttribute('style', style.join(';'));
|
|
360
|
+
}
|
|
361
|
+
};
|