2func-generateResponsiveProps.js

/**
 * Generate a valid structure for responsive configuration for a component
 * @param {object} props props received from the component
 * @param {array} baseProps list of props to be validated
 *
 * @returns a structured object with the props for each media query
 */
export const generateResponsiveProps = (props, baseProps) => {
  // from the breakpoints registered check which props exists
  const shapedPropsWithMq = Object.keys(BREAKPOINTS).reduce(
    (responsiveProps, mqName) => {
      const propsForMq = props[mqName];
      if (!propsForMq && typeof propsForMq !== 'object') return responsiveProps;

      // for the props that exists, prepare them with the correct shape
      const shapedProps = baseProps.reduce(
        (propList, prop) => ({
          ...propList,
          [prop]: propsForMq[prop],
        }),
        {}
      );

      return {
        ...responsiveProps,
        [mqName]: shapedProps,
      };
    },
    {}
  );

  return shapedPropsWithMq;
};