import classnames from 'classnames' ; import React from 'react' ; import CountUp from 'react-countup' ; import type { Mobilization , Widget } from "../../../../reducers" ; import Button from './button' ; import Input from "./input" ; interface FormProperties { mobilization : Mobilization ; widget : Widget ; block : any ; editable : boolean ; configurable : boolean ; hasNewField : boolean ; intl ? : any ; } class Form extends React . Component < FormProperties , any > { constructor ( properties , context ) { super ( properties , context ) ; this . state = { hasMouseOver : false } ; } fields ( ) { const { settings } = this . props . widget ; return ( settings ?. fields ? settings . fields : [ ] ) ; } renderCallToAction ( ) { const { configurable , widget , mobilization : { header_font : headerFont } , intl } = this . props ; const callToAction = ( widget . settings ?. call_to_action ? widget . settings . call_to_action : intl . formatMessage ( { id : 'form-widget.components--form.default.title-text' , defaultMessage : 'Clique para configurar seu formulário...' } ) ) . replace ( '\n' , '<br/><br/>' ) ; return configurable ? undefined : ( < h2 className = 'mt0 mb3 center white' dangerouslySetInnerHTML = { { __html : callToAction } } style = { { fontFamily : headerFont } } />); } renderFields ( ) { const fields = this . fields ( ) ; return fields . map ( ( field ) => ( < Input uid = { field . uid } field = { field } mobilization = { this . props . mobilization } / > ) ) ; } renderButton ( ) { const { widget , intl , mobilization } = this . props ; return ( < Button mobilization = { mobilization } buttonText = { ( widget . settings ?. button_text ) || intl . formatMessage ( { id : 'form-widget.components--form.default.button-text' , defaultMessage : 'Enviar' } ) } />); } renderCount ( ) { const { widget : { settings } } = this . props ; if ( settings ?. count_text ) { const { block : { scrollTopReached : startCounting } , widget : { form_entries_count : count } , mobilization : { body_font : bodyFont } } = this . props ; return ( < div className = 'mt2 h3 center white' style = { { fontFamily : bodyFont } } > < CountUp start = { 0 } end = { count && startCounting ? count : 0 } duration = { 5 } / > & nbsp ; { settings . count_text } < /div>); } } renderForm ( ) { const { editable , configurable , widget : { settings } } = this . props ; const backgroundColor = settings ?. main_color ? settings . main_color : 'rgba(0,0,0,0.25)' ; return ( < div > < div className = { classnames ( 'rounded' , { 'p3 relative' : editable || ! configurable } ) } style = { { backgroundColor : ! configurable ? backgroundColor : null } } > { this . renderCallToAction ( ) } { this . renderFields ( ) } { } { this . renderButton ( ) } < /div> < /div>); } render ( ) { const { mobilization : { header_font : headerFont } } = this . props ; return ( < div className = { `widget ${ headerFont }-header` } > { this . renderForm ( ) } { this . renderCount ( ) } < /div>); } } export default Form ;