@greensight/gds/scss/cjs/useGenerateProperty-DHwkeN7J.js

Greensight Design System

var index = require('./index-DpARvNVo.js');
var React = require('react');

var BREAKPOINTS_NAMES = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs', 'xxxs'];
var MAJOR_STEP = 8;
var MINOR_MAX = 40;

var BREAKPOINT_INDICES = new Map();
BREAKPOINTS_NAMES.forEach(function (e, i) {
  return BREAKPOINT_INDICES.set(e, i);
});
var isObject = function isObject(item) {
  return index._typeof(item) === 'object' && !Array.isArray(item) && item !== null;
};
var setValue = function setValue(value, transform) {
  return transform ? transform(value) : value;
};

/**
 * 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 value = _ref.value,
    transform = _ref.transform;
  return React.useMemo(function () {
    if (!value) return;
    var isObj = isObject(value);
    if (!isObj) return {
      xxxl: setValue(value, transform)
    };
    return Object.keys(value).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 && BREAKPOINTS_NAMES[nameIndex];
      var rule = setValue(value[bp], transform);
      return index._objectSpread2(index._objectSpread2({}, acc), {}, index._defineProperty({}, nextBp || 'xxxl', rule));
    }, {});
  }, [value, transform]);
};

var mediaKeys = BREAKPOINTS_NAMES.slice(0, -1);
var useGenerateProperty = function useGenerateProperty(_ref) {
  var props = _ref.props,
    styles = _ref.styles,
    name = _ref.name;
  var mediaProperties = React.useMemo(function () {
    return BREAKPOINTS_NAMES.reduce(function (acc, key) {
      var temp = props.reduce(function (propAcc, p) {
        var _p$value;
        var value = (_p$value = p.value) === null || _p$value === void 0 ? void 0 : _p$value[key];
        if (value) {
          propAcc[p.name] = value;
        }
        return propAcc;
      }, {});
      if (Object.keys(temp).length) {
        acc[key] = temp;
      }
      return acc;
    }, {});
  }, [props]);
  var mediaStyles = React.useMemo(function () {
    return mediaKeys.reduce(function (acc, key) {
      // xxxl values are written in the basic style, they are there by default
      if (key === 'xxxl') return acc;
      var dataValue = mediaProperties[key];
      acc[styles["".concat(name, "__").concat(key)]] = !!dataValue;
      return acc;
    }, {});
  }, [mediaProperties, name, styles]);
  var vars = React.useMemo(function () {
    return Object.keys(mediaProperties).reduce(function (acc, breakpoint) {
      var properties = mediaProperties[breakpoint];
      Object.keys(properties).forEach(function (propertyName) {
        var propertyValue = properties[propertyName];
        var parsedValue = Number.isNaN(Number(propertyValue)) || typeof propertyValue === 'string' ? propertyValue : "".concat(propertyValue, "px");
        acc[breakpoint === 'xxxl' ? "--".concat(propertyName) : "--".concat(propertyName, "-").concat(breakpoint)] = "".concat(parsedValue);
      });
      return acc;
    }, {});
  }, [mediaProperties]);
  return {
    mediaStyles: mediaStyles,
    vars: vars
  };
};

exports.MAJOR_STEP = MAJOR_STEP;
exports.MINOR_MAX = MINOR_MAX;
exports.useCSSProperty = useCSSProperty;
exports.useGenerateProperty = useGenerateProperty;