react-form - npm Package Compare versions

Comparing version 4.0.0-alpha.6 to 4.0.0-alpha.7

dist/index.es.js

@@ -296,4 +296,5 @@ import React from 'react';
 var defaultDefaultValue = {};
-function useForm(_ref) {
-  var onSubmit = _ref.onSubmit,
+function useForm() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      onSubmit = _ref.onSubmit,
       _ref$defaultValues = _ref.defaultValues,
@@ -516,3 +517,2 @@ defaultValues = _ref$defaultValues === void 0 ? defaultDefaultValue : _ref$defaultValues,
     var fieldID = getFieldID(field);
-    apiRef.current.__fieldMeta[fieldID] = apiRef.current.__fieldMeta[fieldID] || {};
     return apiRef.current.__fieldMeta[fieldID];
@@ -537,3 +537,3 @@ }, []);
       return _objectSpread({}, old, {
-        __fieldMeta: _defineProperty({}, fieldID, typeof updater === 'function' ? updater(old.__fieldMeta[fieldID]) : _objectSpread({}, old.__fieldMeta[fieldID], updater))
+        __fieldMeta: _objectSpread({}, old.__fieldMeta, _defineProperty({}, fieldID, typeof updater === 'function' ? updater(old.__fieldMeta[fieldID]) : _objectSpread({}, old.__fieldMeta[fieldID], updater)))
       });
@@ -547,5 +547,13 @@ });
 
+    var __metaRef = apiRef.current.__getFieldMetaRef(field);
+
     setState(function (old) {
+      var newValue = typeof updater === 'function' ? updater(getBy(old.values, field)) : updater;
+
+      if (__metaRef.current.filterValue) {
+        newValue = __metaRef.current.filterValue(newValue, apiRef.current);
+      }
+
       return _objectSpread({}, old, {
-        values: setBy(old.values, field, typeof updater === 'function' ? updater(getBy(old.values, field)) : updater)
+        values: setBy(old.values, field, newValue)
       });
@@ -632,3 +640,4 @@ });
     setValues: setValues,
-    Form: Form
+    Form: Form,
+    formContext: api
   }); // When the form gets dirty and when the value changes
@@ -657,5 +666,9 @@ // validate
 }
-function useFormContext() {
+function useFormContext(manualFormContext) {
   var formApi = React.useContext(formContext);
 
+  if (manualFormContext) {
+    return manualFormContext;
+  }
+
   if (!formApi) {
@@ -683,3 +696,5 @@ throw new Error("You are trying to use the form API outside of a form!");
       validatePristine = _ref5.validatePristine,
-      validate = _ref5.validate;
+      validate = _ref5.validate,
+      filterValue = _ref5.filterValue,
+      manualFormContext = _ref5.formContext;
 
@@ -695,3 +710,3 @@ if (!fieldName) {
   validateRef.current = validate;
-  var formApi = useFormContext(); // Support field prefixing from FieldScope
+  var formApi = useFormContext(manualFormContext); // Support field prefixing from FieldScope
 
@@ -714,5 +729,7 @@ var fieldPrefix = '';
 
-  var __metaRef = formApi.__getFieldMetaRef(fieldName); // Handle default value
+  var __metaRef = formApi.__getFieldMetaRef(fieldName); // Keep the filter function up to date
 
 
+  __metaRef.current.filterValue = filterValue; // Handle default value
+
   var value = React.useMemo(function () {
@@ -823,2 +840,3 @@ return typeof preValue === 'undefined' && typeof defaultValue !== 'undefined' ? defaultValue : preValue;
             error = _context3.sent;
+            console.log(error);
 
@@ -845,11 +863,11 @@ if (checkLatest()) {
 
-            _context3.next = 17;
+            _context3.next = 18;
             break;
 
-          case 13:
-            _context3.prev = 13;
+          case 14:
+            _context3.prev = 14;
             _context3.t0 = _context3["catch"](6);
 
             if (!checkLatest()) {
-              _context3.next = 17;
+              _context3.next = 18;
               break;
@@ -860,4 +878,4 @@ }
 
-          case 17:
-            _context3.prev = 17;
+          case 18:
+            _context3.prev = 18;
 
@@ -870,5 +888,5 @@ if (checkLatest()) {
 
-            return _context3.finish(17);
+            return _context3.finish(18);
 
-          case 20:
+          case 21:
           case "end":
@@ -878,3 +896,3 @@ return _context3.stop();
       }
-    }, _callee3, null, [[6, 13, 17, 20]]);
+    }, _callee3, null, [[6, 14, 18, 21]]);
   })), [__metaRef, setMeta]);
@@ -941,3 +959,3 @@ var getInputProps = React.useCallback(function () {
     }
-  }, [meta, preMeta, setMeta, setValue, value]); // When the form gets dirty and when the value changes, run the validation
+  }, [__metaRef, fieldName, meta, preMeta, setMeta, setValue, value]); // When the form gets dirty and when the value changes, run the validation
 
@@ -974,3 +992,5 @@ React.useEffect(function () {
         disabled: isSubmitting
-      }, rest), children, debugForm ? React.createElement("pre", null, React.createElement("code", null, JSON.stringify(FormApiRef.current, null, 2))) : null));
+      }, rest), children, debugForm ? React.createElement("pre", null, React.createElement("code", null, JSON.stringify(_objectSpread({}, FormApiRef.current, {
+        formContext: undefined
+      }), null, 2))) : null));
     };
@@ -1010,4 +1030,5 @@ } // Return the form element
       defaultValues = _ref10.defaultValues,
+      filterValue = _ref10.filterValue,
       debugForm = _ref10.debugForm,
-      rest = _objectWithoutProperties(_ref10, ["field", "defaultValue", "defaultIsTouched", "defaultError", "defaultMeta", "validatePristine", "validate", "onSubmit", "defaultValues", "debugForm"]);
+      rest = _objectWithoutProperties(_ref10, ["field", "defaultValue", "defaultIsTouched", "defaultError", "defaultMeta", "validatePristine", "validate", "onSubmit", "defaultValues", "filterValue", "debugForm"]);
 
@@ -1023,2 +1044,3 @@ return [field, {
     defaultValues: defaultValues,
+    filterValue: filterValue,
     debugForm: debugForm
@@ -1025,0 +1047,0 @@ }, rest];

dist/index.js

@@ -302,4 +302,5 @@ 'use strict';
 var defaultDefaultValue = {};
-function useForm(_ref) {
-  var onSubmit = _ref.onSubmit,
+function useForm() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      onSubmit = _ref.onSubmit,
       _ref$defaultValues = _ref.defaultValues,
@@ -522,3 +523,2 @@ defaultValues = _ref$defaultValues === void 0 ? defaultDefaultValue : _ref$defaultValues,
     var fieldID = getFieldID(field);
-    apiRef.current.__fieldMeta[fieldID] = apiRef.current.__fieldMeta[fieldID] || {};
     return apiRef.current.__fieldMeta[fieldID];
@@ -543,3 +543,3 @@ }, []);
       return _objectSpread({}, old, {
-        __fieldMeta: _defineProperty({}, fieldID, typeof updater === 'function' ? updater(old.__fieldMeta[fieldID]) : _objectSpread({}, old.__fieldMeta[fieldID], updater))
+        __fieldMeta: _objectSpread({}, old.__fieldMeta, _defineProperty({}, fieldID, typeof updater === 'function' ? updater(old.__fieldMeta[fieldID]) : _objectSpread({}, old.__fieldMeta[fieldID], updater)))
       });
@@ -553,5 +553,13 @@ });
 
+    var __metaRef = apiRef.current.__getFieldMetaRef(field);
+
     setState(function (old) {
+      var newValue = typeof updater === 'function' ? updater(getBy(old.values, field)) : updater;
+
+      if (__metaRef.current.filterValue) {
+        newValue = __metaRef.current.filterValue(newValue, apiRef.current);
+      }
+
       return _objectSpread({}, old, {
-        values: setBy(old.values, field, typeof updater === 'function' ? updater(getBy(old.values, field)) : updater)
+        values: setBy(old.values, field, newValue)
       });
@@ -638,3 +646,4 @@ });
     setValues: setValues,
-    Form: Form
+    Form: Form,
+    formContext: api
   }); // When the form gets dirty and when the value changes
@@ -663,5 +672,9 @@ // validate
 }
-function useFormContext() {
+function useFormContext(manualFormContext) {
   var formApi = React.useContext(formContext);
 
+  if (manualFormContext) {
+    return manualFormContext;
+  }
+
   if (!formApi) {
@@ -689,3 +702,5 @@ throw new Error("You are trying to use the form API outside of a form!");
       validatePristine = _ref5.validatePristine,
-      validate = _ref5.validate;
+      validate = _ref5.validate,
+      filterValue = _ref5.filterValue,
+      manualFormContext = _ref5.formContext;
 
@@ -701,3 +716,3 @@ if (!fieldName) {
   validateRef.current = validate;
-  var formApi = useFormContext(); // Support field prefixing from FieldScope
+  var formApi = useFormContext(manualFormContext); // Support field prefixing from FieldScope
 
@@ -720,5 +735,7 @@ var fieldPrefix = '';
 
-  var __metaRef = formApi.__getFieldMetaRef(fieldName); // Handle default value
+  var __metaRef = formApi.__getFieldMetaRef(fieldName); // Keep the filter function up to date
 
 
+  __metaRef.current.filterValue = filterValue; // Handle default value
+
   var value = React.useMemo(function () {
@@ -829,2 +846,3 @@ return typeof preValue === 'undefined' && typeof defaultValue !== 'undefined' ? defaultValue : preValue;
             error = _context3.sent;
+            console.log(error);
 
@@ -851,11 +869,11 @@ if (checkLatest()) {
 
-            _context3.next = 17;
+            _context3.next = 18;
             break;
 
-          case 13:
-            _context3.prev = 13;
+          case 14:
+            _context3.prev = 14;
             _context3.t0 = _context3["catch"](6);
 
             if (!checkLatest()) {
-              _context3.next = 17;
+              _context3.next = 18;
               break;
@@ -866,4 +884,4 @@ }
 
-          case 17:
-            _context3.prev = 17;
+          case 18:
+            _context3.prev = 18;
 
@@ -876,5 +894,5 @@ if (checkLatest()) {
 
-            return _context3.finish(17);
+            return _context3.finish(18);
 
-          case 20:
+          case 21:
           case "end":
@@ -884,3 +902,3 @@ return _context3.stop();
       }
-    }, _callee3, null, [[6, 13, 17, 20]]);
+    }, _callee3, null, [[6, 14, 18, 21]]);
   })), [__metaRef, setMeta]);
@@ -947,3 +965,3 @@ var getInputProps = React.useCallback(function () {
     }
-  }, [meta, preMeta, setMeta, setValue, value]); // When the form gets dirty and when the value changes, run the validation
+  }, [__metaRef, fieldName, meta, preMeta, setMeta, setValue, value]); // When the form gets dirty and when the value changes, run the validation
 
@@ -980,3 +998,5 @@ React.useEffect(function () {
         disabled: isSubmitting
-      }, rest), children, debugForm ? React.createElement("pre", null, React.createElement("code", null, JSON.stringify(FormApiRef.current, null, 2))) : null));
+      }, rest), children, debugForm ? React.createElement("pre", null, React.createElement("code", null, JSON.stringify(_objectSpread({}, FormApiRef.current, {
+        formContext: undefined
+      }), null, 2))) : null));
     };
@@ -1016,4 +1036,5 @@ } // Return the form element
       defaultValues = _ref10.defaultValues,
+      filterValue = _ref10.filterValue,
       debugForm = _ref10.debugForm,
-      rest = _objectWithoutProperties(_ref10, ["field", "defaultValue", "defaultIsTouched", "defaultError", "defaultMeta", "validatePristine", "validate", "onSubmit", "defaultValues", "debugForm"]);
+      rest = _objectWithoutProperties(_ref10, ["field", "defaultValue", "defaultIsTouched", "defaultError", "defaultMeta", "validatePristine", "validate", "onSubmit", "defaultValues", "filterValue", "debugForm"]);
 
@@ -1029,2 +1050,3 @@ return [field, {
     defaultValues: defaultValues,
+    filterValue: filterValue,
     debugForm: debugForm
@@ -1031,0 +1053,0 @@ }, rest];

package.json

 {
   "name": "react-form",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-alpha.7",
   "description": "⚛️ 💼 React hooks for managing form state and lifecycle",
@@ -5,0 +5,0 @@ "author": "tannerlinsley",

README.md

@@ -42,3 +42,8 @@ # ⚛️ 💼 React Form
 - Flexible form API at the field, scope, and form levels
+- 7 kb (gzipped)
 
+## Examples & Demos
+
+- [Basic Form](https://codesandbox.io/s/react-form-demo-q9mgm)
+
 ## Table of Contents
@@ -236,2 +241,5 @@
     - Any other meta information can be stored here via the `field.setMeta` or `instance.setFieldMeta` functions
+- `formContext: FormInstance`
+  - This can be used to manually link `useField` instances to a parent form. This is useful if `useField` is in the same block scope as `useForm`.
+  - Simply pass `formContext` to `useField` like so: `useField(fieldName, { formContext })`. That field is now linked to the form that provided the `formContext`.
 - `debugForm: Bool`
@@ -325,2 +333,5 @@ - If set to `true` the form instance will be serialized and rendered after the `Form` element returned by the instance
     - Form level validation is also available. [See `useForm`](#useform)
+  - `filterValue: (value, instance) => newValue`
+    - The `filterValue` function is used to manipulate new values before they are set via `field.setValue` and `instance.setFieldValue`.
+    - This is useful for restricting fields to specific values, eg. min/max, length, regex replacement, disallowing invalid values (as opposed to warning about them), among limitless others.
   - `validatePristine: Bool`
@@ -685,1 +696,18 @@ - If you want validation to run when instance.isDirty is false, you can set the `validatePristine` option to `true`
 ```
+
+## Manually Link a Field to a Form
+
+If you get into a situation where you need to use `useForm` and `useField` in the same block scope, you may see a missing form context error. This is because your `useField` usage is not inside of a `<Form>` component. To get around this error for this use case, you can pass the form's `instance.formContext` value to the `useField` options to manually link them together:
+
+```js
+function App() {
+  const { Form, formContext } = useForm()
+
+  // This field will now be manually linked to the form above
+  const fieldInstance = useField('age', {
+    formContext,
+  })
+
+  return <Form>...</Form>
+}
+```

No alert changes

Improved metrics

Total package byte prevSize

191064

increased by2.92%

Lines of code

1892

increased by1.83%

Number of lines in readme file

710

increased by4.11%

No dependency changes