@agilant/toga-blox 1.0.42 → 1.0.43
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,47 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ColumnInstance } from "react-table";
|
|
3
|
-
/** A single search criterion used by InputAndCheck. */
|
|
4
|
-
export type SearchCriterion<T extends object> = {
|
|
5
|
-
searchColumn: ColumnInstance<T>;
|
|
6
|
-
submittedSearchText: string;
|
|
7
|
-
};
|
|
8
|
-
/** The props needed by <InputAndCheck>. */
|
|
9
|
-
export type InputAndCheckProps<T extends object> = {
|
|
10
|
-
closeOutSearch: (value: number | null) => void;
|
|
11
|
-
setResetSearch: React.Dispatch<React.SetStateAction<boolean>>;
|
|
12
|
-
setEditingHeader: (value: number | null) => void;
|
|
13
|
-
/** The column we’re editing/searching on. */
|
|
14
|
-
column: ColumnInstance<T>;
|
|
15
|
-
/** The search criteria state we manage. */
|
|
16
|
-
searchCriteria: SearchCriterion<T>[];
|
|
17
|
-
setSearchCriteria: React.Dispatch<React.SetStateAction<SearchCriterion<T>[]>>;
|
|
18
|
-
/** Optional styling or icons. */
|
|
19
|
-
badgeColor?: string;
|
|
20
|
-
badgeIcon?: {
|
|
21
|
-
icon: string;
|
|
22
|
-
weight: string;
|
|
23
|
-
};
|
|
24
|
-
iconBadgeContainerClasses?: string;
|
|
25
|
-
searchIcon?: {
|
|
26
|
-
icon: string;
|
|
27
|
-
weight: string;
|
|
28
|
-
};
|
|
29
|
-
cancelIcon?: {
|
|
30
|
-
icon: string;
|
|
31
|
-
weight: string;
|
|
32
|
-
};
|
|
33
|
-
initialIcon?: {
|
|
34
|
-
icon: string;
|
|
35
|
-
weight: string;
|
|
36
|
-
};
|
|
37
|
-
initialIconClasses?: string;
|
|
38
|
-
searchIconClasses?: string;
|
|
39
|
-
additionalInputClasses?: string;
|
|
40
|
-
secondIconClasses?: string;
|
|
41
|
-
};
|
|
42
|
-
/**
|
|
43
|
-
* Renders an input field for column-based searching,
|
|
44
|
-
* maintaining local text and updating searchCriteria on submit.
|
|
45
|
-
*/
|
|
1
|
+
import { InputAndCheckProps } from "./types";
|
|
46
2
|
declare function InputAndCheck<T extends object>({ closeOutSearch, setResetSearch, setEditingHeader, column, searchCriteria, setSearchCriteria, badgeColor, badgeIcon, cancelIcon, iconBadgeContainerClasses, searchIcon, searchIconClasses, additionalInputClasses, secondIconClasses, initialIcon, initialIconClasses, }: InputAndCheckProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
47
3
|
export default InputAndCheck;
|
|
@@ -1,17 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
// src/components/InputAndCheck/InputAndCheck.tsx
|
|
3
2
|
import { useEffect, useRef, useState } from "react";
|
|
4
3
|
import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
|
|
5
4
|
import Badge from "../Badge";
|
|
6
5
|
import TableHeaderInput from "../TableHeaderInput";
|
|
7
|
-
/**
|
|
8
|
-
* Renders an input field for column-based searching,
|
|
9
|
-
* maintaining local text and updating searchCriteria on submit.
|
|
10
|
-
*/
|
|
11
6
|
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", }) {
|
|
12
7
|
const containerRef = useRef(null);
|
|
13
8
|
const [localSearchText, setLocalSearchText] = useState("");
|
|
14
|
-
// On mount/update, see if we already have a search criterion for this column
|
|
15
9
|
useEffect(() => {
|
|
16
10
|
const existing = searchCriteria.find((criterion) => criterion.searchColumn.id === column.id);
|
|
17
11
|
if (existing) {
|
|
@@ -21,19 +15,15 @@ function InputAndCheck({ closeOutSearch, setResetSearch, setEditingHeader, colum
|
|
|
21
15
|
setLocalSearchText("");
|
|
22
16
|
}
|
|
23
17
|
}, [searchCriteria, column.id]);
|
|
24
|
-
// Update local text as user types
|
|
25
18
|
const handleInputChange = (e) => {
|
|
26
19
|
setLocalSearchText(e.target.value);
|
|
27
20
|
};
|
|
28
|
-
// Submit the final text to searchCriteria
|
|
29
21
|
const handleSubmit = () => {
|
|
30
22
|
const trimmed = localSearchText.trim();
|
|
31
23
|
if (!trimmed) {
|
|
32
|
-
// Clear from search criteria if empty
|
|
33
24
|
setSearchCriteria((prev) => prev.filter((c) => c.searchColumn.id !== column.id));
|
|
34
25
|
}
|
|
35
26
|
else {
|
|
36
|
-
// Insert or update existing
|
|
37
27
|
setSearchCriteria((prev) => {
|
|
38
28
|
const existingIndex = prev.findIndex((c) => c.searchColumn.id === column.id);
|
|
39
29
|
if (existingIndex >= 0) {
|
|
@@ -52,23 +42,20 @@ function InputAndCheck({ closeOutSearch, setResetSearch, setEditingHeader, colum
|
|
|
52
42
|
}
|
|
53
43
|
});
|
|
54
44
|
}
|
|
55
|
-
// Close out
|
|
56
45
|
setEditingHeader(null);
|
|
57
46
|
};
|
|
58
|
-
// Clears search from parent's state
|
|
59
47
|
const handleClearSearch = () => {
|
|
60
48
|
setSearchCriteria((prev) => prev.filter((c) => c.searchColumn.id !== column.id));
|
|
61
49
|
setLocalSearchText("");
|
|
62
50
|
setResetSearch((prev) => !prev);
|
|
63
51
|
closeOutSearch(null);
|
|
64
52
|
};
|
|
65
|
-
// Let user press Enter
|
|
66
53
|
const handleKeyDown = (e) => {
|
|
67
54
|
if (e.key === "Enter") {
|
|
68
55
|
e.preventDefault();
|
|
69
56
|
handleSubmit();
|
|
70
57
|
}
|
|
71
58
|
};
|
|
72
|
-
return (_jsxs("div", {
|
|
59
|
+
return (_jsxs("div", { "data-testid": "icon-search-regular", ref: containerRef, className: "relative", children: [_jsxs("div", { className: "flex flex-col border rounded-md shadow-md", children: [_jsx("div", { className: "flex", children: _jsx(TableHeaderInput, { hasAutoFocus: true, value: localSearchText, onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", onChange: handleInputChange, additionalClasses: additionalInputClasses, placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx("span", { className: initialIconClasses, children: getFontAwesomeIcon(initialIcon.icon) })) : undefined, iconPosition: "both", secondIcon: localSearchText !== "" && (_jsx("div", { className: secondIconClasses, onClick: handleClearSearch, children: getFontAwesomeIcon(cancelIcon.icon) })) }) }), localSearchText && (_jsx("div", { className: "bg-white flex flex-start px-2", children: _jsx(Badge, { text: localSearchText, type: "span", cursorPointer: true, onClick: handleClearSearch, hasRightIcon: true, backgroundColor: badgeColor, badgeContainerClasses: iconBadgeContainerClasses, icon: getFontAwesomeIcon(badgeIcon.icon) }) }))] }), localSearchText && (_jsx("div", { onClick: handleSubmit, className: searchIconClasses, children: getFontAwesomeIcon(searchIcon.icon) }))] }));
|
|
73
60
|
}
|
|
74
61
|
export default InputAndCheck;
|