diff --git a/src/components/FieldBoolean/FieldBoolean.example.js b/src/components/FieldBoolean/FieldBoolean.example.js index fd7ccc91..818161b8 100644 --- a/src/components/FieldBoolean/FieldBoolean.example.js +++ b/src/components/FieldBoolean/FieldBoolean.example.js @@ -1,42 +1,50 @@ import React from 'react'; -import { reduxForm, propTypes as formPropTypes } from 'redux-form'; +import { Form as FinalForm, FormSpy } from 'react-final-form'; import * as validators from '../../util/validators'; import { Button } from '../../components'; import FieldBoolean from './FieldBoolean'; const formName = 'Styleguide.FieldBoolean.Form'; -const FormComponent = props => { - const { form, handleSubmit, invalid, pristine, submitting } = props; - const required = validators.requiredBoolean('This field is required'); - const submitDisabled = invalid || pristine || submitting; - return ( -
- - - - ); -}; - -FormComponent.propTypes = formPropTypes; - -const Form = reduxForm({ - form: formName, -})(FormComponent); +const FormComponent = props => ( + { + const { form, handleSubmit, onChange, invalid, pristine, submitting } = props; + const required = validators.requiredBoolean('This field is required'); + const submitDisabled = invalid || pristine || submitting; + return ( +
{ + e.preventDefault(); + handleSubmit(e); + }} + > + + + + + ); + }} + /> +); export const YesNo = { - component: Form, + component: FormComponent, props: { - onChange(values) { - console.log('onChange:', values); + onChange: formState => { + if (Object.keys(formState.values).length > 0) { + console.log('form values changed to:', formState.values); + } }, onSubmit(values) { console.log('onSubmit:', values); diff --git a/src/components/FieldBoolean/FieldBoolean.js b/src/components/FieldBoolean/FieldBoolean.js index 63340ac5..3f19edcc 100644 --- a/src/components/FieldBoolean/FieldBoolean.js +++ b/src/components/FieldBoolean/FieldBoolean.js @@ -1,6 +1,6 @@ import React from 'react'; import { injectIntl, intlShape } from 'react-intl'; -import { SelectField } from '../../components'; +import { FieldSelect } from '../../components'; const FieldBoolean = props => { const { placeholder, intl, ...rest } = props; @@ -30,11 +30,11 @@ const FieldBoolean = props => { }, }; return ( - + - + ); };