import classnames from 'classnames' ; import type { Block , Mobilization , Widget } from '../../reducers' ; import WidgetOverlay from './widget-overlay.connected' ; import widgetsPlugins from "../__plugins__/config" ; export interface WidgetProperties { mobilization : Mobilization ; widget : Widget ; block : Block ; editable : boolean ; update : ( widget : Widget ) => void ; saving : boolean ; } const WidgetFC = ( { saving , mobilization , block , widget , update , editable , } ) : React . ReactElement => { const { sm_size : smSize , md_size : mdSize , lg_size : lgSize , kind } = widget ; const styleClassName = classnames ( `px2 col mb4 md-mb0 col-${ smSize }` , `sm-col-${ smSize } md-col-${ mdSize } lg-col-${ lgSize }` ) ; const widgetConfig = widgetsPlugins ( mobilization , widget , { intl : { formatMessage : ( { defaultMessage } ) => defaultMessage } } ) . find ( w => w . kind === kind ) ; const { component : WrapperComponent , redirect } = widgetConfig ; return ( < div className = { styleClassName } > { } { saving && < p > Loading ... < /p>} { editable && redirect ? ( < WidgetOverlay widget = { widget } onEdit = { ( ) : void => { console . log ( "onEdit widget" ) ; } } onDelete = { ( ) : void => { const message = 'Deseja remover o widget?' ; if ( window . confirm ( message ) ) { update ( { ... widget , settings : { } , kind : 'draft' } ) ; } } } > < WrapperComponent { ... { mobilization , block , widget , update , editable } } / > < /WidgetOverlay>) : (!editable && kind === 'draft' ? undefined : (<WrapperComponent {...{ mobilization, block, widget, update, editable }}/ > ) ) } < /div>); } ; export default WidgetFC ;