import * as React from 'react' ; import * as PropTypes from 'prop-types' ; import _omit from 'lodash/omit' ; import { useUniqueId } from '../uniqueId' ; import { Box } from '../primitives' ; import { Omit } from '../types' ; import ActionButtons , { ActionButtonsProps , actionButtonsPropTypes } from '../Button/ActionButtons' ; import { ButtonProps , buttonPropTypes } from '../Button/Button' ; import DialogDialog , { DialogDialogProps , LocalDialogDialogProps , dialogDialogPropTypes , dialogDialogDefaultProps } from './DialogDialog' ; import DialogContent , { DialogContentProps } from './DialogContent' ; import DialogHeader , { DialogHeaderProps } from './DialogHeader' ; import DialogFooter , { DialogFooterProps } from './DialogFooter' ; import DialogTitle , { DialogTitleProps } from './DialogTitle' ; import DialogClose , { DialogCloseProps } from './DialogClose' ; import DialogIcon , { DialogIconProps } from './DialogIcon' ; export type LocalDialogProps = LocalDialogDialogProps & { actionButtonsProps ? : ActionButtonsProps ; a11yDescriptionId ? : string ; a11yTitleId ? : string ; children : React . ReactNode ; className ? : string ; closeButtonProps ? : Omit < ButtonProps , 'children' > ; footer ? : string | React . ReactElement < any > ; hasScroll ? : boolean ; onClickClose ? : ( ) => void ; showActionButtons ? : boolean ; showCloseButton ? : boolean ; title ? : string | React . ReactElement < any > ; type ? : string ; } ; export type DialogProps = LocalDialogProps & DialogDialogProps ; export type DialogComponents = { Dialog : React . FunctionComponent < DialogDialogProps > ; Content : React . FunctionComponent < DialogContentProps > ; Header : React . FunctionComponent < DialogHeaderProps > ; Footer : React . FunctionComponent < DialogFooterProps > ; Title : React . FunctionComponent < DialogTitleProps > ; Close : React . FunctionComponent < DialogCloseProps > ; Icon : React . FunctionComponent < DialogIconProps > ; } ; export const Dialog = ( { a11yDescriptionId : _a11yDescriptionId , a11yTitleId : _a11yTitleId , actionButtonsProps , children , closeButtonProps , footer , hasScroll , onClickClose , showActionButtons , showCloseButton , title , type , ... props } ) => { const titleId = useUniqueId ( 'Dialog' ) ; const descriptionId = useUniqueId ( 'Dialog' ) ; const a11yDescriptionId = _a11yDescriptionId || descriptionId ; const a11yTitleId = _a11yTitleId || titleId ; return ( < DialogDialog a11yDescriptionId = { a11yDescriptionId } a11yTitleId = { a11yTitleId } { ... props } > { title && ( < DialogHeader > { typeof title === 'string' ? ( < DialogTitle id = { a11yTitleId } > { type && < DialogIcon a11yHidden color = { type } icon = { type } / > } { title } < /DialogTitle>) : (title)} { showCloseButton && < DialogClose onClick = { onClickClose } { ... closeButtonProps } />} < /DialogHeader>)} < DialogContent id = { a11yDescriptionId } hasScroll = { hasScroll } > { children } < /DialogContent> { ( footer || showActionButtons ) && ( < DialogFooter justifyContent = { footer ? 'space-between' : 'flex-end' } > { footer && < Box > { footer } < /Box>} { showActionButtons && ( < Box > < ActionButtons { ... actionButtonsProps } / > < /Box>)} < /DialogFooter>)} < /DialogDialog>); } ; Dialog . Dialog = DialogDialog ; Dialog . Header = DialogHeader ; Dialog . Content = DialogContent ; Dialog . Footer = DialogFooter ; Dialog . Title = DialogTitle ; Dialog . Close = DialogClose ; Dialog . Icon = DialogIcon ; export const dialogPropTypes = { actionButtonsProps : PropTypes . shape ( actionButtonsPropTypes ) , a11yDescriptionId : PropTypes . string , a11yTitleId : PropTypes . string , children : PropTypes . node . isRequired , className : PropTypes . string , closeButtonProps : PropTypes . shape ( _omit ( buttonPropTypes , 'children' ) ) , footer : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . element ] ) , hasScroll : PropTypes . bool , onClickClose : PropTypes . func , showActionButtons : PropTypes . bool , showCloseButton : PropTypes . bool , title : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . element ] ) , type : PropTypes . string , ... dialogDialogPropTypes } ; Dialog . propTypes = dialogPropTypes ; export const dialogDefaultProps = { ... dialogDialogDefaultProps , actionButtonsProps : { } , a11yDescriptionId : undefined , a11yTitleId : undefined , className : undefined , closeButtonProps : { } , footer : undefined , hasScroll : false , onClickClose : undefined , showActionButtons : false , showCloseButton : false , title : undefined , type : undefined } ; Dialog . defaultProps = dialogDefaultProps ; const C = Dialog ; export default C ;