remove DropdownMenu, it's not needed
This commit is contained in:
parent
9385146d56
commit
daf11ea121
|
@ -1,75 +0,0 @@
|
|||
import { CheckIcon, CogIcon } from "@heroicons/react/solid";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
shift,
|
||||
useClick,
|
||||
useDismiss,
|
||||
useFloating,
|
||||
useInteractions,
|
||||
useRole,
|
||||
} from "@floating-ui/react-dom-interactions";
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
type DropdownMenuType = React.FC<Props> & {
|
||||
CheckboxItem: React.FC<{ label: string; value: boolean; toggle: () => void }>;
|
||||
};
|
||||
|
||||
export const DropdownMenu: DropdownMenuType = ({ children }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const { x, y, reference, floating, strategy, context } = useFloating({
|
||||
placement: "bottom-start",
|
||||
open: isOpen,
|
||||
onOpenChange: setIsOpen,
|
||||
middleware: [shift()],
|
||||
});
|
||||
|
||||
const { getReferenceProps, getFloatingProps } = useInteractions([
|
||||
useClick(context),
|
||||
useRole(context, { role: "menu" }),
|
||||
useDismiss(context),
|
||||
]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<CogIcon
|
||||
className="h-5 w-5 cursor-pointer text-slate-400 hover:text-slate-500"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
{...getReferenceProps({ ref: reference })}
|
||||
/>
|
||||
{isOpen ? (
|
||||
<div
|
||||
{...getFloatingProps({
|
||||
className: "rounded shadow z-10 bg-white",
|
||||
ref: floating,
|
||||
style: {
|
||||
position: strategy,
|
||||
top: y ?? 0,
|
||||
left: x ?? 0,
|
||||
},
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
DropdownMenu.CheckboxItem = ({ label, value, toggle }) => {
|
||||
return (
|
||||
<div
|
||||
className="px-4 py-2 cursor-pointer flex space-x-2 hover:bg-gray-100"
|
||||
onClick={toggle}
|
||||
>
|
||||
{value ? (
|
||||
<CheckIcon className="w-4 h-4 text-gray-700" />
|
||||
) : (
|
||||
<div className="w-4 h-4" />
|
||||
)}
|
||||
<span>{label}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
Loading…
Reference in New Issue
Block a user