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

Replace InputFieldOld with TextInputField

Browse source
This commit is contained in:
Kimmo Puputti 2017-06-20 16:03:35 +03:00
parent 3ece68c707
commit 72e40365ea
13 changed files with 99 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,9 +8,10 @@
.description {
flex-grow: 1;
margin-top: 24px;
}
.submitButton {
margin-top: 1rem;
margin-bottom: 1rem;
margin-top: 24px;
margin-bottom: 24px;
}

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

@ -1,10 +1,10 @@
import React, { PropTypes } from 'react';
import { compose } from 'redux';
import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
import { reduxForm, propTypes as formPropTypes } from 'redux-form';
import { intlShape, injectIntl } from 'react-intl';
import classNames from 'classnames';
import { maxLength, required } from '../../util/validators';
import { Button, InputFieldOld } from '../../components';
import { Button, TextInputField } from '../../components';
import css from './EditListingDescriptionForm.css';
@ -16,6 +16,7 @@ const EditListingDescriptionFormComponent = props => {
disabled,
handleSubmit,
intl,
form,
invalid,
saveActionMsg,
submitting,
@ -47,23 +48,23 @@ const EditListingDescriptionFormComponent = props => {
const classes = classNames(css.root, className);
return (
<form className={classes} onSubmit={handleSubmit}>
<Field
autoFocus
<TextInputField
type="text"
name="title"
id={`${form}.title`}
label={titleMessage}
placeholder={titlePlaceholderMessage}
component={InputFieldOld}
type="text"
validate={[required(titleRequiredMessage), maxLength60Message]}
autoFocus
/>
<Field
name="description"
label={descriptionMessage}
placeholder={descriptionPlaceholderMessage}
<TextInputField
className={css.description}
type="textarea"
component={InputFieldOld}
name="description"
id={`${form}.description`}
label={descriptionMessage}
placeholder={descriptionPlaceholderMessage}
validate={[required(descriptionRequiredMessage)]}
/>

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

@ -5,12 +5,13 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
<div
className="">
<label
htmlFor="title">
htmlFor="fakeTestForm.title">
Name of your sauna
</label>
<input
autoFocus={true}
className=""
id="fakeTestForm.title"
name="title"
onBlur={[Function]}
onChange={[Function]}
@ -24,12 +25,12 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
<div
className="">
<label
htmlFor="description">
htmlFor="fakeTestForm.description">
Describe your sauna
</label>
<textarea
autoFocus={false}
className=""
id="fakeTestForm.description"
name="description"
onBlur={[Function]}
onChange={[Function]}

5
src/containers/EditListingLocationForm/EditListingLocationForm.css
View file

@ -8,9 +8,10 @@
.building {
flex-grow: 1;
margin-top: 24px;
}
.submitButton {
margin-top: 1rem;
margin-bottom: 1rem;
margin-top: 24px;
margin-bottom: 24px;
}

11
src/containers/EditListingLocationForm/EditListingLocationForm.js
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, InputFieldOld } from '../../components';
import { LocationAutocompleteInput, Button, TextInputField } from '../../components';
import css from './EditListingLocationForm.css';
@ -27,6 +27,7 @@ export class EditListingLocationFormComponent extends Component {
disabled,
handleSubmit,
intl,
form,
invalid,
saveActionMsg,
submitting,
@ -61,13 +62,13 @@ export class EditListingLocationFormComponent extends Component {
]}
/>
<Field
<TextInputField
className={css.building}
type="text"
name="building"
id={`${form}.building`}
label={buildingMessage}
placeholder={buildingPlaceholderMessage}
component={InputFieldOld}
type="text"
/>
<Button
@ -83,7 +84,7 @@ export class EditListingLocationFormComponent extends Component {
}
EditListingLocationFormComponent.defaultProps = {
saveActionMsg: 'Next: pricing',
saveActionMsg: 'Next: pricing', // TODO: i18n
selectedPlace: null,
};

4
src/containers/EditListingLocationForm/__snapshots__/EditListingLocationForm.test.js.snap
View file

@ -14,8 +14,8 @@ exports[`EditListingLocationForm matches snapshot 1`] = `
[Function],
]
} />
<Field
component={[Function]}
<TextInputField
id="fakeTestForm.building"
label="EditListingLocationForm.building"
name="building"
placeholder="EditListingLocationForm.buildingPlaceholder"

4
src/containers/LoginForm/LoginForm.css
View file

@ -6,6 +6,10 @@
height: 100%;
}
.password {
margin-top: 24px;
}
.button {
align-self: stretch;
margin-bottom: 20px;

19
src/containers/LoginForm/LoginForm.js
View file

@ -1,14 +1,14 @@
import React, { PropTypes } from 'react';
import { compose } from 'redux';
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
import { InputFieldOld, Button } from '../../components';
import { reduxForm, propTypes as formPropTypes } from 'redux-form';
import { Button, TextInputField } from '../../components';
import * as validators from '../../util/validators';
import css from './LoginForm.css';
const LoginFormComponent = props => {
const { handleSubmit, pristine, submitting, inProgress, intl } = props;
const { form, handleSubmit, pristine, submitting, inProgress, intl } = props;
// email
const emailLabel = intl.formatMessage({
@ -32,18 +32,19 @@ const LoginFormComponent = props => {
return (
<form className={css.form} onSubmit={handleSubmit}>
<div>
<Field
name="email"
<TextInputField
type="email"
name="email"
id={`${form}.email`}
label={emailLabel}
component={InputFieldOld}
validate={emailRequired}
/>
<Field
name="password"
<TextInputField
className={css.password}
type="password"
name="password"
id={`${form}.password`}
label={passwordLabel}
component={InputFieldOld}
validate={passwordRequired}
/>
</div>

10
src/containers/LoginForm/__snapshots__/LoginForm.test.js.snap
View file

@ -6,38 +6,36 @@ exports[`LoginForm matches snapshot 1`] = `
<div
className="">
<label
htmlFor="email">
htmlFor="LoginForm.email">
Email
</label>
<input
autoFocus={false}
className=""
id="LoginForm.email"
name="email"
onBlur={[Function]}
onChange={[Function]}
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
placeholder={null}
type="email"
value="" />
</div>
<div
className="">
<label
htmlFor="password">
htmlFor="LoginForm.password">
Password
</label>
<input
autoFocus={false}
className=""
id="LoginForm.password"
name="password"
onBlur={[Function]}
onChange={[Function]}
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
placeholder={null}
type="password"
value="" />
</div>

37
src/containers/PayoutDetailsForm/PayoutDetailsForm.js
View file

@ -10,7 +10,7 @@ import {
StripeBankAccountToken,
Select,
BirthdayInputField,
InputFieldOld,
TextInputField,
} from '../../components';
import * as validators from '../../util/validators';
import { enhancedField } from '../../util/forms';
@ -121,30 +121,33 @@ class PayoutDetailsFormComponent extends Component {
const showAddressFields = country && requiresAddress(country);
const addressSection = showAddressFields
? <div>
<Field
name="streetAddress"
<TextInputField
className={css.field}
type="text"
name="streetAddress"
id={`${form}.streetAddress`}
label={streetAddressLabel}
placeholder={streetAddressPlaceholder}
component={InputFieldOld}
validate={streetAddressRequired}
clearOnUnmount
/>
<Field
name="postalCode"
<TextInputField
className={css.field}
type="text"
name="postalCode"
id={`${form}.postalCode`}
label={postalCodeLabel}
placeholder={postalCodePlaceholder}
component={InputFieldOld}
validate={postalCodeRequired}
clearOnUnmount
/>
<Field
name="city"
<TextInputField
className={css.field}
type="text"
name="city"
id={`${form}.city`}
label={cityLabel}
placeholder={cityPlaceholder}
component={InputFieldOld}
validate={cityRequired}
clearOnUnmount
/>
@ -186,18 +189,20 @@ class PayoutDetailsFormComponent extends Component {
<h2 className={css.subTitle}>
<FormattedMessage id="PayoutDetailsForm.personalDetailsTitle" />
</h2>
<Field
name="firstName"
<TextInputField
className={css.field}
type="text"
name="firstName"
id={`${form}.firstName`}
label={firstNameLabel}
component={InputFieldOld}
validate={firstNameRequired}
/>
<Field
name="lastName"
<TextInputField
className={css.field}
type="text"
name="lastName"
id={`${form}.lastName`}
label={lastNameLabel}
component={InputFieldOld}
validate={lastNameRequired}
/>
<BirthdayInputField

7
src/containers/SignupForm/SignupForm.css
View file

@ -9,6 +9,7 @@
.name {
display: flex;
justify-content: space-between;
margin-top: 24px;
}
.firstNameRoot,
@ -16,7 +17,11 @@
width: calc(50% - 0.5rem);
}
.password {
margin-top: 24px;
}
.button {
align-self: stretch;
margin-bottom: 20px;
margin-bottom: 24px;
}

31
src/containers/SignupForm/SignupForm.js
View file

@ -1,14 +1,14 @@
import React, { PropTypes } from 'react';
import { compose } from 'redux';
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
import { InputFieldOld, Button } from '../../components';
import { reduxForm, propTypes as formPropTypes } from 'redux-form';
import { Button, TextInputField } from '../../components';
import * as validators from '../../util/validators';
import css from './SignupForm.css';
const SignupFormComponent = props => {
const { handleSubmit, pristine, submitting, inProgress, intl } = props;
const { form, handleSubmit, pristine, submitting, inProgress, intl } = props;
// email
const emailLabel = intl.formatMessage({
@ -50,37 +50,38 @@ const SignupFormComponent = props => {
return (
<form className={css.root} onSubmit={handleSubmit}>
<div>
<Field
name="email"
<TextInputField
type="email"
name="email"
id={`${form}.email`}
label={emailLabel}
validate={emailRequired}
component={InputFieldOld}
/>
<div className={css.name}>
<Field
<TextInputField
className={css.firstNameRoot}
name="firstName"
type="text"
name="firstName"
id={`${form}.firstName`}
label={firstNameLabel}
validate={firstNameRequired}
component={InputFieldOld}
/>
<Field
<TextInputField
className={css.lastNameRoot}
name="lastName"
type="text"
name="lastName"
id={`${form}.lastName`}
label={lastNameLabel}
validate={lastNameRequired}
component={InputFieldOld}
/>
</div>
<Field
name="password"
<TextInputField
className={css.password}
type="password"
name="password"
id={`${form}.password`}
label={passwordLabel}
validate={passwordRequired}
component={InputFieldOld}
/>
</div>
<div>

20
src/containers/SignupForm/__snapshots__/SignupForm.test.js.snap
View file

@ -6,19 +6,18 @@ exports[`SignupForm matches snapshot 1`] = `
<div
className="">
<label
htmlFor="email">
htmlFor="SignupForm.email">
Email
</label>
<input
autoFocus={false}
className=""
id="SignupForm.email"
name="email"
onBlur={[Function]}
onChange={[Function]}
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
placeholder={null}
type="email"
value="" />
</div>
@ -27,38 +26,36 @@ exports[`SignupForm matches snapshot 1`] = `
<div
className="">
<label
htmlFor="firstName">
htmlFor="SignupForm.firstName">
First name
</label>
<input
autoFocus={false}
className=""
id="SignupForm.firstName"
name="firstName"
onBlur={[Function]}
onChange={[Function]}
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
placeholder={null}
type="text"
value="" />
</div>
<div
className="">
<label
htmlFor="lastName">
htmlFor="SignupForm.lastName">
Last name
</label>
<input
autoFocus={false}
className=""
id="SignupForm.lastName"
name="lastName"
onBlur={[Function]}
onChange={[Function]}
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
placeholder={null}
type="text"
value="" />
</div>
@ -66,19 +63,18 @@ exports[`SignupForm matches snapshot 1`] = `
<div
className="">
<label
htmlFor="password">
htmlFor="SignupForm.password">
Password
</label>
<input
autoFocus={false}
className=""
id="SignupForm.password"
name="password"
onBlur={[Function]}
onChange={[Function]}
onDragStart={[Function]}
onDrop={[Function]}
onFocus={[Function]}
placeholder={null}
type="password"
value="" />
</div>