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

Comparing version 0.2.7 to 0.2.8

CHANGELOG.md

@@ -11,1 +11,2 @@ # Changelog
 - Validators based on `validate` now always succeed for an empty input. The `required` and `requiredString` validators continue to behave the same way they used to.
+- Fixed Nested and List component race condition. Nested and List now pass a function to their `onChange` prop instead of an object so that the data object will be created within `setState`.

dist/components/List.js

@@ -77,7 +77,9 @@ "use strict";
         return function (newValue) {
-            var _a;
-            var _b = _this.props.field, value = _b.value, onChange = _b.onChange;
-            var existingItem = value[index];
-            var newItem = __assign({}, existingItem, (_a = {}, _a[key] = newValue, _a));
-            onChange(utilities_1.replace(value, index, newItem));
+            var onChange = _this.props.field.onChange;
+            onChange(function (value) {
+                var _a;
+                var existingItem = value[index];
+                var newItem = __assign({}, existingItem, (_a = {}, _a[key] = newValue, _a));
+                return utilities_1.replace(value, index, newItem);
+            });
         };
@@ -84,0 +86,0 @@ };

dist/components/Nested.js

@@ -72,6 +72,7 @@ "use strict";
         return function (newValue) {
-            var _a;
-            var _b = _this.props.field, existingItem = _b.value, onChange = _b.onChange;
-            var newItem = __assign({}, existingItem, (_a = {}, _a[key] = newValue, _a));
-            onChange(newItem);
+            var onChange = _this.props.field.onChange;
+            onChange(function (value) {
+                var _a;
+                return __assign({}, value, (_a = {}, _a[key] = newValue, _a));
+            });
         };
@@ -78,0 +79,0 @@ };

dist/FormState.js

@@ -206,7 +206,8 @@ "use strict";
             var field = fields[fieldPath];
-            var dirty = !isEqual_1.default(value, field.initialValue);
+            var newValue = typeof value === 'function' ? value(field.value) : value;
+            var dirty = !isEqual_1.default(newValue, field.initialValue);
             var updatedField = _this.getUpdatedField({
                 fieldPath: fieldPath,
                 field: field,
-                value: value,
+                value: newValue,
                 dirty: dirty,
@@ -213,0 +214,0 @@ });

dist/types.d.ts

@@ -10,3 +10,3 @@ export interface FieldState<Value> {
 export interface FieldDescriptor<Value> extends FieldState<Value> {
-    onChange(newValue: Value): void;
+    onChange(newValue: Value | ValueMapper<Value>): void;
     onBlur(): void;
@@ -17,1 +17,4 @@ }
 };
+export interface ValueMapper<Value> {
+    (value: Value): Value;
+}

docs/building-forms.md

@@ -358,3 +358,3 @@ # Building forms with FormState
 
-To learn more about building validators, and the built in functions exposed by this package, check out the [validators guide](/validators.md).
+To learn more about building validators, and the built in functions exposed by this package, check out the [validators guide](validators.md).
 
@@ -507,4 +507,6 @@ ## Compound fields
 
-The following example shows how you can use everything this documentation covered to build a full [Polaris](https://polaris.shopify.com) styled page.'s
+The following example shows how you can use everything this documentation covered to build a full [Polaris](https://polaris.shopify.com) styled page.
 
+[Try it out in codesandbox](https://codesandbox.io/s/zx387x0vmx)
+
 ```typescript
@@ -535,3 +537,7 @@ import * as React from 'react';
 
-interface State {}
+interface Variant {
+  option: string;
+  value: string;
+  price: string;
+}
 
@@ -544,17 +550,8 @@ interface Props {
     quantity: string;
-    firstVariant: string;
-      option: string;
-      value: string;
-      price: string;
-    };
-    variants: {
-      option: string;
-      value: string;
-      price: string;
-    }[];
-  },
-  productUpdate,
+    firstVariant: Variant;
+    variants: Variant[];
+  };
 }
 
-export default function Playground({initialValues, updateProduct}: Props) {
+function CreateProductPage({initialValues}: Props) {
   return (
@@ -577,3 +574,9 @@ <AppProvider>
         }}
-        onSubmit={updateProduct}
+        onSubmit={({fields}) => {
+          /*
+            In a real project you would make some kind of asynchronous call here
+            such as a graphQL mutation or a POST request, and return an array of errors if you encounter any.
+          */
+          return [{message: 'server error'}];
+        }}
       >
@@ -586,3 +589,2 @@ {formDetails => {
             submit,
-            valid,
             submitting,
@@ -671,7 +673,7 @@ errors,
                           {({option, value, price}) => (
-                            <>
+                            <React.Fragment>
                               <TextField label="option" {...option} />
                               <TextField label="value" {...value} />
                               <TextField label="price" {...price} />
-                            </>
+                            </React.Fragment>
                           )}
@@ -686,7 +688,7 @@ </FormState.Nested>
                           {({option, value, price}) => (
-                            <>
+                            <React.Fragment>
                               <TextField label="option" {...option} />
                               <TextField label="value" {...value} />
                               <TextField label="price" {...price} />
-                            </>
+                            </React.Fragment>
                           )}
@@ -693,0 +695,0 @@ </FormState.List>

package.json

 {
   "name": "@shopify/react-form-state",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "license": "MIT",
@@ -33,3 +33,3 @@ "description": "Manage react forms tersely and type-safe with no magic.",
   "devDependencies": {
-    "@shopify/enzyme-utilities": "^1.1.3",
+    "@shopify/enzyme-utilities": "^1.1.4",
     "@types/enzyme": "^3.1.10",
@@ -36,0 +36,0 @@ "enzyme": "^3.3.0",

src/FormState.ts

@@ -8,3 +8,3 @@ import * as React from 'react';
 import {mapObject} from './utilities';
-import {FieldDescriptors, FieldState} from './types';
+import {FieldDescriptors, FieldState, ValueMapper} from './types';
 import {List, Nested} from './components';
@@ -204,12 +204,15 @@
     fieldPath: Key,
-    value: Fields[Key],
+    value: Fields[Key] | ValueMapper<Fields[Key]>,
   ) {
     this.setState<any>(({fields, dirtyFields}: State<Fields>) => {
       const field = fields[fieldPath];
-      const dirty = !isEqual(value, field.initialValue);
 
+      const newValue = typeof value === 'function' ? value(field.value) : value;
+
+      const dirty = !isEqual(newValue, field.initialValue);
+
       const updatedField = this.getUpdatedField({
         fieldPath,
         field,
-        value,
+        value: newValue,
         dirty,
@@ -216,0 +219,0 @@ });

src/types.ts

@@ -11,3 +11,3 @@ export interface FieldState<Value> {
 export interface FieldDescriptor<Value> extends FieldState<Value> {
-  onChange(newValue: Value): void;
+  onChange(newValue: Value | ValueMapper<Value>): void;
   onBlur(): void;
@@ -19,1 +19,5 @@ }
 };
+
+export interface ValueMapper<Value> {
+  (value: Value): 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

142680

increased by2.19%

Lines of code

2990

increased by2.64%

No dependency changes