curls/dist/cjs/useBreakpointValueParser.js

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

'use strict'

exports.__esModule = true
exports.default = void 0

var _react = require('react')

var _core = require('@style-hooks/core')

var _utils = require('./utils')

var _Breakpoint = require('./Breakpoint')

const splitWs = /(?!\[.*)\s+(?![^[]*?\])/g,
  replaceWs = /^\s+|\s+$|\s+(?=\s)/g

function _ref(acc, next) {
  if (next.breakpoint !== null) {
    acc[next.breakpoint] = true
  }

  return acc
}

const useBreakpointValueParser = propValue => {
  if (typeof propValue !== 'string') return null
  const theme = (0, _core.useTheme)(),
    breakpoints = (0, _react.useMemo)(() => {
      let nextBreakpoints = [],
        values = propValue.replace(replaceWs, '').split(splitWs),
        i = 0

      for (; i < values.length; i++) {
        const value = values[i],
          index = value.indexOf(theme.breakpointsDelimiter)

        if (index > -1) {
          const bp = value.substring(index + 1)
          nextBreakpoints.push({
            breakpoint: bp,
            value: value.substring(0, index),
          })
        } else {
          nextBreakpoints.push({
            breakpoint: null,
            value,
            matches: true,
          })
        }
      }

      return nextBreakpoints
    }, [propValue]),
    {matches} = (0, _Breakpoint.useBreakpoint)(breakpoints.reduce(_ref, {}))
  return (0, _react.useMemo)(() => {
    let nextMatches = [],
      i = 0

    for (; i < breakpoints.length; i++) {
      if (breakpoints[i].breakpoint === null) {
        breakpoints[i].matches = true
        nextMatches.push(breakpoints[i])
      } else {
        breakpoints[i].matches = matches[breakpoints[i].breakpoint]
        nextMatches.push(breakpoints[i])
      }
    } // makes sure the breakpoint matches are provided in order

    const order = (0, _utils.getBreakpointOrder)(theme.breakpoints)
    nextMatches.sort(
      (a, b) => order.indexOf(a.breakpoint) - order.indexOf(b.breakpoint)
    )
    return nextMatches
  }, [matches, breakpoints, theme.breakpoints])
}

var _default = useBreakpointValueParser
exports.default = _default