@sydsoft/base 1.33.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,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const isDev: boolean;
|
|
3
|
+
export declare const isServerReq: (context: any) => boolean;
|
|
3
4
|
export declare function tumuBuyukCevir(e: React.ChangeEvent<HTMLInputElement>): void;
|
|
4
5
|
export declare function tumuKucukCevir(e: React.ChangeEvent<HTMLInputElement>): void;
|
|
5
6
|
export declare function seoCevirFunction(e: React.ChangeEvent<HTMLInputElement>): void;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export var isDev = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';
|
|
2
|
+
export var isServerReq = function (context) { var _a, _b; return !((_b = (_a = context === null || context === void 0 ? void 0 : context.req) === null || _a === void 0 ? void 0 : _a.url) === null || _b === void 0 ? void 0 : _b.startsWith('/_next')); };
|
|
2
3
|
export function tumuBuyukCevir(e) {
|
|
3
4
|
var _a;
|
|
4
5
|
if ((e === null || e === void 0 ? void 0 : e.target) && ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.setSelectionRange)) {
|
|
@@ -38,11 +39,11 @@ export function seoCevirFunction(e) {
|
|
|
38
39
|
}
|
|
39
40
|
export function getDomain(context) {
|
|
40
41
|
if (context === void 0) { context = null; }
|
|
41
|
-
var url =
|
|
42
|
+
var url = '';
|
|
42
43
|
if (context) {
|
|
43
44
|
url = context.req.headers.host;
|
|
44
45
|
}
|
|
45
|
-
else if (typeof window !==
|
|
46
|
+
else if (typeof window !== 'undefined') {
|
|
46
47
|
url = window.location.hostname;
|
|
47
48
|
}
|
|
48
49
|
if (url.length) {
|
|
@@ -52,11 +53,11 @@ export function getDomain(context) {
|
|
|
52
53
|
// see if the second level domain is a common SLD.
|
|
53
54
|
if (parts[1].match(/^(com|edu|gov|net|mil|org|nom|co|name|info|biz)$/i)) {
|
|
54
55
|
var domain_1 = parts[2] + '.' + parts[1] + '.' + parts[0];
|
|
55
|
-
return domain_1.split(
|
|
56
|
+
return domain_1.split(':')[0];
|
|
56
57
|
}
|
|
57
58
|
}
|
|
58
59
|
var domain = parts[1] + '.' + parts[0];
|
|
59
|
-
return domain.split(
|
|
60
|
+
return domain.split(':')[0];
|
|
60
61
|
}
|
|
61
62
|
return url;
|
|
62
63
|
}
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PropsInput } from './Input';
|
|
3
3
|
type typeList = {
|
|
4
4
|
value?: string;
|
|
5
5
|
label?: string;
|
|
6
6
|
[key: string | number]: any;
|
|
7
7
|
}[];
|
|
8
8
|
interface Props extends PropsInput {
|
|
9
|
-
autoCompleteList?: typeList
|
|
10
|
-
onChange?:
|
|
9
|
+
autoCompleteList?: typeList;
|
|
10
|
+
onChange?: (e: any) => void;
|
|
11
11
|
value: string | number | undefined;
|
|
12
12
|
valueKey?: string;
|
|
13
13
|
labelKey?: string;
|
|
14
14
|
itemComponent?: any;
|
|
15
|
-
|
|
16
|
-
onText?:
|
|
17
|
-
onSelect?:
|
|
18
|
-
onLoad?:
|
|
15
|
+
isDataFromApi?: boolean;
|
|
16
|
+
onText?: (text: string) => void;
|
|
17
|
+
onSelect?: (item: any) => void;
|
|
18
|
+
onLoad?: (value: string | number) => void;
|
|
19
19
|
newCreate?: boolean;
|
|
20
20
|
refModal?: any;
|
|
21
21
|
style?: React.CSSProperties;
|
|
22
22
|
disabled?: boolean;
|
|
23
|
-
parentInputValue?:
|
|
23
|
+
parentInputValue?: string | number | undefined;
|
|
24
24
|
listPositionRelative?: boolean;
|
|
25
25
|
}
|
|
26
26
|
type handle = {
|
|
@@ -1,30 +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.
|
|
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
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
var
|
|
18
|
-
var
|
|
19
|
-
var
|
|
20
|
-
var
|
|
21
|
-
var _j = useState(""), filter = _j[0], setFilter = _j[1]; // Filtrelemeye tabi tutulan
|
|
22
|
-
var _k = useState(false), open = _k[0], setOpen = _k[1];
|
|
23
|
-
var _l = useState(api), loading = _l[0], setLoading = _l[1];
|
|
24
|
-
useEffect(function () {
|
|
25
|
-
if (onLoad)
|
|
26
|
-
onLoad(value !== null && value !== void 0 ? value : "");
|
|
27
|
-
}, []);
|
|
13
|
+
var refComponentInput = useRef(null);
|
|
14
|
+
var refList = useRef(null);
|
|
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];
|
|
28
21
|
useImperativeHandle(forwardedRef, function () { return ({
|
|
29
22
|
open: function () { return setOpen(true); },
|
|
30
23
|
close: function () { return setOpen(false); },
|
|
@@ -46,28 +39,45 @@ var Component = function (_a, forwardedRef) {
|
|
|
46
39
|
return clear(openList, focusInput);
|
|
47
40
|
}
|
|
48
41
|
}); });
|
|
42
|
+
var handleUpdatePosition = function () {
|
|
43
|
+
if (open && !listPositionRelative && refMain) {
|
|
44
|
+
setFixedPosition(refMain);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
49
47
|
useEffect(function () {
|
|
50
|
-
if (
|
|
48
|
+
if (onLoad)
|
|
49
|
+
onLoad(value !== null && value !== void 0 ? value : '');
|
|
50
|
+
}, []);
|
|
51
|
+
useEffect(function () {
|
|
52
|
+
if (inputRef)
|
|
53
|
+
inputRef.current = refInput.current;
|
|
54
|
+
}, [refInput.current]);
|
|
55
|
+
useEffect(function () {
|
|
56
|
+
if (parentInputValue !== undefined && parentInputValue !== null) {
|
|
51
57
|
clear(false);
|
|
58
|
+
isDev && console.log(name, 'parentInputValueDeğişti =>', parentInputValue);
|
|
52
59
|
}
|
|
53
60
|
}, [parentInputValue]);
|
|
54
61
|
useEffect(function () {
|
|
55
|
-
if (
|
|
62
|
+
if (autoCompleteList && Array.isArray(autoCompleteList) && autoCompleteList.length > 0) {
|
|
63
|
+
setData(autoCompleteList);
|
|
64
|
+
isDev && console.log('autoCompleteList =>', name, autoCompleteList);
|
|
65
|
+
}
|
|
66
|
+
}, [autoCompleteList]);
|
|
67
|
+
useEffect(function () {
|
|
68
|
+
if (!isDataFromApi && data.length > 0)
|
|
56
69
|
checkByValue(value, open);
|
|
57
|
-
// if (Object.keys(data).length > 0) checkByValue(value, open);
|
|
58
|
-
isDev && console.log("useDeepCompareEffect =>", name, "data");
|
|
59
70
|
}, [data]);
|
|
60
71
|
useEffect(function () {
|
|
61
|
-
if (
|
|
72
|
+
if (data.length > 0) {
|
|
62
73
|
if (value && value.toString().length > 0) {
|
|
63
74
|
checkByValue(value, open);
|
|
64
75
|
}
|
|
65
76
|
else {
|
|
66
|
-
if (!
|
|
77
|
+
if (!isDataFromApi)
|
|
67
78
|
clear(false);
|
|
68
79
|
}
|
|
69
80
|
}
|
|
70
|
-
isDev && console.log("useEffect-value =>", name, value);
|
|
71
81
|
}, [value]);
|
|
72
82
|
useEffect(function () {
|
|
73
83
|
var checkHideBackDrop = function (e) {
|
|
@@ -76,25 +86,18 @@ var Component = function (_a, forwardedRef) {
|
|
|
76
86
|
}
|
|
77
87
|
};
|
|
78
88
|
var checkESC = function (e) {
|
|
79
|
-
if (e.keyCode === 27 || e.key ===
|
|
89
|
+
if (e.keyCode === 27 || e.key === 'Escape' || e.code === 'Escape')
|
|
80
90
|
checkByInput();
|
|
81
91
|
};
|
|
82
|
-
window.addEventListener(
|
|
92
|
+
window.addEventListener('mousedown', checkHideBackDrop);
|
|
83
93
|
if (refMain.current)
|
|
84
|
-
refMain.current.addEventListener(
|
|
85
|
-
return function () {
|
|
86
|
-
window.removeEventListener("mousedown", checkHideBackDrop);
|
|
87
|
-
if (refMain.current)
|
|
88
|
-
refMain.current.removeEventListener("keydown", checkESC);
|
|
89
|
-
};
|
|
90
|
-
}, [data, open]);
|
|
91
|
-
useEffect(function () {
|
|
94
|
+
refMain.current.addEventListener('keydown', checkESC);
|
|
92
95
|
if (refModal && refModal.current) {
|
|
93
96
|
if (open) {
|
|
94
|
-
refModal.current.style.overflow =
|
|
97
|
+
refModal.current.style.overflow = 'visible';
|
|
95
98
|
}
|
|
96
99
|
else {
|
|
97
|
-
refModal.current.style.overflow =
|
|
100
|
+
refModal.current.style.overflow = 'auto overlay';
|
|
98
101
|
}
|
|
99
102
|
}
|
|
100
103
|
if (open) {
|
|
@@ -102,61 +105,68 @@ var Component = function (_a, forwardedRef) {
|
|
|
102
105
|
if (refModal && refModal.current && refMain && refMain.current) {
|
|
103
106
|
refModal.current.scrollTop = refMain.current.offsetTop + 300;
|
|
104
107
|
}
|
|
108
|
+
if (!listPositionRelative) {
|
|
109
|
+
window.addEventListener('scroll', handleUpdatePosition, true);
|
|
110
|
+
window.addEventListener('resize', handleUpdatePosition);
|
|
111
|
+
}
|
|
105
112
|
}
|
|
113
|
+
return function () {
|
|
114
|
+
window.removeEventListener('mousedown', checkHideBackDrop);
|
|
115
|
+
if (refMain.current)
|
|
116
|
+
refMain.current.removeEventListener('keydown', checkESC);
|
|
117
|
+
window.removeEventListener('scroll', handleUpdatePosition, true);
|
|
118
|
+
window.removeEventListener('resize', handleUpdatePosition);
|
|
119
|
+
};
|
|
106
120
|
}, [open]);
|
|
121
|
+
useLayoutEffect(function () { return handleUpdatePosition(); }, [open]);
|
|
107
122
|
var cevirTumuKucuk = function (text) {
|
|
108
|
-
if (text === void 0) { text =
|
|
109
|
-
return text.toString().toLocaleLowerCase(
|
|
123
|
+
if (text === void 0) { text = ''; }
|
|
124
|
+
return text.toString().toLocaleLowerCase('tr-TR');
|
|
110
125
|
};
|
|
111
|
-
var convertForSearch = function (value) {
|
|
126
|
+
var convertForSearch = useCallback(function (value) {
|
|
112
127
|
var data = cevirTumuKucuk(value);
|
|
113
|
-
data = data.replace(/ö/g,
|
|
114
|
-
data = data.replace(/ç/g,
|
|
115
|
-
data = data.replace(/ş/g,
|
|
116
|
-
data = data.replace(/ı/g,
|
|
117
|
-
data = data.replace(/ğ/g,
|
|
118
|
-
data = data.replace(/ü/g,
|
|
119
|
-
data = data.replace(/[^a-z\d]/g,
|
|
120
|
-
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, '');
|
|
121
136
|
return data;
|
|
122
|
-
};
|
|
137
|
+
}, [cevirTumuKucuk]);
|
|
123
138
|
var filteredData = useMemo(function () {
|
|
124
139
|
var _a;
|
|
125
140
|
var list;
|
|
126
141
|
if (filter.length > 0) {
|
|
127
|
-
list =
|
|
128
|
-
return convertForSearch(item[labelKey]).includes(convertForSearch(filter)) || item[labelKey] == filter;
|
|
129
|
-
});
|
|
142
|
+
list = data.filter(function (item) { return convertForSearch(item[labelKey]).includes(convertForSearch(filter)) || item[labelKey] == filter; });
|
|
130
143
|
}
|
|
131
144
|
else {
|
|
132
145
|
list = data;
|
|
133
146
|
}
|
|
134
147
|
if (newCreate && text.length > 0) {
|
|
135
|
-
var filterText =
|
|
148
|
+
var filterText = data.find(function (item) { return item[labelKey].toString().toLowerCase() === text.toString().toLowerCase(); });
|
|
136
149
|
if (!filterText) {
|
|
137
|
-
|
|
150
|
+
var newItem = (_a = {}, _a[labelKey] = text, _a[valueKey] = text, _a.create = true, _a);
|
|
151
|
+
list = __spreadArray([newItem], list, true);
|
|
152
|
+
setNewItemCreate(newItem);
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
if (newItemCreate.create)
|
|
156
|
+
setNewItemCreate({ create: false });
|
|
138
157
|
}
|
|
139
158
|
}
|
|
140
159
|
return list;
|
|
141
|
-
}, [data, filter]);
|
|
142
|
-
var
|
|
143
|
-
setValue(false, true);
|
|
144
|
-
setText(e.target.value);
|
|
145
|
-
setFilter(e.target.value);
|
|
146
|
-
setOpen(true);
|
|
147
|
-
if (onText)
|
|
148
|
-
onText(e.target.value);
|
|
149
|
-
};
|
|
150
|
-
var setValue = function (result, openList) {
|
|
160
|
+
}, [data, filter, newCreate, text, valueKey, labelKey]);
|
|
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
|
-
isDev && console.log("onChange =>", name, "yeni:" + newValue, "eski:" + value);
|
|
160
170
|
onChange({
|
|
161
171
|
target: {
|
|
162
172
|
name: name,
|
|
@@ -166,52 +176,60 @@ var Component = function (_a, forwardedRef) {
|
|
|
166
176
|
}
|
|
167
177
|
if (onSelect)
|
|
168
178
|
onSelect(result);
|
|
169
|
-
};
|
|
170
|
-
var
|
|
179
|
+
}, [onChange, onSelect, name, value, valueKey, labelKey]);
|
|
180
|
+
var Change = useCallback(function (e) {
|
|
181
|
+
setValue(false, true);
|
|
182
|
+
setText(e.target.value);
|
|
183
|
+
setFilter(e.target.value.trim());
|
|
184
|
+
setOpen(true);
|
|
185
|
+
if (onText)
|
|
186
|
+
onText(e.target.value);
|
|
187
|
+
}, [setValue, onText]);
|
|
188
|
+
var checkByValue = useCallback(function (value, openList, list) {
|
|
171
189
|
if (openList === void 0) { openList = false; }
|
|
172
190
|
if (list === void 0) { list = []; }
|
|
173
191
|
var targetList = list.length > 0 ? list : data;
|
|
174
192
|
var find = Object.values(targetList).find(function (item) { return cevirTumuKucuk(item[valueKey]) === cevirTumuKucuk(value); });
|
|
193
|
+
if (!find && newCreate && newItemCreate.create) {
|
|
194
|
+
find = newItemCreate;
|
|
195
|
+
}
|
|
175
196
|
setValue(find, openList);
|
|
176
|
-
};
|
|
177
|
-
var checkByInput = function () {
|
|
178
|
-
|
|
179
|
-
var findByLabel = Object.values(data).find(function (item) { return cevirTumuKucuk(item[labelKey]) === cevirTumuKucuk(refInput.current.value); });
|
|
197
|
+
}, [data, valueKey, newCreate, newItemCreate, setValue]);
|
|
198
|
+
var checkByInput = useCallback(function () {
|
|
199
|
+
var findByLabel = data.find(function (item) { return cevirTumuKucuk(item[labelKey]) === cevirTumuKucuk(refInput.current.value); });
|
|
180
200
|
if (findByLabel && value == findByLabel[valueKey]) {
|
|
181
201
|
setOpen(false);
|
|
182
|
-
isDev && console.log("findByLabel - Zaten Aynı =>", name, findByLabel);
|
|
183
202
|
return;
|
|
184
203
|
}
|
|
185
204
|
setValue(findByLabel, false);
|
|
186
205
|
if (!findByLabel)
|
|
187
|
-
setText(
|
|
188
|
-
if (
|
|
206
|
+
setText('');
|
|
207
|
+
if (isDataFromApi && !findByLabel && data.length === 0) {
|
|
189
208
|
if (onText)
|
|
190
|
-
onText(
|
|
209
|
+
onText('');
|
|
191
210
|
}
|
|
192
|
-
};
|
|
193
|
-
var clear = function (openList, focusInput) {
|
|
211
|
+
}, [data, labelKey, value, valueKey, isDataFromApi, onText, setValue]);
|
|
212
|
+
var clear = useCallback(function (openList, focusInput) {
|
|
194
213
|
var _a;
|
|
195
214
|
if (openList === void 0) { openList = true; }
|
|
196
215
|
if (focusInput === void 0) { focusInput = false; }
|
|
197
|
-
setFilter(
|
|
198
|
-
setText(
|
|
216
|
+
setFilter('');
|
|
217
|
+
setText('');
|
|
199
218
|
setValue(false, openList);
|
|
200
219
|
if (onText)
|
|
201
|
-
onText(
|
|
220
|
+
onText('');
|
|
202
221
|
if (focusInput)
|
|
203
222
|
(_a = refInput === null || refInput === void 0 ? void 0 : refInput.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
204
|
-
|
|
205
|
-
};
|
|
223
|
+
}, [setValue, onText]);
|
|
206
224
|
function setScrollPosition() {
|
|
207
225
|
if (refList.current) {
|
|
208
226
|
var position = 0;
|
|
209
|
-
var text_1 = refList.current.querySelector(
|
|
227
|
+
var text_1 = refList.current.querySelector('li.item.selected');
|
|
210
228
|
if (text_1) {
|
|
211
229
|
position = text_1.offsetTop - 35;
|
|
212
230
|
}
|
|
213
|
-
else if (refList.current.querySelector(
|
|
214
|
-
position = refList.current.querySelector(
|
|
231
|
+
else if (refList.current.querySelector('li.item.active')) {
|
|
232
|
+
position = refList.current.querySelector('li.item.active').offsetTop - 35;
|
|
215
233
|
}
|
|
216
234
|
refList.current.scrollTop = position;
|
|
217
235
|
}
|
|
@@ -220,35 +238,35 @@ var Component = function (_a, forwardedRef) {
|
|
|
220
238
|
if (!open)
|
|
221
239
|
return null;
|
|
222
240
|
function selectEnter() {
|
|
223
|
-
var text = refList.current.querySelector(
|
|
241
|
+
var text = refList.current.querySelector('li.item.selected');
|
|
224
242
|
if (text) {
|
|
225
243
|
checkByValue(text.dataset.value);
|
|
226
244
|
}
|
|
227
|
-
else if (refList.current.querySelectorAll(
|
|
228
|
-
checkByValue(refList.current.querySelectorAll(
|
|
245
|
+
else if (refList.current.querySelectorAll('li.item').length > 0) {
|
|
246
|
+
checkByValue(refList.current.querySelectorAll('li.item')[0].dataset.value);
|
|
229
247
|
}
|
|
230
248
|
else {
|
|
231
249
|
clear(true, true);
|
|
232
250
|
}
|
|
233
251
|
}
|
|
234
252
|
function selectFirst() {
|
|
235
|
-
var showList = refList.current.querySelectorAll(
|
|
253
|
+
var showList = refList.current.querySelectorAll('li.item');
|
|
236
254
|
if (showList.length > 0) {
|
|
237
|
-
showList[0].classList.add(
|
|
255
|
+
showList[0].classList.add('selected');
|
|
238
256
|
}
|
|
239
257
|
}
|
|
240
258
|
function selectLast() {
|
|
241
|
-
var showList = refList.current.querySelectorAll(
|
|
259
|
+
var showList = refList.current.querySelectorAll('li.item');
|
|
242
260
|
if (showList.length > 0) {
|
|
243
|
-
showList[showList.length - 1].classList.add(
|
|
261
|
+
showList[showList.length - 1].classList.add('selected');
|
|
244
262
|
}
|
|
245
263
|
}
|
|
246
264
|
function selectNext(element) {
|
|
247
|
-
element.classList.remove(
|
|
265
|
+
element.classList.remove('selected');
|
|
248
266
|
var next = element.nextElementSibling;
|
|
249
267
|
if (next && next.nodeType !== -1) {
|
|
250
|
-
if (next.classList.contains(
|
|
251
|
-
next.classList.add(
|
|
268
|
+
if (next.classList.contains('item')) {
|
|
269
|
+
next.classList.add('selected');
|
|
252
270
|
}
|
|
253
271
|
else {
|
|
254
272
|
selectNext(next);
|
|
@@ -259,11 +277,11 @@ var Component = function (_a, forwardedRef) {
|
|
|
259
277
|
}
|
|
260
278
|
}
|
|
261
279
|
function selectPrev(element) {
|
|
262
|
-
element.classList.remove(
|
|
280
|
+
element.classList.remove('selected');
|
|
263
281
|
var next = element.previousElementSibling;
|
|
264
282
|
if (next && next.nodeType !== -1) {
|
|
265
|
-
if (next.classList.contains(
|
|
266
|
-
next.classList.add(
|
|
283
|
+
if (next.classList.contains('item')) {
|
|
284
|
+
next.classList.add('selected');
|
|
267
285
|
}
|
|
268
286
|
else {
|
|
269
287
|
selectPrev(next);
|
|
@@ -273,7 +291,7 @@ var Component = function (_a, forwardedRef) {
|
|
|
273
291
|
selectLast();
|
|
274
292
|
}
|
|
275
293
|
}
|
|
276
|
-
var selected = refList.current.querySelector(
|
|
294
|
+
var selected = refList.current.querySelector('li.item.selected');
|
|
277
295
|
if (e.which == 40) {
|
|
278
296
|
if (selected) {
|
|
279
297
|
selectNext(selected);
|
|
@@ -304,10 +322,40 @@ var Component = function (_a, forwardedRef) {
|
|
|
304
322
|
}
|
|
305
323
|
setScrollPosition();
|
|
306
324
|
};
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
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, {})] }));
|
|
312
333
|
};
|
|
313
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
|
+
};
|
|
@@ -1,79 +1,80 @@
|
|
|
1
|
-
.
|
|
1
|
+
.searchableInputComponent {
|
|
2
|
+
cursor: unset;
|
|
2
3
|
}
|
|
3
|
-
.
|
|
4
|
-
|
|
4
|
+
.searchableInputComponent input {
|
|
5
|
+
padding: 12px 14px;
|
|
5
6
|
}
|
|
6
7
|
|
|
7
|
-
.listDiv {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
.searchableInputComponent :global(.listDiv) {
|
|
9
|
+
position: relative;
|
|
10
|
+
margin-top: -4px;
|
|
11
|
+
z-index: 1000;
|
|
11
12
|
}
|
|
12
13
|
|
|
13
|
-
.listDiv[data-relative="true"] {
|
|
14
|
-
|
|
14
|
+
.searchableInputComponent :global(.listDiv[data-relative="true"]) {
|
|
15
|
+
z-index: 1 !important;
|
|
15
16
|
}
|
|
16
|
-
.listDiv[data-relative="true"] > ul {
|
|
17
|
-
|
|
17
|
+
.searchableInputComponent :global(.listDiv[data-relative="true"]) > ul {
|
|
18
|
+
position: relative !important;
|
|
18
19
|
}
|
|
19
20
|
|
|
20
|
-
.list {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
21
|
+
.searchableInputComponent :global(.list) {
|
|
22
|
+
position: absolute;
|
|
23
|
+
top: 3px;
|
|
24
|
+
left: 1%;
|
|
25
|
+
width: 98%;
|
|
26
|
+
height: 0;
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
background: transparent;
|
|
29
|
+
margin: 0;
|
|
30
|
+
padding: 0;
|
|
31
|
+
list-style: none;
|
|
31
32
|
}
|
|
32
33
|
|
|
33
|
-
.list.open {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
34
|
+
.searchableInputComponent :global(.list.open) {
|
|
35
|
+
height: auto;
|
|
36
|
+
max-height: 300px;
|
|
37
|
+
overflow-x: hidden;
|
|
38
|
+
overflow-y: visible;
|
|
39
|
+
padding: 5px 0;
|
|
40
|
+
border: 1px #ced4da solid;
|
|
41
|
+
background: #fff;
|
|
41
42
|
}
|
|
42
43
|
|
|
43
|
-
.
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
44
|
+
.searchableInputComponent :global(.list li) {
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
display: block;
|
|
47
|
+
padding: 8px 10px;
|
|
48
|
+
text-overflow: ellipsis;
|
|
49
|
+
overflow: hidden;
|
|
50
|
+
white-space: nowrap;
|
|
50
51
|
}
|
|
51
52
|
|
|
52
|
-
.
|
|
53
|
-
.
|
|
54
|
-
|
|
53
|
+
.searchableInputComponent :global(.list li:hover),
|
|
54
|
+
.searchableInputComponent :global(.list li.selected) {
|
|
55
|
+
background: #d9e0e3;
|
|
55
56
|
}
|
|
56
57
|
|
|
57
|
-
.
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
.searchableInputComponent :global(.list li.active) {
|
|
59
|
+
background: #cbe2ef;
|
|
60
|
+
font-weight: 500;
|
|
60
61
|
}
|
|
61
62
|
|
|
62
|
-
.newCreate {
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
.searchableInputComponent :global(.newCreate) {
|
|
64
|
+
margin-right: 5px;
|
|
65
|
+
font-style: italic;
|
|
65
66
|
}
|
|
66
67
|
|
|
67
|
-
.message {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
68
|
+
.searchableInputComponent :global(.message) {
|
|
69
|
+
text-overflow: ellipsis;
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
white-space: nowrap;
|
|
72
|
+
display: block;
|
|
73
|
+
padding: 15px 10px;
|
|
74
|
+
cursor: default;
|
|
74
75
|
}
|
|
75
|
-
.loading {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
76
|
+
.searchableInputComponent :global(.loading) {
|
|
77
|
+
padding: 5px 10px;
|
|
78
|
+
background-color: #ced4da38;
|
|
79
|
+
text-align: center;
|
|
79
80
|
}
|