l-min-components 1.0.503 → 1.0.507
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -10,11 +10,15 @@ import Loader from './loader';
|
|
|
10
10
|
* loaderAsset: object,
|
|
11
11
|
* isSectionLoader: boolean,
|
|
12
12
|
* hasBackground: boolean,
|
|
13
|
+
* fixed: boolean,
|
|
14
|
+
* loaderHeight: number,
|
|
15
|
+
* loaderWidth: number,
|
|
16
|
+
* zIndex: number,
|
|
13
17
|
* }} props - properties of the dropdown component
|
|
14
18
|
*/
|
|
15
19
|
|
|
16
20
|
const Backdrop = styled.div`
|
|
17
|
-
${({ isSectionLoader, hasBackground }) =>
|
|
21
|
+
${({ isSectionLoader, hasBackground, fixed, zIndex }) =>
|
|
18
22
|
isSectionLoader
|
|
19
23
|
? css`
|
|
20
24
|
position: relative;
|
|
@@ -23,19 +27,18 @@ const Backdrop = styled.div`
|
|
|
23
27
|
background: transparent;
|
|
24
28
|
`
|
|
25
29
|
: css`
|
|
26
|
-
position: fixed;
|
|
30
|
+
position: ${fixed ? 'fixed' : 'absolute'};
|
|
27
31
|
top: 0;
|
|
28
32
|
left: 0;
|
|
29
33
|
width: 100vw;
|
|
30
34
|
height: 100vh;
|
|
31
35
|
background: ${hasBackground ? 'rgba(110, 62, 62, 0.4)' : 'transparent'};
|
|
32
|
-
z-index:
|
|
36
|
+
z-index: ${zIndex};
|
|
33
37
|
`}
|
|
34
38
|
`;
|
|
35
39
|
|
|
36
|
-
|
|
37
40
|
const LoaderWrapper = styled.div`
|
|
38
|
-
${({ isSectionLoader }) =>
|
|
41
|
+
${({ isSectionLoader, fixed, zIndex }) =>
|
|
39
42
|
isSectionLoader
|
|
40
43
|
? css`
|
|
41
44
|
position: absolute;
|
|
@@ -45,11 +48,11 @@ const LoaderWrapper = styled.div`
|
|
|
45
48
|
z-index: 10;
|
|
46
49
|
`
|
|
47
50
|
: css`
|
|
48
|
-
position: fixed;
|
|
51
|
+
position: ${fixed ? 'fixed' : 'absolute'};
|
|
49
52
|
top: 50%;
|
|
50
53
|
left: 50%;
|
|
51
54
|
transform: translate(-50%, -50%);
|
|
52
|
-
z-index:
|
|
55
|
+
z-index: ${zIndex};
|
|
53
56
|
`}
|
|
54
57
|
img {
|
|
55
58
|
width: 300px;
|
|
@@ -57,12 +60,20 @@ const LoaderWrapper = styled.div`
|
|
|
57
60
|
}
|
|
58
61
|
`;
|
|
59
62
|
|
|
60
|
-
const FullPageLoader = ({
|
|
63
|
+
const FullPageLoader = ({
|
|
64
|
+
isSectionLoader = false,
|
|
65
|
+
hasBackground = false,
|
|
66
|
+
loaderAsset,
|
|
67
|
+
fixed,
|
|
68
|
+
loaderWidth = 400,
|
|
69
|
+
loaderHeight = 400,
|
|
70
|
+
zIndex = 999
|
|
71
|
+
}) => {
|
|
61
72
|
|
|
62
73
|
return (
|
|
63
|
-
<Backdrop isSectionLoader={isSectionLoader} hasBackground={hasBackground}>
|
|
64
|
-
<LoaderWrapper isSectionLoader={isSectionLoader}>
|
|
65
|
-
<Loader loaderAsset={loaderAsset} />
|
|
74
|
+
<Backdrop isSectionLoader={isSectionLoader} hasBackground={hasBackground} fixed={fixed} zIndex={zIndex}>
|
|
75
|
+
<LoaderWrapper isSectionLoader={isSectionLoader} fixed={fixed} zIndex={zIndex}>
|
|
76
|
+
<Loader loaderAsset={loaderAsset} width={loaderWidth} height={loaderHeight}/>
|
|
66
77
|
</LoaderWrapper>
|
|
67
78
|
</Backdrop>
|
|
68
79
|
);
|
|
@@ -8,11 +8,11 @@ const LoaderWrapper = styled.div`
|
|
|
8
8
|
display: flex;
|
|
9
9
|
justify-content: center;
|
|
10
10
|
align-items: center;
|
|
11
|
-
width:
|
|
12
|
-
height:
|
|
11
|
+
width: ${({ width }) => width}px;
|
|
12
|
+
height: ${({ height }) => height}px;
|
|
13
13
|
`;
|
|
14
14
|
|
|
15
|
-
const PageLoader = ({ loaderAsset = defaultLoaderAnimation }) => {
|
|
15
|
+
const PageLoader = ({ loaderAsset = defaultLoaderAnimation, width = 400, height = 400 }) => {
|
|
16
16
|
const animationContainer = useRef(null);
|
|
17
17
|
|
|
18
18
|
useEffect(() => {
|
|
@@ -28,7 +28,7 @@ const PageLoader = ({ loaderAsset = defaultLoaderAnimation }) => {
|
|
|
28
28
|
}, [loaderAsset]);
|
|
29
29
|
|
|
30
30
|
return (
|
|
31
|
-
<LoaderWrapper ref={animationContainer} />
|
|
31
|
+
<LoaderWrapper ref={animationContainer} width={width} height={height} />
|
|
32
32
|
);
|
|
33
33
|
};
|
|
34
34
|
|