react-editable-photo-grid 1.0.0

package/dist/index.js

@@ -0,0 +1 @@
+(()=>{"use strict";var n={365:(n,t,e)=>{e.d(t,{A:()=>l});var o=e(601),r=e.n(o),a=e(314),i=e.n(a)()(r());i.push([n.id,".photogrid {\n    padding: 0 0.125rem;\n}\n\n.photogrid--row__controls {\n    display: block;\n    position: absolute;\n    left: 0.25rem;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 20;\n}\n\n.photogrid--row__controls > li {\n    display: block;\n}\n\n.photogrid--photo__controls {\n    display: block;\n    position: absolute;\n    left: 50%;\n    transform: translateX(-50%);\n    bottom: 0.5rem;\n    text-align: center;\n}\n\n.photogrid--photo__controls > li {\n    display: inline-block;\n}\n\n.photogrid--photo__controls > li + li {\n    margin-left: 0.25rem;\n}\n\n.photogrid--photo__controls .photo__control, .photogrid--row__controls .row__control {\n    width: 36px;\n    height: 36px;\n    display: block;\n    background: #ddd;\n    color: #333;\n    font-size: 1.5rem;\n    line-height: 2rem;\n}\n\n.photogrid--photo__row {\n    display: block;\n    background: transparent;\n    min-height: 0;\n    position: relative;\n    z-index: 10;\n    padding: 0;\n}\n\n.photogrid--photo__row.editing {\n    padding-left: 2.75rem;\n}\n\n.photogrid--photo__column {\n    position: relative;\n    vertical-align: middle;\n    display: block;\n    margin: 0.125rem;\n}\n\n.photogrid--photo__column > img {\n    display: block;\n    max-width: 100%;\n    max-height: 700px;\n    height: auto;\n    margin: 0;\n    -webkit-touch-callout: none;\n    -webkit-user-select: none;\n    -khtml-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n}\n\n@media only screen and (min-width: 768px) {\n    .photogrid--photo__row {\n        display: flex;\n        flex: 1 1 auto;\n    }\n\n    .photogrid--photo__column > img {\n        display: inline-block;\n    }\n}\n\n",""]);const l=i},314:n=>{n.exports=function(n){var t=[];return t.toString=function(){return this.map((function(t){var e="",o=void 0!==t[5];return t[4]&&(e+="@supports (".concat(t[4],") {")),t[2]&&(e+="@media ".concat(t[2]," {")),o&&(e+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),e+=n(t),o&&(e+="}"),t[2]&&(e+="}"),t[4]&&(e+="}"),e})).join("")},t.i=function(n,e,o,r,a){"string"==typeof n&&(n=[[null,n,void 0]]);var i={};if(o)for(var l=0;l<this.length;l++){var c=this[l][0];null!=c&&(i[c]=!0)}for(var u=0;u<n.length;u++){var s=[].concat(n[u]);o&&i[s[0]]||(void 0!==a&&(void 0===s[5]||(s[1]="@layer".concat(s[5].length>0?" ".concat(s[5]):""," {").concat(s[1],"}")),s[5]=a),e&&(s[2]?(s[1]="@media ".concat(s[2]," {").concat(s[1],"}"),s[2]=e):s[2]=e),r&&(s[4]?(s[1]="@supports (".concat(s[4],") {").concat(s[1],"}"),s[4]=r):s[4]="".concat(r)),t.push(s))}},t}},601:n=>{n.exports=function(n){return n[1]}},72:n=>{var t=[];function e(n){for(var e=-1,o=0;o<t.length;o++)if(t[o].identifier===n){e=o;break}return e}function o(n,o){for(var a={},i=[],l=0;l<n.length;l++){var c=n[l],u=o.base?c[0]+o.base:c[0],s=a[u]||0,p="".concat(u," ").concat(s);a[u]=s+1;var d=e(p),h={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==d)t[d].references++,t[d].updater(h);else{var m=r(h,o);o.byIndex=l,t.splice(l,0,{identifier:p,updater:m,references:1})}i.push(p)}return i}function r(n,t){var e=t.domAPI(t);return e.update(n),function(t){if(t){if(t.css===n.css&&t.media===n.media&&t.sourceMap===n.sourceMap&&t.supports===n.supports&&t.layer===n.layer)return;e.update(n=t)}else e.remove()}}n.exports=function(n,r){var a=o(n=n||[],r=r||{});return function(n){n=n||[];for(var i=0;i<a.length;i++){var l=e(a[i]);t[l].references--}for(var c=o(n,r),u=0;u<a.length;u++){var s=e(a[u]);0===t[s].references&&(t[s].updater(),t.splice(s,1))}a=c}}},659:n=>{var t={};n.exports=function(n,e){var o=function(n){if(void 0===t[n]){var e=document.querySelector(n);if(window.HTMLIFrameElement&&e instanceof window.HTMLIFrameElement)try{e=e.contentDocument.head}catch(n){e=null}t[n]=e}return t[n]}(n);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(e)}},540:n=>{n.exports=function(n){var t=document.createElement("style");return n.setAttributes(t,n.attributes),n.insert(t,n.options),t}},56:(n,t,e)=>{n.exports=function(n){var t=e.nc;t&&n.setAttribute("nonce",t)}},825:n=>{n.exports=function(n){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=n.insertStyleElement(n);return{update:function(e){!function(n,t,e){var o="";e.supports&&(o+="@supports (".concat(e.supports,") {")),e.media&&(o+="@media ".concat(e.media," {"));var r=void 0!==e.layer;r&&(o+="@layer".concat(e.layer.length>0?" ".concat(e.layer):""," {")),o+=e.css,r&&(o+="}"),e.media&&(o+="}"),e.supports&&(o+="}");var a=e.sourceMap;a&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),t.styleTagTransform(o,n,t.options)}(t,n,e)},remove:function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(t)}}}},113:n=>{n.exports=function(n,t){if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}}},t={};function e(o){var r=t[o];if(void 0!==r)return r.exports;var a=t[o]={id:o,exports:{}};return n[o](a,a.exports,e),a.exports}e.n=n=>{var t=n&&n.__esModule?()=>n.default:()=>n;return e.d(t,{a:t}),t},e.d=(n,t)=>{for(var o in t)e.o(t,o)&&!e.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:t[o]})},e.o=(n,t)=>Object.prototype.hasOwnProperty.call(n,t),e.r=n=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.nc=void 0;var o={};e.r(o),e.d(o,{PhotoGrid:()=>j});const r=require("react");var a=e.n(r),i=function(){return i=Object.assign||function(n){for(var t,e=1,o=arguments.length;e<o;e++)for(var r in t=arguments[e])Object.prototype.hasOwnProperty.call(t,r)&&(n[r]=t[r]);return n},i.apply(this,arguments)},l=function(n){return n.sort((function(n,t){return Math.floor(n.column)-Math.floor(t.column)}))},c=function(n,t){var e=n.find((function(n){return n.id===t}));if(void 0===e)throw new TypeError("No photo was found in this row for that id");return e},u=function(n,t){var e=n.find((function(n){return n.column===t}));if(void 0===e)throw new TypeError("No photo was found in this row for that column");return e},s=function(n,t){return n.filter((function(n){return n.column!==t}))},p=function(n,t,e){return void 0===n&&(n=[]),t.column=e,n.push(t),n},d=function(n,t,e){var o=t.column,r=e.column;return n=s(n,o),n=s(n,r),n=p(n,t,r),p(n,e,o)},h=function(n){return"string"==typeof n&&(n=parseInt(n)),n},m=function(n){var t=n.currentTarget,e=t.dataset.id,o=t.dataset.row;if(!e||!o)throw new TypeError("id or row key missing from photo control");return{id:e,rowKey:parseInt(o)}},f=function(n,t,e){for(var o=t;o<=e;o++){var r=u(n,o);n=s(n,o),n=p(n,r,r.column-1)}return n},v=function(n,t,e,o,r){return delete n[r],delete n[e],n[r]=t,n[e]=o,n},w=e(72),g=e.n(w),y=e(825),_=e.n(y),b=e(659),E=e.n(b),C=e(56),k=e.n(C),x=e(540),T=e.n(x),K=e(113),N=e.n(K),P=e(365),M={};M.styleTagTransform=N(),M.setAttributes=k(),M.insert=E().bind(null,"head"),M.domAPI=_(),M.insertStyleElement=T(),g()(P.A,M),P.A&&P.A.locals&&P.A.locals;const R=function(n){return a().createElement("ul",{className:"photogrid--row__controls"},h(n.rowKey)>1&&a().createElement("li",null,a().createElement("button",{className:"row__control",onClick:n.moveRowUp,"data-row":n.rowKey},"↑")),h(n.rowKey)<n.rowCount&&a().createElement("li",null,a().createElement("button",{className:"row__control",onClick:n.moveRowDown,"data-row":n.rowKey},"↓")))},O=function(n){return a().createElement("ul",{className:"photogrid--photo__controls"},n.photo.column>1&&a().createElement("li",null,a().createElement("button",{type:"button",className:"photo__control",onClick:n.movePhotoLeft,"data-id":n.photo.id,"data-row":n.rowKey},"←")),h(n.rowKey)>1&&a().createElement("li",null,a().createElement("button",{type:"button",className:"photo__control",onClick:n.movePhotoUp,"data-id":n.photo.id,"data-row":n.rowKey},"↑")),h(n.rowKey)<n.rowCount||h(n.rowKey)===n.rowCount&&n.photoCount>1?a().createElement("li",null,a().createElement("button",{type:"button",className:"photo__control",onClick:n.movePhotoDown,"data-id":n.photo.id,"data-row":n.rowKey},"↓")):null,n.photo.column<n.photoCount&&a().createElement("li",null,a().createElement("button",{type:"button",className:"photo__control",onClick:n.movePhotoRight,"data-id":n.photo.id,"data-row":n.rowKey},"→")))},j=function(n){var t=function(t){!function(n,t){n.preventDefault();var e=m(n),o=e.id,r=e.rowKey,a=i({},t.rows),u=l(a[r]),d=r-1,h=[];null!=a[d]&&(h=l(a[d]));var v=c(u,o),w=v.column+1,g=u.length;u=s(u,v.column),delete a[r],u.length&&(f(u,w,g),a[r]=u),h=p(h,v,h.length+1),delete a[d],a[d]=h,t.updateRows(a),t.increaseChanges()}(t,n)},e=function(t){!function(n,t){n.preventDefault();var e=m(n),o=e.id,r=e.rowKey,a=i({},t.rows),d=l(a[r]),h=r+1,v=c(d,o),w=v.column+1,g=d.length;d=s(d,v.column),delete a[r],d.length&&(d=f(d,w,g));var y=null;null==a[h]?(v.column=1,y=[v]):(y=function(n,t){for(var e=t;e>0;e--){var o=u(n,e);n=s(n,e),n=p(n,o,o.column+1)}return n}(y=l(a[h]),y.length),y=p(y,v,1),delete a[h]),a[h]=y,d.length&&(a[r]=d),t.updateRows(a),t.increaseChanges()}(t,n)},o=function(t){!function(n,t){n.preventDefault();var e=m(n),o=e.id,r=e.rowKey,a=i({},t.rows),s=l(a[r]),p=c(s,o);if(1!==p.column){var h=u(s,p.column-1);s=d(s,h,p),delete a[r],a[r]=s,t.updateRows(a),t.increaseChanges()}}(t,n)},h=function(t){!function(n,t){n.preventDefault();var e=m(n),o=e.id,r=e.rowKey,a=i({},t.rows),s=l(a[r]),p=c(s,o);if(p.column!==s.length){var h=u(s,p.column+1);s=d(s,p,h),delete a[r],a[r]=s,t.updateRows(a),t.increaseChanges()}}(t,n)},w=function(t){!function(n,t){n.preventDefault();var e=n.currentTarget.dataset.row;if(!e)throw new TypeError("row missing from row control");var o=parseInt(e),r=o-1,a=i({},t.rows),c=l(a[o]),u=l(a[r]);a=v(a,c,o,u,r),t.updateRows(a),t.increaseChanges()}(t,n)},g=function(t){!function(n,t){n.preventDefault();var e=n.currentTarget.dataset.row;if(!e)throw new TypeError("row missing from row control");var o=parseInt(e),r=o+1,a=i({},t.rows),c=l(a[o]),u=l(a[r]);a=v(a,c,o,u,r),t.updateRows(a),t.increaseChanges()}(t,n)};return 0===Object.keys(n.rows).length?null:a().createElement("div",{className:"photogrid"},Object.entries(n.rows).map((function(i,c){return i[1].length&&a().createElement("div",{key:"row-"+c,className:n.isEditing?"photogrid--photo__row editing":"photogrid--photo__row"},a().createElement(a().Fragment,null,n.isEditing&&a().createElement(R,{rowKey:i[0],moveRowUp:w,moveRowDown:g,rowCount:Object.keys(n.rows).length}),l(i[1]).map((function(l,u){return a().createElement("div",{key:"photo-"+c+u,className:"photogrid--photo__column"},a().createElement("img",{width:l.width,height:l.height,"data-id":l.id,src:"/api/photos/"+l.thumbnail_path,alt:l.thumbnail_path}),n.isEditing&&a().createElement(a().Fragment,null,n.photoMenu?(0,r.cloneElement)(n.photoMenu,{photo:l}):null,a().createElement(O,{rowKey:i[0],photo:l,movePhotoDown:e,movePhotoLeft:o,movePhotoUp:t,movePhotoRight:h,rowCount:Object.keys(n.rows).length,photoCount:i[1].length})))}))))})))};module.exports=o})();

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "react-editable-photo-grid",
+  "version": "1.0.0",
+  "description": "An editable photo grid built with React and Typescript",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack"
+  },
+  "peerDependencies": {
+    "@types/node": "^20.14.10",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "typescript": "^5.5.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.9",
+    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^7.1.2",
+    "style-loader": "^4.0.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.5.3",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/DominicHart/react-photo-grid.git"
+  },
+  "keywords": [
+    "photo",
+    "grid",
+    "react",
+    "typescript"
+  ],
+  "author": "Dominic Hart",
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/DominicHart/react-photo-grid/issues"
+  },
+  "homepage": "https://github.com/DominicHart/react-photo-grid#readme",
+  "dependencies": {
+    "@types/react": "^18.3.3",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  }
+}

package/src/PhotoGrid.tsx

@@ -0,0 +1,94 @@
+import React, { cloneElement } from 'react';
+import { PhotoGridProps } from './types';
+import { sortRow, movePhotoLeft, movePhotoUp, movePhotoDown, movePhotoRight, moveRowUp, moveRowDown } from "./utils";
+import RowControls from './components/RowControls';
+import PhotoControls from './components/PhotoControls';
+import './styles.css';
+
+const PhotoGrid = (props: PhotoGridProps) => {
+  const handleMovePhotoUp = (e: React.MouseEvent<HTMLButtonElement>) => {
+    movePhotoUp(e, props);
+  }
+
+  const handleMovePhotoDown = (e: React.MouseEvent<HTMLButtonElement>) => {
+    movePhotoDown(e, props);
+  }
+
+  const handleMovePhotoLeft = (e: React.MouseEvent<HTMLButtonElement>) => {
+    movePhotoLeft(e, props);
+  }
+
+  const handleMovePhotoRight = (e: React.MouseEvent<HTMLButtonElement>) => {
+    movePhotoRight(e, props);
+  }
+
+  const handleMoveRowUp = (e: React.MouseEvent<HTMLButtonElement>) => {
+    moveRowUp(e, props);
+  }
+
+  const handleMoveRowDown = (e: React.MouseEvent<HTMLButtonElement>) => {
+    moveRowDown(e, props);
+  }
+
+  if (Object.keys(props.rows).length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="photogrid">
+      {Object.entries(props.rows).map((row, i) =>
+        row[1].length &&
+        <div 
+          key={'row-' + i} 
+          className={props.isEditing ? "photogrid--photo__row editing" : "photogrid--photo__row"}
+        >
+          <>
+            {props.isEditing &&
+              <RowControls
+                rowKey={row[0]}
+                moveRowUp={handleMoveRowUp}
+                moveRowDown={handleMoveRowDown}
+                rowCount={Object.keys(props.rows).length}
+              />
+            }
+            {sortRow(row[1]).map((photo, i2) =>
+              <div 
+                key={'photo-' + i + i2} 
+                className="photogrid--photo__column"
+              >
+                <img
+                  width={photo.width}
+                  height={photo.height}
+                  data-id={photo.id}
+                  src={"/api/photos/" + photo.thumbnail_path}
+                  alt={photo.thumbnail_path}
+                />
+                {props.isEditing &&
+                  <>
+                    {props.photoMenu ?
+                      cloneElement(props.photoMenu, {
+                        photo: photo
+                      })
+                      : null}
+                    <PhotoControls
+                      rowKey={row[0]}
+                      photo={photo}
+                      movePhotoDown={handleMovePhotoDown}
+                      movePhotoLeft={handleMovePhotoLeft}
+                      movePhotoUp={handleMovePhotoUp}
+                      movePhotoRight={handleMovePhotoRight}
+                      rowCount={Object.keys(props.rows).length}
+                      photoCount={row[1].length}
+                    />
+                  </>
+                }
+              </div>
+            )}
+          </>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PhotoGrid;

package/src/components/PhotoControls.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { PhotoControlsProps } from '../types';
+import { castRowKey } from '../utils';
+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} 
+            data-row={props.rowKey}
+          >
+            &#8592;
+          </button>
+        </li>
+      }
+      {castRowKey(props.rowKey) > 1 &&
+        <li>
+          <button 
+            type="button" 
+            className="photo__control" 
+            onClick={props.movePhotoUp} 
+            data-id={props.photo.id} 
+            data-row={props.rowKey}
+          >
+            &#8593;
+          </button>
+        </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} 
+            data-row={props.rowKey}
+          >
+            &#8595;
+          </button>
+        </li> : null
+      }
+      {props.photo.column < props.photoCount &&
+        <li>
+          <button 
+            type="button" 
+            className="photo__control" 
+            onClick={props.movePhotoRight} 
+            data-id={props.photo.id} 
+            data-row={props.rowKey}
+          >
+            &#8594;
+          </button>
+        </li>
+      }
+    </ul>
+  );
+};
+
+export default PhotoControls;

package/src/components/RowControls.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { RowControlsProps } from "../types";
+import { castRowKey } from '../utils';
+import'../styles.css';
+
+const RowControls = (props: RowControlsProps) => {
+  return (
+    <ul className='photogrid--row__controls'>
+      {castRowKey(props.rowKey) > 1 &&
+        <li>
+          <button 
+            className="row__control" 
+            onClick={props.moveRowUp} 
+            data-row={props.rowKey}
+          >
+            &#8593;
+          </button>
+        </li>
+      }
+      {castRowKey(props.rowKey) < props.rowCount &&
+        <li>
+          <button 
+            className="row__control" 
+            onClick={props.moveRowDown} 
+            data-row={props.rowKey}
+          >
+            &#8595;
+          </button>
+        </li>
+      }
+    </ul>
+  );
+};
+
+export default RowControls;

package/src/index.js

@@ -0,0 +1,3 @@
+import PhotoGrid from './PhotoGrid';
+
+export { PhotoGrid };

package/src/styles.css

@@ -0,0 +1,89 @@
+.photogrid {
+    padding: 0 0.125rem;
+}
+
+.photogrid--row__controls {
+    display: block;
+    position: absolute;
+    left: 0.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 20;
+}
+
+.photogrid--row__controls > li {
+    display: block;
+}
+
+.photogrid--photo__controls {
+    display: block;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 0.5rem;
+    text-align: center;
+}
+
+.photogrid--photo__controls > li {
+    display: inline-block;
+}
+
+.photogrid--photo__controls > li + li {
+    margin-left: 0.25rem;
+}
+
+.photogrid--photo__controls .photo__control, .photogrid--row__controls .row__control {
+    width: 36px;
+    height: 36px;
+    display: block;
+    background: #ddd;
+    color: #333;
+    font-size: 1.5rem;
+    line-height: 2rem;
+}
+
+.photogrid--photo__row {
+    display: block;
+    background: transparent;
+    min-height: 0;
+    position: relative;
+    z-index: 10;
+    padding: 0;
+}
+
+.photogrid--photo__row.editing {
+    padding-left: 2.75rem;
+}
+
+.photogrid--photo__column {
+    position: relative;
+    vertical-align: middle;
+    display: block;
+    margin: 0.125rem;
+}
+
+.photogrid--photo__column > img {
+    display: block;
+    max-width: 100%;
+    max-height: 700px;
+    height: auto;
+    margin: 0;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+@media only screen and (min-width: 768px) {
+    .photogrid--photo__row {
+        display: flex;
+        flex: 1 1 auto;
+    }
+
+    .photogrid--photo__column > img {
+        display: inline-block;
+    }
+}
+

package/src/types.ts

@@ -0,0 +1,48 @@
+import { ReactElement } from "react";
+
+export interface PhotoIdAndRowKey {
+  id: string;
+  rowKey: number;
+}
+
+export interface PhotoItem {
+  id: string;
+  column: number;
+  image_path: string;
+  thumbnail_path: string;
+  carousel_key: number;
+  width: number;
+  height: number;
+}
+
+export interface PhotoRows {
+  [key: number]: PhotoItem[];
+}
+
+export interface PhotoGridProps {
+  rows: PhotoRows;
+  updateRows: (rows: PhotoRows) => void;
+  changes: number;
+  increaseChanges: () => void;
+  isEditing: boolean;
+  selectedPhotos: Array<string>;
+  updateSelectedPhotos: (ids: Array<string>) => void;
+  photoMenu: ReactElement | undefined
+}
+
+export interface PhotoControlsProps {
+  rowKey: string | number;
+  photo: PhotoItem;
+  rowCount: number,
+  photoCount: number,
+  movePhotoLeft: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  movePhotoUp: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  movePhotoDown: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  movePhotoRight: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export interface RowControlsProps {
+  rowKey: string | number;
+  moveRowUp: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  moveRowDown: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  rowCount: number
+}