import React from 'react' ; import styled from 'styled-components' ; import { Spinner as SpinnerIcon } from './../Icon' ; import PropTypes from 'prop-types' ; const DelayValueMap = { none : 0 , short : 400 , long : 600 , } ; class Indicator extends React . Component { constructor ( props ) { super ( props ) ; this . _timer = null ; this . _delay = props . delay ; this . state = { canDisplay : false , } ; } componentDidMount ( ) { let timeoutValue = DelayValueMap [ this . _delay ] ; this . _timer = setTimeout ( ( ) => { this . setState ( { canDisplay : true , } ) ; } , timeoutValue ) ; } componentWillUnmount ( ) { clearTimeout ( this . _timer ) ; } render ( ) { if ( ! this . state . canDisplay ) { return null ; } return < StyledSpinner { ... this . props } / > ; } } Indicator . propTypes = { delay : PropTypes . oneOf ( [ 'none' , 'short' , 'long' ] ) , } ; Indicator . defaultProps = { delay : 'short' , } ; const StyledSpinner = styled ( SpinnerIcon ) `
  ${ ( { fontSize = '32px' } ) => `
    font-size: ${ fontSize };
    height: ${ fontSize };
    width: ${ fontSize };
  ` }

  animation: anim-rotate 2s infinite linear;
  color: #fff;
  display: inline-block;
  margin: 16px;
  opacity: 0.24;

  @keyframes anim-rotate {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
` ; export default Indicator ;