@danikokonn/yarik-frontend-lib 2.0.58-test15 → 2.0.58-test17
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichFilterTextField.d.ts","sourceRoot":"","sources":["../../../src/components/RichFilterTextField/RichFilterTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAUf,OAAO,wBAAwB,MAAM,4BAA4B,CAAC;AAKlE,QAAA,MAAM,mBAAmB,GAAI,4HAS1B,wBAAwB,
|
|
1
|
+
{"version":3,"file":"RichFilterTextField.d.ts","sourceRoot":"","sources":["../../../src/components/RichFilterTextField/RichFilterTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAUf,OAAO,wBAAwB,MAAM,4BAA4B,CAAC;AAKlE,QAAA,MAAM,mBAAmB,GAAI,4HAS1B,wBAAwB,sBA+S1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useRef, useState, } from "react";
|
|
2
2
|
import IconButton from "@mui/material/IconButton";
|
|
3
3
|
import InputAdornment from "@mui/material/InputAdornment";
|
|
4
4
|
import TextField from "@mui/material/TextField";
|
|
@@ -25,19 +25,14 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
|
|
|
25
25
|
const currentHintOptions = (cursorPos != null
|
|
26
26
|
? getHints(search, cursorPos, fields, operators)
|
|
27
27
|
: null) ?? new Map();
|
|
28
|
-
console.log("######## RENDER ########");
|
|
29
|
-
console.log(search);
|
|
30
|
-
console.log(cursorPos);
|
|
31
|
-
console.log(currentHintOptions);
|
|
32
28
|
const inputAnchor = currentHintOptions?.size > 0 ? textFieldRef.current : null;
|
|
33
|
-
useEffect(() => {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}, [search, cursorPos]);
|
|
29
|
+
// useEffect(() => {
|
|
30
|
+
// if (cursorPos == null) return;
|
|
31
|
+
// if (currentHintOptions === getHints(search, cursorPos, fields, operators))
|
|
32
|
+
// return;
|
|
33
|
+
// setFocusIdx(0);
|
|
34
|
+
// // setInputAnchor(currentHintOptions?.size > 0 ? textFieldRef.current : null);
|
|
35
|
+
// }, [search, cursorPos]);
|
|
41
36
|
// useEffect(() => {
|
|
42
37
|
// if (cursorPos == null) return;
|
|
43
38
|
// if (inputRef.current && cursorPos !== inputRef.current.selectionStart) {
|
|
@@ -55,6 +50,9 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
|
|
|
55
50
|
// useEffect(() => setSearch(filterExpr), [filterExpr]);
|
|
56
51
|
const handleChange = (value, _idx) => {
|
|
57
52
|
setSearch(value);
|
|
53
|
+
if (cursorPos &&
|
|
54
|
+
getHints(value, cursorPos, fields, operators) !== currentHintOptions)
|
|
55
|
+
setFocusIdx(0);
|
|
58
56
|
onChange(value, (v) => setSearchHist(v));
|
|
59
57
|
};
|
|
60
58
|
const insertHint = (hint) => {
|
|
@@ -70,13 +68,17 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
|
|
|
70
68
|
hint = hint.replace("regex", "");
|
|
71
69
|
}
|
|
72
70
|
const { newSearch, newPos } = insertInStrPos(search, cursorPos, hint, fields);
|
|
73
|
-
|
|
71
|
+
setSearch(newSearch);
|
|
72
|
+
onChange(newSearch, (v) => setSearchHist(v));
|
|
74
73
|
if (hint.includes("[") || hint.includes("(") || hint.includes("/")) {
|
|
75
74
|
setCursorPos(newPos - 1);
|
|
76
75
|
}
|
|
77
76
|
else {
|
|
78
77
|
setCursorPos(newPos);
|
|
79
78
|
}
|
|
79
|
+
if (cursorPos &&
|
|
80
|
+
getHints(newSearch, cursorPos, fields, operators) !== currentHintOptions)
|
|
81
|
+
setFocusIdx(0);
|
|
80
82
|
};
|
|
81
83
|
const handleKeyUp = (e) => {
|
|
82
84
|
switch (e.code) {
|
|
@@ -116,7 +118,12 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
|
|
|
116
118
|
case "ArrowRight":
|
|
117
119
|
case "Space":
|
|
118
120
|
case "Backspace": {
|
|
119
|
-
|
|
121
|
+
const newCursorPos = inputRef.current?.selectionStart ?? null;
|
|
122
|
+
setCursorPos(newCursorPos);
|
|
123
|
+
if (newCursorPos &&
|
|
124
|
+
getHints(search, newCursorPos, fields, operators) !==
|
|
125
|
+
currentHintOptions)
|
|
126
|
+
setFocusIdx(0);
|
|
120
127
|
return;
|
|
121
128
|
}
|
|
122
129
|
case "ArrowDown": {
|
|
@@ -151,15 +158,29 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
|
|
|
151
158
|
case "Tab": {
|
|
152
159
|
// setInputAnchor(null);
|
|
153
160
|
setCursorPos(null);
|
|
161
|
+
setFocusIdx(0);
|
|
154
162
|
break;
|
|
155
163
|
}
|
|
156
164
|
default: {
|
|
157
|
-
|
|
165
|
+
const newCursorPos = inputRef.current?.selectionStart ?? null;
|
|
166
|
+
setCursorPos(newCursorPos);
|
|
167
|
+
if (newCursorPos &&
|
|
168
|
+
getHints(search, newCursorPos, fields, operators) !==
|
|
169
|
+
currentHintOptions)
|
|
170
|
+
setFocusIdx(0);
|
|
158
171
|
}
|
|
159
172
|
}
|
|
160
173
|
};
|
|
161
174
|
return (React.createElement(React.Fragment, null,
|
|
162
|
-
React.createElement(TextField, { ref: textFieldRef, inputRef: inputRef, fullWidth: true, size: "small", value: search, title: search, multiline: true, maxRows: 1, onChange: (e) =>
|
|
175
|
+
React.createElement(TextField, { ref: textFieldRef, inputRef: inputRef, fullWidth: true, size: "small", value: search, title: search, multiline: true, maxRows: 1, onChange: (e) => {
|
|
176
|
+
(instant ? handleChange : setSearch)(e.target.value);
|
|
177
|
+
const newCursorPos = inputRef.current?.selectionStart ?? null;
|
|
178
|
+
setCursorPos(newCursorPos);
|
|
179
|
+
if (newCursorPos &&
|
|
180
|
+
getHints(e.target.value, newCursorPos, fields, operators) !==
|
|
181
|
+
currentHintOptions)
|
|
182
|
+
setFocusIdx(0);
|
|
183
|
+
},
|
|
163
184
|
// onClick={(e) => {
|
|
164
185
|
// if (e.target !== e.currentTarget) return;
|
|
165
186
|
// setCursorPos(inputRef.current?.selectionStart ?? null);
|
|
@@ -169,7 +190,12 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
|
|
|
169
190
|
onClick: (e) => {
|
|
170
191
|
if (Object(e).target !== Object(e).currentTarget)
|
|
171
192
|
return;
|
|
172
|
-
|
|
193
|
+
const newCursorPos = inputRef.current?.selectionStart ?? null;
|
|
194
|
+
setCursorPos(newCursorPos);
|
|
195
|
+
if (newCursorPos &&
|
|
196
|
+
getHints(search, newCursorPos, fields, operators) !==
|
|
197
|
+
currentHintOptions)
|
|
198
|
+
setFocusIdx(0);
|
|
173
199
|
},
|
|
174
200
|
},
|
|
175
201
|
input: {
|
|
@@ -193,6 +219,7 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
|
|
|
193
219
|
React.createElement(HintOptionsMenu, { inputAnchor: inputAnchor, inputRef: inputRef, textFieldRef: textFieldRef, options: currentHintOptions, focusIdx: focusIdx, onSelectHint: insertHint, onClose: () => {
|
|
194
220
|
// setInputAnchor(null);
|
|
195
221
|
setCursorPos(null);
|
|
222
|
+
setFocusIdx(0);
|
|
196
223
|
} })));
|
|
197
224
|
};
|
|
198
225
|
export default RichFilterTextField;
|