add sortable example

neptunian · Jun 22, 2019 · efa0e25 · efa0e25
1 parent cf37750
commit efa0e25
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 7 deletions.
diff --git a/examples/src/ExampleSortable.js b/examples/src/ExampleSortable.js
@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import Gallery, { Photo } from 'react-photo-gallery';
+import arrayMove from 'array-move';
+import { SortableContainer, SortableElement } from 'react-sortable-hoc';
+
+const SortablePhoto = SortableElement(item => <Photo {...item} />);
+const SortableGallery = SortableContainer(({ items }) => (
+  <Gallery photos={items} renderImage={props => <SortablePhoto {...props} />} />
+));
+
+function ExampleSortable({ photos }) {
+  const [items, setItems] = useState(photos);
+
+  const onSortEnd = ({ oldIndex, newIndex }) => {
+    setItems(arrayMove(items, oldIndex, newIndex));
+  };
+
+  return (
+    <div>
+      <h2>Sortable Gallery</h2>
+      <h3>Drag photo to rearrange</h3>
+      <SortableGallery items={items} onSortEnd={onSortEnd} axis={'xy'} />
+    </div>
+  );
+}
+
+export default ExampleSortable;
diff --git a/examples/src/app.js b/examples/src/app.js
@@ -4,6 +4,7 @@ import jsonp from 'jsonp';
 import ExampleBasic from './ExampleBasic';
 import ExampleWithLightbox from './ExampleWithLightbox';
 import ExampleCustomComponentSelection from './ExampleCustomComponentSelection';
+import ExampleSortable from './ExampleSortable';
 import ExampleDynamicLoading from './ExampleDynamicLoading';
 import ExampleDynamicColumns from './ExampleDynamicColumns';
 
@@ -17,7 +18,6 @@ class App extends React.Component {
     this.loadPhotos();
   }
   loadPhotos() {
-
     const urlParams = {
       api_key: '455b5e2fa6b951f9b9ab58a86d5e1f8a',
       photoset_id: '72157708141247864',
@@ -55,19 +55,19 @@ class App extends React.Component {
         photos: this.state.photos ? this.state.photos.concat(photos) : photos,
       });
     });
-
   }
 
   render() {
     if (this.state.photos) {
       const width = this.state.width;
       return (
         <div className="App">
-          <ExampleBasic title={'Basic Row Layout'} photos={this.state.photos.slice(0,20)} />
-          <ExampleBasic title={'Basic Column Layout'} layout="column" photos={this.state.photos.slice(40, 60)} />
+          <ExampleBasic title={'Basic Row Layout'} photos={this.state.photos.slice(0, 20)} />
+          <ExampleBasic title={'Basic Column Layout'} direction="column" photos={this.state.photos.slice(40, 60)} />
           <ExampleWithLightbox photos={this.state.photos.slice(60, 75)} />
           <ExampleCustomComponentSelection photos={this.state.photos.slice(75, 90)} />
-          <ExampleDynamicColumns title={'Custom Dynamic Columns'} photos={this.state.photos.slice(90,110)} />
+          <ExampleSortable photos={this.state.photos.slice(90, 100)} />
+          <ExampleDynamicColumns title={'Custom Dynamic Columns'} photos={this.state.photos.slice(100, 120)} />
           <ExampleDynamicLoading photos={this.state.photos} />
         </div>
       );

diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "array-move": "^2.1.0",
     "babel-eslint": "^9.0.0",
     "babel-jest": "^24.7.1",
     "babel-loader": "^8.0.0",
@@ -40,6 +41,7 @@
     "eslint-config-prettier": "^2.3.0",
     "eslint-plugin-prettier": "^2.2.0",
     "eslint-plugin-react": "^7.3.0",
+    "eslint-plugin-react-hooks": "^1.6.0",
     "jest": "^24.7.1",
     "jest-cli": "^24.7.1",
     "jsonp": "^0.2.1",
@@ -49,6 +51,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-images": "^1.0.0",
+    "react-sortable-hoc": "^1.9.1",
     "react-test-renderer": "^16.1.1",
     "rollup": "^1.0.0",
     "rollup-plugin-babel": "^4.0.1",

diff --git a/yarn.lock b/yarn.lock
@@ -649,7 +649,7 @@
     "@babel/plugin-transform-react-jsx-self" "^7.0.0"
     "@babel/plugin-transform-react-jsx-source" "^7.0.0"
 
-"@babel/runtime@^7.1.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0":
   version "7.4.5"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
   integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
@@ -1362,6 +1362,11 @@ array-includes@^3.0.3:
     define-properties "^1.1.2"
     es-abstract "^1.7.0"
 
+array-move@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/array-move/-/array-move-2.1.0.tgz#b4e9fc8d6a580bc97dcad408e0539c61b4b7ed7e"
+  integrity sha512-BXEIud+F7/ech2HcSfo+6bpgSCRlNnVTqQhGKdMov9iJkHq+vu9IP9qRXDpZvQpc1WWpDLiEfjs6Lfvvac+fDA==
+
 array-union@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
@@ -3027,6 +3032,11 @@ eslint-plugin-prettier@^2.2.0:
     fast-diff "^1.1.1"
     jest-docblock "^20.0.1"
 
+eslint-plugin-react-hooks@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.6.0.tgz#348efcda8fb426399ac7b8609607c7b4025a6f5f"
+  integrity sha512-lHBVRIaz5ibnIgNG07JNiAuBUeKhEf8l4etNx5vfAEwqQ5tcuK3jV9yjmopPgQDagQb7HwIuQVsE3IVcGrRnag==
+
 eslint-plugin-react@^7.3.0:
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.3.0.tgz#ca9368da36f733fbdc05718ae4e91f778f38e344"
@@ -6767,7 +6777,7 @@ prop-types@^15.5.10:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-prop-types@^15.5.8, prop-types@^15.6.2, prop-types@~15.7.2:
+prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@~15.7.2:
   version "15.7.2"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -7023,6 +7033,15 @@ react-scrolllock@^1.0.9:
     create-react-class "^15.5.2"
     prop-types "^15.5.10"
 
+react-sortable-hoc@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.9.1.tgz#ae3d28c3cff87fb862be3ddcde9c76b5b5bd2152"
+  integrity sha512-2VeofjRav8+eZeE5Nm/+b8mrA94rQ+gBsqhXi8pRBSjOWNqslU3ZEm+0XhSlfoXJY2lkgHipfYAUuJbDtCixRg==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    invariant "^2.2.4"
+    prop-types "^15.5.7"
+
 react-test-renderer@^16.0.0-0, react-test-renderer@^16.1.1:
   version "16.6.3"
   resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.6.3.tgz#5f3a1a7d5c3379d46f7052b848b4b72e47c89f38"