fix(striker-ui): expose close handler in dialog header

main^2
Tsu-ba-me 7 months ago
parent 08ab5eacf8
commit fcfb410a97
  1. 33
      striker-ui/components/Dialog/DialogHeader.tsx
  2. 5
      striker-ui/components/Dialog/DialogWithHeader.tsx
  3. 1
      striker-ui/types/Dialog.d.ts

@ -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>
);

@ -39,6 +39,7 @@ type DialogActionGroupProps = DialogActionGroupOptionalProps;
/** DialogHeader */
type DialogHeaderOptionalProps = {
onClose?: ExtendableEventHandler<ButtonClickEventHandler>;
showClose?: boolean;
};

Loading…
Cancel
Save