diff --git a/package.json b/package.json index 38f071d5..acb58931 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,6 @@ "react-moment-proptypes": "^1.5.0", "react-redux": "^5.0.7", "react-router-dom": "^4.2.2", - "react-sortable-hoc": "^0.6.8", "redux": "^3.7.2", "redux-form": "^7.3.0", "redux-thunk": "^2.2.0", diff --git a/src/components/AddImages/AddImages.example.js b/src/components/AddImages/AddImages.example.js index b337d6ca..2a504aff 100644 --- a/src/components/AddImages/AddImages.example.js +++ b/src/components/AddImages/AddImages.example.js @@ -1,7 +1,6 @@ /* eslint-disable no-console */ import React, { Component } from 'react'; import { findIndex, uniqueId } from 'lodash'; -import { arrayMove } from 'react-sortable-hoc'; import { types as sdkTypes } from '../../util/sdkLoader'; import AddImages from './AddImages'; import css from './AddImages.example.css'; @@ -19,7 +18,6 @@ class AddImagesTest extends Component { images: [], }; this.onChange = this.onChange.bind(this); - this.onSortEnd = this.onSortEnd.bind(this); } onChange(event) { @@ -50,19 +48,11 @@ class AddImagesTest extends Component { }, 1000); } - onSortEnd({ oldIndex, newIndex }) { - const { images } = this.state; - this.setState({ - images: arrayMove(images, oldIndex, newIndex), - }); - } - render() { return (
console.log('remove image:', imageId)} > diff --git a/src/components/AddImages/AddImages.js b/src/components/AddImages/AddImages.js index b216d097..0df88d7c 100644 --- a/src/components/AddImages/AddImages.js +++ b/src/components/AddImages/AddImages.js @@ -9,7 +9,6 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { SortableContainer } from 'react-sortable-hoc'; import classNames from 'classnames'; import { ImageFromFile, ResponsiveImage, IconSpinner } from '../../components'; @@ -76,21 +75,7 @@ ThumbnailWrapper.propTypes = { onRemoveImage: func.isRequired, }; -// Sorting is disabled temporarily. -// -// The issue with sorting is that in touch devices it makes -// scrolling the page really hard. The image takes 100% of the width -// of the device (minus margin) and thus the whole screen is filled -// up with the sortable images. When the user tries to scroll by dragging -// the finger on the device, it actually start to sort the images and -// not scroll. -// -// TODO Think what to do with the scrolling issue when sorting is in use -// -const SortableImage = ThumbnailWrapper; - -// Create container where there are sortable images and passed children like "Add image" input etc. -const SortableImages = SortableContainer(props => { +const AddImages = props => { const { children, className, @@ -104,7 +89,7 @@ const SortableImages = SortableContainer(props => {
{images.map((image, index) => { return ( - { {children}
); -}); - -// Configure sortable container see. https://github.com/clauderic/react-sortable-hoc -// Items can be sorted horizontally, vertically or in a grid. -// axis="xy" means grid like sorting -const AddImages = props => { - return ; }; AddImages.defaultProps = { className: null, thumbnailClassName: null, images: [] }; @@ -133,7 +111,6 @@ AddImages.propTypes = { children: node.isRequired, className: string, thumbnailClassName: string, - onSortEnd: func.isRequired, savedImageAltText: string.isRequired, onRemoveImage: func.isRequired, }; diff --git a/src/forms/EditListingPhotosForm/EditListingPhotosForm.js b/src/forms/EditListingPhotosForm/EditListingPhotosForm.js index 76b7ed5a..cd723829 100644 --- a/src/forms/EditListingPhotosForm/EditListingPhotosForm.js +++ b/src/forms/EditListingPhotosForm/EditListingPhotosForm.js @@ -3,7 +3,6 @@ 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'; @@ -20,7 +19,6 @@ export class EditListingPhotosFormComponent extends Component { super(props); this.state = { imageUploadRequested: false }; this.onImageUploadHandler = this.onImageUploadHandler.bind(this); - this.onSortEnd = this.onSortEnd.bind(this); this.submittedImages = []; } @@ -38,11 +36,6 @@ export class EditListingPhotosFormComponent extends Component { } } - onSortEnd({ oldIndex, newIndex }) { - const images = arrayMove(this.props.images, oldIndex, newIndex); - this.props.onUpdateImageOrder(images.map(i => i.id)); - } - render() { return (