feat: custom validations enabled

Author: vip-git

src/Form.jsx

@@ -24,7 +24,7 @@ export const UploadContext = React.createContext('upload');
 class Form extends React.Component {
   state = {
     data: this.props.formData,
-    validation: getValidationResult(this.props.schema, this.props.uiSchema, this.props.formData),
+    validation: getValidationResult(this.props.schema, this.props.uiSchema, this.props.formData, this.props.validations),
     id: this.props.prefixId || generate(),
   }
 
@@ -34,7 +34,7 @@ class Form extends React.Component {
       validation = {};
     }
     else {
-      validation = getValidationResult(this.props.schema, this.props.uiSchema, nextProps.formData);
+      validation = getValidationResult(nextProps.schema, nextProps.uiSchema, nextProps.formData, this.props.validations);
     }
     this.setState({
       validation,
@@ -46,7 +46,7 @@ class Form extends React.Component {
     const data = updateFormData(this.state.data, field, value);
     this.setState({
       data,
-      validation: getValidationResult(this.props.schema, this.props.uiSchema, data),
+      validation: getValidationResult(this.props.schema, this.props.uiSchema, data, this.props.validations),
     }, this.notifyChange);
   }
 

src/demo/body/Example.jsx

@@ -61,6 +61,12 @@ const FormComponent = React.memo(
 					<CustomRating onChange={onChange} formData={formData} {...rest} />
 			  ),
 			}}
+      validations={{
+        confirmPassword: (givenSchema, givenUISchema, value) => value !== formData.pass1 && ({
+          message: givenUISchema['ui:validations'].confirmPassword.message,
+          inline: true,
+        }),
+      }}
 			submitOnEnter
 			activityIndicatorEnabled
 		/>

src/demo/examples/validation/ui-schema.json

@@ -3,6 +3,12 @@
     "ui:widget": "password"
   },
   "pass2": {
-    "ui:widget": "password"
+    "ui:widget": "password",
+    "ui:validations": {
+      "confirmPassword": {
+				"message": "Both passwords should be the same (2)",
+				"inline": false
+      }
+    }
   }
 }

src/helpers/validation/get-validation-result.js

@@ -1,9 +1,12 @@
 // import update from 'immutability-helper';
 import forOwn from 'lodash/forOwn';
 import mapValues from 'lodash/mapValues';
+import flatten from 'lodash/flatten';
+import difference from 'lodash/difference';
 import rules from './rules';
 
-const validationResult = (schema, uiSchema, value) => {
+const isSubset = (source, target) => !difference(flatten(source), flatten(target)).length;
+const validationResult = (schema, uiSchema, value, customValidations) => {
   const rv = [];
   forOwn(rules, (rule, ruleId) => {
     const result = rule(schema, uiSchema, value);
@@ -14,20 +17,39 @@ const validationResult = (schema, uiSchema, value) => {
       });
     }
   });
+  if (
+    uiSchema
+    && uiSchema['ui:validations']
+    && customValidations
+    && isSubset(
+      Object.keys(uiSchema['ui:validations']),
+      Object.keys(customValidations),
+    )
+  ) {
+    forOwn(customValidations, (rule, ruleId) => {
+      const result = rule(schema, uiSchema, value);
+      if (result) {
+        rv.push({
+          rule: ruleId,
+          ...result,
+        });
+      }
+    });
+  }
   return rv;
 };
 
-const getFieldSpec = (schema, uiSchema, value) => {
+const getFieldSpec = (schema, uiSchema, value, customValidations) => {
   if (value === null) {
     return [];
   }
   if (typeof value === 'number' || typeof value === 'string') {
-    return validationResult(schema, uiSchema, value);
+    return validationResult(schema, uiSchema, value, customValidations);
   }
-  return mapValues(schema.properties, (s, p) => getFieldSpec(s, uiSchema[p], value[p]));
+  return mapValues(schema.properties, (s, p) => getFieldSpec(s, uiSchema[p], value[p], customValidations));
 };
 
-export default (schema, uiSchema, data) => {
-  const spec = getFieldSpec(schema, uiSchema, data);
+export default (schema, uiSchema, data, customValidations) => {
+  const spec = getFieldSpec(schema, uiSchema, data, customValidations);
   return { ...spec };
 };