@danikokonn/yarik-frontend-lib 2.0.58-test16 → 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,17 +158,28 @@ 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
175
|
React.createElement(TextField, { ref: textFieldRef, inputRef: inputRef, fullWidth: true, size: "small", value: search, title: search, multiline: true, maxRows: 1, onChange: (e) => {
|
|
163
176
|
(instant ? handleChange : setSearch)(e.target.value);
|
|
164
|
-
|
|
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);
|
|
165
183
|
},
|
|
166
184
|
// onClick={(e) => {
|
|
167
185
|
// if (e.target !== e.currentTarget) return;
|
|
@@ -172,7 +190,12 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
|
|
|
172
190
|
onClick: (e) => {
|
|
173
191
|
if (Object(e).target !== Object(e).currentTarget)
|
|
174
192
|
return;
|
|
175
|
-
|
|
193
|
+
const newCursorPos = inputRef.current?.selectionStart ?? null;
|
|
194
|
+
setCursorPos(newCursorPos);
|
|
195
|
+
if (newCursorPos &&
|
|
196
|
+
getHints(search, newCursorPos, fields, operators) !==
|
|
197
|
+
currentHintOptions)
|
|
198
|
+
setFocusIdx(0);
|
|
176
199
|
},
|
|
177
200
|
},
|
|
178
201
|
input: {
|
|
@@ -196,6 +219,7 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
|
|
|
196
219
|
React.createElement(HintOptionsMenu, { inputAnchor: inputAnchor, inputRef: inputRef, textFieldRef: textFieldRef, options: currentHintOptions, focusIdx: focusIdx, onSelectHint: insertHint, onClose: () => {
|
|
197
220
|
// setInputAnchor(null);
|
|
198
221
|
setCursorPos(null);
|
|
222
|
+
setFocusIdx(0);
|
|
199
223
|
} })));
|
|
200
224
|
};
|
|
201
225
|
export default RichFilterTextField;
|