fix: ValidationPlugins interface allows custom plugins keys

Author: foxhound87

.gitignore

@@ -14,3 +14,4 @@ npm-debug.log
 coverage.lcov
 codecov.yml
 yarn-error.log
+.qodo

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 6.11.1 (master)
+
+- `ValidationPlugins` interface allows custom plugins keys.
+- Introduced `autocomplete` field prop.
+- Deprecated `checkValidationPlugins` method.
+
 # 6.11.0 (master)
 
 - Full `null` values support for fields values.

src/Base.ts

@@ -303,6 +303,7 @@ export default class Base implements BaseInterface {
       $autoFocus: _try(SeparatedPropsMode.autoFocus),
       $ref: _try(SeparatedPropsMode.refs),
       $nullable: _try(SeparatedPropsMode.nullable),
+      $autocomplete: _try(SeparatedPropsMode.autocomplete),
     };
 
     const field = this.state.form.makeField(

src/Bindings.ts

@@ -21,6 +21,7 @@ export default class Bindings implements BindingsInterface {
       label: FieldPropsEnum.label,
       placeholder: FieldPropsEnum.placeholder,
       disabled: FieldPropsEnum.disabled,
+      autocomplete: FieldPropsEnum.autocomplete,
       onChange: FieldPropsEnum.onChange,
       onBlur: FieldPropsEnum.onBlur,
       onFocus: FieldPropsEnum.onFocus,

src/Field.ts

@@ -81,6 +81,7 @@ const setupFieldProps = (instance: FieldInterface, props: any, data: any) =>
     $interceptors: props.$interceptors || data?.interceptors || null,
     $ref: props.$ref || data?.ref || undefined,
     $nullable: props.$nullable || data?.nullable || false,
+    $autocomplete: props.$autocomplete || data?.autocomplete || undefined,
   });
 
 const setupDefaultProp = (
@@ -162,6 +163,7 @@ export default class Field extends Base implements FieldInterface {
   $inputMode: string = undefined;
   $ref: any = undefined;
   $nullable: boolean = false;
+  $autocomplete: string|undefined = undefined;
 
   showError: boolean = false;
   errorSync: string | null = null;
@@ -259,7 +261,7 @@ export default class Field extends Base implements FieldInterface {
     this.state = state;
 
     this.setupField(key, path, struct, data, props, update);
-    this.checkValidationPlugins();
+    // this.checkValidationPlugins();
     this.initNestedFields(data, update);
 
     this.incremental = this.hasIncrementalKeys;
@@ -366,6 +368,10 @@ export default class Field extends Base implements FieldInterface {
     return propGetter(this, FieldPropsEnum.nullable);
   }
 
+  get autocomplete(): string|undefined {
+    return propGetter(this, FieldPropsEnum.autocomplete);
+  }
+
   get ref() {
     return propGetter(this, FieldPropsEnum.ref)
   }
@@ -687,26 +693,26 @@ export default class Field extends Base implements FieldInterface {
     return toJS(val);
   }
 
-  checkValidationPlugins(): void {
-    const { drivers } = this.state.form.validator;
-    const form = this.state.form.name ? `${this.state.form.name}/` : "";
-
-    if (_.isNil(drivers.dvr) && !_.isNil(this.rules)) {
-      throw new Error(
-        `The DVR validation rules are defined but no DVR plugin provided. Field: "${
-          form + this.path
-        }".`
-      );
-    }
-
-    if (_.isNil(drivers.vjf) && !_.isNil(this.validators)) {
-      throw new Error(
-        `The VJF validators functions are defined but no VJF plugin provided. Field: "${
-          form + this.path
-        }".`
-      );
-    }
-  }
+  // checkValidationPlugins(): void {
+  //   const { drivers } = this.state.form.validator;
+  //   const form = this.state.form.name ? `${this.state.form.name}/` : "";
+
+  //   if (_.isNil(drivers.dvr) && !_.isNil(this.rules)) {
+  //     throw new Error(
+  //       `The DVR validation rules are defined but no DVR plugin provided. Field: "${
+  //         form + this.path
+  //       }".`
+  //     );
+  //   }
+
+  //   if (_.isNil(drivers.vjf) && !_.isNil(this.validators)) {
+  //     throw new Error(
+  //       `The VJF validators functions are defined but no VJF plugin provided. Field: "${
+  //         form + this.path
+  //       }".`
+  //     );
+  //   }
+  // }
 
   initNestedFields(field: any, update: boolean): void {
     const fields = _.isNil(field) ? null : field.fields;

src/models/FieldInterface.ts

@@ -66,7 +66,7 @@ export interface FieldInterface extends BaseInterface {
     update: boolean
   ): void;
   getComputedProp(key: any): any;
-  checkValidationPlugins(): void;
+  // checkValidationPlugins(): void;
   initNestedFields(field: any, update: boolean): void;
   invalidate(message?: string, deep?: boolean, async?: boolean): void;
   setValidationAsyncData(valid: boolean, message: string): void;

src/models/FieldProps.ts

@@ -62,9 +62,9 @@ export enum FieldPropsEnum {
   inputMode = "inputMode",
   onKeyDown = "onKeyDown",
   onKeyUp = 'onKeyUp',
-  // construction
   class = "class",
   nullable = "nullable",
+  autocomplete = "autocomplete",
 }
 
 export type FieldPropsType = {
@@ -112,4 +112,5 @@ export enum SeparatedPropsMode {
   refs = 'refs',
   classes = 'classes',
   nullable = 'nullable',
+  autocomplete = 'autocomplete',
 }

src/models/ValidatorInterface.ts

@@ -36,6 +36,7 @@ export type ValidationPlugin  = {
 };
 
 export interface ValidationPlugins {
+  [key: string]: ValidationPlugin | undefined;
   vjf?: ValidationPlugin;
   dvr?: ValidationPlugin;
   svk?: ValidationPlugin;

src/props.ts

@@ -32,6 +32,7 @@ export const props: PropsGroupsInterface = {
     FieldPropsEnum.inputMode,
     FieldPropsEnum.ref,
     FieldPropsEnum.nullable,
+    FieldPropsEnum.autocomplete,
   ],
   handlers: [
     FieldPropsEnum.onChange,
@@ -92,6 +93,8 @@ export const props: PropsGroupsInterface = {
     SeparatedPropsMode.inputMode,
     SeparatedPropsMode.refs,
     SeparatedPropsMode.classes,
+    SeparatedPropsMode.nullable,
+    SeparatedPropsMode.autocomplete,
   ],
   functions: [
     FieldPropsEnum.computed,

tests/data/forms/flat/form.r.ts

@@ -12,6 +12,7 @@ const fields = {
     value: "s.jobs@apple.com",
     validators: [isEmail],
     related: ["emailConfirm"],
+    autocomplete: "on",
   },
   emailConfirm: {
     label: "Email",
@@ -43,7 +44,7 @@ class NewForm extends MobxReactForm {
 
   plugins(): ValidationPlugins {
     return {
-      vjf: vjf(),
+      xyz: vjf(), // custom xyz plugin
     };
   }