react-loader-display - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

package.json

 {
   "name": "react-loader-display",
-  "version": "2.1.0",
+  "version": "2.2.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

@@ -17,5 +17,51 @@ 'use strict';
             ForeGroundColor:'white',
-            TextColor:'black'
+            TextColor:'black',
+            DisplayType:'Show'
         };
     },
+    componentWillReceiveProps: function(nextProps) {
+        var DisplayType=nextProps.DisplayType;
+        var IsLoading=nextProps.IsLoading;
+        var LoaderRef=$('#LoaderModal');
+
+        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(300);
+                })
+            }
+
+            if(DisplayType==="SlideDown")
+            {
+                LoaderRef.show(1,function(){
+                    LoaderRef.animate({
+                        'margin-top':'150px'
+                    },300)
+                });
+            }
+        }
+
+        if(!IsLoading)
+        {
+            LoaderRef.hide(1,function(){
+                LoaderRef.animate({
+                    'margin-top':'0px'
+                },1)
+            })
+        }
+    },
     propTypes:{
@@ -28,3 +74,4 @@ IsLoading: PropTypes.bool.isRequired,
         ForeGroundColor: PropTypes.string,
-        TextColor: PropTypes.string
+        TextColor: PropTypes.string,
+        DisplayType:PropTypes.string
     },
@@ -42,3 +89,3 @@ render: function() {
                 this.props.IsLoading?Style.BackdropVisible:Style.LoaderHidden},[
-                h('div',{style:Style.Modal},[
+                h('div',{style:Style.Modal,id:'LoaderModal'},[
                     h('img',{src:this.props.LoadingImage,style:Style.LoadingImage}),
@@ -45,0 +92,0 @@ h('div',{style:Style.LoadingText},this.props.LoaderMessage)

Styling/Styles.js

@@ -22,6 +22,6 @@ var StylesObj={
         borderRadius:'5px',
-        marginTop:150,
         paddingTop:30,
         paddingBottom:30,
-        textAlign:'center'
+        textAlign:'center',
+        wordBreak:'break-all'
     },
@@ -28,0 +28,0 @@ LoadingImage:{

No alert changes

Improved metrics

Total package byte prevSize

6069

increased by26.23%

Lines of code

134

increased by45.65%

No dependency changes