cognitoforms-wordpress/src/edit.tsx

108 lines
3.0 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import { BlockEditProps } from '@wordpress/blocks';
2022-01-30 15:51:32 -05:00
import {
Placeholder,
ToolbarButton,
RadioControl,
PanelBody,
PanelRow,
ExternalLink,
Button,
Icon,
2022-01-30 15:51:32 -05:00
} from '@wordpress/components';
import { edit, external } from '@wordpress/icons';
import { useState } from '@wordpress/element';
2022-01-30 15:51:32 -05:00
import { BlockControls, InspectorControls } from '@wordpress/block-editor';
import { BlockAttributes, EmbedMode } from '@/types';
import { baseUrl } from './globals';
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';
const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttributes, className } ) => {
const [ selectDialogOpen, setSelectDialogOpen ] = useState( false );
2022-01-19 21:45:46 -05:00
const handleForm = ( form: { [key: string]: any } ) => {
setAttributes( {
2022-01-19 21:45:46 -05:00
formId: form.formId,
seamlessEmbedCode: form.embedCodes.Seamless,
iframeEmbedCode: form.embedCodes.IFrame,
ampEmbedCode: form.embedCodes.Amp,
embedMode: EmbedMode.Seamless,
} );
};
return (
<div className={ className }>
{ attributes.formId ?
// A form has already been selected, so render the form preview.
<div>
<BlockControls>
<ToolbarButton
icon={ edit }
label="Edit"
onClick={ () => setSelectDialogOpen( true ) }
/>
</BlockControls>
2022-01-22 22:20:12 -05:00
<InspectorControls key="setting">
<PanelBody title="Form 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>
</InspectorControls>
<PreviewForm
embedCode={ attributes.iframeEmbedCode }
2022-01-22 22:20:12 -05:00
/>
</div>
:
// No form has been selected yet, so render the placeholder
<div>
<Placeholder
icon={ CogIcon }
label="Cognito Forms"
instructions="Choose an existing form to embed or create a new one."
>
<div>
<Button isPrimary onClick={ () => setSelectDialogOpen( true ) }>
Select Form
</Button>
<Button isTertiary href={ `${ baseUrl }/forms/new` } target="_blank">
New Form&thinsp;<Icon icon={ external } size={ 16 }></Icon>
</Button>
</div>
</Placeholder>
</div>
2022-01-22 22:20:12 -05:00
}
{ selectDialogOpen &&
// Selectively render the select dialog
<SelectDialog
setOpen={ ( val: boolean ) => setSelectDialogOpen( val ) }
onSelectForm={ handleForm }
></SelectDialog>
}
2022-01-22 22:20:12 -05:00
</div>
2022-01-14 23:21:40 -05:00
);
2022-01-19 21:45:46 -05:00
};
export default Edit;