chore: refactor ResponsiveProvider

Author: stephan-noel

.eslintrc.json

@@ -10,6 +10,7 @@
         "eslint:recommended",
         "plugin:prettier/recommended",
         "plugin:react/recommended",
+        "plugin:react-hooks/recommended",
         "prettier/react"
     ],
     "parser": "babel-eslint",

package.json

@@ -70,6 +70,7 @@
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^4.0.8",
     "eslint-plugin-sort-imports-es6-autofix": "^0.5.0",
     "husky": "^2.4.0",
     "jest": "^24.8.0",

src/ResponsiveProvider.js

@@ -0,0 +1,104 @@
+import { getBreakpoints, getMediaqueries, getQueriesObjects } from '../utils';
+import PropTypes from 'prop-types';
+import React, { useMemo, useRef } from 'react';
+import ResponsiveContext from '../ResponsiveContext';
+import useDebugResponsive from './useDebugResponsive';
+import useMediaType from './useMediaType';
+import useOrientation from './useOrientation';
+
+const ResponsiveProvider = ({
+    initialMediaType,
+    defaultOrientation,
+    children,
+    breakpoints,
+    breakpointsMax,
+    mediaQueries,
+}) => {
+    const breakpointsWithInitialValue = {
+        _initial: '0em',
+        ...breakpoints,
+    };
+
+    const breakpointNames = Object.keys(
+        mediaQueries || breakpointsWithInitialValue
+    );
+
+    if (!mediaQueries) {
+        mediaQueries = getMediaqueries(
+            breakpointsWithInitialValue,
+            breakpointsMax,
+            breakpointNames
+        );
+    }
+
+    const breakpointsRef = useRef(
+        getBreakpoints(mediaQueries, breakpointNames)
+    );
+
+    const { currentMediaType, isCalculated } = useMediaType(
+        breakpointsRef,
+        initialMediaType
+    );
+
+    const queriesObjects = useMemo(
+        () => getQueriesObjects(currentMediaType, breakpointsRef.current),
+        [currentMediaType, breakpointsRef]
+    );
+
+    const currentOrientation = useOrientation(defaultOrientation);
+
+    const contextObject = useMemo(
+        () => ({
+            mediaType: currentMediaType,
+            orientation: currentOrientation,
+            isCalculated,
+            ...queriesObjects,
+        }),
+        [currentMediaType, currentOrientation, isCalculated, queriesObjects]
+    );
+
+    useDebugResponsive(contextObject, currentMediaType);
+
+    return (
+        <ResponsiveContext.Provider value={contextObject}>
+            {children}
+        </ResponsiveContext.Provider>
+    );
+};
+
+const breakpointsPropTypes = {
+    xs: PropTypes.string,
+    sm: PropTypes.string,
+    md: PropTypes.string,
+    lg: PropTypes.string,
+    xl: PropTypes.string,
+};
+
+ResponsiveProvider.defaultProps = {
+    initialMediaType: 'xs',
+    defaultOrientation: null,
+};
+
+ResponsiveProvider.propTypes = {
+    initialMediaType: PropTypes.oneOf([
+        '_initial',
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'xl',
+    ]),
+    defaultOrientation: PropTypes.oneOf(['landscape', 'portrait']),
+    children: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.node),
+        PropTypes.node,
+    ]).isRequired,
+    breakpoints: PropTypes.exact(breakpointsPropTypes),
+    breakpointsMax: PropTypes.exact(breakpointsPropTypes),
+    mediaQueries: PropTypes.exact({
+        ...breakpointsPropTypes,
+        _initial: PropTypes.string,
+    }),
+};
+
+export default ResponsiveProvider;

src/ResponsiveProvider/index.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+const useDebugResponsive = (contextObject, currentMediaType) => {
+    useEffect(() => {
+        if (process && process.env && process.env.NODE_ENV === 'development') {
+            /* eslint-disable no-console */
+            console.group(
+                '%c @farfetch/react-context-responsive updated!',
+                'color:#c4aa84; font-weight:bold;'
+            );
+            console.log(
+                '%c Current media type:',
+                'font-weight:bold;',
+                currentMediaType
+            );
+            console.log('%c Context:', 'font-weight:bold;', contextObject);
+            console.groupEnd();
+            /* eslint-enable no-console */
+        }
+    }, [contextObject, currentMediaType]);
+};
+
+export default useDebugResponsive;

src/ResponsiveProvider/useDebugResponsive.js

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+
+const useMediaType = (breakpointsRef, initialMediaType) => {
+    const [isCalculated, setIsCalculated] = useState(false);
+    const [currentMediaType, setCurrentMediaType] = useState(initialMediaType);
+
+    useEffect(() => {
+        const breakpoints = breakpointsRef.current;
+        const localMediaQueries = breakpoints.map(
+            (breakpoint) => breakpoint.mediaQuery
+        );
+        const mediaQueryListsAndListeners = localMediaQueries.map(
+            (mediaQuery, index) => {
+                const mediaQueryList = window.matchMedia(mediaQuery);
+
+                if (mediaQueryList.matches) {
+                    setCurrentMediaType(breakpoints[index].mediaType);
+                    setIsCalculated(true);
+                }
+
+                const listener = (event) => {
+                    event.matches &&
+                        setCurrentMediaType(breakpoints[index].mediaType);
+                };
+
+                mediaQueryList.addListener(listener);
+
+                return [mediaQueryList, listener];
+            }
+        );
+
+        return () => {
+            mediaQueryListsAndListeners.forEach(
+                ([mediaQueryList, listener]) => {
+                    mediaQueryList.removeListener(listener);
+                }
+            );
+        };
+    }, [breakpointsRef]);
+
+    return { isCalculated, currentMediaType };
+};
+
+export default useMediaType;