57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
|
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;
|