import CloseOutlined from '@ant-design/icons/CloseOutlined'; import classNames from 'classnames'; import RcDrawer from 'rc-drawer'; import type { DrawerProps as RcDrawerProps } from 'rc-drawer'; import type { CSSMotionProps } from 'rc-motion'; import * as React from 'react'; import { ConfigContext } from '../config-provider'; import { NoFormStyle } from '../form/context'; import { getTransitionName } from '../_util/motion'; import { tuple } from '../_util/type'; import warning from '../_util/warning'; // CSSINJS import useStyle from './style'; const SizeTypes = tuple('default', 'large'); type sizeType = typeof SizeTypes[number]; export interface PushState { distance: string | number; } // Drawer diff props: 'open' | 'motion' | 'maskMotion' | 'wrapperClassName' export interface DrawerProps extends RcDrawerProps { size?: sizeType; closable?: boolean; closeIcon?: React.ReactNode; /** Wrapper dom node style of header and body */ drawerStyle?: React.CSSProperties; headerStyle?: React.CSSProperties; bodyStyle?: React.CSSProperties; footerStyle?: React.CSSProperties; title?: React.ReactNode; open?: boolean; footer?: React.ReactNode; extra?: React.ReactNode; afterOpenChange?: (open: boolean) => void; } const defaultPushState: PushState = { distance: 180 }; function Drawer(props: DrawerProps) { const { rootClassName, width, height, size = 'default', closable = true, mask = true, push = defaultPushState, closeIcon = , bodyStyle, drawerStyle, open, children, title, headerStyle, onClose, footer, footerStyle, prefixCls: customizePrefixCls, getContainer: customizeGetContainer, extra, ...rest } = props; const { getPopupContainer, getPrefixCls, direction } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('drawer', customizePrefixCls); // Style const [wrapSSR, hashId] = useStyle(prefixCls); const getContainer = // 有可能为 false,所以不能直接判断 customizeGetContainer === undefined && getPopupContainer ? () => getPopupContainer(document.body) : customizeGetContainer; const closeIconNode = closable && ( ); [ ['visible', 'open'], ['afterVisibleChange', 'afterOpenChange'], ].forEach(([deprecatedName, newName]) => { warning( !(deprecatedName in props), 'Drawer', `\`${deprecatedName}\` is deprecated which will be removed in next major version, please use \`${newName}\` instead.`, ); }); function renderHeader() { if (!title && !closable) { return null; } return (
{closeIconNode} {title &&
{title}
}
{extra &&
{extra}
}
); } function renderFooter() { if (!footer) { return null; } const footerClassName = `${prefixCls}-footer`; return (
{footer}
); } const drawerClassName = classNames( { 'no-mask': !mask, [`${prefixCls}-rtl`]: direction === 'rtl', }, rootClassName, hashId, ); // ========================== Warning =========================== if (process.env.NODE_ENV !== 'production') { [ ['visible', 'open'], ['afterVisibleChange', 'afterOpenChange'], ].forEach(([deprecatedName, newName]) => { warning( !(deprecatedName in props), 'Drawer', `\`${deprecatedName}\` is removed, please use \`${newName}\` instead.`, ); }); } // ============================ Size ============================ const mergedWidth = React.useMemo(() => width ?? (size === 'large' ? 736 : 378), [width, size]); const mergedHeight = React.useMemo( () => height ?? (size === 'large' ? 736 : 378), [height, size], ); // =========================== Motion =========================== const maskMotion: CSSMotionProps = { motionName: getTransitionName(prefixCls, 'mask-motion'), motionAppear: true, motionEnter: true, motionLeave: true, motionDeadline: 500, }; const panelMotion: RcDrawerProps['motion'] = motionPlacement => ({ motionName: getTransitionName(prefixCls, `panel-motion-${motionPlacement}`), motionAppear: true, motionEnter: true, motionLeave: true, motionDeadline: 500, }); // =========================== Render =========================== return wrapSSR(
{renderHeader()}
{children}
{renderFooter()}
, ); } if (process.env.NODE_ENV !== 'production') { Drawer.displayName = 'Drawer'; } function PurePanel({ style, ...restProps }: DrawerProps) { const containerRef = React.useRef(null); return (
); } Drawer._InternalPanelDoNotUseOrYouWillBeFired = PurePanel; export default Drawer;