Refactor: Replace defaultProps with Default Function Parameters

src/context/ScreenClassProvider/index.js

@@ -1,28 +1,39 @@
-import React, { useRef, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { useScreenClass } from '../../utils';
-import { getConfiguration } from '../../config';
-import { Div } from '../../primitives'
+import React, { useRef, useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { useScreenClass } from "../../utils";
+import { getConfiguration } from "../../config";
+import { Div } from "../../primitives";
 
-export const NO_PROVIDER_FLAG = 'NO_PROVIDER_FLAG';
+export const NO_PROVIDER_FLAG = "NO_PROVIDER_FLAG";
 
 export const ScreenClassContext = React.createContext(NO_PROVIDER_FLAG);
 
-const ScreenClassProvider = ({ useOwnWidth, children, fallbackScreenClass }) => {
+const ScreenClassProvider = ({
+  useOwnWidth = false,
+  children,
+  fallbackScreenClass = null,
+}) => {
   const screenClassRef = useRef();
   const [mounted, setMounted] = useState(false);
-  const detectedScreenClass = useScreenClass(screenClassRef, fallbackScreenClass);
+  const detectedScreenClass = useScreenClass(
+    screenClassRef,
+    fallbackScreenClass
+  );
   const { defaultScreenClass } = getConfiguration();
 
-  const screenClass = mounted ? detectedScreenClass : (fallbackScreenClass || defaultScreenClass);
+  const screenClass = mounted
+    ? detectedScreenClass
+    : fallbackScreenClass || defaultScreenClass;
 
   useEffect(() => setMounted(true), []);
 
   return (
     <ScreenClassContext.Provider value={screenClass}>
-      {useOwnWidth
-        ? <Div ref={useOwnWidth ? screenClassRef : null}>{children}</Div>
-        : <>{children}</>}
+      {useOwnWidth ? (
+        <Div ref={useOwnWidth ? screenClassRef : null}>{children}</Div>
+      ) : (
+        <>{children}</>
+      )}
     </ScreenClassContext.Provider>
   );
 };
@@ -42,12 +53,16 @@ ScreenClassProvider.propTypes = {
    * Screen class to use when it cannot be determined otherwise.
    * Useful for server side rendering.
    */
-  fallbackScreenClass: PropTypes.oneOf([null, 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' , 'xxxl']),
-};
-
-ScreenClassProvider.defaultProps = {
-  useOwnWidth: false,
-  fallbackScreenClass: null,
+  fallbackScreenClass: PropTypes.oneOf([
+    null,
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "xxl",
+    "xxxl",
+  ]),
 };
 
 export default ScreenClassProvider;

src/grid/Col/index.js

@@ -1,61 +1,71 @@
-import React, { createElement } from 'react';
-import PropTypes from 'prop-types';
-import getStyle from './style';
-import { getConfiguration } from '../../config';
-import { GutterWidthContext } from '../Row';
-import ScreenClassResolver from '../../context/ScreenClassResolver';
-import { Div } from '../../primitives';
+import React, { createElement } from "react";
+import PropTypes from "prop-types";
+import getStyle from "./style";
+import { getConfiguration } from "../../config";
+import { GutterWidthContext } from "../Row";
+import ScreenClassResolver from "../../context/ScreenClassResolver";
+import { Div } from "../../primitives";
 
-const Col = React.forwardRef(({
-  children,
-  xs,
-  sm,
-  md,
-  lg,
-  xl,
-  xxl,
-  xxxl,
-  offset,
-  pull,
-  push,
-  order,
-  debug,
-  style,
-  component,
-  width,
-  ...otherProps
-}, ref) => (
-  <ScreenClassResolver>
-    {(screenClass) => (
-      <GutterWidthContext.Consumer>
-        {(gutterWidth) => {
-          const theStyle = getStyle({
-            forceWidth: width,
-            width: {
-              xs,
-              sm,
-              md,
-              lg,
-              xl,
-              xxl,
-              xxxl,
-            },
-            offset,
-            pull,
-            push,
-            order,
-            debug,
-            screenClass,
-            gutterWidth,
-            gridColumns: getConfiguration().gridColumns,
-            moreStyle: style,
-          });
-          return createElement(component, { ref, style: theStyle, ...otherProps, children });
-        }}
-      </GutterWidthContext.Consumer>
-    )}
-  </ScreenClassResolver>
-));
+const Col = React.forwardRef(
+  (
+    {
+      children = null,
+      xs = null,
+      sm = null,
+      md = null,
+      lg = null,
+      xl = null,
+      xxl = null,
+      xxxl = null,
+      offset = {},
+      pull = {},
+      push = {},
+      order = {},
+      debug = false,
+      style = {},
+      component = Div,
+      width = null,
+      ...otherProps
+    },
+    ref
+  ) => (
+    <ScreenClassResolver>
+      {(screenClass) => (
+        <GutterWidthContext.Consumer>
+          {(gutterWidth) => {
+            const theStyle = getStyle({
+              forceWidth: width,
+              width: {
+                xs,
+                sm,
+                md,
+                lg,
+                xl,
+                xxl,
+                xxxl,
+              },
+              offset,
+              pull,
+              push,
+              order,
+              debug,
+              screenClass,
+              gutterWidth,
+              gridColumns: getConfiguration().gridColumns,
+              moreStyle: style,
+            });
+            return createElement(component, {
+              ref,
+              style: theStyle,
+              ...otherProps,
+              children,
+            });
+          }}
+        </GutterWidthContext.Consumer>
+      )}
+    </ScreenClassResolver>
+  )
+);
 
 Col.propTypes = {
   /**
@@ -65,59 +75,35 @@ Col.propTypes = {
   /**
    * The width of the column for screenclass `xs`, either a number between 0 and 12, or "content"
    */
-  xs: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.oneOf(['content']),
-  ]),
+  xs: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["content"])]),
   /**
    * The width of the column for screenclass `sm`, either a number between 0 and 12, or "content"
    */
-  sm: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.oneOf(['content']),
-  ]),
+  sm: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["content"])]),
   /**
    * The width of the column for screenclass `md`, either a number between 0 and 12, or "content"
    */
-  md: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.oneOf(['content']),
-  ]),
+  md: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["content"])]),
   /**
    * The width of the column for screenclass `lg`, either a number between 0 and 12, or "content"
    */
-  lg: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.oneOf(['content']),
-  ]),
+  lg: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["content"])]),
   /**
    * The width of the column for screenclass `xl`, either a number between 0 and 12, or "content"
    */
-  xl: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.oneOf(['content']),
-  ]),
+  xl: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["content"])]),
   /**
    * The width of the column for screenclass `xxl`, either a number between 0 and 12, or "content"
    */
-  xxl: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.oneOf(['content']),
-  ]),
+  xxl: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["content"])]),
   /**
    * The width of the column for screenclass `xxl`, either a number between 0 and 12, or "content"
    */
-  xxxl: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.oneOf(['content']),
-  ]),
+  xxxl: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["content"])]),
   /**
    * A fixed width of the column for all screenclasses"
    */
-  width: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string,
-  ]),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * The offset of this column for all screenclasses
    */
@@ -169,7 +155,9 @@ Col.propTypes = {
   /**
    * Optional styling
    */
-  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+  style: PropTypes.objectOf(
+    PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  ),
   /**
    * Set to apply some debug styling
    */
@@ -180,25 +168,6 @@ Col.propTypes = {
   component: PropTypes.elementType,
 };
 
-Col.defaultProps = {
-  children: null,
-  xs: null,
-  sm: null,
-  md: null,
-  lg: null,
-  xl: null,
-  xxl: null,
-  xxxl: null,
-  width: null,
-  offset: {},
-  push: {},
-  pull: {},
-  style: {},
-  order: {},
-  debug: false,
-  component: Div,
-};
-
 Col.displayName = "Col";
 
 export default Col;