@krowdy-ui/core
Version:
React components that implement Google's Material Design.
216 lines (193 loc) • 6.61 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var Notify = /*#__PURE__*/function () {
function Notify() {
(0, _classCallCheck2["default"])(this, Notify);
if (typeof window !== 'undefined') {
this.containner = Notify.createContainer();
this.divNotification = Notify.createContainerNotify();
this._init();
this.index = 1;
this.arr = [];
}
}
(0, _createClass2["default"])(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 = (0, _extends2["default"])(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 = (0, _extends2["default"])({}, 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 = (0, _extends2["default"])(document.createElement('div'), {
id: 'notifyContainer'
});
return notifyContainer;
}
}, {
key: "createContainerNotify",
value: function createContainerNotify() {
var hasDivNotification = document.getElementById('divNotification');
if (hasDivNotification) return;
var divNotification = (0, _extends2["default"])(document.createElement('div'), {
id: 'divNotification'
});
return divNotification;
}
}]);
return Notify;
}();
var Message = /*#__PURE__*/function () {
function Message() {
(0, _classCallCheck2["default"])(this, Message);
if (!Message.instance) this.nt = new Notify();else return Message.instance;
}
(0, _createClass2["default"])(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);
var _default = instance;
exports["default"] = _default;