react-final-form-hooks - npm Package Compare versions

Comparing version 1.0.0-alpha.1 to 1.0.0-alpha.2

dist/react-final-form-hooks.cjs.js

@@ -46,3 +46,25 @@ 'use strict';
 
+var subscriptionToInputs = function subscriptionToInputs(subscription) {
+  return finalForm.fieldSubscriptionItems.map(function (key) {
+    return Boolean(subscription[key]);
+  });
+};
+
+var eventValue = function eventValue(event) {
+  if (!event.target) {
+    return event;
+  } else if (['checkbox', 'radio'].includes(event.target.type)) {
+    return event.target.checked;
+  }
+
+  return event.target.value;
+};
+
 var useField = function useField(name, form, subscription) {
+  if (subscription === void 0) {
+    subscription = all;
+  }
+
+  var autoFocus = react.useRef(false);
+
   var _useState = react.useState({}),
@@ -53,5 +75,14 @@ state = _useState[0],
   react.useEffect(function () {
-    return form.registerField(name, setState, subscription || all);
-  }, [name, subscription]);
+    return form.registerField(name, function (newState) {
+      if (autoFocus.current) {
+        autoFocus.current = false;
+        setTimeout(function () {
+          return newState.focus();
+        });
+      }
 
+      setState(newState);
+    }, subscription);
+  }, [name].concat(subscriptionToInputs(subscription)));
+
   var _ref = state || {},
@@ -74,6 +105,10 @@ blur = _ref.blur,
       onChange: function onChange(event) {
-        return state.change(event.target.value);
+        return state.change(eventValue(event));
       },
       onFocus: function onFocus() {
-        return state.focus();
+        if (state.focus) {
+          state.focus();
+        } else {
+          autoFocus.current = true;
+        }
       }
@@ -89,3 +124,29 @@ },
 }, {});
+/**
+ * Converts { active: true, data: false, ... } to `[true, false, false, ...]`.
+ */
 
+var subscriptionToInputs$1 = function subscriptionToInputs(subscription) {
+  return finalForm.formSubscriptionItems.map(function (key) {
+    return Boolean(subscription[key]);
+  });
+};
+
+var useFormState = function useFormState(form, subscription) {
+  if (subscription === void 0) {
+    subscription = all$1;
+  }
+
+  var _useState = react.useState(function () {
+    return form.getState();
+  }),
+      state = _useState[0],
+      setState = _useState[1];
+
+  react.useEffect(function () {
+    return form.subscribe(setState, subscription);
+  }, [form].concat(subscriptionToInputs$1(subscription)));
+  return state;
+};
+
 var useForm = function useForm(_ref) {
@@ -95,11 +156,13 @@ var subscription = _ref.subscription,
 
-  var form = react.useRef(finalForm.createForm(config));
+  var form = react.useRef(); // https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
 
-  var _useState = react.useState({}),
-      state = _useState[0],
-      setState = _useState[1];
+  var getForm = function getForm() {
+    if (!form.current) {
+      form.current = finalForm.createForm(config);
+    }
 
-  react.useEffect(function () {
-    return form.current.subscribe(setState, subscription || all$1);
-  }, [subscription]);
+    return form.current;
+  };
+
+  var state = useFormState(getForm(), subscription);
   var handleSubmit = react.useCallback(function (event) {
@@ -116,6 +179,6 @@ if (event) {
 
-    return form.current.submit();
+    return getForm().submit();
   }, []);
   return _extends({}, state, {
-    form: form.current,
+    form: getForm(),
     handleSubmit: handleSubmit
@@ -127,1 +190,2 @@ });
 exports.useForm = useForm;
+exports.useFormState = useFormState;

dist/react-final-form-hooks.es.js

 import { useState, useEffect, useRef, useCallback } from 'react';
-import { fieldSubscriptionItems, createForm, formSubscriptionItems } from 'final-form';
+import { fieldSubscriptionItems, formSubscriptionItems, createForm } from 'final-form';
 
@@ -42,3 +42,25 @@ function _extends() {
 
+var subscriptionToInputs = function subscriptionToInputs(subscription) {
+  return fieldSubscriptionItems.map(function (key) {
+    return Boolean(subscription[key]);
+  });
+};
+
+var eventValue = function eventValue(event) {
+  if (!event.target) {
+    return event;
+  } else if (['checkbox', 'radio'].includes(event.target.type)) {
+    return event.target.checked;
+  }
+
+  return event.target.value;
+};
+
 var useField = function useField(name, form, subscription) {
+  if (subscription === void 0) {
+    subscription = all;
+  }
+
+  var autoFocus = useRef(false);
+
   var _useState = useState({}),
@@ -49,5 +71,14 @@ state = _useState[0],
   useEffect(function () {
-    return form.registerField(name, setState, subscription || all);
-  }, [name, subscription]);
+    return form.registerField(name, function (newState) {
+      if (autoFocus.current) {
+        autoFocus.current = false;
+        setTimeout(function () {
+          return newState.focus();
+        });
+      }
 
+      setState(newState);
+    }, subscription);
+  }, [name].concat(subscriptionToInputs(subscription)));
+
   var _ref = state || {},
@@ -70,6 +101,10 @@ blur = _ref.blur,
       onChange: function onChange(event) {
-        return state.change(event.target.value);
+        return state.change(eventValue(event));
       },
       onFocus: function onFocus() {
-        return state.focus();
+        if (state.focus) {
+          state.focus();
+        } else {
+          autoFocus.current = true;
+        }
       }
@@ -85,3 +120,29 @@ },
 }, {});
+/**
+ * Converts { active: true, data: false, ... } to `[true, false, false, ...]`.
+ */
 
+var subscriptionToInputs$1 = function subscriptionToInputs(subscription) {
+  return formSubscriptionItems.map(function (key) {
+    return Boolean(subscription[key]);
+  });
+};
+
+var useFormState = function useFormState(form, subscription) {
+  if (subscription === void 0) {
+    subscription = all$1;
+  }
+
+  var _useState = useState(function () {
+    return form.getState();
+  }),
+      state = _useState[0],
+      setState = _useState[1];
+
+  useEffect(function () {
+    return form.subscribe(setState, subscription);
+  }, [form].concat(subscriptionToInputs$1(subscription)));
+  return state;
+};
+
 var useForm = function useForm(_ref) {
@@ -91,11 +152,13 @@ var subscription = _ref.subscription,
 
-  var form = useRef(createForm(config));
+  var form = useRef(); // https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
 
-  var _useState = useState({}),
-      state = _useState[0],
-      setState = _useState[1];
+  var getForm = function getForm() {
+    if (!form.current) {
+      form.current = createForm(config);
+    }
 
-  useEffect(function () {
-    return form.current.subscribe(setState, subscription || all$1);
-  }, [subscription]);
+    return form.current;
+  };
+
+  var state = useFormState(getForm(), subscription);
   var handleSubmit = useCallback(function (event) {
@@ -112,6 +175,6 @@ if (event) {
 
-    return form.current.submit();
+    return getForm().submit();
   }, []);
   return _extends({}, state, {
-    form: form.current,
+    form: getForm(),
     handleSubmit: handleSubmit
@@ -121,2 +184,2 @@ });
 
-export { useField, useForm };
+export { useField, useForm, useFormState };

dist/react-final-form-hooks.umd.js

@@ -45,3 +45,25 @@ (function (global, factory) {
 
+  var subscriptionToInputs = function subscriptionToInputs(subscription) {
+    return finalForm.fieldSubscriptionItems.map(function (key) {
+      return Boolean(subscription[key]);
+    });
+  };
+
+  var eventValue = function eventValue(event) {
+    if (!event.target) {
+      return event;
+    } else if (['checkbox', 'radio'].includes(event.target.type)) {
+      return event.target.checked;
+    }
+
+    return event.target.value;
+  };
+
   var useField = function useField(name, form, subscription) {
+    if (subscription === void 0) {
+      subscription = all;
+    }
+
+    var autoFocus = react.useRef(false);
+
     var _useState = react.useState({}),
@@ -52,5 +74,14 @@ state = _useState[0],
     react.useEffect(function () {
-      return form.registerField(name, setState, subscription || all);
-    }, [name, subscription]);
+      return form.registerField(name, function (newState) {
+        if (autoFocus.current) {
+          autoFocus.current = false;
+          setTimeout(function () {
+            return newState.focus();
+          });
+        }
 
+        setState(newState);
+      }, subscription);
+    }, [name].concat(subscriptionToInputs(subscription)));
+
     var _ref = state || {},
@@ -73,6 +104,10 @@ blur = _ref.blur,
         onChange: function onChange(event) {
-          return state.change(event.target.value);
+          return state.change(eventValue(event));
         },
         onFocus: function onFocus() {
-          return state.focus();
+          if (state.focus) {
+            state.focus();
+          } else {
+            autoFocus.current = true;
+          }
         }
@@ -88,3 +123,29 @@ },
   }, {});
+  /**
+   * Converts { active: true, data: false, ... } to `[true, false, false, ...]`.
+   */
 
+  var subscriptionToInputs$1 = function subscriptionToInputs(subscription) {
+    return finalForm.formSubscriptionItems.map(function (key) {
+      return Boolean(subscription[key]);
+    });
+  };
+
+  var useFormState = function useFormState(form, subscription) {
+    if (subscription === void 0) {
+      subscription = all$1;
+    }
+
+    var _useState = react.useState(function () {
+      return form.getState();
+    }),
+        state = _useState[0],
+        setState = _useState[1];
+
+    react.useEffect(function () {
+      return form.subscribe(setState, subscription);
+    }, [form].concat(subscriptionToInputs$1(subscription)));
+    return state;
+  };
+
   var useForm = function useForm(_ref) {
@@ -94,11 +155,13 @@ var subscription = _ref.subscription,
 
-    var form = react.useRef(finalForm.createForm(config));
+    var form = react.useRef(); // https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
 
-    var _useState = react.useState({}),
-        state = _useState[0],
-        setState = _useState[1];
+    var getForm = function getForm() {
+      if (!form.current) {
+        form.current = finalForm.createForm(config);
+      }
 
-    react.useEffect(function () {
-      return form.current.subscribe(setState, subscription || all$1);
-    }, [subscription]);
+      return form.current;
+    };
+
+    var state = useFormState(getForm(), subscription);
     var handleSubmit = react.useCallback(function (event) {
@@ -115,6 +178,6 @@ if (event) {
 
-      return form.current.submit();
+      return getForm().submit();
     }, []);
     return _extends({}, state, {
-      form: form.current,
+      form: getForm(),
       handleSubmit: handleSubmit
@@ -126,2 +189,3 @@ });
   exports.useForm = useForm;
+  exports.useFormState = useFormState;
 
@@ -128,0 +192,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

dist/react-final-form-hooks.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("final-form")):"function"==typeof define&&define.amd?define(["exports","react","final-form"],t):t(e["react-final-form-hooks"]={},e.React,e.FinalForm)}(this,function(e,a,c){"use strict";function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function l(e,t){if(null==e)return{};var n,r,u={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],0<=t.indexOf(n)||(u[n]=e[n]);return u}var p=c.fieldSubscriptionItems.reduce(function(e,t){return e[t]=!0,e},{}),b=c.formSubscriptionItems.reduce(function(e,t){return e[t]=!0,e},{});e.useField=function(e,t,n){var r=a.useState({}),u=r[0],o=r[1];a.useEffect(function(){return t.registerField(e,o,n||p)},[e,n]);var i=u||{},f=(i.blur,i.change,i.focus,i.value),c=l(i,["blur","change","focus","value"]);return delete c.name,{input:{name:e,value:f||"",onBlur:function(){return u.blur()},onChange:function(e){return u.change(e.target.value)},onFocus:function(){return u.focus()}},meta:c}},e.useForm=function(e){var t=e.subscription,n=l(e,["subscription"]),r=a.useRef(c.createForm(n)),u=a.useState({}),o=u[0],i=u[1];a.useEffect(function(){return r.current.subscribe(i,t||b)},[t]);var f=a.useCallback(function(e){return e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),r.current.submit()},[]);return s({},o,{form:r.current,handleSubmit:f})},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("final-form")):"function"==typeof define&&define.amd?define(["exports","react","final-form"],t):t(e["react-final-form-hooks"]={},e.React,e.FinalForm)}(this,function(e,l,p){"use strict";function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function m(e,t){if(null==e)return{};var n,r,u={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],0<=t.indexOf(n)||(u[n]=e[n]);return u}var d=p.fieldSubscriptionItems.reduce(function(e,t){return e[t]=!0,e},{}),c=p.formSubscriptionItems.reduce(function(e,t){return e[t]=!0,e},{}),f=function(e,t){void 0===t&&(t=c);var n,r=l.useState(function(){return e.getState()}),u=r[0],o=r[1];return l.useEffect(function(){return e.subscribe(o,t)},[e].concat((n=t,p.formSubscriptionItems.map(function(e){return Boolean(n[e])})))),u};e.useField=function(e,t,n){void 0===n&&(n=d);var r,u=l.useRef(!1),o=l.useState({}),c=o[0],i=o[1];l.useEffect(function(){return t.registerField(e,function(e){u.current&&(u.current=!1,setTimeout(function(){return e.focus()})),i(e)},n)},[e].concat((r=n,p.fieldSubscriptionItems.map(function(e){return Boolean(r[e])}))));var f=c||{},a=(f.blur,f.change,f.focus,f.value),s=m(f,["blur","change","focus","value"]);return delete s.name,{input:{name:e,value:a||"",onBlur:function(){return c.blur()},onChange:function(e){return c.change((t=e).target?["checkbox","radio"].includes(t.target.type)?t.target.checked:t.target.value:t);var t},onFocus:function(){c.focus?c.focus():u.current=!0}},meta:s}},e.useForm=function(e){var t=e.subscription,n=m(e,["subscription"]),r=l.useRef(),u=function(){return r.current||(r.current=p.createForm(n)),r.current},o=f(u(),t),c=l.useCallback(function(e){return e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),u().submit()},[]);return i({},o,{form:u(),handleSubmit:c})},e.useFormState=f,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=react-final-form-hooks.umd.min.js.map

package.json

 {
   "name": "react-final-form-hooks",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "React Hooks to bind to 🏁 Final Form's high performance subscription-based form state management engine",
@@ -5,0 +5,0 @@ "main": "dist/react-final-form-hooks.cjs.js",

README.md

@@ -120,3 +120,3 @@ # 🏁 React Final Form Hooks
 This project exists thanks to all the people who contribute. [[Contribute](.github/CONTRIBUTING.md)].
-<a href="https://github.com/final-form/react-final-form/graphs/contributors"><img src="https://opencollective.com/final-form/contributors.svg?width=890" /></a>
+<a href="https://github.com/final-form/react-final-form-hooks/graphs/contributors"><img src="https://opencollective.com/final-form/contributors.svg?width=890" /></a>
 
@@ -123,0 +123,0 @@ ## Backers

No alert changes

Improved metrics

Total package byte prevSize

41610

39.15%

Number of package files

11

10%

Lines of code

513

67.65%

No dependency changes