base
This commit is contained in:
+108
@@ -0,0 +1,108 @@
|
||||
import type { Placement } from "@popperjs/core";
|
||||
|
||||
export interface IDropdown {
|
||||
// root props
|
||||
onOpen?: () => void;
|
||||
onClose?: () => void;
|
||||
containerClassName?: string | ((isOpen: boolean) => string);
|
||||
tabIndex?: number;
|
||||
placement?: Placement;
|
||||
disabled?: boolean;
|
||||
|
||||
// button props
|
||||
buttonContent?: (isOpen: boolean, value: string | string[] | undefined) => React.ReactNode;
|
||||
buttonContainerClassName?: string;
|
||||
buttonClassName?: string;
|
||||
|
||||
// input props
|
||||
disableSearch?: boolean;
|
||||
inputPlaceholder?: string;
|
||||
inputClassName?: string;
|
||||
inputIcon?: React.ReactNode;
|
||||
inputContainerClassName?: string;
|
||||
|
||||
// options props
|
||||
keyExtractor: (option: TDropdownOption) => string;
|
||||
optionsContainerClassName?: string;
|
||||
queryArray?: string[];
|
||||
sortByKey?: string;
|
||||
firstItem?: (optionValue: string) => boolean;
|
||||
renderItem?: ({
|
||||
value,
|
||||
selected,
|
||||
disabled,
|
||||
}: {
|
||||
value: string;
|
||||
selected: boolean;
|
||||
disabled?: boolean;
|
||||
}) => React.ReactNode;
|
||||
loader?: React.ReactNode;
|
||||
disableSorting?: boolean;
|
||||
}
|
||||
|
||||
export interface TDropdownOption {
|
||||
data: any;
|
||||
value: string;
|
||||
className?: ({ active, selected }: { active: boolean; selected?: boolean }) => string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export interface IMultiSelectDropdown extends IDropdown {
|
||||
value: string[];
|
||||
onChange: (value: string[]) => void;
|
||||
options: TDropdownOption[] | undefined;
|
||||
}
|
||||
|
||||
export interface ISingleSelectDropdown extends IDropdown {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
options: TDropdownOption[] | undefined;
|
||||
}
|
||||
|
||||
export interface IDropdownButton {
|
||||
isOpen: boolean;
|
||||
buttonContent?: (isOpen: boolean, value: string | string[] | undefined) => React.ReactNode;
|
||||
buttonClassName?: string;
|
||||
buttonContainerClassName?: string;
|
||||
handleOnClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
||||
setReferenceElement: (element: HTMLButtonElement | null) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export interface IMultiSelectDropdownButton extends IDropdownButton {
|
||||
value: string[];
|
||||
}
|
||||
|
||||
export interface ISingleSelectDropdownButton extends IDropdownButton {
|
||||
value: string;
|
||||
}
|
||||
|
||||
export interface IDropdownOptions {
|
||||
isOpen: boolean;
|
||||
query: string;
|
||||
setQuery: (query: string) => void;
|
||||
|
||||
inputPlaceholder?: string;
|
||||
inputClassName?: string;
|
||||
inputIcon?: React.ReactNode;
|
||||
inputContainerClassName?: string;
|
||||
disableSearch?: boolean;
|
||||
|
||||
handleClose?: () => void;
|
||||
|
||||
keyExtractor: (option: TDropdownOption) => string;
|
||||
renderItem:
|
||||
| (({ value, selected, disabled }: { value: string; selected: boolean; disabled?: boolean }) => React.ReactNode)
|
||||
| undefined;
|
||||
options: TDropdownOption[] | undefined;
|
||||
loader?: React.ReactNode;
|
||||
isMobile?: boolean;
|
||||
}
|
||||
|
||||
export interface IMultiSelectDropdownOptions extends IDropdownOptions {
|
||||
value: string[];
|
||||
}
|
||||
|
||||
export interface ISingleSelectDropdownOptions extends IDropdownOptions {
|
||||
value: string;
|
||||
}
|
||||
Reference in New Issue
Block a user