import * as React from 'react' ; import './style.less' ; interface IPauseProps { data : boolean ; } interface IPauseState { showPause : boolean ; } export default class Pause extends React . Component < IPauseProps , IPauseState > { timeout = null ; constructor ( ) { super ( ) ; this . state = { showPause : false } ; } componentDidMount ( ) { this . setShake ( this . props . data ) ; } componentWillReceiveProps ( { data } ) { this . setShake ( data ) ; } shouldComponentUpdate ( { data } ) { if ( data ) { return true ; } return data !== this . props . data ; } setShake ( bool ) { if ( bool && ! this . timeout ) { this . timeout = setInterval ( ( ) => { this . setState ( { showPause : ! this . state . showPause } ) ; } , 250 ) ; } if ( ! bool && this . timeout ) { clearInterval ( this . timeout ) ; this . setState ( { showPause : false } ) ; this . timeout = null ; } } render ( ) { return < div className = { `bg pause ${ this . state . showPause ? 'c' : '' }` } />; } }