@patreon/studio
Version:
Patreon Studio Design System
68 lines (64 loc) • 4.44 kB
JSX
/**
* @author @Patreon/fe-core
**/
'use client';
import React from 'react';
import { TouchScrollable } from 'react-scrolllock';
import { useSwipe } from '../../hooks/useSwipe';
import { Backdrop } from '../Dialog/components/Backdrop';
import { DialogContainer } from '../Dialog/components/DialogContainer';
import { DialogFooter } from '../Dialog/components/DialogFooter';
import { DialogHeader } from '../Dialog/components/DialogHeader';
import { DialogNavigation } from '../Dialog/components/DialogNavigation';
import { HeadingText } from '../HeadingText';
import { Root, Body, BodyArea, Container, Wrapper, Content } from './styled-components';
/** @deprecated use the `OverlayTriggerToggle` + `OverlayDrawer` components instead */
export function Drawer({ children, id, isOpen, onCloseRequest, onBackRequest, onOpenAnimationComplete, onCloseAnimationComplete, size = 'lg', padding = 'default', scrollable = 'all', media, title, titleAlign = 'left', ariaLabel, showCloseButton, primaryAction, secondaryAction, tertiaryAction, actionLayout = 'horizontal', 'data-tag': dataTag, flow = 'fullscreen', }) {
// handle swipe right to close
useSwipe({
isActive: isOpen,
handleSwipe: (ev, direction) => {
if (direction === 'right') {
// The use of `unknown` here is due to the fact that the `onCloseRequest` hook is typed to `TouchEvent`
// and not `React.MouseEvent`. This decision was made to avoid the complexity of having to manage multiple
// event types since this is the only place where a touch event is used.
onCloseRequest?.(ev, 'swipe');
}
},
});
// 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;
return (<DialogContainer id={id} isOpen={isOpen} title={title} ariaLabel={ariaLabel} flow={flow} onCloseRequest={onCloseRequest} onOpenAnimationComplete={onOpenAnimationComplete} onCloseAnimationComplete={onCloseAnimationComplete}>
{/* TODO (legacied @typescript-eslint/no-shadow)
This failure is legacied in and should be updated. DO NOT COPY. */}
{/* eslint-disable-next-line @typescript-eslint/no-shadow */}
{({ id, ariaProps, titleId, contentId, handleClose, transitionPhase, viewport }) => {
const bodyContent = (<Body id={contentId} $scrollable={scrollable}>
{!showHeader && (<DialogNavigation onBackRequest={onBackRequest} showCloseButton={showCloseButton} handleClose={handleClose} scrollable={scrollable}/>)}
<BodyArea $padding={padding} data-tag="dialog-body-area">
{children}
</BodyArea>
</Body>);
return (<Root id={id} 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 actionLayout={actionLayout} primaryAction={primaryAction} secondaryAction={secondaryAction} tertiaryAction={tertiaryAction} scrollable={scrollable} useFullWrapper={useFullWrapper}/>)}
</Container>
</Wrapper>
</Root>);
}}
</DialogContainer>);
}
/* expose default title component */
Drawer.Title = HeadingText;
/* export content component for custom styles */
Drawer.Content = Content;
//# sourceMappingURL=index.jsx.map