kopia lustrzana https://github.com/Tldraw/Tldraw
42 wiersze
1.0 KiB
TypeScript
42 wiersze
1.0 KiB
TypeScript
import * as React from 'react'
|
|
import { Content } from '@radix-ui/react-dropdown-menu'
|
|
import { styled } from '~styles/stitches.config'
|
|
import { MenuContent } from '~components/MenuContent'
|
|
|
|
export interface DMContentProps {
|
|
variant?: 'grid' | 'menu' | 'horizontal'
|
|
align?: 'start' | 'center' | 'end'
|
|
children: React.ReactNode
|
|
}
|
|
|
|
const preventDefault = (e: Event) => e.stopPropagation()
|
|
|
|
export function DMContent({ children, align, variant }: DMContentProps): JSX.Element {
|
|
return (
|
|
<Content sideOffset={8} dir="ltr" asChild align={align} onEscapeKeyDown={preventDefault}>
|
|
<StyledContent variant={variant}>{children}</StyledContent>
|
|
</Content>
|
|
)
|
|
}
|
|
|
|
export const StyledContent = styled(MenuContent, {
|
|
width: 'fit-content',
|
|
height: 'fit-content',
|
|
minWidth: 0,
|
|
variants: {
|
|
variant: {
|
|
grid: {
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(4, auto)',
|
|
gap: 0,
|
|
},
|
|
horizontal: {
|
|
flexDirection: 'row',
|
|
},
|
|
menu: {
|
|
minWidth: 128,
|
|
},
|
|
},
|
|
},
|
|
})
|