2020-03-02 12:09:38 +08:00
|
|
|
|
import CloseOutlined from '@ant-design/icons/CloseOutlined';
|
2018-08-05 07:08:34 +08:00
|
|
|
|
import classNames from 'classnames';
|
2022-05-25 11:03:13 +08:00
|
|
|
|
import RcDrawer from 'rc-drawer';
|
|
|
|
|
import * as React from 'react';
|
2022-03-23 22:46:15 +08:00
|
|
|
|
import { ConfigContext } from '../config-provider';
|
2022-06-06 23:39:00 +08:00
|
|
|
|
import { NoFormStyle } from '../form/context';
|
2018-12-22 21:21:42 +08:00
|
|
|
|
import { tuple } from '../_util/type';
|
2018-07-02 21:49:06 +08:00
|
|
|
|
|
2021-02-05 10:47:17 +08:00
|
|
|
|
type DrawerRef = {
|
|
|
|
|
push(): void;
|
|
|
|
|
pull(): void;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const DrawerContext = React.createContext<DrawerRef | null>(null);
|
2018-05-23 10:56:37 +08:00
|
|
|
|
|
2019-06-03 11:50:32 +08:00
|
|
|
|
type EventType =
|
|
|
|
|
| React.KeyboardEvent<HTMLDivElement>
|
|
|
|
|
| React.MouseEvent<HTMLDivElement | HTMLButtonElement>;
|
2018-05-23 10:56:37 +08:00
|
|
|
|
|
2019-01-03 17:10:04 +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];
|
|
|
|
|
|
2018-12-22 21:21:42 +08:00
|
|
|
|
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
|
|
|
|
|
2021-06-11 08:39:17 +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 {
|
2021-09-02 18:57:25 +08:00
|
|
|
|
autoFocus?: boolean;
|
2018-05-23 10:56:37 +08:00
|
|
|
|
closable?: boolean;
|
2020-06-08 19:24:29 +08:00
|
|
|
|
closeIcon?: React.ReactNode;
|
2018-05-23 10:56:37 +08:00
|
|
|
|
destroyOnClose?: boolean;
|
2020-03-02 17:28:45 +08:00
|
|
|
|
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;
|
2021-06-11 08:39:17 +08:00
|
|
|
|
size?: sizeType;
|
2020-12-28 15:30:18 +08:00
|
|
|
|
/** Wrapper dom node style of header and body */
|
2019-10-07 18:58:10 +08:00
|
|
|
|
drawerStyle?: React.CSSProperties;
|
|
|
|
|
headerStyle?: React.CSSProperties;
|
2019-01-11 22:45:01 +08:00
|
|
|
|
bodyStyle?: React.CSSProperties;
|
2021-03-02 13:13:51 +08:00
|
|
|
|
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;
|
2019-02-26 14:03:05 +08:00
|
|
|
|
handler?: React.ReactNode;
|
2019-06-03 11:50:32 +08:00
|
|
|
|
keyboard?: boolean;
|
2021-06-11 08:39:17 +08:00
|
|
|
|
extra?: React.ReactNode;
|
2020-01-06 14:56:00 +08:00
|
|
|
|
footer?: React.ReactNode;
|
|
|
|
|
footerStyle?: React.CSSProperties;
|
2021-02-05 10:47:17 +08:00
|
|
|
|
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-10-24 14:47:44 +08:00
|
|
|
|
}
|
|
|
|
|
|
2020-07-12 18:47:14 +08:00
|
|
|
|
const defaultPushState: PushState = { distance: 180 };
|
2019-07-17 19:55:59 +08:00
|
|
|
|
|
2022-03-23 22:46:15 +08:00
|
|
|
|
const Drawer = React.forwardRef<DrawerRef, DrawerProps>(
|
2021-02-05 10:47:17 +08:00
|
|
|
|
(
|
|
|
|
|
{
|
2021-06-11 08:39:17 +08:00
|
|
|
|
width,
|
|
|
|
|
height,
|
|
|
|
|
size = 'default',
|
2021-02-05 10:47:17 +08:00
|
|
|
|
closable = true,
|
|
|
|
|
placement = 'right' as placementType,
|
|
|
|
|
maskClosable = true,
|
|
|
|
|
mask = true,
|
|
|
|
|
level = null,
|
|
|
|
|
keyboard = true,
|
|
|
|
|
push = defaultPushState,
|
|
|
|
|
closeIcon = <CloseOutlined />,
|
|
|
|
|
bodyStyle,
|
|
|
|
|
drawerStyle,
|
|
|
|
|
className,
|
2022-05-16 10:14:26 +08:00
|
|
|
|
visible: propsVisible,
|
|
|
|
|
forceRender,
|
2021-02-05 10:47:17 +08:00
|
|
|
|
children,
|
|
|
|
|
zIndex,
|
|
|
|
|
destroyOnClose,
|
|
|
|
|
style,
|
|
|
|
|
title,
|
|
|
|
|
headerStyle,
|
|
|
|
|
onClose,
|
|
|
|
|
footer,
|
|
|
|
|
footerStyle,
|
2022-03-23 22:46:15 +08:00
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
|
getContainer: customizeGetContainer,
|
2021-06-11 08:39:17 +08:00
|
|
|
|
extra,
|
2022-05-16 10:14:26 +08:00
|
|
|
|
afterVisibleChange,
|
2021-02-05 10:47:17 +08:00
|
|
|
|
...rest
|
|
|
|
|
},
|
|
|
|
|
ref,
|
|
|
|
|
) => {
|
|
|
|
|
const [internalPush, setPush] = React.useState(false);
|
|
|
|
|
const parentDrawer = React.useContext(DrawerContext);
|
2022-05-16 10:14:26 +08:00
|
|
|
|
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]);
|
2021-02-05 10:47:17 +08:00
|
|
|
|
|
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;
|
|
|
|
|
|
2021-02-05 10:47:17 +08:00
|
|
|
|
React.useEffect(() => {
|
|
|
|
|
// fix: delete drawer in child and re-render, no push started.
|
|
|
|
|
// <Drawer>{show && <Drawer />}</Drawer>
|
2022-05-16 10:14:26 +08:00
|
|
|
|
if (propsVisible && parentDrawer) {
|
2021-02-05 10:47:17 +08:00
|
|
|
|
parentDrawer.push();
|
2018-07-02 21:49:06 +08:00
|
|
|
|
}
|
2018-11-22 23:35:40 +08:00
|
|
|
|
|
2021-02-05 10:47:17 +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
|
|
|
|
|
2021-02-05 10:47:17 +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
|
|
|
|
|
2021-02-05 10:47:17 +08:00
|
|
|
|
React.useImperativeHandle(ref, () => operations, [operations]);
|
2018-07-20 16:02:42 +08:00
|
|
|
|
|
2021-02-05 10:47:17 +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') {
|
2021-06-11 08:39:17 +08:00
|
|
|
|
const defaultWidth = size === 'large' ? 736 : 378;
|
|
|
|
|
offsetStyle.width = typeof width === 'undefined' ? defaultWidth : width;
|
2021-02-05 10:47:17 +08:00
|
|
|
|
} else {
|
2021-06-11 08:39:17 +08:00
|
|
|
|
const defaultHeight = size === 'large' ? 736 : 378;
|
|
|
|
|
offsetStyle.height = typeof height === 'undefined' ? defaultHeight : height;
|
2021-02-05 10:47:17 +08:00
|
|
|
|
}
|
|
|
|
|
return offsetStyle;
|
|
|
|
|
};
|
2018-11-22 23:35:40 +08:00
|
|
|
|
|
2021-02-05 10:47:17 +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
|
|
|
|
};
|
2018-12-05 19:12:18 +08:00
|
|
|
|
|
2021-06-11 08:39:17 +08:00
|
|
|
|
const closeIconNode = closable && (
|
|
|
|
|
<button type="button" onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
|
|
|
|
|
{closeIcon}
|
|
|
|
|
</button>
|
|
|
|
|
);
|
2019-01-10 23:10:57 +08:00
|
|
|
|
|
2021-02-05 10:47:17 +08:00
|
|
|
|
function renderHeader() {
|
|
|
|
|
if (!title && !closable) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
2019-01-02 13:53:19 +08:00
|
|
|
|
|
2021-02-05 10:47:17 +08:00
|
|
|
|
return (
|
2021-06-11 08:39:17 +08:00
|
|
|
|
<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>}
|
2021-02-05 10:47:17 +08:00
|
|
|
|
</div>
|
|
|
|
|
);
|
2020-01-06 14:56:00 +08:00
|
|
|
|
}
|
|
|
|
|
|
2021-02-05 10:47:17 +08:00
|
|
|
|
function renderFooter() {
|
|
|
|
|
if (!footer) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
2019-01-02 13:53:19 +08:00
|
|
|
|
|
2021-02-05 10:47:17 +08:00
|
|
|
|
const footerClassName = `${prefixCls}-footer`;
|
|
|
|
|
return (
|
|
|
|
|
<div className={footerClassName} style={footerStyle}>
|
|
|
|
|
{footer}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
2018-07-19 15:39:47 +08:00
|
|
|
|
}
|
2018-07-22 11:27:48 +08:00
|
|
|
|
|
2021-02-05 10:47:17 +08:00
|
|
|
|
// render drawer body dom
|
|
|
|
|
const renderBody = () => {
|
2022-05-16 10:14:26 +08:00
|
|
|
|
// destroyCloseRef.current =false Load the body only once by default
|
2022-05-25 10:50:12 +08:00
|
|
|
|
if (destroyCloseRef.current && !forceRender && !propsVisible) {
|
2021-02-05 10:47:17 +08:00
|
|
|
|
return null;
|
|
|
|
|
}
|
2018-07-18 15:52:51 +08:00
|
|
|
|
|
2021-02-05 10:47:17 +08:00
|
|
|
|
return (
|
2022-05-16 10:14:26 +08:00
|
|
|
|
<div className={`${prefixCls}-wrapper-body`} style={{ ...drawerStyle }}>
|
2021-02-05 10:47:17 +08:00
|
|
|
|
{renderHeader()}
|
|
|
|
|
<div className={`${prefixCls}-body`} style={bodyStyle}>
|
|
|
|
|
{children}
|
|
|
|
|
</div>
|
|
|
|
|
{renderFooter()}
|
2019-01-11 22:45:01 +08:00
|
|
|
|
</div>
|
2021-02-05 10:47:17 +08:00
|
|
|
|
);
|
|
|
|
|
};
|
2020-10-24 14:47:44 +08:00
|
|
|
|
|
|
|
|
|
const drawerClassName = classNames(
|
|
|
|
|
{
|
|
|
|
|
'no-mask': !mask,
|
|
|
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
|
|
|
},
|
|
|
|
|
className,
|
|
|
|
|
);
|
2021-02-05 10:47:17 +08:00
|
|
|
|
const offsetStyle = mask ? getOffsetStyle() : {};
|
2020-10-24 14:47:44 +08:00
|
|
|
|
|
2018-07-02 21:49:06 +08:00
|
|
|
|
return (
|
2021-02-05 10:47:17 +08:00
|
|
|
|
<DrawerContext.Provider value={operations}>
|
2022-06-06 23:39:00 +08:00
|
|
|
|
<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>
|
2020-10-24 14:47:44 +08:00
|
|
|
|
</DrawerContext.Provider>
|
2018-07-02 21:49:06 +08:00
|
|
|
|
);
|
2021-02-05 10:47:17 +08:00
|
|
|
|
},
|
|
|
|
|
);
|
2022-06-21 10:24:52 +08:00
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
|
|
|
Drawer.displayName = 'Drawer';
|
|
|
|
|
}
|
2019-01-03 17:10:04 +08:00
|
|
|
|
|
2022-03-23 22:46:15 +08:00
|
|
|
|
export default Drawer;
|