#2766 set required and disabled props more intelligently

CalderaWP · Oct 19, 2018 · f449034 · f449034
1 parent 51184d1
commit f449034
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 19 deletions.
diff --git a/clients/render/build/index.min.js b/clients/render/build/index.min.js
@@ -23708,11 +23708,14 @@ module.exports = document && document.documentElement;
 
 "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);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends__ = __webpack_require__(36);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_prop_types__ = __webpack_require__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_prop_types__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__CalderaFormsFieldRender__ = __webpack_require__(707);
+
 
 
 
@@ -23744,8 +23747,20 @@ var CalderaFormsFieldGroup = function CalderaFormsFieldGroup(props) {
 
 
 	if (!shouldShow) {
-		return wp.element.createElement(__WEBPACK_IMPORTED_MODULE_0_react__["Fragment"], null);
+		return wp.element.createElement(__WEBPACK_IMPORTED_MODULE_1_react__["Fragment"], null);
+	}
+	var propsThatDoNotUseAnEquals = {};
+	if (shouldDisable) {
+		propsThatDoNotUseAnEquals.disabled = true;
+	} else {
+		propsThatDoNotUseAnEquals.disabled = false;
+	}
+	if (required) {
+		propsThatDoNotUseAnEquals.required = true;
+	} else {
+		propsThatDoNotUseAnEquals.required = false;
 	}
+
 	return wp.element.createElement(
 		'div',
 		{ className: 'form-group cf2-field-group' },
@@ -23757,16 +23772,15 @@ var CalderaFormsFieldGroup = function CalderaFormsFieldGroup(props) {
 			},
 			fieldLabel
 		),
-		wp.element.createElement('input', {
-			type: type,
-			disabled: shouldDisable,
+		wp.element.createElement('input', __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends___default()({
+			type: type
+		}, propsThatDoNotUseAnEquals, {
 			value: fieldValue,
-			required: required,
 			className: 'form-control',
 			id: fieldIdAttr,
 			placeholder: fieldPlaceHolder,
 			onChange: onChange
-		})
+		}))
 	);
 };
 
@@ -23778,10 +23792,10 @@ var CalderaFormsFieldGroup = function CalderaFormsFieldGroup(props) {
  * @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
+	field: __WEBPACK_IMPORTED_MODULE_3__CalderaFormsFieldRender__["a" /* CalderaFormsFieldPropType */],
+	onChange: __WEBPACK_IMPORTED_MODULE_2_prop_types___default.a.func.isRequired,
+	shouldShow: __WEBPACK_IMPORTED_MODULE_2_prop_types___default.a.bool,
+	shouldDisable: __WEBPACK_IMPORTED_MODULE_2_prop_types___default.a.bool
 };
 
 /**

diff --git a/clients/render/build/index.min.js.map b/clients/render/build/index.min.js.map
diff --git a/clients/render/components/CalderaFormsFieldGroup.js b/clients/render/components/CalderaFormsFieldGroup.js
@@ -29,6 +29,18 @@ export const CalderaFormsFieldGroup = (props) => {
 	if (!shouldShow) {
 		return <Fragment/>;
 	}
+	const propsThatDoNotUseAnEquals = {};
+	if (shouldDisable) {
+		propsThatDoNotUseAnEquals.disabled = true;
+	} else {
+		propsThatDoNotUseAnEquals.disabled = false;
+	}
+	if (required) {
+		propsThatDoNotUseAnEquals.required = true;
+	} else {
+		propsThatDoNotUseAnEquals.required = false;
+	}
+
 	return (
 
 			<div className={'form-group cf2-field-group'}>
@@ -40,9 +52,8 @@ export const CalderaFormsFieldGroup = (props) => {
 				</label>
 				<input
 					type={type}
-					disabled={shouldDisable}
+					{...propsThatDoNotUseAnEquals}
 					value={fieldValue}
-					required={required}
 					className={'form-control'}
 					id={fieldIdAttr}
 					placeholder={fieldPlaceHolder}

diff --git a/clients/tests/unit/render/CalderaFormsFieldGroup.test.js b/clients/tests/unit/render/CalderaFormsFieldGroup.test.js
@@ -93,7 +93,6 @@ describe('CalderaFormsFieldGroup component', () => {
 				...fieldConfig,
 				required: true
 			}}
-			shouldDiable={true}
 		/>);
 		const testInstance = testRenderer.root;