|
|
|
@ -1,4 +1,4 @@ |
|
|
|
|
import { FC, ReactNode, useContext, useMemo } from 'react'; |
|
|
|
|
import { FC, ReactNode, useCallback, useContext, useMemo } from 'react'; |
|
|
|
|
|
|
|
|
|
import { DialogContext } from './Dialog'; |
|
|
|
|
import IconButton from '../IconButton'; |
|
|
|
@ -7,10 +7,29 @@ import sxstring from '../../lib/sxstring'; |
|
|
|
|
import { HeaderText } from '../Text'; |
|
|
|
|
|
|
|
|
|
const DialogHeader: FC<DialogHeaderProps> = (props) => { |
|
|
|
|
const { children, showClose } = props; |
|
|
|
|
const { |
|
|
|
|
children, |
|
|
|
|
onClose = ({ handlers: { base } }, ...args) => base?.call(null, ...args), |
|
|
|
|
showClose, |
|
|
|
|
} = props; |
|
|
|
|
|
|
|
|
|
const dialogContext = useContext(DialogContext); |
|
|
|
|
|
|
|
|
|
const closeHandler = useCallback<ButtonClickEventHandler>( |
|
|
|
|
(...args) => |
|
|
|
|
onClose( |
|
|
|
|
{ |
|
|
|
|
handlers: { |
|
|
|
|
base: () => { |
|
|
|
|
dialogContext?.setOpen(false); |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
...args, |
|
|
|
|
), |
|
|
|
|
[dialogContext, onClose], |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const title = useMemo<ReactNode>( |
|
|
|
|
() => sxstring(children, HeaderText), |
|
|
|
|
[children], |
|
|
|
@ -19,15 +38,9 @@ const DialogHeader: FC<DialogHeaderProps> = (props) => { |
|
|
|
|
const close = useMemo<ReactNode>( |
|
|
|
|
() => |
|
|
|
|
showClose && ( |
|
|
|
|
<IconButton |
|
|
|
|
mapPreset="close" |
|
|
|
|
onClick={() => { |
|
|
|
|
dialogContext?.setOpen(false); |
|
|
|
|
}} |
|
|
|
|
size="small" |
|
|
|
|
/> |
|
|
|
|
<IconButton mapPreset="close" onClick={closeHandler} size="small" /> |
|
|
|
|
), |
|
|
|
|
[dialogContext, showClose], |
|
|
|
|
[closeHandler, showClose], |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|