improved Required control options - added more validation checks (res…

…olves #277)

changed `lzb.editor.control.isValueValid` hook to `lzb.editor.control.validate`

assets/components/render-controls/index.js

@@ -3,7 +3,6 @@
  */
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { cloneDeep } from 'lodash';
-import { __ } from '@wordpress/i18n';
 import { Component, Fragment, RawHTML } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 import { PanelBody, Notice } from '@wordpress/components';
@@ -13,7 +12,7 @@ import { PanelBody, Notice } from '@wordpress/components';
  */
 import getControlTypeData from '../../utils/get-control-type-data';
 import getControlValue from '../../utils/get-control-value';
-import isControlValueValid from '../../utils/is-control-value-valid';
+import checkControlValidity from '../../utils/check-control-validity';
 
 let options = window.lazyblocksGutenberg;
 if (!options || !options.blocks || !options.blocks.length) {
@@ -288,29 +287,22 @@ export default class RenderControls extends Component {
 			}
 
 			if (controlResult) {
+				const val = controlRenderData.getValue();
 				let controlNotice = '';
 
 				// show error for required fields
-				if (
-					controlTypeData &&
-					controlTypeData.restrictions.required_settings &&
-					controlData.required &&
-					controlData.required === 'true'
-				) {
-					const val = controlRenderData.getValue();
-
-					if (!isControlValueValid(val, controlData)) {
-						controlNotice = (
-							<Notice
-								key={`notice-${controlData.name}`}
-								status="warning"
-								isDismissible={false}
-								className="lzb-constructor-notice"
-							>
-								{__('This field is required', 'lazy-blocks')}
-							</Notice>
-						);
-					}
+				const requiredError = checkControlValidity(val, controlData);
+				if (requiredError) {
+					controlNotice = (
+						<Notice
+							key={`notice-${controlData.name}`}
+							status="warning"
+							isDismissible={false}
+							className="lzb-constructor-notice"
+						>
+							{requiredError}
+						</Notice>
+					);
 				}
 
 				if (placement === 'inspector') {

assets/editor/blocks/main/edit.js

@@ -25,7 +25,7 @@ import {
 import PreviewServerCallback from '../../../components/preview-server-callback';
 import RenderControls from '../../../components/render-controls';
 import getControlValue from '../../../utils/get-control-value';
-import isControlValueValid from '../../../utils/is-control-value-valid';
+import checkControlValidity from '../../../utils/check-control-validity';
 
 let options = window.lazyblocksGutenberg;
 if (!options || !options.blocks || !options.blocks.length) {
@@ -120,7 +120,7 @@ export default function BlockEdit(props) {
 									childIndex
 								);
 
-								if (!isControlValueValid(val, control)) {
+								if (checkControlValidity(val, control)) {
 									shouldLock += 1;
 								}
 							});
@@ -136,7 +136,7 @@ export default function BlockEdit(props) {
 						control
 					);
 
-					if (!isControlValueValid(val, control)) {
+					if (checkControlValidity(val, control)) {
 						shouldLock += 1;
 					}
 				}

assets/editor/index.scss

@@ -725,6 +725,7 @@
 
 	.components-notice {
 		margin: 0;
-		margin-top: 15px;
+		margin-top: -10px;
+		margin-bottom: 24px;
 	}
 }

assets/utils/check-control-validity/index.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies.
+ */
+import { applyFilters } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+import getControlTypeData from '../get-control-type-data';
+
+export default function checkControlValidity(val, control) {
+	let result = false;
+
+	const controlTypeData = getControlTypeData(control.type);
+
+	if (
+		controlTypeData &&
+		controlTypeData.restrictions.required_settings &&
+		control.required &&
+		control.required === 'true'
+	) {
+		const isValid = val !== '' && typeof val !== 'undefined';
+
+		// custom validation filter.
+		const { valid, message } = applyFilters(
+			'lzb.editor.control.validate',
+			applyFilters(
+				`lzb.editor.control.${control.type}.validate`,
+				{ valid: isValid, message: '' },
+				val,
+				control
+			),
+			val,
+			control
+		);
+
+		if (!valid) {
+			result = message || __('This field is required.', 'lazy-blocks');
+		}
+	}
+
+	return result;
+}

controls/checkbox/script.js

@@ -28,6 +28,27 @@ addFilter(
 	)
 );
 
+/**
+ * Required check.
+ *
+ * @param {Object} validationData
+ * @param {number} value
+ *
+ * @return {Object} validation data.
+ */
+function validate(validationData, value) {
+	if (!value) {
+		return {
+			valid: false,
+			message: 'Please tick this box if you want to proceed.',
+		};
+	}
+
+	return validationData;
+}
+addFilter('lzb.editor.control.checkbox.validate', 'lzb.editor', validate);
+addFilter('lzb.editor.control.toggle.validate', 'lzb.editor', validate);
+
 /**
  * Control settings render in constructor.
  */

controls/color/script.js

@@ -33,6 +33,26 @@ addFilter('lzb.editor.control.color.render', 'lzb.editor', (render, props) => (
 	</BaseControl>
 ));
 
+/**
+ * Required check.
+ *
+ * @param {Object} validationData
+ * @param {number} value
+ *
+ * @return {Object} validation data.
+ */
+function validate(validationData, value) {
+	if (!value) {
+		return {
+			valid: false,
+			message: 'Please choose a color.',
+		};
+	}
+
+	return validationData;
+}
+addFilter('lzb.editor.control.color.validate', 'lzb.editor', validate);
+
 /**
  * Control settings render in constructor.
  */

controls/date_time/script.js

@@ -167,6 +167,39 @@ function DateTimePicker(props) {
 	);
 }
 
+/**
+ * Required check.
+ *
+ * @param {Object} validationData
+ * @param {number} value
+ * @param {Object} data
+ *
+ * @return {Object} validation data.
+ */
+function validate(validationData, value, data) {
+	if (!value) {
+		if ('date' === data.date_time_picker) {
+			return {
+				valid: false,
+				message: 'Please select date.',
+			};
+		} else if ('time' === data.date_time_picker) {
+			return {
+				valid: false,
+				message: 'Please select time.',
+			};
+		}
+
+		return {
+			valid: false,
+			message: 'Please select date and time.',
+		};
+	}
+
+	return validationData;
+}
+addFilter('lzb.editor.control.date_time.validate', 'lzb.editor', validate);
+
 /**
  * Control render in editor.
  */

controls/email/script.js

@@ -33,6 +33,30 @@ addFilter('lzb.editor.control.email.render', 'lzb.editor', (render, props) => {
 	);
 });
 
+/**
+ * Required check.
+ *
+ * @param {Object} validationData
+ * @param {number} value
+ *
+ * @return {Object} validation data.
+ */
+function validate(validationData, value) {
+	if (!value) {
+		return { valid: false };
+	}
+
+	if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+		return {
+			valid: false,
+			message: 'Please enter a valid email address.',
+		};
+	}
+
+	return validationData;
+}
+addFilter('lzb.editor.control.email.validate', 'lzb.editor', validate);
+
 /**
  * Control settings render in constructor.
  */

controls/number/script.js

@@ -38,6 +38,45 @@ addFilter('lzb.editor.control.number.render', 'lzb.editor', (render, props) => {
 	);
 });
 
+/**
+ * Required check.
+ *
+ * @param {Object} validationData
+ * @param {number} value
+ * @param {Object} data
+ *
+ * @return {Object} validation data.
+ */
+function validate(validationData, value, data) {
+	if (value === '' || isNaN(value)) {
+		return { valid: false };
+	}
+
+	if (data.min !== '' && value < parseInt(data.min, 10)) {
+		return {
+			valid: false,
+			message: `Value must be greater than or equal to ${parseInt(
+				data.min,
+				10
+			)}.`,
+		};
+	}
+
+	if (data.max !== '' && value > parseInt(data.max, 10)) {
+		return {
+			valid: false,
+			message: `Value must be less than or equal to ${parseInt(
+				data.max,
+				10
+			)}.`,
+		};
+	}
+
+	return validationData;
+}
+addFilter('lzb.editor.control.number.validate', 'lzb.editor', validate);
+addFilter('lzb.editor.control.range.validate', 'lzb.editor', validate);
+
 /**
  * Control settings render in constructor.
  */

controls/radio/script.js

@@ -28,19 +28,29 @@ addFilter('lzb.editor.control.radio.render', 'lzb.editor', (render, props) => (
 ));
 
 /**
- * Control value valid in editor.
+ * Required check.
+ *
+ * @param {Object} validationData
+ * @param {number} value
+ * @param {Object} data
+ *
+ * @return {Object} validation data.
  */
-addFilter(
-	'lzb.editor.control.radio.isValueValid',
-	'lzb.editor',
-	(isValid, value, data) => {
-		if (data.allow_null === 'true') {
-			isValid = true;
-		}
+function validate(validationData, value, data) {
+	if (data.allow_null === 'true') {
+		return { valid: true };
+	}
 
-		return isValid;
+	if (!value) {
+		return {
+			valid: false,
+			message: 'Please select an item in the list.',
+		};
 	}
-);
+
+	return validationData;
+}
+addFilter('lzb.editor.control.radio.validate', 'lzb.editor', validate);
 
 /**
  * Control settings render in constructor.

controls/range/script.js

@@ -18,9 +18,9 @@ addFilter('lzb.editor.control.range.render', 'lzb.editor', (render, props) => (
 	<BaseControl {...useBlockControlProps(props, { label: false })}>
 		<RangeControl
 			label={props.data.label}
-			min={props.data.min}
-			max={props.data.max}
-			step={props.data.step}
+			min={props.data.min === '' ? -Infinity : parseFloat(props.data.min)}
+			max={props.data.max === '' ? Infinity : parseFloat(props.data.max)}
+			step={props.data.step === '' ? 1 : parseFloat(props.data.step)}
 			value={props.getValue()}
 			onChange={(val) => {
 				props.onChange(parseFloat(val));