react-loader-display - npm Package Compare versions

Comparing version 2.5.0 to 3.0.0

index.js

@@ -1,2 +0,5 @@
-var React=require('react');
-module.exports = React.createFactory(require('./react-loader-display'));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_loader_display_1 = require("./react-loader-display");
+exports.loader = react_loader_display_1.default;
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-loader-display",
-  "version": "2.5.0",
+  "version": "3.0.0",
   "description": "A simple customizable ReactJS component that allows a developer to display a loading modal.",
@@ -20,7 +20,9 @@ "main": "index.js",
   "dependencies": {
-    "create-react-class": "^15.5.3",
     "jquery": "^3.2.1",
     "prop-types": "^15.5.10",
     "react": "^15.5.4",
-    "react-hyperscript": "^3.0.0"
+    "react-dom": "^15.5.4",
+    "react-redux": "^5.0.5",
+    "redux": "^3.6.0",
+    "redux-thunk": "^2.2.0"
   },
@@ -39,3 +41,7 @@ "keywords": [
     "Reactjs loading popup"
-  ]
+  ],
+  "devDependencies": {
+    "@types/node": "^7.0.28",
+    "@types/react": "^15.0.27"
+  }
 }

react-loader-display.js

@@ -1,107 +0,100 @@
-var createReactClass = require('create-react-class');
-var h = require('react-hyperscript');
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require('react');
 var PropTypes = require('prop-types');
 var $ = require('jquery');
 var Styles = require('./Styling/Styles');
-
-var reactLoaderDisplay = createReactClass({
-    displayName: 'ReactLoaderDisplay',
-    getDefaultProps: function () {
-        return {
-            IsLoading: false,
-            LoaderMessage: 'Please wait...',
-            ZIndex: 1000,
-            BackDropRGBA: 'rgba(0,0,0,0.1)',
-            ForeGroundColor: 'white',
-            TextColor: 'black',
-            DisplayType: 'Show'
+var reactLoaderDisplay = (function (_super) {
+    __extends(reactLoaderDisplay, _super);
+    function reactLoaderDisplay() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.componentDidMount = function () {
+            var LoaderRef = $('.ReactLoaderBackDrop #LoaderModalReactLoadingDisplay85934045'); //as unique as possible to ensure the id doesn't clash with the user's code
+            if (LoaderRef.length > 1) {
+                console.error('react-loader-display: It seems there is a conflict. Your page already contains the same ID as the modal, which is LoaderModalReactLoadingDisplay85934045. It should not cause problems but please change this ID in your code just to be sure.');
+            }
         };
-    },
-    componentDidMount: function () {
-        var LoaderRef = $('.ReactLoaderBackDrop #LoaderModalReactLoadingDisplay85934045'); //as unique as possible to ensure the id doesn't clash with the user's code
-
-        if (LoaderRef.length > 1) {
-            console.error('react-loader-display: It seems there is a conflict. Your page already contains the same ID as the modal, which is LoaderModalReactLoadingDisplay85934045. It should not cause problems but please change this ID in your code just to be sure.');
-        }
-    },
-    componentWillReceiveProps: function (nextProps) {
-        var DisplayType = nextProps.DisplayType;
-        var IsLoading = nextProps.IsLoading;
-
-        var LoaderRef = $('.ReactLoaderBackDrop #LoaderModalReactLoadingDisplay85934045'); //as unique as possible to ensure the id doesn't clash with the user's code
-
-        if (IsLoading) {
-            if (DisplayType === "Show") {
-                LoaderRef.animate({
-                    'margin-top': '150px'
-                }, 1, 'swing', function () {
-                    LoaderRef.show(1);
-                })
+        _this.componentWillReceiveProps = function (nextProps) {
+            var DisplayType = nextProps.DisplayType;
+            var IsLoading = nextProps.IsLoading;
+            var LoaderRef = $('.ReactLoaderBackDrop #LoaderModalReactLoadingDisplay85934045'); //as unique as possible to ensure the id doesn't clash with the user's code
+            if (IsLoading) {
+                if (DisplayType === "Show") {
+                    LoaderRef.animate({
+                        'margin-top': '150px'
+                    }, 1, 'swing', function () {
+                        LoaderRef.show(1);
+                    });
+                }
+                if (DisplayType === "FadeIn") {
+                    LoaderRef.animate({
+                        'margin-top': '150px'
+                    }, 1, 'swing', function () {
+                        LoaderRef.fadeIn(500);
+                    });
+                }
+                if (DisplayType === "SlideDown") {
+                    LoaderRef.animate({
+                        'margin-top': '0px'
+                    }, 1, 'swing', function () {
+                        LoaderRef.show(1, function () {
+                            LoaderRef.animate({
+                                'margin-top': '150px'
+                            }, 300);
+                        });
+                    });
+                }
             }
-
-
-            if (DisplayType === "FadeIn") {
-                LoaderRef.animate({
-                    'margin-top': '150px'
-                }, 1, 'swing', function () {
-                    LoaderRef.fadeIn(500);
-                })
-            }
-
-            if (DisplayType === "SlideDown") {
-
-                LoaderRef.animate({
-                    'margin-top': '0px'
-                }, 1, 'swing', function () {
-                    LoaderRef.show(1, function () {
-                        LoaderRef.animate({
-                            'margin-top': '150px'
-                        }, 300)
-                    });
+            if (!IsLoading) {
+                LoaderRef.hide(1, function () {
+                    LoaderRef.animate({
+                        'margin-top': '0px'
+                    }, 1);
                 });
             }
-        }
-
-        if (!IsLoading) {
-            LoaderRef.hide(1, function () {
-                LoaderRef.animate({
-                    'margin-top': '0px'
-                }, 1)
-            })
-        }
-    },
-    propTypes: {
-        IsLoading: PropTypes.bool.isRequired,
-        LoadingImage: PropTypes.string.isRequired,
-        ZIndex: PropTypes.number,
-        LoaderMessage: PropTypes.string,
-        BackDropRGBA: PropTypes.string,
-        ForeGroundColor: PropTypes.string,
-        TextColor: PropTypes.string,
-        DisplayType: PropTypes.string
-    },
-    render: function () {
-
-        var Style = $.extend({}, Styles);
-        Style.BackdropVisible.backgroundColor = this.props.BackDropRGBA;
-        Style.BackdropVisible.zIndex = this.props.ZIndex;
-        Style.Modal.backgroundColor = this.props.ForeGroundColor;
-        Style.LoadingText.color = this.props.TextColor;
-
-        var ComponentObj = (
-            h('div', {
-                style: this.props.IsLoading ? Style.BackdropVisible : Style.LoaderHidden,
-                className: 'ReactLoaderBackDrop'
-            }, [
-                h('div', {style: Style.Modal, id: 'LoaderModalReactLoadingDisplay85934045'}, [
-                    h('img', {src: this.props.LoadingImage, style: Style.LoadingImage}),
-                    h('div', {style: Style.LoadingText}, this.props.LoaderMessage)
-                ])
-            ])
-        );
-
-        return ComponentObj;
+        };
+        _this.render = function () {
+            var Style = $.extend({}, Styles);
+            Style.BackdropVisible.backgroundColor = _this.props.BackDropRGBA;
+            Style.BackdropVisible.zIndex = _this.props.ZIndex;
+            Style.Modal.backgroundColor = _this.props.ForeGroundColor;
+            Style.LoadingText.color = _this.props.TextColor;
+            return (React.createElement("div", { style: _this.props.IsLoading ? Style.BackdropVisible : Style.LoaderHidden, className: "ReactLoaderBackDrop" },
+                React.createElement("div", { style: Style.Modal, id: "LoaderModalReactLoadingDisplay85934045" },
+                    React.createElement("img", { src: _this.props.LoadingImage, style: Style.LoadingImage }),
+                    React.createElement("div", { style: Style.LoadingText }, _this.props.LoaderMessage))));
+        };
+        return _this;
     }
-});
-
-module.exports = reactLoaderDisplay;
+    return reactLoaderDisplay;
+}(React.Component));
+reactLoaderDisplay.defaultProps = {
+    IsLoading: false,
+    LoaderMessage: 'Please wait...',
+    ZIndex: 1000,
+    BackDropRGBA: 'rgba(0,0,0,0.1)',
+    ForeGroundColor: 'white',
+    TextColor: 'black',
+    DisplayType: 'Show'
+};
+reactLoaderDisplay.propTypes = {
+    IsLoading: PropTypes.bool.isRequired,
+    LoadingImage: PropTypes.string.isRequired,
+    ZIndex: PropTypes.number,
+    LoaderMessage: PropTypes.string,
+    BackDropRGBA: PropTypes.string,
+    ForeGroundColor: PropTypes.string,
+    TextColor: PropTypes.string
+};
+exports.default = reactLoaderDisplay;
+//# sourceMappingURL=react-loader-display.js.map

Styling/Styles.js

@@ -1,47 +0,47 @@
-var StylesObj={
-    BackdropVisible:{
-        display:'block',
-        position:'fixed',
-        top:0,
-        left:0,
-        right:0,
-        bottom:0,
-        width:'100%',
-        height:'100vh',
-        textAlign:'center'
+var StylesObj = {
+    BackdropVisible: {
+        display: 'block',
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: '100%',
+        height: '100vh',
+        textAlign: 'center'
     },
-    LoaderHidden:{
-        display:'none'
+    LoaderHidden: {
+        display: 'none'
     },
-    Modal:{
-        display:'block',
-        marginLeft:'auto',
-        marginRight:'auto',
-        width:300,
-        borderRadius:'5px',
-        paddingTop:30,
-        paddingBottom:30,
-        textAlign:'center',
-        wordBreak:'break-all',
-        marginTop:150
+    Modal: {
+        display: 'block',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        width: 300,
+        borderRadius: '5px',
+        paddingTop: 30,
+        paddingBottom: 30,
+        textAlign: 'center',
+        wordBreak: 'break-all',
+        marginTop: 150
     },
-    LoadingImage:{
-        display:'block',
-        width:50,
-        marginLeft:'auto',
-        marginRight:'auto',
-        verticalAlign:'middle',
-        marginBottom:30
+    LoadingImage: {
+        display: 'block',
+        width: 50,
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        verticalAlign: 'middle',
+        marginBottom: 30
     },
-    LoadingText:{
-        display:'block',
-        width:'90%',
-        marginLeft:'auto',
-        marginRight:'auto',
-        verticalAlign:'middle',
-        marginTop:30,
-        textAlign:'center'
+    LoadingText: {
+        display: 'block',
+        width: '90%',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        verticalAlign: 'middle',
+        marginTop: 30,
+        textAlign: 'center'
     }
 };
-
-module.exports=StylesObj;
+module.exports = StylesObj;
+//# sourceMappingURL=Styles.js.map

New alerts

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

21709

187.12%

Number of package files

25

316.67%

Lines of code

375

167.86%

Worsened metrics

Dependency count

7

40%

Dev dependency count

2

Infinity%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  react-dom@^15.5.4

• + Added

  react-redux@^5.0.5

• + Added

  redux@^3.6.0

• + Added

  redux-thunk@^2.2.0

• + Added

  @babel/runtime@7.27.0
  (transitive)

• + Added

  hoist-non-react-statics@3.3.2
  (transitive)

• + Added

  invariant@2.2.4
  (transitive)

• + Added

  lodash@4.17.21
  (transitive)

• + Added

  lodash-es@4.17.21
  (transitive)

• + Added

  react-dom@15.7.0
  (transitive)

• + Added

  react-lifecycles-compat@3.0.4
  (transitive)

• + Added

  react-redux@5.1.2
  (transitive)

• + Added

  redux@3.7.24.2.1
  (transitive)

• + Added

  redux-thunk@2.4.2
  (transitive)

• + Added

  regenerator-runtime@0.14.1
  (transitive)

• + Added

  symbol-observable@1.2.0
  (transitive)

• - Removed

  create-react-class@^15.5.3

• - Removed

  react-hyperscript@^3.0.0

• - Removed

  react-hyperscript@3.2.0
  (transitive)