2018-05-23 10:56:37 +08:00
|
|
|
|
import * as React from 'react';
|
2018-06-06 22:55:29 +08:00
|
|
|
|
import RcDrawer from 'rc-drawer';
|
2020-03-29 12:38:12 +08:00
|
|
|
|
import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
|
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';
|
2019-08-05 18:38:10 +08:00
|
|
|
|
import omit from 'omit.js';
|
2019-08-13 14:07:17 +08:00
|
|
|
|
|
2019-10-21 12:01:33 +08:00
|
|
|
|
import { ConfigConsumerProps } from '../config-provider';
|
2020-06-04 23:12:37 +08:00
|
|
|
|
import { withConfigConsumer, ConfigConsumer } from '../config-provider/context';
|
2018-12-22 21:21:42 +08:00
|
|
|
|
import { tuple } from '../_util/type';
|
2018-07-02 21:49:06 +08:00
|
|
|
|
|
2019-12-23 18:33:08 +08:00
|
|
|
|
const DrawerContext = React.createContext<Drawer | 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
|
|
|
|
|
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];
|
2018-06-06 21:12:26 +08:00
|
|
|
|
export interface DrawerProps {
|
2018-05-23 10:56:37 +08:00
|
|
|
|
closable?: boolean;
|
|
|
|
|
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;
|
2019-10-07 18:58:10 +08:00
|
|
|
|
/** 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;
|
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;
|
2018-07-02 21:49:06 +08:00
|
|
|
|
push?: boolean;
|
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;
|
2020-01-06 14:56:00 +08:00
|
|
|
|
footer?: React.ReactNode;
|
|
|
|
|
footerStyle?: React.CSSProperties;
|
2018-05-23 10:56:37 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export interface IDrawerState {
|
2018-07-02 21:49:06 +08:00
|
|
|
|
push?: boolean;
|
2018-05-23 10:56:37 +08:00
|
|
|
|
}
|
|
|
|
|
|
2019-01-03 17:10:04 +08:00
|
|
|
|
class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerState> {
|
2018-05-23 10:56:37 +08:00
|
|
|
|
static defaultProps = {
|
2018-05-27 00:00:07 +08:00
|
|
|
|
width: 256,
|
2018-08-10 13:32:33 +08:00
|
|
|
|
height: 256,
|
2018-05-23 10:56:37 +08:00
|
|
|
|
closable: true,
|
2018-12-22 21:21:42 +08:00
|
|
|
|
placement: 'right' as placementType,
|
2018-06-21 12:32:13 +08:00
|
|
|
|
maskClosable: true,
|
2018-10-09 16:04:18 +08:00
|
|
|
|
mask: true,
|
2018-07-02 12:27:06 +08:00
|
|
|
|
level: null,
|
2019-06-03 11:50:32 +08:00
|
|
|
|
keyboard: true,
|
2018-05-23 10:56:37 +08:00
|
|
|
|
};
|
2018-06-26 00:22:50 +08:00
|
|
|
|
|
2018-07-02 21:49:06 +08:00
|
|
|
|
readonly state = {
|
|
|
|
|
push: false,
|
|
|
|
|
};
|
|
|
|
|
|
2019-07-17 19:55:59 +08:00
|
|
|
|
parentDrawer: Drawer | null;
|
|
|
|
|
|
2019-01-03 17:10:04 +08:00
|
|
|
|
destroyClose: boolean;
|
2018-11-22 23:35:40 +08:00
|
|
|
|
|
2019-07-17 19:55:59 +08:00
|
|
|
|
public componentDidMount() {
|
|
|
|
|
// fix: delete drawer in child and re-render, no push started.
|
|
|
|
|
// <Drawer>{show && <Drawer />}</Drawer>
|
|
|
|
|
const { visible } = this.props;
|
|
|
|
|
if (visible && this.parentDrawer) {
|
|
|
|
|
this.parentDrawer.push();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-02 21:49:06 +08:00
|
|
|
|
public componentDidUpdate(preProps: DrawerProps) {
|
2019-05-21 11:29:01 +08:00
|
|
|
|
const { visible } = this.props;
|
|
|
|
|
if (preProps.visible !== visible && this.parentDrawer) {
|
|
|
|
|
if (visible) {
|
2018-08-22 14:23:20 +08:00
|
|
|
|
this.parentDrawer.push();
|
2018-07-02 21:49:06 +08:00
|
|
|
|
} else {
|
2018-08-22 14:23:20 +08:00
|
|
|
|
this.parentDrawer.pull();
|
2018-07-02 21:49:06 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2018-11-22 23:35:40 +08:00
|
|
|
|
|
2019-07-17 19:55:59 +08:00
|
|
|
|
public componentWillUnmount() {
|
|
|
|
|
// unmount drawer in child, clear push.
|
|
|
|
|
if (this.parentDrawer) {
|
|
|
|
|
this.parentDrawer.pull();
|
|
|
|
|
this.parentDrawer = null;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-02 21:49:06 +08:00
|
|
|
|
push = () => {
|
|
|
|
|
this.setState({
|
|
|
|
|
push: true,
|
|
|
|
|
});
|
2018-12-07 20:02:01 +08:00
|
|
|
|
};
|
2018-11-22 23:35:40 +08:00
|
|
|
|
|
2018-07-02 21:49:06 +08:00
|
|
|
|
pull = () => {
|
|
|
|
|
this.setState({
|
|
|
|
|
push: false,
|
|
|
|
|
});
|
2018-12-07 20:02:01 +08:00
|
|
|
|
};
|
2018-11-22 23:35:40 +08:00
|
|
|
|
|
2019-01-03 17:10:04 +08:00
|
|
|
|
onDestroyTransitionEnd = () => {
|
|
|
|
|
const isDestroyOnClose = this.getDestroyOnClose();
|
2018-07-20 13:31:30 +08:00
|
|
|
|
if (!isDestroyOnClose) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2018-07-19 15:39:47 +08:00
|
|
|
|
if (!this.props.visible) {
|
2019-01-03 17:10:04 +08:00
|
|
|
|
this.destroyClose = true;
|
2018-07-19 15:39:47 +08:00
|
|
|
|
this.forceUpdate();
|
|
|
|
|
}
|
2018-12-07 20:02:01 +08:00
|
|
|
|
};
|
2018-07-20 16:02:42 +08:00
|
|
|
|
|
2019-01-03 17:10:04 +08:00
|
|
|
|
getDestroyOnClose = () => this.props.destroyOnClose && !this.props.visible;
|
2018-07-20 16:02:42 +08:00
|
|
|
|
|
2019-07-11 21:22:27 +08:00
|
|
|
|
// get drawer push width or height
|
2018-08-19 14:51:28 +08:00
|
|
|
|
getPushTransform = (placement?: placementType) => {
|
|
|
|
|
if (placement === 'left' || placement === 'right') {
|
|
|
|
|
return `translateX(${placement === 'left' ? 180 : -180}px)`;
|
|
|
|
|
}
|
|
|
|
|
if (placement === 'top' || placement === 'bottom') {
|
|
|
|
|
return `translateY(${placement === 'top' ? 180 : -180}px)`;
|
|
|
|
|
}
|
2018-12-07 20:02:01 +08:00
|
|
|
|
};
|
2018-11-22 23:35:40 +08:00
|
|
|
|
|
2020-05-12 17:39:59 +08:00
|
|
|
|
getOffsetStyle() {
|
2020-05-19 18:11:21 +08:00
|
|
|
|
const { placement, width, height, visible, mask } = this.props;
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/24287
|
|
|
|
|
if (!visible && !mask) {
|
|
|
|
|
return {};
|
|
|
|
|
}
|
2020-05-12 17:39:59 +08:00
|
|
|
|
const offsetStyle: any = {};
|
|
|
|
|
if (placement === 'left' || placement === 'right') {
|
|
|
|
|
offsetStyle.width = width;
|
|
|
|
|
} else {
|
|
|
|
|
offsetStyle.height = height;
|
|
|
|
|
}
|
|
|
|
|
return offsetStyle;
|
|
|
|
|
}
|
|
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
|
getRcDrawerStyle = () => {
|
2020-05-12 17:39:59 +08:00
|
|
|
|
const { zIndex, placement, mask, style } = this.props;
|
2018-12-20 17:43:00 +08:00
|
|
|
|
const { push } = this.state;
|
2020-05-12 17:39:59 +08:00
|
|
|
|
// 当无 mask 时,将 width 应用到外层容器上
|
|
|
|
|
// 解决 https://github.com/ant-design/ant-design/issues/12401 的问题
|
|
|
|
|
const offsetStyle = mask ? {} : this.getOffsetStyle();
|
2018-12-20 17:43:00 +08:00
|
|
|
|
return {
|
|
|
|
|
zIndex,
|
|
|
|
|
transform: push ? this.getPushTransform(placement) : undefined,
|
2020-05-12 17:39:59 +08:00
|
|
|
|
...offsetStyle,
|
2018-12-25 16:28:50 +08:00
|
|
|
|
...style,
|
2018-12-20 17:43:00 +08:00
|
|
|
|
};
|
2018-12-07 20:02:01 +08:00
|
|
|
|
};
|
2018-12-05 19:12:18 +08:00
|
|
|
|
|
2019-01-03 17:10:04 +08:00
|
|
|
|
renderHeader() {
|
2019-10-07 18:58:10 +08:00
|
|
|
|
const { title, prefixCls, closable, headerStyle } = this.props;
|
2019-01-02 13:53:19 +08:00
|
|
|
|
if (!title && !closable) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
2019-01-10 23:10:57 +08:00
|
|
|
|
|
|
|
|
|
const headerClassName = title ? `${prefixCls}-header` : `${prefixCls}-header-no-title`;
|
2019-01-02 13:53:19 +08:00
|
|
|
|
return (
|
2019-10-07 18:58:10 +08:00
|
|
|
|
<div className={headerClassName} style={headerStyle}>
|
2019-01-02 13:53:19 +08:00
|
|
|
|
{title && <div className={`${prefixCls}-title`}>{title}</div>}
|
2019-01-10 23:10:57 +08:00
|
|
|
|
{closable && this.renderCloseIcon()}
|
2019-01-02 13:53:19 +08:00
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2020-01-06 14:56:00 +08:00
|
|
|
|
renderFooter() {
|
|
|
|
|
const { footer, footerStyle, prefixCls } = this.props;
|
|
|
|
|
if (!footer) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const footerClassName = `${prefixCls}-footer`;
|
|
|
|
|
return (
|
|
|
|
|
<div className={footerClassName} style={footerStyle}>
|
|
|
|
|
{footer}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2019-01-03 17:10:04 +08:00
|
|
|
|
renderCloseIcon() {
|
2019-07-11 21:22:27 +08:00
|
|
|
|
const { closable, prefixCls, onClose } = this.props;
|
2019-01-02 13:53:19 +08:00
|
|
|
|
return (
|
|
|
|
|
closable && (
|
2019-08-06 15:02:05 +08:00
|
|
|
|
// eslint-disable-next-line react/button-has-type
|
2020-03-29 12:38:12 +08:00
|
|
|
|
<button
|
|
|
|
|
onClick={onClose}
|
|
|
|
|
aria-label="Close"
|
|
|
|
|
className={`${prefixCls}-close`}
|
|
|
|
|
style={
|
|
|
|
|
{
|
|
|
|
|
'--scroll-bar': `${getScrollBarSize()}px`,
|
|
|
|
|
} as any
|
|
|
|
|
}
|
|
|
|
|
>
|
2019-11-28 12:34:33 +08:00
|
|
|
|
<CloseOutlined />
|
2019-01-02 13:53:19 +08:00
|
|
|
|
</button>
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2018-08-19 14:51:28 +08:00
|
|
|
|
// render drawer body dom
|
2019-01-03 17:10:04 +08:00
|
|
|
|
renderBody = () => {
|
2019-11-06 10:47:36 +08:00
|
|
|
|
const { bodyStyle, drawerStyle, prefixCls, visible } = this.props;
|
2019-01-03 17:10:04 +08:00
|
|
|
|
if (this.destroyClose && !visible) {
|
2018-07-19 15:39:47 +08:00
|
|
|
|
return null;
|
|
|
|
|
}
|
2019-01-03 17:10:04 +08:00
|
|
|
|
this.destroyClose = false;
|
2018-07-22 11:27:48 +08:00
|
|
|
|
|
2019-11-06 10:47:36 +08:00
|
|
|
|
const containerStyle: React.CSSProperties = {};
|
2018-07-22 11:27:48 +08:00
|
|
|
|
|
2019-01-03 17:10:04 +08:00
|
|
|
|
const isDestroyOnClose = this.getDestroyOnClose();
|
2018-08-19 14:51:28 +08:00
|
|
|
|
|
2018-07-19 15:39:47 +08:00
|
|
|
|
if (isDestroyOnClose) {
|
2018-07-20 16:02:42 +08:00
|
|
|
|
// Increase the opacity transition, delete children after closing.
|
2018-07-19 15:39:47 +08:00
|
|
|
|
containerStyle.opacity = 0;
|
|
|
|
|
containerStyle.transition = 'opacity .3s';
|
2018-05-27 00:00:07 +08:00
|
|
|
|
}
|
2018-07-18 15:52:51 +08:00
|
|
|
|
|
2018-05-23 10:56:37 +08:00
|
|
|
|
return (
|
2018-07-19 15:39:47 +08:00
|
|
|
|
<div
|
2018-07-20 18:51:10 +08:00
|
|
|
|
className={`${prefixCls}-wrapper-body`}
|
2019-10-07 18:58:10 +08:00
|
|
|
|
style={{
|
|
|
|
|
...containerStyle,
|
|
|
|
|
...drawerStyle,
|
|
|
|
|
}}
|
2019-01-03 17:10:04 +08:00
|
|
|
|
onTransitionEnd={this.onDestroyTransitionEnd}
|
2018-07-19 15:39:47 +08:00
|
|
|
|
>
|
2019-01-03 17:10:04 +08:00
|
|
|
|
{this.renderHeader()}
|
2019-01-11 22:45:01 +08:00
|
|
|
|
<div className={`${prefixCls}-body`} style={bodyStyle}>
|
|
|
|
|
{this.props.children}
|
|
|
|
|
</div>
|
2020-01-06 14:56:00 +08:00
|
|
|
|
{this.renderFooter()}
|
2018-05-25 15:10:45 +08:00
|
|
|
|
</div>
|
2018-05-23 10:56:37 +08:00
|
|
|
|
);
|
2018-12-07 20:02:01 +08:00
|
|
|
|
};
|
2018-08-19 14:51:28 +08:00
|
|
|
|
|
2019-07-17 19:55:59 +08:00
|
|
|
|
// render Provider for Multi-level drawer
|
2018-07-02 21:49:06 +08:00
|
|
|
|
renderProvider = (value: Drawer) => {
|
2018-08-22 14:23:20 +08:00
|
|
|
|
this.parentDrawer = value;
|
2020-05-12 17:39:59 +08:00
|
|
|
|
|
2018-07-02 21:49:06 +08:00
|
|
|
|
return (
|
2020-06-04 23:12:37 +08:00
|
|
|
|
<ConfigConsumer>
|
|
|
|
|
{({ getPopupContainer, getPrefixCls }) => {
|
|
|
|
|
const {
|
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
|
placement,
|
|
|
|
|
className,
|
|
|
|
|
mask,
|
|
|
|
|
direction,
|
|
|
|
|
visible,
|
|
|
|
|
...rest
|
|
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
|
|
const prefixCls = getPrefixCls('select', customizePrefixCls);
|
|
|
|
|
const drawerClassName = classNames(className, {
|
|
|
|
|
'no-mask': !mask,
|
|
|
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
|
|
|
});
|
|
|
|
|
const offsetStyle = mask ? this.getOffsetStyle() : {};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<DrawerContext.Provider value={this}>
|
|
|
|
|
<RcDrawer
|
|
|
|
|
handler={false}
|
|
|
|
|
{...omit(rest, [
|
|
|
|
|
'zIndex',
|
|
|
|
|
'style',
|
|
|
|
|
'closable',
|
|
|
|
|
'destroyOnClose',
|
|
|
|
|
'drawerStyle',
|
|
|
|
|
'headerStyle',
|
|
|
|
|
'bodyStyle',
|
|
|
|
|
'footerStyle',
|
|
|
|
|
'footer',
|
|
|
|
|
'locale',
|
|
|
|
|
'title',
|
|
|
|
|
'push',
|
|
|
|
|
'visible',
|
|
|
|
|
'getPopupContainer',
|
|
|
|
|
'rootPrefixCls',
|
|
|
|
|
'getPrefixCls',
|
|
|
|
|
'renderEmpty',
|
|
|
|
|
'csp',
|
|
|
|
|
'pageHeader',
|
|
|
|
|
'autoInsertSpaceInButton',
|
|
|
|
|
'width',
|
|
|
|
|
'height',
|
|
|
|
|
'dropdownMatchSelectWidth',
|
2020-06-12 10:39:52 +08:00
|
|
|
|
'getTargetContainer',
|
2020-06-04 23:12:37 +08:00
|
|
|
|
])}
|
|
|
|
|
getContainer={
|
|
|
|
|
// 有可能为 false,所以不能直接判断
|
2020-06-07 19:05:44 +08:00
|
|
|
|
rest.getContainer === undefined && getPopupContainer
|
|
|
|
|
? () => getPopupContainer(document.body)
|
2020-06-04 23:12:37 +08:00
|
|
|
|
: rest.getContainer
|
|
|
|
|
}
|
|
|
|
|
{...offsetStyle}
|
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
|
open={visible}
|
|
|
|
|
showMask={mask}
|
|
|
|
|
placement={placement}
|
|
|
|
|
style={this.getRcDrawerStyle()}
|
|
|
|
|
className={drawerClassName}
|
|
|
|
|
>
|
|
|
|
|
{this.renderBody()}
|
|
|
|
|
</RcDrawer>
|
|
|
|
|
</DrawerContext.Provider>
|
|
|
|
|
);
|
|
|
|
|
}}
|
|
|
|
|
</ConfigConsumer>
|
2018-07-02 21:49:06 +08:00
|
|
|
|
);
|
2018-12-07 20:02:01 +08:00
|
|
|
|
};
|
2018-08-19 14:51:28 +08:00
|
|
|
|
|
2018-07-02 21:49:06 +08:00
|
|
|
|
render() {
|
2018-12-07 20:02:01 +08:00
|
|
|
|
return <DrawerContext.Consumer>{this.renderProvider}</DrawerContext.Consumer>;
|
2018-05-23 10:56:37 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
2019-01-03 17:10:04 +08:00
|
|
|
|
|
|
|
|
|
export default withConfigConsumer<DrawerProps>({
|
|
|
|
|
prefixCls: 'drawer',
|
|
|
|
|
})(Drawer);
|