toasted/dist/index.js

Simple and Easy Toast Notifications for React

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

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

var style = document.createElement('style');

//You can customize the toast CSS here
var css = '@keyframes bottom {\n  0% {\n    opacity: 0;\n    transform: translateY(0px);\n  }\n  20% {\n    opacity: 1;\n    transform: translateY(-25px);\n  }\n  80% {\n    opacity: 1;\n    transform: translateY(-25px);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(0px);\n  }\n}\n\n@keyframes top {\n  0% {\n    opacity: 0;\n    transform: translateY(0px);\n  }\n  20% {\n    opacity: 1;\n    transform: translateY(25px);\n  }\n  80% {\n    opacity: 1;\n    transform: translateY(25px);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(0px);\n  }\n}\n\n.onTop--true{\n  transform: rotate(180deg);\n}\n\n.onTop--true li{\n  transform: rotate(-180deg);\n}\n\n.bottom {\n  bottom: 0px;\n}\n\n.top {\n  top: 0px;\n}\n\n.center {\n  left: 25%;\n  width: 50%;\n}\n\n.left{\n  left: 10px;\n  width: 225px;\n}\n\n.right{\n  right: 10px;\n  width: 225px;\n}\n\n.fullWidth{\n    width: 100%;\n    left: 0;\n}\n\n#toasted{\n  display: flex;\n  text-align: center;\n  position: absolute;\n  z-index: 9999;\n  opacity: 1;\n  flex-direction: column;\n  list-style: none;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.toasted {\n  padding: 15px;\n  color: white;\n  font-weight: bold;\n  border-radius: 5px;\n  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);\n  -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);\n  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);\n  margin: 10px;\n}\n\n.success{\n  background-color: rgba(30, 156, 4, 0.84);\n}\n\n.info{\n  background-color: rgba(4, 102, 156, 0.84);\n}\n\n.warning{\n  background-color: rgba(238, 114, 0, 0.84);\n}\n\n.error{\n  background-color: rgba(158, 40, 40, 0.84);\n}';

style.type = 'text/css';
style.appendChild(document.createTextNode(css));

//Toasted Function - You can change the default values for the toast here
//classname can be info, warning, success and error OR you can create another style in the css above
//position should respect the order VERTICAL first HORIZONTAL second. IE: top left or bottom right
//timeout can be any number in milliseconds. 5000 is 5 seconds
//if true, OnTop displays new toats above the last one
var Toasted = function Toasted(children) {
  var type = arguments.length <= 1 || arguments[1] === undefined ? 'info' : arguments[1];
  var position = arguments.length <= 2 || arguments[2] === undefined ? 'bottom center' : arguments[2];
  var timeout = arguments.length <= 3 || arguments[3] === undefined ? 5000 : arguments[3];
  var onTop = arguments.length <= 4 || arguments[4] === undefined ? false : arguments[4];


  var duration = timeout / 1000;
  var elementExists = document.getElementById('toasted');

  var ul = document.createElement('ul');
  ul.id = 'toasted';
  ul.className = position + ' onTop--' + onTop;

  var node = document.createElement('li');

  var Tstr = function Tstr() {
    return _react2.default.createElement(
      'div',
      {
        className: 'toasted ' + type,
        style: { animation: position.split(' ')[0] + ' ' + duration + 's' }
      },
      children
    );
  };

  if (elementExists) {
    elementExists.appendChild(node);
    _reactDom2.default.render(_react2.default.createElement(Tstr, null), node);
  } else {
    document.getElementsByTagName('head')[0].appendChild(style);

    document.body.appendChild(ul);
    ul.appendChild(node);
    _reactDom2.default.render(_react2.default.createElement(Tstr, null), node);
  }

  setTimeout(function () {
    document.getElementById('toasted').removeChild(node);
  }, timeout - 50);
};

exports.default = Toasted;