All files / elements/Progress styled.js

100% Statements 17/17
100% Branches 4/4
100% Functions 4/4
100% Lines 15/15

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 117 118 119 120 121 122 123 124 125 126              1219x 1219x   17x       1219x 1219x 1x   1218x 1216x   2x                     17x               17x         17x 1219x                     17x                                                                                         17x                                              
import React from 'react';
import PropTypes from 'prop-types';
import { Paragraph } from 'src/elements/typography';
import { Hideable } from 'src/elements/utils';
import { CircularProgress } from './CircleProgress';
import { LinearProgress } from './LinearProgress';
 
const showCircular = props => props.progressType === 'circular';
const showLinear = props => props.progressType === 'linear';
 
const getCaption = props => {
  const {
    caption,
    captionProps,
  } = props;
  if (React.isValidElement(caption)) {
    return caption;
  }
  if (caption === undefined) {
    return null;
  }
  return (
    <Paragraph
      isHidden={!caption}
      sm
      {...captionProps}
    >
      {caption}
    </Paragraph>
  );
};
 
getCaption.propTypes = {
  caption: PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.string,
  ]),
  captionProps: PropTypes.object,
};
 
getCaption.defaultProps = {
  caption: '',
  captionProps: {},
};
 
export const Progress = props => (
  <>
    <Hideable isHidden={!showCircular(props)}>
      <CircularProgress {...props} />
    </Hideable>
    <Hideable isHidden={!showLinear(props)}>
      <LinearProgress {...props} />
    </Hideable>
    {getCaption(props)}
  </>
);
 
Progress.propTypes = {
  /** Styled system prop for defining animation */
  animation: PropTypes.any,
  /** Styled system prop for defining animation-delay */
  animationDelay: PropTypes.any,
  /** Styled system prop for defining animation-direction */
  animationDirection: PropTypes.any,
  /** Styled system prop for defining animation-duration */
  animationDuration: PropTypes.any,
  /** Styled system prop for defining animation-fill-mode */
  animationFillMode: PropTypes.any,
  /** Styled system prop for defining animation-iteration-count. When blank, it will determine if its value based off the `loop` property. */
  animationIterationCount: PropTypes.any,
  /** Prop for defining custom animation name.  Does NOT follow styled system's responsive breakpoints. */
  animationName: PropTypes.any,
  /** Styled system prop for defining animation-play-state */
  animationPlayState: PropTypes.any,
  /** Styled system prop for defining animation-timing-function */
  animationTimingFunction: PropTypes.any,
  /** Shorthand for setting the track to transparent */
  hideTrack: PropTypes.bool,
  /** Defines the background color for the indicator. */
  indicatorColor: PropTypes.string,
  /** Passes props to the inidicator DOM. */
  indicatorProps: PropTypes.object,
  /** Allow for additional props to be removed from the indicator DOM. Props passed through `indicatorProps` are already trimmed. */
  indicatorPropsToTrim: PropTypes.arrayOf(PropTypes.string),
  /** Will make the progress bar finite. */
  isDeterminate: PropTypes.bool,
  /** Shorthand prop for setting `animationDuration` to 'infinite'. */
  loop: PropTypes.bool,
  /** Defines which progress bar to display */
  progressType: PropTypes.oneOf(['circular', 'linear']),
  /** Defines the total length for the indicator. */
  total: PropTypes.number,
  /** Defines the background color for the track. */
  trackColor: PropTypes.string,
  /** Passes props to the track DOM. */
  trackProps: PropTypes.object,
  /** Allow for additional props to be removed from the track DOM. Props passed through `trackProps` are already trimmed. */
  trackPropsToTrim: PropTypes.arrayOf(PropTypes.string),
  /** Defines the length of the indicator within the track total. When provided 0 or above, will make progess bar determinate. */
  value: PropTypes.number,
};
 
Progress.defaultProps = {
  animation: '',
  animationDelay: '0s',
  animationDirection: 'normal',
  animationDuration: '1.5s',
  animationFillMode: 'none',
  animationIterationCount: '',
  animationName: '',
  animationPlayState: 'running',
  animationTimingFunction: 'linear',
  hideTrack: false,
  indicatorColor: 'brandPrimary.light',
  indicatorProps: {},
  indicatorPropsToTrim: [],
  isDeterminate: false,
  loop: true,
  progressType: 'linear',
  total: 100,
  trackColor: 'gray.light',
  trackProps: {},
  trackPropsToTrim: [],
  value: -1,
};