97 lines
2.7 KiB
JavaScript
97 lines
2.7 KiB
JavaScript
import BottomSelect from "@/components/icons/BottomSelect";
|
|
import { Autocomplete, Button, TextField } from "@mui/material";
|
|
import { styleTextSelectRight } from "@/mui";
|
|
|
|
function AutoSelector({
|
|
list,
|
|
value,
|
|
isError,
|
|
updateData,
|
|
label,
|
|
disabled = false,
|
|
listboxProps,
|
|
name,
|
|
}) {
|
|
return (
|
|
<Autocomplete
|
|
disablePortal
|
|
options={list}
|
|
disabled={disabled}
|
|
defaultValue={value || ""}
|
|
ListboxProps={listboxProps}
|
|
getOptionLabel={(option) => {
|
|
if (typeof option === "string") return option;
|
|
return option?.name || option?.label || "";
|
|
}}
|
|
className="!w-full !rounded-lg auto-complete-selector"
|
|
onChange={(e, newValue) => updateData(name, newValue?.label || "")}
|
|
sx={{
|
|
...styleTextSelectRight,
|
|
// Hide Icon Number
|
|
"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
|
|
{
|
|
display: "none",
|
|
},
|
|
"& input[type=number]": {
|
|
MozAppearance: "textfield",
|
|
},
|
|
"& .MuiInputBase-input": { padding: "12.5px 14px !important" },
|
|
"& .MuiInputBase-root": {
|
|
borderRadius: 2,
|
|
padding: "0 !important",
|
|
height: {
|
|
xs: "43px !important",
|
|
sm: "43px !important",
|
|
md: "46px !important",
|
|
lg: "48px !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) => (
|
|
<Button
|
|
fullWidth
|
|
{...props}
|
|
key={option.id || props.id}
|
|
className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
|
|
>
|
|
{option.name || 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 AutoSelector;
|