diff --git a/src/components/preview-form.tsx b/src/components/preview-form.tsx index bbb6f7a..8c07129 100644 --- a/src/components/preview-form.tsx +++ b/src/components/preview-form.tsx @@ -9,17 +9,17 @@ import { Spinner } from '@wordpress/components'; import { baseUrl } from '@/globals'; import { ReactComponent as CogIcon } from '@/assets/cogicon.svg'; -type PreviewProps = { +interface IPreviewProps { embedCode: string; -}; +} -type PreviewState = { +interface IPreviewState { uniqueId: string; loading: boolean; -}; +} -class PreviewForm extends React.Component { - constructor( props: any ) { +class PreviewForm extends React.Component { + constructor( props: IPreviewProps ) { super( props ); // Generate a unique identifier, so that the embed script can be identified @@ -39,7 +39,7 @@ class PreviewForm extends React.Component { } // Force the embed script to load, which makes Iframes in the editor resize properly. - loadEmbedScript( callback?: Function ) { + loadEmbedScript( callback?: () => void ) { const existingScript = document.getElementById( `cog-embed-script-${ this.state.uniqueId }` ); if ( ! existingScript ) { diff --git a/src/components/select-dialog.tsx b/src/components/select-dialog.tsx index 640f121..675539d 100644 --- a/src/components/select-dialog.tsx +++ b/src/components/select-dialog.tsx @@ -5,16 +5,14 @@ import * as React from 'react'; import { Modal, FocusableIframe } from '@wordpress/components'; import { baseUrl } from '@/globals'; +import { IForm } from '@/types'; interface IDialogProps { - setOpen: Function; - onSelectForm: Function; + setOpen: ( val: boolean ) => void; + onSelectForm: ( form: IForm ) => void; } -interface IDialogState { -} - -class SelectDialog extends React.Component { +class SelectDialog extends React.Component { componentDidMount() { window.addEventListener( 'message', this.handlePostMessage, false ); } diff --git a/src/edit.tsx b/src/edit.tsx index b5a7475..0c06d7f 100644 --- a/src/edit.tsx +++ b/src/edit.tsx @@ -15,18 +15,19 @@ import { edit, external } from '@wordpress/icons'; import { useState } from '@wordpress/element'; import { BlockControls, InspectorControls } from '@wordpress/block-editor'; -import { BlockAttributes, EmbedMode } from '@/types'; +import { IBlockAttributes, EmbedMode, IForm } 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'; -const Edit: React.FC> = ( { attributes, setAttributes, className } ) => { +const Edit: React.FC> = ( { attributes, setAttributes, className } ) => { const [ selectDialogOpen, setSelectDialogOpen ] = useState( false ); - const handleForm = ( form: { [key: string]: any } ) => { + const handleForm = ( form: IForm ) => { setAttributes( { + orgId: form.orgId, formId: form.formId, seamlessEmbedCode: form.embedCodes.Seamless, iframeEmbedCode: form.embedCodes.IFrame, diff --git a/src/index.tsx b/src/index.tsx index 7e62005..5026f30 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,7 +4,7 @@ import { registerBlockType } from '@wordpress/blocks'; -import { BlockAttributes } from './types'; +import { IBlockAttributes } from './types'; /** * Internal dependencies @@ -14,7 +14,7 @@ import Save from './save'; import { ReactComponent as CogIcon } from './assets/cogicon.svg'; -registerBlockType( 'cognito-forms/cognito-embed', { +registerBlockType( 'cognito-forms/cognito-embed', { title: 'Cognito Forms', icon: CogIcon, description: 'Easily build powerful forms.', @@ -24,6 +24,9 @@ registerBlockType( 'cognito-forms/cognito-embed', { html: false, }, attributes: { + orgId: { + type: 'string', + }, formId: { type: 'string', }, diff --git a/src/save.tsx b/src/save.tsx index 0d37a9e..19619f0 100644 --- a/src/save.tsx +++ b/src/save.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import { BlockSaveProps } from '@wordpress/blocks'; -import { EmbedMode, BlockAttributes } from './types'; +import { EmbedMode, IBlockAttributes } from './types'; -const Save: React.FC> = ( { attributes: { formId, embedMode, seamlessEmbedCode, iframeEmbedCode } } ) => { +const Save: React.FC> = ( { attributes: { formId, embedMode, seamlessEmbedCode, iframeEmbedCode } } ) => { let embedCode = ''; switch ( embedMode ) { diff --git a/src/types.ts b/src/types.ts index e1a5cc4..3d14cea 100644 --- a/src/types.ts +++ b/src/types.ts @@ -3,10 +3,21 @@ export enum EmbedMode { IFrame, } -export interface BlockAttributes { +export interface IBlockAttributes { + orgId: string; formId: string; iframeEmbedCode: string; seamlessEmbedCode: string; ampEmbedCode: string; embedMode: EmbedMode; } + +export interface IForm { + orgId: string; + formId: string; + embedCodes: { + Seamless: string; + IFrame: string; + Amp: string; + } +}