All files / src/Spinner styles.ts

100% Statements 23/23
100% Branches 12/12
100% Functions 7/7
100% Lines 18/18

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 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116      33x 33x   33x 33x   36x                     36x                       36x                     36x                             33x 35x 35x 35x 35x     33x 4x                                                                 4x     33x                   35x      
import { css, cssClass, keyframes } from '../styled';
import { palette, theme, tint } from '../utils';
 
export const defaultDashArrayValueMax = 325;
export const defaultDashOffset = 200;
 
export const progressDashArrayValue = 126;
export const progressDashOffset = 60;
 
export const SpinnerWrapper = styleProps => cssClass`
  line-height: 1rem;
  font-size: 20px;
 
  ${styleProps.size && getSizeProperties(styleProps)};
 
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;
 
export const Spinner = styleProps => cssClass`
  width: 1em;
  height: 1em;
  transform: rotate(-90deg);
 
  ${typeof styleProps.value === 'undefined' && getSpinnerAnimation(styleProps)};
 
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;
 
export const TrackCircle = styleProps => cssClass`
  stroke: ${palette(
    styleProps.trackColor || `${styleProps.color}100`,
    styleProps.trackColor || tint(0.9, styleProps.color)
  )(styleProps)};
 
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;
 
export const LoaderCircle = styleProps => cssClass`
  stroke-dasharray: ${typeof styleProps.value === 'number' ? progressDashArrayValue : getDashArrayValue(styleProps)};
  stroke-dashoffset: ${
    typeof styleProps.value === 'number'
      ? `${progressDashArrayValue - (styleProps.value / 100) * progressDashArrayValue}px`
      : `${defaultDashOffset}px`
  };
  stroke: ${palette(styleProps.color, styleProps.color)(styleProps)};
  transition: stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 
  & {
    ${theme(styleProps.themeKey, `css.root`)(styleProps)};
  }
`;
 
export const getDashArrayValue = styleProps => {
  const percentageString = styleProps.perimeter.split('%')[0];
  const percentage = parseFloat(percentageString);
  const scalar = percentage / 100;
  return defaultDashOffset + scalar * (defaultDashArrayValueMax - defaultDashOffset);
};
 
export const getSizeProperties = styleProps => {
  const sizeProperties = {
    small: css`
      & svg {
        font-size: 14px;
        border-width: 2px;
      }
 
      & {
        ${theme(styleProps.themeKey, `css.sizes.small`)(styleProps)};
      }
    `,
    default: css`
      & {
        ${theme(styleProps.themeKey, `css.sizes.default`)(styleProps)};
      }
    `,
    medium: css`
      & svg {
        font-size: 28px;
      }
      & {
        ${theme(styleProps.themeKey, `css.sizes.medium`)(styleProps)};
      }
    `,
    large: css`
      & svg {
        font-size: 36px;
      }
      & {
        ${theme(styleProps.themeKey, `css.sizes.large`)(styleProps)};
      }
    `
  };
  return sizeProperties[styleProps.size];
};
 
export const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
 
  to {
    transform: rotate(360deg);
  }
`;
 
export const getSpinnerAnimation = styleProps => css`
  animation: ${rotate} ${styleProps.duration} infinite linear;
`;