All files / ship-components-tag-input/src Loader.js

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                            59x           30x 29x   1x                                                         3x                 3x              
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import css from './Loader.css';
 
export default class Loader extends React.Component {
  /**
   * Optimizes the app performance
   *
   * @param {array of object} nextProps
   * @returns {bool}
   * @memberof Loader
   */
  shouldComponentUpdate(nextProps) {
    return this.props.visible !== nextProps.visible ||
          this.props.absolute !== nextProps.absolute ||
          this.props.className !== nextProps.className;
  }
 
  render() {
    if (!this.props.visible) {
      return null;
    }
    return (
      <div className={classNames(
        css.container,
        this.props.className,
        {
          [css.absolute]: this.props.absolute,
          [css.visible]: this.props.visible
        }
      )}
      >
        <svg
          className={classNames(css.spinner, this.props.spinnerClassName)}
          viewBox='0 0 66 66'
          xmlns='http://www.w3.org/2000/svg'
        >
          <circle
            className={css['spinner-path']}
            fill='none'
            cx='33'
            cy='33'
            r='30'
          />
        </svg>
      </div>
    );
  }
}
 
// default props
Loader.defaultProps = {
  absolute:         false,
  visible:          true,
 
  className:        '',
  spinnerClassName: ''
};
 
// prop types checking
Loader.propTypes = {
  absolute:         PropTypes.bool,
  visible:          PropTypes.bool,
 
  className:        PropTypes.string,
  spinnerClassName: PropTypes.string
};