Skip to content

Instantly share code, notes, and snippets.

@Shelob9
Last active June 28, 2018 17:36
Show Gist options
  • Save Shelob9/ec4f694f4f4840b3dfcbebb78f5095ec to your computer and use it in GitHub Desktop.
Save Shelob9/ec4f694f4f4840b3dfcbebb78f5095ec to your computer and use it in GitHub Desktop.
const el = wp.element.createElement;
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;
import { Component } from '@wordpress/element';
import { Component } from '@wordpress/element';
npm i -D @wordpress/element
npm i @wordpress/element
import { Component } from '@wordpress/element';
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,
};
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;
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment