New way to register a component

Signed-off-by: danieloprado <[email protected]>

Author: danieloprado

API.md

@@ -28,21 +28,22 @@ class MyComponentField extends FieldCoreBase {
   }
 
   render() {
-    const { value, label, name } = this.props;
+    const { label, name } = this.props;
 
     return (
       <Fragment>
-        {super.render() /*<-- important*/} 
+        {/* import: register the field in the validation context */}
+        <ValidationContextRegister field={this} />
 
         {/* isRequired: check if validation prop contains the required rule */}
         <label>{label} {this.isRequired ? '*' : ''}</label>
         <input 
           name={name}
-          value={this.mask.apply(value)}
+          value={this.getMaskedValue}
           onChange={this.onChange}
         />
 
-        {/* errorMessage will null if submitted and touched are false  */}
+        {/* errorMessage will be null if submitted and touched are false  */}
         {this.errorMessage ? <p class="error">{this.errorMessage}</p> : null}
       </Fragment>
     );

components/FieldCoreBase.tsx

@@ -23,12 +23,12 @@ export interface IPropsFieldBase {
   children?: React.ReactNode;
 }
 
-export default class FieldCoreBase<
+export default abstract class FieldCoreBase<
   P extends IPropsFieldBase = IPropsFieldBase,
   S extends IStateFieldBase = IStateFieldBase
   > extends React.PureComponent<P, S> {
-
-  protected validationContext: IFieldValidationContext;
+  static contextType = FieldValidation;
+  context: IFieldValidationContext;
 
   constructor(props: any) {
     super(props);
@@ -58,6 +58,10 @@ export default class FieldCoreBase<
     return mask;
   }
 
+  get getMaskedValue() {
+    return this.mask.apply(this.props.value);
+  }
+
   static getDerivedStateFromProps({ name, value, validation, validationContext, children, submitted }: IPropsFieldBase, currentState: IStateFieldBase): IStateFieldBase {
     const customMessages = React.Children
       .toArray(children)
@@ -81,7 +85,7 @@ export default class FieldCoreBase<
   }
 
   public componentWillUnmount() {
-    this.validationContext && this.validationContext.unregister(this);
+    this.context && this.context.unregister(this);
   }
 
   public setFormSubmitted = (submitted: boolean) => {
@@ -95,25 +99,4 @@ export default class FieldCoreBase<
   public isValid = () => {
     return !this.state.errorMessage && !this.props.errorMessage;
   }
-
-  public setContext = (newContext: IFieldValidationContext): React.ReactNode => {
-    if (newContext === this.validationContext) return null;
-
-    this.validationContext && this.validationContext.unregister(this);
-
-    if (newContext) {
-      this.validationContext = newContext;
-      this.validationContext.register(this);
-    }
-
-    return null;
-  }
-
-  public render() {
-    return (
-      <FieldValidation.Consumer>
-        {this.setContext}
-      </FieldValidation.Consumer>
-    );
-  }
 }

components/ValidationContextRegister.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import { FieldValidation, IFieldValidationContext } from '../validator/context';
+import FieldCoreBase from './FieldCoreBase';
+
+interface IProps {
+  field: FieldCoreBase;
+}
+
+export default class ValidationContextRegister extends React.PureComponent<IProps, {}> {
+  private validationContext: IFieldValidationContext;
+
+  private setContext = (newContext: IFieldValidationContext): React.ReactNode => {
+    if (newContext === this.validationContext) return null;
+
+    this.validationContext && this.validationContext.unregister(this.props.field);
+
+    if (newContext) {
+      this.validationContext = newContext;
+      this.validationContext.register(this.props.field);
+    }
+
+    return null;
+  }
+
+  public componentWillMount() {
+    this.validationContext && this.validationContext.unregister(this.props.field);
+  }
+
+  public render(): React.ReactNode {
+    return (
+      <FieldValidation.Consumer>
+        {this.setContext}
+      </FieldValidation.Consumer>
+    )
+  }
+}

package.json

@@ -9,7 +9,7 @@
     "validation",
     "material"
   ],
-  "version": "1.1.0",
+  "version": "1.3.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "license": "MIT",