Value Lifecycle Props (#74)

* Added type definitions for parse, format, and normalize props

* Implemented format, parse, and normalize props

* Fixed form.onSubmit call signature assert

* Made new props optional

* Unbreak build. 😳

Author: dummerbd

src/Field.js

@@ -25,6 +25,16 @@ export default class Field extends React.PureComponent<Props, State> {
   state: State
   unsubscribe: () => void
 
+  static contextTypes = {
+    reactFinalForm: PropTypes.object
+  }
+
+  static defaultProps = {
+    format: (value: ?any, name: string) => (value === undefined ? '' : value),
+    parse: (value: ?any, name: string) => (value === '' ? undefined : value),
+    normalize: (value: ?any, previousValue: ?any, allValues: Object) => value
+  }
+
   constructor(props: Props, context: ReactContext) {
     super(props, context)
     let initialState
@@ -66,6 +76,17 @@ export default class Field extends React.PureComponent<Props, State> {
 
   notify = (state: FieldState) => this.setState({ state })
 
+  parseAndNormalize = (value: ?any) => {
+    if (this.props.parse !== null) {
+      value = this.props.parse(value, this.props.name)
+    }
+    return this.props.normalize(
+      value,
+      this.state.state.value,
+      this.context.reactFinalForm.getState().values
+    )
+  }
+
   componentWillReceiveProps(nextProps: Props) {
     const { name, subscription } = nextProps
     if (
@@ -95,7 +116,7 @@ export default class Field extends React.PureComponent<Props, State> {
     onChange: (event: SyntheticInputEvent<*> | any) => {
       const value: any =
         event && event.target ? getValue(event, isReactNative) : event
-      this.state.state.change(value === '' ? undefined : value)
+      this.state.state.change(this.parseAndNormalize(value))
     },
     onFocus: (event: ?SyntheticFocusEvent<*>) => {
       this.state.state.focus()
@@ -107,6 +128,9 @@ export default class Field extends React.PureComponent<Props, State> {
       allowNull,
       component,
       children,
+      format,
+      parse,
+      normalize,
       isEqual,
       name,
       subscription,
@@ -123,7 +147,10 @@ export default class Field extends React.PureComponent<Props, State> {
       name: ignoreName,
       ...meta
     } = this.state.state
-    if (value === undefined || (value === null && !allowNull)) {
+    if (format !== null) {
+      value = format(value, name)
+    }
+    if (value === null && !allowNull) {
       value = ''
     }
     const input = { name, value, ...this.handlers }
@@ -154,7 +181,3 @@ export default class Field extends React.PureComponent<Props, State> {
     )
   }
 }
-
-Field.contextTypes = {
-  reactFinalForm: PropTypes.object
-}

src/Field.test.js

@@ -193,6 +193,165 @@ describe('Field', () => {
     expect(render.mock.calls[2][0].values.foo).toBeUndefined()
   })
 
+  it('should accept parse and normalize function props', () => {
+    const parse = jest.fn((value, name) => `parse.${value}`)
+    const normalize = jest.fn(
+      (value, previousValue, allValues) => `normalize.${value}`
+    )
+    const renderInput = jest.fn(({ input }) => <input {...input} />)
+    const render = jest.fn(() => (
+      <form>
+        <Field
+          name="foo"
+          render={renderInput}
+          parse={parse}
+          normalize={normalize}
+        />
+        <Field name="boo" component="select" />
+      </form>
+    ))
+
+    const dom = TestUtils.renderIntoDocument(
+      <Form
+        onSubmit={onSubmitMock}
+        render={render}
+        initialValues={{ boo: 'abc' }}
+      />
+    )
+
+    expect(render).toHaveBeenCalled()
+    expect(render).toHaveBeenCalledTimes(1)
+    expect(render.mock.calls[0][0].values).toEqual({
+      foo: undefined,
+      boo: 'abc'
+    })
+
+    const input = TestUtils.findRenderedDOMComponentWithTag(dom, 'input')
+
+    TestUtils.Simulate.change(input, { target: { value: 'bar' } })
+
+    expect(render).toHaveBeenCalledTimes(2)
+    expect(render.mock.calls[1][0].values.foo).toBe('normalize.parse.bar')
+
+    expect(parse).toHaveBeenCalled()
+    expect(parse).toHaveBeenCalledTimes(1)
+    expect(parse.mock.calls[0]).toEqual(['bar', 'foo'])
+
+    expect(normalize).toHaveBeenCalled()
+    expect(normalize).toHaveBeenCalledTimes(1)
+    expect(normalize.mock.calls[0]).toEqual([
+      'parse.bar',
+      undefined,
+      { foo: undefined, boo: 'abc' }
+    ])
+
+    TestUtils.Simulate.change(input, { target: { value: 'x' } })
+
+    expect(render).toHaveBeenCalledTimes(3)
+    expect(render.mock.calls[2][0].values.foo).toBe('normalize.parse.x')
+
+    expect(parse).toHaveBeenCalledTimes(2)
+    expect(parse.mock.calls[1]).toEqual(['x', 'foo'])
+
+    expect(normalize).toHaveBeenCalledTimes(2)
+    expect(normalize.mock.calls[1]).toEqual([
+      'parse.x',
+      'normalize.parse.bar',
+      { foo: 'normalize.parse.bar', boo: 'abc' }
+    ])
+  })
+
+  it('should accept a null parse prop to preserve empty strings', () => {
+    const renderInput = jest.fn(({ input }) => <input {...input} />)
+    const render = jest.fn(() => (
+      <form>
+        <Field name="foo" render={renderInput} parse={null} />
+      </form>
+    ))
+
+    const dom = TestUtils.renderIntoDocument(
+      <Form onSubmit={onSubmitMock} render={render} />
+    )
+
+    expect(render).toHaveBeenCalled()
+    expect(render).toHaveBeenCalledTimes(1)
+    expect(render.mock.calls[0][0].values.foo).toBeUndefined()
+
+    const input = TestUtils.findRenderedDOMComponentWithTag(dom, 'input')
+
+    TestUtils.Simulate.change(input, { target: { value: '' } })
+
+    expect(render).toHaveBeenCalledTimes(2)
+    expect(render.mock.calls[1][0].values.foo).toBe('')
+
+    TestUtils.Simulate.change(input, { target: { value: 'abc' } })
+
+    expect(render).toHaveBeenCalledTimes(3)
+    expect(render.mock.calls[2][0].values.foo).toBe('abc')
+  })
+
+  it('should accept a format function prop', () => {
+    const format = jest.fn((value, name) => `format.${value}`)
+    const renderInput = jest.fn(({ input }) => <input {...input} />)
+    const render = jest.fn(() => (
+      <form>
+        <Field name="foo" render={renderInput} format={format} />
+      </form>
+    ))
+
+    TestUtils.renderIntoDocument(
+      <Form onSubmit={onSubmitMock} render={render} />
+    )
+
+    expect(render).toHaveBeenCalled()
+    expect(render).toHaveBeenCalledTimes(1)
+    expect(render.mock.calls[0][0].values.foo).toBeUndefined()
+
+    expect(format).toHaveBeenCalled()
+    expect(format).toHaveBeenCalledTimes(1)
+    expect(format.mock.calls[0]).toEqual([undefined, 'foo'])
+
+    expect(renderInput).toHaveBeenCalled()
+    expect(renderInput).toHaveBeenCalledTimes(1)
+    expect(renderInput.mock.calls[0][0].input.value).toBe('format.undefined')
+
+    renderInput.mock.calls[0][0].input.onChange('bar')
+
+    expect(format).toHaveBeenCalledTimes(2)
+    expect(format.mock.calls[1]).toEqual(['bar', 'foo'])
+
+    expect(renderInput).toHaveBeenCalledTimes(2)
+    expect(renderInput.mock.calls[1][0].input.value).toBe('format.bar')
+  })
+
+  it('should accept a null format prop to preserve undefined values', () => {
+    const renderInput = jest.fn(({ input }) => (
+      <input {...input} value={input.value || ''} />
+    ))
+    const render = jest.fn(() => (
+      <form>
+        <Field name="foo" render={renderInput} format={null} />
+      </form>
+    ))
+
+    TestUtils.renderIntoDocument(
+      <Form onSubmit={onSubmitMock} render={render} />
+    )
+
+    expect(render).toHaveBeenCalled()
+    expect(render).toHaveBeenCalledTimes(1)
+    expect(render.mock.calls[0][0].values.foo).toBeUndefined()
+
+    expect(renderInput).toHaveBeenCalled()
+    expect(renderInput).toHaveBeenCalledTimes(1)
+    expect(renderInput.mock.calls[0][0].input.value).toBeUndefined()
+
+    renderInput.mock.calls[0][0].input.onChange('bar')
+
+    expect(renderInput).toHaveBeenCalledTimes(2)
+    expect(renderInput.mock.calls[1][0].input.value).toBe('bar')
+  })
+
   it('should provide a value of [] when empty on a select multiple', () => {
     const dom = TestUtils.renderIntoDocument(
       <Form onSubmit={onSubmitMock}>
@@ -210,7 +369,36 @@ describe('Field', () => {
     expect(select.value).toBe('')
   })
 
-  it('should optionally allow null', () => {
+  it("should convert null values to ''", () => {
+    const renderInput = jest.fn(({ input }) => (
+      <input {...input} value={input.value} />
+    ))
+    const render = jest.fn(() => (
+      <form>
+        <Field name="foo" render={renderInput} />
+      </form>
+    ))
+
+    TestUtils.renderIntoDocument(
+      <Form onSubmit={onSubmitMock} render={render} />
+    )
+
+    expect(renderInput).toHaveBeenCalled()
+    expect(renderInput).toHaveBeenCalledTimes(1)
+    expect(renderInput.mock.calls[0][0].input.value).toBe('')
+
+    renderInput.mock.calls[0][0].input.onChange('bar')
+
+    expect(renderInput).toHaveBeenCalledTimes(2)
+    expect(renderInput.mock.calls[1][0].input.value).toBe('bar')
+
+    renderInput.mock.calls[1][0].input.onChange(null)
+
+    expect(renderInput).toHaveBeenCalledTimes(3)
+    expect(renderInput.mock.calls[2][0].input.value).toBe('')
+  })
+
+  it('should optionally allow null values', () => {
     const renderInput = jest.fn(({ input }) => (
       <input
         {...input}

src/ReactFinalForm.test.js

@@ -175,10 +175,11 @@ describe('ReactFinalForm', () => {
 
     const form = TestUtils.findRenderedDOMComponentWithTag(dom, 'form')
     TestUtils.Simulate.submit(form)
+    const formComponent = TestUtils.findRenderedComponentWithType(dom, Form)
 
     expect(onSubmit).toHaveBeenCalled()
     expect(onSubmit).toHaveBeenCalledTimes(1)
-    expect(onSubmit).toHaveBeenCalledWith({ foo: 'bar' })
+    expect(onSubmit).toHaveBeenCalledWith({ foo: 'bar' }, formComponent.form)
   })
 
   it('should reinitialize when initialValues prop changes', () => {

src/index.d.ts

@@ -62,7 +62,10 @@ export type FormProps = {
 
 export type FieldProps = {
   allowNull?: boolean
+  format: (value: any, name: string) => any | null
+  parse: (value: any, name: string) => any | null
   name: string
+  normalize: (value: any, previousValue: any, allValues: object) => any
   subscription?: FieldSubscription
   validate?: (value: any, allValues: object) => any
   value?: any

src/types.js.flow

@@ -63,8 +63,11 @@ export type FormProps = {
 
 export type FieldProps = {
   allowNull?: boolean,
+  format: (value: ?any, name: string) => ?any | null,
+  parse: (value: ?any, name: string) => ?any | null,
   isEqual?: (a: any, b: any) => boolean,
   name: string,
+  normalize: (value: ?any, previousValue: ?any, allValues: Object) => ?any,
   subscription?: FieldSubscription,
   validate?: (value: ?any, allValues: Object) => ?any,
   validateFields?: string[],