All files / lib/Spinner index.js

100% Statements 10/10
81.25% Branches 26/32
100% Functions 1/1
100% Lines 10/10
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 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161                    89x                 13x   13x 7x   1x     7x                                                               6x                         89x                             89x                 89x                                                                                                                                
import React from 'react';
import PropTypes from 'prop-types';
import { isNumber, round } from 'lodash';
 
/**
 * @category communication
 * @component loader-spinner
 * @variations collab-ui-react
 */
 
const Spinner = props => {
  const {
    className,
    color,
    showCheck,
    percentage,
    showPercentage,
    size,
    ...otherHTMLProps
  } = props;
 
  if(isNumber(percentage)) {
    if (size !== 36 && showPercentage) {
      /* eslint-disable no-console */
      console.warn('[@collab-ui/react] Spinner: Percentage will not be shown for sizes smaller than 36');
      /* eslint-enable no-console */
    }
    return (
      <div className={
        `cui-spinner-progress` +
        ` cui-spinner-progress__percentage-${round(percentage)}` +
        `${(size && ` cui-spinner-progress--${size}`) || ''}` +
        `${(color && ` cui-spinner-progress--${color}`) || ''}` +
        `${(className && ` ${className}`) || ''}`
        }
        {...otherHTMLProps}
      >
        <div className="cui-spinner-progress__circle">
          <div className="cui-spinner-progress__mask cui-spinner-progress__full">
            <div className="cui-spinner-progress__fill"/>
          </div>
          <div className="cui-spinner-progress__mask cui-spinner-progress__half">
            <div className="cui-spinner-progress__fill"/>
            <div className="cui-spinner-progress__fill cui-spinner-progress__fix"/>
          </div>
          <div className={
            `cui-spinner-progress__inset-circle` +
            `${showCheck && percentage === 100 && ' cui-spinner-progress__inset-circle--check' || ''}`
            }
          >
            {
              size === 36 && showPercentage && !showCheck
              && <div className="cui-spinner-progress__percentage">{round(percentage)}</div>
            }
          </div>
        </div>
      </div>
    );
  } else {
    return (
      <i className={
        `cui-spinner` +
        `${(size && ` cui-spinner--${size}`) || ''}` +
        `${(color && ` cui-spinner--${color}`) || ''}` +
        `${(className && ` ${className}`) || ''}`
        }
        {...otherHTMLProps}
      />
    );
  }
};
 
Spinner.propTypes = {
  /** @prop Optional CSS class names | '' */
  className: PropTypes.string,
  /** @prop Set Spinner color | '' */
  color: PropTypes.string,
  /** @prop Show percentage value for progress on Spinner | null */
  percentage: PropTypes.number,
  /** @prop Show the check mark if percentage 100 | false */
  showCheck: PropTypes.bool,
  /** @prop Show the number value for progress on Spinner | false */
  showPercentage: PropTypes.bool,
  /** @prop Spinner size | 36 */
  size: PropTypes.oneOf([16, 20, 28, 36]),
};
 
Spinner.defaultProps = {
  className: '',
  color: 'black',
  percentage: null,
  showCheck: false,
  showPercentage: false,
  size: 36,
};
 
Spinner.displayName = 'Spinner';
 
export default Spinner;
 
/**
* @component loader-spinner
* @section default
* @react
import { Spinner } from '@collab-ui/react';
 
export default function LoaderSpinnerDefault() {
  return (
    <Spinner />
  );
}
 
**/
 
/**
* @component loader-spinner
* @section determinate
* @react
import { Spinner } from '@collab-ui/react';
 
export default function LoaderSpinnerDeterminate() {
  return (
    <Spinner percentage={65}/>
  );
}
 
**/
 
/**
* @component loader-spinner
* @section percentage
* @react
import { Spinner } from '@collab-ui/react';
 
export default function LoaderSpinnerPercentage() {
  return (
    <Spinner
      percentage={65}
      showPercentage={true}
    />
  );
}
 
**/
 
/**
* @component loader-spinner
* @section check
* @react
import { Spinner } from '@collab-ui/react';
 
export default function LoaderSpinnerCheck() {
  return (
    <Spinner
      percentage={100}
      showCheck
    />
  );
}
 
**/