react-grid/dist/index.esm.js

react grid component

import _extends from '@babel/runtime/helpers/extends';
import _css from '@emotion/css';
import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
import { jsx } from '@emotion/core';

var styles = {
  breakpoints: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200
  },
  containerMaxWidths: {
    sm: 540,
    md: 720,
    lg: 960,
    xl: 1140
  },
  columns: 12,
  gutterWidth: 30
};

var breakpointNext = function breakpointNext(name, breakpoints) {
  if (breakpoints === void 0) {
    breakpoints = styles.breakpoints;
  }

  var breakpointNames = Object.keys(breakpoints).sort(function (a, b) {
    return breakpoints[a] - breakpoints[b];
  });
  var n = breakpointNames.indexOf(name);

  if (n < 0) {
    return new Error("breakpoint " + name + " not found in " + breakpointNames);
  }

  return n < breakpointNames.length - 1 ? breakpointNames[n + 1] : null;
};
var breakpointMin = function breakpointMin(name, breakpoints) {
  if (breakpoints === void 0) {
    breakpoints = styles.breakpoints;
  }

  var min = breakpoints[name];
  return min !== 0 ? min : null;
};
var breakpointMax = function breakpointMax(name, breakpoints) {
  if (breakpoints === void 0) {
    breakpoints = styles.breakpoints;
  }

  var next = breakpointNext(name, breakpoints);

  if (next) {
    return breakpointMin(next, breakpoints) - 0.02;
  }

  return null;
};
var mediaBreakpointUp = function mediaBreakpointUp(name, breakpoints) {
  if (breakpoints === void 0) {
    breakpoints = styles.breakpoints;
  }

  var min = breakpointMin(name, breakpoints);

  if (min) {
    return "@media(min-width: " + min + "px)";
  }

  return '';
};
var mediaBreakpointDown = function mediaBreakpointDown(name, breakpoints) {
  if (breakpoints === void 0) {
    breakpoints = styles.breakpoints;
  }

  var max = breakpointMax(name, breakpoints);

  if (max) {
    return "@media(max-width: " + max + "px)";
  }

  return '';
};
var mediaBreakpointBetween = function mediaBreakpointBetween(lower, upper, breakpoints) {
  if (breakpoints === void 0) {
    breakpoints = styles.breakpoints;
  }

  var min = breakpointMin(lower, breakpoints);
  var max = breakpointMax(upper, breakpoints);

  if (min != null && max != null) {
    return "@media (min-width: " + min + "px) and (max-width: " + max + "px)";
  } else if (max == null) {
    return mediaBreakpointUp(lower, breakpoints);
  } else if (min == null) {
    return mediaBreakpointDown(upper, breakpoints);
  }
};
var mediaBreakpointOnly = function mediaBreakpointOnly(name, breakpoints) {
  if (breakpoints === void 0) {
    breakpoints = styles.breakpoints;
  }

  var min = breakpointMin(name, breakpoints);
  var max = breakpointMax(name, breakpoints);

  if (min != null && max != null) {
    return "@media (min-width: " + min + "px) and (max-width: " + max + "px)";
  } else if (max == null) {
    return mediaBreakpointUp(name, breakpoints);
  } else if (min == null) {
    return mediaBreakpointDown(name, breakpoints);
  }
};

var makeContainer = function makeContainer(_ref) {
  var gutterWidth = _ref.gutterWidth;
  return {
    boxSizing: 'border-box',
    width: '100%',
    paddingRight: gutterWidth / 2,
    paddingLeft: gutterWidth / 2,
    marginRight: 'auto',
    marginLeft: 'auto'
  };
};
var makeContainerMaxWidths = function makeContainerMaxWidths(_ref2) {
  var maxWidths = _ref2.containerMaxWidths,
      breakpoints = _ref2.breakpoints;
  var styles = {};
  Object.keys(maxWidths).forEach(function (breakpoint) {
    var maxWidth = maxWidths[breakpoint];
    var media = mediaBreakpointUp(breakpoint, breakpoints);
    var mediaStyles = {
      maxWidth: maxWidth
    };

    if (media) {
      var _Object$assign;

      Object.assign(styles, (_Object$assign = {}, _Object$assign[media] = mediaStyles, _Object$assign));
    } else {
      Object.assign(styles, mediaStyles);
    }
  });
  return styles;
};

var Container = function Container(_ref3) {
  var children = _ref3.children,
      styles = _ref3.styles,
      fluid = _ref3.fluid,
      props = _objectWithoutPropertiesLoose(_ref3, ["children", "styles", "fluid"]);

  return jsx("div", _extends({}, props, {
    "data-eg-container": "true",
    css:
    /*#__PURE__*/
    _css([makeContainer(styles), !fluid && makeContainerMaxWidths(styles)])
  }), children);
};

Container.defaultProps = {
  styles: styles,
  fluid: false
};

var makeRow = function makeRow(_ref) {
  var gutterWidth = _ref.gutterWidth;
  return {
    boxSizing: 'border-box',
    display: 'flex',
    flexWrap: 'wrap',
    marginRight: gutterWidth / -2,
    marginLeft: gutterWidth / -2
  };
};

var Row = function Row(_ref2) {
  var styles = _ref2.styles,
      noGutters = _ref2.noGutters,
      children = _ref2.children,
      props = _objectWithoutPropertiesLoose(_ref2, ["styles", "noGutters", "children"]);

  return jsx("div", _extends({}, props, {
    "data-eg-row": "true",
    css:
    /*#__PURE__*/
    _css([makeRow(styles), noGutters && rowStyles.noGutters])
  }), children);
};

Row.defaultProps = {
  styles: styles,
  noGutters: false
};
var rowStyles = {
  noGutters: {
    marginRight: 0,
    marginLeft: 0,
    '& > [data-eg-col]': {
      paddingRight: 0,
      paddingLeft: 0
    }
  }
};

var percentage = function percentage(x) {
  return (x * 100).toFixed(6) + "%";
};
var makeCol = function makeCol(_ref, options) {
  var gutterWidth = _ref.gutterWidth,
      columns = _ref.columns,
      breakpoints = _ref.breakpoints;

  if (options === void 0) {
    options = {};
  }

  var styles = {
    boxSizing: 'border-box',
    position: 'relative',
    width: '100%',
    paddingRight: gutterWidth / 2,
    paddingLeft: gutterWidth / 2
  };
  Object.keys(breakpoints).forEach(function (breakpoint) {
    var value = options[breakpoint];
    var media = mediaBreakpointUp(breakpoint, breakpoints);

    if (value === true) {
      var mediaStyles = {
        flexBasis: 0,
        flexGrow: 1,
        maxWidth: '100%'
      };

      if (media) {
        var _Object$assign;

        Object.assign(styles, (_Object$assign = {}, _Object$assign[media] = mediaStyles, _Object$assign));
      } else {
        Object.assign(styles, mediaStyles);
      }
    } else if (value === 'auto') {
      var _mediaStyles = {
        flex: '0 0 auto',
        width: 'auto',
        maxWidth: '100%'
      };

      if (media) {
        var _Object$assign2;

        Object.assign(styles, (_Object$assign2 = {}, _Object$assign2[media] = _mediaStyles, _Object$assign2));
      } else {
        Object.assign(styles, _mediaStyles);
      }
    } else if (value !== false && value > 0) {
      var _mediaStyles2 = {
        flex: "0 0 " + percentage(value / columns),
        maxWidth: percentage(value / columns)
      };

      if (media) {
        var _Object$assign3;

        Object.assign(styles, (_Object$assign3 = {}, _Object$assign3[media] = _mediaStyles2, _Object$assign3));
      } else {
        Object.assign(styles, _mediaStyles2);
      }
    }
  });
  return styles;
};
var makeColOffset = function makeColOffset(_ref2, offset) {
  var breakpoints = _ref2.breakpoints,
      columns = _ref2.columns;
  var styles = {};
  Object.keys(offset).forEach(function (name) {
    var size = offset[name];
    var media = mediaBreakpointUp(name, breakpoints);
    var mediaStyles = {
      marginLeft: percentage(size / columns)
    };

    if (media) {
      var _Object$assign4;

      Object.assign(styles, (_Object$assign4 = {}, _Object$assign4[media] = mediaStyles, _Object$assign4));
    } else {
      Object.assign(styles, mediaStyles);
    }
  });
  return styles;
};
var makeColOrder = function makeColOrder(_ref3, order) {
  var breakpoints = _ref3.breakpoints,
      columns = _ref3.columns;
  var styles = {};
  Object.keys(order).forEach(function (name) {
    var size = order[name];
    var media = mediaBreakpointUp(name, breakpoints);
    var mediaStyles = {
      order: size === 'first' ? -1 : size === 'last' ? columns + 1 : size
    };

    if (media) {
      var _Object$assign5;

      Object.assign(styles, (_Object$assign5 = {}, _Object$assign5[media] = mediaStyles, _Object$assign5));
    } else {
      Object.assign(styles, mediaStyles);
    }
  });
  return styles;
};

var Col = function Col(_ref4) {
  var styles = _ref4.styles,
      xs = _ref4.xs,
      sm = _ref4.sm,
      md = _ref4.md,
      lg = _ref4.lg,
      xl = _ref4.xl,
      auto = _ref4.auto,
      offset = _ref4.offset,
      order = _ref4.order,
      children = _ref4.children,
      props = _objectWithoutPropertiesLoose(_ref4, ["styles", "xs", "sm", "md", "lg", "xl", "auto", "offset", "order", "children"]);

  if (xs === false && sm === false && md === false && lg === false && xl === false) {
    xs = true;
  }

  return jsx("div", _extends({}, props, {
    "data-eg-col": "true",
    css:
    /*#__PURE__*/
    _css([makeCol(styles, {
      xs: xs,
      sm: sm,
      md: md,
      lg: lg,
      xl: xl,
      auto: auto
    }), offset && makeColOffset(styles, offset), order && makeColOrder(styles, order)])
  }), children);
};

Col.defaultProps = {
  styles: styles,
  auto: false,
  xs: false,
  sm: false,
  md: false,
  lg: false,
  xl: false
};

export { Col, Container, Row, breakpointMax, breakpointMin, breakpointNext, mediaBreakpointBetween, mediaBreakpointDown, mediaBreakpointOnly, mediaBreakpointUp };