Added support for functions as validation message props (#12)

* Added support for functions as validation message props

* Updated Readme and flow types

Author: BowlingX

README.md

@@ -156,35 +156,35 @@ The step size between the `min` and `max` values. If invalid, the `stepMismatch`
 
 The message to display [when the input is invalid somehow](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#suffering-from-bad-input).
 
-#### `patternMismatch?: string`
+#### `patternMismatch?: string|(value?: any, props: Object) => string`
 
 The message to display when the value does not match the pattern specified by the `pattern` prop.
 
-#### `rangeOverflow?: string`
+#### `rangeOverflow?: string|(value?: any, props: Object) => string`
 
 The message to display when the value is higher than the `max` prop.
 
-#### `rangeUnderflow?: string`
+#### `rangeUnderflow?: string|(value?: any, props: Object) => string`
 
 The message to display when the value is lower than the `min` prop.
 
-#### `stepMismatch?: string`
+#### `stepMismatch?: string|(value?: any, props: Object) => string`
 
 The message to display the value is not one of the valid steps specified by the `step` prop.
 
-#### `tooLong?: string`
+#### `tooLong?: string|(value?: any, props: Object) => string`
 
 The message to display when the value longer than the value specified by the `maxLength` prop.
 
-#### `tooShort?: string`
+#### `tooShort?: string|(value?: any, props: Object) => string`
 
 The message to display when the value shorter than the value specified by the `minLength` prop.
 
-#### `typeMismatch?: string`
+#### `typeMismatch?: string|(value?: any, props: Object) => string`
 
 The message to display when the value does not match the `type` prop.
 
-#### `valueMissing?: string`
+#### `valueMissing?: string|(value?: any, props: Object) => string`
 
 The message to display when the value is required, but missing.
 

src/Html5ValidationField.js

@@ -80,7 +80,10 @@ export default class Html5ValidationField extends React.Component<Props> {
           return validity.customError
         }
         const errorKey: ?string = errorKeys.find(key => (validity: Object)[key])
-        const error = errorKey && this.props[errorKey]
+        let error = errorKey && this.props[errorKey]
+          if (typeof error === 'function') {
+              error = error(value, this.props)
+          }
         input.setCustomValidity(error)
         return error
       }

src/Html5ValidationField.test.js

@@ -537,5 +537,34 @@ describe('Html5ValidationField', () => {
         }
       )
     })
+      it('should support functions as default error keys', () => {
+        const setCustomValidity = jest.fn()
+        mockFindNode(
+            {
+                nodeName: 'input',
+                setCustomValidity,
+                validity: {
+                    tooShort: true
+                }
+            },
+            () => {
+              const spy = jest.fn(({ input }) => <input {...input} />)
+              TestUtils.renderIntoDocument(
+                <Form initialValues={{ foo: 'bar' }} onSubmit={onSubmitMock} subscription={{}}>
+                  {() =>
+                      <Html5ValidationField
+                          tooShort={(value, { minLength }) =>
+                              `Value ${value} should have at least ${minLength} characters.`}
+                          minLength={8} name="foo" render={spy} />
+                  }
+                </Form>
+              )
+              expect(spy).toHaveBeenCalled()
+              expect(spy).toHaveBeenCalledTimes(2)
+              expect(spy.mock.calls[1][0].meta.error).toBe('Value bar should have at least 8 characters.')
+            }
+        )
+      })
   })
+
 })

src/types.js.flow

@@ -1,15 +1,17 @@
 // @flow
 import type { FieldProps } from 'react-final-form'
 
+type MessageValue = string | ((value?: any, props: Object) => string)
+
 type Messages = {
-  badInput?: string,
-  patternMismatch?: string,
-  rangeOverflow?: string,
-  rangeUnderflow?: string,
-  stepMismatch?: string,
-  tooLong?: string,
-  tooShort?: string,
-  typeMismatch?: string,
-  valueMissing?: string
+  badInput?: MessageValue,
+  patternMismatch?: MessageValue,
+  rangeOverflow?: MessageValue,
+  rangeUnderflow?: MessageValue,
+  stepMismatch?: MessageValue,
+  tooLong?: MessageValue,
+  tooShort?: MessageValue,
+  typeMismatch?: MessageValue,
+  valueMissing?: MessageValue
 }
 export type Html5ValidationFieldProps = FieldProps & Messages