maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-28 20:53:24 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use InputField in description textarea

Browse source
This commit is contained in:
Kimmo Puputti 2017-06-06 16:24:24 +03:00
parent 39618f4561
commit 501f9c2a92
3 changed files with 66 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css
View file

@ -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;

137
src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js
View file

@ -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 (
<form className={classes} onSubmit={handleSubmit}>
<Field
autoFocus
name="title"
label={titleMessage}
placeholder={titlePlaceholderMessage}
component={InputField}
type="text"
validate={[required(titleRequiredMessage), maxLength60Message]}
/>
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',
});
<Field
name="description"
label={descriptionMessage}
placeholder={descriptionPlaceholderMessage}
className={css.description}
type="textarea"
component={InputField}
validate={[required(descriptionRequiredMessage)]}
/>
const classes = classNames(css.root, className);
return (
<form className={classes} onSubmit={handleSubmit}>
<Field
autoFocus
name="title"
label={titleMessage}
placeholder={titlePlaceholderMessage}
component={InputField}
type="text"
validate={[required(titleRequiredMessage), maxLength60Message]}
/>
<Field
name="description"
label={descriptionMessage}
placeholder={descriptionPlaceholderMessage}
className={css.descriptionField}
component={this.EnhancedTextArea}
validate={[required(descriptionRequiredMessage)]}
/>
<Button
className={css.submitButton}
type="submit"
disabled={invalid || submitting || disabled}
>
{saveActionMsg}
</Button>
</form>
);
}
}
<Button
className={css.submitButton}
type="submit"
disabled={invalid || submitting || disabled}
>
{saveActionMsg}
</Button>
</form>
);
};
EditListingDescriptionFormComponent.defaultProps = {
className: null,

5
src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap
View file

@ -25,12 +25,13 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
<div
className="">
<label
className=""
className={undefined}
htmlFor="description">
Describe your sauna
</label>
<textarea
className={undefined}
autoFocus={false}
className=""
name="description"
onBlur={[Function]}
onChange={[Function]}