Refactor jet-engine:map-field compatibility module.

Added initial realization of the check-mark block

compatibility/jet-engine/assets/build/editor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react'), 'version' => '2f610fc07531eefc463e');
+<?php return array('dependencies' => array('react'), 'version' => 'a81a61dc77351a94db17');

compatibility/jet-engine/assets/src/editor/main.js

@@ -1,22 +1,7 @@
-import * as mapField from './map-field';
 import UpdateOptionsAction from './update.options.action'
 
 const {
 	      addAction,
       } = JetFBActions;
 
-const {
-	      addFilter,
-      } = wp.hooks;
-
-addAction( 'update_options', UpdateOptionsAction );
-
-addFilter(
-	'jet.fb.register.fields',
-	'jet-form-builder/map-field',
-	blocks => {
-		blocks.push( mapField );
-
-		return blocks;
-	},
-);
+addAction( 'update_options', UpdateOptionsAction );

compatibility/jet-engine/blocks/check-mark/.babelrc

@@ -0,0 +1,3 @@
+{
+	"extends": "../../../../.babelrc"
+}

compatibility/jet-engine/blocks/check-mark/.gitattributes

@@ -0,0 +1,5 @@
+assets/src          export-ignore
+package.json        export-ignore
+.babelrc            export-ignore
+webpack.config.js   export-ignore
+.gitattributes      export-ignore

compatibility/jet-engine/blocks/check-mark/assets/src/editor/block/edit.js

@@ -0,0 +1,232 @@
+import preview from './preview';
+import {
+	PanelBody,
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption, Flex,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import {
+	InspectorControls,
+	useBlockProps,
+	MediaUploadCheck,
+	MediaUpload,
+} from '@wordpress/block-editor';
+import Help from '../components/Help';
+import SimpleChooseMediaButton from '../components/SimpleChooseMediaButton';
+
+export default function CheckMarkEdit( props ) {
+	const {
+		      setAttributes,
+		      attributes,
+	      } = props;
+
+	const blockProps = useBlockProps();
+
+	const [ isChecked, toggleChecked ] = useCheckedChoiceState();
+
+	const controlImageUrl = (
+		() => {
+			if ( 'image' !== attributes.controlType ) {
+				return false;
+			}
+
+			return isChecked
+			       ? attributes?.checkedImageControl?.url
+			       : attributes?.defaultImageControl?.url;
+		}
+	)();
+
+	if ( attributes.isPreview ) {
+		return <div style={ {
+			width: '100%',
+			display: 'flex',
+			justifyContent: 'center',
+		} }>
+			{ preview }
+		</div>;
+	}
+
+	return <>
+		<span { ...blockProps }>
+			{ !!controlImageUrl
+			  ? <img
+				  src={ controlImageUrl }
+				  className={ 'jet-form-builder-check-mark-img' }
+				  alt={ fieldName + ' ' + __( 'control', 'jet-form-builder' ) }
+			  />
+			  : <input
+				  type="checkbox"
+				  checked={ isChecked }
+				  onChange={ () => toggleChecked( prev => !prev ) }
+				  className={ 'jet-form-builder-check-mark-input' }
+			  /> }
+		</span>
+		<InspectorControls>
+			<div style={ { padding: '20px' } }>
+				<ToggleGroupControl
+					onChange={ controlType => setAttributes(
+						{ controlType },
+					) }
+					value={ attributes.controlType }
+					label={ __( 'Control type', 'jet-form-builder' ) }
+					isBlock={ true }
+				>
+					<ToggleGroupControlOption
+						label={ __( 'HTML input', 'jet-form-builder' ) }
+						value={ '' }
+					/>
+					<ToggleGroupControlOption
+						label={ __( 'Image', 'jet-form-builder' ) }
+						value={ 'image' }
+					/>
+				</ToggleGroupControl>
+				<ToggleControl
+					label={ __(
+						'Show checked state',
+						'jet-form-builder',
+					) }
+					onChange={ () => toggleChecked( prev => !prev ) }
+				/>
+			</div>
+		</InspectorControls>
+		{ 'image' === attributes.controlType && <>
+			<InspectorControls>
+				<MediaUploadCheck>
+					<PanelBody
+						title={ __( 'Control Default', 'jet-form-builder' ) }
+					>
+						<Flex
+							align={ 'center' }
+							justify={ 'flex-start' }
+							style={ {
+								marginBottom: '8px',
+							} }
+						>
+							<label>
+								{ __(
+									'Default icon',
+									'jet-form-builder',
+								) }
+							</label>
+							<MediaUpload
+								onSelect={ media => setAttributes( {
+									defaultImageControl: {
+										...(
+											attributes.defaultImageControl ??
+											{}
+										),
+										url: media.url,
+										id: media.id,
+									},
+								} ) }
+								allowedTypes={ [ 'image/*' ] }
+								value={ attributes.defaultImageControl?.id }
+								render={
+									( { open } ) => <SimpleChooseMediaButton
+										open={ open }
+										hasValue={ !!attributes.defaultImageControl?.url }
+									/>
+								}
+							/>
+							{ !!attributes.defaultImageControl?.url && <Button
+								isDestructive
+								isSmall
+								icon="no-alt"
+								onClick={ () => setAttributes( {
+									defaultImageControl: {},
+								} ) }
+								label={ __(
+									'Remove default icon',
+									'jet-form-builder',
+								) }
+							/> }
+						</Flex>
+						{ !!attributes.defaultImageControl?.url && <>
+							<img
+								src={ attributes.defaultImageControl?.url }
+								style={ {
+									maxWidth: '150px',
+									maxHeight: '150px',
+									margin: '1em 0',
+								} }
+							/>
+						</> }
+						<Help>
+							{ __(
+								'Choose icon for default state of choice',
+								'jet-form-builder',
+							) }
+						</Help>
+					</PanelBody>
+					<PanelBody
+						title={ __( 'Control Checked', 'jet-form-builder' ) }
+					>
+						<Flex
+							align={ 'center' }
+							justify={ 'flex-start' }
+							style={ {
+								marginBottom: '8px',
+							} }
+						>
+							<label>
+								{ __(
+									'Checked icon',
+									'jet-form-builder',
+								) }
+							</label>
+							<MediaUpload
+								onSelect={ media => setAttributes( {
+									checkedImageControl: {
+										...(
+											attributes.checkedImageControl ??
+											{}
+										),
+										url: media.url,
+										id: media.id,
+									},
+								} ) }
+								allowedTypes={ [ 'image/*' ] }
+								value={ attributes.checkedImageControl?.id }
+								render={
+									( { open } ) => <SimpleChooseMediaButton
+										open={ open }
+										hasValue={ !!attributes.checkedImageControl?.url }
+									/>
+								}
+							/>
+							{ !!attributes.checkedImageControl?.url && <Button
+								isDestructive
+								isSmall
+								icon="no-alt"
+								onClick={ () => setAttributes( {
+									checkedImageControl: {},
+								} ) }
+								label={ __(
+									'Remove checked icon',
+									'jet-form-builder',
+								) }
+							/> }
+						</Flex>
+						{ !!attributes.checkedImageControl?.url && <>
+							<img
+								src={ attributes.checkedImageControl?.url }
+								style={ {
+									maxWidth: '150px',
+									maxHeight: '150px',
+									margin: '1em 0',
+								} }
+							/>
+						</> }
+						<Help>
+							{ __(
+								'Choose icon for checked state of choice',
+								'jet-form-builder',
+							) }
+						</Help>
+					</PanelBody>
+				</MediaUploadCheck>
+			</InspectorControls>
+		</> }
+	</>;
+}

compatibility/jet-engine/blocks/check-mark/assets/src/editor/block/index.js

@@ -0,0 +1,59 @@
+import CheckMarkEdit from './edit';
+import metadata from '@root/block.json';
+
+const { __ } = wp.i18n;
+
+const { createBlock } = wp.blocks;
+
+const { name, icon = '' } = metadata;
+
+metadata.attributes.isPreview = {
+	type: 'boolean',
+	default: false,
+};
+
+const settings = {
+	icon: <span dangerouslySetInnerHTML={ { __html: icon } }></span>,
+	description: __(
+		`Input coordinates by pinning the needed location on the map easily. 
+Save the value conveniently into the Map meta field of JetEngine.`,
+		'jet-form-builder',
+	),
+	edit: CheckMarkEdit,
+	example: {
+		attributes: {
+			isPreview: true,
+		},
+	},
+	transforms: {
+		to: [
+			{
+				type: 'block',
+				blocks: [ 'jet-forms/text-field' ],
+				transform: ( attributes ) => {
+					return createBlock( 'jet-forms/text-field',
+						{ ...attributes } );
+				},
+				priority: 0,
+			},
+		],
+		from: [
+			{
+				type: 'block',
+				blocks: [
+					'jet-forms/text-field',
+				],
+				transform: ( attributes ) => {
+					return createBlock( name, { ...attributes } );
+				},
+				priority: 0,
+			},
+		],
+	},
+};
+
+export {
+	metadata,
+	name,
+	settings,
+};

compatibility/jet-engine/blocks/check-mark/assets/src/editor/components/Help.jsx

@@ -0,0 +1,10 @@
+import { styled } from '@linaria/react';
+
+const Help = styled.p`
+    font-size: 12px;
+    font-style: normal;
+    color: rgb(117, 117, 117);
+    margin-top: 0
+`;
+
+export default Help;

compatibility/jet-engine/blocks/check-mark/assets/src/editor/components/SimpleChooseMediaButton.jsx

@@ -0,0 +1,20 @@
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function SimpleChooseMediaButton( { open, hasValue = false } ) {
+	return <Button
+		isSecondary
+		isSmall
+		icon="edit"
+		onClick={ open }
+		className={ hasValue ? 'jet-fb has-value' : '' }
+		label={ hasValue ? __( 'Edit icon', 'jet-form-builder' )
+		                 : __( 'Choose icon', 'jet-form-builder' ) }
+	>
+		{ hasValue
+		  ? __( 'Edit', 'jet-form-builder' )
+		  : __( 'Choose', 'jet-form-builder' ) }
+	</Button>;
+}
+
+export default SimpleChooseMediaButton;

compatibility/jet-engine/blocks/check-mark/assets/src/editor/hooks/useCheckedChoiceState.js

@@ -0,0 +1,7 @@
+import { useState } from '@wordpress/element';
+
+function useCheckedChoiceState() {
+	return useState( false );
+}
+
+export default useCheckedChoiceState;

compatibility/jet-engine/blocks/check-mark/assets/src/editor/index.js

@@ -0,0 +1,12 @@
+import * as checkMark from './block';
+import { addFilter } from '@wordpress/hooks';
+
+addFilter(
+	'jet.fb.register.fields',
+	'jet-form-builder/check-mark',
+	blocks => {
+		blocks.push( checkMark );
+
+		return blocks;
+	},
+);