You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
260 lines
6.4 KiB
260 lines
6.4 KiB
import * as React from 'react';
|
|
import * as PropTypes from 'prop-types';
|
|
import RcDrawer from 'rc-drawer';
|
|
import createReactContext, { Context } from 'create-react-context';
|
|
import warning from 'warning';
|
|
import classNames from 'classnames';
|
|
import Icon from '../icon';
|
|
|
|
const DrawerContext: Context<Drawer | null> = createReactContext(null);
|
|
|
|
type EventType =
|
|
| React.MouseEvent<HTMLDivElement>
|
|
| React.MouseEvent<HTMLButtonElement>;
|
|
|
|
type getContainerfunc = () => HTMLElement;
|
|
|
|
type placementType = 'top' | 'right' | 'bottom' | 'left';
|
|
export interface DrawerProps {
|
|
closable?: boolean;
|
|
destroyOnClose?: boolean;
|
|
getContainer?: string | HTMLElement | getContainerfunc;
|
|
maskClosable?: boolean;
|
|
mask?: boolean;
|
|
maskStyle?: React.CSSProperties;
|
|
style?: React.CSSProperties;
|
|
title?: React.ReactNode;
|
|
visible?: boolean;
|
|
width?: number | string;
|
|
height?: number | string;
|
|
/* deprecated, use className instead */
|
|
wrapClassName?: string;
|
|
zIndex?: number;
|
|
prefixCls?: string;
|
|
push?: boolean;
|
|
placement?: placementType;
|
|
onClose?: (e: EventType) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export interface IDrawerState {
|
|
push?: boolean;
|
|
}
|
|
|
|
export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
|
|
static propTypes = {
|
|
closable: PropTypes.bool,
|
|
destroyOnClose: PropTypes.bool,
|
|
getContainer: PropTypes.oneOfType([
|
|
PropTypes.string,
|
|
PropTypes.object,
|
|
PropTypes.func,
|
|
PropTypes.bool,
|
|
]),
|
|
maskClosable: PropTypes.bool,
|
|
mask: PropTypes.bool,
|
|
maskStyle: PropTypes.object,
|
|
style: PropTypes.object,
|
|
title: PropTypes.node,
|
|
visible: PropTypes.bool,
|
|
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
zIndex: PropTypes.number,
|
|
prefixCls: PropTypes.string,
|
|
placement: PropTypes.string,
|
|
onClose: PropTypes.func,
|
|
className: PropTypes.string,
|
|
};
|
|
|
|
static defaultProps = {
|
|
prefixCls: 'ant-drawer',
|
|
width: 256,
|
|
height: 256,
|
|
closable: true,
|
|
placement: 'right',
|
|
maskClosable: true,
|
|
mask: true,
|
|
level: null,
|
|
};
|
|
|
|
readonly state = {
|
|
push: false,
|
|
};
|
|
|
|
parentDrawer: Drawer;
|
|
destoryClose: boolean;
|
|
|
|
public componentDidUpdate(preProps: DrawerProps) {
|
|
if (preProps.visible !== this.props.visible && this.parentDrawer) {
|
|
if (this.props.visible) {
|
|
this.parentDrawer.push();
|
|
} else {
|
|
this.parentDrawer.pull();
|
|
}
|
|
}
|
|
}
|
|
|
|
close = (e: EventType) => {
|
|
if (this.props.visible !== undefined) {
|
|
if (this.props.onClose) {
|
|
this.props.onClose(e);
|
|
}
|
|
return;
|
|
}
|
|
}
|
|
|
|
onMaskClick = (e: EventType) => {
|
|
if (!this.props.maskClosable) {
|
|
return;
|
|
}
|
|
this.close(e);
|
|
}
|
|
|
|
push = () => {
|
|
this.setState({
|
|
push: true,
|
|
});
|
|
}
|
|
|
|
pull = () => {
|
|
this.setState({
|
|
push: false,
|
|
});
|
|
}
|
|
|
|
onDestoryTransitionEnd = () => {
|
|
const isDestroyOnClose = this.getDestoryOnClose();
|
|
if (!isDestroyOnClose) {
|
|
return;
|
|
}
|
|
if (!this.props.visible) {
|
|
this.destoryClose = true;
|
|
this.forceUpdate();
|
|
}
|
|
}
|
|
|
|
getDestoryOnClose = () => (this.props.destroyOnClose && !this.props.visible);
|
|
|
|
// get drawar push width or height
|
|
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)`;
|
|
}
|
|
}
|
|
|
|
// render drawer body dom
|
|
renderBody = () => {
|
|
if (this.destoryClose && !this.props.visible) {
|
|
return null;
|
|
}
|
|
this.destoryClose = false;
|
|
const { placement } = this.props;
|
|
|
|
const containerStyle: React.CSSProperties = placement === 'left'
|
|
|| placement === 'right' ? {
|
|
overflow: 'auto',
|
|
height: '100%',
|
|
} : {};
|
|
|
|
const isDestroyOnClose = this.getDestoryOnClose();
|
|
|
|
if (isDestroyOnClose) {
|
|
// Increase the opacity transition, delete children after closing.
|
|
containerStyle.opacity = 0;
|
|
containerStyle.transition = 'opacity .3s';
|
|
}
|
|
const { prefixCls, title, closable } = this.props;
|
|
|
|
// is have header dom
|
|
let header;
|
|
if (title) {
|
|
header = (
|
|
<div className={`${prefixCls}-header`}>
|
|
<div className={`${prefixCls}-title`}>{title}</div>
|
|
</div>
|
|
);
|
|
}
|
|
// is have closer button
|
|
let closer;
|
|
if (closable) {
|
|
closer = (
|
|
<button
|
|
onClick={this.close}
|
|
aria-label="Close"
|
|
className={`${prefixCls}-close`}
|
|
>
|
|
<span className={`${prefixCls}-close-x`}>
|
|
<Icon type="close"/>
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`${prefixCls}-wrapper-body`}
|
|
style={containerStyle}
|
|
onTransitionEnd={this.onDestoryTransitionEnd}
|
|
>
|
|
{header}
|
|
{closer}
|
|
<div className={`${prefixCls}-body`} style={this.props.style}>
|
|
{this.props.children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
getRcDrawerStyle = () => {
|
|
const { zIndex, placement, maskStyle } = this.props;
|
|
return this.state.push
|
|
? {
|
|
...maskStyle,
|
|
zIndex,
|
|
transform: this.getPushTransform(placement),
|
|
}
|
|
: {
|
|
...maskStyle,
|
|
zIndex,
|
|
};
|
|
}
|
|
|
|
// render Provider for Multi-level drawe
|
|
renderProvider = (value: Drawer) => {
|
|
const { zIndex, style, placement, className, wrapClassName, width, height, ...rest } = this.props;
|
|
warning(wrapClassName === undefined, 'wrapClassName is deprecated, please use className instead.');
|
|
const haveMask = rest.mask ? "" : "no-mask";
|
|
this.parentDrawer = value;
|
|
const offsetStyle: any = {};
|
|
if (placement === 'left' || placement === 'right') {
|
|
offsetStyle.width = width;
|
|
} else {
|
|
offsetStyle.height = height;
|
|
}
|
|
return (
|
|
<DrawerContext.Provider value={this}>
|
|
<RcDrawer
|
|
handler={false}
|
|
{...rest}
|
|
{...offsetStyle}
|
|
open={this.props.visible}
|
|
onMaskClick={this.onMaskClick}
|
|
showMask={this.props.mask}
|
|
placement={placement}
|
|
style={this.getRcDrawerStyle()}
|
|
className={classNames(wrapClassName, className, haveMask)}
|
|
>
|
|
{this.renderBody()}
|
|
</RcDrawer>
|
|
</DrawerContext.Provider>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<DrawerContext.Consumer>{this.renderProvider}</DrawerContext.Consumer>
|
|
);
|
|
}
|
|
}
|
|
|