import React , { createContext } from 'react' ; import Section from './Section' ; import Navigation from './navigation' ; export interface FooterProps { mobilization : { community : { name : string ; image : string ; signature ? : { name ? : string ; url ? : string ; } ; } ; } ; } export const TranslateContext = createContext < { t ? : any ; Trans ? : any ; i18n ? : any ; mobilization ? : { language : 'pt-BR' | 'es' ; } ; } > ( { } ) ; export interface MobilizationProps { editable ? : boolean ; colorScheme ? : string ; headerFont ? : string ; bodyFont ? : string ; linkTo : Function ; blocks : any [ ] ; widgets : any [ ] ; widgetComponent : any ; extraWidgetProps : any ; blockWidgetsRef ? : Function ; footerComponent : React . FC < FooterProps > ; } type MobilizationState = { blocks : any [ ] ; } ; /**
 * A mobilization has two modes, in editing ({ editable: true })
 * and only rendering ({ editable: false }).
 * When a mobilization is in edit mode, it needs to receive extra
 * properties that will be used for block and widgets editing.
 */ const getVisibleBlocks = ( blocks , editable ) => ! editable ? blocks . filter ( ( b ) => ! b . hidden ) : blocks ; class Mobilization extends React . Component < MobilizationProps , MobilizationState > { static defaultProps = { editable : false , blocks : [ ] , widgets : [ ] , extraWidgetProps : { } , blockWidgetsRef : ( b , ws ) => ws . filter ( ( w ) => w . block_id === b . id ) , } ; render ( ) { const { editable , colorScheme , headerFont , bodyFont } = this . props ; const themeClassName = `${ colorScheme } ${ headerFont }-header ${ bodyFont }-body` ; const layoutClassName = editable ? 'flex-auto relative' : 'relative' ; const layoutStyle = ! editable ? { top : 0 , bottom : 0 , left : 0 , right : 0 , flexGrow : 1 } : undefined ; const { linkTo , blockWidgetsRef , widgets , widgetComponent , footerComponent : FooterComponent , extraWidgetProps : { t , Trans , i18n , ... extraWidgetProps } , } = this . props ; const blocks = getVisibleBlocks ( this . props . blocks , editable ) ; return ( < TranslateContext . Provider value = { { t , Trans , i18n , mobilization : extraWidgetProps . mobilization } } > < div className = { `flex flex-column ${ themeClassName } ${ layoutClassName }` } style = { layoutStyle } > < Navigation blocks = { blocks } editable = { editable } linkTo = { linkTo } / > < div id = "blocks-list" className = "flex-auto" style = { { overflowY : 'hidden' } } > { blocks . map ( ( b , i ) => ( < Section key = { `section-${ i }` } anchor = { linkTo ( b ) } block = { b } editable = { ! ! editable } widgets = { blockWidgetsRef ? blockWidgetsRef ( b , widgets ) : [ ] } widgetComponent = { widgetComponent } extraWidgetProps = { extraWidgetProps } / > ) ) } < /div> < FooterComponent mobilization = { extraWidgetProps . mobilization } / > < /div> < /TranslateContext.Provider>); } } export const Translate = TranslateContext . Consumer ; export default Mobilization ;