devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ENCOA-275

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-12-13 15:13:27 +00:00
parent 61d1bbbe13
commit f3057c675f
4 changed files with 109 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Low/Select.tsx
View File

@@ -1,6 +1,6 @@
import clsx from "clsx";
import {ComponentProps, useEffect, useState} from "react";
import ReactSelect, {GroupBase, StylesConfig} from "react-select";
import { ComponentProps, useEffect, useState } from "react";
import ReactSelect, { GroupBase, StylesConfig } from "react-select";
import Option from "@/interfaces/option";
interface Props {
@@ -9,14 +9,23 @@ interface Props {
options: Option[];
disabled?: boolean;
placeholder?: string;
onChange: (value: Option | null) => void;
isClearable?: boolean;
styles?: StylesConfig<Option, boolean, GroupBase<Option>>;
className?: string;
label?: string;
}
export default function Select({value, defaultValue, options, placeholder, disabled, onChange, styles, isClearable, label, className}: Props) {
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(() => {
@@ -27,14 +36,15 @@ export default function Select({value, defaultValue, options, placeholder, disab
<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,
)
"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}
@@ -44,7 +54,7 @@ export default function Select({value, defaultValue, options, placeholder, disab
defaultValue={defaultValue}
styles={
styles || {
menuPortal: (base) => ({...base, zIndex: 9999}),
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
control: (styles) => ({
...styles,
paddingLeft: "4px",