ten-design-vue/lib/notification/notification.js

ten-vue

"use strict";

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

var _icon = _interopRequireDefault(require("../icon"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var ICON_TYPE_MAP = {
  error: 'circle_clear',
  success: 'circle_tick',
  warning: 'circle_error',
  info: 'circle_info'
};
var _default = {
  components: {
    TenIcon: _icon.default
  },
  props: {
    /**
     * 消息类型
     *
     * @member success | info | warning | error
     */
    type: {
      type: String,
      validator: function validator(v) {
        return ['success', 'info', 'warning', 'error'].indexOf(v) > -1;
      }
    },

    /**
     * 显示关闭按钮
     */
    showClose: {
      type: Boolean,
      default: true
    },

    /**
     * 显示时长，单位ms
     */
    duration: {
      type: Number,
      default: 4500
    },

    /**
     * 标题
     *
     * @member String | Function(JSX)
     */
    title: [String, Function],

    /**
     * 内容
     *
     * @member String | Function(JSX)
     */
    message: [String, Function],

    /**
     * 自定义弹出位置
     *
     * @member top-right | top-left | bottom-right | bottom-left
     */
    position: {
      type: String,
      validator: function validator(v) {
        return ['top-right', 'top-left', 'bottom-right', 'bottom-left'].indexOf(v) > -1;
      },
      default: 'top-right'
    },

    /**
     * 自定义类
     */
    customClass: String,

    /**
     * 关闭按钮回掉
     */
    onClose: Function
  },
  data: function data() {
    return {
      timer: null,
      closed: false,
      visible: false
    };
  },
  computed: {
    className: function className() {
      return ['ten-notification', this.customClass, {
        'ten-notification--success': this.type === 'success',
        'ten-notification--error': this.type === 'error',
        'ten-notification--info': this.type === 'info',
        'ten-notification--warning': this.type === 'warning'
      }];
    },
    horizontalClass: function horizontalClass() {
      return this.position.indexOf('right') > -1 ? 'right' : 'left';
    },
    iconType: function iconType() {
      return this.icon || ICON_TYPE_MAP[this.type];
    }
  },
  watch: {
    closed: function closed(newVal) {
      if (newVal) {
        this.visible = false;
        this.$el.addEventListener('animationend', this.destroyElement);
      }
    }
  },
  mounted: function mounted() {
    var _this = this;

    if (this.duration > 0) {
      this.timer = setTimeout(function () {
        if (!_this.closed) {
          _this.close();
        }
      }, this.duration);
    }
  },
  render: function render() {
    var h = arguments[0];
    var message = this.message,
        title = this.title;
    if (typeof message === 'function') message = message();
    if (typeof title === 'function') title = title();
    return h("transition", {
      attrs: {
        appear: true,
        name: "ten-notification-fade"
      }
    }, [h("div", {
      directives: [{
        name: "show",
        value: this.visible
      }],
      "class": ['ten-notification', this.horizontalClass],
      on: {
        "mouseenter": this.clearTimer,
        "mouseleave": this.startTimer
      }
    }, [this.type && h("ten-icon", {
      "class": ['ten-notification_icon', this.type],
      attrs: {
        icon: this.iconType
      }
    }), h("div", {
      "class": "ten-notification_content"
    }, [h("div", {
      "class": "ten-notification_title"
    }, [title]), h("div", {
      "class": "ten-notification_message"
    }, [message])]), this.showClose && h("div", {
      "class": "ten-notification_closeBtn",
      on: {
        "click": this.close
      }
    }, [h("ten-icon", {
      attrs: {
        icon: "clear"
      }
    })])])]);
  },
  methods: {
    close: function close() {
      this.closed = true;

      if (typeof this.onClose === 'function') {
        this.onClose();
      }
    },
    clearTimer: function clearTimer() {
      this.timer && clearTimeout(this.timer);
    },
    startTimer: function startTimer() {
      var _this2 = this;

      if (this.duration > 0) {
        this.timer = setTimeout(function () {
          if (!_this2.closed) {
            _this2.close();
          }
        }, this.duration);
      }
    },
    destroyElement: function destroyElement() {
      this.$el.removeEventListener('animationend', this.destroyElement);
      this.$destroy();
      this.$el.parentNode.removeChild(this.$el);
    }
  }
};
exports.default = _default;