import { cn } from '@colidy/ui-utils'; import * as SelectPrimitive from '@radix-ui/react-select'; import { Children, createContext, forwardRef, useContext, useEffect, useMemo, useState, } from 'react'; import { Label } from './Label'; import { useViewport } from '@colidy/hooks'; import { Drawer, DrawerBody, DrawerContent, DrawerTrigger } from './Drawer'; const SelectContext = createContext<{ isMobile: boolean; }>({ isMobile: false }); const useSelect = () => useContext(SelectContext); const MobileContext = createContext<{ value: any; valueChildren: any; setValueChildren: any; onValueChange: any; }>({ value: null, valueChildren: null, setValueChildren: null, onValueChange: null, }); const Select = forwardRef< HTMLDivElement, { label?: string; description?: string; placeholder?: string; children: React.ReactNode; containerProps?: React.HTMLAttributes; triggerProps?: React.ComponentProps; contentProps?: React.ComponentProps; } & React.ComponentProps >( ( { label, description, placeholder, children, triggerProps, contentProps, ...props }, ref ) => { const [isMobile, setIsMobile] = useState(false); const [valueChildren, setValueChildren] = useState(null); const { width } = useViewport(); useMemo(() => { setIsMobile(width <= 1024); }, [width]); useEffect(() => { if (isMobile) { setValueChildren( ( Children.toArray(children).find( (child: any) => child?.props?.value === props.value ) as any )?.props?.children ); } }, [children, props.value, isMobile]); return (

{label && } {isMobile ? ( {}), valueChildren, setValueChildren, }} > {children} ) : ( {children} )} {description && (

{description}

)}

); } ); Select.displayName = 'ColidySelect'; const SelectTrigger = forwardRef< HTMLButtonElement, { className?: string; children: React.ReactNode; } & React.ComponentProps >(({ children, className, ...props }, ref) => { const { isMobile } = useSelect(); return isMobile ? ( {children} ) : ( ); }); SelectTrigger.displayName = 'ColidySelectTrigger'; const SelectValue = forwardRef< HTMLDivElement, { placeholder?: string; } & React.ComponentProps >((props, ref) => { const { isMobile } = useSelect(); const { valueChildren } = useContext(MobileContext); return isMobile ? (

{valueChildren ? ( valueChildren ) : ( {props.placeholder} )}

) : ( ); }); SelectValue.displayName = 'ColidySelectValue'; const SelectContent = forwardRef< HTMLDivElement, React.ComponentProps >(({ children, className, ...props }, ref) => { const { isMobile } = useSelect(); return isMobile ? ( {children} ) : ( {children} ); }); SelectContent.displayName = 'ColidySelectContent'; const SelectGroup = forwardRef< HTMLDivElement, { label: string; children: React.ReactNode } >(({ label, children }, ref) => { const { isMobile } = useSelect(); return isMobile ? (

{label}

{children}

) : ( {label} {children} ); }); SelectGroup.displayName = 'ColidySelectGroup'; const SelectSeparator = forwardRef((props, ref) => { const { isMobile } = useSelect(); return isMobile ? (

) : ( ); }); SelectSeparator.displayName = 'ColidySelectSeparator'; const SelectItem = forwardRef< HTMLDivElement, { children: React.ReactNode; className?: string; } & React.ComponentProps >(({ children, className, ...props }, ref) => { const { isMobile } = useSelect(); const { value, onValueChange, setValueChildren } = useContext(MobileContext); return isMobile ? (

{ onValueChange?.(props.value); setValueChildren(children); }} > {children} {props.value === value && ( )}

) : ( {children} ); }); SelectItem.displayName = 'ColidySelectItem'; export { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectSeparator, SelectItem, };

Installation