Use InputField component instead of enhancedInput HOC

This commit is contained in:
Kimmo Puputti 2017-06-06 11:23:03 +03:00
parent b144cfe94f
commit 1b7e3118aa
6 changed files with 24 additions and 14 deletions

View file

@ -5,7 +5,7 @@ import { intlShape, injectIntl } from 'react-intl';
import classNames from 'classnames';
import { enhancedField } from '../../util/forms';
import { maxLength, required } from '../../util/validators';
import { Button } from '../../components';
import { Button, InputField } from '../../components';
import css from './EditListingDescriptionForm.css';
@ -18,7 +18,6 @@ export class EditListingDescriptionFormComponent extends Component {
// We must create the enhanced components outside the render function
// to avoid losing focus.
// See: https://github.com/erikras/redux-form/releases/tag/v6.0.0-alpha.14
this.EnhancedInput = enhancedField('input');
this.EnhancedTextArea = enhancedField('textarea', { rootClassName: css.description });
}
@ -64,7 +63,7 @@ export class EditListingDescriptionFormComponent extends Component {
name="title"
label={titleMessage}
placeholder={titlePlaceholderMessage}
component={this.EnhancedInput}
component={InputField}
type="text"
validate={[required(titleRequiredMessage), maxLength60Message]}
/>

View file

@ -5,7 +5,7 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
<div
className="">
<label
className=""
className={undefined}
htmlFor="title">
Name of your sauna
</label>

View file

@ -7,7 +7,7 @@ import classNames from 'classnames';
import * as propTypes from '../../util/propTypes';
import { enhancedField } from '../../util/forms';
import { autocompleteSearchRequired, autocompletePlaceSelected } from '../../util/validators';
import { LocationAutocompleteInput, Button } from '../../components';
import { LocationAutocompleteInput, Button, InputField } from '../../components';
import css from './EditListingLocationForm.css';
@ -19,7 +19,6 @@ export class EditListingLocationFormComponent extends Component {
// to avoid losing focus.
// See: https://github.com/erikras/redux-form/releases/tag/v6.0.0-alpha.14
this.EnhancedLocationAutocompleteInput = enhancedField(LocationAutocompleteInput);
this.EnhancedInput = enhancedField('input', { rootClassName: css.building });
}
render() {
@ -63,10 +62,11 @@ export class EditListingLocationFormComponent extends Component {
/>
<Field
className={css.building}
name="building"
label={buildingMessage}
placeholder={buildingPlaceholderMessage}
component={this.EnhancedInput}
component={InputField}
type="text"
/>

View file

@ -11,6 +11,7 @@ exports[`LoginForm matches snapshot 1`] = `
Email
</label>
<input
autoFocus={false}
className=""
name="email"
onBlur={[Function]}
@ -30,6 +31,7 @@ exports[`LoginForm matches snapshot 1`] = `
Password
</label>
<input
autoFocus={false}
className=""
name="password"
onBlur={[Function]}

View file

@ -5,7 +5,13 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
import { Field, reduxForm, formValueSelector, propTypes as formPropTypes } from 'redux-form';
import classNames from 'classnames';
import config from '../../config';
import { Button, StripeBankAccountToken, Select, BirthdayInput } from '../../components';
import {
Button,
StripeBankAccountToken,
Select,
BirthdayInput,
InputField,
} from '../../components';
import * as validators from '../../util/validators';
import { enhancedField } from '../../util/forms';
@ -40,7 +46,6 @@ CountriesSelect.propTypes = {
class PayoutDetailsFormComponent extends Component {
constructor(props) {
super(props);
this.EnhancedInput = enhancedField('input');
this.EnhancedCountriesDropdown = enhancedField(CountriesSelect);
this.EnhancedBirthdayInput = enhancedField(BirthdayInput);
}
@ -120,7 +125,7 @@ class PayoutDetailsFormComponent extends Component {
type="text"
label={streetAddressLabel}
placeholder={streetAddressPlaceholder}
component={this.EnhancedInput}
component={InputField}
validate={streetAddressRequired}
clearOnUnmount
/>
@ -129,7 +134,7 @@ class PayoutDetailsFormComponent extends Component {
type="text"
label={postalCodeLabel}
placeholder={postalCodePlaceholder}
component={this.EnhancedInput}
component={InputField}
validate={postalCodeRequired}
clearOnUnmount
/>
@ -138,7 +143,7 @@ class PayoutDetailsFormComponent extends Component {
type="text"
label={cityLabel}
placeholder={cityPlaceholder}
component={this.EnhancedInput}
component={InputField}
validate={cityRequired}
clearOnUnmount
/>
@ -184,14 +189,14 @@ class PayoutDetailsFormComponent extends Component {
name="firstName"
type="text"
label={firstNameLabel}
component={this.EnhancedInput}
component={InputField}
validate={firstNameRequired}
/>
<Field
name="lastName"
type="text"
label={lastNameLabel}
component={this.EnhancedInput}
component={InputField}
validate={lastNameRequired}
/>
<Field

View file

@ -11,6 +11,7 @@ exports[`SignupForm matches snapshot 1`] = `
Email
</label>
<input
autoFocus={false}
className=""
name="email"
onBlur={[Function]}
@ -32,6 +33,7 @@ exports[`SignupForm matches snapshot 1`] = `
First name
</label>
<input
autoFocus={false}
className=""
name="firstName"
onBlur={[Function]}
@ -51,6 +53,7 @@ exports[`SignupForm matches snapshot 1`] = `
Last name
</label>
<input
autoFocus={false}
className=""
name="lastName"
onBlur={[Function]}
@ -71,6 +74,7 @@ exports[`SignupForm matches snapshot 1`] = `
Password
</label>
<input
autoFocus={false}
className=""
name="password"
onBlur={[Function]}