fannypack-v5/src/Spinner/styles.ts

An accessible, composable, and friendly React UI Kit

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)
  )(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;
`;