react-loader-display - npm Package Compare versions

Comparing version 2.4.5 to 2.5.0

index.js

@@ -1,3 +0,2 @@
-'use strict';
 var React=require('react');
 module.exports = React.createFactory(require('./react-loader-display'));

package.json

 {
   "name": "react-loader-display",
-  "version": "2.4.5",
+  "version": "2.5.0",
   "description": "A simple customizable ReactJS component that allows a developer to display a loading modal.",
@@ -5,0 +5,0 @@ "main": "index.js",

react-loader-display.js

@@ -1,42 +0,38 @@
-'use strict';
 var createReactClass = require('create-react-class');
 var h = require('react-hyperscript');
-var PropTypes=require('prop-types');
-var $=require('jquery');
-var Styles=require('./Styling/Styles');
+var PropTypes = require('prop-types');
+var $ = require('jquery');
+var Styles = require('./Styling/Styles');
 
 var reactLoaderDisplay = createReactClass({
     displayName: 'ReactLoaderDisplay',
-    getDefaultProps: function() {
+    getDefaultProps: function () {
         return {
             IsLoading: false,
-            LoaderMessage:'Please wait...',
-            ZIndex:1000,
-            BackDropRGBA:'rgba(0,0,0,0.1)',
-            ForeGroundColor:'white',
-            TextColor:'black',
-            DisplayType:'Show'
+            LoaderMessage: 'Please wait...',
+            ZIndex: 1000,
+            BackDropRGBA: 'rgba(0,0,0,0.1)',
+            ForeGroundColor: 'white',
+            TextColor: 'black',
+            DisplayType: 'Show'
         };
     },
-    componentDidMount:function(){
-        var LoaderRef=$('.ReactLoaderBackDrop #LoaderModalReactLoadingDisplay85934045'); //as unique as possible to ensure the id doesn't clash with the user's code
+    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)
-        {
+        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;
+    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
+        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")
-            {
+        if (IsLoading) {
+            if (DisplayType === "Show") {
                 LoaderRef.animate({
-                    'margin-top':'150px'
-                },1,'swing',function(){
+                    'margin-top': '150px'
+                }, 1, 'swing', function () {
                     LoaderRef.show(1);
@@ -47,17 +43,20 @@ })
 
-            if(DisplayType==="FadeIn")
-            {
+            if (DisplayType === "FadeIn") {
                 LoaderRef.animate({
-                    'margin-top':'150px'
-                },1,'swing',function(){
-                    LoaderRef.fadeIn(300);
+                    'margin-top': '150px'
+                }, 1, 'swing', function () {
+                    LoaderRef.fadeIn(500);
                 })
             }
 
-            if(DisplayType==="SlideDown")
-            {
-                LoaderRef.show(1,function(){
-                    LoaderRef.animate({
-                        'margin-top':'150px'
-                    },300)
+            if (DisplayType === "SlideDown") {
+
+                LoaderRef.animate({
+                    'margin-top': '0px'
+                }, 1, 'swing', function () {
+                    LoaderRef.show(1, function () {
+                        LoaderRef.animate({
+                            'margin-top': '150px'
+                        }, 300)
+                    });
                 });
@@ -67,15 +66,14 @@ }
 
-        if(!IsLoading)
-        {
-            LoaderRef.hide(1,function(){
+        if (!IsLoading) {
+            LoaderRef.hide(1, function () {
                 LoaderRef.animate({
-                    'margin-top':'0px'
-                },1)
+                    'margin-top': '0px'
+                }, 1)
             })
         }
     },
-    propTypes:{
+    propTypes: {
         IsLoading: PropTypes.bool.isRequired,
-        LoadingImage:PropTypes.string.isRequired,
-        ZIndex:PropTypes.number,
+        LoadingImage: PropTypes.string.isRequired,
+        ZIndex: PropTypes.number,
         LoaderMessage: PropTypes.string,
@@ -85,20 +83,20 @@ BackDropRGBA: PropTypes.string,
         TextColor: PropTypes.string,
-        DisplayType:PropTypes.string
+        DisplayType: PropTypes.string
     },
-    render: function() {
+    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 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)
+        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)
                 ])
@@ -112,2 +110,2 @@ ])
 
-module.exports=reactLoaderDisplay;
+module.exports = reactLoaderDisplay;

Styling/Styles.js

@@ -25,3 +25,4 @@ var StylesObj={
         textAlign:'center',
-        wordBreak:'break-all'
+        wordBreak:'break-all',
+        marginTop:150
     },
@@ -28,0 +29,0 @@ LoadingImage:{

New alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Fixed alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7561

increased by1.94%

Worsened metrics

Lines of code

140

decreased by-2.1%

No dependency changes