2022-01-13 18:26:04 -05:00
|
|
|
import * as React from 'react';
|
|
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
|
|
|
|
import { BlockEditProps } from '@wordpress/blocks';
|
2022-01-30 15:51:32 -05:00
|
|
|
import {
|
|
|
|
Placeholder,
|
|
|
|
ToolbarButton,
|
|
|
|
RadioControl,
|
|
|
|
PanelBody,
|
|
|
|
PanelRow,
|
|
|
|
ExternalLink,
|
|
|
|
} from '@wordpress/components';
|
2022-01-22 22:20:12 -05:00
|
|
|
import { edit } from '@wordpress/icons';
|
|
|
|
|
2022-01-30 15:51:32 -05:00
|
|
|
import { BlockControls, InspectorControls } from '@wordpress/block-editor';
|
2022-01-13 18:26:04 -05:00
|
|
|
|
2022-01-26 13:58:38 -05:00
|
|
|
import { ReactComponent as CogIcon } from '@/assets/cogicon.svg';
|
2022-01-14 23:21:40 -05:00
|
|
|
import SelectDialog from '@/components/select-dialog';
|
2022-01-19 21:45:46 -05:00
|
|
|
import PreviewForm from '@/components/preview-form';
|
2022-01-14 23:21:40 -05:00
|
|
|
import { BlockAttributes, EmbedMode } from '@/types';
|
2022-01-13 18:26:04 -05:00
|
|
|
|
|
|
|
const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttributes, className } ) => {
|
2022-01-19 21:45:46 -05:00
|
|
|
const handleForm = ( form: { [key: string]: any } ) => {
|
2022-01-13 18:26:04 -05:00
|
|
|
setAttributes( {
|
2022-01-19 21:45:46 -05:00
|
|
|
formId: form.formId,
|
|
|
|
seamlessEmbedCode: form.embedCodes.Seamless,
|
|
|
|
iframeEmbedCode: form.embedCodes.IFrame,
|
|
|
|
ampEmbedCode: form.embedCodes.Amp,
|
2022-01-13 18:26:04 -05:00
|
|
|
embedMode: EmbedMode.Seamless,
|
|
|
|
} );
|
|
|
|
};
|
|
|
|
|
2022-01-22 22:20:12 -05:00
|
|
|
const resetForm = () => {
|
|
|
|
// Create a new object which sets all attributes to null
|
|
|
|
const nullAttributes = Object.keys( attributes ).reduce(
|
|
|
|
( accumulator, current ) => {
|
|
|
|
// @ts-ignore
|
|
|
|
accumulator[ current ] = null;
|
|
|
|
return accumulator;
|
|
|
|
}, {} );
|
|
|
|
|
|
|
|
setAttributes( nullAttributes );
|
|
|
|
};
|
|
|
|
|
2022-01-13 18:26:04 -05:00
|
|
|
if ( ! attributes.formId ) {
|
|
|
|
return (
|
2022-01-22 22:20:12 -05:00
|
|
|
<div>
|
|
|
|
<Placeholder
|
|
|
|
icon={ CogIcon }
|
|
|
|
label="Cognito Forms"
|
|
|
|
className={ className }
|
|
|
|
instructions={ __(
|
|
|
|
'Click the button below to choose a form to embed.'
|
|
|
|
) }
|
|
|
|
>
|
|
|
|
<SelectDialog onSelectForm={ handleForm }></SelectDialog>
|
|
|
|
</Placeholder>
|
|
|
|
</div>
|
2022-01-13 18:26:04 -05:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-01-14 23:21:40 -05:00
|
|
|
return (
|
2022-01-22 22:20:12 -05:00
|
|
|
<div>
|
|
|
|
{
|
|
|
|
<BlockControls>
|
|
|
|
<ToolbarButton
|
|
|
|
icon={ edit }
|
|
|
|
label="Edit"
|
|
|
|
onClick={ () => resetForm() }
|
|
|
|
/>
|
|
|
|
</BlockControls>
|
|
|
|
}
|
|
|
|
|
|
|
|
<InspectorControls key="setting">
|
2022-01-30 15:51:32 -05:00
|
|
|
<PanelBody title="Embed Settings">
|
|
|
|
<PanelRow>
|
|
|
|
<RadioControl
|
|
|
|
label="Embed Mode"
|
|
|
|
help={
|
|
|
|
<span>
|
|
|
|
The type of embed code to use with your form. <ExternalLink href="https://www.cognitoforms.com/support/10/style-publish">Learn more</ExternalLink>
|
|
|
|
</span>
|
|
|
|
}
|
|
|
|
selected={ attributes.embedMode }
|
|
|
|
options={ [
|
|
|
|
{ label: 'Seamless', value: EmbedMode.Seamless },
|
|
|
|
{ label: 'Iframe', value: EmbedMode.IFrame },
|
|
|
|
] }
|
|
|
|
onChange={ ( value: EmbedMode ) => setAttributes( { embedMode: parseInt( value.toString() ) } ) }
|
|
|
|
/>
|
|
|
|
</PanelRow>
|
|
|
|
</PanelBody>
|
2022-01-22 22:20:12 -05:00
|
|
|
</InspectorControls>
|
|
|
|
|
|
|
|
<PreviewForm
|
|
|
|
embedCode={ attributes.iframeEmbedCode }
|
|
|
|
/>
|
|
|
|
</div>
|
2022-01-14 23:21:40 -05:00
|
|
|
);
|
2022-01-19 21:45:46 -05:00
|
|
|
};
|
2022-01-13 18:26:04 -05:00
|
|
|
|
|
|
|
export default Edit;
|