curls/dist/cjs/FlexGrid/styles.js

💪 Responsive, expressive UI primitives for React written with Style Hooks and Emotion

'use strict'

exports.__esModule = true
exports.__gridBreakpoints = exports.useBasis = void 0

var _core = require('@emotion/core')

var _trieMemoize = _interopRequireDefault(require('trie-memoize'))

var _utils = require('../utils')

var dT = _interopRequireWildcard(require('./defaultTheme'))

function _interopRequireWildcard(obj) {
  if (obj && obj.__esModule) {
    return obj
  } else {
    var newObj = {}
    if (obj != null) {
      for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
          var desc =
            Object.defineProperty && Object.getOwnPropertyDescriptor
              ? Object.getOwnPropertyDescriptor(obj, key)
              : {}
          if (desc.get || desc.set) {
            Object.defineProperty(newObj, key, desc)
          } else {
            newObj[key] = obj[key]
          }
        }
      }
    }
    newObj.default = obj
    return newObj
  }
}

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {default: obj}
}

const getColumnWidth = (0, _trieMemoize.default)(
  [WeakMap, Map, Map, Map],
  (theme, size, cols, useBasis) => {
    if (cols === false) return null
    const columns = (0, _utils.get)(theme.flexGrid, 'columns', dT),
      numColumns = isNaN(columns) === true ? columns[size] : columns,
      indexOfSlash = cols.indexOf('/'),
      x = parseInt(
        indexOfSlash > -1 ? cols.substring(0, indexOfSlash).trim() : cols
      )

    if (process.env.NODE_ENV !== 'production') {
      const numX = indexOfSlash > -1 && cols.substring(indexOfSlash + 1).trim()
      if (numX !== false && parseInt(numX) !== numColumns)
        throw new Error(
          `Column count for size '${size}' is ${numColumns}, not ${numX}`
        )
      if (x < 1 || x > numColumns)
        throw new Error(
          `Column count for size '${size}' must be between 1 and ${numColumns}`
        )
    }

    const width = `${(x / numColumns) * 100}%`
    return (
      /*#__PURE__*/
      (0, _core.css)(
        '@media ',
        theme.breakpoints[size],
        '{min-width:0;flex-grow:1;max-width:',
        width,
        ';',
        useBasis && `flex-basis: ${width}`,
        ';}'
      )
    )
  }
)

const useBasis = () => null

exports.useBasis = useBasis

const __gridBreakpoints = (v, t, p) => {
  let css = [],
    keys = Object.keys(v),
    i = 0

  for (; i < keys.length; i++) {
    const s = keys[i],
      cols = v[s] !== false ? String(v[s]) : v[s]
    if (cols === false) continue
    css.push(getColumnWidth(t, s, cols, p.useBasis !== false))
  }

  return css
}

exports.__gridBreakpoints = __gridBreakpoints