@danikokonn/yarik-frontend-lib 2.0.40 → 2.0.42

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,5 @@
1
1
  import React from "react";
2
2
  import RichFilterTextFieldProps from "./RichFilterTextFieldProps";
3
- declare const RichFilterTextField: ({ filterExpr, filterExprHist, fields, operators, additionalComponents, instant: _instant, onChange, onSelectFromHistory, }: RichFilterTextFieldProps) => React.JSX.Element;
3
+ declare const RichFilterTextField: ({ filterExpr, filterExprHist: searchHist, fields, operators, additionalComponents, instant: _instant, onChange, onSelectFromHistory, }: RichFilterTextFieldProps) => React.JSX.Element;
4
4
  export default RichFilterTextField;
5
5
  //# sourceMappingURL=RichFilterTextField.d.ts.map
@@ -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;AAMlE,QAAA,MAAM,mBAAmB,GAAI,4HAS1B,wBAAwB,sBA0O1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
1
+ {"version":3,"file":"RichFilterTextField.d.ts","sourceRoot":"","sources":["../../../src/components/RichFilterTextField/RichFilterTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAUf,OAAO,wBAAwB,MAAM,4BAA4B,CAAC;AAKlE,QAAA,MAAM,mBAAmB,GAAI,wIAS1B,wBAAwB,sBA6R1B,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";
@@ -7,41 +7,39 @@ import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
7
7
  import HintOptionsMenu from "./HintOptionsMenu";
8
8
  import { getHints, insertInStrPos } from "./utils";
9
9
  import { useSnackbarContext } from "../../providers";
10
- import { useDebounce } from "../../utils";
11
10
  import FilterHistoryMenu from "./FilterHistoryMenu";
12
11
  import { Stack } from "@mui/material";
13
- const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, additionalComponents, instant: _instant, onChange, onSelectFromHistory, }) => {
12
+ const RichFilterTextField = ({ filterExpr, filterExprHist: searchHist, fields, operators, additionalComponents, instant: _instant, onChange, onSelectFromHistory, }) => {
14
13
  const { enqueueSnackbar } = useSnackbarContext();
15
14
  const [search, setSearch] = useState(filterExpr);
16
- const instant = _instant ?? true;
17
- useEffect(() => setSearch(filterExpr), [filterExpr]);
18
- const [searchHist, setSearchHist] = useState(filterExprHist);
19
- const [inputAnchor, setInputAnchor] = useState(null);
20
15
  const [cursorPos, setCursorPos] = useState(null);
21
- const [currentHintOptions, setCurrentHintOptions] = useState(() => new Map());
22
16
  const [focusIdx, setFocusIdx] = useState(0);
23
17
  const inputRef = useRef(null);
24
18
  const textFieldRef = useRef(null);
25
- const updateHints = useDebounce(() => {
26
- if (cursorPos == null)
27
- return;
28
- const hints = getHints(search, cursorPos, fields, operators);
29
- setCurrentHintOptions(hints);
19
+ const prevFilterExpr = useRef(filterExpr);
20
+ const instant = _instant ?? true;
21
+ const currentHintOptions = (cursorPos != null
22
+ ? getHints(search, cursorPos, fields, operators)
23
+ : null) ?? new Map();
24
+ const inputAnchor = currentHintOptions?.size > 0 ? textFieldRef.current : null;
25
+ if (prevFilterExpr.current !== filterExpr && filterExpr !== search) {
26
+ setSearch(filterExpr);
27
+ setCursorPos(null);
30
28
  setFocusIdx(0);
31
- setInputAnchor(hints?.size > 0 ? textFieldRef.current : null);
32
- }, 20);
33
- useEffect(() => {
34
- if (cursorPos == null)
35
- return;
36
- if (inputRef.current && cursorPos !== inputRef.current.selectionStart) {
37
- inputRef.current.selectionStart = cursorPos;
38
- inputRef.current.selectionEnd = cursorPos;
39
- }
40
- updateHints();
41
- }, [cursorPos]);
29
+ prevFilterExpr.current = filterExpr;
30
+ }
31
+ if (cursorPos != null &&
32
+ inputRef.current &&
33
+ cursorPos !== inputRef.current.selectionStart) {
34
+ inputRef.current.selectionStart = cursorPos;
35
+ inputRef.current.selectionEnd = cursorPos;
36
+ }
42
37
  const handleChange = (value, _idx) => {
43
38
  setSearch(value);
44
- onChange(value, (v) => setSearchHist(v));
39
+ if (cursorPos &&
40
+ getHints(value, cursorPos, fields, operators) !== currentHintOptions)
41
+ setFocusIdx(0);
42
+ onChange(value /*(v: unknown) => setSearchHist(v as string[])*/);
45
43
  };
46
44
  const insertHint = (hint) => {
47
45
  if (cursorPos == null)
@@ -56,13 +54,18 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
56
54
  hint = hint.replace("regex", "");
57
55
  }
58
56
  const { newSearch, newPos } = insertInStrPos(search, cursorPos, hint, fields);
59
- handleChange(newSearch);
57
+ setSearch(newSearch);
58
+ if (instant)
59
+ onChange(newSearch);
60
+ let newCursorPos = newPos;
60
61
  if (hint.includes("[") || hint.includes("(") || hint.includes("/")) {
61
- setCursorPos(newPos - 1);
62
- }
63
- else {
64
- setCursorPos(newPos);
62
+ newCursorPos--;
65
63
  }
64
+ setCursorPos(newCursorPos);
65
+ if (newCursorPos &&
66
+ getHints(newSearch, newCursorPos, fields, operators) !==
67
+ currentHintOptions)
68
+ setFocusIdx(0);
66
69
  };
67
70
  const handleKeyUp = (e) => {
68
71
  switch (e.code) {
@@ -81,18 +84,23 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
81
84
  insertHint(focusedHint);
82
85
  }
83
86
  else {
84
- onChange(search, (v) => setSearchHist(v));
87
+ onChange(search);
88
+ inputRef.current?.blur();
85
89
  }
86
90
  break;
87
91
  }
88
92
  case "Escape":
89
93
  case "Tab": {
90
- setInputAnchor(null);
91
94
  setCursorPos(null);
92
95
  break;
93
96
  }
94
97
  default: {
95
- setCursorPos(inputRef.current?.selectionStart ?? null);
98
+ const newCursorPos = inputRef.current?.selectionStart ?? null;
99
+ setCursorPos(newCursorPos);
100
+ if (newCursorPos &&
101
+ getHints(search, newCursorPos, fields, operators) !==
102
+ currentHintOptions)
103
+ setFocusIdx(0);
96
104
  }
97
105
  }
98
106
  };
@@ -102,8 +110,12 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
102
110
  case "ArrowRight":
103
111
  case "Space":
104
112
  case "Backspace": {
105
- setInputAnchor(null);
106
- setCursorPos(inputRef.current?.selectionStart ?? null);
113
+ const newCursorPos = inputRef.current?.selectionStart ?? null;
114
+ setCursorPos(newCursorPos);
115
+ if (newCursorPos &&
116
+ getHints(search, newCursorPos, fields, operators) !==
117
+ currentHintOptions)
118
+ setFocusIdx(0);
107
119
  return;
108
120
  }
109
121
  case "ArrowDown": {
@@ -136,26 +148,47 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
136
148
  }
137
149
  case "Escape":
138
150
  case "Tab": {
139
- setInputAnchor(null);
140
151
  setCursorPos(null);
152
+ setFocusIdx(0);
141
153
  break;
142
154
  }
143
155
  default: {
144
- setCursorPos(inputRef.current?.selectionStart ?? null);
156
+ const newCursorPos = inputRef.current?.selectionStart ?? null;
157
+ setCursorPos(newCursorPos);
158
+ if (newCursorPos &&
159
+ getHints(search, newCursorPos, fields, operators) !==
160
+ currentHintOptions)
161
+ setFocusIdx(0);
145
162
  }
146
163
  }
147
164
  };
148
165
  return (React.createElement(React.Fragment, null,
149
- 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), onClick: (e) => {
150
- if (e.target !== e.currentTarget)
151
- return;
152
- setCursorPos(inputRef.current?.selectionStart ?? null);
166
+ React.createElement(TextField, { ref: textFieldRef, inputRef: inputRef, fullWidth: true, size: "small", value: search, title: search, multiline: true, maxRows: 1, onChange: (e) => {
167
+ (instant ? handleChange : setSearch)(e.target.value);
168
+ const newCursorPos = inputRef.current?.selectionStart ?? null;
169
+ setCursorPos(newCursorPos);
170
+ if (newCursorPos &&
171
+ getHints(e.target.value, newCursorPos, fields, operators) !==
172
+ currentHintOptions)
173
+ setFocusIdx(0);
153
174
  }, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, slotProps: {
175
+ htmlInput: {
176
+ onClick: (e) => {
177
+ if (Object(e).target !== Object(e).currentTarget)
178
+ return;
179
+ const newCursorPos = inputRef.current?.selectionStart ?? null;
180
+ setCursorPos(newCursorPos);
181
+ if (newCursorPos &&
182
+ getHints(search, newCursorPos, fields, operators) !==
183
+ currentHintOptions)
184
+ setFocusIdx(0);
185
+ },
186
+ },
154
187
  input: {
155
188
  startAdornment: (React.createElement(InputAdornment, { position: "start" },
156
189
  React.createElement(Stack, { direction: "row", sx: { alignItems: "center" } },
157
190
  !instant && (React.createElement(IconButton, { onClick: (e) => {
158
- onChange(search, (v) => setSearchHist(v));
191
+ onChange(search);
159
192
  e.stopPropagation();
160
193
  }, title: "\u041F\u043E\u0438\u0441\u043A" },
161
194
  React.createElement(SearchRoundedIcon, null))),
@@ -170,8 +203,8 @@ const RichFilterTextField = ({ filterExpr, filterExprHist, fields, operators, ad
170
203
  },
171
204
  } }),
172
205
  React.createElement(HintOptionsMenu, { inputAnchor: inputAnchor, inputRef: inputRef, textFieldRef: textFieldRef, options: currentHintOptions, focusIdx: focusIdx, onSelectHint: insertHint, onClose: () => {
173
- setInputAnchor(null);
174
206
  setCursorPos(null);
207
+ setFocusIdx(0);
175
208
  } })));
176
209
  };
177
210
  export default RichFilterTextField;
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/RichFilterTextField/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,cAAc,EAEf,MAAM,4BAA4B,CAAC;AAapC,eAAO,MAAM,QAAQ,GACnB,QAAQ,MAAM,EACd,WAAW,MAAM,EACjB,QAAQ,WAAW,EAAE,EACrB,WAAW,cAAc,EAAE,oCAqE5B,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,QAAQ,MAAM,EACd,WAAW,MAAM,EACjB,MAAM,MAAM,EACZ,QAAQ,WAAW,EAAE;;;CAoFtB,CAAC"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/RichFilterTextField/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,cAAc,EAEf,MAAM,4BAA4B,CAAC;AAepC,eAAO,MAAM,QAAQ,GACnB,QAAQ,MAAM,EACd,WAAW,MAAM,EACjB,QAAQ,WAAW,EAAE,EACrB,WAAW,cAAc,EAAE,oCAqE5B,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,QAAQ,MAAM,EACd,WAAW,MAAM,EACjB,MAAM,MAAM,EACZ,QAAQ,WAAW,EAAE;;;CAoFtB,CAAC"}
@@ -1,5 +1,5 @@
1
1
  const getSingleMatch = (token, fields) => {
2
- const matchedFields = fields.filter((v) => v.name.startsWith(token));
2
+ const matchedFields = fields.filter((v) => v.name.toLowerCase().startsWith(token.toLowerCase()));
3
3
  if (matchedFields.length !== 1)
4
4
  return undefined;
5
5
  return matchedFields[0];
@@ -21,7 +21,7 @@ import RowContent from "./RowContent";
21
21
  const Scroller = React.forwardRef((props, ref) => (React.createElement(TableContainer, { component: Paper, ...props, ref: ref, sx: {
22
22
  minWidth: Object(props).context.minWidth || "100%",
23
23
  flexGrow: 1,
24
- overflowX: "unset",
24
+ overflowX: "auto",
25
25
  } },
26
26
  Object(props).children,
27
27
  Object(props).context.placeholder)));
@@ -83,7 +83,7 @@ export default function SmartTable({ rows, columns, pageN, numPages, perPage, lo
83
83
  ...col.colSx,
84
84
  } }, col.sortable ? (React.createElement(SortBtn, { field: col.fieldName, order: col.order || "none", onToggleSort: onToggleSort }, col.displayName)) : (col.displayName)))),
85
85
  ControlComponent && (React.createElement(TableCell, { sx: { ...controlComponentColSx }, scope: "col" }))));
86
- const headerSearchRow = (React.createElement(TableRow, { key: 1 }, globalSearch && globalSearchComponent ? (React.createElement(TableCell, { scope: "col", colSpan: columns.length + 1 }, globalSearchComponent())) : (React.createElement(React.Fragment, null,
86
+ const headerSearchRow = (React.createElement(TableRow, { key: 1 }, globalSearch && globalSearchComponent ? (React.createElement(TableCell, { scope: "col", colSpan: columns.length + 1 }, globalSearchComponent)) : (React.createElement(React.Fragment, null,
87
87
  hasSearchableColumns ? searchCols() : React.createElement(React.Fragment, null),
88
88
  ControlComponent && (React.createElement(TableCell, { sx: { ...controlComponentColSx }, scope: "col" }))))));
89
89
  const centerStyle = {
@@ -1,4 +1,4 @@
1
- import { ReactNode } from "react";
1
+ import { ReactElement, ReactNode } from "react";
2
2
  import { Column } from "../../types";
3
3
  import { SxProps, TableRowProps, Theme } from "@mui/material";
4
4
  export default interface SmartTableProps<T> {
@@ -17,7 +17,7 @@ export default interface SmartTableProps<T> {
17
17
  sx?: SxProps<Theme>;
18
18
  disablePerPageSelector?: boolean;
19
19
  globalSearch?: boolean;
20
- globalSearchComponent?(): ReactNode;
20
+ globalSearchComponent?: ReactElement;
21
21
  ContentWrapper?({ children, dagId, rowProps, }: {
22
22
  children?: ReactNode;
23
23
  dagId: string;
@@ -1 +1 @@
1
- {"version":3,"file":"SmartTableProps.d.ts","sourceRoot":"","sources":["../../../src/components/SmartTable/SmartTableProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,CAAC,OAAO,WAAW,eAAe,CAAC,CAAC;IACxC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qBAAqB,CAAC,IAAI,SAAS,CAAC;IACpC,cAAc,CAAC,CAAC,EACd,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,EAAE;QACD,QAAQ,CAAC,EAAE,SAAS,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,aAAa,CAAC;KACzB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACtB,WAAW,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,gBAAgB,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,SAAS,CAAC;IACrC,gBAAgB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC9C,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAClE,aAAa,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAAE,GAAG,IAAI,CAAC;IAClE,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,eAAe,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,qBAAqB,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B"}
1
+ {"version":3,"file":"SmartTableProps.d.ts","sourceRoot":"","sources":["../../../src/components/SmartTable/SmartTableProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,CAAC,OAAO,WAAW,eAAe,CAAC,CAAC;IACxC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qBAAqB,CAAC,EAAE,YAAY,CAAC;IACrC,cAAc,CAAC,CAAC,EACd,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,EAAE;QACD,QAAQ,CAAC,EAAE,SAAS,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,aAAa,CAAC;KACzB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACtB,WAAW,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,gBAAgB,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,SAAS,CAAC;IACrC,gBAAgB,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC9C,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAClE,aAAa,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAAE,GAAG,IAAI,CAAC;IAClE,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,eAAe,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,qBAAqB,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@danikokonn/yarik-frontend-lib",
3
- "version": "2.0.40",
3
+ "version": "2.0.42",
4
4
  "license": "Apache-2.0",
5
5
  "description": "",
6
6
  "author": "",