react-loading-overlay - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

.storybook/stories/LoadingOverlay.js

@@ -10,2 +10,5 @@ import React from 'react'
     <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
   </div>)
@@ -12,0 +15,0 @@

es6/LoadingOverlay.js

@@ -11,3 +11,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      background: ', ';\n      color: ', ';\n      top: 0px;\n      left: 0px;\n      transition: opacity ', 'ms ease-out;\n      display: flex;\n      text-align: center;\n      font-size: 1.2em;\n      z-index: ', ';\n      &._loading-overlay-transition-appear,\n      &._loading-overlay-transition-enter {\n        opacity: 0.01;\n      }\n      &._loading-overlay-transition-appear._loading-overlay-transition-appear-active,\n      &._loading-overlay-transition-enter._loading-overlay-transition-enter-active {\n        opacity: 1;\n        transition: opacity .5s ease-in;\n      }\n      &._loading-overlay-transition-leave {\n        opacity: 1;\n      }\n      &._loading-overlay-transition-leave._loading-overlay-transition-leave-active {\n        opacity: 0;\n        transition: opacity .5s ease-in;\n      }\n    '], ['\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      background: ', ';\n      color: ', ';\n      top: 0px;\n      left: 0px;\n      transition: opacity ', 'ms ease-out;\n      display: flex;\n      text-align: center;\n      font-size: 1.2em;\n      z-index: ', ';\n      &._loading-overlay-transition-appear,\n      &._loading-overlay-transition-enter {\n        opacity: 0.01;\n      }\n      &._loading-overlay-transition-appear._loading-overlay-transition-appear-active,\n      &._loading-overlay-transition-enter._loading-overlay-transition-enter-active {\n        opacity: 1;\n        transition: opacity .5s ease-in;\n      }\n      &._loading-overlay-transition-leave {\n        opacity: 1;\n      }\n      &._loading-overlay-transition-leave._loading-overlay-transition-leave-active {\n        opacity: 0;\n        transition: opacity .5s ease-in;\n      }\n    ']),
+var _templateObject = _taggedTemplateLiteral(['\n      position: fixed;\n      height: 100%;\n      width: 100%;\n      top: 0px;\n      left: 0px;\n      background: ', ';\n      color: ', ';\n      transition: opacity ', 'ms ease-out;\n      display: flex;\n      text-align: center;\n      font-size: 1.2em;\n      z-index: ', ';\n      &._loading-overlay-transition-appear,\n      &._loading-overlay-transition-enter {\n        opacity: 0.01;\n      }\n      &._loading-overlay-transition-appear._loading-overlay-transition-appear-active,\n      &._loading-overlay-transition-enter._loading-overlay-transition-enter-active {\n        opacity: 1;\n        transition: opacity .5s ease-in;\n      }\n      &._loading-overlay-transition-leave {\n        opacity: 1;\n      }\n      &._loading-overlay-transition-leave._loading-overlay-transition-leave-active {\n        opacity: 0;\n        transition: opacity .5s ease-in;\n      }\n    '], ['\n      position: fixed;\n      height: 100%;\n      width: 100%;\n      top: 0px;\n      left: 0px;\n      background: ', ';\n      color: ', ';\n      transition: opacity ', 'ms ease-out;\n      display: flex;\n      text-align: center;\n      font-size: 1.2em;\n      z-index: ', ';\n      &._loading-overlay-transition-appear,\n      &._loading-overlay-transition-enter {\n        opacity: 0.01;\n      }\n      &._loading-overlay-transition-appear._loading-overlay-transition-appear-active,\n      &._loading-overlay-transition-enter._loading-overlay-transition-enter-active {\n        opacity: 1;\n        transition: opacity .5s ease-in;\n      }\n      &._loading-overlay-transition-leave {\n        opacity: 1;\n      }\n      &._loading-overlay-transition-leave._loading-overlay-transition-leave-active {\n        opacity: 0;\n        transition: opacity .5s ease-in;\n      }\n    ']),
     _templateObject2 = _taggedTemplateLiteral(['\n      position: relative;\n      margin: 0px auto 10px auto;\n      width: ', ';\n      max-height: 100%;\n      &:before {\n        content: \'\';\n        display: block;\n        padding-top: 100%;\n      }\n    '], ['\n      position: relative;\n      margin: 0px auto 10px auto;\n      width: ', ';\n      max-height: 100%;\n      &:before {\n        content: \'\';\n        display: block;\n        padding-top: 100%;\n      }\n    ']),
@@ -14,0 +14,0 @@ _templateObject3 = _taggedTemplateLiteral(['\n      margin: auto;\n    '], ['\n      margin: auto;\n    ']),

lib/LoadingOverlay.js

@@ -11,3 +11,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      background: ', ';\n      color: ', ';\n      top: 0px;\n      left: 0px;\n      transition: opacity ', 'ms ease-out;\n      display: flex;\n      text-align: center;\n      font-size: 1.2em;\n      z-index: ', ';\n      &._loading-overlay-transition-appear,\n      &._loading-overlay-transition-enter {\n        opacity: 0.01;\n      }\n      &._loading-overlay-transition-appear._loading-overlay-transition-appear-active,\n      &._loading-overlay-transition-enter._loading-overlay-transition-enter-active {\n        opacity: 1;\n        transition: opacity .5s ease-in;\n      }\n      &._loading-overlay-transition-leave {\n        opacity: 1;\n      }\n      &._loading-overlay-transition-leave._loading-overlay-transition-leave-active {\n        opacity: 0;\n        transition: opacity .5s ease-in;\n      }\n    '], ['\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      background: ', ';\n      color: ', ';\n      top: 0px;\n      left: 0px;\n      transition: opacity ', 'ms ease-out;\n      display: flex;\n      text-align: center;\n      font-size: 1.2em;\n      z-index: ', ';\n      &._loading-overlay-transition-appear,\n      &._loading-overlay-transition-enter {\n        opacity: 0.01;\n      }\n      &._loading-overlay-transition-appear._loading-overlay-transition-appear-active,\n      &._loading-overlay-transition-enter._loading-overlay-transition-enter-active {\n        opacity: 1;\n        transition: opacity .5s ease-in;\n      }\n      &._loading-overlay-transition-leave {\n        opacity: 1;\n      }\n      &._loading-overlay-transition-leave._loading-overlay-transition-leave-active {\n        opacity: 0;\n        transition: opacity .5s ease-in;\n      }\n    ']),
+var _templateObject = _taggedTemplateLiteral(['\n      position: fixed;\n      height: 100%;\n      width: 100%;\n      top: 0px;\n      left: 0px;\n      background: ', ';\n      color: ', ';\n      transition: opacity ', 'ms ease-out;\n      display: flex;\n      text-align: center;\n      font-size: 1.2em;\n      z-index: ', ';\n      &._loading-overlay-transition-appear,\n      &._loading-overlay-transition-enter {\n        opacity: 0.01;\n      }\n      &._loading-overlay-transition-appear._loading-overlay-transition-appear-active,\n      &._loading-overlay-transition-enter._loading-overlay-transition-enter-active {\n        opacity: 1;\n        transition: opacity .5s ease-in;\n      }\n      &._loading-overlay-transition-leave {\n        opacity: 1;\n      }\n      &._loading-overlay-transition-leave._loading-overlay-transition-leave-active {\n        opacity: 0;\n        transition: opacity .5s ease-in;\n      }\n    '], ['\n      position: fixed;\n      height: 100%;\n      width: 100%;\n      top: 0px;\n      left: 0px;\n      background: ', ';\n      color: ', ';\n      transition: opacity ', 'ms ease-out;\n      display: flex;\n      text-align: center;\n      font-size: 1.2em;\n      z-index: ', ';\n      &._loading-overlay-transition-appear,\n      &._loading-overlay-transition-enter {\n        opacity: 0.01;\n      }\n      &._loading-overlay-transition-appear._loading-overlay-transition-appear-active,\n      &._loading-overlay-transition-enter._loading-overlay-transition-enter-active {\n        opacity: 1;\n        transition: opacity .5s ease-in;\n      }\n      &._loading-overlay-transition-leave {\n        opacity: 1;\n      }\n      &._loading-overlay-transition-leave._loading-overlay-transition-leave-active {\n        opacity: 0;\n        transition: opacity .5s ease-in;\n      }\n    ']),
     _templateObject2 = _taggedTemplateLiteral(['\n      position: relative;\n      margin: 0px auto 10px auto;\n      width: ', ';\n      max-height: 100%;\n      &:before {\n        content: \'\';\n        display: block;\n        padding-top: 100%;\n      }\n    '], ['\n      position: relative;\n      margin: 0px auto 10px auto;\n      width: ', ';\n      max-height: 100%;\n      &:before {\n        content: \'\';\n        display: block;\n        padding-top: 100%;\n      }\n    ']),
@@ -14,0 +14,0 @@ _templateObject3 = _taggedTemplateLiteral(['\n      margin: auto;\n    '], ['\n      margin: auto;\n    ']),

package.json

 {
   "name": "react-loading-overlay",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Loading overlays with fade, spinner, message support.",
@@ -22,3 +22,4 @@ "keywords": [
     "lint": "standard",
-    "lint-fix": "standard --fix"
+    "lint-fix": "standard --fix",
+    "test": "jest"
   },
@@ -46,2 +47,5 @@ "repository": {
     "babel-preset-react": "^6.11.1",
+    "enzyme": "^2.6.0",
+    "jest": "^17.0.0",
+    "react-addons-test-utils": "^15.3.2",
     "rimraf": "^2.5.4",
@@ -48,0 +52,0 @@ "standard": "^8.4.0",

README.md

@@ -19,3 +19,3 @@ # Loading Overlay
     text='Loading your content...'
-    >
+    />
   <p>Some content or children or something.</p>
@@ -36,1 +36,7 @@ </div>
 + **zIndex**, `Integer`, use in case you are experiencing other z-indexed components appearing over top of the overlay.
+
+----
+
+## Future
+- Passing in custom loader components. 
+- Composable loader, maybe some alternative spinner options or something.

No alert changes

Improved metrics

Total package byte prevSize

629027

increased by0.42%

Number of package files

15

increased by15.38%

Lines of code

15969

increased by0.26%

Number of lines in readme file

41

increased by17.14%

Worsened metrics

Dev dependency count

14

increased by27.27%

No dependency changes