@danikokonn/yarik-frontend-lib 2.0.58-test16 → 2.0.58-test18

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,sBA0Q1B,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,sBAkT1B,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));
73
+ let newCursorPos = newPos;
74
74
  if (hint.includes("[") || hint.includes("(") || hint.includes("/")) {
75
- setCursorPos(newPos - 1);
76
- }
77
- else {
78
- setCursorPos(newPos);
75
+ newCursorPos--;
79
76
  }
77
+ setCursorPos(newCursorPos);
78
+ if (newCursorPos &&
79
+ getHints(newSearch, newCursorPos, fields, operators) !==
80
+ 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,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
- 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
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
- setCursorPos(inputRef.current?.selectionStart ?? null);
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
- 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);
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@danikokonn/yarik-frontend-lib",
3
- "version": "2.0.58-test16",
3
+ "version": "2.0.58-test18",
4
4
  "license": "Apache-2.0",
5
5
  "description": "",
6
6
  "author": "",