Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 4x 59x 59x 59x 59x 10x 10x 59x 59x | import { FocusEvent, useEffect, useState } from "react";
import ExpandedSearchBar from "@common/SearchBar/SearchBar";
import { SxProps } from "@mui/material";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
import ErrorCatcher from "@common/Error/ErrorCatcher";
import { DefaultSearchbar } from "./SearchBar";
interface SearchBarProps {
onChange: (value: string) => void;
value: string;
isExpandedByDefault?: boolean;
formSx?: SxProps;
}
const ControlledSearchBar = ({
onChange,
value,
isExpandedByDefault,
formSx,
}: SearchBarProps) => {
const { isDesktopView } = useCustomTheme();
const [expanded, setExpanded] = useState(false);
const onBlur = (event: FocusEvent) => {
if (!value) {
setExpanded(false);
onChange("");
}
};
useEffect(() => {
return () => {
onChange("");
};
}, []);
Iif (!isDesktopView) {
return (
<ExpandedSearchBar
IOCsetQueryString={onChange}
IOCqueryString={value}
formSx={{
width: "100%",
...formSx,
}}
/>
);
}
return expanded ? (
<ErrorCatcher errorID="ExpandedSearchBar">
<ExpandedSearchBar
onBlur={onBlur}
IOCsetQueryString={onChange}
IOCqueryString={value}
isExpandedByDefault={isExpandedByDefault}
formSx={{
width: isExpandedByDefault ? "100%" : "fit-content",
...formSx,
}}
collapse={() => {
setExpanded(false);
}}
autoFocus
/>
</ErrorCatcher>
) : (
<ErrorCatcher errorID="DefaultSearchbar">
<DefaultSearchbar onClick={() => setExpanded(true)} />
</ErrorCatcher>
);
};
export default ControlledSearchBar;
|