All files / src/utils useClassName.ts

100% Statements 10/10
82.35% Branches 14/17
100% Functions 2/2
100% Lines 9/9

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                                          27277x     27277x 27277x 136x   27209x     27277x     27277x           27277x 27277x    
import * as React from 'react';
import buildClassNames from 'classnames';
import _uniq from 'lodash/uniq';
 
import { ThemeContext } from '../styled';
 
export function useClassName({
  style,
  prevClassName,
  styleProps,
  themeKey,
  themeKeyOverride,
  themeKeySuffix
}: {
  style: any;
  prevClassName?: string;
  styleProps: any;
  themeKey?: string;
  themeKeyOverride?: string;
  themeKeySuffix?: string;
}) {
  const theme = React.useContext(ThemeContext);
 
  let className;
  let newThemeKey = `${themeKeyOverride || themeKey || ''}${themeKeySuffix ? `.${themeKeySuffix}` : ''}`;
  if (Array.isArray(style)) {
    className = style.map(style => style({ theme, ...styleProps, themeKey: newThemeKey }));
  } else {
    className = [style({ theme, ...styleProps, themeKey: newThemeKey })];
  }
 
  const originalThemeKey = themeKeyOverride
    ? `${themeKey || ''}${themeKeySuffix ? `.${themeKeySuffix}` : ''}`
    : undefined;
  const classNames = buildClassNames(
    ...className,
    prevClassName,
    newThemeKey ? `fp-${newThemeKey.replace(/\./g, '')}` : undefined,
    originalThemeKey ? `fp-${originalThemeKey.replace(/\./g, '')}` : undefined
  );
  const uniqueClassNames = _uniq(classNames.split(' ')).join(' ');
  return uniqueClassNames;
}