Implement new context format

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-context-form",
-  "version": "2.11.0",
+  "version": "3.0.0-3",
   "description": "One more way to handle forms on React",
   "main": "build/index.js",
   "typings": "build/index.d.ts",
@@ -37,8 +37,7 @@
     "@types/enzyme": "^2.8.9",
     "@types/mocha": "^2.2.48",
     "@types/node": "^10.3.3",
-    "@types/prop-types": "^15.5.3",
-    "@types/react": "^16.3.17",
+    "@types/react": "^16.8.1",
     "@types/sinon": "^2.3.3",
     "awesome-typescript-loader": "^3.5.0",
     "axios": "^0.18.0",
@@ -62,8 +61,7 @@
     "mocha": "^5.2.0",
     "nyc": "^11.9.0",
     "pre-commit": "^1.2.2",
-    "prop-types": "^15.6.1",
-    "react": "^16.4.1",
+    "react": "^16.7.0",
     "react-dom": "^16.4.1",
     "react-test-renderer": "^16.4.1",
     "sinon": "^6.0.0",
@@ -78,9 +76,9 @@
     "webpack-node-externals": "^1.7.2"
   },
   "peerDependencies": {
+    "axios": "^0.18.0",
     "class-validator": "^0.7.2",
-    "prop-types": "^15.6.0",
-    "react": "^16.2.0"
+    "react": "^16.7.0"
   },
   "nyc": {
     "extension": [
@@ -99,7 +97,6 @@
     ],
     "report-dir": "./tests/output"
   },
-  "dependencies": {},
   "pre-commit": [
     "lint",
     "test"

src/AutoFocus/AutoFocus.tsx

@@ -1,16 +1,17 @@
 import * as React from "react";
-import * as PropTypes from "prop-types";
 
-import { AutoValidate } from "../AutoValidate/AutoValidate";
-import { AutoFocusProps, AutoFocusPropTypes } from "./AutoFocusProps";
-import { AutoFocusContext, AutoFocusContextTypes } from "./AutoFocusContext";
+import { AutoValidate, AutoValidateProps } from "../AutoValidate";
+import { FormContext, FormContextValue } from "../Form";
 
-export class AutoFocus extends React.Component<AutoFocusProps> {
-    public static readonly propTypes = AutoFocusPropTypes;
-    public static readonly contextTypes = AutoFocusContextTypes;
+export interface AutoFocusProps extends AutoValidateProps {
+    to: string,
+}
+
+export class AutoFocus extends React.PureComponent<AutoFocusProps> {
+    public static readonly contextType = FormContext;
 
     public props: AutoFocusProps;
-    public context: AutoFocusContext;
+    public context: FormContextValue;
 
     public render(): JSX.Element {
         const { to, ...childProps } = this.props;

src/AutoFocus/index.ts

@@ -1,3 +1 @@
 export * from "./AutoFocus";
-export * from "./AutoFocusContext";
-export * from "./AutoFocusProps";

src/AutoUpdate/AutoUpdate.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+
+import { FormContext, FormContextValue } from "../Form";
+import { FormGroupContext, FormGroupContextValue } from "../FormGroup";
+
+export interface AutoUpdateProps {
+    value: (value: any) => any,
+    attribute: string,
+    children: JSX.Element,
+    onBlur?: boolean,
+    onChange?: boolean,
+}
+
+export const AutoUpdateDefaultProps = {
+    onBlur: true,
+    onChange: false,
+};
+
+class AutoUpdateLayout extends React.PureComponent<
+    AutoUpdateProps & { getDOMElement: FormContextValue["getDOMElement"]}
+> {
+    public static readonly defaultProps = AutoUpdateDefaultProps;
+    public static readonly contextType = FormGroupContext;
+
+    public context: FormGroupContextValue;
+
+    public render(): JSX.Element {
+        return <FormGroupContext.Provider value={this.childContextValue} children={this.props.children} />
+    }
+
+    protected get childContextValue(): FormGroupContextValue {
+        return {
+            ...this.context,
+            onBlur: this.handleBlur,
+            onChange: this.handleChange,
+        }
+    }
+
+    protected handleUpdate = (): void => {
+        this.context.onAttributeChange(this.props.attribute, this.props.value(this.context.value));
+
+        const element = this.props.getDOMElement(this.props.attribute);
+        if (element instanceof HTMLElement) {
+            // blur event does not triggered if element not focused
+            element.focus();
+            element.blur();
+        }
+    }
+
+    protected handleBlur = (): void => {
+        this.props.onBlur && this.handleUpdate();
+
+        this.context.onBlur();
+    }
+
+    protected handleChange = (value: any): void => {
+        this.props.onChange && this.context.onAttributeChange(this.props.attribute, this.props.value(value));
+
+        this.context.onChange(value);
+    }
+}
+
+export const AutoUpdate = ((props: AutoUpdateProps) => (
+    <FormContext.Consumer>
+        {(context: FormContextValue) => <AutoUpdateLayout {...props} getDOMElement={context.getDOMElement} />}
+    </FormContext.Consumer>
+));

src/AutoUpdate/index.ts

@@ -1,3 +1 @@
 export * from "./AutoUpdate";
-export * from "./AutoUpdateProps";
-export * from "./AutoUpdateContext";