diff --git a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css index b5e4ea59..4eb62fcd 100644 --- a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css +++ b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css @@ -10,18 +10,6 @@ flex-grow: 1; } -.descriptionField { - /* Font */ - font-family: inherit; - - /* Border */ - border-radius: 0px; /* Remove default iOS border radius */ - - /* Dimensions */ - padding: 12px 18px; - min-height: 120px; -} - .submitButton { margin-top: 1rem; margin-bottom: 1rem; diff --git a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js index ba15ffb5..aa176a68 100644 --- a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js +++ b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js @@ -1,9 +1,8 @@ -import React, { Component, PropTypes } from 'react'; +import React, { PropTypes } from 'react'; import { compose } from 'redux'; import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form'; import { intlShape, injectIntl } from 'react-intl'; import classNames from 'classnames'; -import { enhancedField } from '../../util/forms'; import { maxLength, required } from '../../util/validators'; import { Button, InputField } from '../../components'; @@ -11,83 +10,73 @@ import css from './EditListingDescriptionForm.css'; const TITLE_MAX_LENGTH = 60; -export class EditListingDescriptionFormComponent extends Component { - constructor(props) { - super(props); +const EditListingDescriptionFormComponent = props => { + const { + className, + disabled, + handleSubmit, + intl, + invalid, + saveActionMsg, + submitting, + } = props; - // 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.EnhancedTextArea = enhancedField('textarea', { rootClassName: css.description }); - } + const titleMessage = intl.formatMessage({ id: 'EditListingDescriptionForm.title' }); + const titlePlaceholderMessage = intl.formatMessage({ + id: 'EditListingDescriptionForm.titlePlaceholder', + }); + const titleRequiredMessage = intl.formatMessage({ + id: 'EditListingDescriptionForm.titleRequired', + }); + const maxLengthMessage = intl.formatMessage( + { id: 'EditListingDescriptionForm.maxLength' }, + { + maxLength: TITLE_MAX_LENGTH, + } + ); - render() { - const { - className, - disabled, - handleSubmit, - intl, - invalid, - saveActionMsg, - submitting, - } = this.props; + const descriptionMessage = intl.formatMessage({ id: 'EditListingDescriptionForm.description' }); + const descriptionPlaceholderMessage = intl.formatMessage({ + id: 'EditListingDescriptionForm.descriptionPlaceholder', + }); + const maxLength60Message = maxLength(maxLengthMessage, TITLE_MAX_LENGTH); + const descriptionRequiredMessage = intl.formatMessage({ + id: 'EditListingDescriptionForm.descriptionRequired', + }); - const titleMessage = intl.formatMessage({ id: 'EditListingDescriptionForm.title' }); - const titlePlaceholderMessage = intl.formatMessage({ - id: 'EditListingDescriptionForm.titlePlaceholder', - }); - const titleRequiredMessage = intl.formatMessage({ - id: 'EditListingDescriptionForm.titleRequired', - }); - const maxLengthMessage = intl.formatMessage( - { id: 'EditListingDescriptionForm.maxLength' }, - { - maxLength: TITLE_MAX_LENGTH, - } - ); + const classes = classNames(css.root, className); + return ( +
- ); - } -} + + + ); +}; EditListingDescriptionFormComponent.defaultProps = { className: null, diff --git a/src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap b/src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap index 23d9be4e..0189a607 100644 --- a/src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap +++ b/src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap @@ -25,12 +25,13 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `