@krowdy-ui/core/esm/utils/notify.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/esm/extends";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";

var Notify = /*#__PURE__*/function () {
  function Notify() {
    _classCallCheck(this, Notify);

    if (typeof window !== 'undefined') {
      this.containner = Notify.createContainer();
      this.divNotification = Notify.createContainerNotify();

      this._init();

      this.index = 1;
      this.arr = [];
    }
  }

  _createClass(Notify, [{
    key: "_init",
    value: function _init() {
      if (window && window.document) {
        var containner = this.containner;
        var containnerNotify = this.divNotification;
        document.body.appendChild(containner);
        var sheet = document.createElement('style');
        sheet.innerHTML = "\n        #divNotification {\n          display: flex;\n          flex-direction: column-reverse;\n          align-items: center;\n        }\n        .notifyCustom {\n          z-index: 9999;\n          border-radius: 3px;\n          box-sizing: border-box;\n          color: #fff;\n          font-size: 1rem;\n          background: #000;\n          text-align: center;\n          padding: 12px 40px;\n          opacity: 0;\n          display: inline;\n          margin-bottom: 10px;\n          boxShadow: '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)';\n          border-radius: 5px;\n        }\n        #notifyContainer{\n          position: fixed;\n          top: 20px;\n          right: 0;\n          margin: auto;\n          left: 0;\n          z-index: 2000;\n          pointer-events: none;\n        }\n      ";
        containner.appendChild(sheet);
        containner.appendChild(containnerNotify);
      } else {
        throw new Error('Error - Reader Window');
      }
    } // setters

  }, {
    key: "setNotify",
    value: function setNotify(data) {
      var bg = '#07bc0c';

      switch (data.type) {
        case 'warning':
          bg = '#F09200';
          break;

        case 'error':
          bg = '#FF322C';
          break;

        default:
          bg = '#13BF5F';
          break;
      }

      var item = _extends(document.createElement('div'), {
        className: 'notifyCustom',
        id: "notify-".concat(this.index),
        innerHTML: data.message,
        style: "background-color: ".concat(bg)
      });

      return item;
    }
  }, {
    key: "updateIndex",
    value: function updateIndex() {
      this.index = this.index + 1;
    } // animations

  }, {
    key: "animateOut",
    value: function animateOut(id) {
      var target = document.getElementById("notify-".concat(id));
      var targetAnimation = target.animate([{
        opacity: '1'
      }, {
        opacity: '0'
      }], {
        duration: 500
      });
      targetAnimation.addEventListener('finish', function () {
        target.style.opacity = '0';
        target.remove();
      });
    }
  }, {
    key: "animateIn",
    value: function animateIn() {
      var target = document.getElementById("notify-".concat(this.index));
      var targetAnimation = target.animate([{
        opacity: '0'
      }, {
        opacity: '.9'
      }], {
        duration: 500,
        id: "notify".concat(this.index)
      });
      targetAnimation.addEventListener('finish', function () {
        target.style.opacity = '1';
      });
      this.updateIndex();
    } // observe

  }, {
    key: "subscribe",
    value: function subscribe(subscriptor) {
      var data = _extends({}, subscriptor, {
        id: this.index
      });

      this.arr.push(data);
      var containner = this.divNotification;
      var element = this.setNotify(subscriptor);
      containner.appendChild(element);
      this.animateIn();
      this.unsubscribe(data);
    }
  }, {
    key: "unsubscribe",
    value: function unsubscribe(subscriptor) {
      var _this = this;

      setTimeout(function () {
        _this.arr = _this.arr.filter(function (item) {
          return item.id !== subscriptor.id;
        });

        _this.animateOut(subscriptor.id);
      }, subscriptor.time);
    } // notify(event) {
    //   this.unsubscribe(event)
    // }

  }], [{
    key: "createContainer",
    value: function createContainer() {
      var container = document.getElementById('notifyContainer');
      if (container) return;

      var notifyContainer = _extends(document.createElement('div'), {
        id: 'notifyContainer'
      });

      return notifyContainer;
    }
  }, {
    key: "createContainerNotify",
    value: function createContainerNotify() {
      var hasDivNotification = document.getElementById('divNotification');
      if (hasDivNotification) return;

      var divNotification = _extends(document.createElement('div'), {
        id: 'divNotification'
      });

      return divNotification;
    }
  }]);

  return Notify;
}();

var Message = /*#__PURE__*/function () {
  function Message() {
    _classCallCheck(this, Message);

    if (!Message.instance) this.nt = new Notify();else return Message.instance;
  }

  _createClass(Message, [{
    key: "success",
    value: function success(message) {
      var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
        time: 2000
      };
      this.nt.subscribe({
        message: message,
        time: option.time,
        type: 'success'
      });
    }
  }, {
    key: "warning",
    value: function warning(message) {
      var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
        time: 2000
      };
      this.nt.subscribe({
        message: message,
        time: option.time,
        type: 'warning'
      });
    }
  }, {
    key: "error",
    value: function error(message) {
      var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
        time: 2000
      };
      this.nt.subscribe({
        message: message,
        time: option.time,
        type: 'error'
      });
    }
  }]);

  return Message;
}();

var instance = new Message();
Object.freeze(instance);
export default instance;