66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import clsx from "clsx";
|
|
import {ComponentProps, useEffect, useState} from "react";
|
|
import ReactSelect, {GroupBase, StylesConfig} from "react-select";
|
|
import Option from "@/interfaces/option";
|
|
|
|
interface Props {
|
|
defaultValue?: Option;
|
|
value?: Option | null;
|
|
options: Option[];
|
|
disabled?: boolean;
|
|
placeholder?: string;
|
|
onChange: (value: Option | null) => void;
|
|
isClearable?: boolean;
|
|
styles?: StylesConfig<Option, boolean, GroupBase<Option>>;
|
|
className?: string;
|
|
}
|
|
|
|
export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable, className}: Props) {
|
|
const [target, setTarget] = useState<HTMLElement>();
|
|
|
|
useEffect(() => {
|
|
if (document) setTarget(document.body);
|
|
}, []);
|
|
|
|
return (
|
|
<ReactSelect
|
|
className={
|
|
styles
|
|
? undefined
|
|
: clsx(
|
|
"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
|
|
disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
|
|
className,
|
|
)
|
|
}
|
|
options={options}
|
|
value={value}
|
|
onChange={onChange as any}
|
|
placeholder={placeholder}
|
|
menuPortalTarget={target}
|
|
defaultValue={defaultValue}
|
|
styles={
|
|
styles || {
|
|
menuPortal: (base) => ({...base, zIndex: 9999}),
|
|
control: (styles) => ({
|
|
...styles,
|
|
paddingLeft: "4px",
|
|
border: "none",
|
|
outline: "none",
|
|
":focus": {
|
|
outline: "none",
|
|
},
|
|
}),
|
|
option: (styles, state) => ({
|
|
...styles,
|
|
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
|
|
color: state.isFocused ? "black" : styles.color,
|
|
}),
|
|
}
|
|
}
|
|
isDisabled={disabled}
|
|
isClearable={isClearable}
|
|
/>
|
|
);
|
|
}
|