feat(zIndex): #321 ability to add custom z-index (#367)

awibox · Jun 28, 2022 · 65a2fee · 65a2fee
1 parent d17e3b1
commit 65a2fee
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 32 deletions.
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [14.x]
     steps:
     - uses: actions/[email protected]
     - name: Use Node.js ${{ matrix.node-version }}

diff --git a/README.md b/README.md
@@ -55,12 +55,13 @@ export default App;
 
 <a name="settings"></a>
 ## The settings of the component
-|Parameter|Type|Description|Default|
-|--------------------|--------|-----------|-------|
-|**background**|string|Sets the color for the background in any format that supports css|``` rgba(255,255,255,.5) ```|
-|**color**|string|Sets the color of the spinner|``` #000 ```|
-|**promiseTracker**|boolean|You need to set ```usePromiseTracker``` function from the ```react-promise-tracker```|``` false ```|
-|**loading**|boolean|If you need to run the loader without tracking promises you should set ```true```|``` false ```|
+| Parameter          | Type    | Description                                                                           | Default                      |
+|--------------------|---------|---------------------------------------------------------------------------------------|------------------------------|
+| **background**     | string  | Sets the color for the background in any format that supports css                     | ``` rgba(255,255,255,.5) ``` |
+| **color**          | string  | Sets the color of the spinner                                                         | ``` #000 ```                 |
+| **promiseTracker** | boolean | You need to set ```usePromiseTracker``` function from the ```react-promise-tracker``` | ``` false ```                |
+| **loading**        | boolean | If you need to run the loader without tracking promises you should set ```true```     | ``` false ```                |
+| **zIndex**         | number  | You can change the z-index to distribute the layers correctly                         | ``` 999 ```                  |
 
 <a name="contributing"></a>
 ## Contributing

diff --git a/dist/index.js b/dist/index.js
diff --git a/specs/__snapshots__/Loader.spec.js.snap b/specs/__snapshots__/Loader.spec.js.snap
@@ -11,7 +11,7 @@ exports[`Loader should render correctly 1`] = `
       "position": "absolute",
       "right": 0,
       "top": 0,
-      "zIndex": 10,
+      "zIndex": 999,
     }
   }
 >

diff --git a/src/components/Loader.js b/src/components/Loader.js
@@ -1,31 +1,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const defaultLoaderStyle = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  zIndex: 10,
-  background: 'rgba(255,255,255,.5)',
-  backfaceVisibility: 'hidden',
-};
+const Loader = (props) => {
+  const {
+    color, background, loading, promiseTracker, zIndex,
+  } = props;
 
-const defaultSpinnerStyle = {
-  position: 'absolute',
-  left: '50%',
-  top: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: 100,
-  height: 100,
-};
+  const defaultLoaderStyle = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex,
+    background: 'rgba(255,255,255,.5)',
+    backfaceVisibility: 'hidden',
+  };
 
-const Loader = (props) => {
-  const { promiseInProgress } = props.promiseTracker ? props.promiseTracker() : false;
+  const defaultSpinnerStyle = {
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 100,
+    height: 100,
+  };
+
+  const { promiseInProgress } = promiseTracker ? promiseTracker() : false;
   const loaderStyle = {
     ...defaultLoaderStyle,
-    background: props.background,
+    background,
   };
   const spinnerItemsArray = [
     { transform: 'rotate(0 50 50)', begin: '-0.9166666666666666s' },
@@ -42,13 +46,13 @@ const Loader = (props) => {
     { transform: 'rotate(330 50 50)', begin: '0s' },
   ];
   return (
-    props.loading || promiseInProgress
+    loading || promiseInProgress
       ? <div style={loaderStyle}>
       <div style={defaultSpinnerStyle}>
         <svg className="lds-spinner" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
           {spinnerItemsArray.map((item) => <g key={item.transform} transform={item.transform}>
-            <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill={props.color}>
+            <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill={color}>
               <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin={item.begin} repeatCount="indefinite"/>
             </rect>
           </g>)}
@@ -63,13 +67,15 @@ Loader.propTypes = {
   loading: PropTypes.bool,
   background: PropTypes.string,
   promiseTracker: PropTypes.any,
+  zIndex: PropTypes.number,
 };
 
 Loader.defaultProps = {
   color: '#000',
   loading: false,
   background: 'rgba(255,255,255,.5)',
   promiseTracker: false,
+  zIndex: 999,
 };
 
 export default Loader;