react-editable-photo-grid 1.0.0 → 2.3.0

package/src/styles.css

@@ -1,3 +1,19 @@
+.photogrid--checkbox {
+    background: white;
+    border: 2px solid white;
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 10;
+}
+
+.photogrid--checkbox.active {
+    background: #333;
+}
+
 .photogrid {
     padding: 0 0.125rem;
 }
@@ -17,6 +33,7 @@
 
 .photogrid--photo__controls {
     display: block;
+    width: 100%;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
@@ -32,6 +49,10 @@
     margin-left: 0.25rem;
 }
 
+.photogrid--row__controls > li + li {
+    margin-top: 0.25rem;
+}
+
 .photogrid--photo__controls .photo__control, .photogrid--row__controls .row__control {
     width: 36px;
     height: 36px;
@@ -62,10 +83,47 @@
     margin: 0.125rem;
 }
 
+.photogrid--photo_overlay, .photogrid__gallery_item__overlay {
+    min-height: 0;
+    display: none;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    color: white;
+    padding: 0.5rem;
+    z-index: 200;
+}
+
+.photogrid--photo_overlay h4, .photogrid__gallery_item__overlay h4 {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0;
+    padding: 0;
+}
+
+.photogrid--photo_overlay p, .photogrid__gallery_item__overlay p {
+    margin: 7px 0 0 0;
+    padding: 0;
+    font-size: 12px;
+}
+
+.photogrid--photo__column > .photo__position {
+    position: absolute;
+    top: 0;
+    z-index: 20;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.65);
+    color: white;
+    padding: 0.1rem;
+}
+
 .photogrid--photo__column > img {
     display: block;
     max-width: 100%;
-    max-height: 700px;
+    max-height: 750px;
     height: auto;
     margin: 0;
     -webkit-touch-callout: none;
@@ -76,7 +134,237 @@
     user-select: none;
 }
 
+.custom__gallery {
+    display: block;
+    overflow: hidden;
+    position: fixed;
+    left: 0;
+    top: 0;
+    margin: 0 auto;
+    width: 100%;
+    height: 100vh;
+    z-index: 9000;
+    background: black;
+}
+
+.custom__gallery .custom__gallery__container {
+  vertical-align: middle;
+  display: block;
+  height: 100%;
+  margin: 0 auto;
+  position: relative;
+}
+
+.custom__gallery .custom__gallery__container .previous__item {
+  display: none;
+  height: 50px;
+  width: 50px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: white;
+  font-size: 2rem;
+  left: 50px;
+  cursor: pointer;
+  z-index: 9001;
+}
+
+.custom__gallery .custom__gallery__container .previous__item > * {
+  pointer-events: none;
+}
+
+.custom__gallery .custom__gallery__container .custom__gallery__images {
+  height: 100vh;
+  text-align: center;
+}
+
+.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item {
+  position: relative;
+  height: 100vh;
+  display: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item.active {
+  display: block;
+}
+
+.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img {
+  display: block;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  max-width: 100%;
+  height: auto;
+  width: 100%;
+  margin: 0 auto;
+  line-height: 1;
+  vertical-align: middle;
+  outline: 0;
+}
+
+.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item p {
+  color: white;
+  margin-top: 12px;
+}
+
+.custom__gallery .custom__gallery__container .next__item {
+  display: none;
+  height: 50px;
+  width: 50px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: white;
+  font-size: 2rem;
+  right: 50px;
+  cursor: pointer;
+  z-index: 9001;
+}
+
+.custom__gallery .custom__gallery__container .next__item > * {
+  pointer-events: none;
+}
+
+.custom__gallery .close__gallery {
+  position: absolute;
+  z-index: 9999;
+  right: 0;
+  background: none;
+  color: white;
+  border: none;
+  font-size: 3rem;
+  float: right;
+  font-weight: 300;
+  width: 73px;
+  height: 73px;
+  overflow: hidden;
+  text-decoration: none;
+}
+
+.custom__gallery .close__gallery:active, .custom__gallery .close__gallery:focus {
+  text-decoration: none;
+}
+
+
+.photogrid__gallery {
+    width: 100%;
+    text-align: center;
+    overflow: hidden;
+    position: fixed;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    background-color: black;
+    z-index: 400;
+    margin: 0 auto;
+}
+
+.photogrid__gallery_scrollcontainer {
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+    height: 100vh;
+    margin: 0 auto;
+    width: 100%;
+}
+
+.photogrid__gallery_scrollcontainer::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+.photogrid__gallery_scrollcontainer::-webkit-scrollbar-thumb {
+    background: #ddd;
+    border-radius: 10px;
+}
+
+.photogrid__gallery_scrollcontainer::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.photogrid__gallery_item {
+    width: 100%;
+    height: 100vh;
+    scroll-snap-align: start;
+    transform-origin: center;
+    transform: scale(1);
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.photogrid__gallery_item +.photogrid__gallery_item {
+    margin-left: 1rem;
+}
+
+.photogrid__gallery_item > img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+}
+
+.photogrid__gallery__hide {
+    text-align: right;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding-right: 0.5rem;
+    z-index: 500;
+}
+
+.photogrid__gallery__hide > button {
+    color: white;
+    font-weight: 300;
+    width: 73px;
+    height: 73px;
+    font-size: 3rem;
+    background: none;
+    border: none;
+}
+
+.photogrid__prev, .photogrid__next {
+    display: none;
+    width: auto;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: white;
+    z-index: 401;
+    font-size: 2rem;
+}
+
+.photogrid__prev > button > *, .photogrid__next > button > * {
+    pointer-events: none;
+}
+
+.photogrid__prev {
+    left: 1.25rem;
+}
+
+.photogrid__next {
+    right: 1.25rem;
+}
+
 @media only screen and (min-width: 768px) {
+    .custom__gallery .custom__gallery__container .previous__item, .custom__gallery .custom__gallery__container .next__item {
+        display: inline-block;
+    }
+
     .photogrid--photo__row {
         display: flex;
         flex: 1 1 auto;
@@ -87,3 +375,42 @@
     }
 }
 
+@media only screen and (min-width: 1024px) {
+    .photogrid__prev, .photogrid__next {
+        display: block;
+    }
+}
+
+
+@media only screen and (min-width: 1280px) {
+    .custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img:hover + .custom__gallery__photo__overlay {
+        display: block;
+    }
+    .photogrid--photo__column img:hover + .photogrid--photo_overlay {
+        display: block;
+    }
+    .photogrid__gallery_item > img:hover .photogrid__gallery_item__overlay {
+        display: block;
+    }
+    .photogrid__gallery_scrollcontainer {
+        width: 91.6%;
+    }
+}
+
+@media only screen and (min-width: 1400px) {
+    .custom__gallery .custom__gallery__container {
+        width: 92%;
+    }
+
+    .custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img {
+        max-width: 100%;
+        height: 100%;
+        width: auto;
+    }
+}
+
+@media only screen and (min-width: 1536px) {
+    .photogrid__gallery_scrollcontainer {
+        width: 75%;
+    }
+}

package/src/types.ts

@@ -5,21 +5,40 @@ export interface PhotoIdAndRowKey {
   rowKey: number;
 }
 
+export interface ButtonArrows {
+  up: string;
+  down: string;
+  left: string;
+  right: string
+}
+
+export interface GalleryButtonArrows {
+  prev: string;
+  next: string;
+}
+
 export interface PhotoItem {
   id: string;
   column: number;
+  row: number;
   image_path: string;
   thumbnail_path: string;
-  carousel_key: number;
   width: number;
   height: number;
+  name?: string;
+  description?: string;
 }
 
+export enum imgSrcProperty {
+  id = 'id',
+  thumbnail_path = 'thumbnail_path',
+  image_path = 'image_path'
+}
 export interface PhotoRows {
   [key: number]: PhotoItem[];
 }
-
 export interface PhotoGridProps {
+  photos: PhotoItem[];
   rows: PhotoRows;
   updateRows: (rows: PhotoRows) => void;
   changes: number;
@@ -27,7 +46,16 @@ export interface PhotoGridProps {
   isEditing: boolean;
   selectedPhotos: Array<string>;
   updateSelectedPhotos: (ids: Array<string>) => void;
-  photoMenu: ReactElement | undefined
+  onPhotoClick?: (e: React.MouseEvent<HTMLImageElement>) => void;
+  imageSrcPrefix: string;
+  imageSrcProperty: imgSrcProperty;
+  photoMenu: ReactElement | undefined,
+  useGallery?: boolean
+  gallerySrcProperty?: imgSrcProperty;
+  onGallerySwipe?: (photo: PhotoItem) => void;
+  buttonArrows?: ButtonArrows;
+  galleryButtonArrows?: GalleryButtonArrows;
+  galleryType: string
 }
 
 export interface PhotoControlsProps {
@@ -39,10 +67,12 @@ export interface PhotoControlsProps {
   movePhotoUp: (e: React.MouseEvent<HTMLButtonElement>) => void;
   movePhotoDown: (e: React.MouseEvent<HTMLButtonElement>) => void;
   movePhotoRight: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  buttonArrows?: ButtonArrows;
 }
 export interface RowControlsProps {
   rowKey: string | number;
   moveRowUp: (e: React.MouseEvent<HTMLButtonElement>) => void;
   moveRowDown: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  rowCount: number
+  rowCount: number;
+  buttonArrows?: ButtonArrows;
 }

package/src/utils.tsx

@@ -1,6 +1,57 @@
 import { PhotoItem, PhotoRows, PhotoIdAndRowKey, PhotoGridProps } from './types';
 import React from 'react';
 
+/**
+ * Returns true if a photo has details
+ * @param photo 
+ */
+export const photoHasDetails = (photo: PhotoItem): boolean => {
+  if (
+    (photo.name != undefined && photo.name !== '') 
+    || (photo.description != undefined && photo.description !== '')
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Sorts photos into rows
+ * @param photos 
+ */
+export const sortPhotosIntoRows = (photos: PhotoItem[]): PhotoRows => {
+  let rows = {} as PhotoRows;
+
+  for (const photo of photos) {
+    const rowKey = photo.row;
+    if (!rows[rowKey]) {
+      rows[rowKey] = [];
+    }
+    rows[rowKey].push(photo);
+  }
+
+  return rows;
+}
+
+/**
+ * Return the photo property to be used for the src
+ * @param photo 
+ * @param property 
+ */
+export 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;
+}
+
 /**
  * Sorts the photos in a row by column number
  * @param row 
@@ -115,9 +166,12 @@ const getPhotoIdAndRowKey = (e: React.MouseEvent<HTMLButtonElement>): PhotoIdAnd
 /**
  * Moves a photo one column to the left
  * @param e 
- * @param props 
+ * @param props
  */
-export const movePhotoLeft = (e: React.MouseEvent<HTMLButtonElement>, props: PhotoGridProps) => {
+export const movePhotoLeft = (
+  e: React.MouseEvent<HTMLButtonElement>,
+  props: PhotoGridProps
+) => {
   e.preventDefault();
 
   const { id, rowKey } = getPhotoIdAndRowKey(e);
@@ -144,9 +198,12 @@ export const movePhotoLeft = (e: React.MouseEvent<HTMLButtonElement>, props: Pho
 /**
  * Move a photo one column to the right
  * @param e 
- * @param props 
+ * @param props
  */
-export const movePhotoRight = (e: React.MouseEvent<HTMLButtonElement>, props: PhotoGridProps) => {
+export const movePhotoRight = (
+  e: React.MouseEvent<HTMLButtonElement>,
+  props: PhotoGridProps
+) => {
   e.preventDefault();
 
   const { id, rowKey } = getPhotoIdAndRowKey(e);
@@ -201,12 +258,32 @@ const shufflePhotosForwardOneColumn = (row: PhotoItem[], start: number): PhotoIt
   return row;
 }
 
+/**
+ * Deletes a row index from the data if it's empty
+ */
+const deleteRowIfEmpty = (rows: PhotoRows, rowIndex: number) => {
+  if (rows[rowIndex] == undefined) {
+    Object.entries(rows).map(([index, photos]: [string, PhotoItem[]]) => {
+      const thisRowIndex = parseInt(index);
+      if (thisRowIndex > rowIndex) {
+        delete rows[thisRowIndex];
+        rows[thisRowIndex - 1] = photos;
+      }
+    })
+  }
+
+  return rows;
+}
+
 /**
  * Moves a photo to the end of the previous row
  * @param e 
- * @param props 
+ * @param props
  */
-export const movePhotoUp = (e: React.MouseEvent<HTMLButtonElement>, props: PhotoGridProps) => {
+export const movePhotoUp = (
+  e: React.MouseEvent<HTMLButtonElement>,
+  props: PhotoGridProps
+): void => {
   e.preventDefault();
   const { id, rowKey } = getPhotoIdAndRowKey(e);
 
@@ -236,6 +313,8 @@ export const movePhotoUp = (e: React.MouseEvent<HTMLButtonElement>, props: Photo
   delete rowsCopy[previousRowKey];
   rowsCopy[previousRowKey] = previousRow;
 
+  rowsCopy = deleteRowIfEmpty(rowsCopy, rowKey);
+
   props.updateRows(rowsCopy);
   props.increaseChanges();
 }
@@ -243,9 +322,12 @@ export const movePhotoUp = (e: React.MouseEvent<HTMLButtonElement>, props: Photo
 /**
  * Moves a photo to the beginning of the next row
  * @param e 
- * @param props 
+ * @param props
  */
-export const movePhotoDown = (e: React.MouseEvent<HTMLButtonElement>, props: PhotoGridProps) => {
+export const movePhotoDown = (
+  e: React.MouseEvent<HTMLButtonElement>,
+  props: PhotoGridProps
+) => {
   e.preventDefault();
   const { id, rowKey } = getPhotoIdAndRowKey(e);
 
@@ -284,17 +366,16 @@ export const movePhotoDown = (e: React.MouseEvent<HTMLButtonElement>, props: Pho
     rowsCopy[rowKey] = thisRow;
   }
 
+  rowsCopy = deleteRowIfEmpty(rowsCopy, rowKey);
+
   props.updateRows(rowsCopy);
   props.increaseChanges();
 }
 
 /**
  * Swaps the row order
- * @param rows 
- * @param firstRow 
- * @param firstRowKey 
- * @param secondRow 
- * @param secondRowKey 
+ * @param e 
+ * @param props
  */
 const swapRows = (
   rows: PhotoRows,
@@ -312,11 +393,14 @@ const swapRows = (
 }
 
 /**
- * Move a row up
+ * Moves a row up
  * @param e 
- * @param props 
+ * @param props
  */
-export const moveRowUp = (e: React.MouseEvent<HTMLButtonElement>, props: PhotoGridProps) => {
+export const moveRowUp = (
+  e: React.MouseEvent<HTMLButtonElement>,
+  props: PhotoGridProps
+) => {
   e.preventDefault();
   const target = e.currentTarget as HTMLButtonElement;
   let rowKey = target.dataset.row;
@@ -329,10 +413,15 @@ export const moveRowUp = (e: React.MouseEvent<HTMLButtonElement>, props: PhotoGr
     previousRowKey = rowIndex - 1;
 
   let rowsCopy = { ...props.rows },
-    thisRow = sortRow(rowsCopy[rowIndex]),
-    previousRow = sortRow(rowsCopy[previousRowKey]);
+    thisRow = sortRow(rowsCopy[rowIndex]);
 
-  rowsCopy = swapRows(rowsCopy, thisRow, rowIndex, previousRow, previousRowKey);
+  if (rowsCopy[previousRowKey] == undefined) {
+    delete rowsCopy[rowIndex];
+    rowsCopy[previousRowKey] = thisRow;
+  } else {
+    let previousRow = sortRow(rowsCopy[previousRowKey]);
+    rowsCopy = swapRows(rowsCopy, thisRow, rowIndex, previousRow, previousRowKey);
+  }
 
   props.updateRows(rowsCopy);
   props.increaseChanges();
@@ -341,9 +430,12 @@ export const moveRowUp = (e: React.MouseEvent<HTMLButtonElement>, props: PhotoGr
 /**
  * Moves a row down
  * @param e 
- * @param props 
+ * @param props
  */
-export const moveRowDown = (e: React.MouseEvent<HTMLButtonElement>, props: PhotoGridProps) => {
+export const moveRowDown = (
+  e: React.MouseEvent<HTMLButtonElement>,
+  props: PhotoGridProps
+) => {
   e.preventDefault();
   const target = e.currentTarget as HTMLButtonElement;
   let rowKey = target.dataset.row;
@@ -356,10 +448,14 @@ export const moveRowDown = (e: React.MouseEvent<HTMLButtonElement>, props: Photo
     nextRowKey = rowIndex + 1;
 
   let rowsCopy = { ...props.rows },
-    thisRow = sortRow(rowsCopy[rowIndex]),
-    nextRow = sortRow(rowsCopy[nextRowKey]);
+    thisRow = sortRow(rowsCopy[rowIndex]);
 
-  rowsCopy = swapRows(rowsCopy, thisRow, rowIndex, nextRow, nextRowKey);
+  if (!rowsCopy[nextRowKey]) {
+    throw new TypeError('There is no next row!');
+  } else {
+    const nextRow = sortRow(rowsCopy[nextRowKey]);
+    rowsCopy = swapRows(rowsCopy, thisRow, rowIndex, nextRow, nextRowKey);
+  }
 
   props.updateRows(rowsCopy);
   props.increaseChanges();

package/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
-}

package/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES5",
-    "module": "ESNext",
-    "lib": ["dom", "es2015"],
-    "jsx": "react",
-    "moduleResolution": "node",
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "outDir": "./dist",
-    "rootDir": "./src"
-  },
-  "include": ["src"]
-}
-