You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

109 lines
3.0 KiB
JavaScript

import React, { useState, useContext, Fragment } from 'react'
import { Link } from '@inertiajs/react'
import { Transition } from '@headlessui/react'
const DropDownContext = React.createContext()
const Dropdown = ({ children }) => {
const [open, setOpen] = useState(false)
const toggleOpen = () => {
setOpen((previousState) => !previousState)
}
return (
<DropDownContext.Provider value={{ open, setOpen, toggleOpen }}>
<div className="relative">{children}</div>
</DropDownContext.Provider>
)
}
const Trigger = ({ children }) => {
const { open, setOpen, toggleOpen } = useContext(DropDownContext)
return (
<>
<div onClick={toggleOpen}>{children}</div>
{open && (
<div
className="fixed inset-0 z-40"
onClick={() => setOpen(false)}
></div>
)}
</>
)
}
const Content = ({
align = 'right',
width = '48',
contentClasses = 'py-1 bg-white',
children,
}) => {
const { open, setOpen } = useContext(DropDownContext)
let alignmentClasses = 'origin-top'
if (align === 'left') {
alignmentClasses = 'origin-top-left left-0'
} else if (align === 'right') {
alignmentClasses = 'origin-top-right right-0'
}
let widthClasses = 'w-96'
if (width === '48') {
widthClasses = 'w-48'
}
return (
<>
<Transition
as={Fragment}
show={open}
enter="transition ease-out duration-200"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<div
className={`absolute z-50 mt-2 rounded-md shadow-lg ${alignmentClasses} ${widthClasses}`}
onClick={() => setOpen(false)}
>
<div
className={
`rounded-md ring-1 ring-black ring-opacity-5 dark:bg-gray-700 ` +
contentClasses
}
>
{children}
</div>
</div>
</Transition>
</>
)
}
const DropdownLink = ({ href, method, as, children, target = 'self' }) => {
return (
<Link
href={href}
method={method}
as={as}
target={target}
className="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none transition duration-150 ease-in-out dark:text-white hover:dark:bg-gray-500"
>
{children}
</Link>
)
}
Dropdown.Trigger = Trigger
Dropdown.Content = Content
Dropdown.Link = DropdownLink
export default Dropdown