|
| 1 | +import React, {forwardRef, useRef} from 'react' |
| 2 | +import styled from 'styled-components' |
| 3 | +import {IconButton} from './Button' |
| 4 | +import {get} from './constants' |
| 5 | +import Box from './Box' |
| 6 | +import useDialog from './hooks/useDialog' |
| 7 | +import sx, {SxProp} from './sx' |
| 8 | +import Text from './Text' |
| 9 | +import {ComponentProps} from './utils/types' |
| 10 | +import {useRefObjectAsForwardedRef} from './hooks/useRefObjectAsForwardedRef' |
| 11 | +import {XIcon} from '@primer/octicons-react' |
| 12 | + |
| 13 | +const noop = () => null |
| 14 | + |
| 15 | +type StyledDialogBaseProps = { |
| 16 | + narrow?: boolean |
| 17 | + wide?: boolean |
| 18 | +} & SxProp |
| 19 | + |
| 20 | +const DialogBase = styled.div<StyledDialogBaseProps>` |
| 21 | + box-shadow: ${get('shadows.shadow.large')}; |
| 22 | + border-radius: ${get('radii.2')}; |
| 23 | + position: fixed; |
| 24 | + top: 0; |
| 25 | + left: 50%; |
| 26 | + transform: translateX(-50%); |
| 27 | + max-height: 80vh; |
| 28 | + z-index: 999; |
| 29 | + margin: 10vh auto; |
| 30 | + background-color: ${get('colors.canvas.default')}; |
| 31 | + width: ${props => (props.narrow ? '320px' : props.wide ? '640px' : '440px')}; |
| 32 | + outline: none; |
| 33 | +
|
| 34 | + @media screen and (max-width: 750px) { |
| 35 | + width: 100vw; |
| 36 | + margin: 0; |
| 37 | + border-radius: 0; |
| 38 | + height: 100vh; |
| 39 | + } |
| 40 | +
|
| 41 | + ${sx}; |
| 42 | +` |
| 43 | + |
| 44 | +const DialogHeaderBase = styled(Box)<SxProp>` |
| 45 | + border-radius: ${get('radii.2')} ${get('radii.2')} 0px 0px; |
| 46 | + border-bottom: 1px solid ${get('colors.border.default')}; |
| 47 | + display: flex; |
| 48 | +
|
| 49 | + @media screen and (max-width: 750px) { |
| 50 | + border-radius: 0px; |
| 51 | + } |
| 52 | +
|
| 53 | + ${sx}; |
| 54 | +` |
| 55 | +export type DialogHeaderProps = ComponentProps<typeof DialogHeaderBase> |
| 56 | + |
| 57 | +function DialogHeader({theme, children, backgroundColor = 'canvas.subtle', ...rest}: DialogHeaderProps) { |
| 58 | + if (React.Children.toArray(children).every(ch => typeof ch === 'string')) { |
| 59 | + children = ( |
| 60 | + <Text theme={theme} color="fg.default" fontSize={1} fontWeight="bold" fontFamily="sans-serif"> |
| 61 | + {children} |
| 62 | + </Text> |
| 63 | + ) |
| 64 | + } |
| 65 | + |
| 66 | + return ( |
| 67 | + <DialogHeaderBase theme={theme} p={3} backgroundColor={backgroundColor} {...rest}> |
| 68 | + {children} |
| 69 | + </DialogHeaderBase> |
| 70 | + ) |
| 71 | +} |
| 72 | + |
| 73 | +const Overlay = styled.span` |
| 74 | + &:before { |
| 75 | + position: fixed; |
| 76 | + top: 0; |
| 77 | + right: 0; |
| 78 | + bottom: 0; |
| 79 | + left: 0; |
| 80 | + display: block; |
| 81 | + cursor: default; |
| 82 | + content: ' '; |
| 83 | + background: transparent; |
| 84 | + z-index: 99; |
| 85 | + background: ${get('colors.primer.canvas.backdrop')}; |
| 86 | + } |
| 87 | +` |
| 88 | + |
| 89 | +type InternalDialogProps = { |
| 90 | + isOpen?: boolean |
| 91 | + onDismiss?: () => void |
| 92 | + initialFocusRef?: React.RefObject<HTMLElement> |
| 93 | + returnFocusRef?: React.RefObject<HTMLElement> |
| 94 | +} & ComponentProps<typeof DialogBase> |
| 95 | + |
| 96 | +const Dialog = forwardRef<HTMLDivElement, InternalDialogProps>( |
| 97 | + ({children, onDismiss = noop, isOpen, initialFocusRef, returnFocusRef, ...props}, forwardedRef) => { |
| 98 | + const overlayRef = useRef(null) |
| 99 | + const modalRef = useRef<HTMLDivElement>(null) |
| 100 | + useRefObjectAsForwardedRef(forwardedRef, modalRef) |
| 101 | + const closeButtonRef = useRef(null) |
| 102 | + |
| 103 | + const onCloseClick = () => { |
| 104 | + onDismiss() |
| 105 | + if (returnFocusRef && returnFocusRef.current) { |
| 106 | + returnFocusRef.current.focus() |
| 107 | + } |
| 108 | + } |
| 109 | + |
| 110 | + const {getDialogProps} = useDialog({ |
| 111 | + modalRef, |
| 112 | + onDismiss: onCloseClick, |
| 113 | + isOpen, |
| 114 | + initialFocusRef, |
| 115 | + closeButtonRef, |
| 116 | + returnFocusRef, |
| 117 | + overlayRef, |
| 118 | + }) |
| 119 | + return isOpen ? ( |
| 120 | + <> |
| 121 | + <Overlay ref={overlayRef} /> |
| 122 | + <DialogBase tabIndex={-1} ref={modalRef} role="dialog" aria-modal="true" {...props} {...getDialogProps()}> |
| 123 | + <IconButton |
| 124 | + icon={XIcon} |
| 125 | + ref={closeButtonRef} |
| 126 | + onClick={onCloseClick} |
| 127 | + sx={{position: 'absolute', top: '8px', right: '16px'}} |
| 128 | + aria-label="Close" |
| 129 | + variant="invisible" |
| 130 | + /> |
| 131 | + {children} |
| 132 | + </DialogBase> |
| 133 | + </> |
| 134 | + ) : null |
| 135 | + }, |
| 136 | +) |
| 137 | + |
| 138 | +DialogHeader.propTypes = { |
| 139 | + ...Box.propTypes, |
| 140 | +} |
| 141 | + |
| 142 | +DialogHeader.displayName = 'Dialog.Header' |
| 143 | +Dialog.displayName = 'Dialog' |
| 144 | + |
| 145 | +export type DialogProps = ComponentProps<typeof Dialog> |
| 146 | +export default Object.assign(Dialog, {Header: DialogHeader}) |
0 commit comments