cognitoforms-wordpress/src/edit.tsx

110 lines
2.8 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import { __ } from '@wordpress/i18n';
import { BlockEditProps } from '@wordpress/blocks';
2022-01-22 22:20:12 -05:00
import { Placeholder, ExternalLink, ToolbarButton } from '@wordpress/components';
import { edit } from '@wordpress/icons';
import {
BlockControls,
InspectorControls,
} from '@wordpress/block-editor';
2022-01-14 23:21:40 -05:00
import CogIcon from '@/assets/cogicon';
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';
const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttributes, className } ) => {
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,
} );
};
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 );
};
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>
<br />
<div className="components-placeholder__learn-more">
<ExternalLink
href={ __(
'https://wordpress.org/support/article/embeds/'
) }
>
{ __( 'Learn more about embeds' ) }
</ExternalLink>
</div>
</Placeholder>
</div>
);
}
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">
<div id="gutenpride-controls">
<fieldset>
<legend className="blocks-base-control__label">
{ __( 'Background color', 'gutenpride' ) }
</legend>
{/* <ColorPalette // Element Tag for Gutenberg standard colour selector
onChange={ onChangeBGColor } // onChange event callback
/> */}
</fieldset>
<fieldset>
<legend className="blocks-base-control__label">
{ __( 'Text color', 'gutenpride' ) }
</legend>
{/* <ColorPalette // Element Tag for Gutenberg standard colour selector
onChange={ onChangeTextColor } // onChange event callback
/> */}
</fieldset>
</div>
</InspectorControls>
<PreviewForm
formId={ attributes.formId } // TODO: this should actually be the form GUID
embedCode={ attributes.iframeEmbedCode }
/>
</div>
2022-01-14 23:21:40 -05:00
);
2022-01-19 21:45:46 -05:00
};
export default Edit;