0ct0pu5/runtipi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: create DropdownMenu component with radix-ui primitives

Browse source
This commit is contained in:
Nicolas Meienberger 2023-06-07 21:13:47 +02:00 • committed by Nicolas Meienberger
parent 8072cfbce4
commit 633baf24d0
2 changed files with 58 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/client/components/ui/DropdownMenu/DropdownMenu.tsx Normal file
View file

@ -0,0 +1,57 @@
'use client';
import * as React from 'react';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import { IconChevronRight } from '@tabler/icons-react';
import clsx from 'clsx';
const DropdownMenu = DropdownMenuPrimitive.Root;
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
const DropdownMenuSubTrigger = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean;
}
>(({ className, inset, children, ...props }, ref) => (
<DropdownMenuPrimitive.SubTrigger ref={ref} className={clsx('', inset && 'ps-8', className)} {...props}>
{children}
<IconChevronRight className="" />
</DropdownMenuPrimitive.SubTrigger>
));
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
const DropdownMenuSubContent = React.forwardRef<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>>(
({ className, ...props }, ref) => <DropdownMenuPrimitive.SubContent ref={ref} className={clsx('', className)} {...props} />,
);
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
const DropdownMenuContent = React.forwardRef<React.ElementRef<typeof DropdownMenuPrimitive.Content>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>>(
({ className, sideOffset = 4, ...props }, ref) => (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content ref={ref} sideOffset={sideOffset} className={clsx('dropdown-menu d-block position-relative', className)} {...props} />
</DropdownMenuPrimitive.Portal>
),
);
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
const DropdownMenuItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean;
}
>(({ className, inset, ...props }, ref) => <DropdownMenuPrimitive.Item ref={ref} className={clsx('dropdown-item cursor-pointer', inset && 'ps-1', className)} {...props} />);
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
const DropdownMenuLabel = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean;
}
>(({ className, inset, ...props }, ref) => <DropdownMenuPrimitive.Label ref={ref} className={clsx('dropdown-header', inset && 'pl-8', className)} {...props} />);
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuGroup };

1
src/client/components/ui/DropdownMenu/index.ts Normal file
View file

@ -0,0 +1 @@
export { DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuContent, DropdownMenuTrigger } from './DropdownMenu';