123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292 |
- import _defineProperty from 'babel-runtime/helpers/defineProperty';
- import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
- import _extends from 'babel-runtime/helpers/extends';
- import classnames from 'classnames';
- import omit from 'omit.js';
- import VcDrawer from '../vc-drawer/src';
- import PropTypes from '../_util/vue-types';
- import BaseMixin from '../_util/BaseMixin';
- import Icon from '../icon';
- import { getComponentFromProp, getOptionProps, getListeners } from '../_util/props-util';
- import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
- import Base from '../base';
- var Drawer = {
- name: 'ADrawer',
- props: {
- closable: PropTypes.bool.def(true),
- destroyOnClose: PropTypes.bool,
- getContainer: PropTypes.any,
- maskClosable: PropTypes.bool.def(true),
- mask: PropTypes.bool.def(true),
- maskStyle: PropTypes.object,
- wrapStyle: PropTypes.object,
- bodyStyle: PropTypes.object,
- headerStyle: PropTypes.object,
- drawerStyle: PropTypes.object,
- title: PropTypes.any,
- visible: PropTypes.bool,
- 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(['top', 'right', 'bottom', 'left']).def('right'),
- level: PropTypes.any.def(null),
- wrapClassName: PropTypes.string, // not use class like react, vue will add class to root dom
- handle: PropTypes.any,
- afterVisibleChange: PropTypes.func,
- keyboard: PropTypes.bool.def(true)
- },
- mixins: [BaseMixin],
- data: function data() {
- this.destroyClose = false;
- this.preVisible = this.$props.visible;
- return {
- _push: false
- };
- },
- inject: {
- parentDrawer: {
- 'default': function _default() {
- return null;
- }
- },
- configProvider: { 'default': function _default() {
- return ConfigConsumerProps;
- } }
- },
- provide: function provide() {
- return {
- parentDrawer: this
- };
- },
- mounted: function mounted() {
- // fix: delete drawer in child and re-render, no push started.
- // <Drawer>{show && <Drawer />}</Drawer>
- var visible = this.visible;
- if (visible && this.parentDrawer) {
- this.parentDrawer.push();
- }
- },
- updated: function updated() {
- var _this = this;
- this.$nextTick(function () {
- if (_this.preVisible !== _this.visible && _this.parentDrawer) {
- if (_this.visible) {
- _this.parentDrawer.push();
- } else {
- _this.parentDrawer.pull();
- }
- }
- _this.preVisible = _this.visible;
- });
- },
- beforeDestroy: function beforeDestroy() {
- // unmount drawer in child, clear push.
- if (this.parentDrawer) {
- this.parentDrawer.pull();
- }
- },
- methods: {
- domFocus: function domFocus() {
- if (this.$refs.vcDrawer) {
- this.$refs.vcDrawer.domFocus();
- }
- },
- close: function close(e) {
- this.$emit('close', e);
- },
- // onMaskClick(e) {
- // if (!this.maskClosable) {
- // return;
- // }
- // this.close(e);
- // },
- push: function push() {
- this.setState({
- _push: true
- });
- },
- pull: function pull() {
- var _this2 = this;
- this.setState({
- _push: false
- }, function () {
- _this2.domFocus();
- });
- },
- onDestroyTransitionEnd: function onDestroyTransitionEnd() {
- var isDestroyOnClose = this.getDestroyOnClose();
- if (!isDestroyOnClose) {
- return;
- }
- if (!this.visible) {
- this.destroyClose = true;
- this.$forceUpdate();
- }
- },
- getDestroyOnClose: function getDestroyOnClose() {
- return this.destroyOnClose && !this.visible;
- },
- // get drawar push width or height
- getPushTransform: function getPushTransform(placement) {
- 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: function getRcDrawerStyle() {
- var _$props = this.$props,
- zIndex = _$props.zIndex,
- placement = _$props.placement,
- wrapStyle = _$props.wrapStyle;
- var push = this.$data._push;
- return _extends({
- zIndex: zIndex,
- transform: push ? this.getPushTransform(placement) : undefined
- }, wrapStyle);
- },
- renderHeader: function renderHeader(prefixCls) {
- var h = this.$createElement;
- var _$props2 = this.$props,
- closable = _$props2.closable,
- headerStyle = _$props2.headerStyle;
- var title = getComponentFromProp(this, 'title');
- if (!title && !closable) {
- return null;
- }
- var headerClassName = title ? prefixCls + '-header' : prefixCls + '-header-no-title';
- return h(
- 'div',
- { 'class': headerClassName, style: headerStyle },
- [title && h(
- 'div',
- { 'class': prefixCls + '-title' },
- [title]
- ), closable ? this.renderCloseIcon(prefixCls) : null]
- );
- },
- renderCloseIcon: function renderCloseIcon(prefixCls) {
- var h = this.$createElement;
- var closable = this.closable;
- return closable && h(
- 'button',
- { key: 'closer', on: {
- 'click': this.close
- },
- attrs: { 'aria-label': 'Close' },
- 'class': prefixCls + '-close' },
- [h(Icon, {
- attrs: { type: 'close' }
- })]
- );
- },
- // render drawer body dom
- renderBody: function renderBody(prefixCls) {
- var h = this.$createElement;
- if (this.destroyClose && !this.visible) {
- return null;
- }
- this.destroyClose = false;
- var _$props3 = this.$props,
- bodyStyle = _$props3.bodyStyle,
- drawerStyle = _$props3.drawerStyle;
- var containerStyle = {};
- var isDestroyOnClose = this.getDestroyOnClose();
- if (isDestroyOnClose) {
- // Increase the opacity transition, delete children after closing.
- containerStyle.opacity = 0;
- containerStyle.transition = 'opacity .3s';
- }
- return h(
- 'div',
- {
- 'class': prefixCls + '-wrapper-body',
- style: _extends({}, containerStyle, drawerStyle),
- on: {
- 'transitionend': this.onDestroyTransitionEnd
- }
- },
- [this.renderHeader(prefixCls), h(
- 'div',
- { key: 'body', 'class': prefixCls + '-body', style: bodyStyle },
- [this.$slots['default']]
- )]
- );
- }
- },
- render: function render() {
- var _classnames;
- var h = arguments[0];
- var props = getOptionProps(this);
- var customizePrefixCls = props.prefixCls,
- width = props.width,
- height = props.height,
- visible = props.visible,
- placement = props.placement,
- wrapClassName = props.wrapClassName,
- mask = props.mask,
- rest = _objectWithoutProperties(props, ['prefixCls', 'width', 'height', 'visible', 'placement', 'wrapClassName', 'mask']);
- var haveMask = mask ? '' : 'no-mask';
- var offsetStyle = {};
- if (placement === 'left' || placement === 'right') {
- offsetStyle.width = typeof width === 'number' ? width + 'px' : width;
- } else {
- offsetStyle.height = typeof height === 'number' ? height + 'px' : height;
- }
- var handler = getComponentFromProp(this, 'handle') || false;
- var getPrefixCls = this.configProvider.getPrefixCls;
- var prefixCls = getPrefixCls('drawer', customizePrefixCls);
- var vcDrawerProps = {
- ref: 'vcDrawer',
- props: _extends({}, omit(rest, ['closable', 'destroyOnClose', 'drawerStyle', 'headerStyle', 'bodyStyle', 'title', 'push', 'visible', 'getPopupContainer', 'rootPrefixCls', 'getPrefixCls', 'renderEmpty', 'csp', 'pageHeader', 'autoInsertSpaceInButton']), {
- handler: handler
- }, offsetStyle, {
- prefixCls: prefixCls,
- open: visible,
- showMask: mask,
- placement: placement,
- className: classnames((_classnames = {}, _defineProperty(_classnames, wrapClassName, !!wrapClassName), _defineProperty(_classnames, haveMask, !!haveMask), _classnames)),
- wrapStyle: this.getRcDrawerStyle()
- }),
- on: _extends({}, getListeners(this))
- };
- return h(
- VcDrawer,
- vcDrawerProps,
- [this.renderBody(prefixCls)]
- );
- }
- };
- /* istanbul ignore next */
- Drawer.install = function (Vue) {
- Vue.use(Base);
- Vue.component(Drawer.name, Drawer);
- };
- export default Drawer;
|