feat: introduced inputMode field prop and autoTrimValue form option

introduced inputMode field prop and autoTrimValue form option fix #283
foxhound87 · Apr 2, 2023 · 6ed5db6 · 6ed5db6
1 parent 8e417a3
commit 6ed5db6
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 5.9.0 (next)
+
+- Introduced `inputMode` Field property.
+- Introduced `autoTrimValue` form option (can be also enabled on single field).
+Fix: #283
+
 # 5.8.0 (next)
 
 - `set()` method will increase `changed` prop and trigger `onChange` Event Hook

diff --git a/src/Bindings.ts b/src/Bindings.ts
@@ -25,6 +25,7 @@ export default class Bindings implements BindingsInterface {
       onBlur: FieldPropsEnum.onBlur,
       onFocus: FieldPropsEnum.onFocus,
       autoFocus: FieldPropsEnum.autoFocus,
+      inputMode: FieldPropsEnum.inputMode,
       onKeyUp: FieldPropsEnum.onKeyUp,
       onKeyDown: FieldPropsEnum.onKeyDown,
     },

diff --git a/src/Field.ts b/src/Field.ts
@@ -43,6 +43,7 @@ const setupFieldProps = (instance: FieldInterface, props: any, data: any) =>
     $hooks: props.$hooks || (data && data.hooks) || {},
     $handlers: props.$handlers || (data && data.handlers) || {},
     $autoFocus: props.$autoFocus || (data && data.autoFocus) || false,
+    $inputMode: props.$inputMode || (data && data.inputMode) || undefined,
     $ref: props.$ref || (data && data.ref) || undefined,
   });
 
@@ -102,6 +103,7 @@ export default class Field extends Base implements FieldInterface {
   $blurred: boolean = false;
   $deleted: boolean = false;
   $autoFocus: boolean = false;
+  $inputMode: string = undefined;
   $ref: any = undefined
 
   $clearing: boolean = false;
@@ -159,6 +161,7 @@ export default class Field extends Base implements FieldInterface {
       validationAsyncData: observable,
       files: observable,
       autoFocus: computed,
+      inputMode: computed,
       ref: computed,
       checkValidationErrors: computed,
       checked: computed,
@@ -254,7 +257,7 @@ export default class Field extends Base implements FieldInterface {
   set value(newVal) {
     if (this.$value === newVal) return;
     // handle numbers
-    if (this.state.options.get(OptionsEnum.autoParseNumbers, this) === true) {
+    if (this.state.options.get(OptionsEnum.autoParseNumbers, this)) {
       if (_.isNumber(this.$initial)) {
         if (
           new RegExp("^-?\\d+(,\\d+)*(\\.\\d+([eE]\\d+)?)?$", "g").exec(newVal)
@@ -268,7 +271,9 @@ export default class Field extends Base implements FieldInterface {
         }
       }
     }
-    // handle parse value
+    if (_.isString(newVal) && this.state.options.get(OptionsEnum.autoTrimValue, this)) {
+      newVal = newVal.trim();
+    }
     this.$value = newVal;
     this.$changed ++;
     if (!this.resetting && !this.clearing) {
@@ -312,6 +317,10 @@ export default class Field extends Base implements FieldInterface {
     return this.$autoFocus;
   }
 
+  get inputMode() {
+    return this.$inputMode;
+  }
+
   get type() {
     return toJS(this.$type);
   }

diff --git a/src/Options.ts b/src/Options.ts
@@ -43,6 +43,7 @@ export default class Options implements OptionsInterface {
     retrieveOnlyDirtyFieldsValues: false,
     retrieveOnlyEnabledFieldsValues: false,
     retrieveOnlyEnabledFieldsErrors: false,
+    autoTrimValue: false,
     autoParseNumbers: false,
     removeNullishValuesInArrays: false,
     preserveDeletedFieldsValues: false,

diff --git a/src/models/FieldInterface.ts b/src/models/FieldInterface.ts
@@ -16,6 +16,7 @@ export default interface FieldInterface extends BaseInterface {
   validationFunctionsData: any[];
   debouncedValidation: any;
   autoFocus: boolean;
+  inputMode: string;
   ref: any;
   showError: boolean;
   checkValidationErrors: boolean;

diff --git a/src/models/FieldProps.ts b/src/models/FieldProps.ts
@@ -55,6 +55,7 @@ export enum FieldPropsEnum {
   onAdd = "onAdd",
   onDel = "onDel",
   autoFocus = "autoFocus",
+  inputMode = "inputMode",
   onKeyDown = "onKeyDown",
   onKeyUp = 'onKeyUp',
 }
@@ -98,5 +99,6 @@ export enum SeparatedPropsMode {
   input = 'input',
   output = 'output',
   autoFocus = 'autoFocus',
+  inputMode = 'inputMode',
   refs = 'refs',
 }
diff --git a/src/models/FormInterface.ts b/src/models/FormInterface.ts
@@ -36,23 +36,27 @@ export interface FieldsDefinitions {
   values?: any;
   labels?: any;
   placeholders?: any;
-  initials?: any;
   defaults?: any;
+  initials?: any;
   disabled?: any;
+  deleted?: any;
+  types?: any;
   related?: any;
+  rules?: any;
   options?: any;
-  extra?: any;
-  types?: any;
-  input?: any;
-  output?: any;
   bindings?: any;
-  observers?: any;
-  interceptors?: any;
-  validatedWith?: any;
+  extra?: any;
   hooks?: any;
   handlers?: any;
+  validatedWith?: any;
   validators?: any;
-  rules?: any;
+  observers?: any;
+  interceptors?: any;
+  input?: any;
+  output?: any;
+  autoFocus?: any;
+  inputMode?: any;
+  refs?: any;
 }
 
 export interface FormConfig {

diff --git a/src/models/OptionsModel.ts b/src/models/OptionsModel.ts
@@ -28,6 +28,7 @@ export enum OptionsEnum {
   retrieveOnlyEnabledFieldsErrors = 'retrieveOnlyEnabledFieldsErrors',
   removeNullishValuesInArrays = 'removeNullishValuesInArrays',
   preserveDeletedFieldsValues = 'preserveDeletedFieldsValues',
+  autoTrimValue = 'autoTrimValue',
   autoParseNumbers = 'autoParseNumbers',
   validationDebounceWait = 'validationDebounceWait',
   validationDebounceOptions = 'validationDebounceOptions',
@@ -66,6 +67,7 @@ export default interface OptionsModel {
   [OptionsEnum.retrieveOnlyEnabledFieldsErrors]?: boolean;
   [OptionsEnum.removeNullishValuesInArrays]?: boolean;
   [OptionsEnum.preserveDeletedFieldsValues]?: boolean;
+  [OptionsEnum.autoTrimValue]?: boolean;
   [OptionsEnum.autoParseNumbers]?: boolean;
   [OptionsEnum.validationDebounceWait]?: number;
   [OptionsEnum.validationDebounceOptions]?: {

diff --git a/src/props.ts b/src/props.ts
@@ -31,6 +31,7 @@ export const props: PropsGroupsInterface = {
     FieldPropsEnum.deleted,
     FieldPropsEnum.disabled,
     FieldPropsEnum.autoFocus,
+    FieldPropsEnum.inputMode,
     FieldPropsEnum.ref,
   ],
   handlers: [
@@ -84,6 +85,7 @@ export const props: PropsGroupsInterface = {
     SeparatedPropsMode.input,
     SeparatedPropsMode.output,
     SeparatedPropsMode.autoFocus,
+    SeparatedPropsMode.inputMode,
     SeparatedPropsMode.refs,
   ],
   functions: [

diff --git a/tests/data/forms/nested/form.v.ts b/tests/data/forms/nested/form.v.ts
@@ -12,6 +12,8 @@ const hooks = {
         form.$('user.id').set('value', 'user-id');
         form.$('user.name').set('value', 'user-init');
         form.$('user.name').set('disabled', true);
+        form.$('user.name').set('autoFocus', true);
+        form.$('user.name').set('inputMode', "text");
         form.$('user.name').set('ref', "ref");
 
     },

diff --git a/tests/nested.hooks.ts b/tests/nested.hooks.ts
@@ -33,6 +33,12 @@ describe('Check form onChange hook', () => {
     it('$V user.name disabled should be true', () =>
         expect($.$V.$('user.name').disabled).to.be.true);
 
+    it('$V user.name autoFocus should be true', () =>
+        expect($.$V.$('user.name').autoFocus).to.be.true);
+
+    it('$V user.name inputMode should be equal "text"', () =>
+        expect($.$V.$('user.name').inputMode).to.be.equal('text'));
+
     it('$V user.name ref should be equal "ref"', () =>
         expect($.$V.$('user.name').ref).to.be.equal("ref"));
 });