curls/dist/es/FlexGrid/FlexGrid.js

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

function _extends() {
  _extends =
    Object.assign ||
    function(target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i]
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key]
          }
        }
      }
      return target
    }
  return _extends.apply(this, arguments)
}

import {useStyles, useTheme} from '@style-hooks/core'
import createComponent from '../createComponent'
import {useBox} from '../Box/Box'
import {getBreakpointOrder} from '../utils'
import * as styles from './styles'
export const useFlexGrid = props => {
    let theme = useTheme(),
      found = false,
      nextProps = _extends(
        {},
        {
          __gridBreakpoints: {},
        }
      ),
      breakpointOrder = getBreakpointOrder(theme.breakpoints),
      i = 0

    for (; i < breakpointOrder.length; i++) {
      const bp = breakpointOrder[i]

      if (props[bp] !== void 0) {
        nextProps.__gridBreakpoints[bp] = props[bp]
        found = true
      }
    }

    if (found === false) return props
    const propKeys = Object.keys(props)

    for (i = 0; i < propKeys.length; i++) {
      const key = propKeys[i]
      if (nextProps.__gridBreakpoints[key] === void 0)
        nextProps[key] = props[key]
    }

    return useStyles('flexGrid', styles, nextProps)
  },
  FlexGrid = createComponent('div', props => useBox(useFlexGrid(props)))

if (process.env.NODE_ENV !== 'production') {
  const propTypes = require('../Box/propTypes').default,
    flexPropTypes = require('../Flex/propTypes').default

  FlexGrid.displayName = 'FlexGrid'
  FlexGrid.propTypes = _extends({}, flexPropTypes, propTypes)
}