react-loader-spinner - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

dist/index.js

 (function (global, factory) {
-    if (typeof define === "function" && define.amd) {
-        define(['exports', 'react', 'prop-types', './loading/audio', './loading/ball-triangle', './loading/bars', './loading/circles', './loading/grid', './loading/hearts', './loading/oval', './loading/puff', './loading/rings', './loading/tail-spin', './loading/three-dots'], factory);
-    } else if (typeof exports !== "undefined") {
-        factory(exports, require('react'), require('prop-types'), require('./loading/audio'), require('./loading/ball-triangle'), require('./loading/bars'), require('./loading/circles'), require('./loading/grid'), require('./loading/hearts'), require('./loading/oval'), require('./loading/puff'), require('./loading/rings'), require('./loading/tail-spin'), require('./loading/three-dots'));
-    } else {
-        var mod = {
-            exports: {}
-        };
-        factory(mod.exports, global.react, global.propTypes, global.audio, global.ballTriangle, global.bars, global.circles, global.grid, global.hearts, global.oval, global.puff, global.rings, global.tailSpin, global.threeDots);
-        global.index = mod.exports;
-    }
-})(this, function (exports, _react, _propTypes, _audio, _ballTriangle, _bars, _circles, _grid, _hearts, _oval, _puff, _rings, _tailSpin, _threeDots) {
-    'use strict';
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "prop-types", "./loader/Audio", "./loader/BallTriangle", "./loader/Bars", "./loader/Circles", "./loader/Grid", "./loader/Hearts", "./loader/Oval", "./loader/Puff", "./loader/Rings", "./loader/TailSpin", "./loader/ThreeDots", "./loader/Watch", "./loader/RevolvingDot", "./loader/CradleLoader", "./loader/Triangle", "./loader/Plane", "./loader/MutatingDot"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("prop-types"), require("./loader/Audio"), require("./loader/BallTriangle"), require("./loader/Bars"), require("./loader/Circles"), require("./loader/Grid"), require("./loader/Hearts"), require("./loader/Oval"), require("./loader/Puff"), require("./loader/Rings"), require("./loader/TailSpin"), require("./loader/ThreeDots"), require("./loader/Watch"), require("./loader/RevolvingDot"), require("./loader/CradleLoader"), require("./loader/Triangle"), require("./loader/Plane"), require("./loader/MutatingDot"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.propTypes, global.Audio, global.BallTriangle, global.Bars, global.Circles, global.Grid, global.Hearts, global.Oval, global.Puff, global.Rings, global.TailSpin, global.ThreeDots, global.Watch, global.RevolvingDot, global.CradleLoader, global.Triangle, global.Plane, global.MutatingDot);
+    global.index = mod.exports;
+  }
+})(this, function (exports, _react, _propTypes, _Audio, _BallTriangle, _Bars, _Circles, _Grid, _Hearts, _Oval, _Puff, _Rings, _TailSpin, _ThreeDots, _Watch, _RevolvingDot, _CradleLoader, _Triangle, _Plane, _MutatingDot) {
+  "use strict";
 
-    Object.defineProperty(exports, "__esModule", {
-        value: true
-    });
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
 
-    var _react2 = _interopRequireDefault(_react);
+  var _react2 = _interopRequireDefault(_react);
 
-    var _propTypes2 = _interopRequireDefault(_propTypes);
+  var _propTypes2 = _interopRequireDefault(_propTypes);
 
-    function _interopRequireDefault(obj) {
-        return obj && obj.__esModule ? obj : {
-            default: obj
-        };
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
     }
+  }
 
-    function _classCallCheck(instance, Constructor) {
-        if (!(instance instanceof Constructor)) {
-            throw new TypeError("Cannot call a class as a function");
-        }
+  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);
+      }
     }
 
-    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;
+    };
+  }();
 
-        return function (Constructor, protoProps, staticProps) {
-            if (protoProps) defineProperties(Constructor.prototype, protoProps);
-            if (staticProps) defineProperties(Constructor, staticProps);
-            return Constructor;
-        };
-    }();
-
-    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;
+  function _possibleConstructorReturn(self, call) {
+    if (!self) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
     }
 
-    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);
-        }
+    return call && (typeof call === "object" || typeof call === "function") ? call : self;
+  }
 
-        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;
+  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);
     }
 
-    var Loader = function (_React$Component) {
-        _inherits(Loader, _React$Component);
+    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;
+  }
 
-        function Loader() {
-            var _ref;
+  var Loader = function (_React$Component) {
+    _inherits(Loader, _React$Component);
 
-            var _temp, _this, _ret;
+    function Loader() {
+      var _ref;
 
-            _classCallCheck(this, Loader);
+      var _temp, _this, _ret;
 
-            for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-                args[_key] = arguments[_key];
-            }
+      _classCallCheck(this, Loader);
 
-            return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Loader.__proto__ || Object.getPrototypeOf(Loader)).call.apply(_ref, [this].concat(args))), _this), _this.svg = function (type, visible) {
-                if (type === 'Audio') {
-                    return (0, _audio.audio)(_this.props);
-                } else if (type === 'Ball-Triangle') {
-                    return (0, _ballTriangle.ballTrangle)(_this.props);
-                } else if (type === 'Bars') {
-                    return (0, _bars.bars)(_this.props);
-                } else if (type === 'Circles') {
-                    return (0, _circles.circles)(_this.props);
-                } else if (type === 'Grid') {
-                    return (0, _grid.grid)(_this.props);
-                } else if (type === 'Hearts') {
-                    return (0, _hearts.hearts)(_this.props);
-                } else if (type === 'Oval') {
-                    return (0, _oval.oval)(_this.props);
-                } else if (type === 'Puff') {
-                    return (0, _puff.puff)(_this.props);
-                } else if (type === 'Rings') {
-                    return (0, _rings.rings)(_this.props);
-                } else if (type === 'TailSpin') {
-                    return (0, _tailSpin.tailSpin)(_this.props);
-                } else if (type === 'ThreeDots') {
-                    return (0, _threeDots.threeDots)(_this.props);
-                }
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
-                return _react2.default.createElement(
-                    'div',
-                    null,
-                    _react2.default.createElement(
-                        'p',
-                        null,
-                        'Loading...Please Wait'
-                    ),
-                    _react2.default.createElement(
-                        'small',
-                        null,
-                        _react2.default.createElement(
-                            'i',
-                            null,
-                            'Note:No specfic svg type exist'
-                        )
-                    )
-                );
-            }, _temp), _possibleConstructorReturn(_this, _ret);
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Loader.__proto__ || Object.getPrototypeOf(Loader)).call.apply(_ref, [this].concat(args))), _this), _this.svgRenderer = function (type) {
+        switch (type) {
+          case "Audio":
+            return _react2.default.createElement(_Audio.Audio, _this.props);
+          case "Ball-Triangle":
+            return _react2.default.createElement(_BallTriangle.BallTriangle, _this.props);
+          case "Bars":
+            return _react2.default.createElement(_Bars.Bars, _this.props);
+          case "Circles":
+            return _react2.default.createElement(_Circles.Circles, _this.props);
+          case "Grid":
+            return _react2.default.createElement(_Grid.Grid, _this.props);
+          case "Hearts":
+            return _react2.default.createElement(_Hearts.Hearts, _this.props);
+          case "Oval":
+            return _react2.default.createElement(_Oval.Oval, _this.props);
+          case "Puff":
+            return _react2.default.createElement(_Puff.Puff, _this.props);
+          case "Rings":
+            return _react2.default.createElement(_Rings.Rings, _this.props);
+          case "TailSpin":
+            return _react2.default.createElement(_TailSpin.TailSpin, _this.props);
+          case "ThreeDots":
+            return _react2.default.createElement(_ThreeDots.ThreeDots, _this.props);
+          case "Watch":
+            return _react2.default.createElement(_Watch.Watch, _this.props);
+          case "RevolvingDot":
+            return _react2.default.createElement(_RevolvingDot.RevolvingDot, _this.props);
+          case "CradleLoader":
+            return _react2.default.createElement(_CradleLoader.CradleLoader, _this.props);
+          case "Triangle":
+            return _react2.default.createElement(_Triangle.Triangle, _this.props);
+          case "Plane":
+            return _react2.default.createElement(_Plane.Plane, _this.props);
+          case "MutatingDot":
+            return _react2.default.createElement(_MutatingDot.MutatingDot, _this.props);
+          default:
+            return _react2.default.createElement(
+              "div",
+              null,
+              _react2.default.createElement(
+                "span",
+                { style: { color: "Green" } },
+                "LOADING"
+              ),
+              _react2.default.createElement(
+                "small",
+                null,
+                _react2.default.createElement(
+                  "i",
+                  null,
+                  _react2.default.createElement("br", null),
+                  "Note:No specific svg type exist"
+                )
+              )
+            );
         }
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
 
-        _createClass(Loader, [{
-            key: 'render',
-            value: function render() {
-                var _props = this.props,
-                    color = _props.color,
-                    type = _props.type,
-                    height = _props.height,
-                    width = _props.width;
+    _createClass(Loader, [{
+      key: "render",
+      value: function render() {
+        var type = this.props.type;
 
-                var style = {
-                    fill: color,
-                    height: height,
-                    width: width
-                };
-                return _react2.default.createElement(
-                    'div',
-                    null,
-                    this.svg(type)
-                );
-            }
-        }]);
+        return _react2.default.createElement(
+          "div",
+          { className: this.props.style },
+          this.svgRenderer(type)
+        );
+      }
+    }]);
 
-        return Loader;
-    }(_react2.default.Component);
+    return Loader;
+  }(_react2.default.Component);
 
-    Loader.propTypes = {
-        color: _propTypes2.default.string,
-        type: _propTypes2.default.string,
-        height: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
-        width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
-    };
-    Loader.defaultProps = {
-        color: 'blue',
-        type: 'audio',
-        height: 80,
-        width: 80,
-        visible: true
-    };
-    exports.default = Loader;
+  Loader.propTypes = {
+    color: _propTypes2.default.string,
+    type: _propTypes2.default.string,
+    height: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
+    width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
+    style: _propTypes2.default.shape({})
+  };
+  Loader.defaultProps = {
+    color: "#71238",
+    type: "Audio",
+    height: 80,
+    width: 80
+  };
+  exports.default = Loader;
 });

package.json

 {
   "name": "react-loader-spinner",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": " react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.",
@@ -25,3 +25,4 @@ "repository": {
   "scripts": {
-    "prepublish": "babel --plugins transform-es2015-modules-umd src --ignore __tests__ --out-dir ./dist",
+    "prepublish": "babel --plugins transform-es2015-modules-umd src --ignore __tests__ --out-dir ./dist --copy-files",
+    "build": "babel --plugins transform-es2015-modules-umd src --ignore __tests__ --out-dir ./dist --copy-files",
     "lint": "eslint ./src",
@@ -33,8 +34,13 @@ "lintfix": "eslint ./src --fix",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "deploy-storybook": "storybook-to-ghpages",
+    "storybook-build": "build-storybook -c .storybook -o ./docs"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^3.3.15",
+    "@storybook/addon-centered": "^3.4.10",
     "@storybook/addon-links": "^3.3.15",
+    "@storybook/addon-options": "^3.4.10",
     "@storybook/react": "^3.3.15",
+    "@storybook/storybook-deployer": "^2.3.0",
     "babel-cli": "^6.6.4",
@@ -45,3 +51,3 @@ "babel-core": "^6.7.4",
     "babel-polyfill": "^6.7.4",
-    "babel-preset-env": "^6.6.0",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.5.0",
@@ -51,11 +57,19 @@ "babel-preset-stage-2": "^6.5.0",
     "enzyme": "^3.3.0",
-    "eslint": "^4.19.1",
+    "eslint": "*",
+    "eslint-config-airbnb": "^17.0.0",
+    "eslint-config-equimper": "*",
+    "eslint-config-prettier": "*",
     "eslint-plugin-babel": "^4.1.2",
-    "eslint-plugin-react": "^7.7.0",
+    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-prettier": "*",
+    "eslint-plugin-react": "^7.10.0",
     "jsdom": "^11.6.2",
     "mocha": "^5.0.5",
     "nodemon": "^1.17.2",
+    "prettier": "*",
     "react": "^16.2.0",
     "react-addons-test-utils": "^15.0.0",
     "react-dom": "^16.2.0",
+    "redux-logger": "*",
     "sinon": "^4.4.8"
@@ -69,4 +83,5 @@ },
   "dependencies": {
-    "babel-runtime": "^6.6.1"
+    "babel-runtime": "^6.26.0",
+    "prop-types": "^15.6.2"
   }
 }

README.md

@@ -5,9 +5,5 @@ <p align="center">
 
+
  react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view. 
 
-> Important Note: This release is compatible with React 1.4 and higher. If you're working with an older version of React, this package might not work for you.
-
-
-All the icon and spinner used in the Package are from SamHerbert [svg-loader] project on github. All the loading icon and spinner is built in pure svg. Preview of the all the available loader can be viewed on SamHerbert website [here]
-
 ### Installation
@@ -18,3 +14,3 @@
 ```
-###  Github page
+#  Demo
 [View in page]
@@ -71,3 +67,7 @@
 
+### TODO LIST
+* Update Readme Table With New Component
+* Change Docs on Storybooks
 
+
 License
@@ -74,0 +74,0 @@ ----

src/index.js

@@ -1,73 +0,92 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {audio as Audio} from './loading/audio';
-import {ballTrangle as BallTrangle } from './loading/ball-triangle';
-import {bars as Bars} from './loading/bars';
-import {circles as Circles} from './loading/circles';
-import {grid as Grid } from './loading/grid';
-import {hearts as Hearts} from './loading/hearts';
-import {oval as Oval } from './loading/oval';
-import {puff as Puff} from './loading/puff';
-import {rings as Rings} from './loading/rings';
-import {tailSpin as TailSpin} from './loading/tail-spin';
-import {threeDots as ThreeDots } from './loading/three-dots';
+import React from "react";
+import PropTypes from "prop-types";
+import { Audio } from "./loader/Audio";
+import { BallTriangle } from "./loader/BallTriangle";
+import { Bars } from "./loader/Bars";
+import { Circles } from "./loader/Circles";
+import { Grid } from "./loader/Grid";
+import { Hearts } from "./loader/Hearts";
+import { Oval } from "./loader/Oval";
+import { Puff } from "./loader/Puff";
+import { Rings } from "./loader/Rings";
+import { TailSpin } from "./loader/TailSpin";
+import { ThreeDots } from "./loader/ThreeDots";
+import { Watch } from "./loader/Watch";
+import { RevolvingDot } from "./loader/RevolvingDot";
+import { CradleLoader } from "./loader/CradleLoader";
+import { Triangle } from "./loader/Triangle";
+import { Plane } from "./loader/Plane";
+import { MutatingDot } from "./loader/MutatingDot";
+
 export default class Loader extends React.Component {
   static propTypes = {
-      color: PropTypes.string,
-      type:PropTypes.string,
-      height:PropTypes.oneOfType([
-          PropTypes.number,
-          PropTypes.string,
-      ]),
-      width:PropTypes.oneOfType([
-          PropTypes.number,
-          PropTypes.string,
-      ]),
+    color: PropTypes.string,
+    type: PropTypes.string,
+    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    style: PropTypes.shape({})
   };
+
   static defaultProps = {
-      color:'blue',
-      type:'audio',
-      height:80,
-      width:80,
-      visible:true
+    color: "#71238",
+    type: "Audio",
+    height: 80,
+    width: 80
   };
-  svg =(type, visible)=> {
-      if (type==='Audio') {
-          return (Audio(this.props));
-      } else if (type==='Ball-Triangle') {
-          return (BallTrangle(this.props));
-      } else if (type==='Bars') {
-          return (Bars(this.props));
-      } else if (type==='Circles') {
-          return (Circles(this.props));
-      } else if (type==='Grid') {
-          return (Grid(this.props));
-      } else if (type==='Hearts') {
-          return (Hearts(this.props));
-      } else if (type==='Oval') {
-          return (Oval(this.props));
-      } else if (type==='Puff') {
-          return (Puff(this.props));
-      } else if (type==='Rings') {
-          return (Rings(this.props));
-      } else if (type==='TailSpin') {
-          return (TailSpin(this.props));
-      } else if (type==='ThreeDots') {
-          return (ThreeDots(this.props));
-      }
-    
-      return (<div><p>Loading...Please Wait</p><small><i>Note:No specfic svg type exist</i></small></div>)
-        
-  }
+
+  svgRenderer = type => {
+    switch (type) {
+      case "Audio":
+        return <Audio {...this.props} />;
+      case "Ball-Triangle":
+        return <BallTriangle {...this.props} />;
+      case "Bars":
+        return <Bars {...this.props} />;
+      case "Circles":
+        return <Circles {...this.props} />;
+      case "Grid":
+        return <Grid {...this.props} />;
+      case "Hearts":
+        return <Hearts {...this.props} />;
+      case "Oval":
+        return <Oval {...this.props} />;
+      case "Puff":
+        return <Puff {...this.props} />;
+      case "Rings":
+        return <Rings {...this.props} />;
+      case "TailSpin":
+        return <TailSpin {...this.props} />;
+      case "ThreeDots":
+        return <ThreeDots {...this.props} />;
+      case "Watch":
+        return <Watch {...this.props} />;
+      case "RevolvingDot":
+        return <RevolvingDot {...this.props} />;
+      case "CradleLoader":
+        return <CradleLoader {...this.props} />;
+      case "Triangle":
+        return <Triangle {...this.props} />;
+      case "Plane":
+        return <Plane {...this.props} />;
+      case "MutatingDot":
+        return <MutatingDot {...this.props} />;
+      default:
+        return (
+          <div>
+            <span style={{ color: "Green" }}>LOADING</span>
+            <small>
+              <i>
+                <br />
+                Note:No specific svg type exist
+              </i>
+            </small>
+          </div>
+        );
+    }
+  };
+
   render() {
-      const { color, type, height, width} = this.props;
-      const style = {
-          fill:color,
-          height,
-          width 
-      }
-      return (<div>{this.svg(type)}</div>);
+    const { type } = this.props;
+    return <div className={this.props.style}>{this.svgRenderer(type)}</div>;
   }
 }
-
-

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

697993

increased by626.46%

Number of package files

52

increased by62.5%

Lines of code

19105

increased by1180.5%

Worsened metrics

Dependency count

5

increased by25%

Dev dependency count

34

increased by47.83%

Number of low supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedprop-types@^15.6.2

• Updatedbabel-runtime@^6.26.0