@greensight/gds/emotion/cjs/useCSSProperty-SItmMrFd.js

Greensight Design System

var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-mkWCC7yp.js');
var React = require('react');
var baseTheme = require('./baseTheme.js');
var useTheme = require('./useTheme.js');
var scale = require('./scale-D3jiQp7F.js');

/**
 * Strict check on object type.
 */
var isObject = function isObject(item) {
  return _rollupPluginBabelHelpers._typeof(item) === 'object' && !Array.isArray(item) && item !== null;
};

var BREAKPOINT_INDICES = new Map();
scale.BREAKPOINTS_NAMES.forEach(function (e, i) {
  return BREAKPOINT_INDICES.set(e, i);
});

/**
 * Calculate CSS Object from component props with `AllowMedia` type (user can pass object with breakpoints through prop). CSS property can be calculated based on multiple props.
 */
var useCSSProperty = function useCSSProperty(_ref) {
  var name = _ref.name,
    props = _ref.props,
    condition = _ref.condition,
    transform = _ref.transform;
  var _useTheme = useTheme.useTheme(),
    layout = _useTheme.layout;
  var layoutTheme = layout || baseTheme.baseTheme.layout;
  var breakpoints = layoutTheme.breakpoints;
  return React.useMemo(function () {
    if (condition !== undefined && !condition) return;
    var propsValues = Object.values(props);
    var isUndefined = propsValues.every(function (value) {
      return value === undefined;
    });
    if (isUndefined) return;
    var mediaProp = propsValues.find(function (value) {
      return isObject(value);
    });
    if (!mediaProp) return setValue(name, props, transform);
    return Object.keys(mediaProp).sort(function (a, b) {
      return BREAKPOINT_INDICES.get(a) - BREAKPOINT_INDICES.get(b);
    }).reduce(function (acc, bp) {
      var nameIndex = BREAKPOINT_INDICES.get(bp);
      var nextBp = nameIndex !== -1 && scale.BREAKPOINTS_NAMES[nameIndex - 1];
      var breakpointProps = {};
      for (var key in props) {
        var value = props[key];
        breakpointProps[key] = !isObject(value) ? value : value[bp];
      }
      var rule = setValue(name, breakpointProps, transform);
      return _rollupPluginBabelHelpers._objectSpread2(_rollupPluginBabelHelpers._objectSpread2({}, acc), nextBp ? _rollupPluginBabelHelpers._defineProperty({}, "@media (max-width: ".concat(breakpoints[nextBp] - 1, "px)"), rule) : rule);
    }, {});
  }, [breakpoints, condition, name, props, transform]);
};
var setValue = function setValue(name, props, transform) {
  return _rollupPluginBabelHelpers._defineProperty({}, name, transform ? transform(props) : Object.values(props)[0]);
};

exports.useCSSProperty = useCSSProperty;