baseui/layout-grid/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledGridWrapper = exports.StyledGrid = exports.StyledCell = void 0;
var _styles = require("../styles");
var _responsiveHelpers = require("../helpers/responsive-helpers");
var _constants = require("./constants");
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

const StyledGridWrapper = exports.StyledGridWrapper = (0, _styles.styled)('div',
// @ts-ignore
({
  $theme,
  $behavior = _constants.BEHAVIOR.fixed,
  $gridMargins = $theme.grid.margins,
  $gridMaxWidth = $theme.grid.maxWidth,
  $gridUnit = $theme.grid.unit
}) => ({
  margin: 'auto',
  maxWidth: $behavior === _constants.BEHAVIOR.fixed ? `${$gridMaxWidth + 2 * getResponsiveNumber($gridMargins, Infinity) - 1}${$gridUnit}` : null
}));
StyledGridWrapper.displayName = "StyledGridWrapper";
StyledGridWrapper.displayName = 'StyledGridWrapper';
const StyledGrid = exports.StyledGrid = (0, _styles.styled)('div',
// @ts-ignore
({
  $theme,
  $align = null,
  $behavior = _constants.BEHAVIOR.fixed,
  $gridGutters = $theme.grid.gutters,
  $gridMargins = $theme.grid.margins,
  $gridMaxWidth = $theme.grid.maxWidth,
  $gridUnit = $theme.grid.unit
}) => {
  const mediaQueries = (0, _responsiveHelpers.getMediaQueries)($theme.breakpoints);
  const gridStyles = mediaQueries.reduce((acc, cur, idx) => {
    return {
      ...acc,
      [cur]: {
        paddingLeft: `${getResponsiveNumber($gridMargins, idx)}${$gridUnit}`,
        paddingRight: `${getResponsiveNumber($gridMargins, idx)}${$gridUnit}`,
        marginLeft: `-${getResponsiveNumber($gridGutters, idx) / 2}${$gridUnit}`,
        marginRight: `-${getResponsiveNumber($gridGutters, idx) / 2}${$gridUnit}`,
        alignItems: getResponsiveValue($align, idx)
      }
    };
  }, {
    paddingLeft: `${getResponsiveNumber($gridMargins, 0)}${$gridUnit}`,
    paddingRight: `${getResponsiveNumber($gridMargins, 0)}${$gridUnit}`,
    marginLeft: `-${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
    marginRight: `-${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
    alignItems: getResponsiveValue($align, 0)
  });
  return {
    boxSizing: 'border-box',
    display: 'flex',
    flexWrap: 'wrap',
    maxWidth: $behavior === _constants.BEHAVIOR.fixed ? `${$gridMaxWidth + 2 * getResponsiveNumber($gridMargins, Infinity) - 1}${$gridUnit}` : null,
    ...gridStyles
  };
});
StyledGrid.displayName = "StyledGrid";
StyledGrid.displayName = 'StyledGrid';
const StyledCell = exports.StyledCell = (0, _styles.styled)('div',
// @ts-ignore
({
  $theme,
  $align = null,
  $order = null,
  $gridColumns = $theme.grid.columns,
  $gridGaps = $theme.grid.gaps,
  $gridGutters = $theme.grid.gutters,
  $gridUnit = $theme.grid.unit,
  $skip = [0, 0, 0],
  $span = [1, 1, 1]
}) => {
  const mediaQueries = (0, _responsiveHelpers.getMediaQueries)($theme.breakpoints);
  const cellStyles = mediaQueries.reduce((acc, cur, idx) => {
    if (getResponsiveNumber($span, idx) === 0) {
      return {
        ...acc,
        [cur]: {
          width: '0',
          paddingLeft: '0',
          paddingRight: '0',
          marginLeft: '0',
          marginRight: '0',
          display: 'none'
        }
      };
    }
    return {
      ...acc,
      [cur]: {
        display: 'block',
        width: `calc(${100 / getResponsiveNumber($gridColumns, idx) * Math.min(getResponsiveNumber($span, idx), getResponsiveNumber($gridColumns, idx))}% - ${getResponsiveNumber($gridGutters, idx)}${$gridUnit})`,
        marginLeft: `calc(${100 / getResponsiveNumber($gridColumns, idx) * Math.min(getResponsiveNumber($skip, idx), getResponsiveNumber($gridColumns, idx) - 1)}% + ${getResponsiveNumber($gridGutters, idx) / 2}${$gridUnit})`,
        marginRight: `${getResponsiveNumber($gridGutters, idx) / 2}${$gridUnit}`,
        marginBottom: `${getResponsiveNumber($gridGaps, idx)}${$gridUnit}`,
        alignSelf: getResponsiveValue($align, idx),
        order: getResponsiveNumber($order, idx)
      }
    };
  }, {
    width: '100%',
    marginLeft: `${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
    marginRight: `${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
    marginBottom: `${getResponsiveNumber($gridGaps, 0)}${$gridUnit}`,
    alignSelf: getResponsiveValue($align, 0),
    order: getResponsiveNumber($order, 0)
  });
  return {
    boxSizing: 'border-box',
    ...cellStyles
  };
});
StyledCell.displayName = "StyledCell";
StyledCell.displayName = 'StyledCell';
function getResponsiveNumber(responsive, i) {
  const res = getResponsiveValue(responsive, i);
  return typeof res === 'number' ? res : 0;
}
function getResponsiveValue(responsive, i) {
  if (!responsive) {
    return null;
  }
  if (!Array.isArray(responsive)) {
    return responsive;
  }
  if (typeof responsive[i] === 'undefined') {
    return responsive[responsive.length - 1];
  }
  return responsive[i];
}