import * as React from 'react' ; import classNames from 'utils/classNames' ; import styles from './styles.scss' ; import Loading from '../Loading' ; interface IProps { images ? : string [ ] ; } interface IState { imageIdx : number ; } const LOOP_SPEED = 75 ; class Preview extends React . Component < IProps , IState > { constructor ( props ) { super ( props ) ; this . state = { imageIdx : 0 , } ; } private timeout : any ; componentWillMount ( ) { this . loopImages ( ) ; } componentWillUnmount ( ) { if ( this . timeout ) { clearTimeout ( this . timeout ) ; } } private last : any ; loopImages = ( ) => { if ( this . last ) { const now = ( new Date ( ) ) . getTime ( ) ; const diff = now - this . last ; if ( diff > LOOP_SPEED + 200 ) { } } if ( this . timeout ) { clearTimeout ( this . timeout ) ; } this . setState ( { imageIdx : this . state . imageIdx + 1 , } ) ; this . last = ( new Date ( ) ) . getTime ( ) ; this . timeout = setTimeout ( ( ) => { this . loopImages ( ) ; } , LOOP_SPEED ) ; } ; render ( ) { const { images , } = this . props ; const src = images && images [ this . state . imageIdx % images . length ] ; const className = classNames ( styles . container , { [ styles . images ] : images && images . length > 0 , } ) ; return ( < div className = { className } > { src ? ( < div className = { styles . img } style = { { backgroundImage : `url(${ src } ) `,
                }}/>) : (<div className={styles.loader}>
            <Loading />
            <span>Reading images</span>
          </div>)}
      </div>);
    }
}
export default Preview;
