remove react-sortable-hoc - gzip change 515.33 KB (-13.18 KB)

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",

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 (
       <div>
         <AddImages
           images={this.state.images}
-          onSortEnd={this.onSortEnd}
           savedImageAltText="Saved image"
           onRemoveImage={imageId => console.log('remove image:', imageId)}
         >

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 => {
     <div className={classes}>
       {images.map((image, index) => {
         return (
-          <SortableImage
+          <ThumbnailWrapper
             image={image}
             index={index}
             key={image.id.uuid || image.id}
@@ -117,13 +102,6 @@ const SortableImages = SortableContainer(props => {
       {children}
     </div>
   );
-});
-
-// 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 <SortableImages axis="xy" {...props} />;
 };
 
 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,
 };

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 (
       <FinalForm
@@ -150,7 +143,6 @@ export class EditListingPhotosFormComponent extends Component {
               <AddImages
                 className={css.imagesField}
                 images={images}
-                onSortEnd={this.onSortEnd}
                 thumbnailClassName={css.thumbnail}
                 savedImageAltText={intl.formatMessage({
                   id: 'EditListingPhotosForm.savedImageAltText',

yarn.lock

@@ -4967,7 +4967,7 @@ lodash@^4.1.1, lodash@^4.17.5:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
 
-lodash@^4.12.0, lodash@^4.15.0, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.1, lodash@^4.3.0:
+lodash@^4.15.0, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.1, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -6562,7 +6562,7 @@ prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.5.4, prop-types@^15.5.7:
+prop-types@^15.5.4:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -6903,15 +6903,6 @@ react-side-effect@^1.1.0:
     exenv "^1.2.1"
     shallowequal "^0.2.2"
 
-react-sortable-hoc@^0.6.8:
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-0.6.8.tgz#b08562f570d7c41f6e393fca52879d2ebb9118e9"
-  dependencies:
-    babel-runtime "^6.11.6"
-    invariant "^2.2.1"
-    lodash "^4.12.0"
-    prop-types "^15.5.7"
-
 react-test-renderer@^16.0.0-0:
   version "16.3.1"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.3.1.tgz#d9257936d8535bd40f57f3d5a84e7b0452fb17f2"