react-loading-overlay - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

.storybook/stories/LoadingOverlay.js

@@ -1,13 +0,12 @@
-import React from 'react';
-import { storiesOf, action } from '@kadira/storybook';
-import LoadingOverlay from '../../src/LoadingOverlay.js';
+import React from 'react'
+import { storiesOf, action } from '@kadira/storybook'
+import LoadingOverlay from '../../src/LoadingOverlay.js'
 
-
-const wrapped = (<div style={{padding: '20px', background: '#FFF'}}>
+const wrapped = (
+  <div style={{padding: '20px', background: '#FFF'}}>
     <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue.</p>
     <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.</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>);
+  </div>)
 
-
 const FadeWrapper = React.createClass({
@@ -24,13 +23,13 @@ getInitialState: function () {
         active: !this.state.active
-      });
-      this.waitAndToggle();
-    }, 2000);
+      })
+      this.waitAndToggle()
+    }, 2000)
   },
 
   componentWillUnmount: function () {
-    clearTimeout(this.looper);
+    clearTimeout(this.looper)
   },
 
   componentDidMount: function () {
-    this.waitAndToggle();
+    this.waitAndToggle()
   },
@@ -40,56 +39,75 @@
     return (
-      <div>
-        <LoadingOverlay
-          {...this.props}
-          active={this.state.active}
-          >{wrapped}</LoadingOverlay>
-      </div>
-    );
+      <LoadingOverlay
+        {...this.props}
+        active={this.state.active}
+        />
+    )
   }
-});
+})
 
 storiesOf('LoadingOverlay', module)
   .add('no props', () => (
-    <LoadingOverlay>{wrapped}</LoadingOverlay>
+    <div>
+      <LoadingOverlay />
+      {wrapped}
+    </div>
   ))
   .add('active with text', () => (
-    <LoadingOverlay
-      active={true}
-      text='Loading your fake content...'
-      >{wrapped}</LoadingOverlay>
+    <div>
+      <LoadingOverlay
+        active
+        text='Loading your fake content...'
+        />
+      {wrapped}
+    </div>
   ))
   .add('with spinner', () => (
-    <LoadingOverlay
-      active={true}
-      spinner={true}
-      >{wrapped}</LoadingOverlay>
+    <div>
+      <LoadingOverlay
+        active
+        spinner
+        />
+      {wrapped}
+    </div>
   ))
   .add('fading', () => (
-    <FadeWrapper
-      animate={true}
-      text='Loading stuff...'
-      />
+    <div>
+      <FadeWrapper
+        animate
+        text='Loading stuff...'
+        />
+      {wrapped}
+    </div>
   ))
   .add('with spinner and text', () => (
-    <LoadingOverlay
-      active={true}
-      spinner={true}
-      text='Loading stuff...'
-      >{wrapped}</LoadingOverlay>
+    <div>
+      <LoadingOverlay
+        active
+        spinner
+        text='Loading stuff...'
+        />
+      {wrapped}
+    </div>
   ))
   .add('custom colors', () => (
-    <LoadingOverlay
-      active={true}
-      spinner={true}
-      text='Look at this background!'
-      background='rgba(57,204,204,.5)'
-      color='rgb(0,0,0)'
-      >{wrapped}</LoadingOverlay>
+    <div>
+      <LoadingOverlay
+        active
+        spinner
+        text='Look at this background!'
+        background='rgba(57, 204, 204, 0.5)'
+        color='rgb(0, 0, 0)'
+        />
+      {wrapped}
+    </div>
   ))
   .add('custom size', () => (
-    <LoadingOverlay
-      active={true}
-      spinner={true}
-      spinnerSize='100px'
-      >{wrapped}</LoadingOverlay>
+    <div>
+      <LoadingOverlay
+        active
+        spinner
+        spinnerSize='100px'
+        />
+      {wrapped}
+    </div>
   ))

es6/LoadingOverlay.js

@@ -7,12 +7,5 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /**
-                                                                                                                                                                                                                                                                   * LoadingOverlay
-                                                                                                                                                                                                                                                                   *
-                                                                                                                                                                                                                                                                   * Wrap your component in this and set active={true/false}.
-                                                                                                                                                                                                                                                                   * react transition group will handle the fade of the overlay portion.
-                                                                                                                                                                                                                                                                   * apply any classnames you need as normal with className prop.
-                                                                                                                                                                                                                                                                  
-                                                                                                                                                                                                                                                                    <LoadingOverlay active={true} text='Saving...'>my children</LoadingOverlay>
-                                                                                                                                                                                                                                                                   */
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -43,121 +36,151 @@ 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 LoadingOverlayWrapper = _react2.default.createClass({
-  displayName: 'LoadingOverlayWrapper',
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-  propTypes: {
-    active: _react2.default.PropTypes.bool,
-    text: _react2.default.PropTypes.string,
-    spinner: _react2.default.PropTypes.bool,
-    spinnerSize: _react2.default.PropTypes.string,
-    className: _react2.default.PropTypes.string,
-    background: _react2.default.PropTypes.string,
-    color: _react2.default.PropTypes.string,
-    zIndex: _react2.default.PropTypes.number,
-    animate: _react2.default.PropTypes.bool
-  },
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * LoadingOverlay
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                *
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * Set as child component in a container. Toggle state with `active` prop.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * React transition group will handle the fade of the overlay.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                */
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      active: false,
-      className: '_loading-overlay',
-      background: 'rgba(0,0,0,.7)',
-      spinnerSize: '50px',
-      color: '#FFF',
-      zIndex: 800,
-      animate: false
-    };
-  },
+var FirstChild = function FirstChild(props) {
+  return _react.Children.toArray(props.children)[0] || null;
+};
 
-  render: function render() {
-    var loadNode = this.props.active ? _react2.default.createElement(LoadingOverlay, _extends({ key: 'the_dimmer' }, this.props)) : null;
-    var wrapNode = loadNode;
-    if (this.props.animate || this.props.spinner) {
-      wrapNode = _react2.default.createElement(
-        _ReactCSSTransitionGroup2.default,
-        {
-          transitionName: '_loading-overlay-transition',
-          transitionAppear: true,
-          transitionEnterTimeout: 500,
-          transitionLeaveTimeout: 500,
-          transitionAppearTimeout: 500 },
-        loadNode
-      );
+var LoadingOverlayWrapper = function (_React$Component) {
+  _inherits(LoadingOverlayWrapper, _React$Component);
+
+  function LoadingOverlayWrapper() {
+    _classCallCheck(this, LoadingOverlayWrapper);
+
+    return _possibleConstructorReturn(this, (LoadingOverlayWrapper.__proto__ || Object.getPrototypeOf(LoadingOverlayWrapper)).apply(this, arguments));
+  }
+
+  _createClass(LoadingOverlayWrapper, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          active = _props.active,
+          animate = _props.animate,
+          spinner = _props.spinner;
+
+
+      var loadNode = active && _react2.default.createElement(LoadingOverlay, _extends({ key: 'the_dimmer' }, this.props));
+      if (animate || spinner) {
+        loadNode = _react2.default.createElement(
+          _ReactCSSTransitionGroup2.default,
+          {
+            transitionName: '_loading-overlay-transition',
+            transitionAppear: true,
+            transitionEnterTimeout: 500,
+            transitionLeaveTimeout: 500,
+            transitionAppearTimeout: 500,
+            component: FirstChild
+          },
+          loadNode
+        );
+      }
+      return loadNode;
     }
-    return _react2.default.createElement(
-      'div',
-      {
-        style: {
-          position: 'relative'
-        },
-        className: this.props.className },
-      this.props.children,
-      wrapNode
-    );
+  }]);
+
+  return LoadingOverlayWrapper;
+}(_react2.default.Component);
+
+LoadingOverlayWrapper.propTypes = {
+  active: _react2.default.PropTypes.bool,
+  text: _react2.default.PropTypes.string,
+  spinner: _react2.default.PropTypes.bool,
+  spinnerSize: _react2.default.PropTypes.string,
+  className: _react2.default.PropTypes.string,
+  background: _react2.default.PropTypes.string,
+  color: _react2.default.PropTypes.string,
+  zIndex: _react2.default.PropTypes.number,
+  animate: _react2.default.PropTypes.bool
+};
+
+LoadingOverlayWrapper.defaultProps = {
+  active: false,
+  className: '_loading-overlay',
+  background: 'rgba(0, 0, 0, 0.7)',
+  spinnerSize: '50px',
+  color: '#FFF',
+  zIndex: 800,
+  animate: false
+};
+
+var LoadingOverlay = function (_React$Component2) {
+  _inherits(LoadingOverlay, _React$Component2);
+
+  function LoadingOverlay() {
+    _classCallCheck(this, LoadingOverlay);
+
+    return _possibleConstructorReturn(this, (LoadingOverlay.__proto__ || Object.getPrototypeOf(LoadingOverlay)).apply(this, arguments));
   }
-});
 
-var LoadingOverlay = _react2.default.createClass({
-  displayName: 'LoadingOverlay',
+  _createClass(LoadingOverlay, [{
+    key: 'render',
+    value: function render() {
+      var Overlay = _styledComponents2.default.div(_templateObject, this.props.background, this.props.color, this.props.speed, this.props.zIndex);
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      text: null,
-      spinner: false
-    };
-  },
+      var Spinner = _styledComponents2.default.div(_templateObject2, this.props.spinnerSize);
 
-  render: function render() {
-    var Overlay = _styledComponents2.default.div(_templateObject, this.props.background, this.props.color, this.props.speed, this.props.zIndex);
+      var Content = _styledComponents2.default.div(_templateObject3);
 
-    var Spinner = _styledComponents2.default.div(_templateObject2, this.props.spinnerSize);
+      var rotate360 = (0, _styledComponents.keyframes)(_templateObject4);
 
-    var Content = _styledComponents2.default.div(_templateObject3);
+      var spinnerDash = (0, _styledComponents.keyframes)(_templateObject5);
 
-    var rotate360 = (0, _styledComponents.keyframes)(_templateObject4);
+      var Svg = _styledComponents2.default.svg(_templateObject6, rotate360);
 
-    var spinnerDash = (0, _styledComponents.keyframes)(_templateObject5);
+      var Circle = _styledComponents2.default.circle(_templateObject7, spinnerDash, this.props.color);
 
-    var Svg = _styledComponents2.default.svg(_templateObject6, rotate360);
+      var spinnerNode = null;
+      if (this.props.spinner) {
+        spinnerNode = _react2.default.createElement(
+          Spinner,
+          null,
+          _react2.default.createElement(
+            Svg,
+            { viewBox: '25 25 50 50' },
+            _react2.default.createElement(Circle, { cx: '50', cy: '50', r: '20', fill: 'none', strokeWidth: '2', strokeMiterlimit: '10' })
+          )
+        );
+      }
 
-    var Circle = _styledComponents2.default.circle(_templateObject7, spinnerDash, this.props.color);
-
-    var spinnerNode = null;
-    if (this.props.spinner) {
-      spinnerNode = _react2.default.createElement(
-        Spinner,
+      var textNode = null;
+      if (this.props.text) textNode = _react2.default.createElement(
+        'div',
         null,
-        _react2.default.createElement(
-          Svg,
-          { viewBox: '25 25 50 50' },
-          _react2.default.createElement(Circle, { cx: '50', cy: '50', r: '20', fill: 'none', strokeWidth: '2', strokeMiterlimit: '10' })
-        )
+        this.props.text
       );
-    }
 
-    var textNode = null;
-    if (this.props.text) textNode = _react2.default.createElement(
-      'div',
-      null,
-      this.props.text
-    );
+      var contentNode = null;
+      if (this.props.text || this.props.spinner) {
+        contentNode = _react2.default.createElement(
+          Content,
+          null,
+          spinnerNode,
+          textNode
+        );
+      }
 
-    var contentNode = null;
-    if (this.props.text || this.props.spinner) {
-      contentNode = _react2.default.createElement(
-        Content,
-        null,
-        spinnerNode,
-        textNode
+      return _react2.default.createElement(
+        Overlay,
+        { key: 'dimmer' },
+        contentNode
       );
     }
+  }]);
 
-    return _react2.default.createElement(
-      Overlay,
-      { key: 'dimmer' },
-      contentNode
-    );
-  }
-});
+  return LoadingOverlay;
+}(_react2.default.Component);
 
+LoadingOverlay.defaultProps = {
+  text: null,
+  spinner: false
+};
+
 exports.default = LoadingOverlayWrapper;

lib/LoadingOverlay.js

@@ -7,12 +7,5 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /**
-                                                                                                                                                                                                                                                                   * LoadingOverlay
-                                                                                                                                                                                                                                                                   *
-                                                                                                                                                                                                                                                                   * Wrap your component in this and set active={true/false}.
-                                                                                                                                                                                                                                                                   * react transition group will handle the fade of the overlay portion.
-                                                                                                                                                                                                                                                                   * apply any classnames you need as normal with className prop.
-                                                                                                                                                                                                                                                                  
-                                                                                                                                                                                                                                                                    <LoadingOverlay active={true} text='Saving...'>my children</LoadingOverlay>
-                                                                                                                                                                                                                                                                   */
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -43,121 +36,151 @@ 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 LoadingOverlayWrapper = _react2.default.createClass({
-  displayName: 'LoadingOverlayWrapper',
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-  propTypes: {
-    active: _react2.default.PropTypes.bool,
-    text: _react2.default.PropTypes.string,
-    spinner: _react2.default.PropTypes.bool,
-    spinnerSize: _react2.default.PropTypes.string,
-    className: _react2.default.PropTypes.string,
-    background: _react2.default.PropTypes.string,
-    color: _react2.default.PropTypes.string,
-    zIndex: _react2.default.PropTypes.number,
-    animate: _react2.default.PropTypes.bool
-  },
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * LoadingOverlay
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                *
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * Set as child component in a container. Toggle state with `active` prop.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * React transition group will handle the fade of the overlay.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                */
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      active: false,
-      className: '_loading-overlay',
-      background: 'rgba(0,0,0,.7)',
-      spinnerSize: '50px',
-      color: '#FFF',
-      zIndex: 800,
-      animate: false
-    };
-  },
+var FirstChild = function FirstChild(props) {
+  return _react.Children.toArray(props.children)[0] || null;
+};
 
-  render: function render() {
-    var loadNode = this.props.active ? _react2.default.createElement(LoadingOverlay, _extends({ key: 'the_dimmer' }, this.props)) : null;
-    var wrapNode = loadNode;
-    if (this.props.animate || this.props.spinner) {
-      wrapNode = _react2.default.createElement(
-        _ReactCSSTransitionGroup2.default,
-        {
-          transitionName: '_loading-overlay-transition',
-          transitionAppear: true,
-          transitionEnterTimeout: 500,
-          transitionLeaveTimeout: 500,
-          transitionAppearTimeout: 500 },
-        loadNode
-      );
+var LoadingOverlayWrapper = function (_React$Component) {
+  _inherits(LoadingOverlayWrapper, _React$Component);
+
+  function LoadingOverlayWrapper() {
+    _classCallCheck(this, LoadingOverlayWrapper);
+
+    return _possibleConstructorReturn(this, (LoadingOverlayWrapper.__proto__ || Object.getPrototypeOf(LoadingOverlayWrapper)).apply(this, arguments));
+  }
+
+  _createClass(LoadingOverlayWrapper, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          active = _props.active,
+          animate = _props.animate,
+          spinner = _props.spinner;
+
+
+      var loadNode = active && _react2.default.createElement(LoadingOverlay, _extends({ key: 'the_dimmer' }, this.props));
+      if (animate || spinner) {
+        loadNode = _react2.default.createElement(
+          _ReactCSSTransitionGroup2.default,
+          {
+            transitionName: '_loading-overlay-transition',
+            transitionAppear: true,
+            transitionEnterTimeout: 500,
+            transitionLeaveTimeout: 500,
+            transitionAppearTimeout: 500,
+            component: FirstChild
+          },
+          loadNode
+        );
+      }
+      return loadNode;
     }
-    return _react2.default.createElement(
-      'div',
-      {
-        style: {
-          position: 'relative'
-        },
-        className: this.props.className },
-      this.props.children,
-      wrapNode
-    );
+  }]);
+
+  return LoadingOverlayWrapper;
+}(_react2.default.Component);
+
+LoadingOverlayWrapper.propTypes = {
+  active: _react2.default.PropTypes.bool,
+  text: _react2.default.PropTypes.string,
+  spinner: _react2.default.PropTypes.bool,
+  spinnerSize: _react2.default.PropTypes.string,
+  className: _react2.default.PropTypes.string,
+  background: _react2.default.PropTypes.string,
+  color: _react2.default.PropTypes.string,
+  zIndex: _react2.default.PropTypes.number,
+  animate: _react2.default.PropTypes.bool
+};
+
+LoadingOverlayWrapper.defaultProps = {
+  active: false,
+  className: '_loading-overlay',
+  background: 'rgba(0, 0, 0, 0.7)',
+  spinnerSize: '50px',
+  color: '#FFF',
+  zIndex: 800,
+  animate: false
+};
+
+var LoadingOverlay = function (_React$Component2) {
+  _inherits(LoadingOverlay, _React$Component2);
+
+  function LoadingOverlay() {
+    _classCallCheck(this, LoadingOverlay);
+
+    return _possibleConstructorReturn(this, (LoadingOverlay.__proto__ || Object.getPrototypeOf(LoadingOverlay)).apply(this, arguments));
   }
-});
 
-var LoadingOverlay = _react2.default.createClass({
-  displayName: 'LoadingOverlay',
+  _createClass(LoadingOverlay, [{
+    key: 'render',
+    value: function render() {
+      var Overlay = _styledComponents2.default.div(_templateObject, this.props.background, this.props.color, this.props.speed, this.props.zIndex);
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      text: null,
-      spinner: false
-    };
-  },
+      var Spinner = _styledComponents2.default.div(_templateObject2, this.props.spinnerSize);
 
-  render: function render() {
-    var Overlay = _styledComponents2.default.div(_templateObject, this.props.background, this.props.color, this.props.speed, this.props.zIndex);
+      var Content = _styledComponents2.default.div(_templateObject3);
 
-    var Spinner = _styledComponents2.default.div(_templateObject2, this.props.spinnerSize);
+      var rotate360 = (0, _styledComponents.keyframes)(_templateObject4);
 
-    var Content = _styledComponents2.default.div(_templateObject3);
+      var spinnerDash = (0, _styledComponents.keyframes)(_templateObject5);
 
-    var rotate360 = (0, _styledComponents.keyframes)(_templateObject4);
+      var Svg = _styledComponents2.default.svg(_templateObject6, rotate360);
 
-    var spinnerDash = (0, _styledComponents.keyframes)(_templateObject5);
+      var Circle = _styledComponents2.default.circle(_templateObject7, spinnerDash, this.props.color);
 
-    var Svg = _styledComponents2.default.svg(_templateObject6, rotate360);
+      var spinnerNode = null;
+      if (this.props.spinner) {
+        spinnerNode = _react2.default.createElement(
+          Spinner,
+          null,
+          _react2.default.createElement(
+            Svg,
+            { viewBox: '25 25 50 50' },
+            _react2.default.createElement(Circle, { cx: '50', cy: '50', r: '20', fill: 'none', strokeWidth: '2', strokeMiterlimit: '10' })
+          )
+        );
+      }
 
-    var Circle = _styledComponents2.default.circle(_templateObject7, spinnerDash, this.props.color);
-
-    var spinnerNode = null;
-    if (this.props.spinner) {
-      spinnerNode = _react2.default.createElement(
-        Spinner,
+      var textNode = null;
+      if (this.props.text) textNode = _react2.default.createElement(
+        'div',
         null,
-        _react2.default.createElement(
-          Svg,
-          { viewBox: '25 25 50 50' },
-          _react2.default.createElement(Circle, { cx: '50', cy: '50', r: '20', fill: 'none', strokeWidth: '2', strokeMiterlimit: '10' })
-        )
+        this.props.text
       );
-    }
 
-    var textNode = null;
-    if (this.props.text) textNode = _react2.default.createElement(
-      'div',
-      null,
-      this.props.text
-    );
+      var contentNode = null;
+      if (this.props.text || this.props.spinner) {
+        contentNode = _react2.default.createElement(
+          Content,
+          null,
+          spinnerNode,
+          textNode
+        );
+      }
 
-    var contentNode = null;
-    if (this.props.text || this.props.spinner) {
-      contentNode = _react2.default.createElement(
-        Content,
-        null,
-        spinnerNode,
-        textNode
+      return _react2.default.createElement(
+        Overlay,
+        { key: 'dimmer' },
+        contentNode
       );
     }
+  }]);
 
-    return _react2.default.createElement(
-      Overlay,
-      { key: 'dimmer' },
-      contentNode
-    );
-  }
-});
+  return LoadingOverlay;
+}(_react2.default.Component);
 
+LoadingOverlay.defaultProps = {
+  text: null,
+  spinner: false
+};
+
 exports.default = LoadingOverlayWrapper;

package.json

 {
   "name": "react-loading-overlay",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Loading overlays with fade, spinner, message support.",
@@ -38,11 +38,6 @@ "keywords": [
   "devDependencies": {
-    "@kadira/storybook": "^2.6.0",
+    "@kadira/storybook": "2.6.0",
     "babel": "^6.5.2",
     "babel-cli": "^6.14.0",
-    "babel-core": "^6.14.0",
     "babel-loader": "^6.2.5",
-    "babel-plugin-transform-class-properties": "^6.11.5",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-export-extensions": "^6.8.0",
-    "babel-plugin-transform-function-bind": "^6.8.0",
     "babel-plugin-transform-object-rest-spread": "^6.8.0",
@@ -49,0 +44,0 @@ "babel-preset-es2015": "^6.14.0",

README.md

@@ -14,10 +14,10 @@ # Loading Overlay
 ```javascript
-<LoadingOverlay
-  active={isActive}
-  spinner
-  text='Loading your content...'
-  >
-  Some components
-</LoadingOverlay>
-
+<div>
+  <LoadingOverlay
+    active={isActive}
+    spinner
+    text='Loading your content...'
+    >
+  <p>Some content or children or something.</p>
+</div>
 ```
@@ -24,0 +24,0 @@

No alert changes

Improved metrics

Total package byte prevSize

626375

increased by1.51%

Dev dependency count

11

decreased by-31.25%

Lines of code

15927

increased by0.25%

No dependency changes