80 lines
2.1 KiB
TypeScript
80 lines
2.1 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;
|
|
isClearable?: boolean;
|
|
styles?: StylesConfig<Option, boolean, GroupBase<Option>>;
|
|
className?: string;
|
|
label?: string;
|
|
}
|
|
|
|
interface MultiProps {
|
|
isMulti: true
|
|
onChange: (value: Option[] | null) => void
|
|
}
|
|
|
|
interface SingleProps {
|
|
isMulti?: false
|
|
onChange: (value: Option | null) => void
|
|
}
|
|
|
|
export default function Select({ value, isMulti, defaultValue, options, placeholder, disabled, onChange, styles, isClearable, label, className }: Props & (MultiProps | SingleProps)) {
|
|
const [target, setTarget] = useState<HTMLElement>();
|
|
|
|
useEffect(() => {
|
|
if (document) setTarget(document.body);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="w-full flex flex-col gap-3">
|
|
{label && <label className="font-normal text-base text-mti-gray-dim">{label}</label>}
|
|
<ReactSelect
|
|
isMulti={isMulti}
|
|
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}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|