@spaced-out/ui-design-system/lib/components/LinearLoader/LinearLoader.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';

import {classify} from '../../utils/classify';

import css from './LinearLoader.module.css';


export type LinearLoaderProps = {
  value: number,
  size?: 'large' | 'medium' | 'small',
  className?: string,
  indeterminate?: boolean,
};

export const LinearLoader: React$AbstractComponent<
  LinearLoaderProps,
  HTMLDivElement,
> = React.forwardRef<LinearLoaderProps, HTMLDivElement>(
  (
    {value, size = 'medium', className, indeterminate}: LinearLoaderProps,
    ref,
  ): React.Node => (
    <div
      className={classify(
        css.lineContainer,
        {
          [css.large]: size === 'large',
          [css.medium]: size === 'medium',
          [css.small]: size === 'small',
        },
        className,
      )}
      ref={ref}
    >
      <div
        className={classify(css.progressBar, {
          [css.indeterminate]: indeterminate,
        })}
        style={{width: `${value + '%'}`}}
        role="progressbar"
        aria-valuenow={indeterminate ? undefined : value}
        aria-valuemin="0"
        aria-valuemax="100"
      ></div>
    </div>
  ),
);