suomifi-ui-components/dist/esm/core/theme/utils/spacing.js

Suomi.fi UI component library

import { __rest, __assign, __spreadArray } from 'tslib';
import { defaultSuomifiTheme } from '../SuomifiTheme/SuomifiTheme.js';

var spaceVal = function spaceVal(theme) {
  return function (val) {
    if (val === '0') return '0';
    return !!val ? theme.spacing[val] : '';
  };
};
var spacingStyles = function spacingStyles(props) {
  if (!props) return;
  var array = Object.entries(props).map(function (_a) {
    var key = _a[0],
      value = _a[1];
    return getSpacingStyle(defaultSuomifiTheme, key, value);
  });
  return Object.assign.apply(Object, __spreadArray([{}], array, false));
};
var buildSpacingCSS = function buildSpacingCSS(spacing, important) {
  if (!spacing) return '';
  var cssStyles = Object.entries(spacing).map(function (_a) {
    var key = _a[0],
      value = _a[1];
    return getCSSSpacing(defaultSuomifiTheme, key, value, important);
  }).join('');
  return cssStyles;
};
var inlineStyle = {
  margin: 'margin',
  mt: 'marginTop',
  mr: 'marginRight',
  mb: 'marginBottom',
  ml: 'marginLeft',
  padding: 'padding',
  pt: 'paddingTop',
  pr: 'paddingRight',
  pb: 'paddingBottom',
  pl: 'paddingLeft'
};
var cssSelector = {
  margin: 'margin',
  mt: 'margin-top',
  mr: 'margin-right',
  mb: 'margin-bottom',
  ml: 'margin-left',
  padding: 'padding',
  pt: 'padding-top',
  pr: 'padding-right',
  pb: 'padding-bottom',
  pl: 'padding-left'
};
var getSpacingStyle = function getSpacingStyle(theme, key, value) {
  var _a;
  var amount = spaceVal(theme)(value);
  switch (key) {
    case 'mx':
      return {
        marginRight: "".concat(amount),
        marginLeft: "".concat(amount)
      };
    case 'my':
      return {
        marginTop: "".concat(amount),
        marginBottom: "".concat(amount)
      };
    case 'px':
      return {
        paddingRight: "".concat(amount),
        paddingLeft: "".concat(amount)
      };
    case 'py':
      return {
        paddingTop: "".concat(amount),
        paddingBottom: "".concat(amount)
      };
    case 'margin':
    case 'mt':
    case 'mr':
    case 'mb':
    case 'ml':
    case 'padding':
    case 'pt':
    case 'pr':
    case 'pb':
    case 'pl':
      return _a = {}, _a[inlineStyle[key]] = "".concat(amount), _a;
    default:
      return '';
  }
};
var getCSSSpacing = function getCSSSpacing(theme, key, value, important) {
  if (important === void 0) {
    important = false;
  }
  var amount = spaceVal(theme)(value);
  var importantValue = important ? '!important' : '';
  switch (key) {
    case 'mx':
      return "margin-right: ".concat(amount, " ").concat(importantValue, "; margin-left: ").concat(amount, " ").concat(importantValue, ";");
    case 'my':
      return "margin-top: ".concat(amount, " ").concat(importantValue, "; margin-bottom: ").concat(amount, " ").concat(importantValue, ";");
    case 'px':
      return "padding-right: ".concat(amount, " ").concat(importantValue, "; padding-left: ").concat(amount, " ").concat(importantValue, ";");
    case 'py':
      return "padding-top: ".concat(amount, " ").concat(importantValue, "; padding-bottom: ").concat(amount, " ").concat(importantValue, ";");
    default:
      return "".concat(cssSelector[key], ": ").concat(amount, " ").concat(importantValue, ";");
  }
};
var separateMarginProps = function separateMarginProps(props) {
  var margin = props.margin,
    my = props.my,
    mx = props.mx,
    mt = props.mt,
    mr = props.mr,
    mb = props.mb,
    ml = props.ml,
    otherProps = __rest(props, ["margin", "my", "mx", "mt", "mr", "mb", "ml"]);
  return [__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, margin !== undefined && {
    margin: margin
  }), my !== undefined && {
    my: my
  }), mx !== undefined && {
    mx: mx
  }), mt !== undefined && {
    mt: mt
  }), mr !== undefined && {
    mr: mr
  }), mb !== undefined && {
    mb: mb
  }), ml !== undefined && {
    ml: ml
  }), otherProps];
};
var separateMarginAndPaddingProps = function separateMarginAndPaddingProps(props) {
  var margin = props.margin,
    padding = props.padding,
    my = props.my,
    mx = props.mx,
    py = props.py,
    px = props.px,
    mt = props.mt,
    mr = props.mr,
    mb = props.mb,
    ml = props.ml,
    pt = props.pt,
    pr = props.pr,
    pb = props.pb,
    pl = props.pl,
    otherProps = __rest(props, ["margin", "padding", "my", "mx", "py", "px", "mt", "mr", "mb", "ml", "pt", "pr", "pb", "pl"]);
  return [__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, margin !== undefined && {
    margin: margin
  }), padding !== undefined && {
    padding: padding
  }), my !== undefined && {
    my: my
  }), mx !== undefined && {
    mx: mx
  }), py !== undefined && {
    py: py
  }), px !== undefined && {
    px: px
  }), mt !== undefined && {
    mt: mt
  }), mr !== undefined && {
    mr: mr
  }), mb !== undefined && {
    mb: mb
  }), ml !== undefined && {
    ml: ml
  }), pt !== undefined && {
    pt: pt
  }), pr !== undefined && {
    pr: pr
  }), pb !== undefined && {
    pb: pb
  }), pl !== undefined && {
    pl: pl
  }), otherProps];
};

export { buildSpacingCSS, separateMarginAndPaddingProps, separateMarginProps, spacingStyles };
//# sourceMappingURL=spacing.js.map