All files / util createMediaQueries.js

100% Statements 13/13
100% Branches 13/13
100% Functions 3/3
100% Lines 11/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25        15x 13x 13x 13x       1x 5x 5x 5x 5x 5x 5x              
import upperFirst from 'lodash/upperFirst';
import defaultBreakpoints from './breakpoints';
 
function createMediaQuery(min, max, key) {
  if ((min === null && max === null) || (min === 0 && max === null)) return null;
  let query = min ? `all and (min-width: ${min}px)` : 'all';
  if (max !== null) query = `${query} and (max-width: ${max}px)`;
  return { [key]: query };
}
 
export default (breakpoints = defaultBreakpoints) =>
  breakpoints.reduce((acc, breakpoint, index) => {
    const key = Object.keys(breakpoint).shift();
    const nextBreakPoint = breakpoints[index + 1];
    const upperKey = upperFirst(key);
    const min = breakpoint[key];
    const max = nextBreakPoint ? Object.values(nextBreakPoint).shift() - 1 : null;
    return {
      ...acc,
      ...createMediaQuery(min, max, key),
      ...createMediaQuery(null, max, `atLeast${upperKey}`),
      ...createMediaQuery(min, null, `atMost${upperKey}`),
    };
  }, {});