@shopify/react-form-state - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

dist/FormState.d.ts

@@ -15,3 +15,3 @@ import * as React from 'react';
 interface SubmitHandler<Fields> {
-    (fields: FieldStates<Fields>): MaybePromise<FormError[]> | MaybePromise<void>;
+    (formDetails: FormData<Fields>): MaybePromise<FormError[]> | MaybePromise<void>;
 }
@@ -24,8 +24,10 @@ export declare type ValidatorDictionary<Fields> = {
 }
-export interface FormDetails<Fields> {
+export interface FormData<Fields> {
     fields: FieldDescriptors<Fields>;
     dirty: boolean;
     valid: boolean;
+    errors: ClientError[];
+}
+export interface FormDetails<Fields> extends FormData<Fields> {
     submitting: boolean;
-    errors: ClientError[];
     reset(): void;
@@ -55,2 +57,3 @@ submit(): void;
     render(): React.ReactNode;
+    private readonly formData;
     private readonly dirty;
@@ -57,0 +60,0 @@ private readonly valid;

dist/FormState.js

@@ -106,14 +106,22 @@ "use strict";
         var children = this.props.children;
-        var _a = this.state, submitting = _a.submitting, errors = _a.errors;
-        var _b = this, fields = _b.fields, reset = _b.reset, submit = _b.submit, dirty = _b.dirty, valid = _b.valid;
-        return children({
-            submit: submit,
+        var submitting = this.state.submitting;
+        var _a = this, submit = _a.submit, reset = _a.reset, formData = _a.formData;
+        return children(__assign({}, formData, { submit: submit,
             reset: reset,
-            submitting: submitting,
-            dirty: dirty,
-            valid: valid,
-            errors: errors,
-            fields: fields,
-        });
+            submitting: submitting }));
     };
+    Object.defineProperty(FormState.prototype, "formData", {
+        get: function () {
+            var errors = this.state.errors;
+            var _a = this, fields = _a.fields, dirty = _a.dirty, valid = _a.valid;
+            return {
+                dirty: dirty,
+                valid: valid,
+                errors: errors,
+                fields: fields,
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(FormState.prototype, "dirty", {
@@ -160,7 +168,9 @@ get: function () {
         return __awaiter(this, void 0, void 0, function () {
-            var onSubmit, fields, result;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
+            var onSubmit, _a, formData, mounted, result;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
-                        if (!this.mounted) {
+                        onSubmit = this.props.onSubmit;
+                        _a = this, formData = _a.formData, mounted = _a.mounted;
+                        if (!mounted) {
                             return [2 /*return*/];
@@ -171,11 +181,9 @@ }
                         }
-                        onSubmit = this.props.onSubmit;
-                        fields = this.state.fields;
                         if (onSubmit == null) {
                             return [2 /*return*/];
                         }
-                        this.setState(__assign({}, createFormState(valuesFromFields(fields)), { submitting: true }));
-                        return [4 /*yield*/, onSubmit(fields)];
+                        this.setState({ submitting: true });
+                        return [4 /*yield*/, onSubmit(formData)];
                     case 1:
-                        result = _a.sent();
+                        result = _b.sent();
                         if (result) {
@@ -334,12 +342,6 @@ this.updateErrors(result);
         errors: [],
+        submitting: false,
         fields: fields,
-        submitting: false,
     };
 }
-function valuesFromFields(fields) {
-    return utilities_1.mapObject(fields, function (_a) {
-        var value = _a.value;
-        return value;
-    });
-}
 function initialValuesFromFields(fields) {
@@ -346,0 +348,0 @@ return utilities_1.mapObject(fields, function (_a) {

docs/building-forms.md

@@ -117,3 +117,3 @@ # Building forms with FormState
 ```typescript
-  onSubmit={async (fields) => {
+  onSubmit={async ({fields}: FormData<Fields>) => {
     const result = await updateProduct(fields);
@@ -120,0 +120,0 @@

package.json

 {
   "name": "@shopify/react-form-state",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "Manage react forms tersely and type-safe with no magic.",

src/FormState.ts

@@ -25,3 +25,5 @@ import * as React from 'react';
 interface SubmitHandler<Fields> {
-  (fields: FieldStates<Fields>): MaybePromise<FormError[]> | MaybePromise<void>;
+  (formDetails: FormData<Fields>):
+    | MaybePromise<FormError[]>
+    | MaybePromise<void>;
 }
@@ -39,8 +41,11 @@
 
-export interface FormDetails<Fields> {
+export interface FormData<Fields> {
   fields: FieldDescriptors<Fields>;
   dirty: boolean;
   valid: boolean;
+  errors: ClientError[];
+}
+
+export interface FormDetails<Fields> extends FormData<Fields> {
   submitting: boolean;
-  errors: ClientError[];
   reset(): void;
@@ -100,9 +105,18 @@ submit(): void;
     const {children} = this.props;
-    const {submitting, errors} = this.state;
-    const {fields, reset, submit, dirty, valid} = this;
+    const {submitting} = this.state;
+    const {submit, reset, formData} = this;
 
     return children({
+      ...formData,
       submit,
       reset,
       submitting,
+    });
+  }
+
+  private get formData() {
+    const {errors} = this.state;
+    const {fields, dirty, valid} = this;
+
+    return {
       dirty,
@@ -112,3 +126,3 @@ valid,
       fields,
-    });
+    };
   }
@@ -152,3 +166,6 @@
   private async submit(event?: Event) {
-    if (!this.mounted) {
+    const {onSubmit} = this.props;
+    const {formData, mounted} = this;
+
+    if (!mounted) {
       return;
@@ -161,5 +178,2 @@ }
 
-    const {onSubmit} = this.props;
-    const {fields} = this.state;
-
     if (onSubmit == null) {
@@ -169,9 +183,5 @@ return;
 
-    this.setState({
-      ...createFormState(valuesFromFields(fields)),
-      submitting: true,
-    });
+    this.setState({submitting: true});
 
-    const result = await onSubmit(fields);
-
+    const result = await onSubmit(formData);
     if (result) {
@@ -382,13 +392,9 @@ this.updateErrors(result);
     errors: [],
+    submitting: false,
     fields,
-    submitting: false,
   };
 }
 
-function valuesFromFields<Fields>(fields: FieldStates<Fields>): Fields {
-  return mapObject(fields, ({value}) => value);
-}
-
 function initialValuesFromFields<Fields>(fields: FieldStates<Fields>): Fields {
   return mapObject(fields, ({initialValue}) => initialValue);
 }

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

132853

increased by0.16%

Lines of code

2715

increased by0.3%

No dependency changes