dmitrymorozoff · colus001 · May 31, 2023 · May 31, 2023
diff --git a/lib/index.js b/lib/index.js
diff --git a/src/components/ball/index.js b/src/components/ball/index.js
@@ -1,5 +1,5 @@
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
 import styled, { keyframes } from "styled-components";
 
 const motion = props => keyframes`
@@ -21,7 +21,7 @@ const motion = props => keyframes`
     }
 `;
 
-export const BallSpinner = ({ size, color, loading, sizeUnit }) => {
+export const BallSpinner = ({ size = 40, color = "#00ff89", loading = true, sizeUnit = "px" }) => {
     return (
         loading && (
             <Wrapper size={size}>
@@ -47,13 +47,6 @@ const Ball = styled.div`
     animation: ${props => motion(props)} 3s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
 `;
 
-BallSpinner.defaultProps = {
-    loading: true,
-    size: 40,
-    color: "#00ff89",
-    sizeUnit: "px",
-};
-
 BallSpinner.propTypes = {
     loading: PropTypes.bool,
     size: PropTypes.number,

diff --git a/src/components/bars/index.js b/src/components/bars/index.js
@@ -1,5 +1,5 @@
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
 import styled, { keyframes } from "styled-components";
 
 const motion = props => keyframes`
@@ -31,7 +31,7 @@ const getBars = (countBars, color, size, sizeUnit) => {
     return bars;
 };
 
-export const BarsSpinner = ({ size, color, loading, sizeUnit }) => {
+export const BarsSpinner = ({ size = 40, color = "#00ff89", loading = true, sizeUnit = "px" }) => {
     const countBars = 5;
     return (
         loading && (
@@ -62,13 +62,6 @@ const Bar = styled.div`
     animation-delay: ${props => props.index * 0.15}s;
 `;
 
-BarsSpinner.defaultProps = {
-    loading: true,
-    size: 40,
-    color: "#00ff89",
-    sizeUnit: "px",
-};
-
 BarsSpinner.propTypes = {
     loading: PropTypes.bool,
     size: PropTypes.number,

diff --git a/src/components/circle/index.js b/src/components/circle/index.js
@@ -1,5 +1,5 @@
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
 import styled, { keyframes } from "styled-components";
 
 const rotate = keyframes`
@@ -11,7 +11,7 @@ const rotate = keyframes`
     }
 `;
 
-export const CircleSpinner = ({ size, color, loading, sizeUnit }) => {
+export const CircleSpinner = ({ size = 30, color = "#fff", loading = true, sizeUnit = "px" }) => {
     return loading && <Wrapper size={size} color={color} sizeUnit={sizeUnit} />;
 };
 
@@ -27,13 +27,6 @@ const Wrapper = styled.div`
     animation: ${rotate} 0.75s linear infinite;
 `;
 
-CircleSpinner.defaultProps = {
-    loading: true,
-    size: 30,
-    color: "#fff",
-    sizeUnit: "px",
-};
-
 CircleSpinner.propTypes = {
     loading: PropTypes.bool,
     size: PropTypes.number,

diff --git a/src/components/clap/index.js b/src/components/clap/index.js
@@ -1,5 +1,5 @@
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
 import styled, { keyframes } from "styled-components";
 
 const rotate = keyframes`
@@ -13,14 +13,10 @@ const rotate = keyframes`
 
 const move = props => keyframes`
     0% {
-        transform: translateX(${props.x}${props.sizeUnit}) translateY(${props.y}${
-    props.sizeUnit
-}) scale(1.25) ;
+        transform: translateX(${props.x}${props.sizeUnit}) translateY(${props.y}${props.sizeUnit}) scale(1.25) ;
     }
     5% {
-        transform: translateX(${props.x}${props.sizeUnit}) translateY(${props.y}${
-    props.sizeUnit
-}) scale(1.75);
+        transform: translateX(${props.x}${props.sizeUnit}) translateY(${props.y}${props.sizeUnit}) scale(1.75);
     }
     50% {
         transform: translateX(${props.x}${props.sizeUnit}) translateY(${props.y}${props.sizeUnit}) scale(.25);
@@ -54,7 +50,13 @@ const getBalls = ({ countBalls, radius, angle, frontColor, backColor, size, ball
     return balls;
 };
 
-export const ClapSpinner = ({ size, frontColor, backColor, loading, sizeUnit }) => {
+export const ClapSpinner = ({
+    size = 30,
+    frontColor = "#00ff89",
+    backColor = "#4b4c56",
+    loading = true,
+    sizeUnit = "px",
+}) => {
     const radius = size / 2;
     const countBalls = 7;
     const ballSize = size / 5;
@@ -101,14 +103,6 @@ const Ball = styled.div`
     animation-delay: ${props => props.index * 0.2}s;
 `;
 
-ClapSpinner.defaultProps = {
-    loading: true,
-    size: 30,
-    frontColor: "#00ff89",
-    backColor: "#4b4c56",
-    sizeUnit: "px",
-};
-
 ClapSpinner.propTypes = {
     loading: PropTypes.bool,
     size: PropTypes.number,

diff --git a/src/components/classic/index.js b/src/components/classic/index.js
@@ -1,5 +1,5 @@
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
 import styled, { keyframes } from "styled-components";
 
 const fade = keyframes`
@@ -33,7 +33,7 @@ const getBars = ({ countBars: countBars, color, size, barSize: barSize, sizeUnit
     return bars;
 };
 
-export const ClassicSpinner = ({ size, color, loading, sizeUnit }) => {
+export const ClassicSpinner = ({ size = 30, color = "#fff", loading = true, sizeUnit = "px" }) => {
     const radius = size / 2;
     const countBars = 16;
     return (
@@ -72,13 +72,6 @@ const Bar = styled.div`
     animation-delay: ${props => props.index * 0.06}s;
 `;
 
-ClassicSpinner.defaultProps = {
-    loading: true,
-    size: 30,
-    color: "#fff",
-    sizeUnit: "px",
-};
-
 ClassicSpinner.propTypes = {
     loading: PropTypes.bool,
     size: PropTypes.number,

diff --git a/src/components/comb/index.js b/src/components/comb/index.js
@@ -1,5 +1,5 @@
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
 import styled, { keyframes } from "styled-components";
 
 const rotate = () => keyframes`
@@ -16,7 +16,7 @@ const getBars = ({ countBars, color, size, sizeUnit }) => {
     return bars;
 };
 
-export const CombSpinner = ({ size, color, loading, sizeUnit }) => {
+export const CombSpinner = ({ size = 100, color = "#fff", loading = true, sizeUnit = "px" }) => {
     const countBars = size / 9;
     return (
         loading && (
@@ -51,13 +51,6 @@ const Bar = styled.div`
     animation-delay: ${props => props.index * 0.05}s;
 `;
 
-CombSpinner.defaultProps = {
-    loading: true,
-    size: 100,
-    color: "#fff",
-    sizeUnit: "px",
-};
-
 CombSpinner.propTypes = {
     loading: PropTypes.bool,
     size: PropTypes.number,

diff --git a/src/components/cube/index.js b/src/components/cube/index.js
@@ -1,13 +1,19 @@
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
 import styled, { keyframes } from "styled-components";
 
 const rotate = keyframes`
     from { transform: rotateX(0) rotateY(0); }
     to   { transform: rotateX(360deg) rotateY(360deg); }
 `;
 
-export const CubeSpinner = ({ size, backColor, frontColor, loading, sizeUnit }) => {
+export const CubeSpinner = ({
+    size = 25,
+    backColor = "#4b4c56",
+    frontColor = "#00ff89",
+    loading = true,
+    sizeUnit = "px",
+}) => {
     return (
         loading && (
             <Wrapper size={size} sizeUnit={sizeUnit}>
@@ -86,14 +92,6 @@ const Side = styled.div`
         translateZ(${props => `${props.size / 2}${props.sizeUnit}`});
 `;
 
-CubeSpinner.defaultProps = {
-    loading: true,
-    size: 25,
-    frontColor: "#00ff89",
-    backColor: "#4b4c56",
-    sizeUnit: "px",
-};
-
 CubeSpinner.propTypes = {
     loading: PropTypes.bool,
     size: PropTypes.number,

diff --git a/src/components/domino/index.js b/src/components/domino/index.js
@@ -1,5 +1,5 @@
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
 import styled, { keyframes } from "styled-components";
 
 const fall = props => keyframes`
@@ -67,7 +67,7 @@ const getBars = ({ countBars, rotatesPoints, translatesPoints, color, size, size
     return bars;
 };
 
-export const DominoSpinner = ({ size, color, loading, sizeUnit }) => {
+export const DominoSpinner = ({ size = 100, color = "#4b4c56", loading = true, sizeUnit = "px" }) => {
     const countBars = 7;
     const rotatesPoints = [0, 0, 0, 10, 40, 60, 70];
     const translatesPoints = getTranslatePositions(countBars, size);
@@ -109,13 +109,6 @@ const Bar = styled.div`
     }
 `;
 
-DominoSpinner.defaultProps = {
-    loading: true,
-    size: 100,
-    color: "#4b4c56",
-    sizeUnit: "px",
-};
-
 DominoSpinner.propTypes = {
     loading: PropTypes.bool,
     size: PropTypes.number,

diff --git a/src/components/fill/index.js b/src/components/fill/index.js
@@ -1,5 +1,5 @@
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
 import styled, { keyframes } from "styled-components";
 
 const rotate = keyframes`
@@ -38,7 +38,7 @@ const fill = keyframes`
     }
 `;
 
-export const FillSpinner = ({ size, color, loading, sizeUnit }) => {
+export const FillSpinner = ({ size = 20, color = "#4b4c56", loading = true, sizeUnit = "px" }) => {
     return (
         loading && (
             <Wrapper size={size} color={color} sizeUnit={sizeUnit}>
@@ -64,13 +64,6 @@ const Plane = styled.div`
     animation: ${fill} 3s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
 `;
 
-FillSpinner.defaultProps = {
-    loading: true,
-    size: 20,
-    color: "#4b4c56",
-    sizeUnit: "px",
-};
-
 FillSpinner.propTypes = {
     loading: PropTypes.bool,
     size: PropTypes.number,

diff --git a/src/components/firework/index.js b/src/components/firework/index.js
@@ -1,5 +1,5 @@
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
 import styled, { keyframes } from "styled-components";
 
 const fire = keyframes`
@@ -16,7 +16,7 @@ const fire = keyframes`
     }
 `;
 
-export const FireworkSpinner = ({ size, color, loading, sizeUnit }) => {
+export const FireworkSpinner = ({ size = 40, color = "#fff", loading = true, sizeUnit = "px" }) => {
     return loading && <Wrapper size={size} color={color} sizeUnit={sizeUnit} />;
 };
 
@@ -31,13 +31,6 @@ const Wrapper = styled.div`
     animation: ${fire} 1.25s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
 `;
 
-FireworkSpinner.defaultProps = {
-    loading: true,
-    size: 40,
-    color: "#fff",
-    sizeUnit: "px",
-};
-
 FireworkSpinner.propTypes = {
     loading: PropTypes.bool,
     size: PropTypes.number,

diff --git a/src/components/flag/index.js b/src/components/flag/index.js
@@ -1,5 +1,5 @@
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
 import styled, { keyframes } from "styled-components";
 
 const wave = props => keyframes`
@@ -46,7 +46,7 @@ const getPlanes = ({ countPlaneInLine, color, size, sizeUnit }) => {
     return lines;
 };
 
-export const FlagSpinner = ({ size, color, loading, sizeUnit }) => {
+export const FlagSpinner = ({ size = 40, color = "#fff", loading = true, sizeUnit = "px" }) => {
     const countPlaneInLine = 4;
     return (
         loading && (
@@ -83,13 +83,6 @@ const Plane = styled.div`
     background-color: ${props => props.color};
 `;
 
-FlagSpinner.defaultProps = {
-    loading: true,
-    size: 40,
-    color: "#fff",
-    sizeUnit: "px",
-};
-
 FlagSpinner.propTypes = {
     loading: PropTypes.bool,
     size: PropTypes.number,

diff --git a/src/components/flapper/index.js b/src/components/flapper/index.js
@@ -1,5 +1,5 @@
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
 import styled, { keyframes } from "styled-components";
 
 const move = props => keyframes`
@@ -32,7 +32,7 @@ const getBalls = ({ countBalls, radius, angle, color, size, ballSize, sizeUnit }
     return balls;
 };
 
-export const FlapperSpinner = ({ size, color, loading, sizeUnit }) => {
+export const FlapperSpinner = ({ size = 30, color = "#00ff89", loading = true, sizeUnit = "px" }) => {
     const radius = size / 2;
     const countBalls = 7;
     const ballSize = size / 1.5;
@@ -77,13 +77,6 @@ const Ball = styled.div`
     animation-delay: ${props => props.index * 0.1}s;
 `;
 
-FlapperSpinner.defaultProps = {
-    loading: true,
-    size: 30,
-    color: "#00ff89",
-    sizeUnit: "px",
-};
-
 FlapperSpinner.propTypes = {
     loading: PropTypes.bool,
     size: PropTypes.number,