Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7b1638a

Browse files
BowlingXerikras
authored andcommitted
Added support for functions as validation message props (#12)
* Added support for functions as validation message props * Updated Readme and flow types
1 parent 2471705 commit 7b1638a

File tree

4 files changed

+52
-18
lines changed

4 files changed

+52
-18
lines changed

‎README.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -156,35 +156,35 @@ The step size between the `min` and `max` values. If invalid, the `stepMismatch`
156156

157157
The message to display [when the input is invalid somehow](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#suffering-from-bad-input).
158158

159-
#### `patternMismatch?: string`
159+
#### `patternMismatch?: string|(value?: any, props: Object) => string`
160160

161161
The message to display when the value does not match the pattern specified by the `pattern` prop.
162162

163-
#### `rangeOverflow?: string`
163+
#### `rangeOverflow?: string|(value?: any, props: Object) => string`
164164

165165
The message to display when the value is higher than the `max` prop.
166166

167-
#### `rangeUnderflow?: string`
167+
#### `rangeUnderflow?: string|(value?: any, props: Object) => string`
168168

169169
The message to display when the value is lower than the `min` prop.
170170

171-
#### `stepMismatch?: string`
171+
#### `stepMismatch?: string|(value?: any, props: Object) => string`
172172

173173
The message to display the value is not one of the valid steps specified by the `step` prop.
174174

175-
#### `tooLong?: string`
175+
#### `tooLong?: string|(value?: any, props: Object) => string`
176176

177177
The message to display when the value longer than the value specified by the `maxLength` prop.
178178

179-
#### `tooShort?: string`
179+
#### `tooShort?: string|(value?: any, props: Object) => string`
180180

181181
The message to display when the value shorter than the value specified by the `minLength` prop.
182182

183-
#### `typeMismatch?: string`
183+
#### `typeMismatch?: string|(value?: any, props: Object) => string`
184184

185185
The message to display when the value does not match the `type` prop.
186186

187-
#### `valueMissing?: string`
187+
#### `valueMissing?: string|(value?: any, props: Object) => string`
188188

189189
The message to display when the value is required, but missing.
190190

‎src/Html5ValidationField.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,10 @@ export default class Html5ValidationField extends React.Component<Props> {
8080
return validity.customError
8181
}
8282
const errorKey: ?string = errorKeys.find(key => (validity: Object)[key])
83-
const error = errorKey && this.props[errorKey]
83+
let error = errorKey && this.props[errorKey]
84+
if (typeof error === 'function') {
85+
error = error(value, this.props)
86+
}
8487
input.setCustomValidity(error)
8588
return error
8689
}

‎src/Html5ValidationField.test.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -537,5 +537,34 @@ describe('Html5ValidationField', () => {
537537
}
538538
)
539539
})
540+
it('should support functions as default error keys', () => {
541+
const setCustomValidity = jest.fn()
542+
mockFindNode(
543+
{
544+
nodeName: 'input',
545+
setCustomValidity,
546+
validity: {
547+
tooShort: true
548+
}
549+
},
550+
() => {
551+
const spy = jest.fn(({ input }) => <input {...input} />)
552+
TestUtils.renderIntoDocument(
553+
<Form initialValues={{ foo: 'bar' }} onSubmit={onSubmitMock} subscription={{}}>
554+
{() =>
555+
<Html5ValidationField
556+
tooShort={(value, { minLength }) =>
557+
`Value ${value} should have at least ${minLength} characters.`}
558+
minLength={8} name="foo" render={spy} />
559+
}
560+
</Form>
561+
)
562+
expect(spy).toHaveBeenCalled()
563+
expect(spy).toHaveBeenCalledTimes(2)
564+
expect(spy.mock.calls[1][0].meta.error).toBe('Value bar should have at least 8 characters.')
565+
}
566+
)
567+
})
540568
})
569+
541570
})

‎src/types.js.flow

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
// @flow
22
import type { FieldProps } from 'react-final-form'
33

4+
type MessageValue = string | ((value?: any, props: Object) => string)
5+
46
type Messages = {
5-
badInput?: string,
6-
patternMismatch?: string,
7-
rangeOverflow?: string,
8-
rangeUnderflow?: string,
9-
stepMismatch?: string,
10-
tooLong?: string,
11-
tooShort?: string,
12-
typeMismatch?: string,
13-
valueMissing?: string
7+
badInput?: MessageValue,
8+
patternMismatch?: MessageValue,
9+
rangeOverflow?: MessageValue,
10+
rangeUnderflow?: MessageValue,
11+
stepMismatch?: MessageValue,
12+
tooLong?: MessageValue,
13+
tooShort?: MessageValue,
14+
typeMismatch?: MessageValue,
15+
valueMissing?: MessageValue
1416
}
1517
export type Html5ValidationFieldProps = FieldProps & Messages

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /