import clsx from "clsx" import { ClearIndicatorProps, components, ContainerProps, DropdownIndicatorProps, GroupBase, InputProps, MenuListProps, MenuProps, MultiValueProps, NoticeProps, OptionProps, PlaceholderProps, SingleValueProps, } from "react-select" import CheckIcon from "../../fundamentals/icons/check-icon" import ChevronDownIcon from "../../fundamentals/icons/chevron-down" import SearchIcon from "../../fundamentals/icons/search-icon" import XCircleIcon from "../../fundamentals/icons/x-circle-icon" const MultiValueLabel = < Option, IsMulti extends boolean, Group extends GroupBase >({ innerProps, data, selectProps: { value, isSearchable, menuIsOpen }, children, }: MultiValueProps) => { const isLast = Array.isArray(value) ? value[value.length - 1] === data : true if (menuIsOpen && isSearchable) { return null } return ( {children} ) } const Menu = < Option, IsMulti extends boolean, Group extends GroupBase >({ className, ...props }: MenuProps) => { return ( {props.children} ) } const MenuList = < Option, IsMulti extends boolean, Group extends GroupBase >({ className, ...props }: MenuListProps) => { return ( ) } const Placeholder = < Option, IsMulti extends boolean, Group extends GroupBase >( props: PlaceholderProps ) => { return props.selectProps.menuIsOpen ? null : ( ) } const SingleValue = < Option, IsMulti extends boolean, Group extends GroupBase >({ children, ...props }: SingleValueProps) => { if (props.selectProps.menuIsOpen && props.selectProps.isSearchable) { return null } return {children} } const DropdownIndicator = < Option, IsMulti extends boolean, Group extends GroupBase >({ innerProps, selectProps: { menuIsOpen }, }: DropdownIndicatorProps) => { return ( ) } const SelectContainer = < Option, IsMulti extends boolean, Group extends GroupBase >( props: ContainerProps ) => { return ( ) } const Input = < Option, IsMulti extends boolean, Group extends GroupBase >( props: InputProps ) => { if ( props.isHidden || !props.selectProps.menuIsOpen || !props.selectProps.isSearchable ) { return } return ( ) } const ClearIndicator = < Option, IsMulti extends boolean, Group extends GroupBase >({ innerProps, selectProps: { isMulti, menuIsOpen }, }: ClearIndicatorProps) => { if (menuIsOpen || isMulti) { return <>> } return ( ) } const CheckboxAdornment = ({ isSelected }: { isSelected: boolean }) => { return ( {isSelected && } ) } const RadioAdornment = ({ isSelected }: { isSelected: boolean }) => { return ( {isSelected && ( )} ) } const NoOptionsMessage = < Option, IsMulti extends boolean, Group extends GroupBase >({ innerProps, selectProps: { isLoading }, }: NoticeProps) => { return ( {isLoading ? "Loading..." : "No options"} ) } const Option = < Option, IsMulti extends boolean, Group extends GroupBase >({ className, ...props }: OptionProps) => { return ( {props.data?.value !== "all" && props.data?.label !== "Select All" ? ( <> {props.isMulti ? ( ) : ( )} {props.data.label} > ) : ( {props.data.label} )} ) } export const SelectComponents = { Menu, MenuList, Placeholder, SingleValue, DropdownIndicator, SelectContainer, Input, ClearIndicator, CheckboxAdornment, RadioAdornment, NoOptionsMessage, Option, IndicatorSeparator: () => null, MultiValueRemove: () => null, MultiValueLabel, }
{isLoading ? "Loading..." : "No options"}