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 (