2023-11-16 15:07:32 +08:00
|
|
|
import * as React from 'react';
|
2022-09-21 16:35:01 +08:00
|
|
|
import classNames from 'classnames';
|
2023-03-30 14:55:34 +08:00
|
|
|
import type { DrawerProps as RCDrawerProps } from 'rc-drawer';
|
2023-06-16 15:36:28 +08:00
|
|
|
import useClosable from '../_util/hooks/useClosable';
|
2023-09-25 20:37:37 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
|
|
|
|
2024-01-09 10:20:40 +08:00
|
|
|
export interface DrawerClassNames extends NonNullable<RCDrawerProps['classNames']> {
|
2023-09-25 20:37:37 +08:00
|
|
|
header?: string;
|
|
|
|
body?: string;
|
|
|
|
footer?: string;
|
|
|
|
}
|
|
|
|
|
2024-01-09 10:20:40 +08:00
|
|
|
export interface DrawerStyles extends NonNullable<RCDrawerProps['styles']> {
|
2023-09-25 20:37:37 +08:00
|
|
|
header?: React.CSSProperties;
|
|
|
|
body?: React.CSSProperties;
|
|
|
|
footer?: React.CSSProperties;
|
|
|
|
}
|
2022-09-21 16:35:01 +08:00
|
|
|
|
|
|
|
export interface DrawerPanelProps {
|
|
|
|
prefixCls: string;
|
|
|
|
|
|
|
|
title?: React.ReactNode;
|
|
|
|
footer?: React.ReactNode;
|
|
|
|
extra?: React.ReactNode;
|
2023-06-14 22:37:00 +08:00
|
|
|
/**
|
2023-06-20 13:42:55 +08:00
|
|
|
* Recommend to use closeIcon instead
|
2023-06-14 22:37:00 +08:00
|
|
|
*
|
|
|
|
* e.g.
|
|
|
|
*
|
|
|
|
* `<Drawer closeIcon={false} />`
|
|
|
|
*/
|
2024-02-28 14:11:15 +08:00
|
|
|
closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
|
2024-01-11 15:11:55 +08:00
|
|
|
closeIcon?: React.ReactNode;
|
2022-09-21 16:35:01 +08:00
|
|
|
onClose?: RCDrawerProps['onClose'];
|
|
|
|
|
2024-01-09 10:20:40 +08:00
|
|
|
children?: React.ReactNode;
|
|
|
|
classNames?: DrawerClassNames;
|
|
|
|
styles?: DrawerStyles;
|
|
|
|
|
2023-09-25 20:37:37 +08:00
|
|
|
/** @deprecated Please use `styles.header` instead */
|
2022-09-21 16:35:01 +08:00
|
|
|
headerStyle?: React.CSSProperties;
|
2023-09-25 20:37:37 +08:00
|
|
|
/** @deprecated Please use `styles.body` instead */
|
2022-09-21 16:35:01 +08:00
|
|
|
bodyStyle?: React.CSSProperties;
|
2023-09-25 20:37:37 +08:00
|
|
|
/** @deprecated Please use `styles.footer` instead */
|
2022-09-21 16:35:01 +08:00
|
|
|
footerStyle?: React.CSSProperties;
|
2024-01-09 10:20:40 +08:00
|
|
|
/** @deprecated Please use `styles.wrapper` instead */
|
|
|
|
contentWrapperStyle?: React.CSSProperties;
|
|
|
|
/** @deprecated Please use `styles.mask` instead */
|
|
|
|
maskStyle?: React.CSSProperties;
|
|
|
|
/** @deprecated Please use `styles.content` instead */
|
|
|
|
drawerStyle?: React.CSSProperties;
|
2022-09-21 16:35:01 +08:00
|
|
|
}
|
|
|
|
|
2023-03-30 14:55:34 +08:00
|
|
|
const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
|
2022-09-21 16:35:01 +08:00
|
|
|
const {
|
|
|
|
prefixCls,
|
|
|
|
title,
|
|
|
|
footer,
|
|
|
|
extra,
|
2023-06-14 22:37:00 +08:00
|
|
|
closeIcon,
|
|
|
|
closable,
|
2022-09-21 16:35:01 +08:00
|
|
|
onClose,
|
|
|
|
headerStyle,
|
|
|
|
bodyStyle,
|
|
|
|
footerStyle,
|
|
|
|
children,
|
2023-09-25 20:37:37 +08:00
|
|
|
classNames: drawerClassNames,
|
|
|
|
styles: drawerStyles,
|
2022-09-21 16:35:01 +08:00
|
|
|
} = props;
|
2023-09-25 20:37:37 +08:00
|
|
|
const { drawer: drawerContext } = React.useContext(ConfigContext);
|
2022-09-21 16:35:01 +08:00
|
|
|
|
2023-06-16 15:36:28 +08:00
|
|
|
const customCloseIconRender = React.useCallback(
|
|
|
|
(icon: React.ReactNode) => (
|
|
|
|
<button type="button" onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
|
|
|
|
{icon}
|
|
|
|
</button>
|
|
|
|
),
|
|
|
|
[onClose],
|
|
|
|
);
|
2024-01-26 10:52:17 +08:00
|
|
|
|
2024-02-28 14:11:15 +08:00
|
|
|
const mergedContextCloseIcon = React.useMemo(() => {
|
|
|
|
if (typeof drawerContext?.closable === 'object' && drawerContext.closable.closeIcon) {
|
|
|
|
return drawerContext.closable.closeIcon;
|
|
|
|
}
|
|
|
|
return drawerContext?.closeIcon;
|
|
|
|
}, [drawerContext?.closable, drawerContext?.closeIcon]);
|
|
|
|
|
|
|
|
const [mergedClosable, mergedCloseIcon] = useClosable({
|
|
|
|
closable: closable ?? drawerContext?.closable,
|
|
|
|
closeIcon: typeof closeIcon !== 'undefined' ? closeIcon : mergedContextCloseIcon,
|
2023-06-16 15:36:28 +08:00
|
|
|
customCloseIconRender,
|
2024-02-28 14:11:15 +08:00
|
|
|
defaultClosable: true,
|
|
|
|
});
|
2022-09-21 16:35:01 +08:00
|
|
|
|
2023-03-30 14:55:34 +08:00
|
|
|
const headerNode = React.useMemo<React.ReactNode>(() => {
|
2023-06-14 22:37:00 +08:00
|
|
|
if (!title && !mergedClosable) {
|
2022-09-21 16:35:01 +08:00
|
|
|
return null;
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<div
|
2023-09-25 20:37:37 +08:00
|
|
|
style={{
|
|
|
|
...drawerContext?.styles?.header,
|
|
|
|
...headerStyle,
|
|
|
|
...drawerStyles?.header,
|
|
|
|
}}
|
|
|
|
className={classNames(
|
|
|
|
`${prefixCls}-header`,
|
|
|
|
{
|
|
|
|
[`${prefixCls}-header-close-only`]: mergedClosable && !title && !extra,
|
|
|
|
},
|
|
|
|
drawerContext?.classNames?.header,
|
|
|
|
drawerClassNames?.header,
|
|
|
|
)}
|
2022-09-21 16:35:01 +08:00
|
|
|
>
|
|
|
|
<div className={`${prefixCls}-header-title`}>
|
2023-06-16 15:36:28 +08:00
|
|
|
{mergedCloseIcon}
|
2022-09-21 16:35:01 +08:00
|
|
|
{title && <div className={`${prefixCls}-title`}>{title}</div>}
|
|
|
|
</div>
|
|
|
|
{extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
|
|
|
|
</div>
|
|
|
|
);
|
2023-06-16 15:36:28 +08:00
|
|
|
}, [mergedClosable, mergedCloseIcon, extra, headerStyle, prefixCls, title]);
|
2022-09-21 16:35:01 +08:00
|
|
|
|
2023-03-30 14:55:34 +08:00
|
|
|
const footerNode = React.useMemo<React.ReactNode>(() => {
|
2022-09-21 16:35:01 +08:00
|
|
|
if (!footer) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
const footerClassName = `${prefixCls}-footer`;
|
|
|
|
return (
|
2023-09-25 20:37:37 +08:00
|
|
|
<div
|
|
|
|
className={classNames(
|
|
|
|
footerClassName,
|
|
|
|
drawerContext?.classNames?.footer,
|
|
|
|
drawerClassNames?.footer,
|
|
|
|
)}
|
|
|
|
style={{
|
|
|
|
...drawerContext?.styles?.footer,
|
|
|
|
...footerStyle,
|
|
|
|
...drawerStyles?.footer,
|
|
|
|
}}
|
|
|
|
>
|
2022-09-21 16:35:01 +08:00
|
|
|
{footer}
|
|
|
|
</div>
|
|
|
|
);
|
2023-03-30 14:55:34 +08:00
|
|
|
}, [footer, footerStyle, prefixCls]);
|
2022-09-21 16:35:01 +08:00
|
|
|
|
|
|
|
return (
|
2024-01-09 10:20:40 +08:00
|
|
|
<>
|
2023-03-30 14:55:34 +08:00
|
|
|
{headerNode}
|
2023-09-25 20:37:37 +08:00
|
|
|
<div
|
|
|
|
className={classNames(
|
|
|
|
`${prefixCls}-body`,
|
|
|
|
drawerClassNames?.body,
|
|
|
|
drawerContext?.classNames?.body,
|
|
|
|
)}
|
|
|
|
style={{
|
|
|
|
...drawerContext?.styles?.body,
|
|
|
|
...bodyStyle,
|
|
|
|
...drawerStyles?.body,
|
|
|
|
}}
|
|
|
|
>
|
2022-09-21 16:35:01 +08:00
|
|
|
{children}
|
|
|
|
</div>
|
2023-03-30 14:55:34 +08:00
|
|
|
{footerNode}
|
2024-01-09 10:20:40 +08:00
|
|
|
</>
|
2022-09-21 16:35:01 +08:00
|
|
|
);
|
2023-03-30 14:55:34 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
export default DrawerPanel;
|