Feature/new context api

package.json

@@ -95,8 +95,8 @@
     "np": "^5.0.2",
     "prettier": "^1.18.2",
     "pretty-quick": "^1.11.1",
-    "react": "^16.2.0 || ^16.0.0",
-    "react-dom": "^16.2.0 || ^16.0.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "rollup": "^1.16.7",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.0.1",
@@ -106,7 +106,7 @@
     "typescript": "^3.5.3"
   },
   "peerDependencies": {
-    "react": "^15.6.1 || ^16.0.0",
-    "react-dom": "^15.6.1 || ^16.0.0"
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   }
 }

rollup.config.js

@@ -7,8 +7,8 @@ import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import pkg from './package.json';
 
 const name = 'formsy-react',
-  input = 'src/index.ts',
-  extensions = ['.js', '.ts'],
+  input = 'src/index.tsx',
+  extensions = ['.js', '.tsx', '.ts'],
   babelConfig = {
     ...babelrc({ addExternalHelpersPlugin: false }),
     exclude: 'node_modules/**',

src/FormsyContext.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormsyContextInterface } from './interfaces';
+
+const noFormsyErrorMessage = 'No Context Provider defined';
+
+const throwNoFormsyProvider = () => {
+  throw new Error(noFormsyErrorMessage);
+};
+
+const defaultValue = {
+  attachToForm: throwNoFormsyProvider,
+  detachFromForm: throwNoFormsyProvider,
+  isFormDisabled: () => true,
+  isValidValue: throwNoFormsyProvider,
+  validate: throwNoFormsyProvider,
+};
+
+export default React.createContext<FormsyContextInterface>(defaultValue);

src/Wrapper.ts

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import utils from './utils';
 import { Validations, WrappedComponentClass, RequiredValidation, Value } from './interfaces';
+import FormsyContext from './FormsyContext';
 
 /* eslint-disable react/default-props-match-prop-types */
 
@@ -102,7 +103,7 @@ function getDisplayName(component: WrappedComponentClass) {
   );
 }
 
-export default function<Props, State, CompState>(
+export default function<Props, State>(
   WrappedComponent: React.ComponentClass<Props & State>,
 ): React.ComponentClass<Props & State> {
   return class extends React.Component<Props & State & WrapperProps, WrapperState> {
@@ -112,9 +113,8 @@ export default function<Props, State, CompState>(
 
     public static displayName = `Formsy(${getDisplayName(WrappedComponent)})`;
 
-    public static contextTypes = {
-      formsy: PropTypes.object, // What about required?
-    };
+    public static contextType = FormsyContext;
+    public context!: React.ContextType<typeof FormsyContext>;
 
     public static defaultProps: any = {
       innerRef: null,
@@ -143,13 +143,11 @@ export default function<Props, State, CompState>(
 
     public componentWillMount() {
       const { validations, required, name } = this.props;
-      const { formsy } = this.context;
-
       const configure = () => {
         this.setValidations(validations, required);
 
         // Pass a function instead?
-        formsy.attachToForm(this);
+        this.context.attachToForm(this);
       };
 
       if (!name) {
@@ -176,7 +174,6 @@ export default function<Props, State, CompState>(
 
     public componentDidUpdate(prevProps) {
       const { value, validations, required } = this.props;
-      const { formsy } = this.context;
 
       // If the value passed has changed, set it. If value is not passed it will
       // internally update, and this will never run
@@ -186,14 +183,13 @@ export default function<Props, State, CompState>(
 
       // If validations or required is changed, run a new validation
       if (!utils.isSame(validations, prevProps.validations) || !utils.isSame(required, prevProps.required)) {
-        formsy.validate(this);
+        this.context.validate(this);
       }
     }
 
     // Detach it when component unmounts
     public componentWillUnmount() {
-      const { formsy } = this.context;
-      formsy.detachFromForm(this);
+      this.context.detachFromForm(this);
     }
 
     public getErrorMessage = () => {
@@ -222,9 +218,7 @@ export default function<Props, State, CompState>(
 
     // By default, we validate after the value has been set.
     // A user can override this and pass a second parameter of `false` to skip validation.
-    public setValue = (value, validate = true) => {
-      const { formsy } = this.context;
-
+    public setValue = (value: any, validate = true) => {
       if (!validate) {
         this.setState({
           value,
@@ -236,7 +230,7 @@ export default function<Props, State, CompState>(
             isPristine: false,
           },
           () => {
-            formsy.validate(this);
+            this.context.validate(this);
           },
         );
       }
@@ -246,7 +240,7 @@ export default function<Props, State, CompState>(
     public hasValue = () => this.state.value !== '';
 
     // eslint-disable-next-line react/destructuring-assignment
-    public isFormDisabled = () => this.context.formsy.isFormDisabled();
+    public isFormDisabled = () => this.context.isFormDisabled();
 
     // eslint-disable-next-line react/destructuring-assignment
     public isFormSubmitted = () => this.state.formSubmitted;
@@ -261,19 +255,18 @@ export default function<Props, State, CompState>(
     public isValid = () => this.state.isValid;
 
     // eslint-disable-next-line react/destructuring-assignment
-    public isValidValue = value => this.context.formsy.isValidValue.call(null, this, value);
+    public isValidValue = value => this.context.isValidValue(this, value);
 
     public resetValue = () => {
       const { pristineValue } = this.state;
-      const { formsy } = this.context;
 
       this.setState(
         {
           value: pristineValue,
           isPristine: true,
         },
         () => {
-          formsy.validate(this);
+          this.context.validate(this);
         },
       );
     };

src/index.ts → src/index.tsx

@@ -1,12 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import formDataToObject from 'form-data-to-object';
+import FormsyContext from './FormsyContext';
 
 import utils from './utils';
 import validationRules from './validationRules';
 import Wrapper, { propTypes } from './Wrapper';
 
-import { IData, IModel, InputComponent, IResetModel, IUpdateInputsWithError, ValidationFunction } from './interfaces';
+import {
+  IData,
+  IModel,
+  InputComponent,
+  IResetModel,
+  IUpdateInputsWithError,
+  ValidationFunction,
+  FormsyContextInterface,
+} from './interfaces';
 
 type FormHTMLAttributesCleaned = Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onChange' | 'onSubmit'>;
 
@@ -54,6 +63,8 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
 
   public emptyArray: any[];
 
+  public contextValue: FormsyContextInterface;
+
   public prevInputNames: any[] | null = null;
 
   public static displayName = 'Formsy';
@@ -117,10 +128,6 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
     validationErrors: PropTypes.object, // eslint-disable-line
   };
 
-  public static childContextTypes = {
-    formsy: PropTypes.object,
-  };
-
   public constructor(props: FormsyProps) {
     super(props);
     this.state = {
@@ -130,17 +137,14 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
     };
     this.inputs = [];
     this.emptyArray = [];
-  }
-
-  public getChildContext = () => ({
-    formsy: {
+    this.contextValue = {
       attachToForm: this.attachToForm,
       detachFromForm: this.detachFromForm,
       isFormDisabled: this.isFormDisabled,
       isValidValue: (component, value) => this.runValidation(component, value).isValid,
       validate: this.validate,
-    },
-  });
+    };
+  }
 
   public componentDidMount = () => {
     this.validateForm();
@@ -509,16 +513,20 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
       ...nonFormsyProps
     } = this.props;
 
-    return React.createElement(
-      'form',
-      {
-        onReset: this.resetInternal,
-        onSubmit: this.submit,
-        ...nonFormsyProps,
-        disabled: false,
-      },
-      // eslint-disable-next-line react/destructuring-assignment
-      this.props.children,
+    return (
+      <FormsyContext.Provider value={this.contextValue}>
+        {React.createElement(
+          'form',
+          {
+            onReset: this.resetInternal,
+            onSubmit: this.submit,
+            ...nonFormsyProps,
+            disabled: false,
+          },
+          // eslint-disable-next-line react/destructuring-assignment
+          this.props.children,
+        )}
+      </FormsyContext.Provider>
     );
   };
 }

src/interfaces.ts

@@ -31,3 +31,11 @@ export interface InputComponent extends React.Component<WrapperProps, WrapperSta
   validations?: Validations;
   requiredValidations?: Validations;
 }
+
+export interface FormsyContextInterface {
+  attachToForm: (component: InputComponent) => void;
+  detachFromForm: (component: InputComponent) => void;
+  isFormDisabled: () => boolean;
+  isValidValue: (component: InputComponent, value: any) => boolean;
+  validate: (component: InputComponent) => void;
+}