45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import * as React from 'react';
|
|
import { Dropdown } from '../dropdown';
|
|
import { DropdownMenuTrigger } from './DropdownMenuTrigger';
|
|
import { DropdownMenuContent } from './DropdownMenuContent';
|
|
import type { DropdownMenuProps } from './types';
|
|
|
|
export const DropdownMenu: React.FC<DropdownMenuProps> = ({
|
|
open,
|
|
onOpenChange,
|
|
children,
|
|
}) => {
|
|
const [_internalOpen, setInternalOpen] = React.useState(false);
|
|
const isControlled = open !== undefined;
|
|
const handleOpenChange = (newOpen: boolean) => {
|
|
if (!isControlled) {
|
|
setInternalOpen(newOpen);
|
|
}
|
|
onOpenChange?.(newOpen);
|
|
};
|
|
|
|
const trigger = React.Children.toArray(children).find(
|
|
(child) =>
|
|
React.isValidElement(child) && child.type === DropdownMenuTrigger,
|
|
);
|
|
const content = React.Children.toArray(children).find(
|
|
(child) =>
|
|
React.isValidElement(child) && child.type === DropdownMenuContent,
|
|
);
|
|
|
|
if (!trigger || !content) {
|
|
return <>{children}</>;
|
|
}
|
|
|
|
const resolvedOpen = isControlled ? open : _internalOpen;
|
|
|
|
return (
|
|
<Dropdown
|
|
trigger={trigger}
|
|
open={resolvedOpen}
|
|
onOpenChange={handleOpenChange}
|
|
>
|
|
{React.isValidElement(content) ? content.props.children : content}
|
|
</Dropdown>
|
|
);
|
|
};
|