@patreon/studio
Version:
Patreon Studio Design System
60 lines (56 loc) • 4.03 kB
JSX
'use client';
import React from 'react';
import { TouchScrollable } from 'react-scrolllock';
import { HeadingText } from '~/components/HeadingText';
import { useLogger } from '~/hooks/useLogger';
import { Backdrop } from './components/Backdrop';
import { DialogContainer } from './components/DialogContainer';
import { DialogFooter } from './components/DialogFooter';
import { DialogHeader } from './components/DialogHeader';
import { DialogNavigation } from './components/DialogNavigation';
import { Body, BodyArea, Container, Content, Root, Wrapper } from './styled-components';
/** @deprecated use the `OverlayTriggerToggle` + `OverlayDialog` components instead */
export function Dialog(props) {
const { children, id, isOpen, onCloseRequest, onBackRequest, onOpenAnimationComplete, onCloseAnimationComplete, size = 'lg', padding = 'default', scrollable = 'all', media, title, titleAlign = 'left', ariaLabel, showCloseButton, primaryAction, secondaryAction, tertiaryAction, actionLayout = 'horizontal', metaData, loggerId, loggerProps, 'data-tag': dataTag, flow = 'fullscreen', } = props;
const log = useLogger();
// show header when media or title is defined
const showHeader = media || title;
const showFooter = primaryAction || secondaryAction || tertiaryAction;
// with no children while scrollable all there is
// no gap between headers and footers
const useFullWrapper = scrollable === 'all' && !children;
const onOpenAnimationCompleteOverride = () => {
log('dialogOpen', loggerId, loggerProps);
onOpenAnimationComplete?.();
};
const onCloseAnimationCompleteOverride = () => {
log('dialogClose', loggerId, loggerProps);
onCloseAnimationComplete?.();
};
return (<DialogContainer id={id} isOpen={isOpen} title={title} ariaLabel={ariaLabel} flow={flow} onCloseRequest={onCloseRequest} onOpenAnimationComplete={onOpenAnimationCompleteOverride} onCloseAnimationComplete={onCloseAnimationCompleteOverride}>
{({ id: innerId, ariaProps, titleId, contentId, handleClose, transitionPhase, viewport }) => {
const bodyContent = (<Body id={contentId} $scrollable={scrollable}>
{!showHeader && (<DialogNavigation onBackRequest={onBackRequest} handleClose={handleClose} showCloseButton={showCloseButton} scrollable={scrollable}/>)}
<BodyArea $padding={padding} data-tag="dialog-body-area">
{children}
</BodyArea>
</Body>);
return (<Root id={innerId} tabIndex={0} data-tag={dataTag} $isOpen={isOpen} $transitionPhase={transitionPhase} $viewportHeight={viewport.height} $scrollable={scrollable} $flow={flow} {...ariaProps}>
<Backdrop $isOpen={isOpen} $transitionPhase={transitionPhase} $flow={flow} onClick={handleClose('backdrop')} data-tag="dialog-cover"/>
<Wrapper $scrollable={scrollable} $flow={flow}>
<Container $isOpen={isOpen} $size={size} $scrollable={scrollable} $transitionPhase={transitionPhase} $flow={flow} data-tag="dialog-container">
{showHeader && (<DialogHeader title={title} titleAlign={titleAlign} titleId={titleId} media={media} onBackRequest={onBackRequest} handleClose={handleClose} showCloseButton={showCloseButton} scrollable={scrollable} useFullWrapper={useFullWrapper}/>)}
{!!children &&
(scrollable === 'all' ? (bodyContent) : (<TouchScrollable data-tag="dialog-touch-container">{bodyContent}</TouchScrollable>))}
{showFooter && (<DialogFooter metaData={metaData} actionLayout={actionLayout} primaryAction={primaryAction} secondaryAction={secondaryAction} tertiaryAction={tertiaryAction} scrollable={scrollable} useFullWrapper={useFullWrapper}/>)}
</Container>
</Wrapper>
</Root>);
}}
</DialogContainer>);
}
/* expose default title component */
Dialog.Title = HeadingText;
/* export content component for custom styles */
Dialog.Content = Content;
//# sourceMappingURL=index.jsx.map