# All files / src/helpers responsiveUtils.js

0% Statements 0/31
0% Branches 0/12
0% Functions 0/6
0% Lines 0/25

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
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110

     // @flow

    import {cloneLayout, compact, correctBounds} from './utils';

    import type {Layout} from './utils';
    export type ResponsiveLayout = {lg?: Layout, md?: Layout, sm?: Layout, xs?: Layout, xxs?: Layout};
    type Breakpoint = string;
    type Breakpoints = {lg?: number, md?: number, sm?: number, xs?: number, xxs?: number};

    /**
     * Given a width, find the highest breakpoint that matches is valid for it (width > breakpoint).
     *
     * @param  {Object} breakpoints Breakpoints object (e.g. {lg: 1200, md: 960, ...})
     * @param  {Number} width Screen width.
     * @return {String}       Highest breakpoint that is less than width.
     */
    export function getBreakpointFromWidth(breakpoints: Breakpoints, width: number): Breakpoint {
      const sorted = sortBreakpoints(breakpoints);
      let matching = sorted[0];
      for (let i = 1, len = sorted.length; i < len; i++) {
        const breakpointName = sorted[i];
        if (width > breakpoints[breakpointName]) matching = breakpointName;
      }
      return matching;
    }

    /**
     * Given a breakpoint, get the # of cols set for it.
     * @param  {String} breakpoint Breakpoint name.
     * @param  {Object} cols       Map of breakpoints to cols.
     * @return {Number}            Number of cols.
     */
    export function getColsFromBreakpoint(breakpoint: Breakpoint, cols: Breakpoints): number {
      if (!cols[breakpoint]) {
        throw new Error("ResponsiveGridLayout: `cols` entry for breakpoint " + breakpoint + " is missing!");
      }
      return cols[breakpoint];
    }

    /**
     * Given existing layouts and a new breakpoint, find or generate a new layout.
     *
     * This finds the layout above the new one and generates from it, if it exists.
     *
     * @param  {Array} orgLayout     Original layout.
     * @param  {Object} layouts     Existing layouts.
     * @param  {Array} breakpoints All breakpoints.
     * @param  {String} breakpoint New breakpoint.
     * @param  {String} breakpoint Last breakpoint (for fallback).
     * @param  {Number} cols       Column count at new breakpoint.
     * @param  {Boolean} verticalCompact Whether or not to compact the layout
     *   vertically.
     * @return {Array}             New layout.
     */
    export function findOrGenerateResponsiveLayout(orgLayout: Layout, layouts: ResponsiveLayout, breakpoints: Breakpoints,
                                                   breakpoint: Breakpoint, lastBreakpoint: Breakpoint,
                                                   cols: number, verticalCompact: boolean): Layout {
      // If it already exists, just return it.
      if (layouts[breakpoint]) return cloneLayout(layouts[breakpoint]);
      // Find or generate the next layout
      let layout = orgLayout;

      const breakpointsSorted = sortBreakpoints(breakpoints);
      const breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint));
      for (let i = 0, len = breakpointsAbove.length; i < len; i++) {
        const b = breakpointsAbove[i];
        if (layouts[b]) {
          layout = layouts[b];
          break;
        }
      }
      layout = cloneLayout(layout || []); // clone layout so we don't modify existing items
      return compact(correctBounds(layout, {cols: cols}), verticalCompact);
    }

    export function generateResponsiveLayout(layout: Layout, breakpoints: Breakpoints,
                                                   breakpoint: Breakpoint, lastBreakpoint: Breakpoint,
                                                   cols: number, verticalCompact: boolean): Layout {
      // If it already exists, just return it.
      /*if (layouts[breakpoint]) return cloneLayout(layouts[breakpoint]);
      // Find or generate the next layout
      let layout = layouts[lastBreakpoint];*/
        /*const breakpointsSorted = sortBreakpoints(breakpoints);
      const breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint));
      for (let i = 0, len = breakpointsAbove.length; i < len; i++) {
        const b = breakpointsAbove[i];
        if (layouts[b]) {
          layout = layouts[b];
          break;
        }
      }*/
      layout = cloneLayout(layout || []); // clone layout so we don't modify existing items
      return compact(correctBounds(layout, {cols: cols}), verticalCompact);
    }

    /**
     * Given breakpoints, return an array of breakpoints sorted by width. This is usually
     * e.g. ['xxs', 'xs', 'sm', ...]
     *
     * @param  {Object} breakpoints Key/value pair of breakpoint names to widths.
     * @return {Array}              Sorted breakpoints.
     */
    export function sortBreakpoints(breakpoints: Breakpoints): Array<Breakpoint> {
      const keys: Array<string> = Object.keys(breakpoints);
      return keys.sort(function(a, b) {
        return breakpoints[a] - breakpoints[b];
      });
    }