generated from fahricansecer/boilerplate-fe
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { Dialog as ChakraDialog, Portal } from '@chakra-ui/react';
|
|
import { CloseButton } from '@/components/ui/buttons/close-button';
|
|
import * as React from 'react';
|
|
|
|
interface DialogContentProps extends ChakraDialog.ContentProps {
|
|
portalled?: boolean;
|
|
portalRef?: React.RefObject<HTMLElement | null>;
|
|
backdrop?: boolean;
|
|
}
|
|
|
|
export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(function DialogContent(props, ref) {
|
|
const { children, portalled = true, portalRef, backdrop = true, ...rest } = props;
|
|
|
|
return (
|
|
<Portal disabled={!portalled} container={portalRef}>
|
|
{backdrop && <ChakraDialog.Backdrop />}
|
|
<ChakraDialog.Positioner>
|
|
<ChakraDialog.Content ref={ref} {...rest} asChild={false}>
|
|
{children}
|
|
</ChakraDialog.Content>
|
|
</ChakraDialog.Positioner>
|
|
</Portal>
|
|
);
|
|
});
|
|
|
|
export const DialogCloseTrigger = React.forwardRef<HTMLButtonElement, ChakraDialog.CloseTriggerProps>(
|
|
function DialogCloseTrigger(props, ref) {
|
|
return (
|
|
<ChakraDialog.CloseTrigger position='absolute' top='2' insetEnd='2' {...props} asChild>
|
|
<CloseButton size='sm' ref={ref}>
|
|
{props.children}
|
|
</CloseButton>
|
|
</ChakraDialog.CloseTrigger>
|
|
);
|
|
},
|
|
);
|
|
|
|
export const DialogRoot = ChakraDialog.Root;
|
|
export const DialogFooter = ChakraDialog.Footer;
|
|
export const DialogHeader = ChakraDialog.Header;
|
|
export const DialogBody = ChakraDialog.Body;
|
|
export const DialogBackdrop = ChakraDialog.Backdrop;
|
|
export const DialogTitle = ChakraDialog.Title;
|
|
export const DialogDescription = ChakraDialog.Description;
|
|
export const DialogTrigger = ChakraDialog.Trigger;
|
|
export const DialogActionTrigger = ChakraDialog.ActionTrigger;
|