@agilant/toga-blox 1.0.43 → 1.0.44
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,4 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// In your NPM library @agilant/toga-blox/dist/components/InputAndCheck/InputAndCheck
|
|
3
|
+
// EXACTLY as you showed (with Badge, TableHeaderInput, etc.):
|
|
2
4
|
import { useEffect, useRef, useState } from "react";
|
|
3
5
|
import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
|
|
4
6
|
import Badge from "../Badge";
|
|
@@ -6,6 +8,7 @@ import TableHeaderInput from "../TableHeaderInput";
|
|
|
6
8
|
function InputAndCheck({ closeOutSearch, setResetSearch, setEditingHeader, column, searchCriteria, setSearchCriteria, badgeColor = "bg-blue-400", badgeIcon = { icon: "x", weight: "regular" }, cancelIcon = { icon: "xmark", weight: "regular" }, iconBadgeContainerClasses = "mr-2 rounded-full p-2 text-white cursor-pointer my-2 text-sm", searchIcon = { icon: "search", weight: "regular" }, searchIconClasses = " text-md absolute right-3 top-2 text-gray-400 hover:cursor-pointer hover:text-blue-500 ", additionalInputClasses = "min-w-[300px] max-w-[250px] border-b border-t-0 border-r-0 rounded-tl-none rounded-tr-lg bg-gray-50 text-gray-800 flex", secondIconClasses = "flex absolute right-6 top-0.5 items-center text-gray-400 hover:cursor-pointer hover:text-blue-400", initialIcon = { icon: "search", weight: "regular" }, initialIconClasses = "text-gray-400", }) {
|
|
7
9
|
const containerRef = useRef(null);
|
|
8
10
|
const [localSearchText, setLocalSearchText] = useState("");
|
|
11
|
+
// Load initial text from searchCriteria:
|
|
9
12
|
useEffect(() => {
|
|
10
13
|
const existing = searchCriteria.find((criterion) => criterion.searchColumn.id === column.id);
|
|
11
14
|
if (existing) {
|
|
@@ -15,24 +18,28 @@ function InputAndCheck({ closeOutSearch, setResetSearch, setEditingHeader, colum
|
|
|
15
18
|
setLocalSearchText("");
|
|
16
19
|
}
|
|
17
20
|
}, [searchCriteria, column.id]);
|
|
21
|
+
// Handle changes
|
|
18
22
|
const handleInputChange = (e) => {
|
|
19
23
|
setLocalSearchText(e.target.value);
|
|
20
24
|
};
|
|
25
|
+
// Submit
|
|
21
26
|
const handleSubmit = () => {
|
|
22
27
|
const trimmed = localSearchText.trim();
|
|
23
28
|
if (!trimmed) {
|
|
29
|
+
// remove criterion
|
|
24
30
|
setSearchCriteria((prev) => prev.filter((c) => c.searchColumn.id !== column.id));
|
|
25
31
|
}
|
|
26
32
|
else {
|
|
33
|
+
// add or update
|
|
27
34
|
setSearchCriteria((prev) => {
|
|
28
35
|
const existingIndex = prev.findIndex((c) => c.searchColumn.id === column.id);
|
|
29
36
|
if (existingIndex >= 0) {
|
|
30
|
-
const
|
|
31
|
-
|
|
37
|
+
const clone = [...prev];
|
|
38
|
+
clone[existingIndex] = {
|
|
32
39
|
searchColumn: column,
|
|
33
40
|
submittedSearchText: trimmed,
|
|
34
41
|
};
|
|
35
|
-
return
|
|
42
|
+
return clone;
|
|
36
43
|
}
|
|
37
44
|
else {
|
|
38
45
|
return [
|
|
@@ -44,12 +51,14 @@ function InputAndCheck({ closeOutSearch, setResetSearch, setEditingHeader, colum
|
|
|
44
51
|
}
|
|
45
52
|
setEditingHeader(null);
|
|
46
53
|
};
|
|
54
|
+
// Clear
|
|
47
55
|
const handleClearSearch = () => {
|
|
48
56
|
setSearchCriteria((prev) => prev.filter((c) => c.searchColumn.id !== column.id));
|
|
49
57
|
setLocalSearchText("");
|
|
50
58
|
setResetSearch((prev) => !prev);
|
|
51
59
|
closeOutSearch(null);
|
|
52
60
|
};
|
|
61
|
+
// Let user press Enter
|
|
53
62
|
const handleKeyDown = (e) => {
|
|
54
63
|
if (e.key === "Enter") {
|
|
55
64
|
e.preventDefault();
|