toasted - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

dist/index.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
+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: 50px;\n  width: 225px;\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}\n\n.toasted {\n  width: 100%;\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-bottom: 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 className = arguments.length <= 1 || arguments[1] === undefined ? 'info' : arguments[1];
-    var timeout = arguments.length <= 2 || arguments[2] === undefined ? 5000 : arguments[2];
+  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];
 
 
-    document.write('<link rel="stylesheet" type="text/css" href="./node_modules/toasted/toasted.css">');
+  var duration = timeout / 1000;
+  var elementExists = document.getElementById('toasted');
 
-    var duration = timeout / 1000;
-    var elementExists = document.getElementById('toasted');
+  var ul = document.createElement('ul');
+  ul.id = 'toasted';
+  ul.className = position + ' onTop--' + onTop;
 
-    var ul = document.createElement('ul');
-    ul.id = 'toasted';
+  var node = document.createElement('li');
 
-    var node = document.createElement('li');
-    node.className = 'toasted ' + className;
-    node.style.animation = 'showToaster ' + duration + 's';
+  var Tstr = function Tstr() {
+    return React.createElement(
+      'div',
+      {
+        className: 'toasted ' + type,
+        style: { animation: position.split(' ')[0] + ' ' + duration + 's' }
+      },
+      children
+    );
+  };
 
-    if (elementExists) {
-        elementExists.appendChild(node);
-        ReactDOM.render(children, node);
-    } else {
-        document.body.appendChild(ul);
-        ul.appendChild(node);
-        ReactDOM.render(children, node);
-    }
+  if (elementExists) {
+    elementExists.appendChild(node);
+    render(React.createElement(Tstr, null), node);
+  } else {
+    document.getElementsByTagName('head')[0].appendChild(style);
 
-    setTimeout(function () {
-        document.getElementById('toasted').removeChild(node);
-    }, timeout - 50);
+    document.body.appendChild(ul);
+    ul.appendChild(node);
+    render(React.createElement(Tstr, null), node);
+  }
+
+  setTimeout(function () {
+    document.getElementById('toasted').removeChild(node);
+  }, timeout - 50);
 };
 
 exports.default = Toasted;

package.json

 {
   "name": "toasted",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Simple and Easy Toast Notifications for React",
   "main": "./dist/index.js",
   "scripts": {
-    "build": "babel src --presets babel-preset-es2015 --out-dir dist",
+    "build": "babel src --out-dir dist",
     "prepublish": "npm run build"
@@ -36,3 +36,4 @@ },
     "babel-cli": "^6.10.1",
-    "babel-preset-es2015": "^6.9.0"
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.5.0"
   },
@@ -39,0 +40,0 @@ "optionalDependencies": {},

No alert changes

Improved metrics

Total package byte prevSize

4514

increased by53.69%

Worsened metrics

Dev dependency count

3

increased by50%

Number of package files

2

decreased by-33.33%

Lines of code

53

decreased by-28.38%

No dependency changes