update examples to use hooks

examples/src/ExampleCustomComponentSelection.js

@@ -1,33 +1,42 @@
-import React from 'react';
-import Gallery from 'react-photo-gallery';
-import renderSelectImage from './SelectedImage';
+import React, { useState } from "react";
+import Gallery from "react-photo-gallery";
+import renderSelectImage from "./SelectedImage";
 
-class ExampleCustomComponentSelection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { photos: this.props.photos, selectAll: false };
-    this.selectPhoto = this.selectPhoto.bind(this);
-    this.toggleSelect = this.toggleSelect.bind(this);
-  }
-  selectPhoto(event, obj){
-    let photos = this.state.photos;
-    photos[obj.index].selected = !photos[obj.index].selected;
-    this.setState({photos: photos});
-  }
-  toggleSelect(){
-    let photos = this.state.photos.map((photo,index)=> { return {...photo, selected: !this.state.selectAll}});
-    this.setState({photos: photos, selectAll: !this.state.selectAll});
-  }
-  render(){
-    return (
-      <div>
-        <h2>Using the ImageComponent prop</h2>
-        <h3>Pass in a custom image component to create any visual representation such as selection</h3>
-        <p><button className="toggle-select" onClick={this.toggleSelect}>toggle select all</button></p>
-        <Gallery photos={this.state.photos} onClick={this.selectPhoto} renderImage={renderSelectImage}/>
-      </div>
-    );
-  }
+function ExampleCustomComponentSelection({ photos }) {
+  const [images, setImages] = useState(photos);
+  const [selectAll, setSelectAll] = useState(false);
+
+  const selectPhoto = (event, obj) => {
+    let currImages = [...images];
+    currImages[obj.index].selected = !currImages[obj.index].selected;
+    setImages(currImages);
+  };
+  const toggleSelect = () => {
+    let currImages = [...images].map(img => {
+      return { ...img, selected: !selectAll };
+    });
+    setImages(currImages);
+    setSelectAll(!selectAll);
+  };
+  return (
+    <div>
+      <h2>Using the ImageComponent prop</h2>
+      <h3>
+        Pass in a custom image component to create any visual representation
+        such as selection
+      </h3>
+      <p>
+        <button className="toggle-select" onClick={toggleSelect}>
+          toggle select all
+        </button>
+      </p>
+      <Gallery
+        photos={images}
+        onClick={selectPhoto}
+        renderImage={renderSelectImage}
+      />
+    </div>
+  );
 }
 
 export default ExampleCustomComponentSelection;

examples/src/ExampleDynamicLoading.js

@@ -1,61 +1,48 @@
-import React from 'react';
-import Gallery from 'react-photo-gallery';
+import React, { useState, useEffect } from "react";
+import Gallery from "react-photo-gallery";
+import { debounce } from "./utils";
 
-function debounce(func, wait, immediate) {
-    let timeout;
-  return function() {
-        const context = this, args = arguments;
-    let later = function() {
-            timeout = null;
-            if (!immediate) func.apply(context, args);
-
-    };
-        const callNow = immediate && !timeout;
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-        if (callNow) func.apply(context, args);
-
-  };
+function ExampleDynamicLoading({ photos }) {
+  const [images, setImages] = useState(photos.slice(0, 6));
+  const [pageNum, setPageNum] = useState(1);
+  const [loadedAll, setLoadedAll] = useState(false);
+  const TOTAL_PAGES = 3;
+  const loadMorePhotos = debounce(() => {
+    if (pageNum > TOTAL_PAGES) {
+      setLoadedAll(true);
+      return;
+    }
 
-};
+    setImages(images.concat(photos.slice(images.length, images.length + 6)));
+    setPageNum(pageNum + 1);
+  }, 200);
 
-class ExampleDynamicLoading extends React.Component {
-  constructor(props){
-    super(props);
-    this.state = {photos: this.props.photos.slice(0,6), pageNum:1, totalPages:3, loadedAll: false};
-    this.handleScroll = this.handleScroll.bind(this);
-    this.loadMorePhotos = this.loadMorePhotos.bind(this);
-    this.loadMorePhotos = debounce(this.loadMorePhotos, 200);
-  }
-  componentDidMount() {
-        window.addEventListener('scroll', this.handleScroll);
-  }
-  handleScroll(){
-    let scrollY = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
-    if ((window.innerHeight + scrollY) >= (document.body.offsetHeight - 50)) {
-            this.loadMorePhotos();
-    }
-
-  }
-  loadMorePhotos(){
-    if (this.state.pageNum > this.state.totalPages){
-            this.setState({loadedAll: true});
-            return;
+  useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  });
+
+  const handleScroll = () => {
+    let scrollY =
+      window.scrollY ||
+      window.pageYOffset ||
+      document.documentElement.scrollTop;
+    if (window.innerHeight + scrollY >= document.body.offsetHeight - 50) {
+      loadMorePhotos();
     }
-    this.setState({
-      photos: this.state.photos.concat(this.props.photos.slice(this.state.photos.length,this.state.photos.length+6)), 
-      pageNum: this.state.pageNum + 1
-    });
-  }
-  render(){
-    return (
-      <div>
-        <h2>Loading Photos Dynamically in Column Layout</h2>
-        <Gallery photos={this.state.photos} direction={'column'} />
-        {!this.state.loadedAll && <div className="loading-msg" id="msg-loading-more">Loading</div>}
-      </div>
-    );
-  }  
+  };
+
+  return (
+    <div>
+      <h2>Loading Photos Dynamically in Column Layout</h2>
+      <Gallery photos={images} direction={"column"} />
+      {!loadedAll && (
+        <div className="loading-msg" id="msg-loading-more">
+          Loading
+        </div>
+      )}
+    </div>
+  );
 }
 
 export default ExampleDynamicLoading;

examples/src/ExampleWithLightbox.js

@@ -1,61 +1,41 @@
-import React from "react";
+import React, { useState } from "react";
 import ReactDOM from "react-dom";
 import Gallery from "react-photo-gallery";
 import Carousel, { Modal, ModalGateway } from "react-images";
 
-class ExampleWithLightbox extends React.Component {
-  constructor() {
-    super();
-    this.state = { currentImage: 0 };
-    this.closeLightbox = this.closeLightbox.bind(this);
-    this.openLightbox = this.openLightbox.bind(this);
-    this.gotoNext = this.gotoNext.bind(this);
-    this.gotoPrevious = this.gotoPrevious.bind(this);
-  }
-  openLightbox(event, obj) {
-    this.setState({
-      currentImage: obj.index,
-      lightboxIsOpen: true
-    });
-  }
-  closeLightbox() {
-    this.setState({
-      currentImage: 0,
-      lightboxIsOpen: false
-    });
-  }
-  gotoPrevious() {
-    this.setState({
-      currentImage: this.state.currentImage - 1
-    });
-  }
-  gotoNext() {
-    this.setState({
-      currentImage: this.state.currentImage + 1
-    });
-  }
-  render() {
-    return (
-      <div>
-        <h2>Using with a Lightbox component</h2>
-        <Gallery photos={this.props.photos} onClick={this.openLightbox} />
-        <ModalGateway>
-          {this.state.lightboxIsOpen ? (
-            <Modal onClose={this.closeLightbox}>
-              <Carousel
-                currentIndex={this.state.currentImage}
-                views={this.props.photos.map(x => ({
-                  ...x,
-                  srcset: x.srcSet,
-                  caption: x.title
-                }))}
-              />
-            </Modal>
-          ) : null}
-        </ModalGateway>
-      </div>
-    );
-  }
+function ExampleWithLightbox({ photos }) {
+  const [currentImage, setCurrentImage] = useState(0);
+  const [viewerIsOpen, setViewerIsOpen] = useState(false);
+
+  const openLightbox = (event, obj) => {
+    setCurrentImage(obj.index);
+    setViewerIsOpen(true);
+  };
+  const closeLightbox = () => {
+    setCurrentImage(0);
+    setViewerIsOpen(false);
+  };
+
+  return (
+    <div>
+      <h2>Using with a Lightbox component</h2>
+      <Gallery photos={photos} onClick={openLightbox} />
+      <ModalGateway>
+        {viewerIsOpen ? (
+          <Modal onClose={closeLightbox}>
+            <Carousel
+              currentIndex={currentImage}
+              views={photos.map(x => ({
+                ...x,
+                srcset: x.srcSet,
+                caption: x.title
+              }))}
+            />
+          </Modal>
+        ) : null}
+      </ModalGateway>
+    </div>
+  );
 }
 
 export default ExampleWithLightbox;

examples/src/app.js

@@ -36,7 +36,7 @@ class App extends React.Component {
       let photos = data.photoset.photo.map(item => {
         let aspectRatio = parseFloat(item.width_o / item.height_o);
         return {
-          src: aspectRatio >= 3 ? item.url_c : item.url_m,
+          src: item.url_l,
           width: parseInt(item.width_o),
           height: parseInt(item.height_o),
           title: item.title,
@@ -63,11 +63,11 @@ class App extends React.Component {
       const width = this.state.width;
       return (
         <div className="App">
-          <ExampleBasic title={'Basic Row Layout'} photos={this.state.photos.slice(0,40)} />
+          <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)} />
           <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,120)} />
+          <ExampleDynamicColumns title={'Custom Dynamic Columns'} photos={this.state.photos.slice(90,110)} />
           <ExampleDynamicLoading photos={this.state.photos} />
         </div>
       );

examples/src/utils.js

@@ -0,0 +1,15 @@
+export const debounce = (func, wait, immediate) => {
+  let timeout;
+  return function() {
+    const context = this,
+      args = arguments;
+    let later = function() {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}