mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

Remove forwardRef

Browse source
This commit is contained in:
Rihan 2022-12-13 22:50:36 +00:00 committed by GitHub
parent 0ee269c877
commit ca695b12a1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/components/Dropdown.tsx
View file

@ -14,48 +14,46 @@ interface DropdownProps {
options: Array<OptionItem>; options: Array<OptionItem>;
} }
export const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>( export function Dropdown(props: DropdownProps) {
(props: DropdownProps) => ( <div className="relative my-4 max-w-[18rem]">
<div className="relative my-4 max-w-[18rem]"> <Listbox value={props.selectedItem} onChange={props.setSelectedItem}>
<Listbox value={props.selectedItem} onChange={props.setSelectedItem}> {({ open }) => (
{({ open }) => ( <>
<> <Listbox.Button className="relative w-full cursor-default rounded-lg bg-denim-500 py-2 pl-3 pr-10 text-left text-white shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-bink-500 focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-bink-300 sm:text-sm">
<Listbox.Button className="relative w-full cursor-default rounded-lg bg-denim-500 py-2 pl-3 pr-10 text-left text-white shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-bink-500 focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-bink-300 sm:text-sm"> <span className="block truncate">{props.selectedItem.name}</span>
<span className="block truncate">{props.selectedItem.name}</span> <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"> <Icon
<Icon icon={Icons.CHEVRON_DOWN}
icon={Icons.CHEVRON_DOWN} className={`transform transition-transform ${
className={`transform transition-transform ${ open ? "rotate-180" : ""
open ? "rotate-180" : "" }`}
}`} />
/> </span>
</span> </Listbox.Button>
</Listbox.Button> <Transition
<Transition as={Fragment}
as={Fragment} leave="transition ease-in duration-100"
leave="transition ease-in duration-100" leaveFrom="opacity-100"
leaveFrom="opacity-100" leaveTo="opacity-0"
leaveTo="opacity-0" >
> <Listbox.Options className="absolute bottom-11 left-0 right-0 z-10 mt-1 max-h-60 overflow-auto rounded-md bg-denim-500 py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 scrollbar-thin scrollbar-track-denim-400 scrollbar-thumb-denim-200 focus:outline-none sm:bottom-10 sm:text-sm">
<Listbox.Options className="absolute bottom-11 left-0 right-0 z-10 mt-1 max-h-60 overflow-auto rounded-md bg-denim-500 py-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 scrollbar-thin scrollbar-track-denim-400 scrollbar-thumb-denim-200 focus:outline-none sm:bottom-10 sm:text-sm"> {props.options.map((opt) => (
{props.options.map((opt) => ( <Listbox.Option
<Listbox.Option className={({ active }) =>
className={({ active }) => `relative cursor-default select-none py-2 pl-10 pr-4 ${
`relative cursor-default select-none py-2 pl-10 pr-4 ${ active ? "bg-denim-400 text-bink-700" : "text-white"
active ? "bg-denim-400 text-bink-700" : "text-white" }`
}` }
} key={opt.id}
key={opt.id} value={opt}
value={opt} >
> {opt.name}
{opt.name} </Listbox.Option>
</Listbox.Option> ))}
))} </Listbox.Options>
</Listbox.Options> </Transition>
</Transition> </>
</> )}
)} </Listbox>
</Listbox> </div>;
</div> }
)
);