@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.
- package/dist/components/RichFilterTextField/RichFilterTextField.d.ts +1 -1
- package/dist/components/RichFilterTextField/RichFilterTextField.d.ts.map +1 -1
- package/dist/components/RichFilterTextField/RichFilterTextField.js +76 -43
- package/dist/components/RichFilterTextField/utils.d.ts.map +1 -1
- package/dist/components/RichFilterTextField/utils.js +1 -1
- package/dist/components/SmartTable/SmartTable.js +2 -2
- package/dist/components/SmartTable/SmartTableProps.d.ts +2 -2
- package/dist/components/SmartTable/SmartTableProps.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -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,
|
|
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, {
|
|
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
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
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
|
-
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
-
|
|
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
|
-
|
|
57
|
+
setSearch(newSearch);
|
|
58
|
+
if (instant)
|
|
59
|
+
onChange(newSearch);
|
|
60
|
+
let newCursorPos = newPos;
|
|
60
61
|
if (hint.includes("[") || hint.includes("(") || hint.includes("/")) {
|
|
61
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
106
|
-
setCursorPos(
|
|
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
|
-
|
|
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) =>
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
setCursorPos(
|
|
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
|
|
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;
|
|
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: "
|
|
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
|
|
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
|
|
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;
|
|
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"}
|