cognitoforms-wordpress/src/edit.tsx

57 lines
1.5 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import { __ } from '@wordpress/i18n';
import { BlockEditProps } from '@wordpress/blocks';
import { Placeholder, ExternalLink } from '@wordpress/components';
import CogIcon from './assets/cogicon';
import SelectDialog from './components/select-dialog';
import { BlockAttributes, EmbedMode } from './types';
const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttributes, className } ) => {
const handleForm = ( form: string ) => {
const formObj = JSON.parse( form );
setAttributes( {
formId: formObj.id,
seamlessEmbedCode: formObj.seamlessEmbedCode,
iframeEmbedCode: formObj.iframeEmbedCode,
embedMode: EmbedMode.Seamless,
} );
};
if ( ! attributes.formId ) {
return (
<Placeholder
icon={ CogIcon }
label="Cognito Forms"
className={ className }
instructions={ __(
'Click the button below to choose a form to embed.'
) }
>
<SelectDialog onSelectForm={ handleForm }></SelectDialog>
<br />
<div className="components-placeholder__learn-more">
<ExternalLink
href={ __(
'https://wordpress.org/support/article/embeds/'
) }
>
{ __( 'Learn more about embeds' ) }
</ExternalLink>
</div>
{/* <PlainText
onChange={ content => props.setAttributes({ url: content }) }
value={ props.attributes.url }
placeholder="Your form url"
className="cognito__form"
/> */}
</Placeholder>
);
}
return ( <div dangerouslySetInnerHTML={ { __html: attributes.iframeEmbedCode } }></div> );
}
export default Edit;