Helper text update

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -1,3 +1,4 @@
 /.idea
 /node_modules
 /dist
+yarn-error.log

.prettierrc.yml

@@ -0,0 +1 @@
+singleQuote: true

package.json

@@ -1,6 +1,6 @@
 {
   "name": "final-form-material-ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A set of wrapper components to facilitate using Material UI with Final Form",
   "main": "./dist/final-form-material-ui.min.js",
   "author": "Igor Golovin <xdeadlyx@ya.ru>",
@@ -9,17 +9,17 @@
     "build": "webpack --display-modules"
   },
   "peerDependencies": {
-    "@material-ui/core": "^1.0.0 || ^2.0.0 || ^3.0.0",
+    "@material-ui/core": "^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0",
     "final-form": "^4.0.0",
     "react": "^15.0.0 || ^16.0.0",
-    "react-final-form": "^3.0.0 || ^4.0.0"
+    "react-final-form": "^3.0.0 || ^4.0.0 || ^6.3.0"
   },
   "devDependencies": {
-    "@material-ui/core": "^3.2.2",
+    "@material-ui/core": "^4.1.1",
     "final-form": "^4.0.0",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
-    "react-final-form": "^4.0.2",
+    "react-final-form": "^6.3.0",
     "ts-loader": "^5.2.2",
     "typescript": "^3.1.3",
     "webpack": "^4.12.0",
@@ -42,5 +42,6 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/Deadly0/final-form-material-ui.git"
-  }
+  },
+  "dependencies": {}
 }

src/Checkbox.tsx

@@ -1,17 +1,18 @@
 import * as React from 'react';
-import Checkbox from '@material-ui/core/Checkbox';
-import {FieldRenderProps} from 'react-final-form';
+import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';
+import { FieldRenderProps } from 'react-final-form';
 
+export type Props = FieldRenderProps<HTMLInputElement, any> & CheckboxProps;
 
-const CheckboxWrapper: React.SFC<FieldRenderProps> = ({
-	input: {checked, name, onChange, ...restInput},
+const CheckboxWrapper: React.SFC<Props> = ({
+	input: { checked, name, onChange, onFocus, onBlur },
 	meta,
 	...rest
 }) => (
 	<Checkbox
 		{...rest}
 		name={name}
-		inputProps={restInput}
+		inputProps={{ onFocus, onBlur }}
 		onChange={onChange}
 		checked={checked}
 	/>

src/Input.tsx

@@ -1,28 +1,33 @@
 import * as React from 'react';
-import {FieldRenderProps} from 'react-final-form';
-import Input from '@material-ui/core/Input';
+import { FieldRenderProps } from 'react-final-form';
+import Input, { InputProps } from '@material-ui/core/Input';
 import FormHelperText from '@material-ui/core/FormHelperText';
 
+export type Props = FieldRenderProps<HTMLTextAreaElement | HTMLInputElement, any> &
+	InputProps;
 
-const InputWrapper: React.SFC<FieldRenderProps> = ({input: {name, onChange, value, ...restInput}, meta, ...rest}) => {
-	const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched;
+const InputWrapper: React.SFC<Props> = ({ input, meta, ...rest }) => {
+	const { name, value, onChange, onBlur, onFocus } = input;
+	const showError =
+		((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) &&
+		meta.touched;
 
 	return (
 		<>
 			<Input
 				{...rest}
 				name={name}
 				error={showError}
-				inputProps={restInput}
+				inputProps={{ onBlur, onFocus }}
 				onChange={onChange}
 				value={value}
 			/>
 
-			{showError &&
+			{showError && (
 				<FormHelperText>
 					{meta.error || meta.submitError}
 				</FormHelperText>
-			}
+			)}
 		</>
 	);
 };

src/Radio.tsx

@@ -1,17 +1,18 @@
 import * as React from 'react';
-import Radio from '@material-ui/core/Radio';
-import {FieldRenderProps} from 'react-final-form';
+import Radio, { RadioProps } from '@material-ui/core/Radio';
+import { FieldRenderProps } from 'react-final-form';
 
+export type Props = FieldRenderProps<HTMLInputElement, any> & RadioProps;
 
-const RadioWrapper: React.SFC<FieldRenderProps> = ({
-	input: {checked, value, name, onChange, ...restInput},
+const RadioWrapper: React.SFC<Props> = ({
+	input: { checked, value, name, onChange, onFocus, onBlur },
 	meta,
 	...rest
 }) => (
 	<Radio
 		{...rest}
 		name={name}
-		inputProps={restInput}
+		inputProps={{ onFocus, onBlur }}
 		onChange={onChange}
 		checked={checked}
 		value={value}

src/Select.tsx

@@ -1,25 +1,29 @@
 import * as React from 'react';
-import Select from '@material-ui/core/Select';
+import Select, { SelectProps } from '@material-ui/core/Select';
 import FormControl from '@material-ui/core/FormControl';
 import InputLabel from '@material-ui/core/InputLabel';
 import FormHelperText from '@material-ui/core/FormHelperText';
-import {FormControlProps} from '@material-ui/core/FormControl';
-import {FieldRenderProps} from 'react-final-form';
+import { FormControlProps } from '@material-ui/core/FormControl';
+import { FieldRenderProps } from 'react-final-form';
 
+export type Props = FieldRenderProps<
+	HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+, any> &
+	SelectProps & {
+		label: string;
+		formControlProps: FormControlProps;
+	};
 
-interface FormHelperTextWrapperProps extends FieldRenderProps {
-	label: string,
-	formControlProps: FormControlProps,
-}
-
-const FormHelperTextWrapper: React.SFC<FormHelperTextWrapperProps> = ({
-    input: {name, value, onChange, ...restInput},
-    meta,
+const FormHelperTextWrapper: React.SFC<Props> = ({
+	input: { name, value, onChange, onBlur, onFocus },
+	meta,
 	label,
-    formControlProps,
-    ...rest
+	formControlProps,
+	...rest
 }) => {
-	const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched;
+	const showError =
+		((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) &&
+		meta.touched;
 
 	return (
 		<FormControl {...formControlProps} error={showError}>
@@ -29,13 +33,15 @@ const FormHelperTextWrapper: React.SFC<FormHelperTextWrapperProps> = ({
 				{...rest}
 				name={name}
 				onChange={onChange}
-				inputProps={restInput}
+				inputProps={{ onBlur, onFocus }}
 				value={value}
 			/>
 
-			{showError &&
-				<FormHelperText>{meta.error || meta.submitError}</FormHelperText>
-			}
+			{showError && (
+				<FormHelperText>
+					{meta.error || meta.submitError}
+				</FormHelperText>
+			)}
 		</FormControl>
 	);
 };

src/TextField.tsx

@@ -1,18 +1,29 @@
 import * as React from 'react';
-import {FieldRenderProps} from 'react-final-form';
-import TextField from '@material-ui/core/TextField';
+import { FieldRenderProps } from 'react-final-form';
+import TextField, { TextFieldProps } from '@material-ui/core/TextField';
 
+export type Props = FieldRenderProps<
+	HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+, any> &
+	TextFieldProps;
 
-const TextFieldWrapper: React.SFC<FieldRenderProps> = ({input: {name, onChange, value, ...restInput}, meta, ...rest}) => {
-	const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched;
+const TextFieldWrapper: React.SFC<Props> = ({
+	input: { name, onChange, value, onFocus, onBlur },
+	meta,
+	helperText,
+	...rest
+}) => {
+	const showError =
+		((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) &&
+		meta.touched;
 
 	return (
 		<TextField
 			{...rest}
 			name={name}
-			helperText={showError ? meta.error || meta.submitError : undefined}
+			helperText={showError ? meta.error || meta.submitError : helperText}
 			error={showError}
-			inputProps={restInput}
+			inputProps={{ onFocus, onBlur }}
 			onChange={onChange}
 			value={value}
 		/>

src/index.ts

@@ -1,8 +1,5 @@
-import TextField from './TextField';
-import Checkbox from './Checkbox';
-import Radio from './Radio';
-import Select from './Select';
-import Input from './Input';
-
-
-export {TextField, Checkbox, Radio, Select, Input};
+export { default as TextField, Props as TextFieldProps } from "./TextField";
+export { default as Checkbox, Props as CheckboxProps } from "./Checkbox";
+export { default as Radio, Props as RadioProps } from "./Radio";
+export { default as Select, Props as SelectProps } from "./Select";
+export { default as Input, Props as InputProps } from "./Input";