@meve/ui/es/message/Message.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import Icon from '../icon';
import Loading from '../loading';
import Button from '../button';
import context from '../context';
import { createNamespace } from '../utils/create';
import { props } from './props';
import { removeItem, toNumber } from '../utils/shared';




var _createNamespace = createNamespace('message'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var typeIcons = {
  info: 'information',
  warning: 'warning',
  error: 'error',
  success: 'checkbox-marked-circle'
};
var MessagePlugin = createComponent({
  props: props,
  data: function data() {
    return {
      forbidClick: false,
      messages: []
    };
  },
  methods: {
    createMessage: function createMessage(message) {
      var _this = this;

      if (message.lockScroll) {
        document.body.classList.add('m--lock');
      }

      if (message.forbidClick) {
        this.forbidClick = true;
      }

      this.messages.push(message);
      context.zIndex++;

      if (message.duration !== Infinity) {
        setTimeout(function () {
          return _this.removeMessage(message);
        }, message.duration);
      }
    },
    removeMessage: function removeMessage(message) {
      if (!this.messages.includes(message)) {
        return;
      }

      removeItem(this.messages, message);
      this.$emit('remove', message.id);
      var hasLockScrollMessage = this.messages.some(function (m) {
        return m.lockScroll;
      });
      var hasForbidClickMessage = this.messages.some(function (m) {
        return m.forbidClick;
      });

      if (!hasLockScrollMessage) {
        document.body.classList.remove('m--lock');
      }

      if (!hasForbidClickMessage) {
        this.forbidClick = false;
      }
    },
    handleLeave: function handleLeave(el) {
      this.$emit('leave', toNumber(el.getAttribute('item-id')));
    },
    handleAfterLeave: function handleAfterLeave(el) {
      this.$emit('after-leave', toNumber(el.getAttribute('item-id')));
    },
    renderTypeIcon: function renderTypeIcon(type) {
      var h = this.$createElement;

      if (type === 'loading') {
        return h(Loading, {
          "attrs": {
            "message-cover": true,
            "loading": true
          },
          "class": namespace('__loading')
        });
      }

      return h(Icon, {
        "attrs": {
          "message-cover": true,
          "name": typeIcons[type]
        },
        "class": namespace('__icon')
      });
    },
    renderMessageItem: function renderMessageItem() {
      var _this2 = this;

      var h = this.$createElement;
      return this.messages.map(function (message) {
        return h("div", {
          "attrs": {
            "item-id": message.id
          },
          "key": message.id,
          "class": namespace('__item')
        }, [h("div", {
          "class": [namespace('__message-item'), namespace("--" + message.type)]
        }, [h("div", {
          "class": namespace('__main')
        }, [_this2.renderTypeIcon(message.type), h("div", {
          "class": namespace('__content')
        }, [message.content])]), message.closeable && h(Button, {
          "attrs": {
            "message-cover": true,
            "size": "mini",
            "text": true,
            "round": true
          },
          "class": namespace('__close-button'),
          "on": _extends({}, {
            "click": function click($event) {
              for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
                attrs[_key - 1] = arguments[_key];
              }

              (function () {
                return _this2.removeMessage(message);
              }).apply(void 0, [$event].concat(attrs));
            }
          })
        }, [h(Icon, {
          "attrs": {
            "message-cover": true,
            "name": "close"
          },
          "class": namespace('__close-icon')
        })])])]);
      });
    }
  },
  render: function render() {
    var _this3 = this;

    var h = arguments[0];
    return h("div", {
      "class": [namespace(), 'm--box', this.forbidClick && namespace('--forbid-click')],
      "style": {
        zIndex: context.zIndex
      }
    }, [h("transition-group", {
      "class": [namespace('__list'), namespace("--" + this.position)],
      "attrs": {
        "tag": "ul",
        "name": "m-message-fade"
      },
      "on": _extends({}, {
        "leave": function leave($event) {
          for (var _len2 = arguments.length, attrs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
            attrs[_key2 - 1] = arguments[_key2];
          }

          _this3.handleLeave.apply(_this3, [$event].concat(attrs));
        },
        "afterLeave": function afterLeave($event) {
          for (var _len3 = arguments.length, attrs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
            attrs[_key3 - 1] = arguments[_key3];
          }

          _this3.handleAfterLeave.apply(_this3, [$event].concat(attrs));
        }
      })
    }, [this.renderMessageItem()])]);
  }
});
export var _MessageComponent = MessagePlugin;
export default MessagePlugin;