169 lines
4.8 KiB
TypeScript
169 lines
4.8 KiB
TypeScript
import * as React from "react";
|
|
import Autocomplete from "@mui/material/Autocomplete";
|
|
import TextField from "@mui/material/TextField";
|
|
import { cn } from "../../lib/utils";
|
|
|
|
export interface AutocompleteOption {
|
|
value: string;
|
|
label: string;
|
|
}
|
|
|
|
export interface CustomAutocompleteProps {
|
|
options: AutocompleteOption[];
|
|
value?: string;
|
|
onValueChange?: (value: string) => void;
|
|
placeholder?: string;
|
|
className?: string;
|
|
disabled?: boolean;
|
|
id?: string;
|
|
}
|
|
|
|
|
|
const CustomAutocomplete = React.forwardRef<HTMLDivElement, CustomAutocompleteProps>(
|
|
(
|
|
{
|
|
options,
|
|
value,
|
|
onValueChange,
|
|
placeholder = "Selecione uma opção...",
|
|
className,
|
|
disabled,
|
|
id,
|
|
},
|
|
ref
|
|
) => {
|
|
const selectedOption = options.find((option) => option.value === value) || null;
|
|
|
|
const handleChange = (
|
|
_event: React.SyntheticEvent,
|
|
newValue: AutocompleteOption | null
|
|
) => {
|
|
onValueChange?.(newValue?.value || "");
|
|
};
|
|
|
|
return (
|
|
<Autocomplete<AutocompleteOption, false, false, false>
|
|
ref={ref}
|
|
id={id}
|
|
options={options}
|
|
value={selectedOption}
|
|
onChange={handleChange}
|
|
getOptionLabel={(option) => option.label}
|
|
isOptionEqualToValue={(option, value) => option.value === value.value}
|
|
disabled={disabled}
|
|
className={cn("w-full", className)}
|
|
disablePortal
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
placeholder={placeholder}
|
|
variant="outlined"
|
|
sx={{
|
|
"& .MuiOutlinedInput-root": {
|
|
height: "40px",
|
|
borderRadius: "12px",
|
|
borderColor: "#cbd5e1",
|
|
backgroundColor: "#ffffff",
|
|
fontSize: "14px",
|
|
color: "#0f172a",
|
|
padding: "0",
|
|
"&:hover": {
|
|
"& fieldset": {
|
|
borderColor: "#cbd5e1",
|
|
},
|
|
},
|
|
"&.Mui-focused": {
|
|
borderColor: "#002147",
|
|
boxShadow: "0 0 0 2px rgba(0, 33, 71, 0.1)",
|
|
"& fieldset": {
|
|
borderColor: "#002147",
|
|
borderWidth: "1px",
|
|
},
|
|
},
|
|
"&.Mui-disabled": {
|
|
backgroundColor: "#ffffff",
|
|
opacity: 0.5,
|
|
cursor: "not-allowed",
|
|
},
|
|
"& fieldset": {
|
|
borderColor: "#cbd5e1",
|
|
borderWidth: "1px",
|
|
},
|
|
},
|
|
"& .MuiInputBase-input": {
|
|
padding: "8px 16px",
|
|
fontSize: "14px",
|
|
color: "#0f172a",
|
|
"&::placeholder": {
|
|
color: "#94a3b8",
|
|
opacity: 1,
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
)}
|
|
sx={{
|
|
"& .MuiAutocomplete-endAdornment": {
|
|
right: "12px",
|
|
},
|
|
"& .MuiAutocomplete-clearIndicator": {
|
|
color: "#64748b",
|
|
"&:hover": {
|
|
color: "#0f172a",
|
|
},
|
|
},
|
|
"& .MuiAutocomplete-popupIndicator": {
|
|
color: "#64748b",
|
|
"&:hover": {
|
|
color: "#0f172a",
|
|
},
|
|
},
|
|
}}
|
|
componentsProps={{
|
|
popper: {
|
|
sx: {
|
|
"& .MuiAutocomplete-paper": {
|
|
borderRadius: "12px",
|
|
border: "1px solid #e2e8f0",
|
|
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
|
marginTop: "4px",
|
|
},
|
|
"& .MuiAutocomplete-listbox": {
|
|
padding: "4px",
|
|
"& .MuiAutocomplete-option": {
|
|
borderRadius: "8px",
|
|
margin: "2px 0",
|
|
fontSize: "14px",
|
|
padding: "8px 12px",
|
|
"&:hover": {
|
|
backgroundColor: "#f1f5f9",
|
|
},
|
|
"&[aria-selected='true']": {
|
|
backgroundColor: "#f1f5f9",
|
|
color: "#002147",
|
|
fontWeight: 600,
|
|
},
|
|
"&.Mui-focused": {
|
|
backgroundColor: "#f1f5f9",
|
|
},
|
|
},
|
|
"& .MuiAutocomplete-noOptions": {
|
|
fontSize: "14px",
|
|
color: "#64748b",
|
|
padding: "16px",
|
|
textAlign: "center",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
noOptionsText="Nenhuma opção encontrada"
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
CustomAutocomplete.displayName = "CustomAutocomplete";
|
|
|
|
export { CustomAutocomplete };
|
|
|