@tanstack/form-core - npm Package Compare versions

Comparing version 0.20.3 to 0.21.0

dist/esm/FieldApi.d.ts

@@ -85,10 +85,21 @@ import { Store } from '@tanstack/store';
     getInfo: () => FieldInfo<TParentData, TFormValidator>;
-    pushValue: (value: TData extends any[] ? TData[number] : never) => void;
-    insertValue: (index: number, value: TData extends any[] ? TData[number] : never) => Promise<void>;
+    pushValue: (value: TData extends any[] ? TData[number] : never, opts?: {
+        touch?: boolean;
+    }) => void;
+    insertValue: (index: number, value: TData extends any[] ? TData[number] : never, opts?: {
+        touch?: boolean;
+    }) => Promise<void>;
+    replaceValue: (index: number, value: TData extends any[] ? TData[number] : never, opts?: {
+        touch?: boolean;
+    }) => Promise<void>;
     removeValue: (index: number, opts?: {
         touch: boolean;
     }) => Promise<void>;
-    swapValues: (aIndex: number, bIndex: number) => void;
+    swapValues: (aIndex: number, bIndex: number, opts?: {
+        touch?: boolean;
+    }) => void;
+    moveValue: (aIndex: number, bIndex: number, opts?: {
+        touch?: boolean;
+    }) => void;
     getLinkedFields: (cause: ValidationCause) => FieldApi<any, any, any, any, any>[];
-    moveValue: (aIndex: number, bIndex: number) => void;
     validateSync: (cause: ValidationCause) => {
@@ -95,0 +106,0 @@ hasErrored: boolean;

dist/esm/FieldApi.js

@@ -82,6 +82,8 @@ import { Store } from "@tanstack/store";
     this.getInfo = () => this.form.getFieldInfo(this.name);
-    this.pushValue = (value) => this.form.pushFieldValue(this.name, value);
-    this.insertValue = (index, value) => this.form.insertFieldValue(this.name, index, value);
+    this.pushValue = (value, opts2) => this.form.pushFieldValue(this.name, value, opts2);
+    this.insertValue = (index, value, opts2) => this.form.insertFieldValue(this.name, index, value, opts2);
+    this.replaceValue = (index, value, opts2) => this.form.replaceFieldValue(this.name, index, value, opts2);
     this.removeValue = (index, opts2) => this.form.removeFieldValue(this.name, index, opts2);
-    this.swapValues = (aIndex, bIndex) => this.form.swapFieldValues(this.name, aIndex, bIndex);
+    this.swapValues = (aIndex, bIndex, opts2) => this.form.swapFieldValues(this.name, aIndex, bIndex, opts2);
+    this.moveValue = (aIndex, bIndex, opts2) => this.form.moveFieldValues(this.name, aIndex, bIndex, opts2);
     this.getLinkedFields = (cause) => {
@@ -103,3 +105,2 @@ const fields = Object.values(this.form.fieldInfo);
     };
-    this.moveValue = (aIndex, bIndex) => this.form.moveFieldValues(this.name, aIndex, bIndex);
     this.validateSync = (cause) => {
@@ -106,0 +107,0 @@ const validates = getSyncValidatorArray(cause, this.options);

dist/esm/FormApi.d.ts

@@ -119,7 +119,14 @@ import { Store } from '@tanstack/store';
     }) => Promise<void>;
+    replaceFieldValue: <TField extends DeepKeys<TFormData>>(field: TField, index: number, value: DeepValue<TFormData, TField> extends any[] ? DeepValue<TFormData, TField>[number] : never, opts?: {
+        touch?: boolean;
+    }) => Promise<void>;
     removeFieldValue: <TField extends DeepKeys<TFormData>>(field: TField, index: number, opts?: {
         touch?: boolean;
     }) => Promise<void>;
-    swapFieldValues: <TField extends DeepKeys<TFormData>>(field: TField, index1: number, index2: number) => void;
-    moveFieldValues: <TField extends DeepKeys<TFormData>>(field: TField, index1: number, index2: number) => void;
+    swapFieldValues: <TField extends DeepKeys<TFormData>>(field: TField, index1: number, index2: number, opts?: {
+        touch?: boolean;
+    }) => void;
+    moveFieldValues: <TField extends DeepKeys<TFormData>>(field: TField, index1: number, index2: number, opts?: {
+        touch?: boolean;
+    }) => void;
 }

dist/esm/FormApi.js

@@ -387,2 +387,16 @@ import { Store } from "@tanstack/store";
         (prev) => {
+          return [
+            ...prev.slice(0, index),
+            value,
+            ...prev.slice(index)
+          ];
+        },
+        opts2
+      );
+      await this.validateField(field, "change");
+    };
+    this.replaceFieldValue = async (field, index, value, opts2) => {
+      this.setFieldValue(
+        field,
+        (prev) => {
           return prev.map(
@@ -419,8 +433,12 @@ (d, i) => i === index ? value : d
     };
-    this.swapFieldValues = (field, index1, index2) => {
-      this.setFieldValue(field, (prev) => {
-        const prev1 = prev[index1];
-        const prev2 = prev[index2];
-        return setBy(setBy(prev, `${index1}`, prev2), `${index2}`, prev1);
-      });
+    this.swapFieldValues = (field, index1, index2, opts2) => {
+      this.setFieldValue(
+        field,
+        (prev) => {
+          const prev1 = prev[index1];
+          const prev2 = prev[index2];
+          return setBy(setBy(prev, `${index1}`, prev2), `${index2}`, prev1);
+        },
+        opts2
+      );
       this.validateField(field, "change");
@@ -430,7 +448,11 @@ this.validateField(`${field}[${index1}]`, "change");
     };
-    this.moveFieldValues = (field, index1, index2) => {
-      this.setFieldValue(field, (prev) => {
-        prev.splice(index2, 0, prev.splice(index1, 1)[0]);
-        return prev;
-      });
+    this.moveFieldValues = (field, index1, index2, opts2) => {
+      this.setFieldValue(
+        field,
+        (prev) => {
+          prev.splice(index2, 0, prev.splice(index1, 1)[0]);
+          return prev;
+        },
+        opts2
+      );
       this.validateField(field, "change");
@@ -437,0 +459,0 @@ this.validateField(`${field}[${index1}]`, "change");

package.json

 {
   "name": "@tanstack/form-core",
-  "version": "0.20.3",
+  "version": "0.21.0",
   "description": "Powerful, type-safe, framework agnostic forms.",
@@ -5,0 +5,0 @@ "author": "tannerlinsley",

src/FieldApi.ts

@@ -472,4 +472,6 @@ import { Store } from '@tanstack/store'
 
-  pushValue = (value: TData extends any[] ? TData[number] : never) =>
-    this.form.pushFieldValue(this.name, value as any)
+  pushValue = (
+    value: TData extends any[] ? TData[number] : never,
+    opts?: { touch?: boolean },
+  ) => this.form.pushFieldValue(this.name, value as any, opts)
 
@@ -479,10 +481,20 @@ insertValue = (
     value: TData extends any[] ? TData[number] : never,
-  ) => this.form.insertFieldValue(this.name, index, value as any)
+    opts?: { touch?: boolean },
+  ) => this.form.insertFieldValue(this.name, index, value as any, opts)
 
+  replaceValue = (
+    index: number,
+    value: TData extends any[] ? TData[number] : never,
+    opts?: { touch?: boolean },
+  ) => this.form.replaceFieldValue(this.name, index, value as any, opts)
+
   removeValue = (index: number, opts?: { touch: boolean }) =>
     this.form.removeFieldValue(this.name, index, opts)
 
-  swapValues = (aIndex: number, bIndex: number) =>
-    this.form.swapFieldValues(this.name, aIndex, bIndex)
+  swapValues = (aIndex: number, bIndex: number, opts?: { touch?: boolean }) =>
+    this.form.swapFieldValues(this.name, aIndex, bIndex, opts)
 
+  moveValue = (aIndex: number, bIndex: number, opts?: { touch?: boolean }) =>
+    this.form.moveFieldValues(this.name, aIndex, bIndex, opts)
+
   getLinkedFields = (cause: ValidationCause) => {
@@ -513,5 +525,2 @@ const fields = Object.values(this.form.fieldInfo) as FieldInfo<
 
-  moveValue = (aIndex: number, bIndex: number) =>
-    this.form.moveFieldValues(this.name, aIndex, bIndex)
-
   validateSync = (cause: ValidationCause) => {
@@ -518,0 +527,0 @@ const validates = getSyncValidatorArray(cause, this.options)

src/FormApi.ts

@@ -764,2 +764,26 @@ import { Store } from '@tanstack/store'
       (prev) => {
+        return [
+          ...(prev as DeepValue<TFormData, TField>[]).slice(0, index),
+          value,
+          ...(prev as DeepValue<TFormData, TField>[]).slice(index),
+        ] as any
+      },
+      opts,
+    )
+
+    // Validate the whole array + all fields that have shifted
+    await this.validateField(field, 'change')
+  }
+
+  replaceFieldValue = async <TField extends DeepKeys<TFormData>>(
+    field: TField,
+    index: number,
+    value: DeepValue<TFormData, TField> extends any[]
+      ? DeepValue<TFormData, TField>[number]
+      : never,
+    opts?: { touch?: boolean },
+  ) => {
+    this.setFieldValue(
+      field,
+      (prev) => {
         return (prev as DeepValue<TFormData, TField>[]).map((d, i) =>
@@ -817,8 +841,13 @@ i === index ? value : d,
     index2: number,
+    opts?: { touch?: boolean },
   ) => {
-    this.setFieldValue(field, (prev: any) => {
-      const prev1 = prev[index1]!
-      const prev2 = prev[index2]!
-      return setBy(setBy(prev, `${index1}`, prev2), `${index2}`, prev1)
-    })
+    this.setFieldValue(
+      field,
+      (prev: any) => {
+        const prev1 = prev[index1]!
+        const prev2 = prev[index2]!
+        return setBy(setBy(prev, `${index1}`, prev2), `${index2}`, prev1)
+      },
+      opts,
+    )
 
@@ -836,7 +865,12 @@ // Validate the whole array
     index2: number,
+    opts?: { touch?: boolean },
   ) => {
-    this.setFieldValue(field, (prev: any) => {
-      prev.splice(index2, 0, prev.splice(index1, 1)[0])
-      return prev
-    })
+    this.setFieldValue(
+      field,
+      (prev: any) => {
+        prev.splice(index2, 0, prev.splice(index1, 1)[0])
+        return prev
+      },
+      opts,
+    )
 
@@ -843,0 +877,0 @@ // Validate the whole array

src/tests/FieldApi.spec.ts

@@ -153,5 +153,39 @@ import { describe, expect, it, vi } from 'vitest'
 
-    expect(field.getValue()).toStrictEqual(['one', 'other'])
+    expect(field.getValue()).toStrictEqual(['one', 'other', 'two'])
   })
 
+  it('should replace a value into an array correctly', () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one', 'two', 'three'],
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'names',
+    })
+
+    field.replaceValue(1, 'other')
+
+    expect(field.getValue()).toStrictEqual(['one', 'other', 'three'])
+  })
+
+  it('should do nothing when replacing a value into an array at an index that does not exist', () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one', 'two', 'three'],
+      },
+    })
+
+    const field = new FieldApi({
+      form,
+      name: 'names',
+    })
+
+    field.replaceValue(10, 'other')
+
+    expect(field.getValue()).toStrictEqual(['one', 'two', 'three'])
+  })
+
   it('should run onChange validation when inserting an array fields value', () => {
@@ -158,0 +192,0 @@ const form = new FormApi({

src/tests/FormApi.spec.ts

@@ -327,2 +327,19 @@ import { describe, expect, it, vi } from 'vitest'
 
+  it("should insert an array field's value as first element", () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one', 'two', 'three'],
+      },
+    })
+    form.mount()
+    form.insertFieldValue('names', 0, 'other')
+
+    expect(form.getFieldValue('names')).toStrictEqual([
+      'other',
+      'one',
+      'two',
+      'three',
+    ])
+  })
+
   it("should run onChange validation when pushing an array field's value", () => {
@@ -356,5 +373,51 @@ const form = new FormApi({
 
+    expect(form.getFieldValue('names')).toStrictEqual([
+      'one',
+      'other',
+      'two',
+      'three',
+    ])
+  })
+
+  it("should insert an array field's value at the end if the index is higher than the length", () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one', 'two', 'three'],
+      },
+    })
+    form.mount()
+    form.insertFieldValue('names', 10, 'other')
+
+    expect(form.getFieldValue('names')).toStrictEqual([
+      'one',
+      'two',
+      'three',
+      'other',
+    ])
+  })
+
+  it("should replace an array field's value", () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one', 'two', 'three'],
+      },
+    })
+    form.mount()
+    form.replaceFieldValue('names', 1, 'other')
+
     expect(form.getFieldValue('names')).toStrictEqual(['one', 'other', 'three'])
   })
 
+  it("should do nothing when replacing an array field's value with an index that doesn't exist", () => {
+    const form = new FormApi({
+      defaultValues: {
+        names: ['one', 'two', 'three'],
+      },
+    })
+    form.mount()
+    form.replaceFieldValue('names', 10, 'other')
+
+    expect(form.getFieldValue('names')).toStrictEqual(['one', 'two', 'three'])
+  })
+
   it("should run onChange validation when inserting an array field's value", () => {
@@ -405,3 +468,3 @@ const form = new FormApi({
 
-    await form.insertFieldValue('names', 0, { first: 'other' })
+    await form.replaceFieldValue('names', 0, { first: 'other' })
 
@@ -408,0 +471,0 @@ expect(field1.state.meta.errors).toStrictEqual(['Invalid value'])

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

426749

increased by2.19%

Lines of code

7311

increased by2.6%

No dependency changes