#7 pass columnId properly to avoid key warnings

CalderaWP · Apr 9, 2019 · 27c7712 · 27c7712
1 parent 247a4b1
commit 27c7712
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 26 deletions.
diff --git a/packages/forms/src/CF2Form/CF2Form.js b/packages/forms/src/CF2Form/CF2Form.js
@@ -3,13 +3,25 @@ import getCf2Token from "../Http/handlers/getCf2Token";
 import handleFormSubmitCf2 from "../Http/handlers/handleFormSubmitCf2";
 import React, {useState, useEffect, Fragment} from 'react';
 import { Notice } from '@wordpress/components';
+import PropTypes from "prop-types";
 
+/**
+ *
+ * @param apiRootUri
+ * @param formConfig
+ * @param axios
+ * @param _tokens
+ * @return {*}
+ * @constructor
+ */
 export const CF2Form = (
 	{
 		apiRootUri,
 		formConfig,
 		axios,
-		_tokens
+		_tokens,
+		onChange,
+		onBlur,
 	}
 ) => {
 
@@ -66,8 +78,9 @@ export const CF2Form = (
 					form={form}
 					fields={form.fields}
 					onChange={newValues => {
-
+						onChange(onChange);
 					}}
+					onBlur={onBlur}
 					onSubmit={(values, actions) => {
 						setIsSubmitting(true);
 						actions.setSubmitting(false);
@@ -97,3 +110,9 @@ export const CF2Form = (
 	);
 
 }
+
+CF2Form.propTypes = {...CalderaForm.propTypes};
+
+const noop = () => {
+};
+CF2Form.defaultProps = {...CalderaForm.defaultProps};
diff --git a/packages/forms/src/CF2Form/cf2Api.js b/packages/forms/src/CF2Form/cf2Api.js
@@ -0,0 +1,26 @@
+import getCf2Token from "../Http/handlers/getCf2Token";
+import handleFormSubmitCf2 from "../Http/handlers/handleFormSubmitCf2";
+
+async function cf2Api(apiRootUri, formId, axios) {
+
+	return {
+		getCf2Token,
+		handleFormSubmitCf2(
+			{
+				entryValues,
+				tokens,
+			}
+		) {
+			return handleFormSubmitCf2({
+				apiRootUri,
+				formId,
+				entryValues,
+				tokens,
+				axios
+			})
+		}
+	}
+
+}
+
+export default cf2Api;
diff --git a/packages/forms/src/CalderaForm/CalderaForm.js b/packages/forms/src/CalderaForm/CalderaForm.js
@@ -6,7 +6,6 @@ import {updateRows} from './util/updateRows';
 import {collectFieldValues, classNameService, Row, Column, FieldArea} from '@calderajs/components';
 import {applyRuleToState} from './state/applyRule';
 
-import {CalderaGrid} from './CalderaGrid';
 import classNames from "classnames";
 
 
@@ -154,9 +153,6 @@ export class CalderaForm extends Component {
 		)
 	};
 
-	 xRender = () => {
-		return <div>Hi</div>
-	}
 
 	render() {
 		const {onSubmit,form} = this.props;
@@ -166,24 +162,13 @@ export class CalderaForm extends Component {
 			<div
 				className={classNameService.getFormWrapperClassNames(form.ID)}
 			>
-				<div>Above</div>
 				<Formik
 					className={'caldera-form'}
 					initialValues={initialValues}
 					onSubmit={onSubmit}
-					render={({
-								 errors,
-								 status,
-								 touched,
-								 isSubmitting,
-								 handleChange,
-								 handleBlur,
-								 setFieldValue,
-								 handleSubmit,
-								 values
-							 }) => {
-						return this.xRender();
-					} }
+					render={props => (
+						<Fragment>{this.renderForm(props)}</Fragment>
+					)}
 				/>
 			</div>
 		);

diff --git a/packages/forms/src/CalderaForm/__snapshots__/CalderaForms.test.js.snap b/packages/forms/src/CalderaForm/__snapshots__/CalderaForms.test.js.snap
@@ -13,6 +13,7 @@ exports[`Caldera Forms Forms 1`] = `
     >
       <div
         className="caldera-column sc-bdVaJa iHZvIS"
+        id="1aaaaa"
       >
         <div
           className="caldera-field-wrapper caldera-field-wrapper-text"
@@ -50,6 +51,7 @@ exports[`Caldera Forms Forms 1`] = `
       </div>
       <div
         className="caldera-column sc-bdVaJa iHZvIS"
+        id="1b"
       >
         <div
           className="caldera-field-wrapper caldera-field-wrapper-text"

diff --git a/packages/forms/src/CalderaForm/index.js b/packages/forms/src/CalderaForm/index.js
@@ -1,2 +1 @@
 export { CalderaForm } from './CalderaForm';
-export { CalderaGrid } from './CalderaGrid';
diff --git a/packages/forms/src/CalderaForm/util/updateRows.js b/packages/forms/src/CalderaForm/util/updateRows.js
@@ -25,8 +25,10 @@ export const updateRows = (newState, rows, fields) => {
 			};
 			if (row.columns) {
 				row.columns.forEach(column => {
+					const {columnId} = column;
 					if (! column.render) {
 						let outputColumn = {
+							columnId,
 							fields: [],
 						};
 						if (column.fields) {

diff --git a/packages/forms/src/CalderaForm/util/updateRows.test.js b/packages/forms/src/CalderaForm/util/updateRows.test.js
@@ -152,8 +152,41 @@ describe('updateRows', () => {
 			}
 		];
 		expect( typeof updateRows(state,rows,[field])[0].columns[0].render).toEqual('function');
+
+
 	});
 
+	it( 'sets columnId', () => {
+		const field = {
+			fieldType: 'input',
+			html5Type: 'number',
+			fieldId: 'showField',
+		};
+
+		const state = new ConditionalState( {
+			hideField: 'h',
+			showField: 's'
+		});
+		const rows = updateRows(state,[
+			{
+				rowId: 'r1',
+				columns: [
+					{
+						fields: [field, checkboxField],
+						width: '1/2',
+						columnId: '1a'
+					},
+					{
+						fields: [textField],
+						width: '1/4',
+						columnId: '1b'
+					}
+				]
+			}
+		],[field]);
+		expect(  rows[0].columns[0].columnId).toEqual('1a');
+		expect(  rows[0].columns[1].columnId).toEqual('1b');
+	})
 	it( 'should allow fields to have render', () => {
 		const _Field = props => <input id={'test808'} type={'number'}/>;
 		const state = new ConditionalState( {

diff --git a/packages/forms/src/FormEditor/Processors/__snapshots__/Processor.test.js.snap b/packages/forms/src/FormEditor/Processors/__snapshots__/Processor.test.js.snap
@@ -58,6 +58,7 @@ Array [
             >
               <div
                 className="caldera-column sc-bdVaJa iHZvIS"
+                id="c-test-1-0"
               >
                 <div
                   className="caldera-field-wrapper caldera-field-wrapper-text"
@@ -153,6 +154,7 @@ Array [
             >
               <div
                 className="caldera-column sc-bdVaJa iHZvIS"
+                id="c-test-1-1"
               >
                 <div
                   className="caldera-field-wrapper caldera-field-wrapper-text"
@@ -208,6 +210,7 @@ Array [
             >
               <div
                 className="caldera-column sc-bdVaJa iHZvIS"
+                id="c-test-1-2"
               >
                 <div
                   className="caldera-field-wrapper caldera-field-wrapper-text"

diff --git a/packages/forms/src/HorizontalForm/__snapshots__/HorizontalForm.test.js.snap b/packages/forms/src/HorizontalForm/__snapshots__/HorizontalForm.test.js.snap
@@ -13,6 +13,7 @@ exports[`HorizontalForm Matches snapshot 1`] = `
     >
       <div
         className="caldera-column sc-bdVaJa iHZvIS"
+        id="c-test-1-0"
       >
         <div
           className="caldera-field-wrapper caldera-field-wrapper-text"
@@ -108,6 +109,7 @@ exports[`HorizontalForm Matches snapshot 1`] = `
     >
       <div
         className="caldera-column sc-bdVaJa iHZvIS"
+        id="c-test-1-1"
       >
         <div
           className="caldera-field-wrapper caldera-field-wrapper-text"
@@ -163,6 +165,7 @@ exports[`HorizontalForm Matches snapshot 1`] = `
     >
       <div
         className="caldera-column sc-bdVaJa iHZvIS"
+        id="c-test-1-2"
       >
         <div
           className="caldera-field-wrapper caldera-field-wrapper-text"

diff --git a/packages/forms/src/export.test.js b/packages/forms/src/export.test.js
@@ -1,6 +1,5 @@
 import {
 	CalderaForm,
-	CalderaGrid,
 	FormClient,
 	formClientFactory,
 	HorizontalForm,
@@ -19,9 +18,6 @@ describe('Exports', () => {
 		expect(typeof CalderaForm).toBe('function');
 	});
 
-	it('exports CalderaGrid', () => {
-		expect(typeof CalderaGrid).toBe('function');
-	});
 
 	it('exports formClientFactory', () => {
 		expect(typeof formClientFactory).toBe('function');

diff --git a/packages/forms/src/index.js b/packages/forms/src/index.js
@@ -1,4 +1,3 @@
-export { CalderaGrid } from './CalderaForm/CalderaGrid';
 export { CalderaForm } from './CalderaForm/CalderaForm';
 export { CF2Form } from './CF2Form/CF2Form';
 import FormClient from './Http/FormClient';
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export { CalderaForm } from './CalderaForm';
		export { CalderaGrid } from './CalderaGrid';