fannypack-v5/es/utils/useStyle.js

An accessible, composable, and friendly React UI Kit

import { useMemo } from 'react';
import '../Provider/ThemeContext.js';
import 'classnames';
import 'emotion';
import { css } from '@emotion/core';
import 'emotion-theming';
import '@emotion/styled';
import { useTheme } from './useTheme.js';
import { _ as _objectSpread2, a as _taggedTemplateLiteralLoose } from '../chunk-0c448560.js';
import _kebabCase from 'lodash/kebabCase';
import 'tinycolor2';
import './isFunction.js';
import './get.js';
import { breakpoint, border, borderRadius, palette, space, font, fontSize, fontWeight } from './theme.js';
import './omit.js';
import './pick.js';
import { pickCSSProps, cssProps } from './cssProps.js';
import './useLocalStorage.js';
import '../Provider/ColorModeContext.js';
import { useColorMode } from './useColorMode.js';

function _templateObject7() {
  var data = _taggedTemplateLiteralLoose([""]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteralLoose(["\n        ", " ", ";\n      "]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteralLoose([""]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteralLoose(["\n              ", ": ", " !important;\n            "]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteralLoose(["\n          ", ";\n          ", ";\n        "]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n            ", "\n            ", ": ", " !important;\n          "]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n          ", ";\n\n          ", " {\n            ", ";\n          }\n        "]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var borderAttributes = ['border'];
var borderRadiusAttributes = ['borderRadius'];
var colorAttributes = ['color', 'backgroundColor', 'borderBlockEndColor', 'borderBlockStartColor', 'borderBottomColor', 'borderColor', 'borderInlineEndColor', 'borderInline-startColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'borderBottomColor', 'caretColor', 'columnRuleColor', 'outlineColor', 'textDecorationColor', 'textEmphasisColor'];
var spaceAttributes = ['margin', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'marginX', 'marginY', 'padding', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'paddingX', 'paddingY', 'top', 'left', 'bottom', 'right', 'grid-gap', 'grid-column-gap', 'grid-row-gap'];
var fontAttributes = ['font', 'fontFamily'];
var fontSizeAttributes = ['fontSize'];
var fontWeightAttributes = ['fontWeight'];
var attributeMaps = {
  font: ['fontFamily'],
  marginY: ['marginTop', 'marginBottom'],
  paddingY: ['paddingTop', 'paddingBottom'],
  marginX: ['marginLeft', 'marginRight'],
  paddingX: ['paddingLeft', 'paddingRight']
};

function getBorderValue(_ref) {
  var theme = _ref.theme,
      value = _ref.value;
  var borderValue = border(value)({
    theme: theme
  });

  if (borderValue) {
    return borderValue.width + " solid " + borderValue.color;
  }

  return value;
}

function getBorderRadiusValue(_ref2) {
  var theme = _ref2.theme,
      value = _ref2.value;
  var borderRadiusValue = borderRadius(value)({
    theme: theme
  });

  if (borderRadiusValue) {
    return borderRadiusValue;
  }

  return value;
}

function getColorValue(_ref3) {
  var colorMode = _ref3.colorMode,
      theme = _ref3.theme,
      value = _ref3.value;
  var color = palette(value)({
    colorMode: colorMode,
    theme: theme
  });

  if (color) {
    return color;
  }

  return value;
}

function getSpaceValue(_ref4) {
  var theme = _ref4.theme,
      value = _ref4.value;
  var spacing = space(value)({
    theme: theme
  });

  if (spacing) {
    return spacing + "rem";
  }

  return value;
}

function getFontValue(_ref5) {
  var theme = _ref5.theme,
      value = _ref5.value;
  var fontValue = font(value)({
    theme: theme
  });

  if (fontValue) {
    return fontValue;
  }

  return value;
}

function getFontSizeValue(_ref6) {
  var theme = _ref6.theme,
      value = _ref6.value;
  var size = fontSize(value)({
    theme: theme
  });

  if (size) {
    return size + "rem";
  }

  return value;
}

function getFontWeightValue(_ref7) {
  var theme = _ref7.theme,
      value = _ref7.value;
  var weight = fontWeight(value)({
    theme: theme
  });

  if (weight) {
    return weight;
  }

  return value;
}

function getStyleFromProps(props, theme, colorMode) {
  var style = _objectSpread2({}, props);

  if (style) {
    var styleEntries = Object.entries(style);
    styleEntries = styleEntries.reduce(function (prevStyle, _ref8) {
      var attribute = _ref8[0],
          value = _ref8[1];
      var entries = [[attribute, value]];

      if (attributeMaps[attribute]) {
        entries = attributeMaps[attribute].map(function (attribute) {
          return [attribute, value];
        });
      }

      return [].concat(prevStyle, entries);
    }, []);
    style = styleEntries.reduce(function (prevStyle, _ref9) {
      var attribute = _ref9[0],
          value = _ref9[1];
      var newValue = value;

      if (typeof newValue === 'string') {
        newValue = {
          default: value
        };
      }

      if (attribute.includes('_')) {
        var pseudoSelector = cssProps[attribute];
        return css(_templateObject(), prevStyle, pseudoSelector, getStyleFromProps(value, theme, colorMode));
      }

      var newStyle = Object.entries(newValue || {}).reduce(function (prevStyle, _ref10) {
        var bp = _ref10[0],
            value = _ref10[1];
        var newValue = value;

        if (borderAttributes.includes(attribute)) {
          newValue = getBorderValue({
            theme: theme,
            value: value
          });
        }

        if (borderRadiusAttributes.includes(attribute)) {
          newValue = getBorderRadiusValue({
            theme: theme,
            value: value
          });
        }

        if (colorAttributes.includes(attribute)) {
          newValue = getColorValue({
            colorMode: colorMode,
            theme: theme,
            value: value
          });
        }

        if (spaceAttributes.includes(attribute)) {
          newValue = getSpaceValue({
            theme: theme,
            value: value
          });
        }

        if (fontAttributes.includes(attribute)) {
          newValue = getFontValue({
            theme: theme,
            value: value
          });
        }

        if (fontSizeAttributes.includes(attribute)) {
          newValue = getFontSizeValue({
            theme: theme,
            value: value
          });
        }

        if (fontWeightAttributes.includes(attribute)) {
          newValue = getFontWeightValue({
            theme: theme,
            value: value
          });
        }

        if (bp === 'default') {
          // @ts-ignore
          return css(_templateObject2(), prevStyle, _kebabCase(attribute), newValue);
        }

        return css(_templateObject3(), prevStyle, breakpoint(bp, // @ts-ignore
        css(_templateObject4(), _kebabCase(attribute), newValue))({
          theme: theme
        }));
      }, css(_templateObject5()));
      return css(_templateObject6(), prevStyle, newStyle);
    }, css(_templateObject7()));
  }

  return style;
}

function useStyle(props) {
  var _useTheme = useTheme(),
      theme = _useTheme.theme;

  var _useColorMode = useColorMode(),
      globalColorMode = _useColorMode.colorMode;

  var cssProps = pickCSSProps(props);
  var colorMode = props.colorMode || globalColorMode;
  return useMemo(function () {
    return getStyleFromProps(cssProps, theme, colorMode);
  }, [theme, colorMode].concat(Object.values(cssProps))); // eslint-disable-line
}

export { useStyle };