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

EditListingWizard tabs: fix submit button states

Browse source
This commit is contained in:
Vesa Luusua 2018-04-19 20:26:46 +03:00
parent 085c208ab0
commit 8a54085912
7 changed files with 39 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -24,6 +24,7 @@ const EditListingDescriptionFormComponent = props => (
handleSubmit,
intl,
invalid,
pristine,
saveActionMsg,
updated,
updateError,
@ -62,7 +63,7 @@ const EditListingDescriptionFormComponent = props => (
) : null;
const classes = classNames(css.root, className);
const submitReady = updated;
const submitReady = updated && pristine;
const submitInProgress = updateInProgress;
const submitDisabled = invalid || disabled || submitInProgress;

6
src/containers/EditListingFeaturesForm/EditListingFeaturesForm.js
View file

@ -17,12 +17,12 @@ const EditListingFeaturesFormComponent = props => (
mutators={{ ...arrayMutators }}
render={fieldRenderProps => {
const {
form,
disabled,
rootClassName,
className,
name,
handleSubmit,
pristine,
saveActionMsg,
updated,
updateError,
@ -30,7 +30,7 @@ const EditListingFeaturesFormComponent = props => (
} = fieldRenderProps;
const classes = classNames(rootClassName || css.root, className);
const submitReady = updated;
const submitReady = updated && pristine;
const submitInProgress = updateInProgress;
const submitDisabled = disabled || submitInProgress;
@ -46,7 +46,7 @@ const EditListingFeaturesFormComponent = props => (
<FieldCheckboxGroup
className={css.features}
id={`${form}.${name}`}
id={name}
name={name}
options={config.custom.amenities}
/>

6
src/containers/EditListingLocationForm/EditListingLocationForm.js
View file

@ -21,10 +21,10 @@ export const EditListingLocationFormComponent = props => (
const {
className,
disabled,
form,
handleSubmit,
intl,
invalid,
pristine,
saveActionMsg,
updated,
updateError,
@ -55,7 +55,7 @@ export const EditListingLocationFormComponent = props => (
) : null;
const classes = classNames(css.root, className);
const submitReady = updated;
const submitReady = updated && pristine;
const submitInProgress = updateInProgress;
const submitDisabled = invalid || disabled || submitInProgress;
@ -84,7 +84,7 @@ export const EditListingLocationFormComponent = props => (
className={css.building}
type="text"
name="building"
id={`${form}.building`}
id="building"
label={buildingMessage}
placeholder={buildingPlaceholderMessage}
/>

33
src/containers/EditListingPhotosForm/EditListingPhotosForm.js
View file

@ -1,9 +1,10 @@
import React, { Component } from 'react';
import { bool, func, object, shape, string } from 'prop-types';
import { array, bool, func, object, shape, string } from 'prop-types';
import { compose } from 'redux';
import { Form as FinalForm, Field } from 'react-final-form';
import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
import { arrayMove } from 'react-sortable-hoc';
import { isEqual } from 'lodash';
import classNames from 'classnames';
import { propTypes } from '../../util/types';
import { nonEmptyArray, composeValidators } from '../../util/validators';
@ -20,6 +21,7 @@ export class EditListingPhotosFormComponent extends Component {
this.state = { imageUploadRequested: false };
this.onImageUploadHandler = this.onImageUploadHandler.bind(this);
this.onSortEnd = this.onSortEnd.bind(this);
this.submittedImages = [];
}
onImageUploadHandler(file) {
@ -50,8 +52,7 @@ export class EditListingPhotosFormComponent extends Component {
initialValues={{ images: this.props.images }}
render={fieldRenderProps => {
const {
blur,
change,
form,
className,
disabled,
errors,
@ -117,7 +118,16 @@ export class EditListingPhotosFormComponent extends Component {
</p>
) : null;
const submitReady = updated || ready;
const submittedOnce = this.submittedImages.length > 0;
// imgs can contain added images (with temp ids) and submitted images with uniq ids.
const arrayOfImgIds = imgs =>
imgs.map(i => (typeof i.id === 'string' ? i.imageId : i.id));
const imageIdsFromProps = arrayOfImgIds(images);
const imageIdsFromPreviousSubmit = arrayOfImgIds(this.submittedImages);
const imageArrayHasSameImages = isEqual(imageIdsFromProps, imageIdsFromPreviousSubmit);
const pristineSinceLastSubmit = submittedOnce && imageArrayHasSameImages;
const submitReady = (updated && pristineSinceLastSubmit) || ready;
const submitInProgress = updateInProgress;
const submitDisabled =
invalid || disabled || submitInProgress || imageUploadRequested || ready;
@ -125,7 +135,13 @@ export class EditListingPhotosFormComponent extends Component {
const classes = classNames(css.root, className);
return (
<Form onSubmit={handleSubmit} className={classes}>
<Form
className={classes}
onSubmit={e => {
this.submittedImages = images;
handleSubmit(e);
}}
>
{updateError ? (
<p className={css.error}>
<FormattedMessage id="EditListingPhotosForm.updateFailed" />
@ -155,8 +171,8 @@ export class EditListingPhotosFormComponent extends Component {
const { name } = input;
const onChange = e => {
const file = e.target.files[0];
change(`addImage`, file);
blur(`addImage`);
form.change(`addImage`, file);
form.blur(`addImage`);
onImageUploadHandler(file);
};
const inputProps = { accept, id: name, name, onChange, type };
@ -215,7 +231,7 @@ export class EditListingPhotosFormComponent extends Component {
}
}
EditListingPhotosFormComponent.defaultProps = { errors: {}, updateError: null };
EditListingPhotosFormComponent.defaultProps = { errors: {}, updateError: null, images: [] };
EditListingPhotosFormComponent.propTypes = {
errors: shape({
@ -223,6 +239,7 @@ EditListingPhotosFormComponent.propTypes = {
showListingsError: object,
uploadImageError: object,
}),
images: array,
intl: intlShape.isRequired,
onImageUpload: func.isRequired,
onUpdateImageOrder: func.isRequired,

3
src/containers/EditListingPhotosForm/__snapshots__/EditListingPhotosForm.test.js.snap
View file

@ -5,9 +5,10 @@ exports[`EditListingPhotosForm matches snapshot 1`] = `
dispatch={[Function]}
errors={Object {}}
imageUploadRequested={false}
images={Array []}
initialValues={
Object {
"images": undefined,
"images": Array [],
}
}
intl={

3
src/containers/EditListingPoliciesForm/EditListingPoliciesForm.js
View file

@ -19,6 +19,7 @@ export const EditListingPoliciesFormComponent = props => (
handleSubmit,
intl,
invalid,
pristine,
saveActionMsg,
updated,
updateError,
@ -39,7 +40,7 @@ export const EditListingPoliciesFormComponent = props => (
) : null;
const classes = classNames(css.root, className);
const submitReady = updated;
const submitReady = updated && pristine;
const submitInProgress = updateInProgress;
const submitDisabled = invalid || disabled || submitInProgress;

3
src/containers/EditListingPricingForm/EditListingPricingForm.js
View file

@ -25,6 +25,7 @@ export const EditListingPricingFormComponent = props => (
handleSubmit,
intl,
invalid,
pristine,
saveActionMsg,
updated,
updateError,
@ -60,7 +61,7 @@ export const EditListingPricingFormComponent = props => (
: priceRequired;
const classes = classNames(css.root, className);
const submitReady = updated;
const submitReady = updated && pristine;
const submitInProgress = updateInProgress;
const submitDisabled = invalid || disabled || submitInProgress;