import * as React from 'react'; import classNames from 'classnames'; import type { DrawerProps as RCDrawerProps } from 'rc-drawer'; import useClosable, { pickClosable } from '../_util/hooks/useClosable'; import type { ClosableType } from '../_util/hooks/useClosable'; import { ConfigContext } from '../config-provider'; export interface DrawerClassNames extends NonNullable { header?: string; body?: string; footer?: string; } export interface DrawerStyles extends NonNullable { header?: React.CSSProperties; body?: React.CSSProperties; footer?: React.CSSProperties; } export interface DrawerPanelProps { prefixCls: string; title?: React.ReactNode; footer?: React.ReactNode; extra?: React.ReactNode; /** * Recommend to use closeIcon instead * * e.g. * * `` */ closable?: ClosableType; closeIcon?: React.ReactNode; onClose?: RCDrawerProps['onClose']; children?: React.ReactNode; classNames?: DrawerClassNames; styles?: DrawerStyles; /** @deprecated Please use `styles.header` instead */ headerStyle?: React.CSSProperties; /** @deprecated Please use `styles.body` instead */ bodyStyle?: React.CSSProperties; /** @deprecated Please use `styles.footer` instead */ footerStyle?: React.CSSProperties; /** @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; } const DrawerPanel: React.FC = (props) => { const { prefixCls, title, footer, extra, onClose, headerStyle, bodyStyle, footerStyle, children, classNames: drawerClassNames, styles: drawerStyles, } = props; const { drawer: drawerContext } = React.useContext(ConfigContext); const customCloseIconRender = React.useCallback( (icon: React.ReactNode) => ( ), [onClose], ); const [mergedClosable, mergedCloseIcon] = useClosable( pickClosable(props), pickClosable(drawerContext), { closable: true, closeIconRender: customCloseIconRender, }, ); const headerNode = React.useMemo(() => { if (!title && !mergedClosable) { return null; } return (
{mergedCloseIcon} {title &&
{title}
}
{extra &&
{extra}
}
); }, [mergedClosable, mergedCloseIcon, extra, headerStyle, prefixCls, title]); const footerNode = React.useMemo(() => { if (!footer) { return null; } const footerClassName = `${prefixCls}-footer`; return (
{footer}
); }, [footer, footerStyle, prefixCls]); return ( <> {headerNode}
{children}
{footerNode} ); }; export default DrawerPanel;