Update preview logic, render select dialog conditionally
This commit is contained in:
parent
4b9095782d
commit
85973c58ed
|
|
@ -2,27 +2,16 @@
|
|||
* WordPress dependencies
|
||||
*/
|
||||
import * as React from 'react';
|
||||
import { Button, Modal, FocusableIframe } from '@wordpress/components';
|
||||
import { Modal, FocusableIframe } from '@wordpress/components';
|
||||
|
||||
import { baseUrl } from '@/globals';
|
||||
|
||||
type DialogProps = {
|
||||
setOpen: Function;
|
||||
onSelectForm: Function;
|
||||
};
|
||||
|
||||
type DialogState = {
|
||||
isOpen: boolean;
|
||||
};
|
||||
|
||||
class SelectDialog extends React.Component<DialogProps, DialogState> {
|
||||
constructor( props: any ) {
|
||||
super( props );
|
||||
|
||||
this.state = {
|
||||
isOpen: false,
|
||||
};
|
||||
}
|
||||
|
||||
class SelectDialog extends React.Component<DialogProps> {
|
||||
componentDidMount() {
|
||||
window.addEventListener( 'message', this.handlePostMessage, false );
|
||||
}
|
||||
|
|
@ -32,32 +21,25 @@ class SelectDialog extends React.Component<DialogProps, DialogState> {
|
|||
}
|
||||
|
||||
handlePostMessage = ( event: MessageEvent ) => {
|
||||
if (event.origin === baseUrl && event.data.type === 'cog-form-selected') {
|
||||
if ( event.origin === baseUrl && event.data.type === 'cog-form-selected' ) {
|
||||
this.props.onSelectForm( event.data );
|
||||
this.setState({ isOpen: false }); // Close Dialog
|
||||
this.props.setOpen( false );
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Button isPrimary={true} onClick={ () => this.setState( { isOpen: true } ) }>
|
||||
Choose a form
|
||||
</Button>
|
||||
{ this.state.isOpen && (
|
||||
<Modal
|
||||
title="Cognito Forms"
|
||||
className="cognito-modal"
|
||||
onRequestClose={ () => this.setState( { isOpen: false } ) }
|
||||
shouldCloseOnClickOutside={ false }
|
||||
>
|
||||
<FocusableIframe
|
||||
style={ { width: '500px', height: '500px', display: 'block' } }
|
||||
src={ `${ baseUrl }/integrations/cms` }
|
||||
></FocusableIframe>
|
||||
</Modal>
|
||||
) }
|
||||
</div>
|
||||
<Modal
|
||||
title="Cognito Forms"
|
||||
className="cognito-modal"
|
||||
onRequestClose={ () => this.props.setOpen( false ) }
|
||||
shouldCloseOnClickOutside={ false }
|
||||
>
|
||||
<FocusableIframe
|
||||
style={ { width: '500px', height: '500px', display: 'block' } }
|
||||
src={ `${ baseUrl }/integrations/cms` }
|
||||
></FocusableIframe>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
135
src/edit.tsx
135
src/edit.tsx
|
|
@ -1,5 +1,4 @@
|
|||
import * as React from 'react';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import { BlockEditProps } from '@wordpress/blocks';
|
||||
import {
|
||||
|
|
@ -9,17 +8,23 @@ import {
|
|||
PanelBody,
|
||||
PanelRow,
|
||||
ExternalLink,
|
||||
Button,
|
||||
Icon,
|
||||
} from '@wordpress/components';
|
||||
import { edit } from '@wordpress/icons';
|
||||
|
||||
import { edit, external } from '@wordpress/icons';
|
||||
import { useState } from '@wordpress/element';
|
||||
import { BlockControls, InspectorControls } from '@wordpress/block-editor';
|
||||
|
||||
import { BlockAttributes, EmbedMode } from '@/types';
|
||||
import { baseUrl } from './globals';
|
||||
|
||||
import { ReactComponent as CogIcon } from '@/assets/cogicon.svg';
|
||||
import SelectDialog from '@/components/select-dialog';
|
||||
import PreviewForm from '@/components/preview-form';
|
||||
import { BlockAttributes, EmbedMode } from '@/types';
|
||||
|
||||
const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttributes, className } ) => {
|
||||
const [ selectDialogOpen, setSelectDialogOpen ] = useState( false );
|
||||
|
||||
const handleForm = ( form: { [key: string]: any } ) => {
|
||||
setAttributes( {
|
||||
formId: form.formId,
|
||||
|
|
@ -30,71 +35,71 @@ const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttri
|
|||
} );
|
||||
};
|
||||
|
||||
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 );
|
||||
};
|
||||
|
||||
if ( ! attributes.formId ) {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
<BlockControls>
|
||||
<ToolbarButton
|
||||
icon={ edit }
|
||||
label="Edit"
|
||||
onClick={ () => resetForm() }
|
||||
<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>
|
||||
|
||||
<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 }
|
||||
/>
|
||||
</BlockControls>
|
||||
</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 <Icon icon={ external } size={ 16 }></Icon>
|
||||
</Button>
|
||||
</div>
|
||||
</Placeholder>
|
||||
</div>
|
||||
}
|
||||
|
||||
<InspectorControls key="setting">
|
||||
<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>
|
||||
</InspectorControls>
|
||||
|
||||
<PreviewForm
|
||||
embedCode={ attributes.iframeEmbedCode }
|
||||
/>
|
||||
{ selectDialogOpen &&
|
||||
// Selectively render the select dialog
|
||||
<SelectDialog
|
||||
setOpen={ ( val: boolean ) => setSelectDialogOpen( val ) }
|
||||
onSelectForm={ handleForm }
|
||||
></SelectDialog>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,51 +7,56 @@
|
|||
*/
|
||||
|
||||
// Remove modal padding
|
||||
.cognito-modal > .components-modal__content {
|
||||
padding: initial;
|
||||
}
|
||||
|
||||
.cognito-modal > .components-modal__content > .components-modal__header {
|
||||
margin: initial;
|
||||
}
|
||||
|
||||
// .cog-wp-embed__preview > iframe {
|
||||
// height: 500px;
|
||||
// }
|
||||
|
||||
.form-preview {
|
||||
min-height: 200px;
|
||||
|
||||
.focus-grabber {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
.wp-block-cognito-forms-cognito-embed {
|
||||
.components-placeholder__label svg {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.loader {
|
||||
padding: 1em;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
.form-preview {
|
||||
min-height: 200px;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 0 1px #1e1e1e;
|
||||
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin: 0 auto;
|
||||
.focus-grabber {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
.loader {
|
||||
padding: 1em;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
min-height: 200px;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 0 1px #1e1e1e;
|
||||
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cognito-modal {
|
||||
.components-modal__content {
|
||||
padding: initial;
|
||||
}
|
||||
|
||||
.components-modal__content .components-modal__header {
|
||||
margin: initial;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue