Merge pull request #23 from DrZanuff/refactor/RemoveDeafultPropsWarning

refactor: remove defaultprops warning

Author: adexin-team

src/SpinnerCircular.tsx

@@ -7,10 +7,10 @@ import './SpinnerCircular.css';
 export type SpinnerCircularProps = SpinnersProps & SecondaryColorSpinnerProps;
 
 const Component = ({
-  secondaryColor,
-  speed,
-  still,
-  thickness,
+  secondaryColor = secondaryColorDefaultProps.secondaryColor,
+  speed = secondaryColorDefaultProps.speed,
+  still = secondaryColorDefaultProps.still,
+  thickness = secondaryColorDefaultProps.thickness,
   ...svgProps
 }: SecondaryColorSpinnerProps) => {
   const strokeWidth = 4 * (thickness / 100);
@@ -44,6 +44,4 @@ const Component = ({
   );
 };
 
-Component.defaultProps = secondaryColorDefaultProps;
-
 export const SpinnerCircular = withSharedProps(Component);

src/SpinnerCircularFixed.tsx

@@ -7,10 +7,10 @@ import './SpinnerCircularFixed.css';
 export type SpinnerCircularFixedProps = SpinnersProps & SecondaryColorSpinnerProps;
 
 const Component = ({
-  secondaryColor,
-  speed,
-  still,
-  thickness,
+  secondaryColor = secondaryColorDefaultProps.secondaryColor,
+  speed = secondaryColorDefaultProps.speed,
+  still = secondaryColorDefaultProps.still,
+  thickness = secondaryColorDefaultProps.thickness,
   ...svgProps
 }: SecondaryColorSpinnerProps) => {
   const strokeWidth = 4 * (thickness / 100);
@@ -44,6 +44,4 @@ const Component = ({
   );
 };
 
-Component.defaultProps = secondaryColorDefaultProps;
-
 export const SpinnerCircularFixed = withSharedProps(Component);

src/SpinnerCircularSplit.tsx

@@ -7,10 +7,10 @@ import './SpinnerCircularSplit.css';
 export type SpinnerCircularSplitProps = SpinnersProps & SecondaryColorSpinnerProps;
 
 const Component = ({
-  secondaryColor,
-  speed,
-  still,
-  thickness,
+  secondaryColor = secondaryColorDefaultProps.secondaryColor,
+  speed = secondaryColorDefaultProps.speed,
+  still = secondaryColorDefaultProps.still,
+  thickness = secondaryColorDefaultProps.thickness,
   ...svgProps
 }: SecondaryColorSpinnerProps) => {
   const strokeWidth = 4 * (thickness / 100);
@@ -45,6 +45,4 @@ const Component = ({
   );
 };
 
-Component.defaultProps = secondaryColorDefaultProps;
-
 export const SpinnerCircularSplit = withSharedProps(Component);

src/SpinnerDiamond.tsx

@@ -36,10 +36,10 @@ const coords = [
 export type SpinnerDiamondProps = SpinnersProps & SecondaryColorSpinnerProps;
 
 const Component = ({
-  secondaryColor,
-  speed,
-  still,
-  thickness,
+  secondaryColor = secondaryColorDefaultProps.secondaryColor,
+  speed = secondaryColorDefaultProps.speed,
+  still = secondaryColorDefaultProps.still,
+  thickness = secondaryColorDefaultProps.thickness,
   ...svgProps
 }: SecondaryColorSpinnerProps) => {
   const diamondStyle: CSSProperties = {
@@ -62,7 +62,5 @@ const Component = ({
   );
 };
 
-Component.defaultProps = secondaryColorDefaultProps;
-
 export const SpinnerRomb = withSharedProps(Component);
 export const SpinnerDiamond = withSharedProps(Component);

src/SpinnerDotted.tsx

@@ -18,9 +18,9 @@ const coords = [
 export type SpinnerDottedProps = SpinnersProps & SpinnerProps;
 
 export const Component = ({
-  speed,
-  still,
-  thickness,
+  speed = defaultProps.speed,
+  still = defaultProps.still,
+  thickness = defaultProps.thickness,
   ...svgProps
 }: SpinnerProps) => {
   const duration = 200 / speed;
@@ -60,6 +60,4 @@ export const Component = ({
   );
 };
 
-Component.defaultProps = defaultProps;
-
 export const SpinnerDotted = withSharedProps(Component);

src/SpinnerInfinity.tsx

@@ -7,10 +7,10 @@ import './SpinnerInfinity.css';
 export type SpinnerInfinityProps = SpinnersProps & SecondaryColorSpinnerProps;
 
 const Component = ({
-  secondaryColor,
-  speed,
-  still,
-  thickness,
+  secondaryColor = secondaryColorDefaultProps.secondaryColor,
+  speed = secondaryColorDefaultProps.speed,
+  still = secondaryColorDefaultProps.still,
+  thickness = secondaryColorDefaultProps.thickness,
   ...svgProps
 }: SecondaryColorSpinnerProps) => {
   const strokeWidth = 7 * (thickness / 100);
@@ -41,6 +41,4 @@ const Component = ({
   );
 };
 
-Component.defaultProps = secondaryColorDefaultProps;
-
 export const SpinnerInfinity = withSharedProps(Component);

src/SpinnerRound.tsx

@@ -7,9 +7,9 @@ import './SpinnerRound.css';
 export type SpinnerRoundProps = SpinnersProps & SpinnerProps;
 
 const Component = ({
-  speed,
-  still,
-  thickness,
+  speed = defaultProps.speed,
+  still = defaultProps.still,
+  thickness = defaultProps.thickness,
   ...svgProps
 }: SpinnerProps) => {
   const strokeWidth = 3 * (thickness / 100);
@@ -35,6 +35,4 @@ const Component = ({
   );
 };
 
-Component.defaultProps = defaultProps;
-
 export const SpinnerRound = withSharedProps(Component);

src/SpinnerRoundFilled.tsx

@@ -23,9 +23,9 @@ const animations = [
 export type SpinnerRoundFilledProps = SpinnersProps & SpinnerProps;
 
 const Component = ({
-  speed,
-  still,
-  thickness,
+  speed = defaultProps.speed,
+  still = defaultProps.still,
+  thickness = defaultProps.thickness,
   ...svgProps
 }: SpinnerProps) => (
   <svg fill="none" {...svgProps} viewBox="0 0 66 66">
@@ -48,6 +48,4 @@ const Component = ({
   </svg>
 );
 
-Component.defaultProps = defaultProps;
-
 export const SpinnerRoundFilled = withSharedProps(Component);

src/SpinnerRoundOutlined.tsx

@@ -21,9 +21,9 @@ const animations = [
 export type SpinnerRoundOutlinedProps = SpinnersProps & SpinnerProps;
 
 const Component = ({
-  speed,
-  still,
-  thickness,
+  speed = defaultProps.speed,
+  still = defaultProps.still,
+  thickness = defaultProps.thickness,
   ...svgProps
 }: SpinnerProps) => {
   const strokeWidth = 3 * (thickness / 100);
@@ -48,6 +48,4 @@ const Component = ({
   );
 };
 
-Component.defaultProps = defaultProps;
-
 export const SpinnerRoundOutlined = withSharedProps(Component);

src/withSharedProps.tsx

@@ -17,7 +17,11 @@ export type SpinnersProps = Partial<typeof defaultProps>;
 export const withSharedProps = <P extends SpinnersProps>(Component: ComponentType<P>) => {
   const Wrapper = (props: P) => {
     const {
-      color, enabled, size, style, ...otherProps
+      color = defaultProps.color,
+      enabled = defaultProps.enabled,
+      size = defaultProps.size,
+      style = defaultProps.style,
+      ...otherProps
     } = props;
     const componentProps = {
       ...otherProps,
@@ -34,7 +38,5 @@ export const withSharedProps = <P extends SpinnersProps>(Component: ComponentTyp
     return <Component {...componentProps as P} />;
   };
 
-  Wrapper.defaultProps = defaultProps;
-
   return Wrapper;
 };