import * as React from 'react' ; import * as classNames from 'classnames' ; import { completeMissingStatuses } from '../actions/timeline' ; import { Dispatch } from '../store' ; interface Props extends React . Props < ZigZagSeparator > { readonly itemIndex ? : number ; readonly focused ? : boolean ; readonly onClick ? : ( e : React . MouseEvent ) => void ; readonly dispatch : Dispatch ; } interface State { readonly loading : boolean ; } export default class ZigZagSeparator extends React . Component < Props , State > { constructor ( props ) { super ( props ) ; this . onClick = this . onClick . bind ( this ) ; this . state = { loading : false } ; } onClick ( e ) { const { onClick , itemIndex , dispatch } = this . props ; if ( onClick ) { onClick ( e ) ; } else if ( itemIndex !== undefined ) { e . stopPropagation ( ) ; dispatch ( completeMissingStatuses ( itemIndex ) ) ; } this . setState ( { loading : true } ) ; } render ( ) { if ( this . state . loading ) { return ( < div className = "zigzag-separator_loading" > < div className = "zigzag-separator_loading-icon" > < i className = "fa fa-spinner fa-pulse fa-lg fa-fw" / > < span className = "sr-only" > Loading ... < /span> < /div> < /div>); } return ( < div className = "zigzag-separator" onClick = { this . onClick } > < div className = "zigzag-separator__top" / > < div className = { classNames ( { 'zigzag-separator__focused-middle' : ! ! this . props . focused , 'zigzag-separator__middle' : ! this . props . focused , } , 'zigzag-separator__jagged' ) } /> < div className = "zigzag-separator__bottom zigzag-separator__jagged" / > < /div>); } }