react-editable-photo-grid 2.3.7 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -1
- package/dist/index.js +1 -1
- package/package.json +54 -54
- package/src/PhotoGrid.tsx +167 -191
- package/src/components/Checkbox.tsx +26 -26
- package/src/components/NonScrollGallery.tsx +187 -187
- package/src/components/PhotoControls.tsx +60 -60
- package/src/components/RowControls.tsx +32 -32
- package/src/components/ScrollGallery.tsx +212 -189
- package/src/{index.js → index.ts} +5 -5
- package/src/styles.css +416 -443
- package/src/types.ts +81 -77
- package/src/utils.tsx +461 -461
package/README.md
CHANGED
|
@@ -61,6 +61,8 @@ galleryButtonArrows | GalleryButtonArrows | Allows you to override the gallery p
|
|
|
61
61
|
onPhotoClick | Void | A method that receives the photo id on click
|
|
62
62
|
onGallerySwipe | Void | A method that receives a photo object when the gallery is swiped
|
|
63
63
|
galleryType | String | Determines if the legacy gallery or the scroll gallery (beta) is to be used
|
|
64
|
+
photoMenu | ReactElement | Accepts any React component to appear on hover when in edit mode
|
|
65
|
+
photoActions | ReactElement | Accepts any React component to appear on hover when not in edit mode
|
|
64
66
|
|
|
65
67
|
## How to Use
|
|
66
68
|
|
|
@@ -168,7 +170,46 @@ And here is how you can prepare it for the grid:
|
|
|
168
170
|
/>
|
|
169
171
|
```
|
|
170
172
|
|
|
171
|
-
You can then pass photoMenu to the grid as a prop. See the sample component for more details
|
|
173
|
+
You can then pass photoMenu to the grid as a prop. See the sample component for more details.
|
|
174
|
+
|
|
175
|
+
### Passing custom photo actions
|
|
176
|
+
You can add actions to the grid by passing a component as the photoActions prop. The grid will clone this prop and add it to each photo. There isn't a set format that a menu has to be but here is an example:
|
|
177
|
+
|
|
178
|
+
```tsx
|
|
179
|
+
const PhotoActions: React.FC<Props> = ({ photo, addToBasket }) => {
|
|
180
|
+
const addPhotoToBasket = (e: React.MouseEvent<HTMLButtonElement>): void => {
|
|
181
|
+
e.preventDefault();
|
|
182
|
+
const id = e.currentTarget.dataset.id||undefined;
|
|
183
|
+
if (!id) return;
|
|
184
|
+
addToBasket(id);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
return (
|
|
188
|
+
<div className="flex absolute z-20 bottom-1 left-1/2 -translate-x-1/2">
|
|
189
|
+
<ul className="block">
|
|
190
|
+
<li className="inline-block">
|
|
191
|
+
<button
|
|
192
|
+
type="button"
|
|
193
|
+
onClick={addPhotoToBasket}
|
|
194
|
+
>
|
|
195
|
+
Buy
|
|
196
|
+
</button>
|
|
197
|
+
</li>
|
|
198
|
+
</ul>
|
|
199
|
+
</div>
|
|
200
|
+
);
|
|
201
|
+
}
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
And here is how you can prepare it for the grid:
|
|
205
|
+
|
|
206
|
+
```tsx
|
|
207
|
+
const photoActions = <PhotoActions
|
|
208
|
+
addToBasket={addToBasket}
|
|
209
|
+
/>
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
You can then pass photoActions to the grid as a prop. See the sample component for more details.
|
|
172
213
|
|
|
173
214
|
### Using the gallery
|
|
174
215
|
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{var e={365:(e,n,t)=>{"use strict";t.d(n,{A:()=>l});var o=t(601),r=t.n(o),i=t(314),a=t.n(i)()(r());a.push([e.id,".photogrid--checkbox {\n background: white;\n border: 2px solid white;\n cursor: pointer;\n width: 18px;\n height: 18px;\n position: absolute;\n top: 10px;\n left: 10px;\n z-index: 50;\n}\n\n.photogrid--checkbox.active {\n background: #333;\n}\n\n.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 width: 100%;\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--row__controls > li + li {\n margin-top: 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_overlay {\n cursor: pointer;\n}\n\n.photogrid--photo_overlay, .photogrid__gallery_item__overlay, .custom__gallery__photo__overlay {\n text-align: center;\n min-height: 0;\n display: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.6);\n padding: 0.5rem;\n z-index: 200;\n}\n\n.photogrid--photo_overlay h4, .photogrid__gallery_item__overlay h4, .custom__gallery__photo__overlay h4 {\n pointer-events: none;\n margin: 25% 0 0 0;\n font-size: 20px;\n font-weight: 600;\n padding: 0;\n}\n\n.photogrid--photo_overlay p, .photogrid__gallery_item__overlay p, , .custom__gallery__photo__overlay p {\n pointer-events: none;\n font-size: 16px;\n margin: 7px 0 0 0;\n padding: 0;\n}\n\n.photogrid--photo__column > .photo__details {\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 20;\n text-align: center;\n}\n\n.photogrid--photo__column > .photo__details > .photo__position {\n display: inline-block;\n background: rgba(0, 0, 0, 0.65);\n color: white;\n padding: 0.1rem;\n}\n\n.photogrid--photo__column > .photo__details > .photo__details__desc {\n list-style-type: none;\n display: block;\n margin: 7px 0 0 0;\n padding: 0;\n width: 100%;\n background: rgba(0, 0, 0, 0.6);\n color: white;\n font-size: 13px;\n}\n\n.photogrid--photo__column > .photo__details > .photo__details__desc > li {\n display: block;\n}\n\n.photogrid--photo__column > img {\n display: block;\n max-width: 100%;\n max-height: 750px;\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.custom__gallery {\n display: block;\n overflow: hidden;\n position: fixed;\n left: 0;\n top: 0;\n margin: 0 auto;\n width: 100%;\n height: 100vh;\n z-index: 9000;\n background: black;\n}\n\n.custom__gallery .custom__gallery__container {\n vertical-align: middle;\n display: block;\n height: 100%;\n margin: 0 auto;\n position: relative;\n}\n\n.custom__gallery .custom__gallery__container .previous__item {\n display: none;\n height: 50px;\n width: 50px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n color: white;\n font-size: 2rem;\n left: 50px;\n cursor: pointer;\n z-index: 9001;\n}\n\n.custom__gallery .custom__gallery__container .previous__item > * {\n pointer-events: none;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images {\n height: 100vh;\n text-align: center;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item {\n position: relative;\n height: 100vh;\n display: none;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item.active {\n display: block;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img {\n display: block;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n max-width: 100%;\n height: auto;\n width: 100%;\n margin: 0 auto;\n line-height: 1;\n vertical-align: middle;\n outline: 0;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item p {\n color: white;\n margin-top: 12px;\n}\n\n.custom__gallery .custom__gallery__container .next__item {\n display: none;\n height: 50px;\n width: 50px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n color: white;\n font-size: 2rem;\n right: 50px;\n cursor: pointer;\n z-index: 9001;\n}\n\n.custom__gallery .custom__gallery__container .next__item > * {\n pointer-events: none;\n}\n\n.custom__gallery .close__gallery {\n position: absolute;\n z-index: 9999;\n right: 0;\n background: none;\n color: white;\n border: none;\n font-size: 3rem;\n float: right;\n font-weight: 300;\n width: 73px;\n height: 73px;\n overflow: hidden;\n text-decoration: none;\n}\n\n.custom__gallery .close__gallery:active, .custom__gallery .close__gallery:focus {\n text-decoration: none;\n}\n\n\n.photogrid__gallery {\n width: 100%;\n text-align: center;\n overflow: hidden;\n position: fixed;\n height: 100vh;\n left: 0;\n top: 0;\n background-color: black;\n z-index: 400;\n margin: 0 auto;\n}\n\n.photogrid__gallery_scrollcontainer {\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n scroll-snap-type: x mandatory;\n scroll-behavior: smooth;\n -webkit-overflow-scrolling: touch;\n height: 100vh;\n margin: 0 auto;\n width: 100%;\n}\n\n.photogrid__gallery_scrollcontainer::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n}\n\n.photogrid__gallery_scrollcontainer::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 10px;\n}\n\n.photogrid__gallery_scrollcontainer::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.photogrid__gallery_item {\n width: 100%;\n height: 100vh;\n scroll-snap-align: start;\n transform-origin: center;\n transform: scale(1);\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n}\n\n.photogrid__gallery_item +.photogrid__gallery_item {\n margin-left: 1rem;\n}\n\n.photogrid__gallery_item > img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 0 auto;\n}\n\n.photogrid__gallery__hide {\n text-align: right;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n padding-right: 0.5rem;\n z-index: 500;\n}\n\n.photogrid__gallery__hide > button {\n color: white;\n font-weight: 300;\n width: 73px;\n height: 73px;\n font-size: 3rem;\n background: none;\n border: none;\n}\n\n.photogrid__prev, .photogrid__next {\n display: none;\n width: auto;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n color: white;\n z-index: 401;\n font-size: 2rem;\n}\n\n.photogrid__prev > button > *, .photogrid__next > button > * {\n pointer-events: none;\n}\n\n.photogrid__prev {\n left: 1.25rem;\n}\n\n.photogrid__next {\n right: 1.25rem;\n}\n\n@media only screen and (min-width: 768px) {\n .custom__gallery .custom__gallery__container .previous__item, .custom__gallery .custom__gallery__container .next__item {\n display: inline-block;\n }\n\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@media only screen and (min-width: 1024px) {\n .photogrid__prev, .photogrid__next {\n display: block;\n }\n}\n\n\n@media only screen and (min-width: 1280px) {\n .custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img:hover + .custom__gallery__photo__overlay {\n display: block;\n }\n .photogrid--photo__column:hover .photogrid--photo_overlay {\n display: block;\n }\n .photogrid__gallery_item > img:hover .photogrid__gallery_item__overlay {\n display: block;\n }\n .photogrid__gallery_scrollcontainer {\n width: 91.6%;\n }\n}\n\n@media only screen and (min-width: 1400px) {\n .custom__gallery .custom__gallery__container {\n width: 92%;\n }\n\n .custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img {\n max-width: 100%;\n height: 100%;\n width: auto;\n }\n}\n\n@media only screen and (min-width: 1536px) {\n .photogrid__gallery_scrollcontainer {\n width: 75%;\n }\n}\n",""]);const l=a},314:e=>{"use strict";e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",o=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),o&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),o&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,o,r,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(o)for(var l=0;l<this.length;l++){var c=this[l][0];null!=c&&(a[c]=!0)}for(var s=0;s<e.length;s++){var u=[].concat(e[s]);o&&a[u[0]]||(void 0!==i&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=i),t&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=t):u[2]=t),r&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=r):u[4]="".concat(r)),n.push(u))}},n}},601:e=>{"use strict";e.exports=function(e){return e[1]}},181:(e,n,t)=>{var o=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,i=/^0b[01]+$/i,a=/^0o[0-7]+$/i,l=parseInt,c="object"==typeof t.g&&t.g&&t.g.Object===Object&&t.g,s="object"==typeof self&&self&&self.Object===Object&&self,u=c||s||Function("return this")(),p=Object.prototype.toString,_=Math.max,d=Math.min,h=function(){return u.Date.now()};function m(e){var n=typeof e;return!!e&&("object"==n||"function"==n)}function g(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&"[object Symbol]"==p.call(e)}(e))return NaN;if(m(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=m(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(o,"");var t=i.test(e);return t||a.test(e)?l(e.slice(2),t?2:8):r.test(e)?NaN:+e}e.exports=function(e,n,t){var o,r,i,a,l,c,s=0,u=!1,p=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function y(n){var t=o,i=r;return o=r=void 0,s=n,a=e.apply(i,t)}function v(e){var t=e-c;return void 0===c||t>=n||t<0||p&&e-s>=i}function w(){var e=h();if(v(e))return b(e);l=setTimeout(w,function(e){var t=n-(e-c);return p?d(t,i-(e-s)):t}(e))}function b(e){return l=void 0,f&&o?y(e):(o=r=void 0,a)}function x(){var e=h(),t=v(e);if(o=arguments,r=this,c=e,t){if(void 0===l)return function(e){return s=e,l=setTimeout(w,n),u?y(e):a}(c);if(p)return l=setTimeout(w,n),y(c)}return void 0===l&&(l=setTimeout(w,n)),a}return n=g(n)||0,m(t)&&(u=!!t.leading,i=(p="maxWait"in t)?_(g(t.maxWait)||0,n):i,f="trailing"in t?!!t.trailing:f),x.cancel=function(){void 0!==l&&clearTimeout(l),s=0,o=c=r=l=void 0},x.flush=function(){return void 0===l?a:b(h())},x}},72:e=>{"use strict";var n=[];function t(e){for(var t=-1,o=0;o<n.length;o++)if(n[o].identifier===e){t=o;break}return t}function o(e,o){for(var i={},a=[],l=0;l<e.length;l++){var c=e[l],s=o.base?c[0]+o.base:c[0],u=i[s]||0,p="".concat(s," ").concat(u);i[s]=u+1;var _=t(p),d={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==_)n[_].references++,n[_].updater(d);else{var h=r(d,o);o.byIndex=l,n.splice(l,0,{identifier:p,updater:h,references:1})}a.push(p)}return a}function r(e,n){var t=n.domAPI(n);return t.update(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;t.update(e=n)}else t.remove()}}e.exports=function(e,r){var i=o(e=e||[],r=r||{});return function(e){e=e||[];for(var a=0;a<i.length;a++){var l=t(i[a]);n[l].references--}for(var c=o(e,r),s=0;s<i.length;s++){var u=t(i[s]);0===n[u].references&&(n[u].updater(),n.splice(u,1))}i=c}}},659:e=>{"use strict";var n={};e.exports=function(e,t){var o=function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);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(t)}},540:e=>{"use strict";e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},56:(e,n,t)=>{"use strict";e.exports=function(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},825:e=>{"use strict";e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var n=e.insertStyleElement(e);return{update:function(t){!function(e,n,t){var o="";t.supports&&(o+="@supports (".concat(t.supports,") {")),t.media&&(o+="@media ".concat(t.media," {"));var r=void 0!==t.layer;r&&(o+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),o+=t.css,r&&(o+="}"),t.media&&(o+="}"),t.supports&&(o+="}");var i=t.sourceMap;i&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),n.styleTagTransform(o,e,n.options)}(n,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},113:e=>{"use strict";e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}}},n={};function t(o){var r=n[o];if(void 0!==r)return r.exports;var i=n[o]={id:o,exports:{}};return e[o](i,i.exports,t),i.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.nc=void 0;var o={};(()=>{"use strict";t.r(o),t.d(o,{Checkbox:()=>G,PhotoGrid:()=>H,PhotoItem:()=>e.PhotoItem,PhotoRows:()=>e.PhotoRows,imgSrcProperty:()=>B,sortPhotosIntoRows:()=>l});var e={};t.r(e),t.d(e,{B:()=>B});const n=require("react");var r=t.n(n),i=function(){return i=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},i.apply(this,arguments)},a=function(e){return null!=e.name&&""!==e.name||null!=e.description&&""!==e.description},l=function(e){for(var n={},t=0,o=e;t<o.length;t++){var r=o[t],i=r.row;n[i]||(n[i]=[]),n[i].push(r)}return n},c=function(e,n){switch(n){case"id":return e.id;case"thumbnail_path":return e.thumbnail_path;case"image_path":return e.image_path}return e.image_path},s=function(e){return e.sort((function(e,n){return Math.floor(e.column)-Math.floor(n.column)}))},u=function(e,n){var t=e.find((function(e){return e.id===n}));if(void 0===t)throw new TypeError("No photo was found in this row for that id");return t},p=function(e,n){var t=e.find((function(e){return e.column===n}));if(void 0===t)throw new TypeError("No photo was found in this row for that column");return t},_=function(e,n){return e.filter((function(e){return e.column!==n}))},d=function(e,n,t){return void 0===e&&(e=[]),n.column=t,e.push(n),e},h=function(e,n,t){var o=n.column,r=t.column;return e=_(e,o),e=_(e,r),e=d(e,n,r),d(e,t,o)},m=function(e){return"string"==typeof e&&(e=parseInt(e)),e},g=function(e){var n=e.currentTarget,t=n.dataset.id,o=n.dataset.row;if(!t||!o)throw new TypeError("id or row key missing from photo control");return{id:t,rowKey:parseInt(o)}},f=function(e,n,t){for(var o=n;o<=t;o++){var r=p(e,o);e=_(e,o),e=d(e,r,r.column-1)}return e},y=function(e,n){return null==e[n]&&Object.entries(e).map((function(t){var o=t[0],r=t[1],i=parseInt(o);i>n&&(delete e[i],e[i-1]=r)})),e},v=function(e,n,t,o,r){return delete e[r],delete e[t],e[r]=n,e[t]=o,e},w=t(72),b=t.n(w),x=t(825),k=t.n(x),E=t(659),S=t.n(E),C=t(56),K=t.n(C),T=t(540),A=t.n(T),N=t(113),P=t.n(N),M=t(365),I={};I.styleTagTransform=P(),I.setAttributes=K(),I.insert=S().bind(null,"head"),I.domAPI=k(),I.insertStyleElement=A(),b()(M.A,I),M.A&&M.A.locals&&M.A.locals;const j=function(e){return r().createElement("ul",{className:"photogrid--row__controls"},m(e.rowKey)>1&&r().createElement("li",null,r().createElement("button",{className:"row__control move__row__up",onClick:e.moveRowUp,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.up:"↑"}})),m(e.rowKey)<e.rowCount&&r().createElement("li",null,r().createElement("button",{className:"row__control move__row__down",onClick:e.moveRowDown,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.down:"↓"}})))},z=function(e){return r().createElement("ul",{className:"photogrid--photo__controls"},e.photo.column>1&&r().createElement("li",null,r().createElement("button",{type:"button",className:"photo__control move__photo__left",onClick:e.movePhotoLeft,"data-id":e.photo.id,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.left:"←"}})),m(e.rowKey)>1&&r().createElement("li",null,r().createElement("button",{type:"button",className:"photo__control move__photo__up",onClick:e.movePhotoUp,"data-id":e.photo.id,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.up:"↑"}})),m(e.rowKey)<e.rowCount||m(e.rowKey)===e.rowCount&&e.photoCount>1?r().createElement("li",null,r().createElement("button",{type:"button",className:"photo__control move__photo__down",onClick:e.movePhotoDown,"data-id":e.photo.id,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.down:"↓"}})):null,e.photo.column<e.photoCount&&r().createElement("li",null,r().createElement("button",{type:"button",className:"photo__control move__photo__right",onClick:e.movePhotoRight,"data-id":e.photo.id,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.right:"→"}})))};var R=t(181),O=t.n(R);const D=function(e){var t=e.photos,o=e.imageSrcPrefix,i=e.imageSrcProperty,l=(e.onGallerySwipe,e.activeKey),c=e.setActiveKey,s=e.buttonArrows,u=(0,n.useState)(!1),p=u[0],_=u[1],d=(0,n.useRef)(null),h=(0,n.useRef)([]),m=(0,n.useState)(!1),g=(m[0],m[1]),f=function(e,n){switch(n){case"id":return e.id;case"thumbnail_path":return e.thumbnail_path;case"image_path":return e.image_path}return e.image_path},y=(0,n.useCallback)(O()((function(e){g(!1);var n=h.current[e],t=d.current;if(n&&t){var o=n.getBoundingClientRect(),r=t.getBoundingClientRect(),i=o.left-r.left+t.scrollLeft;t.scrollTo({left:i,behavior:"smooth"})}g(!0)}),100),[]),v=function(e){return e.preventDefault(),!1};return(0,n.useEffect)((function(){l>-1&&!1===p&&(_(!0),y(l))}),[l]),(0,n.useEffect)((function(){h.current.forEach((function(e,n){if(e){var t=e.getAttribute("data-src");t&&(e.src=t)}}))}),[t]),r().createElement("div",{className:"".concat(p?"block":"hidden"," photogrid__gallery")},r().createElement("div",{className:"photogrid__gallery__hide"},r().createElement("button",{onClick:function(){_(!1),c(-1)},type:"button"},"×")),r().createElement("div",{className:"photogrid__prev"},r().createElement("button",{type:"button",onClick:function(e){e.preventDefault(),null!=d.current&&d.current.scrollBy({top:0,left:-1,behavior:"smooth"})},dangerouslySetInnerHTML:{__html:s?s.prev:"←"}})),r().createElement("div",{ref:d,className:"photogrid__gallery_scrollcontainer",onScroll:function(e){}},t.length&&t.map((function(e,n){return r().createElement("div",{key:"".concat(n),className:"photogrid__gallery_item"},r().createElement("img",{ref:function(e){return h.current[n]=e},"data-index":n,"data-src":"".concat(o).concat(f(e,i)),alt:"gallery item",onContextMenu:v}),!0===a(e)&&r().createElement("div",{className:"photogrid__gallery_item__overlay"},null!=e.name&&""!==e.name&&r().createElement("h4",null,e.name),null!=e.description&&""!==e.description&&r().createElement("p",null,e.description)))}))),r().createElement("div",{className:"photogrid__next"},r().createElement("button",{type:"button",onClick:function(e){e.preventDefault(),null!=d.current&&d.current.scrollBy({top:0,left:800,behavior:"smooth"})},dangerouslySetInnerHTML:{__html:s?s.next:"→"}})))},L=function(e){var t=(0,n.useState)(null),o=t[0],i=t[1],l=(0,n.useState)(!1),s=l[0],u=l[1],p=function(n){var t=e.imageSrcProperty;return c(n,t)},_=function(){if(e.onGallerySwipe){var n=e.activeKey,t=e.photos[n];t&&e.onGallerySwipe(t)}},d=function(n){39===n.keyCode?e.activeKey<e.photos.length-1&&e.setActiveKey(e.activeKey+1):37===n.keyCode&&e.activeKey>0&&e.setActiveKey(e.activeKey-1),_()},h=function(){return!1};return(0,n.useEffect)((function(){return e.activeKey>-1&&!1===s&&u(!0),document.addEventListener("keydown",d),function(){document.removeEventListener("keydown",d)}}),[e.activeKey]),r().createElement("div",{className:"custom__gallery",style:{display:!0===s?"block":"none"},onTouchStart:function(e){var n=e.touches[0].clientX;i(n)},onTouchMove:function(n){if(null!==o){var t=n.touches[0].clientX,r=o-t;r>5&&e.activeKey<e.photos.length-1&&e.setActiveKey(e.activeKey+1),r<-5&&e.activeKey>0&&e.setActiveKey(e.activeKey-1),_(),i(null)}}},r().createElement("div",{className:"clearfix"},r().createElement("button",{className:"close__gallery",onClick:function(){u(!1),e.setActiveKey(-1)},type:"button"},"×")),r().createElement("div",{className:"custom__gallery__container"},e.activeKey>0&&r().createElement("button",{onClick:function(n){n.preventDefault(),e.activeKey>0&&(e.setActiveKey(e.activeKey-1),_())},className:"previous__item",dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.prev:"←"}}),r().createElement("div",{className:"custom__gallery__images"},e.photos.length&&e.photos.map((function(n,t){return r().createElement("div",{key:"".concat(t),className:e.activeKey==t?"custom__gallery__item active":"custom__gallery__item"},r().createElement("img",{src:(o=t,i=e.activeKey,l=[i],i>0&&l.push(i-1),i<e.photos.length-1&&l.push(i+1),l.includes(o)?"".concat(e.imageSrcPrefix).concat(p(n)):""),alt:"gallery item",onContextMenu:h}),!0===a(n)&&r().createElement("div",{className:"custom__gallery__photo__overlay"},null!=n.name&&""!==n.name&&r().createElement("h4",null,n.name),null!=n.description&&""!==n.description&&r().createElement("p",null,n.description)));var o,i,l}))),e.activeKey<e.photos.length-1&&r().createElement("button",{onClick:function(n){n.preventDefault(),e.activeKey<e.photos.length-1&&(e.setActiveKey(e.activeKey+1),_())},className:"next__item",dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.next:"→"}})))},H=function(e){var t=(0,n.useState)(-1),o=t[0],l=t[1],m=function(n){!function(e,n){e.preventDefault();var t=g(e),o=t.id,r=t.rowKey,a=i({},n.rows),l=s(a[r]),c=r-1,p=[];null!=a[c]&&(p=s(a[c]));var h=u(l,o),m=h.column+1,v=l.length;l=_(l,h.column),delete a[r],l.length&&(f(l,m,v),a[r]=l),p=d(p,h,p.length+1),delete a[c],a[c]=p,a=y(a,r),n.updateRows(a),n.increaseChanges()}(n,e)},w=function(n){!function(e,n){e.preventDefault();var t=g(e),o=t.id,r=t.rowKey,a=i({},n.rows),l=s(a[r]),c=r+1,h=u(l,o),m=h.column+1,v=l.length;l=_(l,h.column),delete a[r],l.length&&(l=f(l,m,v));var w=null;null==a[c]?(h.column=1,w=[h]):(w=function(e,n){for(var t=n;t>0;t--){var o=p(e,t);e=_(e,t),e=d(e,o,o.column+1)}return e}(w=s(a[c]),w.length),w=d(w,h,1),delete a[c]),a[c]=w,l.length&&(a[r]=l),a=y(a,r),n.updateRows(a),n.increaseChanges()}(n,e)},b=function(n){!function(e,n){e.preventDefault();var t=g(e),o=t.id,r=t.rowKey,a=i({},n.rows),l=s(a[r]),c=u(l,o);if(1!==c.column){var _=p(l,c.column-1);l=h(l,_,c),delete a[r],a[r]=l,n.updateRows(a),n.increaseChanges()}}(n,e)},x=function(n){!function(e,n){e.preventDefault();var t=g(e),o=t.id,r=t.rowKey,a=i({},n.rows),l=s(a[r]),c=u(l,o);if(c.column!==l.length){var _=p(l,c.column+1);l=h(l,c,_),delete a[r],a[r]=l,n.updateRows(a),n.increaseChanges()}}(n,e)},k=function(n){!function(e,n){e.preventDefault();var t=e.currentTarget.dataset.row;if(!t)throw new TypeError("row missing from row control");var o=parseInt(t),r=o-1,a=i({},n.rows),l=s(a[o]);if(null==a[r])delete a[o],a[r]=l;else{var c=s(a[r]);a=v(a,l,o,c,r)}n.updateRows(a),n.increaseChanges()}(n,e)},E=function(n){!function(e,n){e.preventDefault();var t=e.currentTarget.dataset.row;if(!t)throw new TypeError("row missing from row control");var o=parseInt(t),r=o+1,a=i({},n.rows),l=s(a[o]);if(!a[r])throw new TypeError("There is no next row!");var c=s(a[r]);a=v(a,l,o,c,r),n.updateRows(a),n.increaseChanges()}(n,e)},S=function(n){var t=e.imageSrcProperty;return c(n,t)},C=function(n){var t,o=n.currentTarget.dataset.id;if(!o)throw new TypeError("Photo id missing");if(e.onPhotoClick&&e.onPhotoClick(n),e.useGallery){var r=(t=o,e.photos.findIndex((function(e){return e.id&&e.id==t})));r>-1&&l(r)}},K=function(e){return e.preventDefault(),!1},T=function(e){e.preventDefault();var n=e.currentTarget.previousSibling;n instanceof HTMLImageElement&&n.click()};return 0===Object.keys(e.rows).length?null:r().createElement("div",null,e.useGallery&&"scroll"===e.galleryType?r().createElement(D,{photos:e.photos,activeKey:o,setActiveKey:l,imageSrcPrefix:e.imageSrcPrefix,imageSrcProperty:e.gallerySrcProperty?e.gallerySrcProperty:"image_path",buttonArrows:e.galleryButtonArrows,onGallerySwipe:e.onGallerySwipe}):r().createElement(L,{photos:e.photos,activeKey:o,setActiveKey:l,imageSrcPrefix:e.imageSrcPrefix,imageSrcProperty:e.gallerySrcProperty?e.gallerySrcProperty:"image_path",buttonArrows:e.galleryButtonArrows,onGallerySwipe:e.onGallerySwipe}),r().createElement("div",{className:"photogrid"},Object.entries(e.rows).map((function(t,o){return t[1].length&&r().createElement("div",{key:"row-"+o,className:e.isEditing?"photogrid--photo__row editing":"photogrid--photo__row"},r().createElement(r().Fragment,null,e.isEditing&&r().createElement(j,{rowKey:t[0],moveRowUp:k,moveRowDown:E,rowCount:Object.keys(e.rows).length,buttonArrows:e.buttonArrows}),s(t[1]).map((function(i,l){return r().createElement("div",{key:"photo-"+o+l,className:"photogrid--photo__column"},r().createElement("img",{width:i.width,height:i.height,"data-id":i.id,src:"".concat(e.imageSrcPrefix).concat(S(i)),alt:i.thumbnail_path,onClick:C,className:e.useGallery?"cursor-pointer":"cursor-default",onContextMenu:K}),!e.isEditing&&!0===a(i)&&r().createElement("div",{className:"photogrid--photo_overlay",onClick:T},null!=i.name&&""!==i.name&&r().createElement("h4",null,i.name),null!=i.description&&""!==i.description&&r().createElement("p",null,i.description)),e.isEditing&&r().createElement(r().Fragment,null,r().createElement("div",{className:"photo__details"},r().createElement("p",{className:"photo__position"},"R: ",t[0]," | C: ",i.column),!0===a(i)&&r().createElement("ul",{className:"photo__details__desc"},i.name?r().createElement("li",null,i.name?i.name:"-"):null,i.description?r().createElement("li",null,i.description?i.description:"-"):null)),e.photoMenu?(0,n.cloneElement)(e.photoMenu,{photo:i}):null,r().createElement(z,{rowKey:t[0],photo:i,movePhotoDown:w,movePhotoLeft:b,movePhotoUp:m,movePhotoRight:x,rowCount:Object.keys(e.rows).length,photoCount:t[1].length,buttonArrows:e.buttonArrows})))}))))}))))},G=function(e){return r().createElement("div",{className:e.checked?"photogrid--checkbox active":"photogrid--checkbox",onClick:function(n){n.preventDefault(),e.checked?e.onClick(e.value,!1):e.onClick(e.value,!0)}})};var B;!function(e){e.id="id",e.thumbnail_path="thumbnail_path",e.image_path="image_path"}(B||(B={}))})(),module.exports=o})();
|
|
1
|
+
(()=>{var e={365:(e,n,t)=>{"use strict";t.d(n,{A:()=>l});var o=t(601),r=t.n(o),i=t(314),a=t.n(i)()(r());a.push([e.id,".photogrid--checkbox {\n background: white;\n border: 2px solid white;\n cursor: pointer;\n width: 18px;\n height: 18px;\n position: absolute;\n top: 10px;\n left: 10px;\n z-index: 10;\n}\n\n.photogrid--checkbox.active {\n background: #333;\n}\n\n.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 width: 100%;\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--row__controls > li + li {\n margin-top: 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_overlay, .photogrid__gallery_item__overlay {\n min-height: 0;\n display: none;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n background: rgba(0, 0, 0, 0.4);\n color: white;\n padding: 0.5rem;\n z-index: 200;\n}\n\n.photogrid--photo_overlay h4, .photogrid__gallery_item__overlay h4 {\n font-size: 14px;\n font-weight: 600;\n margin: 0;\n padding: 0;\n}\n\n.photogrid--photo_overlay p, .photogrid__gallery_item__overlay p {\n margin: 7px 0 0 0;\n padding: 0;\n font-size: 12px;\n}\n\n.photogrid--photo__column > .photo__position {\n position: absolute;\n top: 0;\n z-index: 20;\n left: 50%;\n transform: translateX(-50%);\n background: rgba(0, 0, 0, 0.65);\n color: white;\n padding: 0.1rem;\n}\n\n.photogrid--photo__column > img {\n display: block;\n max-width: 100%;\n max-height: 750px;\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.custom__gallery {\n display: block;\n overflow: hidden;\n position: fixed;\n left: 0;\n top: 0;\n margin: 0 auto;\n width: 100%;\n height: 100vh;\n z-index: 9000;\n background: black;\n}\n\n.custom__gallery .custom__gallery__container {\n vertical-align: middle;\n display: block;\n height: 100%;\n margin: 0 auto;\n position: relative;\n}\n\n.custom__gallery .custom__gallery__container .previous__item {\n display: none;\n height: 50px;\n width: 50px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n color: white;\n font-size: 2rem;\n left: 50px;\n cursor: pointer;\n z-index: 9001;\n}\n\n.custom__gallery .custom__gallery__container .previous__item > * {\n pointer-events: none;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images {\n height: 100vh;\n text-align: center;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item {\n position: relative;\n height: 100vh;\n display: none;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item.active {\n display: block;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img {\n display: block;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n max-width: 100%;\n height: auto;\n width: 100%;\n margin: 0 auto;\n line-height: 1;\n vertical-align: middle;\n outline: 0;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item p {\n color: white;\n margin-top: 12px;\n}\n\n.custom__gallery .custom__gallery__container .next__item {\n display: none;\n height: 50px;\n width: 50px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n color: white;\n font-size: 2rem;\n right: 50px;\n cursor: pointer;\n z-index: 9001;\n}\n\n.custom__gallery .custom__gallery__container .next__item > * {\n pointer-events: none;\n}\n\n.custom__gallery .close__gallery {\n position: absolute;\n z-index: 9999;\n right: 0;\n background: none;\n color: white;\n border: none;\n font-size: 3rem;\n float: right;\n font-weight: 300;\n width: 73px;\n height: 73px;\n overflow: hidden;\n text-decoration: none;\n}\n\n.custom__gallery .close__gallery:active, .custom__gallery .close__gallery:focus {\n text-decoration: none;\n}\n\n\n.photogrid__gallery {\n width: 100%;\n text-align: center;\n overflow: hidden;\n position: fixed;\n height: 100vh;\n left: 0;\n top: 0;\n background-color: black;\n z-index: 400;\n margin: 0 auto;\n}\n\n.photogrid__gallery_scrollcontainer {\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n scroll-snap-type: x mandatory;\n scroll-behavior: smooth;\n -webkit-overflow-scrolling: touch;\n height: 100vh;\n margin: 0 auto;\n width: 100%;\n}\n\n.photogrid__gallery_scrollcontainer::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n}\n\n.photogrid__gallery_scrollcontainer::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 10px;\n}\n\n.photogrid__gallery_scrollcontainer::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.photogrid__gallery_item {\n width: 100%;\n height: 100vh;\n scroll-snap-align: start;\n transform-origin: center;\n transform: scale(1);\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n}\n\n.photogrid__gallery_item +.photogrid__gallery_item {\n margin-left: 1rem;\n}\n\n.photogrid__gallery_item > img {\n width: 100%;\n max-width: 100%;\n height: auto;\n display: block;\n margin: 0 auto;\n}\n\n.photogrid__gallery__hide {\n text-align: right;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n padding-right: 0.5rem;\n}\n\n.photogrid__gallery__hide > button {\n color: white;\n font-weight: 300;\n width: 73px;\n height: 73px;\n font-size: 3rem;\n background: none;\n border: none;\n}\n\n.photogrid__prev, .photogrid__next {\n display: none;\n width: auto;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n color: white;\n z-index: 401;\n font-size: 2rem;\n}\n\n.photogrid__prev > button > *, .photogrid__next > button > * {\n pointer-events: none;\n}\n\n.photogrid__prev {\n left: 1.25rem;\n}\n\n.photogrid__next {\n right: 1.25rem;\n}\n\n@media only screen and (min-width: 768px) {\n .custom__gallery .custom__gallery__container .previous__item, .custom__gallery .custom__gallery__container .next__item {\n display: inline-block;\n }\n\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@media only screen and (min-width: 1024px) {\n .photogrid__prev, .photogrid__next {\n display: block;\n }\n}\n\n\n@media only screen and (min-width: 1280px) {\n .custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img:hover + .custom__gallery__photo__overlay {\n display: block;\n }\n .photogrid--photo__column img:hover + .photogrid--photo_overlay {\n display: block;\n }\n .photogrid__gallery_item > img:hover .photogrid__gallery_item__overlay {\n display: block;\n }\n .photogrid__gallery_scrollcontainer {\n width: 91.6%;\n }\n}\n\n@media only screen and (min-width: 1400px) {\n .custom__gallery .custom__gallery__container {\n width: 92%;\n }\n\n .custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img {\n max-width: 100%;\n height: 100%;\n width: auto;\n }\n}\n\n@media only screen and (min-width: 1536px) {\n .photogrid__gallery_scrollcontainer {\n width: 75%;\n }\n}\n",""]);const l=a},314:e=>{"use strict";e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",o=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),o&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),o&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,o,r,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(o)for(var l=0;l<this.length;l++){var c=this[l][0];null!=c&&(a[c]=!0)}for(var s=0;s<e.length;s++){var u=[].concat(e[s]);o&&a[u[0]]||(void 0!==i&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=i),t&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=t):u[2]=t),r&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=r):u[4]="".concat(r)),n.push(u))}},n}},601:e=>{"use strict";e.exports=function(e){return e[1]}},181:(e,n,t)=>{var o=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,i=/^0b[01]+$/i,a=/^0o[0-7]+$/i,l=parseInt,c="object"==typeof t.g&&t.g&&t.g.Object===Object&&t.g,s="object"==typeof self&&self&&self.Object===Object&&self,u=c||s||Function("return this")(),p=Object.prototype.toString,d=Math.max,_=Math.min,m=function(){return u.Date.now()};function h(e){var n=typeof e;return!!e&&("object"==n||"function"==n)}function g(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&"[object Symbol]"==p.call(e)}(e))return NaN;if(h(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=h(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(o,"");var t=i.test(e);return t||a.test(e)?l(e.slice(2),t?2:8):r.test(e)?NaN:+e}e.exports=function(e,n,t){var o,r,i,a,l,c,s=0,u=!1,p=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function y(n){var t=o,i=r;return o=r=void 0,s=n,a=e.apply(i,t)}function v(e){var t=e-c;return void 0===c||t>=n||t<0||p&&e-s>=i}function w(){var e=m();if(v(e))return b(e);l=setTimeout(w,function(e){var t=n-(e-c);return p?_(t,i-(e-s)):t}(e))}function b(e){return l=void 0,f&&o?y(e):(o=r=void 0,a)}function x(){var e=m(),t=v(e);if(o=arguments,r=this,c=e,t){if(void 0===l)return function(e){return s=e,l=setTimeout(w,n),u?y(e):a}(c);if(p)return l=setTimeout(w,n),y(c)}return void 0===l&&(l=setTimeout(w,n)),a}return n=g(n)||0,h(t)&&(u=!!t.leading,i=(p="maxWait"in t)?d(g(t.maxWait)||0,n):i,f="trailing"in t?!!t.trailing:f),x.cancel=function(){void 0!==l&&clearTimeout(l),s=0,o=c=r=l=void 0},x.flush=function(){return void 0===l?a:b(m())},x}},72:e=>{"use strict";var n=[];function t(e){for(var t=-1,o=0;o<n.length;o++)if(n[o].identifier===e){t=o;break}return t}function o(e,o){for(var i={},a=[],l=0;l<e.length;l++){var c=e[l],s=o.base?c[0]+o.base:c[0],u=i[s]||0,p="".concat(s," ").concat(u);i[s]=u+1;var d=t(p),_={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==d)n[d].references++,n[d].updater(_);else{var m=r(_,o);o.byIndex=l,n.splice(l,0,{identifier:p,updater:m,references:1})}a.push(p)}return a}function r(e,n){var t=n.domAPI(n);return t.update(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;t.update(e=n)}else t.remove()}}e.exports=function(e,r){var i=o(e=e||[],r=r||{});return function(e){e=e||[];for(var a=0;a<i.length;a++){var l=t(i[a]);n[l].references--}for(var c=o(e,r),s=0;s<i.length;s++){var u=t(i[s]);0===n[u].references&&(n[u].updater(),n.splice(u,1))}i=c}}},659:e=>{"use strict";var n={};e.exports=function(e,t){var o=function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);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(t)}},540:e=>{"use strict";e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},56:(e,n,t)=>{"use strict";e.exports=function(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},825:e=>{"use strict";e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var n=e.insertStyleElement(e);return{update:function(t){!function(e,n,t){var o="";t.supports&&(o+="@supports (".concat(t.supports,") {")),t.media&&(o+="@media ".concat(t.media," {"));var r=void 0!==t.layer;r&&(o+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),o+=t.css,r&&(o+="}"),t.media&&(o+="}"),t.supports&&(o+="}");var i=t.sourceMap;i&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),n.styleTagTransform(o,e,n.options)}(n,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},113:e=>{"use strict";e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}}},n={};function t(o){var r=n[o];if(void 0!==r)return r.exports;var i=n[o]={id:o,exports:{}};return e[o](i,i.exports,t),i.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.nc=void 0;var o={};(()=>{"use strict";t.r(o),t.d(o,{Checkbox:()=>H,PhotoGrid:()=>D,sortPhotosIntoRows:()=>a});const e=require("react");var n=t.n(e),r=function(){return r=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},r.apply(this,arguments)},i=function(e){return null!=e.name&&""!==e.name||null!=e.description&&""!==e.description},a=function(e){for(var n={},t=0,o=e;t<o.length;t++){var r=o[t],i=r.row;n[i]||(n[i]=[]),n[i].push(r)}return n},l=function(e,n){switch(n){case"id":return e.id;case"thumbnail_path":return e.thumbnail_path;case"image_path":return e.image_path}return e.image_path},c=function(e){return e.sort((function(e,n){return Math.floor(e.column)-Math.floor(n.column)}))},s=function(e,n){var t=e.find((function(e){return e.id===n}));if(void 0===t)throw new TypeError("No photo was found in this row for that id");return t},u=function(e,n){var t=e.find((function(e){return e.column===n}));if(void 0===t)throw new TypeError("No photo was found in this row for that column");return t},p=function(e,n){return e.filter((function(e){return e.column!==n}))},d=function(e,n,t){return void 0===e&&(e=[]),n.column=t,e.push(n),e},_=function(e,n,t){var o=n.column,r=t.column;return e=p(e,o),e=p(e,r),e=d(e,n,r),d(e,t,o)},m=function(e){return"string"==typeof e&&(e=parseInt(e)),e},h=function(e){var n=e.currentTarget,t=n.dataset.id,o=n.dataset.row;if(!t||!o)throw new TypeError("id or row key missing from photo control");return{id:t,rowKey:parseInt(o)}},g=function(e,n,t){for(var o=n;o<=t;o++){var r=u(e,o);e=p(e,o),e=d(e,r,r.column-1)}return e},f=function(e,n){return null==e[n]&&Object.entries(e).map((function(t){var o=t[0],r=t[1],i=parseInt(o);i>n&&(delete e[i],e[i-1]=r)})),e},y=function(e,n,t,o,r){return delete e[r],delete e[t],e[r]=n,e[t]=o,e},v=t(72),w=t.n(v),b=t(825),x=t.n(b),k=t(659),E=t.n(k),S=t(56),A=t.n(S),C=t(540),K=t.n(C),T=t(113),N=t.n(T),P=t(365),M={};M.styleTagTransform=N(),M.setAttributes=A(),M.insert=E().bind(null,"head"),M.domAPI=x(),M.insertStyleElement=K(),w()(P.A,M),P.A&&P.A.locals&&P.A.locals;const I=function(e){return n().createElement("ul",{className:"photogrid--row__controls"},m(e.rowKey)>1&&n().createElement("li",null,n().createElement("button",{className:"row__control move__row__up",onClick:e.moveRowUp,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.up:"↑"}})),m(e.rowKey)<e.rowCount&&n().createElement("li",null,n().createElement("button",{className:"row__control move__row__down",onClick:e.moveRowDown,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.down:"↓"}})))},j=function(e){return n().createElement("ul",{className:"photogrid--photo__controls"},e.photo.column>1&&n().createElement("li",null,n().createElement("button",{type:"button",className:"photo__control move__photo__left",onClick:e.movePhotoLeft,"data-id":e.photo.id,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.left:"←"}})),m(e.rowKey)>1&&n().createElement("li",null,n().createElement("button",{type:"button",className:"photo__control move__photo__up",onClick:e.movePhotoUp,"data-id":e.photo.id,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.up:"↑"}})),m(e.rowKey)<e.rowCount||m(e.rowKey)===e.rowCount&&e.photoCount>1?n().createElement("li",null,n().createElement("button",{type:"button",className:"photo__control move__photo__down",onClick:e.movePhotoDown,"data-id":e.photo.id,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.down:"↓"}})):null,e.photo.column<e.photoCount&&n().createElement("li",null,n().createElement("button",{type:"button",className:"photo__control move__photo__right",onClick:e.movePhotoRight,"data-id":e.photo.id,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.right:"→"}})))};var O=t(181),z=t.n(O);const R=function(t){var o=t.photos,r=t.imageSrcPrefix,a=t.imageSrcProperty,l=t.onGallerySwipe,c=t.activeKey,s=t.setActiveKey,u=t.buttonArrows,p=(0,e.useState)(!1),d=p[0],_=p[1],m=(0,e.useRef)(null),h=(0,e.useRef)([]),g=function(e,n){switch(n){case"id":return e.id;case"thumbnail_path":return e.thumbnail_path;case"image_path":return e.image_path}return e.image_path},f=(0,e.useCallback)(z()((function(e){var n=h.current[e],t=m.current;if(n&&t){var o=n.getBoundingClientRect(),r=t.getBoundingClientRect(),i=o.left-r.left+t.scrollLeft;t.scrollLeft=i}}),50),[]),y=function(e){return e.preventDefault(),!1},v=(0,e.useCallback)((function(e){e.forEach((function(e){if(e.isIntersecting){var n=e.target,t=n.getAttribute("data-src"),r=n.getAttribute("data-index");if(t&&(n.src=t),r){var i=h.current[parseInt(r)-1],a=h.current[parseInt(r)+1];if(i&&!i.src){var u=i.getAttribute("data-src");u&&(i.src=u)}if(a&&!a.src){var p=a.getAttribute("data-src");p&&(a.src=p)}s(parseInt(r)),function(){if(l){var e=o[c];e&&l(e)}}()}}}))}),[]);return(0,e.useEffect)((function(){var e=new IntersectionObserver(v,{root:null,rootMargin:"0px",threshold:.1});return h.current.forEach((function(n){n&&e.observe(n)})),function(){h.current.forEach((function(n){n&&e.unobserve(n)}))}}),[v]),(0,e.useEffect)((function(){c>-1&&!1===d&&(_(!0),f(c))}),[c]),n().createElement("div",{className:"".concat(d?"block":"hidden"," photogrid__gallery")},n().createElement("div",{className:"photogrid__gallery__hide"},n().createElement("button",{onClick:function(){_(!1),s(-1)},type:"button"},"×")),n().createElement("div",{className:"photogrid__prev"},n().createElement("button",{type:"button",onClick:function(e){e.preventDefault(),null!=m.current&&m.current.scrollBy({top:0,left:-1,behavior:"smooth"})},dangerouslySetInnerHTML:{__html:u?u.prev:"←"}})),n().createElement("div",{ref:m,className:"photogrid__gallery_scrollcontainer"},o.length&&o.map((function(e,t){return n().createElement("div",{key:"".concat(t),className:"photogrid__gallery_item"},n().createElement("img",{ref:function(e){return h.current[t]=e},"data-index":t,"data-src":"".concat(r).concat(g(e,a)),alt:"gallery item",onContextMenu:y}),!0===i(e)&&n().createElement("div",{className:"photogrid__gallery_item__overlay"},null!=e.name&&""!==e.name&&n().createElement("h4",null,e.name),null!=e.description&&""!==e.description&&n().createElement("p",null,e.description)))}))),n().createElement("div",{className:"photogrid__next"},n().createElement("button",{type:"button",onClick:function(e){e.preventDefault(),null!=m.current&&m.current.scrollBy({top:0,left:800,behavior:"smooth"})},dangerouslySetInnerHTML:{__html:u?u.next:"→"}})))},L=function(t){var o=(0,e.useState)(null),r=o[0],a=o[1],c=(0,e.useState)(!1),s=c[0],u=c[1],p=function(e){var n=t.imageSrcProperty;return l(e,n)},d=function(){if(t.onGallerySwipe){var e=t.activeKey,n=t.photos[e];n&&t.onGallerySwipe(n)}},_=function(e){39===e.keyCode?t.activeKey<t.photos.length-1&&t.setActiveKey(t.activeKey+1):37===e.keyCode&&t.activeKey>0&&t.setActiveKey(t.activeKey-1),d()},m=function(){return!1};return(0,e.useEffect)((function(){return t.activeKey>-1&&!1===s&&u(!0),document.addEventListener("keydown",_),function(){document.removeEventListener("keydown",_)}}),[t.activeKey]),n().createElement("div",{className:"custom__gallery",style:{display:!0===s?"block":"none"},onTouchStart:function(e){var n=e.touches[0].clientX;a(n)},onTouchMove:function(e){if(null!==r){var n=e.touches[0].clientX,o=r-n;o>5&&t.activeKey<t.photos.length-1&&t.setActiveKey(t.activeKey+1),o<-5&&t.activeKey>0&&t.setActiveKey(t.activeKey-1),d(),a(null)}}},n().createElement("div",{className:"clearfix"},n().createElement("button",{className:"close__gallery",onClick:function(){u(!1),t.setActiveKey(-1)},type:"button"},"×")),n().createElement("div",{className:"custom__gallery__container"},t.activeKey>0&&n().createElement("button",{onClick:function(e){e.preventDefault(),t.activeKey>0&&(t.setActiveKey(t.activeKey-1),d())},className:"previous__item",dangerouslySetInnerHTML:{__html:t.buttonArrows?t.buttonArrows.prev:"←"}}),n().createElement("div",{className:"custom__gallery__images"},t.photos.length&&t.photos.map((function(e,o){return n().createElement("div",{key:"".concat(o),className:t.activeKey==o?"custom__gallery__item active":"custom__gallery__item"},n().createElement("img",{src:(r=o,a=t.activeKey,l=[a],a>0&&l.push(a-1),a<t.photos.length-1&&l.push(a+1),l.includes(r)?"".concat(t.imageSrcPrefix).concat(p(e)):""),alt:"gallery item",onContextMenu:m}),!0===i(e)&&n().createElement("div",{className:"custom__gallery__photo__overlay"},null!=e.name&&""!==e.name&&n().createElement("h4",null,e.name),null!=e.description&&""!==e.description&&n().createElement("p",null,e.description)));var r,a,l}))),t.activeKey<t.photos.length-1&&n().createElement("button",{onClick:function(e){e.preventDefault(),t.activeKey<t.photos.length-1&&(t.setActiveKey(t.activeKey+1),d())},className:"next__item",dangerouslySetInnerHTML:{__html:t.buttonArrows?t.buttonArrows.next:"→"}})))},D=function(t){var o=(0,e.useState)(-1),a=o[0],m=o[1],v=function(e){!function(e,n){e.preventDefault();var t=h(e),o=t.id,i=t.rowKey,a=r({},n.rows),l=c(a[i]),u=i-1,_=[];null!=a[u]&&(_=c(a[u]));var m=s(l,o),y=m.column+1,v=l.length;l=p(l,m.column),delete a[i],l.length&&(g(l,y,v),a[i]=l),_=d(_,m,_.length+1),delete a[u],a[u]=_,a=f(a,i),n.updateRows(a),n.increaseChanges()}(e,t)},w=function(e){!function(e,n){e.preventDefault();var t=h(e),o=t.id,i=t.rowKey,a=r({},n.rows),l=c(a[i]),_=i+1,m=s(l,o),y=m.column+1,v=l.length;l=p(l,m.column),delete a[i],l.length&&(l=g(l,y,v));var w=null;null==a[_]?(m.column=1,w=[m]):(w=function(e,n){for(var t=n;t>0;t--){var o=u(e,t);e=p(e,t),e=d(e,o,o.column+1)}return e}(w=c(a[_]),w.length),w=d(w,m,1),delete a[_]),a[_]=w,l.length&&(a[i]=l),a=f(a,i),n.updateRows(a),n.increaseChanges()}(e,t)},b=function(e){!function(e,n){e.preventDefault();var t=h(e),o=t.id,i=t.rowKey,a=r({},n.rows),l=c(a[i]),p=s(l,o);if(1!==p.column){var d=u(l,p.column-1);l=_(l,d,p),delete a[i],a[i]=l,n.updateRows(a),n.increaseChanges()}}(e,t)},x=function(e){!function(e,n){e.preventDefault();var t=h(e),o=t.id,i=t.rowKey,a=r({},n.rows),l=c(a[i]),p=s(l,o);if(p.column!==l.length){var d=u(l,p.column+1);l=_(l,p,d),delete a[i],a[i]=l,n.updateRows(a),n.increaseChanges()}}(e,t)},k=function(e){!function(e,n){e.preventDefault();var t=e.currentTarget.dataset.row;if(!t)throw new TypeError("row missing from row control");var o=parseInt(t),i=o-1,a=r({},n.rows),l=c(a[o]);if(null==a[i])delete a[o],a[i]=l;else{var s=c(a[i]);a=y(a,l,o,s,i)}n.updateRows(a),n.increaseChanges()}(e,t)},E=function(e){!function(e,n){e.preventDefault();var t=e.currentTarget.dataset.row;if(!t)throw new TypeError("row missing from row control");var o=parseInt(t),i=o+1,a=r({},n.rows),l=c(a[o]);if(!a[i])throw new TypeError("There is no next row!");var s=c(a[i]);a=y(a,l,o,s,i),n.updateRows(a),n.increaseChanges()}(e,t)},S=function(e){var n=t.imageSrcProperty;return l(e,n)},A=function(e){var n,o=e.currentTarget.dataset.id;if(!o)throw new TypeError("Photo id missing");if(t.onPhotoClick&&t.onPhotoClick(e),t.useGallery){var r=(n=o,t.photos.findIndex((function(e){return e.id&&e.id==n})));r>-1&&m(r)}};return 0===Object.keys(t.rows).length?null:n().createElement("div",null,t.useGallery&&"scroll"===t.galleryType?n().createElement(R,{photos:t.photos,activeKey:a,setActiveKey:m,imageSrcPrefix:t.imageSrcPrefix,imageSrcProperty:t.gallerySrcProperty?t.gallerySrcProperty:"image_path",buttonArrows:t.galleryButtonArrows,onGallerySwipe:t.onGallerySwipe}):n().createElement(L,{photos:t.photos,activeKey:a,setActiveKey:m,imageSrcPrefix:t.imageSrcPrefix,imageSrcProperty:t.gallerySrcProperty?t.gallerySrcProperty:"image_path",buttonArrows:t.galleryButtonArrows,onGallerySwipe:t.onGallerySwipe}),n().createElement("div",{className:"photogrid"},Object.entries(t.rows).map((function(o,r){return o[1].length&&n().createElement("div",{key:"row-"+r,className:t.isEditing?"photogrid--photo__row editing":"photogrid--photo__row"},n().createElement(n().Fragment,null,t.isEditing&&n().createElement(I,{rowKey:o[0],moveRowUp:k,moveRowDown:E,rowCount:Object.keys(t.rows).length,buttonArrows:t.buttonArrows}),c(o[1]).map((function(a,l){return n().createElement("div",{key:"photo-"+r+l,className:"photogrid--photo__column"},n().createElement("img",{width:a.width,height:a.height,"data-id":a.id,src:"".concat(t.imageSrcPrefix).concat(S(a)),alt:a.thumbnail_path,onClick:A,className:t.useGallery?"cursor-pointer":"cursor-default"}),!t.isEditing&&!0===i(a)&&n().createElement("div",{className:"photogrid--photo_overlay"},null!=a.name&&""!==a.name&&n().createElement("h4",null,a.name),null!=a.description&&""!==a.description&&n().createElement("p",null,a.description)),t.isEditing?n().createElement(n().Fragment,null,n().createElement("p",{className:"photo__position"},"R: ",o[0]," | C: ",a.column),t.photoMenu?(0,e.cloneElement)(t.photoMenu,{photo:a}):null,n().createElement(j,{rowKey:o[0],photo:a,movePhotoDown:w,movePhotoLeft:b,movePhotoUp:v,movePhotoRight:x,rowCount:Object.keys(t.rows).length,photoCount:o[1].length,buttonArrows:t.buttonArrows})):t.photoActions?(0,e.cloneElement)(t.photoActions,{photo:a}):null)}))))}))))},H=function(e){return n().createElement("div",{className:e.checked?"photogrid--checkbox active":"photogrid--checkbox",onClick:function(n){n.preventDefault(),e.checked?e.onClick(e.value,!1):e.onClick(e.value,!0)}})}})(),module.exports=o})();
|
package/package.json
CHANGED
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "react-editable-photo-grid",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "An editable photo grid built with React and Typescript",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"files": [
|
|
7
|
-
"dist",
|
|
8
|
-
"src"
|
|
9
|
-
],
|
|
10
|
-
"scripts": {
|
|
11
|
-
"build": "webpack"
|
|
12
|
-
},
|
|
13
|
-
"peerDependencies": {
|
|
14
|
-
"@types/node": "^20.14.10",
|
|
15
|
-
"react": "^17.0.0 || ^18.0.0",
|
|
16
|
-
"react-dom": "^17.0.0 || ^18.0.0"
|
|
17
|
-
},
|
|
18
|
-
"devDependencies": {
|
|
19
|
-
"@babel/core": "^7.24.9",
|
|
20
|
-
"@babel/preset-env": "^7.24.8",
|
|
21
|
-
"@babel/preset-react": "^7.24.7",
|
|
22
|
-
"@babel/preset-typescript": "^7.24.7",
|
|
23
|
-
"@types/lodash.debounce": "^4.0.9",
|
|
24
|
-
"babel-loader": "^9.1.3",
|
|
25
|
-
"css-loader": "^7.1.2",
|
|
26
|
-
"style-loader": "^4.0.0",
|
|
27
|
-
"ts-loader": "^9.5.1",
|
|
28
|
-
"typescript": "^5.5.3",
|
|
29
|
-
"webpack": "^5.93.0",
|
|
30
|
-
"webpack-cli": "^5.1.4"
|
|
31
|
-
},
|
|
32
|
-
"repository": {
|
|
33
|
-
"type": "git",
|
|
34
|
-
"url": "git+ssh://git@github.com/DominicHart/react-editable-photo-grid.git"
|
|
35
|
-
},
|
|
36
|
-
"keywords": [
|
|
37
|
-
"photo",
|
|
38
|
-
"grid",
|
|
39
|
-
"react",
|
|
40
|
-
"typescript"
|
|
41
|
-
],
|
|
42
|
-
"author": "Dominic Hart",
|
|
43
|
-
"license": "GPL-3.0",
|
|
44
|
-
"bugs": {
|
|
45
|
-
"url": "https://github.com/DominicHart/react-editable-photo-grid/issues"
|
|
46
|
-
},
|
|
47
|
-
"homepage": "https://github.com/DominicHart/react-editable-photo-grid#readme",
|
|
48
|
-
"dependencies": {
|
|
49
|
-
"@types/react": "^18.3.3",
|
|
50
|
-
"lodash.debounce": "^4.0.8",
|
|
51
|
-
"react": "^17.0.0 || ^18.0.0",
|
|
52
|
-
"react-dom": "^17.0.0 || ^18.0.0"
|
|
53
|
-
}
|
|
54
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "react-editable-photo-grid",
|
|
3
|
+
"version": "3.0.0",
|
|
4
|
+
"description": "An editable photo grid built with React and Typescript",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"files": [
|
|
7
|
+
"dist",
|
|
8
|
+
"src"
|
|
9
|
+
],
|
|
10
|
+
"scripts": {
|
|
11
|
+
"build": "webpack"
|
|
12
|
+
},
|
|
13
|
+
"peerDependencies": {
|
|
14
|
+
"@types/node": "^20.14.10",
|
|
15
|
+
"react": "^17.0.0 || ^18.0.0",
|
|
16
|
+
"react-dom": "^17.0.0 || ^18.0.0"
|
|
17
|
+
},
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"@babel/core": "^7.24.9",
|
|
20
|
+
"@babel/preset-env": "^7.24.8",
|
|
21
|
+
"@babel/preset-react": "^7.24.7",
|
|
22
|
+
"@babel/preset-typescript": "^7.24.7",
|
|
23
|
+
"@types/lodash.debounce": "^4.0.9",
|
|
24
|
+
"babel-loader": "^9.1.3",
|
|
25
|
+
"css-loader": "^7.1.2",
|
|
26
|
+
"style-loader": "^4.0.0",
|
|
27
|
+
"ts-loader": "^9.5.1",
|
|
28
|
+
"typescript": "^5.5.3",
|
|
29
|
+
"webpack": "^5.93.0",
|
|
30
|
+
"webpack-cli": "^5.1.4"
|
|
31
|
+
},
|
|
32
|
+
"repository": {
|
|
33
|
+
"type": "git",
|
|
34
|
+
"url": "git+ssh://git@github.com/DominicHart/react-editable-photo-grid.git"
|
|
35
|
+
},
|
|
36
|
+
"keywords": [
|
|
37
|
+
"photo",
|
|
38
|
+
"grid",
|
|
39
|
+
"react",
|
|
40
|
+
"typescript"
|
|
41
|
+
],
|
|
42
|
+
"author": "Dominic Hart",
|
|
43
|
+
"license": "GPL-3.0",
|
|
44
|
+
"bugs": {
|
|
45
|
+
"url": "https://github.com/DominicHart/react-editable-photo-grid/issues"
|
|
46
|
+
},
|
|
47
|
+
"homepage": "https://github.com/DominicHart/react-editable-photo-grid#readme",
|
|
48
|
+
"dependencies": {
|
|
49
|
+
"@types/react": "^18.3.3",
|
|
50
|
+
"lodash.debounce": "^4.0.8",
|
|
51
|
+
"react": "^17.0.0 || ^18.0.0",
|
|
52
|
+
"react-dom": "^17.0.0 || ^18.0.0"
|
|
53
|
+
}
|
|
54
|
+
}
|