ant-design-vue/lib/drawer/index.js

An enterprise-class UI design language and Vue-based implementation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.drawerProps = exports.default = void 0;

var _vue = require("vue");

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _propsUtil = require("../_util/props-util");

var _classNames = _interopRequireDefault(require("../_util/classNames"));

var _vcDrawer = _interopRequireDefault(require("../vc-drawer"));

var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));

var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CloseOutlined"));

var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));

var _type = require("../_util/type");

var _omit = _interopRequireDefault(require("../_util/omit"));

var _devWarning = _interopRequireDefault(require("../vc-util/devWarning"));

var __rest = void 0 && (void 0).__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

var PlacementTypes = (0, _type.tuple)('top', 'right', 'bottom', 'left');
var SizeTypes = (0, _type.tuple)('default', 'large');
var defaultPushState = {
  distance: 180
};

var drawerProps = function drawerProps() {
  return {
    autofocus: {
      type: Boolean,
      default: undefined
    },
    closable: {
      type: Boolean,
      default: undefined
    },
    closeIcon: _vueTypes.default.any,
    destroyOnClose: {
      type: Boolean,
      default: undefined
    },
    forceRender: {
      type: Boolean,
      default: undefined
    },
    getContainer: _vueTypes.default.any,
    maskClosable: {
      type: Boolean,
      default: undefined
    },
    mask: {
      type: Boolean,
      default: undefined
    },
    maskStyle: {
      type: Object,
      default: undefined
    },

    /** @deprecated Use `style` instead */
    wrapStyle: {
      type: Object,
      default: undefined
    },
    style: {
      type: Object,
      default: undefined
    },
    class: _vueTypes.default.any,

    /** @deprecated Use `class` instead */
    wrapClassName: String,
    size: {
      type: String
    },
    drawerStyle: {
      type: Object,
      default: undefined
    },
    headerStyle: {
      type: Object,
      default: undefined
    },
    bodyStyle: {
      type: Object,
      default: undefined
    },
    contentWrapperStyle: {
      type: Object,
      default: undefined
    },
    title: _vueTypes.default.any,
    visible: {
      type: Boolean,
      default: undefined
    },
    width: _vueTypes.default.oneOfType([_vueTypes.default.string, _vueTypes.default.number]),
    height: _vueTypes.default.oneOfType([_vueTypes.default.string, _vueTypes.default.number]),
    zIndex: Number,
    prefixCls: String,
    push: _vueTypes.default.oneOfType([_vueTypes.default.looseBool, {
      type: Object
    }]),
    placement: _vueTypes.default.oneOf(PlacementTypes),
    keyboard: {
      type: Boolean,
      default: undefined
    },
    extra: _vueTypes.default.any,
    footer: _vueTypes.default.any,
    footerStyle: {
      type: Object,
      default: undefined
    },
    level: _vueTypes.default.any,
    levelMove: {
      type: [Number, Array, Function]
    },
    handle: _vueTypes.default.any,

    /** @deprecated Use `@afterVisibleChange` instead */
    afterVisibleChange: Function,
    onAfterVisibleChange: Function,
    'onUpdate:visible': Function,
    onClose: Function
  };
};

exports.drawerProps = drawerProps;
var Drawer = (0, _vue.defineComponent)({
  name: 'ADrawer',
  inheritAttrs: false,
  props: (0, _propsUtil.initDefaultProps)(drawerProps(), {
    closable: true,
    placement: 'right',
    maskClosable: true,
    mask: true,
    level: null,
    keyboard: true,
    push: defaultPushState
  }),
  slots: ['closeIcon', 'title', 'extra', 'footer', 'handle'],
  // emits: ['update:visible', 'close', 'afterVisibleChange'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit,
        slots = _ref.slots,
        attrs = _ref.attrs;
    var sPush = (0, _vue.ref)(false);
    var destroyClose = (0, _vue.ref)(false);
    var vcDrawer = (0, _vue.ref)(null);
    var parentDrawerOpts = (0, _vue.inject)('parentDrawerOpts', null);

    var _useConfigInject = (0, _useConfigInject2.default)('drawer', props),
        prefixCls = _useConfigInject.prefixCls;

    (0, _devWarning.default)(!props.afterVisibleChange, 'Drawer', '`afterVisibleChange` prop is deprecated, please use `@afterVisibleChange` event instead');
    (0, _devWarning.default)(props.wrapStyle === undefined, 'Drawer', '`wrapStyle` prop is deprecated, please use `style` instead');
    (0, _devWarning.default)(props.wrapClassName === undefined, 'Drawer', '`wrapClassName` prop is deprecated, please use `class` instead');

    var setPush = function setPush() {
      sPush.value = true;
    };

    var setPull = function setPull() {
      sPush.value = false;
      (0, _vue.nextTick)(function () {
        domFocus();
      });
    };

    (0, _vue.provide)('parentDrawerOpts', {
      setPush: setPush,
      setPull: setPull
    });
    (0, _vue.onMounted)(function () {
      var visible = props.visible;

      if (visible && parentDrawerOpts) {
        parentDrawerOpts.setPush();
      }
    });
    (0, _vue.onUnmounted)(function () {
      if (parentDrawerOpts) {
        parentDrawerOpts.setPull();
      }
    });
    (0, _vue.watch)(function () {
      return props.visible;
    }, function (visible) {
      if (parentDrawerOpts) {
        if (visible) {
          parentDrawerOpts.setPush();
        } else {
          parentDrawerOpts.setPull();
        }
      }
    }, {
      flush: 'post'
    });

    var domFocus = function domFocus() {
      var _a, _b;

      (_b = (_a = vcDrawer.value) === null || _a === void 0 ? void 0 : _a.domFocus) === null || _b === void 0 ? void 0 : _b.call(_a);
    };

    var close = function close(e) {
      emit('update:visible', false);
      emit('close', e);
    };

    var afterVisibleChange = function afterVisibleChange(visible) {
      var _a;

      (_a = props.afterVisibleChange) === null || _a === void 0 ? void 0 : _a.call(props, visible);
      emit('afterVisibleChange', visible);
    };

    var destroyOnClose = (0, _vue.computed)(function () {
      return props.destroyOnClose && !props.visible;
    });

    var onDestroyTransitionEnd = function onDestroyTransitionEnd() {
      var isDestroyOnClose = destroyOnClose.value;

      if (!isDestroyOnClose) {
        return;
      }

      if (!props.visible) {
        destroyClose.value = true;
      }
    };

    var pushTransform = (0, _vue.computed)(function () {
      var push = props.push,
          placement = props.placement;
      var distance;

      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(".concat(placement === 'left' ? distance : -distance, "px)");
      }

      if (placement === 'top' || placement === 'bottom') {
        return "translateY(".concat(placement === 'top' ? distance : -distance, "px)");
      }

      return null;
    });
    var offsetStyle = (0, _vue.computed)(function () {
      // https://github.com/ant-design/ant-design/issues/24287
      var visible = props.visible,
          mask = props.mask,
          placement = props.placement,
          _props$size = props.size,
          size = _props$size === void 0 ? 'default' : _props$size,
          width = props.width,
          height = props.height;

      if (!visible && !mask) {
        return {};
      }

      var val = {};

      if (placement === 'left' || placement === 'right') {
        var defaultWidth = size === 'large' ? 736 : 378;
        val.width = typeof width === 'undefined' ? defaultWidth : width;
        val.width = typeof val.width === 'string' ? val.width : "".concat(val.width, "px");
      } else {
        var defaultHeight = size === 'large' ? 736 : 378;
        val.height = typeof height === 'undefined' ? defaultHeight : height;
        val.height = typeof val.height === 'string' ? val.height : "".concat(val.height, "px");
      }

      return val;
    });
    var drawerStyle = (0, _vue.computed)(function () {
      var zIndex = props.zIndex,
          wrapStyle = props.wrapStyle,
          mask = props.mask,
          style = props.style;
      var val = mask ? {} : offsetStyle.value;
      return (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
        zIndex: zIndex,
        transform: sPush.value ? pushTransform.value : undefined
      }, val), wrapStyle), style);
    });

    var renderHeader = function renderHeader(prefixCls) {
      var closable = props.closable,
          headerStyle = props.headerStyle;
      var extra = (0, _propsUtil.getPropsSlot)(slots, props, 'extra');
      var title = (0, _propsUtil.getPropsSlot)(slots, props, 'title');

      if (!title && !closable) {
        return null;
      }

      return (0, _vue.createVNode)("div", {
        "class": (0, _classNames.default)("".concat(prefixCls, "-header"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-header-close-only"), closable && !title && !extra)),
        "style": headerStyle
      }, [(0, _vue.createVNode)("div", {
        "class": "".concat(prefixCls, "-header-title")
      }, [renderCloseIcon(prefixCls), title && (0, _vue.createVNode)("div", {
        "class": "".concat(prefixCls, "-title")
      }, [title])]), extra && (0, _vue.createVNode)("div", {
        "class": "".concat(prefixCls, "-extra")
      }, [extra])]);
    };

    var renderCloseIcon = function renderCloseIcon(prefixCls) {
      var _a;

      var closable = props.closable;
      var $closeIcon = slots.closeIcon ? (_a = slots.closeIcon) === null || _a === void 0 ? void 0 : _a.call(slots) : props.closeIcon;
      return closable && (0, _vue.createVNode)("button", {
        "key": "closer",
        "onClick": close,
        "aria-label": "Close",
        "class": "".concat(prefixCls, "-close")
      }, [$closeIcon === undefined ? (0, _vue.createVNode)(_CloseOutlined.default, null, null) : null]);
    };

    var renderBody = function renderBody(prefixCls) {
      var _a;

      if (destroyClose.value && !props.visible) {
        return null;
      }

      destroyClose.value = false;
      var bodyStyle = props.bodyStyle,
          drawerStyle = props.drawerStyle;
      var containerStyle = {};
      var isDestroyOnClose = destroyOnClose.value;

      if (isDestroyOnClose) {
        // Increase the opacity transition, delete children after closing.
        containerStyle.opacity = 0;
        containerStyle.transition = 'opacity .3s';
      }

      return (0, _vue.createVNode)("div", {
        "class": "".concat(prefixCls, "-wrapper-body"),
        "style": (0, _extends2.default)((0, _extends2.default)({}, containerStyle), drawerStyle),
        "onTransitionend": onDestroyTransitionEnd
      }, [renderHeader(prefixCls), (0, _vue.createVNode)("div", {
        "key": "body",
        "class": "".concat(prefixCls, "-body"),
        "style": bodyStyle
      }, [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)]), renderFooter(prefixCls)]);
    };

    var renderFooter = function renderFooter(prefixCls) {
      var footer = (0, _propsUtil.getPropsSlot)(slots, props, 'footer');

      if (!footer) {
        return null;
      }

      var footerClassName = "".concat(prefixCls, "-footer");
      return (0, _vue.createVNode)("div", {
        "class": footerClassName,
        "style": props.footerStyle
      }, [footer]);
    };

    return function () {
      var _classnames2;

      var width = props.width,
          height = props.height,
          visible = props.visible,
          placement = props.placement,
          mask = props.mask,
          wrapClassName = props.wrapClassName,
          className = props.class,
          rest = __rest(props, ["width", "height", "visible", "placement", "mask", "wrapClassName", "class"]);

      var val = mask ? offsetStyle.value : {};
      var haveMask = mask ? '' : 'no-mask';
      var vcDrawerProps = (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, attrs), (0, _omit.default)(rest, ['size', 'closeIcon', 'closable', 'destroyOnClose', 'drawerStyle', 'headerStyle', 'bodyStyle', 'title', 'push', 'wrapStyle', 'onAfterVisibleChange', 'onClose', 'onUpdate:visible'])), val), {
        onClose: close,
        afterVisibleChange: afterVisibleChange,
        handler: false,
        prefixCls: prefixCls.value,
        open: visible,
        showMask: mask,
        placement: placement,
        class: (0, _classNames.default)((_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, className, className), (0, _defineProperty2.default)(_classnames2, wrapClassName, !!wrapClassName), (0, _defineProperty2.default)(_classnames2, haveMask, !!haveMask), _classnames2)),
        style: drawerStyle.value,
        ref: vcDrawer
      });
      return (0, _vue.createVNode)(_vcDrawer.default, vcDrawerProps, {
        handler: props.handle ? function () {
          return props.handle;
        } : slots.handle,
        default: function _default() {
          return renderBody(prefixCls.value);
        }
      });
    };
  }
});

var _default2 = (0, _type.withInstall)(Drawer);

exports.default = _default2;