react-loading-overlay - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

__tests__/LoadingOverlay.test.js

@@ -27,10 +27,15 @@ /* global jest, describe, it, expect */
     const wrapped = mount(<LoadingOverlay />)
-    expect(wrapped.html()).toBeNull()
+    expect(wrapped.childAt(0).length).toBe(0)
   })
 
+  it('is in DOM initially if active:true', () => {
+    const wrapped = mount(<LoadingOverlay active />)
+    expect(wrapped.childAt(0).length).toBe(1)
+  })
+
   it('removes self from DOM when not active', () => {
     const wrapped = mount(<DelayedInactive />)
-    expect(wrapped.html()).not.toBeNull()
+    expect(wrapped.childAt(0).length).toBe(1)
     jest.runAllTimers()
-    expect(wrapped.html()).toBeNull()
+    expect(wrapped.childAt(0).length).toBe(0)
   })
@@ -40,7 +45,7 @@
     const wrapped = mount(<DelayedInactive animate />)
-    expect(wrapped.html()).not.toBeNull()
+    expect(wrapped.childAt(0).length).toBe(1)
     jest.runOnlyPendingTimers()
     expect(wrapped.state('active')).toBeFalsy()
-    expect(wrapped.html()).not.toBeNull()
+    expect(wrapped.childAt(0).length).toBe(1)
   })
 })

.storybook/stories/LoadingOverlay.js

@@ -15,27 +15,30 @@ import React from 'react'
 
-const FadeWrapper = React.createClass({
-  getInitialState: function () {
-    return {
+const Div = (props) => (
+  <div style={{
+    position: 'relative',
+    outline: '1px solid red',
+    width: '200px',
+    height: '200px',
+    overflowY: 'scroll'
+  }}>{props.children}</div>
+)
+
+class FadeWrapper extends React.Component {
+  constructor () {
+    super()
+    this.state = {
       active: true
     }
-  },
-
-  waitAndToggle: function () {
-    this.looper = setTimeout(() => {
+  }
+  componentWillUnmount () {
+    clearTimeout(this.looper)
+  }
+  componentDidMount () {
+    this.looper = setInterval(() => {
       this.setState({
         active: !this.state.active
       })
-      this.waitAndToggle()
     }, 2000)
-  },
-
-  componentWillUnmount: function () {
-    clearTimeout(this.looper)
-  },
-
-  componentDidMount: function () {
-    this.waitAndToggle()
-  },
-
-  render: function () {
+  }
+  render () {
     return (
@@ -48,69 +51,68 @@ <LoadingOverlay
   }
-})
+}
 
 storiesOf('LoadingOverlay', module)
   .add('no props', () => (
-    <div>
-      <LoadingOverlay />
+    <LoadingOverlay>
       {wrapped}
-    </div>
+    </LoadingOverlay>
   ))
   .add('active with text', () => (
     <div>
+      Don't overlay this
       <LoadingOverlay
         active
         text='Loading your fake content...'
-        />
-      {wrapped}
+        >
+        {wrapped}
+      </LoadingOverlay>
     </div>
   ))
   .add('with spinner', () => (
-    <div>
-      <LoadingOverlay
-        active
-        spinner
-        />
+    <LoadingOverlay
+      active
+      spinner
+      >
       {wrapped}
-    </div>
+    </LoadingOverlay>
   ))
   .add('fading', () => (
     <div>
+      Don't overlay this
       <FadeWrapper
         animate
         text='Loading stuff...'
-        />
-      {wrapped}
+        >
+        {wrapped}
+      </FadeWrapper>
     </div>
   ))
   .add('with spinner and text', () => (
-    <div>
-      <LoadingOverlay
-        active
-        spinner
-        text='Loading stuff...'
-        />
+    <LoadingOverlay
+      active
+      spinner
+      text='Loading stuff...'
+      >
       {wrapped}
-    </div>
+    </LoadingOverlay>
   ))
   .add('custom colors', () => (
-    <div>
-      <LoadingOverlay
-        active
-        spinner
-        text='Look at this background!'
-        background='rgba(57, 204, 204, 0.5)'
-        color='rgb(0, 0, 0)'
-        />
+    <LoadingOverlay
+      active
+      spinner
+      text='Look at this background!'
+      background='rgba(57, 204, 204, 0.5)'
+      color='rgb(0, 0, 0)'
+      >
       {wrapped}
-    </div>
+    </LoadingOverlay>
   ))
   .add('custom size', () => (
-    <div>
-      <LoadingOverlay
-        active
-        spinner
-        spinnerSize='100px'
-        />
+    <LoadingOverlay
+      active
+      spinner
+      spinnerSize='100px'
+      >
       {wrapped}
-    </div>
+    </LoadingOverlay>
   ))

CHANGELOG.md

 # Change Log
 
+## [v0.2.2] - 2016-11-13
+
+### Reverted breaking changes
+- Reverted the pattern back to a wrapping component. Realized it's probably more cumbersome to require users to style their own wrapping containers properly. Will provide an alternate component to use as a child though.
+
 ## [v0.2.0] - 2016-11-12
@@ -4,0 +9,0 @@

es6/LoadingOverlay.js

@@ -11,3 +11,3 @@ 'use strict';
 
-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    ']),
+var _templateObject = _taggedTemplateLiteral(['\n      position: absolute;\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: absolute;\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    ']),
@@ -84,3 +84,11 @@ _templateObject3 = _taggedTemplateLiteral(['\n      margin: auto;\n    '], ['\n      margin: auto;\n    ']),
       }
-      return loadNode;
+      return _react2.default.createElement(
+        'div',
+        {
+          className: this.props.className,
+          style: { position: 'relative' }
+        },
+        loadNode,
+        this.props.children
+      );
     }
@@ -87,0 +95,0 @@ }]);

lib/LoadingOverlay.js

@@ -11,3 +11,3 @@ 'use strict';
 
-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    ']),
+var _templateObject = _taggedTemplateLiteral(['\n      position: absolute;\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: absolute;\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    ']),
@@ -84,3 +84,11 @@ _templateObject3 = _taggedTemplateLiteral(['\n      margin: auto;\n    '], ['\n      margin: auto;\n    ']),
       }
-      return loadNode;
+      return _react2.default.createElement(
+        'div',
+        {
+          className: this.props.className,
+          style: { position: 'relative' }
+        },
+        loadNode,
+        this.props.children
+      );
     }
@@ -87,0 +95,0 @@ }]);

package.json

 {
   "name": "react-loading-overlay",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Loading overlays with fade, spinner, message support.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -5,3 +5,3 @@ # Loading Overlay
 
-A customizable, simple loading overlay.
+A customizable, simple loading overlay with transitions.
 
@@ -14,11 +14,12 @@ ![](https://d17oy1vhnax1f7.cloudfront.net/items/1f1V3g0T0u403m3U431n/Screen%20Recording%202016-10-20%20at%2002.29%20PM.gif)
 
+Wrap your components in it and toggle the `active` prop as necessary.
+
 ```javascript
-<div>
-  <LoadingOverlay
-    active={isActive}
-    spinner
-    text='Loading your content...'
-    />
+<Loadable
+  active={isActive}
+  spinner
+  text='Loading your content...'
+  >
   <p>Some content or children or something.</p>
-</div>
+</Loadable>
 ```
@@ -41,3 +42,3 @@
 ## Future
-- Passing in custom loader components. 
+- Passing in custom loader components.
 - Composable loader, maybe some alternative spinner options or something.

No alert changes

Improved metrics

Total package byte prevSize

630513

increased by0.24%

Lines of code

16010

increased by0.26%

Number of lines in readme file

42

increased by2.44%

No dependency changes