feat: #296 #304 + Reimplemented Hooks

CHANGELOG.md

@@ -1,3 +1,18 @@
+# 1.32
+* Validate with different props.
+* Reimplemented Event Hooks & Handlers.
+* Introduced new Event Hooks.
+* Introduced `input`/`output` props (converters).
+* Introduced `hooks` Field prop and class function.
+* Introduced `handlers` Field prop and class function.
+* Introduced `validatedWith` Field prop.
+* Introduced `validatedValue` Field computed.
+* Option `alwaysShowDefaultError` removed.
+* Option `uniqueId` (Custom Function) added.
+* Option `validateDisabledFields` added.
+* Computed `hasIncrementalNestedFields` renamed to `hasIncrementalKeys`.
+* No more manually wire `onDrop` to `onChange`.
+
 # 1.31
 * Option `validateOnBlur` added.
 * Option `validateOnChange` is `false` by default.

README.md

@@ -20,20 +20,13 @@
 - Automatic Reactive Validation & Error Messages.
 - Validation Plugins & Multiple Validation Styles.
 - Nested Fields (w/ Serialization & Validation).
-- Nested Forms (w/ Nested Submission & Validation Handlers).
+- Nested Forms (w/ Nested Submission & Validation Hooks).
+- Dinamically Add/Del Nested Fields.
 - Support for Sync & Async Validation functions (w/ Promises).
 - Fields Props Bindings for custom Components.
 - Support for Material UI, React Widgets, React Select & more.
 - Dedicated [DevTools](https://github.com/foxhound87/mobx-react-form-devtools) Package.
 
-### TypeScript Support
-
-A [TypeScript Branch](https://github.com/foxhound87/mobx-react-form/tree/typescript/) has been created. Feel free to contribute!
-
-<br>
-
-## CodeSandbox
-
 [![Edit form-quickstart](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/nrrZgG8y4)
 
 ## Documentation
@@ -97,10 +90,10 @@ const fields = [{
 
 > You can also define `fields` as an `object`.
 
-#### Define the Validation Handlers
+#### Define the Validation Hooks
 
 ```javascript
-const onSubmit = {
+const hooks = {
   onSuccess(form) {
     alert('Form is valid! Send the request here.');
     // get field values
@@ -116,12 +109,12 @@ const onSubmit = {
 
 #### Initialize the Form
 
-Simply pass the `fields`, `plugins` and `onSubmit` objects to the constructor
+Simply pass the `fields`, `plugins` and `hooks` objects to the constructor
 
 ```javascript
 import MobxReactForm from 'mobx-react-form';
 
-const form = new MobxReactForm({ fields }, { plugins, onSubmit });
+const form = new MobxReactForm({ fields }, { plugins, hooks });
 ```
 
 #### Pass the form to a react component

src/Base.js

@@ -2,12 +2,29 @@ import { computed } from 'mobx';
 import _ from 'lodash';
 
 import {
+  $try,
   $isEvent,
   hasIntKeys } from './utils';
 
 export default class Base {
 
-  @computed get hasIncrementalNestedFields() {
+  noop = () => {};
+
+  execHook = (name, fallback = {}) => $try(
+    fallback[name],
+    this.$hooks[name],
+    this.hooks && this.hooks.apply(this, [this])[name],
+    this.noop,
+  ).apply(this, [this]);
+
+  execHandler = (name, args, fallback = null) => [$try(
+    this.$handlers[name] && this.$handlers[name].apply(this, [this]),
+    this.handlers && this.handlers.apply(this, [this])[name].apply(this, [this]),
+    fallback,
+    this.noop,
+  ).apply(this, [...args]), this.execHook(name)];
+
+  @computed get hasIncrementalKeys() {
     return (this.fields.size && hasIntKeys(this.fields));
   }
 
@@ -42,40 +59,45 @@ export default class Base {
   /**
     Event Handler: On Clear
   */
-  onClear = (e) => {
-    e.preventDefault();
-    this.clear(true);
-  };
+  onClear = (...args) =>
+    this.execHandler('onClear', args, (e) => {
+      e.preventDefault();
+      this.clear(true);
+    });
 
   /**
     Event Handler: On Reset
   */
-  onReset = (e) => {
-    e.preventDefault();
-    this.reset(true);
-  };
+  onReset = (...args) =>
+    this.execHandler('onReset', args, (e) => {
+      e.preventDefault();
+      this.reset(true);
+    });
 
   /**
     Event Handler: On Submit
    */
-  onSubmit = (e, o = {}) => {
-    e.preventDefault();
-    this.submit(o);
-  };
+  onSubmit = (...args) =>
+    this.execHandler('onSubmit', args, (e, o = {}) => {
+      e.preventDefault();
+      this.submit(o);
+    });
 
   /**
     Event Handler: On Add
   */
-  onAdd = (e, val) => {
-    e.preventDefault();
-    this.add($isEvent(val) ? null : val);
-  };
+  onAdd = (...args) =>
+    this.execHandler('onAdd', args, (e, val) => {
+      e.preventDefault();
+      this.add($isEvent(val) ? null : val);
+    });
 
   /**
     Event Handler: On Del
   */
-  onDel = (e, path) => {
-    e.preventDefault();
-    this.del($isEvent(path) ? this.path : path);
-  };
+  onDel = (...args) =>
+    this.execHandler('onAdd', args, (e, path) => {
+      e.preventDefault();
+      this.del($isEvent(path) ? this.path : path);
+    });
 }