ant-design/components/drawer/index.tsx

338 lines
9.1 KiB
TypeScript
Raw Normal View History

import CloseOutlined from '@ant-design/icons/CloseOutlined';
2018-08-05 07:08:34 +08:00
import classNames from 'classnames';
import RcDrawer from 'rc-drawer';
import * as React from 'react';
2022-03-23 22:46:15 +08:00
import { ConfigContext } from '../config-provider';
import { NoFormStyle } from '../form/context';
import { tuple } from '../_util/type';
type DrawerRef = {
push(): void;
pull(): void;
};
const DrawerContext = React.createContext<DrawerRef | null>(null);
2018-05-23 10:56:37 +08:00
type EventType =
| React.KeyboardEvent<HTMLDivElement>
| React.MouseEvent<HTMLDivElement | HTMLButtonElement>;
2018-05-23 10:56:37 +08:00
type getContainerFunc = () => HTMLElement;
2018-06-19 17:42:25 +08:00
2021-09-04 18:35:30 +08:00
type ILevelMove = number | [number, number];
const PlacementTypes = tuple('top', 'right', 'bottom', 'left');
2019-11-13 11:48:20 +08:00
type placementType = typeof PlacementTypes[number];
2020-07-12 18:47:14 +08:00
const SizeTypes = tuple('default', 'large');
type sizeType = typeof SizeTypes[number];
2020-07-12 18:47:14 +08:00
export interface PushState {
distance: string | number;
}
2018-06-06 21:12:26 +08:00
export interface DrawerProps {
autoFocus?: boolean;
2018-05-23 10:56:37 +08:00
closable?: boolean;
closeIcon?: React.ReactNode;
2018-05-23 10:56:37 +08:00
destroyOnClose?: boolean;
forceRender?: boolean;
2019-07-11 21:22:27 +08:00
getContainer?: string | HTMLElement | getContainerFunc | false;
2018-05-23 10:56:37 +08:00
maskClosable?: boolean;
mask?: boolean;
maskStyle?: React.CSSProperties;
style?: React.CSSProperties;
size?: sizeType;
/** Wrapper dom node style of header and body */
drawerStyle?: React.CSSProperties;
headerStyle?: React.CSSProperties;
2019-01-11 22:45:01 +08:00
bodyStyle?: React.CSSProperties;
contentWrapperStyle?: React.CSSProperties;
2018-05-23 10:56:37 +08:00
title?: React.ReactNode;
visible?: boolean;
width?: number | string;
2018-08-10 13:32:33 +08:00
height?: number | string;
2018-05-23 10:56:37 +08:00
zIndex?: number;
prefixCls?: string;
2020-07-12 18:47:14 +08:00
push?: boolean | PushState;
2018-08-19 14:51:28 +08:00
placement?: placementType;
2018-05-23 10:56:37 +08:00
onClose?: (e: EventType) => void;
2019-04-22 16:26:31 +08:00
afterVisibleChange?: (visible: boolean) => void;
2018-08-05 07:08:34 +08:00
className?: string;
handler?: React.ReactNode;
keyboard?: boolean;
extra?: React.ReactNode;
footer?: React.ReactNode;
footerStyle?: React.CSSProperties;
level?: string | string[] | null | undefined;
2022-03-23 22:46:15 +08:00
levelMove?: ILevelMove | ((e: { target: HTMLElement; open: boolean }) => ILevelMove);
children?: React.ReactNode;
}
2020-07-12 18:47:14 +08:00
const defaultPushState: PushState = { distance: 180 };
2022-03-23 22:46:15 +08:00
const Drawer = React.forwardRef<DrawerRef, DrawerProps>(
(
{
width,
height,
size = 'default',
closable = true,
placement = 'right' as placementType,
maskClosable = true,
mask = true,
level = null,
keyboard = true,
push = defaultPushState,
closeIcon = <CloseOutlined />,
bodyStyle,
drawerStyle,
className,
visible: propsVisible,
forceRender,
children,
zIndex,
destroyOnClose,
style,
title,
headerStyle,
onClose,
footer,
footerStyle,
2022-03-23 22:46:15 +08:00
prefixCls: customizePrefixCls,
getContainer: customizeGetContainer,
extra,
afterVisibleChange,
...rest
},
ref,
) => {
const [internalPush, setPush] = React.useState(false);
const parentDrawer = React.useContext(DrawerContext);
const destroyCloseRef = React.useRef<boolean>(false);
const [load, setLoad] = React.useState(false);
const [visible, setVisible] = React.useState(false);
React.useEffect(() => {
if (propsVisible) {
setLoad(true);
} else {
setVisible(false);
}
}, [propsVisible]);
React.useEffect(() => {
if (load && propsVisible) {
setVisible(true);
}
}, [load, propsVisible]);
2022-03-23 22:46:15 +08:00
const { getPopupContainer, getPrefixCls, direction } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('drawer', customizePrefixCls);
const getContainer =
// 有可能为 false所以不能直接判断
customizeGetContainer === undefined && getPopupContainer
? () => getPopupContainer(document.body)
: customizeGetContainer;
React.useEffect(() => {
// fix: delete drawer in child and re-render, no push started.
// <Drawer>{show && <Drawer />}</Drawer>
if (propsVisible && parentDrawer) {
parentDrawer.push();
}
2018-11-22 23:35:40 +08:00
return () => {
if (parentDrawer) {
parentDrawer.pull();
// parentDrawer = null;
}
};
}, []);
React.useEffect(() => {
if (parentDrawer) {
if (visible) {
parentDrawer.push();
} else {
parentDrawer.pull();
}
}
}, [visible]);
2018-11-22 23:35:40 +08:00
const operations = React.useMemo(
() => ({
push() {
if (push) {
setPush(true);
}
},
pull() {
if (push) {
setPush(false);
}
},
}),
[push],
);
2018-07-20 16:02:42 +08:00
React.useImperativeHandle(ref, () => operations, [operations]);
2018-07-20 16:02:42 +08:00
const getOffsetStyle = () => {
// https://github.com/ant-design/ant-design/issues/24287
if (!visible && !mask) {
return {};
}
const offsetStyle: any = {};
if (placement === 'left' || placement === 'right') {
const defaultWidth = size === 'large' ? 736 : 378;
offsetStyle.width = typeof width === 'undefined' ? defaultWidth : width;
} else {
const defaultHeight = size === 'large' ? 736 : 378;
offsetStyle.height = typeof height === 'undefined' ? defaultHeight : height;
}
return offsetStyle;
};
2018-11-22 23:35:40 +08:00
const getRcDrawerStyle = () => {
// get drawer push width or height
const getPushTransform = (_placement?: placementType) => {
let distance: number | string;
if (typeof push === 'boolean') {
distance = push ? defaultPushState.distance : 0;
} else {
distance = push!.distance;
}
distance = parseFloat(String(distance || 0));
if (_placement === 'left' || _placement === 'right') {
return `translateX(${_placement === 'left' ? distance : -distance}px)`;
}
if (_placement === 'top' || _placement === 'bottom') {
return `translateY(${_placement === 'top' ? distance : -distance}px)`;
}
};
// 当无 mask 时,将 width 应用到外层容器上
// 解决 https://github.com/ant-design/ant-design/issues/12401 的问题
const offsetStyle = mask ? {} : getOffsetStyle();
return {
zIndex,
transform: internalPush ? getPushTransform(placement) : undefined,
...offsetStyle,
...style,
};
2018-12-20 17:43:00 +08:00
};
const closeIconNode = closable && (
<button type="button" onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
{closeIcon}
</button>
);
function renderHeader() {
if (!title && !closable) {
return null;
}
return (
<div
className={classNames(`${prefixCls}-header`, {
[`${prefixCls}-header-close-only`]: closable && !title && !extra,
})}
style={headerStyle}
>
<div className={`${prefixCls}-header-title`}>
{closeIconNode}
{title && <div className={`${prefixCls}-title`}>{title}</div>}
</div>
{extra && <div className={`${prefixCls}-extra`}>{extra}</div>}
</div>
);
}
function renderFooter() {
if (!footer) {
return null;
}
const footerClassName = `${prefixCls}-footer`;
return (
<div className={footerClassName} style={footerStyle}>
{footer}
</div>
);
2018-07-19 15:39:47 +08:00
}
// render drawer body dom
const renderBody = () => {
// destroyCloseRef.current =false Load the body only once by default
if (destroyCloseRef.current && !forceRender && !propsVisible) {
return null;
}
return (
<div className={`${prefixCls}-wrapper-body`} style={{ ...drawerStyle }}>
{renderHeader()}
<div className={`${prefixCls}-body`} style={bodyStyle}>
{children}
</div>
{renderFooter()}
2019-01-11 22:45:01 +08:00
</div>
);
};
const drawerClassName = classNames(
{
'no-mask': !mask,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
);
const offsetStyle = mask ? getOffsetStyle() : {};
return (
<DrawerContext.Provider value={operations}>
<NoFormStyle status override>
<RcDrawer
handler={false}
{...{
placement,
prefixCls,
maskClosable,
level,
keyboard,
children,
onClose,
forceRender,
...rest,
}}
{...offsetStyle}
open={visible || propsVisible}
showMask={mask}
style={getRcDrawerStyle()}
className={drawerClassName}
getContainer={getContainer}
afterVisibleChange={open => {
if (open) {
destroyCloseRef.current = false;
} else if (destroyOnClose) {
destroyCloseRef.current = true;
setLoad(false);
}
afterVisibleChange?.(open);
}}
>
{renderBody()}
</RcDrawer>
</NoFormStyle>
</DrawerContext.Provider>
);
},
);
if (process.env.NODE_ENV !== 'production') {
Drawer.displayName = 'Drawer';
}
2022-03-23 22:46:15 +08:00
export default Drawer;