import classnames from 'classnames' ; import React from 'react' ; import LogoIconNoBorder from './logo-icon-no-border' ; import Block from './block.connected' ; import Navbar from './navbar-tool' ; import ( './add-new-block.scss' ) ; class Mobilization extends React . Component < any , any > { constructor ( properties ) { super ( properties ) ; const { editable , blocks } = properties ; this . state = { blocks : blocks . filter ( block => ! editable ? ! block . hidden : true ) } ; } componentWillReceiveProps ( properties ) { if ( this . props . blocks !== properties . blocks ) { const { editable , blocks } = properties ; this . setState ( { blocks : blocks . filter ( block => ! editable ? ! block . hidden : true ) } ) ; } } componentDidMount ( ) { const { editable , blocks , blocksIsLoaded } = this . props ; if ( editable && blocksIsLoaded && blocks . length === 0 ) { console . log ( "redireciona para escolha de template" ) ; } let blocksTotalHeight = 0 ; const blocksWithOffsetTop = [ ] ; this . state . blocks . map ( ( block , index ) => { const { offsetTop , offsetHeight } = ( document . querySelector ( `#block-${ block . id }` ) || { } ) ; const scrollTopReached = index === 0 ; blocksWithOffsetTop . push ( { ... block , offsetTop , scrollTopReached } ) ; blocksTotalHeight += offsetHeight ; return blocksWithOffsetTop ; } ) ; this . setState ( { blocks : blocksWithOffsetTop } ) ; const blockList = document . querySelector ( '#blocks-list' ) || { } ; blockList . addEventListener ( 'scroll' , ( { target } ) => { this . state . blocks . map ( block => { const adjust = 120 ; const scrollPassed = ( target . scrollTop + adjust ) >= block . offsetTop ; if ( scrollPassed && ! block . scrollTopReached ) { this . updateBlock ( block , { scrollTopReached : true } ) ; } return scrollPassed ; } ) ; const viewportBottom = target . scrollTop + target . offsetHeight ; const isBottom = viewportBottom >= blocksTotalHeight ; const position = - 1 ; const lastBlock = this . state . blocks . at ( position ) ; if ( isBottom && ! lastBlock . scrollTopReached ) { this . updateBlock ( lastBlock , { scrollTopReached : true } ) ; } } ) ; } updateBlock ( block , properties ) { const { blocks } = this . state ; const index = blocks . findIndex ( currentBlock => currentBlock . id === block . id ) ; this . setState ( { blocks : [ ... blocks . slice ( 0 , index ) , { ... blocks [ index ] , ... properties } , ... this . state . blocks . slice ( index + 1 ) ] } ) ; } render ( ) { const { mobilization : { color_scheme : colorScheme , header_font : headerFont , body_font : bodyFont } , blocks , widgets , blockUpdate , editable , blockEditionMode , history , mobilization } = this . props ; const themeClassName = `${ colorScheme } ${ headerFont }-header ${ bodyFont }-body` ; const layoutClassName = editable ? 'flex-auto relative' : 'absolute' ; const layoutStyle = ! editable ? { top : 0 , bottom : 0 , left : 0 , right : 0 } : undefined ; return ( < div className = { classnames ( 'flex flex-column' , themeClassName , layoutClassName ) } style = { layoutStyle } > { ! blockEditionMode && ( < Navbar mobilization = { mobilization } blocks = { blocks } editable = { editable } blockUpdate = { blockUpdate } / > ) } { } < div id = 'blocks-list' className = 'flex-auto' style = { { overflowY : 'scroll' } } > { this . state . blocks . map ( ( block ) => ( < Block history = { history } key = { `block-${ block . id }` } editable = { editable } block = { block } widgets = { widgets . filter ( w => w . block_id === block . id ) } / > ) ) } { editable && ( < button type = "button" className = 'add-new-block' onClick = { ( ) : void => { console . log ( "adiciona novo bloco" ) ; } } > < i className = 'fa fa-plus' / > Adicionar bloco de conteúdo { } < /button>)} < div className = 'col-10 mx-auto' > < div className = 'col col-10' > < a href = 'http://www.bonde.org/?utm_source=footer-logo' style = { { 'color' : '#000' , 'textDecoration' : 'none' , 'lineHeight' : '85px' } } target = '_blank' rel = 'noopener noreferrer' > Feito pra causar . Feito com { } < strong > BONDE . < /strong> < /a> < /div> < div className = 'col col-2' > < a href = 'http://www.bonde.org/?utm_source=footer-slogan' className = 'right my2' target = '_blank' rel = 'noopener noreferrer' > < LogoIconNoBorder /> < /a> < /div> < /div> < /div> < /div>); } } export default Mobilization ;