ant-design-vue/components/drawer/index.tsx

269 lines
7.7 KiB
Vue

import type { CSSProperties } from 'vue';
import { inject, provide, nextTick, defineComponent } from 'vue';
import classnames from '../_util/classNames';
import omit from 'omit.js';
import VcDrawer from '../vc-drawer/src';
import PropTypes from '../_util/vue-types';
import BaseMixin from '../_util/BaseMixin';
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import { getComponent, getOptionProps } from '../_util/props-util';
import { defaultConfigProvider } from '../config-provider';
import { tuple, withInstall } from '../_util/type';
const PlacementTypes = tuple('top', 'right', 'bottom', 'left');
type placementType = typeof PlacementTypes[number];
const Drawer = defineComponent({
name: 'ADrawer',
mixins: [BaseMixin],
inheritAttrs: false,
props: {
closable: PropTypes.looseBool.def(true),
destroyOnClose: PropTypes.looseBool,
getContainer: PropTypes.any,
maskClosable: PropTypes.looseBool.def(true),
mask: PropTypes.looseBool.def(true),
maskStyle: PropTypes.object,
wrapStyle: PropTypes.object,
bodyStyle: PropTypes.object,
headerStyle: PropTypes.object,
drawerStyle: PropTypes.object,
title: PropTypes.VNodeChild,
visible: PropTypes.looseBool,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(256),
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(256),
zIndex: PropTypes.number,
prefixCls: PropTypes.string,
placement: PropTypes.oneOf(PlacementTypes).def('right'),
level: PropTypes.any.def(null),
wrapClassName: PropTypes.string, // not use class like react, vue will add class to root dom
handle: PropTypes.VNodeChild,
afterVisibleChange: PropTypes.func,
keyboard: PropTypes.looseBool.def(true),
onClose: PropTypes.func,
'onUpdate:visible': PropTypes.func,
},
setup(props) {
const configProvider = inject('configProvider', defaultConfigProvider);
return {
configProvider,
destroyClose: false,
preVisible: props.visible,
parentDrawer: inject('parentDrawer', null),
};
},
data() {
return {
sPush: false,
};
},
beforeCreate() {
provide('parentDrawer', this);
},
mounted() {
// fix: delete drawer in child and re-render, no push started.
// <Drawer>{show && <Drawer />}</Drawer>
const { visible } = this;
if (visible && this.parentDrawer) {
this.parentDrawer.push();
}
},
updated() {
nextTick(() => {
if (this.preVisible !== this.visible && this.parentDrawer) {
if (this.visible) {
this.parentDrawer.push();
} else {
this.parentDrawer.pull();
}
}
this.preVisible = this.visible;
});
},
beforeUnmount() {
// unmount drawer in child, clear push.
if (this.parentDrawer) {
this.parentDrawer.pull();
}
},
methods: {
domFocus() {
if (this.$refs.vcDrawer) {
(this.$refs.vcDrawer as any).domFocus();
}
},
close(e: Event) {
this.$emit('update:visible', false);
this.$emit('close', e);
},
// onMaskClick(e) {
// if (!this.maskClosable) {
// return;
// }
// this.close(e);
// },
push() {
this.setState({
sPush: true,
});
},
pull() {
this.setState(
{
sPush: false,
},
() => {
this.domFocus();
},
);
},
onDestroyTransitionEnd() {
const isDestroyOnClose = this.getDestroyOnClose();
if (!isDestroyOnClose) {
return;
}
if (!this.visible) {
this.destroyClose = true;
this.$forceUpdate();
}
},
getDestroyOnClose() {
return this.destroyOnClose && !this.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)`;
}
},
getRcDrawerStyle() {
const { zIndex, placement, wrapStyle } = this.$props;
const { sPush: push } = this.$data;
return {
zIndex,
transform: push ? this.getPushTransform(placement) : undefined,
...wrapStyle,
};
},
renderHeader(prefixCls: string) {
const { closable, headerStyle } = this.$props;
const title = getComponent(this, 'title');
if (!title && !closable) {
return null;
}
const headerClassName = title ? `${prefixCls}-header` : `${prefixCls}-header-no-title`;
return (
<div class={headerClassName} style={headerStyle}>
{title && <div class={`${prefixCls}-title`}>{title}</div>}
{closable ? this.renderCloseIcon(prefixCls) : null}
</div>
);
},
renderCloseIcon(prefixCls: string) {
const { closable } = this;
return (
closable && (
<button key="closer" onClick={this.close} aria-label="Close" class={`${prefixCls}-close`}>
<CloseOutlined />
</button>
)
);
},
// render drawer body dom
renderBody(prefixCls: string) {
if (this.destroyClose && !this.visible) {
return null;
}
this.destroyClose = false;
const { bodyStyle, drawerStyle } = this.$props;
const containerStyle: CSSProperties = {};
const isDestroyOnClose = this.getDestroyOnClose();
if (isDestroyOnClose) {
// Increase the opacity transition, delete children after closing.
containerStyle.opacity = 0;
containerStyle.transition = 'opacity .3s';
}
return (
<div
class={`${prefixCls}-wrapper-body`}
style={{ ...containerStyle, ...drawerStyle }}
onTransitionend={this.onDestroyTransitionEnd}
>
{this.renderHeader(prefixCls)}
<div key="body" class={`${prefixCls}-body`} style={bodyStyle}>
{this.$slots.default?.()}
</div>
</div>
);
},
},
render() {
const props: any = getOptionProps(this);
const {
prefixCls: customizePrefixCls,
width,
height,
visible,
placement,
wrapClassName,
mask,
...rest
} = props;
const haveMask = mask ? '' : 'no-mask';
const offsetStyle: CSSProperties = {};
if (placement === 'left' || placement === 'right') {
offsetStyle.width = typeof width === 'number' ? `${width}px` : width;
} else {
offsetStyle.height = typeof height === 'number' ? `${height}px` : height;
}
const handler = getComponent(this, 'handle') || false;
const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('drawer', customizePrefixCls);
const { class: className } = this.$attrs;
const vcDrawerProps: any = {
...this.$attrs,
...omit(rest, [
'closable',
'destroyOnClose',
'drawerStyle',
'headerStyle',
'bodyStyle',
'title',
'push',
'visible',
'getPopupContainer',
'rootPrefixCls',
'getPrefixCls',
'renderEmpty',
'csp',
'pageHeader',
'autoInsertSpaceInButton',
]),
onClose: this.close,
handler,
...offsetStyle,
prefixCls,
open: visible,
showMask: mask,
placement,
class: classnames({
[className as string]: !!className,
[wrapClassName]: !!wrapClassName,
[haveMask]: !!haveMask,
}),
wrapStyle: this.getRcDrawerStyle(),
ref: 'vcDrawer',
};
return <VcDrawer {...vcDrawerProps}>{this.renderBody(prefixCls)}</VcDrawer>;
},
});
export default withInstall(Drawer);