# All files / utils/styledHelpers/utils resolvers.js

97.67% Statements 42/43
94.44% Branches 34/36
100% Functions 8/8
97.62% Lines 41/42

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90

    56x
    12931x
    12931x

    762x

    56x
    762x

    762x
    762x

    762x
    762x
    1x

    761x
    9x

    752x
    164x

    588x

    56x
    8252x
    8252x
    8252x

    8252x

    56x
    3659x
    3659x
    3659x

    56x
    23x

    23x
    2x

    21x
    21x

    56x
    227x

    227x
    8x

    219x
    219x

    56x
    2x
    2x
    2x

     /**
     * Grape UI Core style helpers.
     */

    import { getGlobalStyles, getGlobalOverrides } from 'src/global-styles';
    import { isKeyNestedProp, resolveToProperty } from 'src/utils/objectHelpers';
    import { defaultStylesBase } from '..';
    import { CSS_INHERIT_VALUE } from '../cssDefaults';

    /**
     *
     * @param {Object} globalOverrides Takes in global styles as an object. If the object has theme property, it will resolve to new global styled object with theme styles via getGlobalOverrides.
     * Othewise returns the global styles object as is. If undefined returns the default global style object via getGlobalStyles.
     */
    export const resolveGlobal = (globalOverrides = getGlobalStyles()) => {
      const theme = resolveToProperty('theme', globalOverrides);
      return theme ? getGlobalOverrides(globalOverrides) : globalOverrides;
    };

    export const getBorderRadiusForFormFieldType = (borderRadius, formStyle) => ((formStyle === 'filled')
      ? `${borderRadius} ${borderRadius} 0 0`
      : borderRadius);

    export const resolveBorderRadius = (props, globalOverrides, defaultBorderRadius = defaultStylesBase.borderRadius) => {
      Iif (!props) {
        return getBorderRadiusForFormFieldType(defaultBorderRadius);
      }

      // Grape UI lg or sm options
      const globalStyles = resolveGlobal(globalOverrides);
      const { border: borderSchema } = globalStyles;
      const {
        borderRadius,
        formStyle,
        lg,
        sm,
      } = props;
      if (borderRadius) {
        return getBorderRadiusForFormFieldType(borderRadius, formStyle);
      }
      if (lg) {
        return getBorderRadiusForFormFieldType(borderSchema.borderRadius.lg, formStyle);
      }
      if (sm) {
        return getBorderRadiusForFormFieldType(borderSchema.borderRadius.sm, formStyle);
      }
      return getBorderRadiusForFormFieldType(borderSchema.borderRadius.base, formStyle);
    };

    export const resolveColor = (colorToResolve, globalOverrides, defaultColor = defaultStylesBase.color) => {
      const globalStyles = resolveGlobal(globalOverrides);
      const { colors: colorSchema } = globalStyles;
      const resolvedValue = isKeyNestedProp(colorToResolve)
        ? resolveToProperty(colorToResolve, colorSchema)
        : resolveToProperty(`${colorToResolve}.base`, colorSchema);
      return resolvedValue || colorToResolve || defaultColor;
    };

    export const resolveFontFamily = (fontFamilyToResolve, globalOverrides, defaultValue) => {
      const globalStyles = resolveGlobal(globalOverrides);
      const { fontFamily: fontFamilySchema } = globalStyles;
      return resolveToProperty(fontFamilyToResolve, fontFamilySchema) || defaultValue;
    };

    export const resolveBoxShadow = (depth, globalOverrides) => {
      const { shadow: shadowSchema } = resolveGlobal(globalOverrides);

      if (!depth || typeof depth !== 'string') {
        return CSS_INHERIT_VALUE;
      }
      const resolvedBoxShadow = resolveToProperty(depth, shadowSchema);
      return resolvedBoxShadow || CSS_INHERIT_VALUE;
    };

    export const resolveZIndex = (depth, globalOverrides) => {
      const { zIndex: zIndexSchema } = resolveGlobal(globalOverrides);

      if (!depth || typeof depth !== 'string') {
        return CSS_INHERIT_VALUE;
      }
      const resolvedZIndex = resolveToProperty(depth, zIndexSchema);
      return resolvedZIndex || CSS_INHERIT_VALUE;
    };

    export const resolveElevation = (depth, globalOverrides) => {
      const resolvedBoxShadow = resolveBoxShadow(depth, globalOverrides);
      const resolvedZIndex = resolveZIndex(depth, globalOverrides);
      return `z-index: ${resolvedZIndex}; box-shadow: ${resolvedBoxShadow}` || CSS_INHERIT_VALUE;
    };