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

Comparing version 0.1.9 to 0.2.0

dist/components/Nested.js

@@ -48,3 +48,3 @@ "use strict";
         var _this = this;
-        var _a = this.props, _b = _a.field, value = _b.value, onBlur = _b.onBlur, initialValue = _b.initialValue, error = _b.error, children = _a.children;
+        var _a = this.props, _b = _a.field, name = _b.name, value = _b.value, onBlur = _b.onBlur, initialValue = _b.initialValue, error = _b.error, children = _a.children;
         var innerFields = utilities_1.mapObject(value, function (value, fieldPath) {
@@ -58,3 +58,3 @@ var initialFieldValue = initialValue[fieldPath];
                 dirty: value !== initialFieldValue,
-                error: get_1.default(error, [fieldPath]),
+                error: get_1.default(error, fieldPath),
                 onChange: _this.handleChange(fieldPath),
@@ -61,0 +61,0 @@ };

dist/FormState.d.ts

 import * as React from 'react';
-import { FieldDescriptors, ClientError, FieldState } from './types';
+import { FieldDescriptors, FieldState } from './types';
 import { List, Nested } from './components';
-interface RemoteError {
-    field: string[] | null;
+export interface RemoteError {
+    field?: string[] | null;
     message: string;
 }
-export declare type FormError = RemoteError | ClientError;
 export declare type FieldStates<Fields> = {
@@ -15,3 +14,3 @@ [FieldPath in keyof Fields]: FieldState<Fields[FieldPath]>;
 interface SubmitHandler<Fields> {
-    (formDetails: FormData<Fields>): MaybePromise<FormError[]> | MaybePromise<void>;
+    (formDetails: FormData<Fields>): MaybePromise<RemoteError[]> | MaybePromise<void>;
 }
@@ -28,3 +27,3 @@ export declare type ValidatorDictionary<Fields> = {
     valid: boolean;
-    errors: ClientError[];
+    errors: RemoteError[];
 }
@@ -44,5 +43,5 @@ export interface FormDetails<Fields> extends FormData<Fields> {
     submitting: boolean;
-    errors: ClientError[];
+    fields: FieldStates<Fields>;
     dirtyFields: (keyof Fields)[];
-    fields: FieldStates<Fields>;
+    errors: RemoteError[];
 }
@@ -62,3 +61,2 @@ export default class FormState<Fields extends Object> extends React.PureComponent<Props<Fields>, State<Fields>> {
     private readonly fields;
-    private readonly allErrors;
     private submit;
@@ -72,4 +70,4 @@ private reset;
     private validateFieldValue;
-    private updateErrors;
+    private updateRemoteErrors;
 }
 export {};

dist/FormState.js

@@ -75,2 +75,3 @@ "use strict";
 var isArray_1 = __importDefault(require("lodash/isArray"));
+var set_1 = __importDefault(require("lodash/set"));
 var lodash_decorators_1 = require("lodash-decorators");
@@ -136,3 +137,8 @@ var utilities_1 = require("./utilities");
         get: function () {
-            return this.allErrors.length === 0;
+            var _a = this.state, errors = _a.errors, fields = _a.fields;
+            var fieldsWithErrors = Object.keys(fields).filter(function (fieldPath) {
+                var error = fields[fieldPath].error;
+                return error != null;
+            });
+            return fieldsWithErrors.length === 0 && errors.length === 0;
         },
@@ -151,18 +157,2 @@ enumerable: true,
     });
-    Object.defineProperty(FormState.prototype, "allErrors", {
-        get: function () {
-            var _a = this.state, errors = _a.errors, fields = _a.fields;
-            var fieldErrors = Object.keys(fields)
-                .map(function (field) {
-                var message = fields[field].error;
-                return { message: message, field: field };
-            })
-                .filter(function (error) {
-                return error.field != null && error.message != null;
-            });
-            return errors.concat(fieldErrors);
-        },
-        enumerable: true,
-        configurable: true
-    });
     FormState.prototype.submit = function (event) {
@@ -190,3 +180,3 @@ return __awaiter(this, void 0, void 0, function () {
                         if (result) {
-                            this.updateErrors(result);
+                            this.updateRemoteErrors(result);
                         }
@@ -297,19 +287,17 @@ this.setState({ submitting: false });
     };
-    FormState.prototype.updateErrors = function (newErrors) {
+    FormState.prototype.updateRemoteErrors = function (errors) {
         this.setState(function (_a) {
             var fields = _a.fields;
-            var newFields = __assign({}, fields);
-            var errors = newErrors.map(function (_a) {
-                var message = _a.message, field = _a.field;
+            var errorDictionary = errors.reduce(function (accumulator, _a) {
+                var field = _a.field, message = _a.message;
                 if (field == null) {
-                    return { message: message };
+                    return accumulator;
                 }
-                if (isArray_1.default(field)) {
-                    return { message: message, field: field.join('.') };
-                }
-                return { message: message, field: field };
-            });
+                return set_1.default(accumulator, field, message);
+            }, {});
             return {
                 errors: errors,
-                fields: newFields,
+                fields: utilities_1.mapObject(fields, function (field, path) {
+                    return __assign({}, field, { error: errorDictionary[path] });
+                }),
             };
@@ -316,0 +304,0 @@ });

dist/index.d.ts

@@ -10,3 +10,4 @@ import FormState from './FormState';
 export * from './validators';
+export * from './types';
 export * from './FormState';
 export default FormState;

dist/types.d.ts

@@ -1,5 +0,1 @@
-export interface ClientError {
-    field?: string;
-    message: string;
-}
 export interface FieldState<Value> {
@@ -6,0 +2,0 @@ name: string;

docs/building-forms.md

@@ -13,3 +13,3 @@ # Building forms with FormState
   submitting: boolean;
-  errors: ClientError[];
+  errors: RemoteError[];
   reset(): void;
@@ -127,3 +127,3 @@ submit(): void;
 
-When given an [async](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) function (or one that returns a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function), the `children` function will be rerendered with `submitting: true` until the promise resolves or rejects. Once it has returned the function will be re-rendered with `submitting: false` and `errors` either `[]` (if the promise resolved with no value), or with an array of `{field?: string, error: string}` if the promise resolved with an error list.
+When given an [async](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) function (or one that returns a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function), the `children` function will be rerendered with `submitting: true` until the promise resolves or rejects. Once it has returned the function will be re-rendered with `submitting: false` and `errors` either `[]` (if the promise resolved with no value), or with an array of `{field?: string | string[], error: string}` if the promise resolved with an error list. Any errors with a `field` value will also be propagated down to matching fields.
 
@@ -130,0 +130,0 @@ ```typescript

package.json

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

src/FormState.ts

 import * as React from 'react';
 import isEqual from 'lodash/isEqual';
 import isArray from 'lodash/isArray';
+import set from 'lodash/set';
 import {memoize, bind} from 'lodash-decorators';
 
 import {mapObject} from './utilities';
-import {FieldDescriptors, ClientError, FieldState} from './types';
+import {FieldDescriptors, FieldState} from './types';
 import {List, Nested} from './components';
 
-interface RemoteError {
-  field: string[] | null;
+export interface RemoteError {
+  field?: string[] | null;
   message: string;
 }
 
-export type FormError = RemoteError | ClientError;
-
 export type FieldStates<Fields> = {
@@ -26,3 +25,3 @@ [FieldPath in keyof Fields]: FieldState<Fields[FieldPath]>
   (formDetails: FormData<Fields>):
-    | MaybePromise<FormError[]>
+    | MaybePromise<RemoteError[]>
     | MaybePromise<void>;
@@ -45,3 +44,3 @@ }
   valid: boolean;
-  errors: ClientError[];
+  errors: RemoteError[];
 }
@@ -64,5 +63,5 @@
   submitting: boolean;
-  errors: ClientError[];
+  fields: FieldStates<Fields>;
   dirtyFields: (keyof Fields)[];
-  fields: FieldStates<Fields>;
+  errors: RemoteError[];
 }
@@ -134,3 +133,10 @@
   private get valid() {
-    return this.allErrors.length === 0;
+    const {errors, fields} = this.state;
+
+    const fieldsWithErrors = Object.keys(fields).filter(fieldPath => {
+      const {error} = fields[fieldPath];
+      return error != null;
+    });
+
+    return fieldsWithErrors.length === 0 && errors.length === 0;
   }
@@ -140,3 +146,2 @@
     const {fields} = this.state;
-
     const fieldDescriptors: FieldDescriptors<Fields> = mapObject(
@@ -150,17 +155,2 @@ fields,
 
-  private get allErrors(): ClientError[] {
-    const {errors, fields} = this.state;
-
-    const fieldErrors = Object.keys(fields)
-      .map(field => {
-        const {error: message} = fields[field];
-        return {message, field};
-      })
-      .filter(error => {
-        return error.field != null && error.message != null;
-      }) as ClientError[];
-
-    return [...errors, ...fieldErrors];
-  }
-
   @bind()
@@ -187,3 +177,3 @@ private async submit(event?: Event) {
     if (result) {
-      this.updateErrors(result);
+      this.updateRemoteErrors(result);
     }
@@ -356,21 +346,23 @@
 
-  private updateErrors(newErrors: FormError[]) {
+  private updateRemoteErrors(errors: RemoteError[]) {
     this.setState(({fields}: State<Fields>) => {
-      const newFields = {...(fields as any)};
+      const errorDictionary = errors.reduce(
+        (accumulator: any, {field, message}) => {
+          if (field == null) {
+            return accumulator;
+          }
 
-      const errors: ClientError[] = newErrors.map(({message, field}) => {
-        if (field == null) {
-          return {message};
-        }
+          return set(accumulator, field, message);
+        },
+        {},
+      );
 
-        if (isArray(field)) {
-          return {message, field: field.join('.')};
-        }
-
-        return {message, field};
-      });
-
       return {
         errors,
-        fields: newFields,
+        fields: mapObject(fields, (field, path) => {
+          return {
+            ...field,
+            error: errorDictionary[path],
+          };
+        }),
       };
@@ -377,0 +369,0 @@ });

src/index.ts

@@ -10,3 +10,5 @@ import FormState from './FormState';
 
+export * from './types';
+
 export * from './FormState';
 export default FormState;

src/types.ts

@@ -1,6 +0,1 @@
-export interface ClientError {
-  field?: string;
-  message: string;
-}
-
 export interface FieldState<Value> {
@@ -7,0 +2,0 @@ name: string;

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

133177

increased by0.09%

Lines of code

2727

increased by0.15%

No dependency changes