#2766 move new field rendering to a field group component and write t…

…ests for that

clients/render/build/index.min.js

@@ -23524,6 +23524,8 @@ module.exports = { "default": __webpack_require__(207), __esModule: true };
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types__ = __webpack_require__(1);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_prop_types__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__RenderComponentViaPortal__ = __webpack_require__(708);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__CalderaFormsFieldGroup__ = __webpack_require__(712);
+
 
 
 
@@ -23543,15 +23545,7 @@ var CalderaFormsFieldRender = function CalderaFormsFieldRender(props) {
 	    shouldDisable = props.shouldDisable,
 	    shouldShow = props.shouldShow;
 	var type = field.type,
-	    outterIdAttr = field.outterIdAttr,
-	    fieldId = field.fieldId,
-	    fieldLabel = field.fieldLabel,
-	    fieldCaption = field.fieldCaption,
-	    required = field.required,
-	    fieldPlaceHolder = field.fieldPlaceHolder,
-	    fieldDefault = field.fieldDefault,
-	    fieldValue = field.fieldValue,
-	    fieldIdAttr = field.fieldIdAttr;
+	    outterIdAttr = field.outterIdAttr;
 
 
 	if (!shouldShow) {
@@ -23566,27 +23560,13 @@ var CalderaFormsFieldRender = function CalderaFormsFieldRender(props) {
 				domNode: document.getElementById(outterIdAttr),
 				key: outterIdAttr
 			},
-			wp.element.createElement(
-				'div',
-				null,
-				wp.element.createElement(
-					'label',
-					{
-						htmlFor: fieldIdAttr
-					},
-					fieldLabel
-				),
-				wp.element.createElement('input', {
-					type: type,
-					disabled: shouldDisable,
-					value: fieldValue,
-					required: required,
-					className: 'form-control',
-					id: fieldIdAttr,
-					placeholder: fieldPlaceHolder,
-					onChange: onChange
-				})
-			)
+			wp.element.createElement(__WEBPACK_IMPORTED_MODULE_3__CalderaFormsFieldGroup__["a" /* CalderaFormsFieldGroup */], {
+				field: field,
+				onChange: onChange,
+				shouldShow: shouldShow,
+				shouldDisable: shouldDisable
+
+			})
 		)
 	);
 };
@@ -23721,6 +23701,102 @@ var document = __webpack_require__(7).document;
 module.exports = document && document.documentElement;
 
 
+/***/ }),
+
+/***/ 712:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CalderaFormsFieldGroup; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types__ = __webpack_require__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_prop_types__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__CalderaFormsFieldRender__ = __webpack_require__(707);
+
+
+
+
+/**
+ * Render a Caldera Forms v2 field
+ *
+ * @since 1.8.0
+ *
+ * @param props
+ * @return {*}
+ * @constructor
+ */
+var CalderaFormsFieldGroup = function CalderaFormsFieldGroup(props) {
+	var field = props.field,
+	    onChange = props.onChange,
+	    shouldDisable = props.shouldDisable,
+	    shouldShow = props.shouldShow;
+	var type = field.type,
+	    outterIdAttr = field.outterIdAttr,
+	    fieldId = field.fieldId,
+	    fieldLabel = field.fieldLabel,
+	    fieldCaption = field.fieldCaption,
+	    required = field.required,
+	    fieldPlaceHolder = field.fieldPlaceHolder,
+	    fieldDefault = field.fieldDefault,
+	    fieldValue = field.fieldValue,
+	    fieldIdAttr = field.fieldIdAttr;
+
+
+	if (!shouldShow) {
+		return wp.element.createElement(__WEBPACK_IMPORTED_MODULE_0_react__["Fragment"], null);
+	}
+	return wp.element.createElement(
+		'div',
+		{ className: 'form-group cf2-field-group' },
+		wp.element.createElement(
+			'label',
+			{
+				className: 'control-label',
+				htmlFor: fieldIdAttr
+			},
+			fieldLabel
+		),
+		wp.element.createElement('input', {
+			type: type,
+			disabled: shouldDisable,
+			value: fieldValue,
+			required: required,
+			className: 'form-control',
+			id: fieldIdAttr,
+			placeholder: fieldPlaceHolder,
+			onChange: onChange
+		})
+	);
+};
+
+/**
+ * Prop Type definitions for CalderaFormsFieldGroup component
+ *
+ * @since 1.8.0
+ *
+ * @type {{field: *, onChange: (e|*), shouldShow: *, shouldDisable: *}}
+ */
+CalderaFormsFieldGroup.propTypes = {
+	field: __WEBPACK_IMPORTED_MODULE_2__CalderaFormsFieldRender__["a" /* CalderaFormsFieldPropType */],
+	onChange: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.func.isRequired,
+	shouldShow: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.bool,
+	shouldDisable: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.bool
+};
+
+/**
+ * Default props for the CalderaFormsFieldGroup component
+ *
+ * @since 1.8.0
+ *
+ * @type {{shouldShow: boolean, shouldDisable: boolean, fieldValue: string}}
+ */
+CalderaFormsFieldGroup.defaultProps = {
+	shouldShow: true,
+	shouldDisable: false,
+	fieldValue: ''
+};
+
 /***/ }),
 
 /***/ 72:

clients/render/components/CalderaFormsFieldGroup.js

@@ -0,0 +1,84 @@
+import {Component, Fragment} from 'react';
+import PropTypes from 'prop-types';
+import {CalderaFormsFieldPropType} from "./CalderaFormsFieldRender";
+
+/**
+ * Render a Caldera Forms v2 field
+ *
+ * @since 1.8.0
+ *
+ * @param props
+ * @return {*}
+ * @constructor
+ */
+export const CalderaFormsFieldGroup = (props) => {
+	const {field, onChange, shouldDisable, shouldShow} = props;
+	const {
+		type,
+		outterIdAttr,
+		fieldId,
+		fieldLabel,
+		fieldCaption,
+		required,
+		fieldPlaceHolder,
+		fieldDefault,
+		fieldValue,
+		fieldIdAttr,
+	} = field;
+
+	if (!shouldShow) {
+		return <Fragment/>;
+	}
+	return (
+
+			<div className={'form-group cf2-field-group'}>
+				<label
+					className={'control-label'}
+					htmlFor={fieldIdAttr}
+				>
+					{fieldLabel}
+				</label>
+				<input
+					type={type}
+					disabled={shouldDisable}
+					value={fieldValue}
+					required={required}
+					className={'form-control'}
+					id={fieldIdAttr}
+					placeholder={fieldPlaceHolder}
+					onChange={onChange}
+				/>
+			</div>
+
+	);
+
+}
+
+
+
+/**
+ * Prop Type definitions for CalderaFormsFieldGroup component
+ *
+ * @since 1.8.0
+ *
+ * @type {{field: *, onChange: (e|*), shouldShow: *, shouldDisable: *}}
+ */
+CalderaFormsFieldGroup.propTypes = {
+	field: CalderaFormsFieldPropType,
+	onChange: PropTypes.func.isRequired,
+	shouldShow: PropTypes.bool,
+	shouldDisable: PropTypes.bool
+};
+
+/**
+ * Default props for the CalderaFormsFieldGroup component
+ *
+ * @since 1.8.0
+ *
+ * @type {{shouldShow: boolean, shouldDisable: boolean, fieldValue: string}}
+ */
+CalderaFormsFieldGroup.defaultProps = {
+	shouldShow: true,
+	shouldDisable: false,
+	fieldValue: ''
+};

clients/render/components/CalderaFormsFieldRender.js

@@ -1,6 +1,7 @@
 import {Component, Fragment} from 'react';
 import PropTypes from 'prop-types';
 import {RenderComponentViaPortal} from "./RenderComponentViaPortal";
+import {CalderaFormsFieldGroup} from "./CalderaFormsFieldGroup";
 
 /**
  * Render a Caldera Forms v2 field via a RenderComponentViaPortal to an element inside a Caldera Forms v1 field
@@ -16,14 +17,6 @@ export const CalderaFormsFieldRender = (props) => {
 	const {
 		type,
 		outterIdAttr,
-		fieldId,
-		fieldLabel,
-		fieldCaption,
-		required,
-		fieldPlaceHolder,
-		fieldDefault,
-		fieldValue,
-		fieldIdAttr,
 	} = field;
 
 	if (!shouldShow) {
@@ -35,23 +28,13 @@ export const CalderaFormsFieldRender = (props) => {
 				domNode={document.getElementById(outterIdAttr)}
 				key={outterIdAttr}
 			>
-				<div>
-					<label
-						htmlFor={fieldIdAttr}
-					>
-						{fieldLabel}
-					</label>
-					<input
-						type={type}
-						disabled={shouldDisable}
-						value={fieldValue}
-						required={required}
-						className={'form-control'}
-						id={fieldIdAttr}
-						placeholder={fieldPlaceHolder}
-						onChange={onChange}
-					/>
-				</div>
+				<CalderaFormsFieldGroup
+					field={field}
+					onChange={onChange}
+					shouldShow={shouldShow}
+					shouldDisable={shouldDisable}
+
+				/>
 			</RenderComponentViaPortal>
 		</Fragment>
 

clients/render/components/CalderaFormsRender.js

@@ -236,7 +236,7 @@ export class CalderaFormsRender extends Component {
 				})}
 
 			</Fragment>
-		)
+		);
 
 	}
 }

clients/render/components/index.js

@@ -0,0 +1,10 @@
+import {CalderaFormsFieldRender,CalderaFormsFieldPropType} from "./CalderaFormsFieldRender";
+import {CalderaFormsRender} from "./CalderaFormsRender";
+import {CalderaFormsFieldGroup} from "./CalderaFormsFieldGroup";
+
+export{
+	CalderaFormsFieldGroup,
+	CalderaFormsFieldPropType,
+	CalderaFormsFieldRender,
+	CalderaFormsRender
+}