@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,sBAuQ1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
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, { useEffect, useRef, useState, } from "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
- if (cursorPos == null)
35
- return;
36
- if (currentHintOptions === getHints(search, cursorPos, fields, operators))
37
- return;
38
- setFocusIdx(0);
39
- // setInputAnchor(currentHintOptions?.size > 0 ? textFieldRef.current : null);
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
- handleChange(newSearch);
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
- setCursorPos(inputRef.current?.selectionStart ?? null);
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
- setCursorPos(inputRef.current?.selectionStart ?? null);
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) => (instant ? handleChange : setSearch)(e.target.value),
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
- setCursorPos(inputRef.current?.selectionStart ?? null);
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@danikokonn/yarik-frontend-lib",
3
- "version": "2.0.58-test15",
3
+ "version": "2.0.58-test17",
4
4
  "license": "Apache-2.0",
5
5
  "description": "",
6
6
  "author": "",