import React from 'react' ; import styled from '@emotion/styled' ; import WidgetArea from './WidgetArea' ; const Block = styled . div `
  padding: 5em 0;

  &:after,
  &:before {
    content: ' ';
    display: table;
  }
  &:after {
    clear: both;
  }
` ; const getBackgroundStyle = ( block ) => { if ( block . bg_image ) return { background : `url('${ block . bg_image }') no-repeat` , backgroundSize : 'cover' , } ; else if ( block . bg_class ) { try { const rgba = JSON . parse ( block . bg_class ) ; return { backgroundColor : `rgba(${ rgba . r },${ rgba . g },${ rgba . b },${ rgba . a })` , } ; } catch ( ex ) { return { } ; } } return undefined ; } ; /**
 * The basic rendering structure of a block has features
 * such as navigating between blocks, and events such as
 * mouseEnter and mouseOut.
 */ const Section = ( props ) => { const { anchor , block , widgets , widgetComponent , extraWidgetProps , editable , wrapper : BlockWrapper , } = props ; const RenderBlock = ( ) => { return ( < div id = { anchor } className = { block . bg_class && block . bg_class . indexOf ( '{' ) === - 1 ? block . bg_class : '' } style = { { ... getBackgroundStyle ( block ) } } > < div className = "col-10 mx-auto" > < Block > { widgets . map ( ( widget ) => < WidgetArea key = { `widget-${ widget . id }` } block = { block } widget = { widget } widgetComponent = { widgetComponent } extraWidgetProps = { extraWidgetProps } / > ) } < /Block> < /div> < /div>); } ; if ( BlockWrapper ) { return ( < BlockWrapper block = { block } editable = { editable } > < RenderBlock /> < /BlockWrapper>); } return < RenderBlock />; } ; type SectionProps = { anchor : string ; wrapper ? : any ; block : any ; editable : boolean ; widgets : any [ ] ; widgetComponent : any ; extraWidgetProps : any ; } ; export default Section ;