1.js

const el = wp.element.createElement;

10.js

import CalderaProcessors from './CalderaProcessors';
import {withSelect,withDispatch} from '@wordpress/data';
import {CALDERA_FORMS_PROCESSORS_STORE_SLUG } from "./state/processorsStore";

/**
 * Main processors UI container wrapped with Redux(-like) state management
 */
const CalderaProcessorsWithState =  withSelect( (select, ownProps ) => {
	const {
		getProcessorsCollection,
		getProcessorTypes,
		getProcessorFromCollection,
	} = select(CALDERA_FORMS_PROCESSORS_STORE_SLUG);
	const processors = getProcessorsCollection();
	const processorTypes = getProcessorTypes();
	return {
		getProcessorFromCollection,
		processors,
		processorTypes,
		getProcessorTypes,
		form: ownProps.form
	};
} )( withDispatch( ( dispatch ) => {
	const {
		addProcessor,
		newProcessor,
		removeProcessor,
		updateProcessor,
		setProcessorType
	} = dispatch( CALDERA_FORMS_PROCESSORS_STORE_SLUG );
	return {
		onAddProcessor(processorConfig) {
			addProcessor( processorConfig );
		},
		onNewProcessor(){
			newProcessor()
		},
		onRemoveProcessor(processorId){
			removeProcessor(processorId);
		},
		onUpdateProcessor(processor){
			updateProcessor(processor);
		},
		onUpdateProcessorType(processorType, processorTypeIdentifier){
			setProcessorType(processorType, processorTypeIdentifier)
		}
	};
} )( CalderaProcessors ) );

export default CalderaProcessorsWithState;

2.js

import { Component } from '@wordpress/element';

3.js

import { Component } from '@wordpress/element';

4.sh

npm i -D @wordpress/element

5.sh

npm i  @wordpress/element

6.js

import { Component } from '@wordpress/element';

7.js

import React from 'react';
import PropTypes from 'prop-types';
import {List} from "./components/Processors/List";
import {NewProcessor} from "./components/Processors/NewProcessor";

class CalderaProcessors extends React.PureComponent {
	render() {
		return(
			<div className="caldera-forms-processors">
				<List
					form={this.props.form}
					processors={this.props.processors}
					onUpdateProcessor={this.props.onUpdateProcessor}
					onRemoveProcessor={this.props.onRemoveProcessor}
					getProcessorFromCollection={this.props.getProcessorFromCollection}
					getProcessorTypes={this.props.getProcessorTypes}
				/>
				<NewProcessor
					onNewProcessor={this.props.onNewProcessor}
				/>
			</div>
		);
	}
}

CalderaProcessors.propTypes = {
	processors: PropTypes.instanceOf(Map).isRequired,
	processorTypes: PropTypes.instanceOf(Map).isRequired,
	form: PropTypes.object,
	onAddProcessor: PropTypes.func.isRequired,
	onNewProcessor: PropTypes.func.isRequired,
	onRemoveProcessor: PropTypes.func.isRequired,
	onUpdateProcessor: PropTypes.func.isRequired,
	onUpdateProcessorType: PropTypes.func.isRequired,
	getProcessorFromCollection: PropTypes.func.isRequired,
	getProcessorTypes: PropTypes.func.isRequired,
};

8.js

import CalderaProcessors from './CalderaProcessors';
import {withSelect,withDispatch} from '@wordpress/data';
import {CALDERA_FORMS_PROCESSORS_STORE_SLUG } from "./state/processorsStore";

const CalderaProcessorsWithState =  withSelect( (select, ownProps ) => {
	const {
		getProcessorsCollection,
		getProcessorTypes,
		getProcessorFromCollection,
	} = select(CALDERA_FORMS_PROCESSORS_STORE_SLUG);
	const processors = getProcessorsCollection();
	const processorTypes = getProcessorTypes();
	return {
		getProcessorFromCollection,
		processors,
		processorTypes,
		getProcessorTypes,
		form: ownProps.form
	};
} )( CalderaProcessors );

export default CalderaProcessorsWithState;

9.js

import CalderaProcessors from './CalderaProcessors';
import {withSelect,withDispatch} from '@wordpress/data';
import {CALDERA_FORMS_PROCESSORS_STORE_SLUG } from "./state/processorsStore";

const CalderaProcessorsWithState = withDispatch( ( dispatch ) => {
	const {
		addProcessor,
		newProcessor,
		removeProcessor,
		updateProcessor,
		setProcessorType
	} = dispatch( CALDERA_FORMS_PROCESSORS_STORE_SLUG );
	return {
		onAddProcessor(processorConfig) {
			addProcessor( processorConfig );
		},
		onNewProcessor(){
			newProcessor()
		},
		onRemoveProcessor(processorId){
			removeProcessor(processorId);
		},
		onUpdateProcessor(processor){
			updateProcessor(processor);
		},
		onUpdateProcessorType(processorType, processorTypeIdentifier){
			setProcessorType(processorType, processorTypeIdentifier)
		}
	};
} )( CalderaProcessors );

export default CalderaProcessorsWithState;