react-editable-photo-grid 1.0.0 → 2.3.0

package/src/components/NonScrollGallery.tsx

@@ -0,0 +1,188 @@
+import React, { useEffect, useState, TouchEvent } from 'react'
+import { imgSrcProperty, GalleryButtonArrows, PhotoItem } from '../types';
+import { getImageSrcProperty, photoHasDetails } from "../utils";
+
+type GalleryProps = {
+  photos: PhotoItem[],
+  activeKey: number,
+  setActiveKey: (key: number) => void,
+  imageSrcPrefix: string;
+  imageSrcProperty: imgSrcProperty;
+  buttonArrows?: GalleryButtonArrows;
+  onGallerySwipe?: (photo: PhotoItem) => void;
+}
+
+const NonScrollGallery = (props: GalleryProps) => {
+  const [touchPosition, setTouchPosition] = useState<number | null>(null),
+    [visible, setVisible] = useState<boolean>(false);
+
+  const getSrcProperty = (photo: PhotoItem): string => {
+    const property = props.imageSrcProperty as string;
+    return getImageSrcProperty(photo, property);
+  }
+
+  const showGallery = () => {
+    setVisible(true);
+  }
+
+  const handleSwipe = () => {
+    if (props.onGallerySwipe) {
+      const photoKey = props.activeKey,
+        photo: PhotoItem = props.photos[photoKey];
+
+      if (photo) {
+        props.onGallerySwipe(photo);
+      }
+    }
+  }
+
+  const shouldRenderImage = (index: number) => {
+    const key = props.activeKey;
+    let validIndexes = [key];
+
+    if (key > 0) {
+      validIndexes.push(key - 1);
+    }
+
+    if (key < props.photos.length - 1) {
+      validIndexes.push(key + 1);
+    }
+
+    return validIndexes.includes(index);
+  }
+
+  const prevItem = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    if (props.activeKey > 0) {
+      props.setActiveKey(props.activeKey - 1);
+      handleSwipe();
+    }
+  }
+
+  const nextItem = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    if (props.activeKey < props.photos.length - 1) {
+      props.setActiveKey(props.activeKey + 1);
+      handleSwipe();
+    }
+  }
+
+  const keydownHandler = (e: KeyboardEvent) => {
+    if (e.keyCode === 39) {
+      if (props.activeKey < props.photos.length - 1) {
+        props.setActiveKey(props.activeKey + 1);
+      }
+    } else if (e.keyCode === 37) {
+      if (props.activeKey > 0) {
+        props.setActiveKey(props.activeKey - 1);
+      }
+    }
+    handleSwipe();
+  }
+
+  const hideGallery = () => {
+    setVisible(false);
+    props.setActiveKey(-1);
+  }
+
+  const disableRightClick = () => {
+    return false;
+  }
+
+  const handleTouchStart = (e: TouchEvent<HTMLDivElement>) => {
+    const touchDown = e.touches[0].clientX;
+    setTouchPosition(touchDown);
+  }
+
+  const handleTouchMove = (e: TouchEvent<HTMLDivElement>) => {
+    if (touchPosition === null) {
+      return;
+    }
+
+    const currentTouch = e.touches[0].clientX,
+      diff = touchPosition - currentTouch;
+
+    if (diff > 5) {
+      if (props.activeKey < props.photos.length - 1) {
+        props.setActiveKey(props.activeKey + 1);
+      }
+    }
+
+    if (diff < -5) {
+      if (props.activeKey > 0) {
+        props.setActiveKey(props.activeKey - 1);
+      }
+    }
+
+    handleSwipe();
+    setTouchPosition(null);
+  }
+
+  useEffect(() => {
+    if (props.activeKey > -1) {
+      if (visible === false) {
+        showGallery()
+      }
+    }
+
+    document.addEventListener('keydown', keydownHandler);
+
+    return function cleanup() {
+      document.removeEventListener('keydown', keydownHandler);
+    };
+
+  }, [props.activeKey])
+
+  return (
+    <div
+      className="custom__gallery"
+      style={{ display: visible === true ? 'block' : 'none' }}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+    >
+      <div className="clearfix">
+        <button className="close__gallery" onClick={hideGallery} type="button">&times;</button>
+      </div>
+      <div className="custom__gallery__container">
+        {props.activeKey > 0 &&
+          <button
+            onClick={prevItem}
+            className="previous__item"
+            dangerouslySetInnerHTML={{ __html: props.buttonArrows ? props.buttonArrows.prev : '&#8592' }}
+          />
+        }
+        <div className="custom__gallery__images">
+          {props.photos.length &&
+            props.photos.map((photo, i) =>
+              <div key={`${i}`} className={props.activeKey == i ? "custom__gallery__item active" : "custom__gallery__item"}>
+                <img
+                  src={shouldRenderImage(i) ? `${props.imageSrcPrefix}${getSrcProperty(photo)}` : ''}
+                  alt="gallery item"
+                  onContextMenu={disableRightClick}
+                />
+                {photoHasDetails(photo) === true && (
+                  <div className="custom__gallery__photo__overlay">
+                    {photo.name != undefined && photo.name !== '' && (
+                      <h4>{photo.name}</h4>
+                    )}
+                    {photo.description != undefined && photo.description !== '' && (
+                      <p>{photo.description}</p>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+        </div>
+        {props.activeKey < props.photos.length - 1 &&
+          <button
+            onClick={nextItem}
+            className="next__item"
+            dangerouslySetInnerHTML={{ __html: props.buttonArrows ? props.buttonArrows.next : '&#8594' }}
+          />
+        }
+      </div>
+    </div>
+  )
+}
+
+export default NonScrollGallery;

package/src/components/PhotoControls.tsx

@@ -1,61 +1,57 @@
 import React from 'react';
 import { PhotoControlsProps } from '../types';
 import { castRowKey } from '../utils';
-import'../styles.css';
+import '../styles.css';
 
 const PhotoControls = (props: PhotoControlsProps) => {
   return (
     <ul className="photogrid--photo__controls">
       {props.photo.column > 1 &&
         <li>
-          <button 
-            type="button" 
-            className="photo__control" 
-            onClick={props.movePhotoLeft} 
-            data-id={props.photo.id} 
+          <button
+            type="button"
+            className="photo__control move__photo__left"
+            onClick={props.movePhotoLeft}
+            data-id={props.photo.id}
             data-row={props.rowKey}
-          >
-            &#8592;
-          </button>
+            dangerouslySetInnerHTML={{ __html: props.buttonArrows ? props.buttonArrows.left : '&#8592' }}
+          />
         </li>
       }
       {castRowKey(props.rowKey) > 1 &&
         <li>
-          <button 
-            type="button" 
-            className="photo__control" 
-            onClick={props.movePhotoUp} 
-            data-id={props.photo.id} 
+          <button
+            type="button"
+            className="photo__control move__photo__up"
+            onClick={props.movePhotoUp}
+            data-id={props.photo.id}
             data-row={props.rowKey}
-          >
-            &#8593;
-          </button>
+            dangerouslySetInnerHTML={{ __html: props.buttonArrows ? props.buttonArrows.up : '&#8593' }}
+          />
         </li>
       }
       {castRowKey(props.rowKey) < props.rowCount || castRowKey(props.rowKey) === props.rowCount && props.photoCount > 1 ?
         <li>
-          <button 
-            type="button" 
-            className="photo__control" 
-            onClick={props.movePhotoDown} 
-            data-id={props.photo.id} 
+          <button
+            type="button"
+            className="photo__control move__photo__down"
+            onClick={props.movePhotoDown}
+            data-id={props.photo.id}
             data-row={props.rowKey}
-          >
-            &#8595;
-          </button>
+            dangerouslySetInnerHTML={{ __html: props.buttonArrows ? props.buttonArrows.down : '&#8595' }}
+          />
         </li> : null
       }
       {props.photo.column < props.photoCount &&
         <li>
-          <button 
-            type="button" 
-            className="photo__control" 
-            onClick={props.movePhotoRight} 
-            data-id={props.photo.id} 
+          <button
+            type="button"
+            className="photo__control  move__photo__right"
+            onClick={props.movePhotoRight}
+            data-id={props.photo.id}
             data-row={props.rowKey}
-          >
-            &#8594;
-          </button>
+            dangerouslySetInnerHTML={{ __html: props.buttonArrows ? props.buttonArrows.right : '&#8594' }}
+          />
         </li>
       }
     </ul>

package/src/components/RowControls.tsx

@@ -9,23 +9,21 @@ const RowControls = (props: RowControlsProps) => {
       {castRowKey(props.rowKey) > 1 &&
         <li>
           <button 
-            className="row__control" 
+            className="row__control move__row__up" 
             onClick={props.moveRowUp} 
             data-row={props.rowKey}
-          >
-            &#8593;
-          </button>
+            dangerouslySetInnerHTML={{ __html: props.buttonArrows ? props.buttonArrows.up : '&#8593' }}
+          />
         </li>
       }
       {castRowKey(props.rowKey) < props.rowCount &&
         <li>
           <button 
-            className="row__control" 
+            className="row__control move__row__down" 
             onClick={props.moveRowDown} 
             data-row={props.rowKey}
-          >
-            &#8595;
-          </button>
+            dangerouslySetInnerHTML={{ __html: props.buttonArrows ? props.buttonArrows.down : '&#8595' }}
+          />
         </li>
       }
     </ul>

package/src/components/ScrollGallery.tsx

@@ -0,0 +1,190 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { imgSrcProperty, GalleryButtonArrows, PhotoItem } from '../types';
+import { photoHasDetails } from "../utils";
+import debounce from 'lodash.debounce';
+
+type Props = {
+  photos: PhotoItem[],
+  activeKey: number,
+  setActiveKey: (key: number) => void,
+  imageSrcPrefix: string;
+  imageSrcProperty: imgSrcProperty;
+  onGallerySwipe?: (photo: PhotoItem) => void;
+  buttonArrows?: GalleryButtonArrows;
+};
+
+const ScrollGallery: React.FC<Props> = ({ photos, imageSrcPrefix, imageSrcProperty, onGallerySwipe, activeKey, setActiveKey, buttonArrows }) => {
+  const [visible, setVisible] = useState<boolean>(false),
+    scrollContainer = useRef<HTMLDivElement | null>(null),
+    imgRefs = useRef<(HTMLImageElement | null)[]>([]),
+    [swipeEnabled, setSwipeEnabled] = useState(false);
+
+  const getImageSrcProperty = (photo: PhotoItem, property: string): string => {
+    switch (property) {
+      case 'id':
+        return photo.id;
+      case 'thumbnail_path':
+        return photo.thumbnail_path;
+      case 'image_path':
+        return photo.image_path;
+    }
+
+    return photo.image_path;
+  }
+
+  const handleSwipe = (index: number) => {
+    if (onGallerySwipe && swipeEnabled) {
+      const photo: PhotoItem = photos[index];
+
+      if (photo) {
+        onGallerySwipe(photo);
+      }
+    }
+  }
+
+  const hideGallery = () => {
+    setVisible(false);
+    setActiveKey(-1);
+  }
+
+  const jumpToImage = useCallback(
+    debounce((index: number) => {
+      setSwipeEnabled(false);
+
+      const imgElement = imgRefs.current[index];
+      const containerElement = scrollContainer.current;
+
+      if (imgElement && containerElement) {
+        const imgRect = imgElement.getBoundingClientRect();
+        const containerRect = containerElement.getBoundingClientRect();
+
+        const scrollLeft = imgRect.left - containerRect.left + containerElement.scrollLeft;
+
+        containerElement.scrollTo({
+          left: scrollLeft,
+          behavior: 'smooth'
+        });
+      }
+
+      setSwipeEnabled(true);
+    }, 100),
+    []
+  );
+
+  const disableRightClick = (e: React.MouseEvent<HTMLImageElement>) => {
+    e.preventDefault();
+    return false;
+  }
+
+  const scrollLeft = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (scrollContainer.current != undefined) {
+      scrollContainer.current.scrollBy({
+        top: 0,
+        left: -1,
+        behavior: 'smooth'
+      });
+    }
+  }
+
+  const scrollRight = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (scrollContainer.current != undefined) {
+      scrollContainer.current.scrollBy({
+        top: 0,
+        left: 800,
+        behavior: 'smooth'
+      });
+    }
+  }
+
+  const loadImagesSrc = () => {
+    imgRefs.current.forEach((img, index) => {
+      if (img) {
+        const src = img.getAttribute('data-src');
+        if (src) {
+          img.src = src;
+        }
+      }
+    })
+  }
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    return;
+    const target = e.currentTarget as HTMLDivElement;
+    const { scrollLeft } = target;
+    const itemWidth = target.clientWidth;
+    const index = Math.round(scrollLeft / itemWidth);
+    setActiveKey(index);
+    handleSwipe(index);
+  }
+
+  useEffect(() => {
+    if (activeKey > -1 && visible === false) {
+      setVisible(true);
+      jumpToImage(activeKey);
+    }
+  }, [activeKey]);
+
+  useEffect(() => {
+    loadImagesSrc();
+  }, [photos]);
+
+  return (
+    <div
+      className={`${visible ? 'block' : 'hidden'} photogrid__gallery`}
+    >
+      <div className="photogrid__gallery__hide">
+        <button onClick={hideGallery} type="button">&times;</button>
+      </div>
+      <div
+        className="photogrid__prev"
+      >
+        <button
+          type="button"
+          onClick={scrollLeft}
+          dangerouslySetInnerHTML={{ __html: buttonArrows ? buttonArrows.prev : '&#8592' }}
+        />
+      </div>
+      <div 
+        ref={scrollContainer} 
+        className="photogrid__gallery_scrollcontainer" 
+        onScroll={handleScroll}
+      >
+        {photos.length &&
+          photos.map((photo, i) =>
+            <div key={`${i}`} className="photogrid__gallery_item">
+              <img
+                ref={el => imgRefs.current[i] = el}
+                data-index={i}
+                data-src={`${imageSrcPrefix}${getImageSrcProperty(photo, imageSrcProperty)}`}
+                alt="gallery item"
+                onContextMenu={disableRightClick}
+              />
+              {photoHasDetails(photo) === true && (
+                <div className="photogrid__gallery_item__overlay">
+                  {photo.name != undefined && photo.name !== '' && (
+                    <h4>{photo.name}</h4>
+                  )}
+                  {photo.description != undefined && photo.description !== '' && (
+                    <p>{photo.description}</p>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+      </div>
+      <div
+        className="photogrid__next"
+      >
+        <button
+          type="button"
+          onClick={scrollRight}
+          dangerouslySetInnerHTML={{ __html: buttonArrows ? buttonArrows.next : '&#8594' }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default ScrollGallery;

package/src/index.js

@@ -1,3 +1,6 @@
 import PhotoGrid from './PhotoGrid';
+import Checkbox from './components/Checkbox';
+import { PhotoRows, PhotoItem, imgSrcProperty } from './types';
+import { sortPhotosIntoRows } from './utils';
 
-export { PhotoGrid };
+export { PhotoGrid, PhotoRows, PhotoItem, imgSrcProperty, sortPhotosIntoRows, Checkbox };