Update components to remove defaultProps

Newer versions of react would deprecate defaultProps for function components
bondz · Sep 26, 2020 · 2a9cf80 · 2a9cf80
1 parent c9f3a6d
commit 2a9cf80
Show file tree

Hide file tree

Showing 20 changed files with 462 additions and 583 deletions.
diff --git a/src/components/AtomSpinner.js b/src/components/AtomSpinner.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const Atom = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
   overflow: hidden;
 
   * {
@@ -21,8 +21,8 @@ const Atom = styled.div`
   .spinner-circle {
     display: block;
     position: absolute;
-    color: ${props => props.color};
-    font-size: calc(${props => props.size}px * 0.24);
+    color: ${(props) => props.color};
+    font-size: calc(${(props) => props.size}px * 0.24);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -33,29 +33,29 @@ const Atom = styled.div`
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    animation-duration: ${props => props.animationDuration}ms;
-    border-left-width: calc(${props => props.size}px / 25);
-    border-top-width: calc(${props => props.size}px / 25);
-    border-left-color: ${props => props.color};
+    animation-duration: ${(props) => props.animationDuration}ms;
+    border-left-width: calc(${(props) => props.size}px / 25);
+    border-top-width: calc(${(props) => props.size}px / 25);
+    border-left-color: ${(props) => props.color};
     border-left-style: solid;
     border-top-style: solid;
     border-top-color: transparent;
   }
 
   .spinner-line:nth-child(1) {
-    animation: atom-spinner-animation-1 ${props => props.animationDuration}ms
+    animation: atom-spinner-animation-1 ${(props) => props.animationDuration}ms
       linear infinite;
     transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
   }
 
   .spinner-line:nth-child(2) {
-    animation: atom-spinner-animation-2 ${props => props.animationDuration}ms
+    animation: atom-spinner-animation-2 ${(props) => props.animationDuration}ms
       linear infinite;
     transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
   }
 
   .spinner-line:nth-child(3) {
-    animation: atom-spinner-animation-3 ${props => props.animationDuration}ms
+    animation: atom-spinner-animation-3 ${(props) => props.animationDuration}ms
       linear infinite;
     transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
   }
@@ -85,18 +85,11 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 60,
-  color: 'red',
-  animationDuration: 1000,
-  className: '',
-};
-
 export const AtomSpinner = ({
-  size,
-  animationDuration,
-  color,
-  className,
+  size = 60,
+  animationDuration = 1000,
+  color = '#fff',
+  className = '',
   style,
   ...props
 }) => (
@@ -119,6 +112,5 @@ export const AtomSpinner = ({
 );
 
 AtomSpinner.propTypes = propTypes;
-AtomSpinner.defaultProps = defaultProps;
 
 export default AtomSpinner;
diff --git a/src/components/BreedingRhombusSpinner.js b/src/components/BreedingRhombusSpinner.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const BreedingSpinner = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => props.size}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
   position: relative;
   transform: rotate(45deg);
 
@@ -13,12 +13,12 @@ const BreedingSpinner = styled.div`
   }
 
   .rhombus {
-    height: calc(${props => props.size}px / 7.5);
-    width: calc(${props => props.size}px / 7.5);
-    animation-duration: ${props => props.animationDuration}ms;
-    top: calc(${props => props.size}px / 2.3077);
-    left: calc(${props => props.size}px / 2.3077);
-    background-color: ${props => props.color};
+    height: calc(${(props) => props.size}px / 7.5);
+    width: calc(${(props) => props.size}px / 7.5);
+    animation-duration: ${(props) => props.animationDuration}ms;
+    top: calc(${(props) => props.size}px / 2.3077);
+    left: calc(${(props) => props.size}px / 2.3077);
+    background-color: ${(props) => props.color};
     position: absolute;
     animation-iteration-count: infinite;
   }
@@ -29,53 +29,53 @@ const BreedingSpinner = styled.div`
 
   .rhombus.child-1 {
     animation-name: breeding-rhombus-spinner-animation-child-1;
-    animation-delay: calc(${props => props.delayModifier}ms * 1);
+    animation-delay: calc(${(props) => props.delayModifier}ms * 1);
   }
 
   .rhombus.child-2 {
     animation-name: breeding-rhombus-spinner-animation-child-2;
-    animation-delay: calc(${props => props.delayModifier}ms * 2);
+    animation-delay: calc(${(props) => props.delayModifier}ms * 2);
   }
 
   .rhombus.child-3 {
     animation-name: breeding-rhombus-spinner-animation-child-3;
-    animation-delay: calc(${props => props.delayModifier}ms * 3);
+    animation-delay: calc(${(props) => props.delayModifier}ms * 3);
   }
 
   .rhombus.child-4 {
     animation-name: breeding-rhombus-spinner-animation-child-4;
-    animation-delay: calc(${props => props.delayModifier}ms * 4);
+    animation-delay: calc(${(props) => props.delayModifier}ms * 4);
   }
 
   .rhombus.child-5 {
     animation-name: breeding-rhombus-spinner-animation-child-5;
-    animation-delay: calc(${props => props.delayModifier}ms * 5);
+    animation-delay: calc(${(props) => props.delayModifier}ms * 5);
   }
 
   .rhombus.child-6 {
     animation-name: breeding-rhombus-spinner-animation-child-6;
-    animation-delay: calc(${props => props.delayModifier}ms * 6);
+    animation-delay: calc(${(props) => props.delayModifier}ms * 6);
   }
 
   .rhombus.child-7 {
     animation-name: breeding-rhombus-spinner-animation-child-7;
-    animation-delay: calc(${props => props.delayModifier}ms * 7);
+    animation-delay: calc(${(props) => props.delayModifier}ms * 7);
   }
 
   .rhombus.child-8 {
     animation-name: breeding-rhombus-spinner-animation-child-8;
-    animation-delay: calc(${props => props.delayModifier}ms * 8);
+    animation-delay: calc(${(props) => props.delayModifier}ms * 8);
   }
 
   .rhombus.big {
-    height: calc(${props => props.size}px / 3);
-    width: calc(${props => props.size}px / 3);
-    animation-duration: ${props => props.animationDuration}ms;
-    top: calc(${props => props.size}px / 3);
-    left: calc(${props => props.size}px / 3);
-    background-color: ${props => props.color};
+    height: calc(${(props) => props.size}px / 3);
+    width: calc(${(props) => props.size}px / 3);
+    animation-duration: ${(props) => props.animationDuration}ms;
+    top: calc(${(props) => props.size}px / 3);
+    left: calc(${(props) => props.size}px / 3);
+    background-color: ${(props) => props.color};
     animation: breeding-rhombus-spinner-animation-child-big
-      ${props => props.animationDuration} infinite;
+      ${(props) => props.animationDuration} infinite;
     animation-delay: 0.5s;
   }
 
@@ -134,24 +134,17 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 150,
-  color: '#fff',
-  animationDuration: 2000,
-  className: '',
-};
-
 function generateRhombusChildren(num) {
   return Array.from({ length: num }).map((val, index) => (
     <div key={index} className={`rhombus child-${index + 1}`} />
   ));
 }
 
 const BreedingRhombusSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 150,
+  color = '#fff',
+  animationDuration = 2000,
+  className = '',
   style,
   ...props
 }) => (
@@ -170,6 +163,5 @@ const BreedingRhombusSpinner = ({
 );
 
 BreedingRhombusSpinner.propTypes = propTypes;
-BreedingRhombusSpinner.defaultProps = defaultProps;
 
 export default BreedingRhombusSpinner;
diff --git a/src/components/CirclesToRhombusesSpinner.js b/src/components/CirclesToRhombusesSpinner.js
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const CircleRhombus = styled.div`
-  height: ${props => props.size}px;
-  width: ${props => (props.size + props.circleMarginLeft) * props.circleNum}px;
+  height: ${(props) => props.size}px;
+  width: ${(props) =>
+    (props.size + props.circleMarginLeft) * props.circleNum}px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -14,26 +15,26 @@ const CircleRhombus = styled.div`
   }
 
   .circle {
-    height: ${props => props.size}px;
-    width: ${props => props.size}px;
-    margin-left: ${props => props.circleMarginLeft}px;
+    height: ${(props) => props.size}px;
+    width: ${(props) => props.size}px;
+    margin-left: ${(props) => props.circleMarginLeft}px;
     transform: rotate(45deg);
     border-radius: 10%;
-    border: 3px solid ${props => props.color};
+    border: 3px solid ${(props) => props.color};
     overflow: hidden;
     background: transparent;
     animation: circles-to-rhombuses-animation
-      ${props => props.animationDuration}ms linear infinite;
+      ${(props) => props.animationDuration}ms linear infinite;
   }
   .circle:nth-child(1) {
-    animation-delay: calc(${props => props.delay}ms * 1);
+    animation-delay: calc(${(props) => props.delay}ms * 1);
     margin-left: 0;
   }
   .circle:nth-child(2) {
-    animation-delay: calc(${props => props.delay}ms * 2);
+    animation-delay: calc(${(props) => props.delay}ms * 2);
   }
   .circle:nth-child(3) {
-    animation-delay: calc(${props => props.delay}ms * 3);
+    animation-delay: calc(${(props) => props.delay}ms * 3);
   }
   @keyframes circles-to-rhombuses-animation {
     0% {
@@ -62,24 +63,17 @@ const propTypes = {
   style: PropTypes.object,
 };
 
-const defaultProps = {
-  size: 15,
-  color: '#fff',
-  animationDuration: 1200,
-  className: '',
-};
-
 function generateRhombusChildren(num) {
   return Array.from({ length: num }).map((val, index) => (
     <div key={index} className="circle" />
   ));
 }
 
 const CirclesToRhombusesSpinner = ({
-  size,
-  color,
-  animationDuration,
-  className,
+  size = 15,
+  color = '#fff',
+  animationDuration = 1200,
+  className = '',
   style,
   ...props
 }) => {
@@ -105,7 +99,7 @@ const CirclesToRhombusesSpinner = ({
     </CircleRhombus>
   );
 };
+
 CirclesToRhombusesSpinner.propTypes = propTypes;
-CirclesToRhombusesSpinner.defaultProps = defaultProps;
 
 export default CirclesToRhombusesSpinner;