formula-one - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

CHANGELOG.md

 # Changelog
 
+### v0.8.0
+
+- Add `onValidation` prop to `Form`. This is a callback which will be called any time validations occur within the form. It receives a boolean, which is whether the form is valid according to the formula-one validations.
+
 ### v0.7.0
@@ -4,0 +8,0 @@

dist/Form.js

@@ -123,2 +123,8 @@ "use strict";
       _this.props.onChange(newState[0]);
+      // TODO(zach): This is a bit gross, but the general purpose here is
+      //   that onValidation outside the form (in the public API) doesn't
+      //   correspond directly to the internal onValidation. Internally
+      //   onValidation means (on initial validation). Externally, it means
+      //   on any validation.
+      _this.props.onValidation((0, _formState2.isValid)(newState));
     };
@@ -154,2 +160,4 @@
         };
+      }, function () {
+        _this.props.onValidation((0, _formState2.isValid)(_this.state.formState));
       });
@@ -223,4 +231,5 @@ };
   onChange: function onChange() {},
-  onSubmit: function onSubmit() {}
+  onSubmit: function onSubmit() {},
+  onValidation: function onValidation() {}
 };
 exports.default = Form;

dist/index.js

@@ -60,5 +60,5 @@ "use strict";
 
-var _TestUtils2 = require("./TestUtils");
+var _testutils = require("./testutils");
 
-var _TestUtils = _interopRequireWildcard(_TestUtils2);
+var _TestUtils = _interopRequireWildcard(_testutils);
 
@@ -65,0 +65,0 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

dist/test/Field.test.js

@@ -19,2 +19,4 @@ "use strict";
 
+require("../types");
+
 var _tools = require("./tools");
@@ -214,2 +216,3 @@
 
+    // $ExpectError
     React.createElement(
@@ -222,2 +225,10 @@ _Field2.default,
     );
+
+    React.createElement(
+      _Field2.default,
+      { link: link },
+      function (_value, _errors, _onChange) {
+        return null;
+      }
+    );
   });
@@ -224,0 +235,0 @@

dist/test/Form.test.js

@@ -670,2 +670,36 @@ "use strict";
   });
+
+  it.only("Calls onValidation when a part of the value is validated", function () {
+    var onValidation = jest.fn();
+    var renderer = _reactTestRenderer2.default.create(React.createElement(
+      _Form2.default,
+      {
+        initialValue: "",
+        feedbackStrategy: _feedbackStrategies2.default.Always,
+        onValidation: onValidation,
+        serverErrors: { "/": ["Server error", "Another server error"] }
+      },
+      function (link) {
+        return React.createElement(_TestField2.default, {
+          link: link,
+          validation: function validation(s) {
+            if (s.length > 0) {
+              return [];
+            } else {
+              return ["No blank strings"];
+            }
+          }
+        });
+      }
+    ));
+
+    expect(onValidation).toHaveBeenCalledTimes(1);
+    expect(onValidation).toHaveBeenLastCalledWith(false);
+
+    var inner = renderer.root.findByType(_TestField.TestInput);
+    inner.instance.change("zach");
+
+    expect(onValidation).toHaveBeenCalledTimes(2);
+    expect(onValidation).toHaveBeenLastCalledWith(true);
+  });
 });

package.json

 {
   "name": "formula-one",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Strongly-typed React form state management",
@@ -5,0 +5,0 @@ "author": "Zach Gotsch",

src/Form.js

@@ -34,9 +34,9 @@ // @flow strict
 };
-export const FormContext: React.Context<
-  FormContextPayload
-> = React.createContext({
-  shouldShowError: () => true,
-  pristine: false,
-  submitted: true,
-});
+export const FormContext: React.Context<FormContextPayload> = React.createContext(
+  {
+    shouldShowError: () => true,
+    pristine: false,
+    submitted: true,
+  }
+);
 
@@ -94,3 +94,3 @@ function applyServerErrorsToFormState<T>(
 
-type Props<T, ExtraSubmitData> = {
+type Props<T, ExtraSubmitData> = {|
   // This is *only* used to intialize the form. Further changes will be ignored
@@ -101,2 +101,3 @@ +initialValue: T,
   +onChange: T => void,
+  +onValidation: boolean => void,
   +serverErrors: null | {[path: string]: Array<string>},
@@ -108,3 +109,3 @@ +children: (
   ) => React.Node,
-};
+|};
 type State<T> = {
@@ -123,2 +124,3 @@ formState: FormState<T>,
     onSubmit: () => {},
+    onValidation: () => {},
   };
@@ -181,2 +183,8 @@
     this.props.onChange(newState[0]);
+    // TODO(zach): This is a bit gross, but the general purpose here is
+    //   that onValidation outside the form (in the public API) doesn't
+    //   correspond directly to the internal onValidation. Internally
+    //   onValidation means (on initial validation). Externally, it means
+    //   on any validation.
+    this.props.onValidation(isValid(newState));
   };
@@ -202,5 +210,10 @@
     });
-    this.setState(({formState: [value, tree]}) => ({
-      formState: [value, updateAtPath(path, updater(errors), tree)],
-    }));
+    this.setState(
+      ({formState: [value, tree]}) => ({
+        formState: [value, updateAtPath(path, updater(errors), tree)],
+      }),
+      () => {
+        this.props.onValidation(isValid(this.state.formState));
+      }
+    );
   };
@@ -207,0 +220,0 @@

src/index.js

@@ -23,2 +23,2 @@ // @flow strict
 
-export * as TestUtils from "./TestUtils";
+export * as TestUtils from "./testutils";

src/test/Field.test.js

@@ -7,2 +7,3 @@ // @flow
 import Field from "../Field";
+import {type FieldLink} from "../types";
 import {mockFormState, mockLink} from "./tools";
@@ -155,3 +156,3 @@ import TestField, {TestInput} from "./TestField";
     const formState = mockFormState("Hello there");
-    const link = mockLink(formState);
+    const link: FieldLink<string> = mockLink(formState);
 
@@ -163,3 +164,8 @@ <Field link={link}>
 
+    // $ExpectError
     <Field link={link}>
+      {(_value, _errors, _onChange: number => void) => null}
+    </Field>;
+
+    <Field link={link}>
       {(_value, _errors, _onChange: string => void) => null}
@@ -166,0 +172,0 @@ </Field>;

src/test/Form.test.js

@@ -12,3 +12,3 @@ // @flow
 import {expectLink, mockFormState} from "./tools";
-import TestField from "./TestField";
+import TestField, {TestInput} from "./TestField";
 import {forgetShape} from "../shapedTree";
@@ -558,2 +558,36 @@
   });
+
+  it.only("Calls onValidation when a part of the value is validated", () => {
+    const onValidation = jest.fn();
+    const renderer = TestRenderer.create(
+      <Form
+        initialValue={""}
+        feedbackStrategy={FeedbackStrategies.Always}
+        onValidation={onValidation}
+        serverErrors={{"/": ["Server error", "Another server error"]}}
+      >
+        {link => (
+          <TestField
+            link={link}
+            validation={s => {
+              if (s.length > 0) {
+                return [];
+              } else {
+                return ["No blank strings"];
+              }
+            }}
+          />
+        )}
+      </Form>
+    );
+
+    expect(onValidation).toHaveBeenCalledTimes(1);
+    expect(onValidation).toHaveBeenLastCalledWith(false);
+
+    const inner = renderer.root.findByType(TestInput);
+    inner.instance.change("zach");
+
+    expect(onValidation).toHaveBeenCalledTimes(2);
+    expect(onValidation).toHaveBeenLastCalledWith(true);
+  });
 });

No alert changes

Improved metrics

Total package byte prevSize

271544

increased by1.41%

Lines of code

6640

increased by1.47%

No dependency changes