fix(striker-ui): expose close handler in dialog header
This commit is contained in:
parent
08ab5eacf8
commit
fcfb410a97
@ -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 (
|
||||
|
@ -18,6 +18,7 @@ const DialogWithHeader: ForwardRefExoticComponent<
|
||||
dialogProps,
|
||||
header,
|
||||
loading,
|
||||
onClose,
|
||||
openInitially,
|
||||
showClose,
|
||||
wide,
|
||||
@ -31,7 +32,9 @@ const DialogWithHeader: ForwardRefExoticComponent<
|
||||
ref={ref}
|
||||
wide={wide}
|
||||
>
|
||||
<DialogHeader showClose={showClose}>{header}</DialogHeader>
|
||||
<DialogHeader onClose={onClose} showClose={showClose}>
|
||||
{header}
|
||||
</DialogHeader>
|
||||
{children}
|
||||
</Dialog>
|
||||
);
|
||||
|
1
striker-ui/types/Dialog.d.ts
vendored
1
striker-ui/types/Dialog.d.ts
vendored
@ -39,6 +39,7 @@ type DialogActionGroupProps = DialogActionGroupOptionalProps;
|
||||
/** DialogHeader */
|
||||
|
||||
type DialogHeaderOptionalProps = {
|
||||
onClose?: ExtendableEventHandler<ButtonClickEventHandler>;
|
||||
showClose?: boolean;
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user