76 lines
2.2 KiB
JavaScript
76 lines
2.2 KiB
JavaScript
import BottomSelect from "@/components/icons/BottomSelect";
|
|
import { Autocomplete, Button, TextField } from "@mui/material";
|
|
import { styleTextSelectRight } from "@/mui";
|
|
|
|
function AutoCompleteSelect({ list, isError, updateData, name, label }) {
|
|
return (
|
|
<Autocomplete
|
|
disablePortal
|
|
options={list}
|
|
className="!w-full !rounded-lg"
|
|
onChange={(event) => updateData && updateData(event, name)}
|
|
sx={{
|
|
...styleTextSelectRight,
|
|
// Hide Icon Number
|
|
"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
|
|
{
|
|
display: "none",
|
|
},
|
|
"& input[type=number]": {
|
|
MozAppearance: "textfield",
|
|
},
|
|
"& .MuiInputBase-root": {
|
|
borderRadius: 2,
|
|
padding: "5px 16px !important",
|
|
},
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
border: "1px solid #D7D7D7",
|
|
},
|
|
"& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
|
|
{
|
|
borderColor: "#D7D7D7 !important",
|
|
},
|
|
"& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
|
|
{
|
|
border: "1px solid #5559CE !important",
|
|
},
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
border: isError ? "1px solid red !important" : "",
|
|
},
|
|
}}
|
|
renderOption={(props, option) => {
|
|
return (
|
|
<Button
|
|
{...props}
|
|
fullWidth
|
|
className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
|
|
style={{}}
|
|
>
|
|
{option.label}
|
|
</Button>
|
|
);
|
|
}}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
fullWidth
|
|
{...params}
|
|
InputProps={{
|
|
...params.InputProps,
|
|
endAdornment: (
|
|
<div className="absolute left-4">
|
|
<BottomSelect />
|
|
</div>
|
|
),
|
|
}}
|
|
placeholder={label}
|
|
sx={{
|
|
borderRadius: "8px",
|
|
}}
|
|
/>
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default AutoCompleteSelect;
|