@bigbinary/neeto-image-uploader-frontend 2.3.6 → 2.3.7

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.
@@ -1,1982 +1,38 @@
1
- import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
2
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
- import require$$0, { useState, useEffect, useRef, useCallback, createElement } from 'react';
5
- import { findBy, isPresent, noop } from '@bigbinary/neeto-cist';
6
- import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
7
- import NeetoUIModal from '@bigbinary/neetoui/Modal';
8
- import Button from '@bigbinary/neetoui/Button';
9
- import Tab from '@bigbinary/neetoui/Tab';
10
- import Spinner from '@bigbinary/neetoui/Spinner';
11
- import Toastr from '@bigbinary/neetoui/Toastr';
12
- import Typography from '@bigbinary/neetoui/Typography';
13
- import { mergeLeft, mergeRight, identity, prop, equals } from 'ramda';
14
- import { useTranslation, Trans } from 'react-i18next';
15
- import { O as OPTIONS, i as isNilOrEmpty, D as DEFAULT_CROP_CONFIG, a as isItemsCenter, o as onImageLoaded, g as getCloudFlareCroppedURL, b as getImageKitCroppedURL, c as getCropValues, I as IMAGES_PER_PAGE, d as INFINITE_SCROLLER_SIZES, e as INFINITE_SCROLLER_STYLE, T as TABS, A as ASSETS_DESTROY_URL, f as ASSETS_FETCH_URL, U as UNSPLASH_DEFAULT_NAME, h as UNSPLASH_DEFAULT_REQUEST_CONFIG, j as DEFAULT_UPLOAD_CONFIG, u as useUploadDropzone, k as UNSPLASH_URL } from './utils-fa0fa918.js';
16
- import { u as useCreateBlob, a as useImageUploader, g as generateASCIIFileName } from './useImageUploader-1c60ac64.js';
17
- import { I as IS_DEVELOPMENT_OR_HEROKU_ENV, C as CLOUD_FLARE } from './index-8605e11c.js';
18
- import classnames from 'classnames';
19
- import LeftArrow from '@bigbinary/neeto-icons/LeftArrow';
20
- import { useMutation, useInfiniteQuery, useQueryClient, keepPreviousData } from '@tanstack/react-query';
21
- import axios from 'axios';
22
- import { useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
23
- import { withEventTargetValue, hasPermission } from '@bigbinary/neeto-commons-frontend/utils';
24
- import Input from '@bigbinary/neetoui/Input';
25
- import Switch from '@bigbinary/neetoui/Switch';
26
- import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
27
- import { Q as QUERY_KEYS, A as ASSETS_STALE_TIME, U as UNSPLASH_STALE_TIME } from './query-dcc7b81b.js';
28
- import MenuHorizontal from '@bigbinary/neeto-icons/MenuHorizontal';
29
- import { VIEW_ROLES_PERMISSION } from '@bigbinary/neeto-team-members-frontend/constants';
30
- import Alert from '@bigbinary/neetoui/Alert';
31
- import Dropdown from '@bigbinary/neetoui/Dropdown';
32
- import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
33
- import _regeneratorRuntime from '@babel/runtime/regenerator';
1
+ import '@babel/runtime/helpers/objectWithoutProperties';
2
+ import '@babel/runtime/helpers/defineProperty';
3
+ import '@babel/runtime/helpers/slicedToArray';
4
+ import 'react';
5
+ import '@bigbinary/neeto-cist';
6
+ import '@bigbinary/neeto-commons-frontend/initializers';
7
+ import '@bigbinary/neetoui/Modal';
8
+ import '@bigbinary/neetoui/Button';
9
+ import '@bigbinary/neetoui/Tab';
10
+ import '@bigbinary/neetoui/Spinner';
11
+ import '@bigbinary/neetoui/Toastr';
12
+ import '@bigbinary/neetoui/Typography';
13
+ import 'ramda';
14
+ import 'react-i18next';
15
+ import './utils-fa0fa918.js';
16
+ export { M as default } from './index-60324d58.js';
17
+ import './useImageUploader-1c60ac64.js';
18
+ import './index-8605e11c.js';
19
+ import 'react/jsx-runtime';
34
20
  import 'react-dropzone';
35
21
  import 'i18next';
22
+ import 'classnames';
23
+ import '@bigbinary/neeto-icons/LeftArrow';
24
+ import '@tanstack/react-query';
25
+ import 'axios';
26
+ import '@bigbinary/neeto-commons-frontend/react-utils';
27
+ import '@bigbinary/neeto-commons-frontend/utils';
28
+ import '@bigbinary/neetoui/Input';
29
+ import '@bigbinary/neetoui/Switch';
30
+ import './query-dcc7b81b.js';
31
+ import '@bigbinary/neeto-icons/MenuHorizontal';
32
+ import '@bigbinary/neeto-team-members-frontend/constants';
33
+ import '@bigbinary/neetoui/Alert';
34
+ import '@bigbinary/neetoui/Dropdown';
35
+ import '@babel/runtime/helpers/asyncToGenerator';
36
+ import '@babel/runtime/regenerator';
36
37
  import '@rails/activestorage';
37
-
38
- var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
39
-
40
- var css$2 = ".niu-modal {\n width: 95vw !important;\n height: 75vh !important;\n max-width: 1152px !important;\n max-height: 576px !important;\n position: relative !important;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX21vZGFsLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0E7RUFDRSxzQkFBQTtFQUNBLHVCQUFBO0VBQ0EsNEJBQUE7RUFDQSw0QkFBQTtFQUNBLDZCQUFBO0FBRkYiLCJzb3VyY2VzQ29udGVudCI6WyIvL0Fic3RyYWN0c1xuQGltcG9ydCBcIi4uL2Fic3RyYWN0cy92YXJpYWJsZXNcIjtcblxuLm5pdS1tb2RhbCB7XG4gIHdpZHRoOiAkbml1LW1vZGFsLXdpZHRoICFpbXBvcnRhbnQ7XG4gIGhlaWdodDogJG5pdS1tb2RhbC1oZWlnaHQgIWltcG9ydGFudDtcbiAgbWF4LXdpZHRoOiAkbml1LW1vZGFsLW1heC13aWR0aCAhaW1wb3J0YW50O1xuICBtYXgtaGVpZ2h0OiAkbml1LW1vZGFsLW1heC1oZWlnaHQgIWltcG9ydGFudDtcbiAgcG9zaXRpb246IHJlbGF0aXZlICFpbXBvcnRhbnQ7XG59XG4iXX0= */";
41
- n(css$2,{});
42
-
43
- var createOptions = function createOptions() {
44
- var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
45
- return OPTIONS.map(function (option) {
46
- return mergeLeft(findBy({
47
- key: option.key
48
- }, options), option);
49
- });
50
- };
51
-
52
- var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
53
-
54
- function getDefaultExportFromCjs (x) {
55
- return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
56
- }
57
-
58
- function getAugmentedNamespace(n) {
59
- if (n.__esModule) return n;
60
- var f = n.default;
61
- if (typeof f == "function") {
62
- var a = function a () {
63
- if (this instanceof a) {
64
- return Reflect.construct(f, arguments, this.constructor);
65
- }
66
- return f.apply(this, arguments);
67
- };
68
- a.prototype = f.prototype;
69
- } else a = {};
70
- Object.defineProperty(a, '__esModule', {value: true});
71
- Object.keys(n).forEach(function (k) {
72
- var d = Object.getOwnPropertyDescriptor(n, k);
73
- Object.defineProperty(a, k, d.get ? d : {
74
- enumerable: true,
75
- get: function () {
76
- return n[k];
77
- }
78
- });
79
- });
80
- return a;
81
- }
82
-
83
- var ReactCrop_min = {exports: {}};
84
-
85
- ReactCrop_min.exports;
86
-
87
- (function (module, exports) {
88
- !function(e,t){module.exports=t(require$$0);}(commonjsGlobal,(e=>(()=>{var t={899:t=>{t.exports=e;}},n={};function o(e){var r=n[e];if(void 0!==r)return r.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,o),i.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]});},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0});};var r={};return (()=>{o.r(r),o.d(r,{Component:()=>u,areCropsEqual:()=>h,centerCrop:()=>d,clamp:()=>a,containCrop:()=>p,convertToPercentCrop:()=>c,convertToPixelCrop:()=>l,default:()=>u,defaultCrop:()=>i,makeAspectCrop:()=>s,nudgeCrop:()=>g});var e=o(899),t=o.n(e);function n(e){var t,o,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(o=n(e[t]))&&(r&&(r+=" "),r+=o);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}const i={x:0,y:0,width:0,height:0,unit:"px"};function a(e,t,n){return Math.min(Math.max(e,t),n)}function h(e,t){return e.width===t.width&&e.height===t.height&&e.x===t.x&&e.y===t.y&&e.unit===t.unit}function s(e,t,n,o){const r=l(e,n,o);return e.width&&(r.height=r.width/t),e.height&&(r.width=r.height*t),r.y+r.height>o&&(r.height=o-r.y,r.width=r.height*t),r.x+r.width>n&&(r.width=n-r.x,r.height=r.width/t),"%"===e.unit?c(r,n,o):r}function d(e,t,n){const o=l(e,t,n);return o.x=(t-o.width)/2,o.y=(n-o.height)/2,"%"===e.unit?c(o,t,n):o}function c(e,t,n){return "%"===e.unit?{...i,...e,unit:"%"}:{unit:"%",x:e.x?e.x/t*100:0,y:e.y?e.y/n*100:0,width:e.width?e.width/t*100:0,height:e.height?e.height/n*100:0}}function l(e,t,n){return e.unit?"px"===e.unit?{...i,...e,unit:"px"}:{unit:"px",x:e.x?e.x*t/100:0,y:e.y?e.y*n/100:0,width:e.width?e.width*t/100:0,height:e.height?e.height*n/100:0}:{...i,...e,unit:"px"}}function p(e,t,n,o,r,i=0,a=0,h=o,s=r){const d={...e};let c=Math.min(i,o),l=Math.min(a,r),p=Math.min(h,o),g=Math.min(s,r);t&&(t>1?(c=a?a*t:c,l=c/t,p=h*t):(l=i?i/t:l,c=l*t,g=s/t)),d.y<0&&(d.height=Math.max(d.height+d.y,l),d.y=0),d.x<0&&(d.width=Math.max(d.width+d.x,c),d.x=0);const w=o-(d.x+d.width);w<0&&(d.x=Math.min(d.x,o-c),d.width+=w);const u=r-(d.y+d.height);if(u<0&&(d.y=Math.min(d.y,r-l),d.height+=u),d.width<c&&("sw"!==n&&"nw"!=n||(d.x-=c-d.width),d.width=c),d.height<l&&("nw"!==n&&"ne"!=n||(d.y-=l-d.height),d.height=l),d.width>p&&("sw"!==n&&"nw"!=n||(d.x-=p-d.width),d.width=p),d.height>g&&("nw"!==n&&"ne"!=n||(d.y-=g-d.height),d.height=g),t){const e=d.width/d.height;if(e<t){const e=Math.max(d.width/t,l);"nw"!==n&&"ne"!=n||(d.y-=e-d.height),d.height=e;}else if(e>t){const e=Math.max(d.height*t,c);"sw"!==n&&"nw"!=n||(d.x-=e-d.width),d.width=e;}}return d}function g(e,t,n,o){const r={...e};return "ArrowLeft"===t?"nw"===o?(r.x-=n,r.y-=n,r.width+=n,r.height+=n):"w"===o?(r.x-=n,r.width+=n):"sw"===o?(r.x-=n,r.width+=n,r.height+=n):"ne"===o?(r.y+=n,r.width-=n,r.height-=n):"e"===o?r.width-=n:"se"===o&&(r.width-=n,r.height-=n):"ArrowRight"===t&&("nw"===o?(r.x+=n,r.y+=n,r.width-=n,r.height-=n):"w"===o?(r.x+=n,r.width-=n):"sw"===o?(r.x+=n,r.width-=n,r.height-=n):"ne"===o?(r.y-=n,r.width+=n,r.height+=n):"e"===o?r.width+=n:"se"===o&&(r.width+=n,r.height+=n)),"ArrowUp"===t?"nw"===o?(r.x-=n,r.y-=n,r.width+=n,r.height+=n):"n"===o?(r.y-=n,r.height+=n):"ne"===o?(r.y-=n,r.width+=n,r.height+=n):"sw"===o?(r.x+=n,r.width-=n,r.height-=n):"s"===o?r.height-=n:"se"===o&&(r.width-=n,r.height-=n):"ArrowDown"===t&&("nw"===o?(r.x+=n,r.y+=n,r.width-=n,r.height-=n):"n"===o?(r.y+=n,r.height-=n):"ne"===o?(r.y+=n,r.width-=n,r.height-=n):"sw"===o?(r.x-=n,r.width+=n,r.height+=n):"s"===o?r.height+=n:"se"===o&&(r.width+=n,r.height+=n)),r}const w={capture:!0,passive:!1};class u extends e.PureComponent{constructor(){super(...arguments),this.docMoveBound=!1,this.mouseDownOnCrop=!1,this.dragStarted=!1,this.evData={startClientX:0,startClientY:0,startCropX:0,startCropY:0,clientX:0,clientY:0,isResize:!0},this.componentRef=(0, e.createRef)(),this.mediaRef=(0, e.createRef)(),this.initChangeCalled=!1,this.state={cropIsActive:!1,newCropIsBeingDrawn:!1},this.onCropPointerDown=e=>{const{crop:t,disabled:n}=this.props,o=this.getBox();if(!t)return;const r=l(t,o.width,o.height);if(n)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});const i=e.target.dataset.ord,a=Boolean(i);let h=e.clientX,s=e.clientY,d=r.x,c=r.y;if(i){const t=e.clientX-o.x,n=e.clientY-o.y;let a=0,l=0;"ne"===i||"e"==i?(a=t-(r.x+r.width),l=n-r.y,d=r.x,c=r.y+r.height):"se"===i||"s"===i?(a=t-(r.x+r.width),l=n-(r.y+r.height),d=r.x,c=r.y):"sw"===i||"w"==i?(a=t-r.x,l=n-(r.y+r.height),d=r.x+r.width,c=r.y):"nw"!==i&&"n"!=i||(a=t-r.x,l=n-r.y,d=r.x+r.width,c=r.y+r.height),h=d+o.x+a,s=c+o.y+l;}this.evData={startClientX:h,startClientY:s,startCropX:d,startCropY:c,clientX:e.clientX,clientY:e.clientY,isResize:a,ord:i},this.mouseDownOnCrop=!0,this.setState({cropIsActive:!0});},this.onComponentPointerDown=e=>{const{crop:t,disabled:n,locked:o,keepSelection:r,onChange:i}=this.props,a=this.getBox();if(n||o||r&&t)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});const h=e.clientX-a.x,s=e.clientY-a.y,d={unit:"px",x:h,y:s,width:0,height:0};this.evData={startClientX:e.clientX,startClientY:e.clientY,startCropX:h,startCropY:s,clientX:e.clientX,clientY:e.clientY,isResize:!0},this.mouseDownOnCrop=!0,i(l(d,a.width,a.height),c(d,a.width,a.height)),this.setState({cropIsActive:!0,newCropIsBeingDrawn:!0});},this.onDocPointerMove=e=>{const{crop:t,disabled:n,onChange:o,onDragStart:r}=this.props,i=this.getBox();if(n||!t||!this.mouseDownOnCrop)return;e.cancelable&&e.preventDefault(),this.dragStarted||(this.dragStarted=!0,r&&r(e));const{evData:a}=this;let s;a.clientX=e.clientX,a.clientY=e.clientY,s=a.isResize?this.resizeCrop():this.dragCrop(),h(t,s)||o(l(s,i.width,i.height),c(s,i.width,i.height));},this.onComponentKeyDown=e=>{const{crop:t,disabled:n,onChange:o,onComplete:r}=this.props,i=this.getBox();if(n)return;const h=e.key;let s=!1;if(!t)return;const d=this.makePixelCrop(),p=(navigator.platform.match("Mac")?e.metaKey:e.ctrlKey)?u.nudgeStepLarge:e.shiftKey?u.nudgeStepMedium:u.nudgeStep;if("ArrowLeft"===h?(d.x-=p,s=!0):"ArrowRight"===h?(d.x+=p,s=!0):"ArrowUp"===h?(d.y-=p,s=!0):"ArrowDown"===h&&(d.y+=p,s=!0),s){e.cancelable&&e.preventDefault(),d.x=a(d.x,0,i.width-d.width),d.y=a(d.y,0,i.height-d.height);const t=l(d,i.width,i.height),n=c(d,i.width,i.height);o(t,n),r&&r(t,n);}},this.onHandlerKeyDown=(e,t)=>{const{aspect:n=0,crop:o,disabled:r,minWidth:i=0,minHeight:a=0,maxWidth:s,maxHeight:d,onChange:w,onComplete:m}=this.props,y=this.getBox();if(r||!o)return;if("ArrowUp"!==e.key&&"ArrowDown"!==e.key&&"ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.stopPropagation(),e.preventDefault();const x=(navigator.platform.match("Mac")?e.metaKey:e.ctrlKey)?u.nudgeStepLarge:e.shiftKey?u.nudgeStepMedium:u.nudgeStep,C=p(g(l(o,y.width,y.height),e.key,x,t),n,t,y.width,y.height,i,a,s,d);if(!h(o,C)){const e=c(C,y.width,y.height);w(C,e),m&&m(C,e);}},this.onDocPointerDone=e=>{const{crop:t,disabled:n,onComplete:o,onDragEnd:r}=this.props,i=this.getBox();this.unbindDocMove(),!n&&t&&this.mouseDownOnCrop&&(this.mouseDownOnCrop=!1,this.dragStarted=!1,r&&r(e),o&&o(l(t,i.width,i.height),c(t,i.width,i.height)),this.setState({cropIsActive:!1,newCropIsBeingDrawn:!1}));},this.onDragFocus=e=>{var t;null===(t=this.componentRef.current)||void 0===t||t.scrollTo(0,0);};}get document(){return document}getBox(){const e=this.mediaRef.current;if(!e)return {x:0,y:0,width:0,height:0};const{x:t,y:n,width:o,height:r}=e.getBoundingClientRect();return {x:t,y:n,width:o,height:r}}componentDidUpdate(e){const{crop:t,onComplete:n}=this.props;if(n&&!e.crop&&t){const{width:e,height:o}=this.getBox();e&&o&&n(l(t,e,o),c(t,e,o));}}componentWillUnmount(){this.resizeObserver&&this.resizeObserver.disconnect();}bindDocMove(){this.docMoveBound||(this.document.addEventListener("pointermove",this.onDocPointerMove,w),this.document.addEventListener("pointerup",this.onDocPointerDone,w),this.document.addEventListener("pointercancel",this.onDocPointerDone,w),this.docMoveBound=!0);}unbindDocMove(){this.docMoveBound&&(this.document.removeEventListener("pointermove",this.onDocPointerMove,w),this.document.removeEventListener("pointerup",this.onDocPointerDone,w),this.document.removeEventListener("pointercancel",this.onDocPointerDone,w),this.docMoveBound=!1);}getCropStyle(){const{crop:e}=this.props;if(e)return {top:`${e.y}${e.unit}`,left:`${e.x}${e.unit}`,width:`${e.width}${e.unit}`,height:`${e.height}${e.unit}`}}dragCrop(){const{evData:e}=this,t=this.getBox(),n=this.makePixelCrop(),o=e.clientX-e.startClientX,r=e.clientY-e.startClientY;return n.x=a(e.startCropX+o,0,t.width-n.width),n.y=a(e.startCropY+r,0,t.height-n.height),n}getPointRegion(e){const{evData:t}=this,n=t.clientX-e.x,o=t.clientY-e.y<t.startCropY;return n<t.startCropX?o?"nw":"sw":o?"ne":"se"}resizeCrop(){const{evData:e}=this,t=this.getBox(),{aspect:n=0,minWidth:o=0,minHeight:r=0,maxWidth:i,maxHeight:a}=this.props,h=this.getPointRegion(t),s=this.makePixelCrop(),d=e.ord?e.ord:h,c=e.clientX-e.startClientX,l=e.clientY-e.startClientY,g={unit:"px",x:0,y:0,width:0,height:0};"ne"===h?(g.x=e.startCropX,g.width=c,n?(g.height=g.width/n,g.y=e.startCropY-g.height):(g.height=Math.abs(l),g.y=e.startCropY-g.height)):"se"===h?(g.x=e.startCropX,g.y=e.startCropY,g.width=c,g.height=n?g.width/n:l):"sw"===h?(g.x=e.startCropX+c,g.y=e.startCropY,g.width=Math.abs(c),g.height=n?g.width/n:l):"nw"===h&&(g.x=e.startCropX+c,g.width=Math.abs(c),n?(g.height=g.width/n,g.y=e.startCropY-g.height):(g.height=Math.abs(l),g.y=e.startCropY+l));const w=p(g,n,h,t.width,t.height,o,r,i,a);return n||u.xyOrds.indexOf(d)>-1?(s.x=w.x,s.y=w.y,s.width=w.width,s.height=w.height):u.xOrds.indexOf(d)>-1?(s.x=w.x,s.width=w.width):u.yOrds.indexOf(d)>-1&&(s.y=w.y,s.height=w.height),s}createCropSelection(){const{ariaLabels:e=u.defaultProps.ariaLabels,disabled:n,locked:o,renderSelectionAddon:r,ruleOfThirds:i,crop:a}=this.props,h=this.getCropStyle();if(a)return t().createElement("div",{style:h,className:"ReactCrop__crop-selection",onPointerDown:this.onCropPointerDown,"aria-label":e.cropArea,tabIndex:0,onKeyDown:this.onComponentKeyDown,role:"group"},!n&&!o&&t().createElement("div",{className:"ReactCrop__drag-elements",onFocus:this.onDragFocus},t().createElement("div",{className:"ReactCrop__drag-bar ord-n","data-ord":"n"}),t().createElement("div",{className:"ReactCrop__drag-bar ord-e","data-ord":"e"}),t().createElement("div",{className:"ReactCrop__drag-bar ord-s","data-ord":"s"}),t().createElement("div",{className:"ReactCrop__drag-bar ord-w","data-ord":"w"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-nw","data-ord":"nw",tabIndex:0,"aria-label":e.nwDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"nw"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-n","data-ord":"n",tabIndex:0,"aria-label":e.nDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"n"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-ne","data-ord":"ne",tabIndex:0,"aria-label":e.neDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"ne"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-e","data-ord":"e",tabIndex:0,"aria-label":e.eDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"e"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-se","data-ord":"se",tabIndex:0,"aria-label":e.seDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"se"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-s","data-ord":"s",tabIndex:0,"aria-label":e.sDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"s"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-sw","data-ord":"sw",tabIndex:0,"aria-label":e.swDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"sw"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-w","data-ord":"w",tabIndex:0,"aria-label":e.wDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"w"),role:"button"})),r&&t().createElement("div",{className:"ReactCrop__selection-addon",onMouseDown:e=>e.stopPropagation()},r(this.state)),i&&t().createElement(t().Fragment,null,t().createElement("div",{className:"ReactCrop__rule-of-thirds-hz"}),t().createElement("div",{className:"ReactCrop__rule-of-thirds-vt"})))}makePixelCrop(){const e={...i,...this.props.crop||{}},t=this.getBox();return l(e,t.width,t.height)}render(){const{aspect:e,children:o,circularCrop:r,className:i,crop:a,disabled:h,locked:s,style:d,ruleOfThirds:c}=this.props,{cropIsActive:l,newCropIsBeingDrawn:p}=this.state,g=a?this.createCropSelection():null,w=function(){for(var e,t,o=0,r="";o<arguments.length;)(e=arguments[o++])&&(t=n(e))&&(r&&(r+=" "),r+=t);return r}("ReactCrop",i,{"ReactCrop--active":l,"ReactCrop--disabled":h,"ReactCrop--locked":s,"ReactCrop--new-crop":p,"ReactCrop--fixed-aspect":a&&e,"ReactCrop--circular-crop":a&&r,"ReactCrop--rule-of-thirds":a&&c,"ReactCrop--invisible-crop":!this.dragStarted&&a&&!a.width&&!a.height});return t().createElement("div",{ref:this.componentRef,className:w,style:d},t().createElement("div",{ref:this.mediaRef,className:"ReactCrop__child-wrapper",onPointerDown:this.onComponentPointerDown},o),g)}}u.xOrds=["e","w"],u.yOrds=["n","s"],u.xyOrds=["nw","ne","se","sw"],u.nudgeStep=1,u.nudgeStepMedium=10,u.nudgeStepLarge=100,u.defaultProps={ariaLabels:{cropArea:"Use the arrow keys to move the crop selection area",nwDragHandle:"Use the arrow keys to move the north west drag handle to change the crop selection area",nDragHandle:"Use the up and down arrow keys to move the north drag handle to change the crop selection area",neDragHandle:"Use the arrow keys to move the north east drag handle to change the crop selection area",eDragHandle:"Use the up and down arrow keys to move the east drag handle to change the crop selection area",seDragHandle:"Use the arrow keys to move the south east drag handle to change the crop selection area",sDragHandle:"Use the up and down arrow keys to move the south drag handle to change the crop selection area",swDragHandle:"Use the arrow keys to move the south west drag handle to change the crop selection area",wDragHandle:"Use the up and down arrow keys to move the west drag handle to change the crop selection area"}};})(),r})()));
89
- } (ReactCrop_min, ReactCrop_min.exports));
90
-
91
- var ReactCrop_minExports = ReactCrop_min.exports;
92
- var ReactCrop = /*@__PURE__*/getDefaultExportFromCjs(ReactCrop_minExports);
93
-
94
- var cropImage = function cropImage(payload) {
95
- return axios.post("neeto_image_uploader_engine/development/crop_image", payload);
96
- };
97
- var developmentApi = {
98
- cropImage: cropImage
99
- };
100
-
101
- function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
102
- function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
103
- var useCropImage = function useCropImage(options) {
104
- return useMutation(_objectSpread$4({
105
- mutationFn: developmentApi.cropImage
106
- }, options));
107
- };
108
-
109
- var css$1 = ".ReactCrop{position:relative;display:inline-block;cursor:crosshair;overflow:hidden;max-width:100%}.ReactCrop *,.ReactCrop *::before,.ReactCrop *::after{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{max-height:inherit}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-width:100%;max-height:inherit}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video{touch-action:none}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-selection{position:absolute;top:0;left:0;transform:translate3d(0, 0, 0);cursor:move;box-shadow:0 0 0 9999em rgba(0,0,0,.5);border:1px dashed #fff}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%;box-shadow:0px 0px 1px 1px #fff,0 0 0 9999em rgba(0,0,0,.5)}.ReactCrop__crop-selection:focus{outline:none;border-color:blue;border-style:solid}.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-vt::before,.ReactCrop__rule-of-thirds-vt::after,.ReactCrop__rule-of-thirds-hz::before,.ReactCrop__rule-of-thirds-hz::after{content:\"\";display:block;position:absolute;background-color:rgba(255,255,255,.4)}.ReactCrop__rule-of-thirds-vt::before,.ReactCrop__rule-of-thirds-vt::after{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt::before{left:33.3333333333%}.ReactCrop__rule-of-thirds-vt::after{left:66.6666666667%}.ReactCrop__rule-of-thirds-hz::before,.ReactCrop__rule-of-thirds-hz::after{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz::before{top:33.3333333333%}.ReactCrop__rule-of-thirds-hz::after{top:66.6666666667%}.ReactCrop__drag-handle{position:absolute}.ReactCrop__drag-handle::after{position:absolute;content:\"\";display:block;width:10px;height:10px;background-color:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.7);outline:1px solid rgba(0,0,0,0)}.ReactCrop__drag-handle:focus::after{border-color:blue;background:#2dbfff}.ReactCrop .ord-nw{top:0;left:0;margin-top:-5px;margin-left:-5px;cursor:nw-resize}.ReactCrop .ord-nw::after{top:0;left:0}.ReactCrop .ord-n{top:0;left:50%;margin-top:-5px;margin-left:-5px;cursor:n-resize}.ReactCrop .ord-n::after{top:0}.ReactCrop .ord-ne{top:0;right:0;margin-top:-5px;margin-right:-5px;cursor:ne-resize}.ReactCrop .ord-ne::after{top:0;right:0}.ReactCrop .ord-e{top:50%;right:0;margin-top:-5px;margin-right:-5px;cursor:e-resize}.ReactCrop .ord-e::after{right:0}.ReactCrop .ord-se{bottom:0;right:0;margin-bottom:-5px;margin-right:-5px;cursor:se-resize}.ReactCrop .ord-se::after{bottom:0;right:0}.ReactCrop .ord-s{bottom:0;left:50%;margin-bottom:-5px;margin-left:-5px;cursor:s-resize}.ReactCrop .ord-s::after{bottom:0}.ReactCrop .ord-sw{bottom:0;left:0;margin-bottom:-5px;margin-left:-5px;cursor:sw-resize}.ReactCrop .ord-sw::after{bottom:0;left:0}.ReactCrop .ord-w{top:50%;left:0;margin-top:-5px;margin-left:-5px;cursor:w-resize}.ReactCrop .ord-w::after{left:0}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{top:0;left:0;width:100%;height:6px;margin-top:-3px}.ReactCrop__drag-bar.ord-e{right:0;top:0;width:6px;height:100%;margin-right:-3px}.ReactCrop__drag-bar.ord-s{bottom:0;left:0;width:100%;height:6px;margin-bottom:-3px}.ReactCrop__drag-bar.ord-w{top:0;left:0;width:6px;height:100%;margin-left:-3px}.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar{display:none}.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}@media(pointer: coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:24px;height:24px}}.ReactCrop .ReactCrop__child-wrapper {\n width: 100%;\n height: 100%;\n}.ReactCrop .ReactCrop__child-wrapper img {\n height: auto;\n width: auto;\n max-width: 100%;\n max-height: 100%;\n display: block;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9yZWFjdC1pbWFnZS1jcm9wL2Rpc3QvUmVhY3RDcm9wLmNzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3JlYWN0LWNyb3Auc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxXQUFXLGlCQUFpQixDQUFDLG9CQUFvQixDQUFDLGdCQUFnQixDQUFDLGVBQWUsQ0FBQyxjQUFjLENBQUMsc0RBQXNELHFCQUFxQixDQUFDLHdDQUF3QyxjQUFjLENBQUMsMEJBQTBCLGtCQUFrQixDQUFDLDhEQUE4RCxhQUFhLENBQUMsY0FBYyxDQUFDLGtCQUFrQixDQUFDLHdJQUF3SSxpQkFBaUIsQ0FBQyxnRUFBZ0UsaUJBQWlCLENBQUMsMkJBQTJCLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsOEJBQThCLENBQUMsV0FBVyxDQUFDLHNDQUFzQyxDQUFDLHNCQUFzQixDQUFDLGdEQUFnRCxjQUFjLENBQUMscURBQXFELGlCQUFpQixDQUFDLDJEQUEyRCxDQUFDLGlDQUFpQyxZQUFZLENBQUMsaUJBQWlCLENBQUMsa0JBQWtCLENBQUMsc0RBQXNELFlBQVksQ0FBQyxzSkFBc0osVUFBVSxDQUFDLGFBQWEsQ0FBQyxpQkFBaUIsQ0FBQyxxQ0FBcUMsQ0FBQywyRUFBMkUsU0FBUyxDQUFDLFdBQVcsQ0FBQyxzQ0FBb0QsbUJBQW1CLENBQUMscUNBQW1ELG1CQUFtQixDQUFDLDJFQUEyRSxVQUFVLENBQUMsVUFBVSxDQUFDLHNDQUFtRCxrQkFBa0IsQ0FBQyxxQ0FBa0Qsa0JBQWtCLENBQUMsd0JBQXdCLGlCQUFpQixDQUFDLCtCQUErQixpQkFBaUIsQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLFVBQVUsQ0FBQyxXQUFXLENBQUMsK0JBQStCLENBQUMscUNBQXFDLENBQUMsK0JBQStCLENBQUMscUNBQXFDLGlCQUFpQixDQUFDLGtCQUFrQixDQUFDLG1CQUFtQixLQUFLLENBQUMsTUFBTSxDQUFDLGVBQWUsQ0FBQyxnQkFBZ0IsQ0FBQyxnQkFBZ0IsQ0FBQywwQkFBMEIsS0FBSyxDQUFDLE1BQU0sQ0FBQyxrQkFBa0IsS0FBSyxDQUFDLFFBQVEsQ0FBQyxlQUFlLENBQUMsZ0JBQWdCLENBQUMsZUFBZSxDQUFDLHlCQUF5QixLQUFLLENBQUMsbUJBQW1CLEtBQUssQ0FBQyxPQUFPLENBQUMsZUFBZSxDQUFDLGlCQUFpQixDQUFDLGdCQUFnQixDQUFDLDBCQUEwQixLQUFLLENBQUMsT0FBTyxDQUFDLGtCQUFrQixPQUFPLENBQUMsT0FBTyxDQUFDLGVBQWUsQ0FBQyxpQkFBaUIsQ0FBQyxlQUFlLENBQUMseUJBQXlCLE9BQU8sQ0FBQyxtQkFBbUIsUUFBUSxDQUFDLE9BQU8sQ0FBQyxrQkFBa0IsQ0FBQyxpQkFBaUIsQ0FBQyxnQkFBZ0IsQ0FBQywwQkFBMEIsUUFBUSxDQUFDLE9BQU8sQ0FBQyxrQkFBa0IsUUFBUSxDQUFDLFFBQVEsQ0FBQyxrQkFBa0IsQ0FBQyxnQkFBZ0IsQ0FBQyxlQUFlLENBQUMseUJBQXlCLFFBQVEsQ0FBQyxtQkFBbUIsUUFBUSxDQUFDLE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxnQkFBZ0IsQ0FBQyxnQkFBZ0IsQ0FBQywwQkFBMEIsUUFBUSxDQUFDLE1BQU0sQ0FBQyxrQkFBa0IsT0FBTyxDQUFDLE1BQU0sQ0FBQyxlQUFlLENBQUMsZ0JBQWdCLENBQUMsZUFBZSxDQUFDLHlCQUF5QixNQUFNLENBQUMsNkNBQTZDLGNBQWMsQ0FBQyxxQkFBcUIsaUJBQWlCLENBQUMsMkJBQTJCLEtBQUssQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLFVBQVUsQ0FBQyxlQUFlLENBQUMsMkJBQTJCLE9BQU8sQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLFdBQVcsQ0FBQyxpQkFBaUIsQ0FBQywyQkFBMkIsUUFBUSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsVUFBVSxDQUFDLGtCQUFrQixDQUFDLDJCQUEyQixLQUFLLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsZ0JBQWdCLENBQUMscUlBQXFJLFlBQVksQ0FBQyw0TkFBNE4sWUFBWSxDQUFDLHdCQUF3Qix3RUFBd0UsWUFBWSxDQUFDLHdCQUF3QixVQUFVLENBQUMsV0FBVyxDQUFDLENDRzcrSDtFQUNFLFdBQUE7RUFDQSxZQUFBO0FBREosQ0FHSTtFQUNFLFlBQUE7RUFDQSxXQUFBO0VBQ0EsZUFBQTtFQUNBLGdCQUFBO0VBQ0EsY0FBQTtBQUROIiwic291cmNlc0NvbnRlbnQiOlsiLlJlYWN0Q3JvcHtwb3NpdGlvbjpyZWxhdGl2ZTtkaXNwbGF5OmlubGluZS1ibG9jaztjdXJzb3I6Y3Jvc3NoYWlyO292ZXJmbG93OmhpZGRlbjttYXgtd2lkdGg6MTAwJX0uUmVhY3RDcm9wICosLlJlYWN0Q3JvcCAqOjpiZWZvcmUsLlJlYWN0Q3JvcCAqOjphZnRlcntib3gtc2l6aW5nOmJvcmRlci1ib3h9LlJlYWN0Q3JvcC0tZGlzYWJsZWQsLlJlYWN0Q3JvcC0tbG9ja2Vke2N1cnNvcjppbmhlcml0fS5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXJ7bWF4LWhlaWdodDppbmhlcml0fS5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXI+aW1nLC5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXI+dmlkZW97ZGlzcGxheTpibG9jazttYXgtd2lkdGg6MTAwJTttYXgtaGVpZ2h0OmluaGVyaXR9LlJlYWN0Q3JvcDpub3QoLlJlYWN0Q3JvcC0tZGlzYWJsZWQpIC5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXI+aW1nLC5SZWFjdENyb3A6bm90KC5SZWFjdENyb3AtLWRpc2FibGVkKSAuUmVhY3RDcm9wX19jaGlsZC13cmFwcGVyPnZpZGVve3RvdWNoLWFjdGlvbjpub25lfS5SZWFjdENyb3A6bm90KC5SZWFjdENyb3AtLWRpc2FibGVkKSAuUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbnt0b3VjaC1hY3Rpb246bm9uZX0uUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbntwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDtsZWZ0OjA7dHJhbnNmb3JtOnRyYW5zbGF0ZTNkKDAsIDAsIDApO2N1cnNvcjptb3ZlO2JveC1zaGFkb3c6MCAwIDAgOTk5OWVtIHJnYmEoMCwwLDAsLjUpO2JvcmRlcjoxcHggZGFzaGVkICNmZmZ9LlJlYWN0Q3JvcC0tZGlzYWJsZWQgLlJlYWN0Q3JvcF9fY3JvcC1zZWxlY3Rpb257Y3Vyc29yOmluaGVyaXR9LlJlYWN0Q3JvcC0tY2lyY3VsYXItY3JvcCAuUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbntib3JkZXItcmFkaXVzOjUwJTtib3gtc2hhZG93OjBweCAwcHggMXB4IDFweCAjZmZmLDAgMCAwIDk5OTllbSByZ2JhKDAsMCwwLC41KX0uUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbjpmb2N1c3tvdXRsaW5lOm5vbmU7Ym9yZGVyLWNvbG9yOmJsdWU7Ym9yZGVyLXN0eWxlOnNvbGlkfS5SZWFjdENyb3AtLWludmlzaWJsZS1jcm9wIC5SZWFjdENyb3BfX2Nyb3Atc2VsZWN0aW9ue2Rpc3BsYXk6bm9uZX0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy12dDo6YmVmb3JlLC5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLXZ0OjphZnRlciwuUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy1oejo6YmVmb3JlLC5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLWh6OjphZnRlcntjb250ZW50OlwiXCI7ZGlzcGxheTpibG9jaztwb3NpdGlvbjphYnNvbHV0ZTtiYWNrZ3JvdW5kLWNvbG9yOnJnYmEoMjU1LDI1NSwyNTUsLjQpfS5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLXZ0OjpiZWZvcmUsLlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtdnQ6OmFmdGVye3dpZHRoOjFweDtoZWlnaHQ6MTAwJX0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy12dDo6YmVmb3Jle2xlZnQ6MzMuMzMzMyU7bGVmdDozMy4zMzMzMzMzMzMzJX0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy12dDo6YWZ0ZXJ7bGVmdDo2Ni42NjY2JTtsZWZ0OjY2LjY2NjY2NjY2NjclfS5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLWh6OjpiZWZvcmUsLlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtaHo6OmFmdGVye3dpZHRoOjEwMCU7aGVpZ2h0OjFweH0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy1oejo6YmVmb3Jle3RvcDozMy4zMzMzJTt0b3A6MzMuMzMzMzMzMzMzMyV9LlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtaHo6OmFmdGVye3RvcDo2Ni42NjY2JTt0b3A6NjYuNjY2NjY2NjY2NyV9LlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGV7cG9zaXRpb246YWJzb2x1dGV9LlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGU6OmFmdGVye3Bvc2l0aW9uOmFic29sdXRlO2NvbnRlbnQ6XCJcIjtkaXNwbGF5OmJsb2NrO3dpZHRoOjEwcHg7aGVpZ2h0OjEwcHg7YmFja2dyb3VuZC1jb2xvcjpyZ2JhKDAsMCwwLC4yKTtib3JkZXI6MXB4IHNvbGlkIHJnYmEoMjU1LDI1NSwyNTUsLjcpO291dGxpbmU6MXB4IHNvbGlkIHJnYmEoMCwwLDAsMCl9LlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGU6Zm9jdXM6OmFmdGVye2JvcmRlci1jb2xvcjpibHVlO2JhY2tncm91bmQ6IzJkYmZmZn0uUmVhY3RDcm9wIC5vcmQtbnd7dG9wOjA7bGVmdDowO21hcmdpbi10b3A6LTVweDttYXJnaW4tbGVmdDotNXB4O2N1cnNvcjpudy1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLW53OjphZnRlcnt0b3A6MDtsZWZ0OjB9LlJlYWN0Q3JvcCAub3JkLW57dG9wOjA7bGVmdDo1MCU7bWFyZ2luLXRvcDotNXB4O21hcmdpbi1sZWZ0Oi01cHg7Y3Vyc29yOm4tcmVzaXplfS5SZWFjdENyb3AgLm9yZC1uOjphZnRlcnt0b3A6MH0uUmVhY3RDcm9wIC5vcmQtbmV7dG9wOjA7cmlnaHQ6MDttYXJnaW4tdG9wOi01cHg7bWFyZ2luLXJpZ2h0Oi01cHg7Y3Vyc29yOm5lLXJlc2l6ZX0uUmVhY3RDcm9wIC5vcmQtbmU6OmFmdGVye3RvcDowO3JpZ2h0OjB9LlJlYWN0Q3JvcCAub3JkLWV7dG9wOjUwJTtyaWdodDowO21hcmdpbi10b3A6LTVweDttYXJnaW4tcmlnaHQ6LTVweDtjdXJzb3I6ZS1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLWU6OmFmdGVye3JpZ2h0OjB9LlJlYWN0Q3JvcCAub3JkLXNle2JvdHRvbTowO3JpZ2h0OjA7bWFyZ2luLWJvdHRvbTotNXB4O21hcmdpbi1yaWdodDotNXB4O2N1cnNvcjpzZS1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLXNlOjphZnRlcntib3R0b206MDtyaWdodDowfS5SZWFjdENyb3AgLm9yZC1ze2JvdHRvbTowO2xlZnQ6NTAlO21hcmdpbi1ib3R0b206LTVweDttYXJnaW4tbGVmdDotNXB4O2N1cnNvcjpzLXJlc2l6ZX0uUmVhY3RDcm9wIC5vcmQtczo6YWZ0ZXJ7Ym90dG9tOjB9LlJlYWN0Q3JvcCAub3JkLXN3e2JvdHRvbTowO2xlZnQ6MDttYXJnaW4tYm90dG9tOi01cHg7bWFyZ2luLWxlZnQ6LTVweDtjdXJzb3I6c3ctcmVzaXplfS5SZWFjdENyb3AgLm9yZC1zdzo6YWZ0ZXJ7Ym90dG9tOjA7bGVmdDowfS5SZWFjdENyb3AgLm9yZC13e3RvcDo1MCU7bGVmdDowO21hcmdpbi10b3A6LTVweDttYXJnaW4tbGVmdDotNXB4O2N1cnNvcjp3LXJlc2l6ZX0uUmVhY3RDcm9wIC5vcmQtdzo6YWZ0ZXJ7bGVmdDowfS5SZWFjdENyb3BfX2Rpc2FibGVkIC5SZWFjdENyb3BfX2RyYWctaGFuZGxle2N1cnNvcjppbmhlcml0fS5SZWFjdENyb3BfX2RyYWctYmFye3Bvc2l0aW9uOmFic29sdXRlfS5SZWFjdENyb3BfX2RyYWctYmFyLm9yZC1ue3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlO2hlaWdodDo2cHg7bWFyZ2luLXRvcDotM3B4fS5SZWFjdENyb3BfX2RyYWctYmFyLm9yZC1le3JpZ2h0OjA7dG9wOjA7d2lkdGg6NnB4O2hlaWdodDoxMDAlO21hcmdpbi1yaWdodDotM3B4fS5SZWFjdENyb3BfX2RyYWctYmFyLm9yZC1ze2JvdHRvbTowO2xlZnQ6MDt3aWR0aDoxMDAlO2hlaWdodDo2cHg7bWFyZ2luLWJvdHRvbTotM3B4fS5SZWFjdENyb3BfX2RyYWctYmFyLm9yZC13e3RvcDowO2xlZnQ6MDt3aWR0aDo2cHg7aGVpZ2h0OjEwMCU7bWFyZ2luLWxlZnQ6LTNweH0uUmVhY3RDcm9wLS1uZXctY3JvcCAuUmVhY3RDcm9wX19kcmFnLWJhciwuUmVhY3RDcm9wLS1uZXctY3JvcCAuUmVhY3RDcm9wX19kcmFnLWhhbmRsZSwuUmVhY3RDcm9wLS1maXhlZC1hc3BlY3QgLlJlYWN0Q3JvcF9fZHJhZy1iYXJ7ZGlzcGxheTpub25lfS5SZWFjdENyb3AtLWZpeGVkLWFzcGVjdCAuUmVhY3RDcm9wX19kcmFnLWhhbmRsZS5vcmQtbiwuUmVhY3RDcm9wLS1maXhlZC1hc3BlY3QgLlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGUub3JkLWUsLlJlYWN0Q3JvcC0tZml4ZWQtYXNwZWN0IC5SZWFjdENyb3BfX2RyYWctaGFuZGxlLm9yZC1zLC5SZWFjdENyb3AtLWZpeGVkLWFzcGVjdCAuUmVhY3RDcm9wX19kcmFnLWhhbmRsZS5vcmQtd3tkaXNwbGF5Om5vbmV9QG1lZGlhKHBvaW50ZXI6IGNvYXJzZSl7LlJlYWN0Q3JvcCAub3JkLW4sLlJlYWN0Q3JvcCAub3JkLWUsLlJlYWN0Q3JvcCAub3JkLXMsLlJlYWN0Q3JvcCAub3JkLXd7ZGlzcGxheTpub25lfS5SZWFjdENyb3BfX2RyYWctaGFuZGxle3dpZHRoOjI0cHg7aGVpZ2h0OjI0cHh9fVxuIiwiQGltcG9ydCBcInJlYWN0LWltYWdlLWNyb3AvZGlzdC9SZWFjdENyb3AuY3NzXCI7XG5cbi5SZWFjdENyb3Age1xuICAuUmVhY3RDcm9wX19jaGlsZC13cmFwcGVyIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG5cbiAgICBpbWcge1xuICAgICAgaGVpZ2h0OiBhdXRvO1xuICAgICAgd2lkdGg6IGF1dG87XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgICBtYXgtaGVpZ2h0OiAxMDAlO1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgfVxuICB9XG59XG4iXX0= */";
110
- n(css$1,{});
111
-
112
- var useImageControls = function useImageControls(_ref) {
113
- var isAspectRatioLocked = _ref.isAspectRatioLocked,
114
- setAspectRatioLocked = _ref.setAspectRatioLocked,
115
- setCrop = _ref.setCrop,
116
- _ref$crop = _ref.crop,
117
- crop = _ref$crop === void 0 ? {} : _ref$crop,
118
- aspectRatio = _ref.aspectRatio,
119
- imageRef = _ref.imageRef,
120
- setAspectRatio = _ref.setAspectRatio,
121
- setHeight = _ref.setHeight,
122
- setWidth = _ref.setWidth;
123
- var onToggleAspectRatioLock = function onToggleAspectRatioLock() {
124
- setAspectRatioLocked(function (isAspectRatioLocked) {
125
- return !isAspectRatioLocked;
126
- });
127
- if (!isAspectRatioLocked) {
128
- var newHeight = crop.width / (aspectRatio.width / aspectRatio.height);
129
- var newWidth = crop.height * (aspectRatio.width / aspectRatio.height);
130
- newWidth + Math.trunc(crop.x) <= imageRef.current.width ? setCrop(mergeRight(crop, {
131
- width: newWidth
132
- })) : setCrop(mergeRight(crop, {
133
- height: newHeight
134
- }));
135
- }
136
- };
137
- var handleWidthChange = function handleWidthChange(width) {
138
- var cropWidth = Number(width);
139
- var displayWidth = cropWidth * imageRef.current.width / imageRef.current.naturalWidth;
140
- if (displayWidth > 0 && Math.trunc(crop.x) + displayWidth <= imageRef.current.width) {
141
- if (isAspectRatioLocked) {
142
- var displayHeight = displayWidth / (aspectRatio.width / aspectRatio.height);
143
- displayHeight + Math.trunc(crop.y) <= imageRef.current.height && setCrop(mergeRight(crop, {
144
- width: displayWidth,
145
- height: displayHeight
146
- }));
147
- } else {
148
- setCrop(mergeRight(crop, {
149
- width: displayWidth
150
- }));
151
- }
152
- } else {
153
- setWidth(crop.width.toFixed(2));
154
- }
155
- };
156
- var handleHeightChange = function handleHeightChange(height) {
157
- var cropHeight = Number(height);
158
- var displayHeight = cropHeight * imageRef.current.height / imageRef.current.naturalHeight;
159
- if (displayHeight > 0 && Math.trunc(crop.y) + displayHeight <= imageRef.current.height) {
160
- if (isAspectRatioLocked) {
161
- var displayWidth = displayHeight * aspectRatio.width / aspectRatio.height;
162
- displayWidth + Math.trunc(crop.x) <= imageRef.current.width && setCrop(mergeRight(crop, {
163
- height: displayHeight,
164
- width: displayWidth
165
- }));
166
- } else {
167
- setCrop(mergeRight(crop, {
168
- height: displayHeight
169
- }));
170
- }
171
- } else {
172
- setHeight(crop.height.toFixed(2));
173
- }
174
- };
175
- var handleAspectWidthChange = function handleAspectWidthChange(aspectWidth) {
176
- if (aspectWidth <= 0) {
177
- return;
178
- }
179
- if (!isAspectRatioLocked) {
180
- setAspectRatio(mergeRight(aspectRatio, {
181
- width: aspectWidth
182
- }));
183
- return;
184
- }
185
- var newWidth = crop.height * (aspectWidth / aspectRatio.height);
186
- if (newWidth + Math.trunc(crop.x) <= imageRef.current.width) {
187
- setCrop(mergeRight(crop, {
188
- width: newWidth
189
- }));
190
- setAspectRatio(mergeRight(aspectRatio, {
191
- width: aspectWidth
192
- }));
193
- }
194
- };
195
- var handleAspectHeightChange = function handleAspectHeightChange(aspectHeight) {
196
- if (aspectHeight <= 0) {
197
- return;
198
- }
199
- if (!isAspectRatioLocked) {
200
- setAspectRatio(mergeRight(aspectRatio, {
201
- height: aspectHeight
202
- }));
203
- return;
204
- }
205
- var newHeight = crop.width / (aspectRatio.width / aspectHeight);
206
- if (newHeight + Math.trunc(crop.y) <= imageRef.current.height) {
207
- setCrop(mergeRight(crop, {
208
- height: newHeight
209
- }));
210
- setAspectRatio(mergeRight(aspectRatio, {
211
- height: aspectHeight
212
- }));
213
- }
214
- };
215
- return {
216
- onToggleAspectRatioLock: onToggleAspectRatioLock,
217
- handleWidthChange: handleWidthChange,
218
- handleHeightChange: handleHeightChange,
219
- handleAspectWidthChange: handleAspectWidthChange,
220
- handleAspectHeightChange: handleAspectHeightChange
221
- };
222
- };
223
-
224
- var Controls = function Controls(_ref) {
225
- var aspectRatio = _ref.aspectRatio,
226
- isAspectRatioLocked = _ref.isAspectRatioLocked,
227
- crop = _ref.crop,
228
- handleSubmit = _ref.handleSubmit,
229
- setAspectRatio = _ref.setAspectRatio,
230
- setAspectRatioLocked = _ref.setAspectRatioLocked,
231
- setCrop = _ref.setCrop,
232
- imageRef = _ref.imageRef,
233
- isFullImage = _ref.isFullImage,
234
- setIsFullImage = _ref.setIsFullImage,
235
- _ref$hideControls = _ref.hideControls,
236
- hideControls = _ref$hideControls === void 0 ? false : _ref$hideControls;
237
- var _useTranslation = useTranslation(),
238
- t = _useTranslation.t;
239
- var getActualCropHeight = function getActualCropHeight(cropHeight) {
240
- var _imageRef$current, _imageRef$current2;
241
- return cropHeight * (((_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.naturalHeight) / ((_imageRef$current2 = imageRef.current) === null || _imageRef$current2 === void 0 ? void 0 : _imageRef$current2.height));
242
- };
243
- var getActualCropWidth = function getActualCropWidth(cropHeight) {
244
- var _imageRef$current3, _imageRef$current4;
245
- return cropHeight * (((_imageRef$current3 = imageRef.current) === null || _imageRef$current3 === void 0 ? void 0 : _imageRef$current3.naturalWidth) / ((_imageRef$current4 = imageRef.current) === null || _imageRef$current4 === void 0 ? void 0 : _imageRef$current4.width));
246
- };
247
- var _useState = useState(getActualCropHeight(crop.height)),
248
- _useState2 = _slicedToArray(_useState, 2),
249
- height = _useState2[0],
250
- setHeight = _useState2[1];
251
- var _useState3 = useState(getActualCropWidth(crop.width)),
252
- _useState4 = _slicedToArray(_useState3, 2),
253
- width = _useState4[0],
254
- setWidth = _useState4[1];
255
- var _useImageControls = useImageControls({
256
- isAspectRatioLocked: isAspectRatioLocked,
257
- setAspectRatioLocked: setAspectRatioLocked,
258
- setCrop: setCrop,
259
- crop: crop,
260
- aspectRatio: aspectRatio,
261
- imageRef: imageRef,
262
- setAspectRatio: setAspectRatio,
263
- setHeight: setHeight,
264
- setWidth: setWidth
265
- }),
266
- onToggleAspectRatioLock = _useImageControls.onToggleAspectRatioLock,
267
- handleWidthChange = _useImageControls.handleWidthChange,
268
- handleHeightChange = _useImageControls.handleHeightChange,
269
- handleAspectWidthChange = _useImageControls.handleAspectWidthChange,
270
- handleAspectHeightChange = _useImageControls.handleAspectHeightChange;
271
- var debouncedHeight = useDebounce(height, 800);
272
- var debouncedWidth = useDebounce(width, 800);
273
- useEffect(function () {
274
- handleHeightChange(debouncedHeight);
275
- }, [debouncedHeight]);
276
- useEffect(function () {
277
- handleWidthChange(debouncedWidth);
278
- }, [debouncedWidth]);
279
- useEffect(function () {
280
- setHeight(getActualCropHeight(crop.height));
281
- setWidth(getActualCropWidth(crop.width));
282
- }, [crop]);
283
- return /*#__PURE__*/jsxs("div", {
284
- className: "flex flex-col p-4 md:w-2/6 ",
285
- children: [!hideControls && /*#__PURE__*/jsxs(Fragment, {
286
- children: [/*#__PURE__*/jsx(Switch, {
287
- checked: isFullImage,
288
- className: "flex-grow-0",
289
- label: t("neetoImageUploader.labels.selectOriginalImage"),
290
- onChange: function onChange() {
291
- return setIsFullImage(function (isFullImage) {
292
- return !isFullImage;
293
- });
294
- }
295
- }), /*#__PURE__*/jsx(Switch, {
296
- checked: isAspectRatioLocked,
297
- className: "mt-4 flex-grow-0",
298
- disabled: isFullImage,
299
- label: t("neetoImageUploader.labels.lockAspectRatio"),
300
- onChange: onToggleAspectRatioLock
301
- }), /*#__PURE__*/jsx(Typography, {
302
- className: "mb-2 mt-6",
303
- style: "body2",
304
- children: t("neetoImageUploader.imageEditor.aspectRatio")
305
- }), /*#__PURE__*/jsxs("div", {
306
- className: "flex gap-4 self-start",
307
- children: [/*#__PURE__*/jsx(Input, {
308
- "data-cy": "aspect-ratio-width-input",
309
- disabled: isFullImage,
310
- size: "small",
311
- type: "number",
312
- value: aspectRatio.width,
313
- onChange: withEventTargetValue(handleAspectWidthChange)
314
- }), /*#__PURE__*/jsx(Typography, {
315
- children: " : "
316
- }), /*#__PURE__*/jsx(Input, {
317
- "data-cy": "aspect-ratio-height-input",
318
- disabled: isFullImage,
319
- size: "small",
320
- type: "number",
321
- value: aspectRatio.height,
322
- onChange: withEventTargetValue(handleAspectHeightChange)
323
- })]
324
- })]
325
- }), /*#__PURE__*/jsx(Input, {
326
- className: "mt-4 flex-grow-0",
327
- disabled: isFullImage,
328
- label: t("neetoImageUploader.labels.width"),
329
- type: "number",
330
- value: Math.round(width),
331
- onChange: withEventTargetValue(setWidth)
332
- }), /*#__PURE__*/jsx(Input, {
333
- className: "mt-4 flex-grow-0",
334
- disabled: isFullImage,
335
- label: t("neetoImageUploader.labels.height"),
336
- type: "number",
337
- value: Math.round(height),
338
- onChange: withEventTargetValue(setHeight)
339
- }), /*#__PURE__*/jsx(Button, {
340
- className: "mt-6 self-start",
341
- "data-cy": "neeto-image-uploader-crop-submit-button",
342
- label: t("neetoImageUploader.labels.done"),
343
- disabled: isNilOrEmpty(imageRef.current) && (crop.width <= 0 || crop.height <= 0),
344
- onClick: handleSubmit
345
- })]
346
- });
347
- };
348
-
349
- var ImageEditor = function ImageEditor(_ref) {
350
- var image = _ref.image,
351
- handleReset = _ref.handleReset,
352
- _ref$handleImageEditC = _ref.handleImageEditComplete,
353
- handleImageEditComplete = _ref$handleImageEditC === void 0 ? noop : _ref$handleImageEditC,
354
- _ref$signedId = _ref.signedId,
355
- signedId = _ref$signedId === void 0 ? "" : _ref$signedId,
356
- _ref$fixedAspectRatio = _ref.fixedAspectRatio,
357
- fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio;
358
- var _useState = useState(true),
359
- _useState2 = _slicedToArray(_useState, 2),
360
- isAspectRatioLocked = _useState2[0],
361
- setIsAspectRatioLocked = _useState2[1];
362
- var _useState3 = useState(false),
363
- _useState4 = _slicedToArray(_useState3, 2),
364
- isFullImage = _useState4[0],
365
- setIsFullImage = _useState4[1];
366
- var _useState5 = useState({
367
- width: (fixedAspectRatio === null || fixedAspectRatio === void 0 ? void 0 : fixedAspectRatio.width) || 16,
368
- height: (fixedAspectRatio === null || fixedAspectRatio === void 0 ? void 0 : fixedAspectRatio.height) || 9
369
- }),
370
- _useState6 = _slicedToArray(_useState5, 2),
371
- aspectRatio = _useState6[0],
372
- setAspectRatio = _useState6[1];
373
- var _useState7 = useState(DEFAULT_CROP_CONFIG),
374
- _useState8 = _slicedToArray(_useState7, 2),
375
- crop = _useState8[0],
376
- setCrop = _useState8[1];
377
- var _useTranslation = useTranslation(),
378
- t = _useTranslation.t;
379
- var _useCropImage = useCropImage(),
380
- cropImage = _useCropImage.mutate;
381
- var imageRef = useRef(null);
382
- var wrapperRef = useRef(null);
383
- var cropAspectRatio = isPresent(fixedAspectRatio === null || fixedAspectRatio === void 0 ? void 0 : fixedAspectRatio.width) && isPresent(fixedAspectRatio.height) ? (fixedAspectRatio === null || fixedAspectRatio === void 0 ? void 0 : fixedAspectRatio.width) / (fixedAspectRatio === null || fixedAspectRatio === void 0 ? void 0 : fixedAspectRatio.height) : 16 / 9;
384
- var processCrop = function processCrop() {
385
- if (isFullImage) {
386
- handleImageEditComplete(image);
387
- return;
388
- }
389
- cropImage({
390
- crop: getCropValues({
391
- crop: crop,
392
- imageRef: imageRef
393
- }),
394
- signedId: signedId
395
- }, {
396
- onSuccess: handleImageEditComplete
397
- });
398
- };
399
- var handleSubmit = function handleSubmit() {
400
- if (IS_DEVELOPMENT_OR_HEROKU_ENV) {
401
- processCrop();
402
- return;
403
- }
404
- if (isFullImage) {
405
- handleImageEditComplete(image);
406
- return;
407
- }
408
- var newURL = globalProps.assetsUploaderService === CLOUD_FLARE ? getCloudFlareCroppedURL({
409
- imageRef: imageRef,
410
- image: image,
411
- crop: crop
412
- }) : getImageKitCroppedURL({
413
- crop: crop,
414
- imageURL: image.url,
415
- imageRef: imageRef
416
- });
417
- handleImageEditComplete(mergeRight(image, {
418
- url: newURL
419
- }));
420
- };
421
- return /*#__PURE__*/jsxs("div", {
422
- className: "flex h-full flex-col gap-4 px-8 py-12",
423
- children: [/*#__PURE__*/jsx(Button, {
424
- className: "self-start",
425
- "data-cy": "image-editor-back-button",
426
- icon: LeftArrow,
427
- iconPosition: "left",
428
- style: "text",
429
- onClick: handleReset
430
- }), /*#__PURE__*/jsxs("div", {
431
- className: "flex h-full w-full flex-col gap-2 overflow-y-scroll md:flex-row md:overflow-y-auto",
432
- children: [/*#__PURE__*/jsx("div", {
433
- id: "imageEditor",
434
- ref: wrapperRef,
435
- className: classnames("flex", "h-full w-full md:w-4/6", "justify-around", "neeto-ui-bg-gray-200", {
436
- "items-center": isItemsCenter({
437
- wrapperRef: wrapperRef,
438
- imageRef: imageRef
439
- })
440
- }),
441
- children: /*#__PURE__*/jsx(ReactCrop, {
442
- crop: isFullImage ? null : crop,
443
- src: image === null || image === void 0 ? void 0 : image.url,
444
- aspect: isAspectRatioLocked ? aspectRatio.width / aspectRatio.height : 0,
445
- onChange: setCrop,
446
- onComplete: setCrop,
447
- children: /*#__PURE__*/jsx("img", {
448
- alt: t("neetoImageUploader.common.image"),
449
- "data-cy": "image-editor-uploaded-image",
450
- ref: imageRef,
451
- src: image === null || image === void 0 ? void 0 : image.url,
452
- onLoad: function onLoad(e) {
453
- return onImageLoaded({
454
- image: e.target,
455
- setCrop: setCrop,
456
- cropAspectRatio: cropAspectRatio
457
- });
458
- }
459
- })
460
- })
461
- }), /*#__PURE__*/jsx(Controls, {
462
- aspectRatio: aspectRatio,
463
- crop: crop,
464
- handleSubmit: handleSubmit,
465
- imageRef: imageRef,
466
- isAspectRatioLocked: isAspectRatioLocked,
467
- isFullImage: isFullImage,
468
- setAspectRatio: setAspectRatio,
469
- setCrop: setCrop,
470
- setIsFullImage: setIsFullImage,
471
- hideControls: isPresent(fixedAspectRatio),
472
- setAspectRatioLocked: setIsAspectRatioLocked
473
- })]
474
- })]
475
- });
476
- };
477
-
478
- var fetch = function fetch(_ref) {
479
- var searchTerm = _ref.searchTerm,
480
- url = _ref.url,
481
- page = _ref.page,
482
- per = _ref.per;
483
- return axios.get(url, {
484
- params: {
485
- searchTerm: searchTerm,
486
- page: page,
487
- per: per
488
- }
489
- });
490
- };
491
- var bulkDestroy = function bulkDestroy(imageIds, url) {
492
- return axios["delete"](url, {
493
- params: {
494
- imageIds: imageIds
495
- }
496
- });
497
- };
498
- var imagesApi = {
499
- fetch: fetch,
500
- bulkDestroy: bulkDestroy
501
- };
502
-
503
- function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
504
- function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
505
- var useFetchAssets = function useFetchAssets(_ref) {
506
- var searchTerm = _ref.searchTerm,
507
- url = _ref.url,
508
- per = _ref.per;
509
- var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
510
- return useInfiniteQuery(_objectSpread$3({
511
- queryKey: [QUERY_KEYS.ASSETS_LIST, searchTerm],
512
- queryFn: function queryFn(_ref2) {
513
- var _ref2$pageParam = _ref2.pageParam,
514
- pageParam = _ref2$pageParam === void 0 ? 1 : _ref2$pageParam;
515
- return imagesApi.fetch({
516
- searchTerm: searchTerm,
517
- url: url,
518
- page: pageParam,
519
- per: per
520
- });
521
- },
522
- getNextPageParam: function getNextPageParam(lastPage, _, lastPageParam) {
523
- return lastPage.length === IMAGES_PER_PAGE ? lastPageParam + 1 : null;
524
- },
525
- select: function select(data) {
526
- var results = data.pages.flatMap(identity);
527
- return {
528
- results: results
529
- };
530
- },
531
- initialPageParam: 1,
532
- staleTime: ASSETS_STALE_TIME
533
- }, options));
534
- };
535
- var useBulkDestroyAssets = function useBulkDestroyAssets(url) {
536
- var queryClient = useQueryClient();
537
- return useMutation({
538
- mutationFn: function mutationFn(imageIds) {
539
- return imagesApi.bulkDestroy(imageIds, url);
540
- },
541
- onSuccess: function onSuccess(_, variables) {
542
- queryClient.setQueriesData({
543
- queryKey: [QUERY_KEYS.ASSETS_LIST]
544
- }, function (old) {
545
- return {
546
- pages: old.pages.map(function (page) {
547
- return page.filter(function (item) {
548
- return !variables.includes(item.fileId || item.id);
549
- });
550
- }),
551
- pageParams: old.pageParams
552
- };
553
- });
554
- }
555
- });
556
- };
557
-
558
- var lib = {};
559
-
560
- var propTypes = {exports: {}};
561
-
562
- /**
563
- * Copyright (c) 2013-present, Facebook, Inc.
564
- *
565
- * This source code is licensed under the MIT license found in the
566
- * LICENSE file in the root directory of this source tree.
567
- */
568
-
569
- var ReactPropTypesSecret$1 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
570
-
571
- var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
572
-
573
- /**
574
- * Copyright (c) 2013-present, Facebook, Inc.
575
- *
576
- * This source code is licensed under the MIT license found in the
577
- * LICENSE file in the root directory of this source tree.
578
- */
579
-
580
- var ReactPropTypesSecret = ReactPropTypesSecret_1;
581
-
582
- function emptyFunction() {}
583
- function emptyFunctionWithReset() {}
584
- emptyFunctionWithReset.resetWarningCache = emptyFunction;
585
-
586
- var factoryWithThrowingShims = function() {
587
- function shim(props, propName, componentName, location, propFullName, secret) {
588
- if (secret === ReactPropTypesSecret) {
589
- // It is still safe when called from React.
590
- return;
591
- }
592
- var err = new Error(
593
- 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
594
- 'Use PropTypes.checkPropTypes() to call them. ' +
595
- 'Read more at http://fb.me/use-check-prop-types'
596
- );
597
- err.name = 'Invariant Violation';
598
- throw err;
599
- } shim.isRequired = shim;
600
- function getShim() {
601
- return shim;
602
- } // Important!
603
- // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
604
- var ReactPropTypes = {
605
- array: shim,
606
- bigint: shim,
607
- bool: shim,
608
- func: shim,
609
- number: shim,
610
- object: shim,
611
- string: shim,
612
- symbol: shim,
613
-
614
- any: shim,
615
- arrayOf: getShim,
616
- element: shim,
617
- elementType: shim,
618
- instanceOf: getShim,
619
- node: shim,
620
- objectOf: getShim,
621
- oneOf: getShim,
622
- oneOfType: getShim,
623
- shape: getShim,
624
- exact: getShim,
625
-
626
- checkPropTypes: emptyFunctionWithReset,
627
- resetWarningCache: emptyFunction
628
- };
629
-
630
- ReactPropTypes.PropTypes = ReactPropTypes;
631
-
632
- return ReactPropTypes;
633
- };
634
-
635
- /**
636
- * Copyright (c) 2013-present, Facebook, Inc.
637
- *
638
- * This source code is licensed under the MIT license found in the
639
- * LICENSE file in the root directory of this source tree.
640
- */
641
-
642
- {
643
- // By explicitly using `prop-types` you are opting into new production behavior.
644
- // http://fb.me/prop-types-in-prod
645
- propTypes.exports = factoryWithThrowingShims();
646
- }
647
-
648
- var propTypesExports = propTypes.exports;
649
-
650
- var _extends = Object.assign || function (target) {
651
- for (var i = 1; i < arguments.length; i++) {
652
- var source = arguments[i];
653
-
654
- for (var key in source) {
655
- if (Object.prototype.hasOwnProperty.call(source, key)) {
656
- target[key] = source[key];
657
- }
658
- }
659
- }
660
-
661
- return target;
662
- };
663
-
664
- var knot = function knot() {
665
- var extended = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
666
-
667
- var events = Object.create(null);
668
-
669
- function on(name, handler) {
670
- events[name] = events[name] || [];
671
- events[name].push(handler);
672
- return this;
673
- }
674
-
675
- function once(name, handler) {
676
- handler._once = true;
677
- on(name, handler);
678
- return this;
679
- }
680
-
681
- function off(name) {
682
- var handler = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
683
-
684
- handler ? events[name].splice(events[name].indexOf(handler), 1) : delete events[name];
685
-
686
- return this;
687
- }
688
-
689
- function emit(name) {
690
- var _this = this;
691
-
692
- for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
693
- args[_key - 1] = arguments[_key];
694
- }
695
-
696
- // cache the events, to avoid consequences of mutation
697
- var cache = events[name] && events[name].slice();
698
-
699
- // only fire handlers if they exist
700
- cache && cache.forEach(function (handler) {
701
- // remove handlers added with 'once'
702
- handler._once && off(name, handler);
703
-
704
- // set 'this' context, pass args to handlers
705
- handler.apply(_this, args);
706
- });
707
-
708
- return this;
709
- }
710
-
711
- return _extends({}, extended, {
712
-
713
- on: on,
714
- once: once,
715
- off: off,
716
- emit: emit
717
- });
718
- };
719
-
720
- var bricks = function bricks() {
721
- var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
722
-
723
- // privates
724
-
725
- var persist = void 0; // packing new elements, or all elements?
726
- var ticking = void 0; // for debounced resize
727
-
728
- var sizeIndex = void 0;
729
- var sizeDetail = void 0;
730
-
731
- var columnTarget = void 0;
732
- var columnHeights = void 0;
733
-
734
- var nodeTop = void 0;
735
- var nodeLeft = void 0;
736
- var nodeWidth = void 0;
737
- var nodeHeight = void 0;
738
-
739
- var nodes = void 0;
740
- var nodesWidths = void 0;
741
- var nodesHeights = void 0;
742
-
743
- // resolve options
744
-
745
- var packed = options.packed.indexOf('data-') === 0 ? options.packed : 'data-' + options.packed;
746
- var sizes = options.sizes.slice().reverse();
747
- var position = options.position !== false;
748
-
749
- var container = options.container.nodeType ? options.container : document.querySelector(options.container);
750
-
751
- var selectors = {
752
- all: function all() {
753
- return toArray(container.children);
754
- },
755
- new: function _new() {
756
- return toArray(container.children).filter(function (node) {
757
- return !node.hasAttribute('' + packed);
758
- });
759
- }
760
- };
761
-
762
- // series
763
-
764
- var setup = [setSizeIndex, setSizeDetail, setColumns];
765
-
766
- var run = [setNodes, setNodesDimensions, setNodesStyles, setContainerStyles];
767
-
768
- // instance
769
-
770
- var instance = knot({
771
- pack: pack,
772
- update: update,
773
- resize: resize
774
- });
775
-
776
- return instance;
777
-
778
- // general helpers
779
-
780
- function runSeries(functions) {
781
- functions.forEach(function (func) {
782
- return func();
783
- });
784
- }
785
-
786
- // array helpers
787
-
788
- function toArray(input) {
789
-
790
- return Array.prototype.slice.call(input);
791
- }
792
-
793
- function fillArray(length) {
794
- return Array.apply(null, Array(length)).map(function () {
795
- return 0;
796
- });
797
- }
798
-
799
- // size helpers
800
-
801
- function getSizeIndex() {
802
- // find index of widest matching media query
803
- return sizes.map(function (size) {
804
- return size.mq && window.matchMedia('(min-width: ' + size.mq + ')').matches;
805
- }).indexOf(true);
806
- }
807
-
808
- function setSizeIndex() {
809
- sizeIndex = getSizeIndex();
810
- }
811
-
812
- function setSizeDetail() {
813
- // if no media queries matched, use the base case
814
- sizeDetail = sizeIndex === -1 ? sizes[sizes.length - 1] : sizes[sizeIndex];
815
- }
816
-
817
- // column helpers
818
-
819
- function setColumns() {
820
- columnHeights = fillArray(sizeDetail.columns);
821
- }
822
-
823
- // node helpers
824
-
825
- function setNodes() {
826
- nodes = selectors[persist ? 'new' : 'all']();
827
- }
828
-
829
- function setNodesDimensions() {
830
- // exit if empty container
831
- if (nodes.length === 0) {
832
- return;
833
- }
834
-
835
- nodesWidths = nodes.map(function (element) {
836
- return element.clientWidth;
837
- });
838
- nodesHeights = nodes.map(function (element) {
839
- return element.clientHeight;
840
- });
841
- }
842
-
843
- function setNodesStyles() {
844
- nodes.forEach(function (element, index) {
845
- columnTarget = columnHeights.indexOf(Math.min.apply(Math, columnHeights));
846
-
847
- element.style.position = 'absolute';
848
-
849
- nodeTop = columnHeights[columnTarget] + 'px';
850
- nodeLeft = columnTarget * nodesWidths[index] + columnTarget * sizeDetail.gutter + 'px';
851
-
852
- // support positioned elements (default) or transformed elements
853
- if (position) {
854
- element.style.top = nodeTop;
855
- element.style.left = nodeLeft;
856
- } else {
857
- element.style.transform = 'translate3d(' + nodeLeft + ', ' + nodeTop + ', 0)';
858
- }
859
-
860
- element.setAttribute(packed, '');
861
-
862
- // ignore nodes with no width and/or height
863
- nodeWidth = nodesWidths[index];
864
- nodeHeight = nodesHeights[index];
865
-
866
- if (nodeWidth && nodeHeight) {
867
- columnHeights[columnTarget] += nodeHeight + sizeDetail.gutter;
868
- }
869
- });
870
- }
871
-
872
- // container helpers
873
-
874
- function setContainerStyles() {
875
- container.style.position = 'relative';
876
- container.style.width = sizeDetail.columns * nodeWidth + (sizeDetail.columns - 1) * sizeDetail.gutter + 'px';
877
- container.style.height = Math.max.apply(Math, columnHeights) - sizeDetail.gutter + 'px';
878
- }
879
-
880
- // resize helpers
881
-
882
- function resizeFrame() {
883
- if (!ticking) {
884
- window.requestAnimationFrame(resizeHandler);
885
- ticking = true;
886
- }
887
- }
888
-
889
- function resizeHandler() {
890
- if (sizeIndex !== getSizeIndex()) {
891
- pack();
892
- instance.emit('resize', sizeDetail);
893
- }
894
-
895
- ticking = false;
896
- }
897
-
898
- // API
899
-
900
- function pack() {
901
- persist = false;
902
- runSeries(setup.concat(run));
903
-
904
- return instance.emit('pack');
905
- }
906
-
907
- function update() {
908
- persist = true;
909
- runSeries(run);
910
-
911
- return instance.emit('update');
912
- }
913
-
914
- function resize() {
915
- var flag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
916
-
917
- var action = flag ? 'addEventListener' : 'removeEventListener';
918
-
919
- window[action]('resize', resizeFrame);
920
-
921
- return instance;
922
- }
923
- };
924
-
925
- var bricks_module = /*#__PURE__*/Object.freeze({
926
- __proto__: null,
927
- 'default': bricks
928
- });
929
-
930
- var require$$2 = /*@__PURE__*/getAugmentedNamespace(bricks_module);
931
-
932
- var InfiniteScroll = {exports: {}};
933
-
934
- InfiniteScroll.exports;
935
-
936
- (function (module, exports) {
937
-
938
- Object.defineProperty(exports, "__esModule", {
939
- value: true
940
- });
941
-
942
- var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
943
-
944
- var _react = require$$0;
945
-
946
- var _react2 = _interopRequireDefault(_react);
947
-
948
- var _propTypes = propTypesExports;
949
-
950
- var _propTypes2 = _interopRequireDefault(_propTypes);
951
-
952
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
953
-
954
- function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
955
-
956
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
957
-
958
- function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
959
-
960
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
961
-
962
- var InfiniteScroll = function (_Component) {
963
- _inherits(InfiniteScroll, _Component);
964
-
965
- function InfiniteScroll(props) {
966
- _classCallCheck(this, InfiniteScroll);
967
-
968
- var _this = _possibleConstructorReturn(this, (InfiniteScroll.__proto__ || Object.getPrototypeOf(InfiniteScroll)).call(this, props));
969
-
970
- _this.scrollListener = _this.scrollListener.bind(_this);
971
- _this.eventListenerOptions = _this.eventListenerOptions.bind(_this);
972
- _this.mousewheelListener = _this.mousewheelListener.bind(_this);
973
- return _this;
974
- }
975
-
976
- _createClass(InfiniteScroll, [{
977
- key: 'componentDidMount',
978
- value: function componentDidMount() {
979
- this.pageLoaded = this.props.pageStart;
980
- this.options = this.eventListenerOptions();
981
- this.attachScrollListener();
982
- }
983
- }, {
984
- key: 'componentDidUpdate',
985
- value: function componentDidUpdate() {
986
- if (this.props.isReverse && this.loadMore) {
987
- var parentElement = this.getParentElement(this.scrollComponent);
988
- parentElement.scrollTop = parentElement.scrollHeight - this.beforeScrollHeight + this.beforeScrollTop;
989
- this.loadMore = false;
990
- }
991
- this.attachScrollListener();
992
- }
993
- }, {
994
- key: 'componentWillUnmount',
995
- value: function componentWillUnmount() {
996
- this.detachScrollListener();
997
- this.detachMousewheelListener();
998
- }
999
- }, {
1000
- key: 'isPassiveSupported',
1001
- value: function isPassiveSupported() {
1002
- var passive = false;
1003
-
1004
- var testOptions = {
1005
- get passive() {
1006
- passive = true;
1007
- }
1008
- };
1009
-
1010
- try {
1011
- document.addEventListener('test', null, testOptions);
1012
- document.removeEventListener('test', null, testOptions);
1013
- } catch (e) {
1014
- // ignore
1015
- }
1016
- return passive;
1017
- }
1018
- }, {
1019
- key: 'eventListenerOptions',
1020
- value: function eventListenerOptions() {
1021
- var options = this.props.useCapture;
1022
-
1023
- if (this.isPassiveSupported()) {
1024
- options = {
1025
- useCapture: this.props.useCapture,
1026
- passive: true
1027
- };
1028
- } else {
1029
- options = {
1030
- passive: false
1031
- };
1032
- }
1033
- return options;
1034
- }
1035
-
1036
- // Set a defaut loader for all your `InfiniteScroll` components
1037
-
1038
- }, {
1039
- key: 'setDefaultLoader',
1040
- value: function setDefaultLoader(loader) {
1041
- this.defaultLoader = loader;
1042
- }
1043
- }, {
1044
- key: 'detachMousewheelListener',
1045
- value: function detachMousewheelListener() {
1046
- var scrollEl = window;
1047
- if (this.props.useWindow === false) {
1048
- scrollEl = this.scrollComponent.parentNode;
1049
- }
1050
-
1051
- scrollEl.removeEventListener('mousewheel', this.mousewheelListener, this.options ? this.options : this.props.useCapture);
1052
- }
1053
- }, {
1054
- key: 'detachScrollListener',
1055
- value: function detachScrollListener() {
1056
- var scrollEl = window;
1057
- if (this.props.useWindow === false) {
1058
- scrollEl = this.getParentElement(this.scrollComponent);
1059
- }
1060
-
1061
- scrollEl.removeEventListener('scroll', this.scrollListener, this.options ? this.options : this.props.useCapture);
1062
- scrollEl.removeEventListener('resize', this.scrollListener, this.options ? this.options : this.props.useCapture);
1063
- }
1064
- }, {
1065
- key: 'getParentElement',
1066
- value: function getParentElement(el) {
1067
- var scrollParent = this.props.getScrollParent && this.props.getScrollParent();
1068
- if (scrollParent != null) {
1069
- return scrollParent;
1070
- }
1071
- return el && el.parentNode;
1072
- }
1073
- }, {
1074
- key: 'filterProps',
1075
- value: function filterProps(props) {
1076
- return props;
1077
- }
1078
- }, {
1079
- key: 'attachScrollListener',
1080
- value: function attachScrollListener() {
1081
- var parentElement = this.getParentElement(this.scrollComponent);
1082
-
1083
- if (!this.props.hasMore || !parentElement) {
1084
- return;
1085
- }
1086
-
1087
- var scrollEl = window;
1088
- if (this.props.useWindow === false) {
1089
- scrollEl = parentElement;
1090
- }
1091
-
1092
- scrollEl.addEventListener('mousewheel', this.mousewheelListener, this.options ? this.options : this.props.useCapture);
1093
- scrollEl.addEventListener('scroll', this.scrollListener, this.options ? this.options : this.props.useCapture);
1094
- scrollEl.addEventListener('resize', this.scrollListener, this.options ? this.options : this.props.useCapture);
1095
-
1096
- if (this.props.initialLoad) {
1097
- this.scrollListener();
1098
- }
1099
- }
1100
- }, {
1101
- key: 'mousewheelListener',
1102
- value: function mousewheelListener(e) {
1103
- // Prevents Chrome hangups
1104
- // See: https://stackoverflow.com/questions/47524205/random-high-content-download-time-in-chrome/47684257#47684257
1105
- if (e.deltaY === 1 && !this.isPassiveSupported()) {
1106
- e.preventDefault();
1107
- }
1108
- }
1109
- }, {
1110
- key: 'scrollListener',
1111
- value: function scrollListener() {
1112
- var el = this.scrollComponent;
1113
- var scrollEl = window;
1114
- var parentNode = this.getParentElement(el);
1115
-
1116
- var offset = void 0;
1117
- if (this.props.useWindow) {
1118
- var doc = document.documentElement || document.body.parentNode || document.body;
1119
- var scrollTop = scrollEl.pageYOffset !== undefined ? scrollEl.pageYOffset : doc.scrollTop;
1120
- if (this.props.isReverse) {
1121
- offset = scrollTop;
1122
- } else {
1123
- offset = this.calculateOffset(el, scrollTop);
1124
- }
1125
- } else if (this.props.isReverse) {
1126
- offset = parentNode.scrollTop;
1127
- } else {
1128
- offset = el.scrollHeight - parentNode.scrollTop - parentNode.clientHeight;
1129
- }
1130
-
1131
- // Here we make sure the element is visible as well as checking the offset
1132
- if (offset < Number(this.props.threshold) && el && el.offsetParent !== null) {
1133
- this.detachScrollListener();
1134
- this.beforeScrollHeight = parentNode.scrollHeight;
1135
- this.beforeScrollTop = parentNode.scrollTop;
1136
- // Call loadMore after detachScrollListener to allow for non-async loadMore functions
1137
- if (typeof this.props.loadMore === 'function') {
1138
- this.props.loadMore(this.pageLoaded += 1);
1139
- this.loadMore = true;
1140
- }
1141
- }
1142
- }
1143
- }, {
1144
- key: 'calculateOffset',
1145
- value: function calculateOffset(el, scrollTop) {
1146
- if (!el) {
1147
- return 0;
1148
- }
1149
-
1150
- return this.calculateTopPosition(el) + (el.offsetHeight - scrollTop - window.innerHeight);
1151
- }
1152
- }, {
1153
- key: 'calculateTopPosition',
1154
- value: function calculateTopPosition(el) {
1155
- if (!el) {
1156
- return 0;
1157
- }
1158
- return el.offsetTop + this.calculateTopPosition(el.offsetParent);
1159
- }
1160
- }, {
1161
- key: 'render',
1162
- value: function render() {
1163
- var _this2 = this;
1164
-
1165
- var renderProps = this.filterProps(this.props);
1166
-
1167
- var children = renderProps.children,
1168
- element = renderProps.element,
1169
- hasMore = renderProps.hasMore;
1170
- renderProps.initialLoad;
1171
- var isReverse = renderProps.isReverse,
1172
- loader = renderProps.loader;
1173
- renderProps.loadMore;
1174
- renderProps.pageStart;
1175
- var ref = renderProps.ref;
1176
- renderProps.threshold;
1177
- renderProps.useCapture;
1178
- renderProps.useWindow;
1179
- renderProps.getScrollParent;
1180
- var props = _objectWithoutProperties(renderProps, ['children', 'element', 'hasMore', 'initialLoad', 'isReverse', 'loader', 'loadMore', 'pageStart', 'ref', 'threshold', 'useCapture', 'useWindow', 'getScrollParent']);
1181
-
1182
- props.ref = function (node) {
1183
- _this2.scrollComponent = node;
1184
- if (ref) {
1185
- ref(node);
1186
- }
1187
- };
1188
-
1189
- var childrenArray = [children];
1190
- if (hasMore) {
1191
- if (loader) {
1192
- isReverse ? childrenArray.unshift(loader) : childrenArray.push(loader);
1193
- } else if (this.defaultLoader) {
1194
- isReverse ? childrenArray.unshift(this.defaultLoader) : childrenArray.push(this.defaultLoader);
1195
- }
1196
- }
1197
- return _react2.default.createElement(element, props, childrenArray);
1198
- }
1199
- }]);
1200
-
1201
- return InfiniteScroll;
1202
- }(_react.Component);
1203
-
1204
- InfiniteScroll.propTypes = {
1205
- children: _propTypes2.default.node.isRequired,
1206
- element: _propTypes2.default.node,
1207
- hasMore: _propTypes2.default.bool,
1208
- initialLoad: _propTypes2.default.bool,
1209
- isReverse: _propTypes2.default.bool,
1210
- loader: _propTypes2.default.node,
1211
- loadMore: _propTypes2.default.func.isRequired,
1212
- pageStart: _propTypes2.default.number,
1213
- ref: _propTypes2.default.func,
1214
- getScrollParent: _propTypes2.default.func,
1215
- threshold: _propTypes2.default.number,
1216
- useCapture: _propTypes2.default.bool,
1217
- useWindow: _propTypes2.default.bool
1218
- };
1219
- InfiniteScroll.defaultProps = {
1220
- element: 'div',
1221
- hasMore: false,
1222
- initialLoad: true,
1223
- pageStart: 0,
1224
- ref: null,
1225
- threshold: 250,
1226
- useWindow: true,
1227
- isReverse: false,
1228
- useCapture: false,
1229
- loader: null,
1230
- getScrollParent: null
1231
- };
1232
- exports.default = InfiniteScroll;
1233
- module.exports = exports['default'];
1234
- } (InfiniteScroll, InfiniteScroll.exports));
1235
-
1236
- var InfiniteScrollExports = InfiniteScroll.exports;
1237
-
1238
- var reactInfiniteScroller = InfiniteScrollExports;
1239
-
1240
- Object.defineProperty(lib, "__esModule", {
1241
- value: true
1242
- });
1243
- var _default = lib.default = undefined;
1244
-
1245
- var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
1246
-
1247
- var _class, _temp2;
1248
-
1249
- var _react = require$$0;
1250
-
1251
- var _react2 = _interopRequireDefault(_react);
1252
-
1253
- var _propTypes = propTypesExports;
1254
-
1255
- var _propTypes2 = _interopRequireDefault(_propTypes);
1256
-
1257
- var _bricks = require$$2;
1258
-
1259
- var _bricks2 = _interopRequireDefault(_bricks);
1260
-
1261
- var _reactInfiniteScroller = reactInfiniteScroller;
1262
-
1263
- var _reactInfiniteScroller2 = _interopRequireDefault(_reactInfiniteScroller);
1264
-
1265
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
1266
-
1267
- function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
1268
-
1269
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
1270
-
1271
- function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
1272
-
1273
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
1274
-
1275
- var MasonryInfiniteScroller = (_temp2 = _class = function (_Component) {
1276
- _inherits(MasonryInfiniteScroller, _Component);
1277
-
1278
- function MasonryInfiniteScroller() {
1279
- var _ref;
1280
-
1281
- var _temp, _this, _ret;
1282
-
1283
- _classCallCheck(this, MasonryInfiniteScroller);
1284
-
1285
- for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
1286
- args[_key] = arguments[_key];
1287
- }
1288
-
1289
- return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MasonryInfiniteScroller.__proto__ || Object.getPrototypeOf(MasonryInfiniteScroller)).call.apply(_ref, [this].concat(args))), _this), _this.setContainerRef = function (component) {
1290
- _this.masonryContainer = component;
1291
- }, _this.forcePack = function () {
1292
- if (_this.masonryContainer) {
1293
- _this.state.instance.pack();
1294
- }
1295
- }, _this.forceUpdate = function () {
1296
- if (_this.masonryContainer) {
1297
- _this.state.instance.update();
1298
- }
1299
- }, _this.createNewInstance = function () {
1300
- var _this$props = _this.props,
1301
- packed = _this$props.packed,
1302
- sizes = _this$props.sizes,
1303
- children = _this$props.children,
1304
- position = _this$props.position;
1305
-
1306
- var instance = (0, _bricks2.default)({
1307
- container: _this.masonryContainer,
1308
- packed: packed,
1309
- sizes: sizes,
1310
- position: position
1311
- });
1312
-
1313
- instance.resize(true);
1314
-
1315
- if (children.length > 0) {
1316
- instance.pack();
1317
- }
1318
-
1319
- _this.setState(function () {
1320
- return { instance: instance };
1321
- });
1322
- }, _temp), _possibleConstructorReturn(_this, _ret);
1323
- }
1324
-
1325
- _createClass(MasonryInfiniteScroller, [{
1326
- key: 'componentDidMount',
1327
- value: function componentDidMount() {
1328
- this.createNewInstance();
1329
- }
1330
- }, {
1331
- key: 'componentDidUpdate',
1332
- value: function componentDidUpdate(prevProps) {
1333
- var children = this.props.children;
1334
- var instance = this.state.instance;
1335
-
1336
-
1337
- if (prevProps.children.length === 0 && children.length === 0) {
1338
- return;
1339
- }
1340
-
1341
- if (prevProps.children.length === 0 && children.length > 0) {
1342
- return instance.pack();
1343
- }
1344
-
1345
- if (prevProps.children.length !== children.length) {
1346
- if (this.props.pack) {
1347
- return instance.pack();
1348
- } else {
1349
- return instance.update();
1350
- }
1351
- }
1352
- }
1353
- }, {
1354
- key: 'componentWillUnmount',
1355
- value: function componentWillUnmount() {
1356
- if (this.state) {
1357
- this.state.instance.resize(false);
1358
- }
1359
- }
1360
- }, {
1361
- key: 'render',
1362
- value: function render() {
1363
- var _props = this.props,
1364
- children = _props.children,
1365
- className = _props.className,
1366
- style = _props.style;
1367
- _props.pack;
1368
- _props.packed;
1369
- _props.position;
1370
- _props.sizes;
1371
- var props = _objectWithoutProperties(_props, ['children', 'className', 'style', 'pack', 'packed', 'position', 'sizes']);
1372
-
1373
- return _react2.default.createElement(
1374
- _reactInfiniteScroller2.default,
1375
- props,
1376
- _react2.default.createElement(
1377
- 'div',
1378
- { ref: this.setContainerRef, className: className, style: style },
1379
- children
1380
- )
1381
- );
1382
- }
1383
- }]);
1384
-
1385
- return MasonryInfiniteScroller;
1386
- }(_react.Component), _class.propTypes = {
1387
- children: _propTypes2.default.arrayOf(_propTypes2.default.element).isRequired,
1388
- className: _propTypes2.default.string,
1389
- initialLoad: _propTypes2.default.bool,
1390
- pack: _propTypes2.default.bool,
1391
- packed: _propTypes2.default.string,
1392
- position: _propTypes2.default.bool,
1393
- sizes: _propTypes2.default.array,
1394
- style: _propTypes2.default.object
1395
- }, _class.defaultProps = {
1396
- className: '',
1397
- initialLoad: true,
1398
- pack: false,
1399
- packed: 'data-packed',
1400
- position: true,
1401
- sizes: [{ columns: 1, gutter: 20 }, { mq: '768px', columns: 2, gutter: 20 }, { mq: '1024px', columns: 3, gutter: 20 }],
1402
- style: {}
1403
- }, _temp2);
1404
- _default = lib.default = MasonryInfiniteScroller;
1405
-
1406
- var css = ".niu-unsplash-container {\n height: calc(75vh - 220px) !important;\n max-height: 355px;\n}\n.niu-unsplash-container img {\n height: 100%;\n width: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n animation: fade-in 1.2s 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;\n border-radius: var(--neeto-ui-rounded);\n position: relative;\n cursor: pointer;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX2ltYWdlLWxpYnJhcnkuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2Fic3RyYWN0cy9fdmFyaWFibGVzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR0E7RUFDRSxxQ0FBQTtFQUNBLGlCQ0NrQztBREhwQztBQUlFO0VBQ0UsWUFBQTtFQUNBLFdBQUE7RUFDQSxvQkFBQTtLQUFBLGlCQUFBO0VBQ0EsbUVBQUE7RUFDQSxzQ0FBQTtFQUNBLGtCQUFBO0VBQ0EsZUFBQTtBQUZKIiwic291cmNlc0NvbnRlbnQiOlsiLy9BYnN0cmFjdHNcbkBpbXBvcnQgXCIuLi9hYnN0cmFjdHMvdmFyaWFibGVzXCI7XG5cbi5uaXUtdW5zcGxhc2gtY29udGFpbmVyIHtcbiAgaGVpZ2h0OiBjYWxjKCN7JG5pdS1tb2RhbC1oZWlnaHR9IC0gI3skbml1LW1vZGFsLWhlYWRlci1oZWlnaHR9KSAhaW1wb3J0YW50O1xuICBtYXgtaGVpZ2h0OiAkbml1LXVuc3BsYXNoLWNvbnRhaW5lci1tYXgtaGVpZ2h0O1xuXG4gIGltZyB7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuICAgIGFuaW1hdGlvbjogZmFkZS1pbiAxLjJzIDFzIGN1YmljLWJlemllcigwLjM5LCAwLjU3NSwgMC41NjUsIDEpIGJvdGg7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tbmVldG8tdWktcm91bmRlZCk7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgfVxufVxuIiwiJG5pdS1tb2RhbC13aWR0aDogOTV2dztcbiRuaXUtbW9kYWwtaGVpZ2h0OiA3NXZoO1xuJG5pdS1tb2RhbC1tYXgtd2lkdGg6IDExNTJweDtcbiRuaXUtbW9kYWwtbWF4LWhlaWdodDogNTc2cHg7XG4kbml1LW1vZGFsLWhlYWRlci1oZWlnaHQ6IDIyMHB4O1xuXG4kbml1LXVuc3BsYXNoLWNvbnRhaW5lci1tYXgtaGVpZ2h0OiAzNTVweDtcbiJdfQ== */";
1407
- n(css,{});
1408
-
1409
- var Menu = Dropdown.Menu,
1410
- MenuItem = Dropdown.MenuItem;
1411
- var InfiniteScroller = function InfiniteScroller(_ref) {
1412
- var _ref$hasMore = _ref.hasMore,
1413
- hasMore = _ref$hasMore === void 0 ? false : _ref$hasMore,
1414
- _ref$loadMore = _ref.loadMore,
1415
- loadMore = _ref$loadMore === void 0 ? noop : _ref$loadMore,
1416
- tab = _ref.tab,
1417
- images = _ref.images,
1418
- _ref$setSelectedImage = _ref.setSelectedImage,
1419
- setSelectedImage = _ref$setSelectedImage === void 0 ? noop : _ref$setSelectedImage,
1420
- _ref$handleUnsplashIm = _ref.handleUnsplashImageSelect,
1421
- handleUnsplashImageSelect = _ref$handleUnsplashIm === void 0 ? noop : _ref$handleUnsplashIm;
1422
- var _useTranslation = useTranslation(),
1423
- t = _useTranslation.t;
1424
- var _useState = useState({
1425
- isOpen: false,
1426
- imageIds: []
1427
- }),
1428
- _useState2 = _slicedToArray(_useState, 2),
1429
- deleteConfirmation = _useState2[0],
1430
- setDeleteConfirmation = _useState2[1];
1431
- var isMenuButtonEnabled = globalProps.assetsUploaderService !== CLOUD_FLARE;
1432
- var _useBulkDestroyAssets = useBulkDestroyAssets(ASSETS_DESTROY_URL),
1433
- isPending = _useBulkDestroyAssets.isPending,
1434
- bulkDelete = _useBulkDestroyAssets.mutate;
1435
- var handleDelete = useCallback(function () {
1436
- bulkDelete(deleteConfirmation.imageIds, {
1437
- onSuccess: function onSuccess() {
1438
- return setDeleteConfirmation({
1439
- isOpen: false,
1440
- imageIds: []
1441
- });
1442
- }
1443
- });
1444
- }, [deleteConfirmation.imageIds]);
1445
- var Loader = /*#__PURE__*/jsx("div", {
1446
- className: "flex justify-center",
1447
- children: /*#__PURE__*/jsx(Spinner, {})
1448
- });
1449
- return /*#__PURE__*/jsxs("div", {
1450
- className: "niu-unsplash-container mr-2 max-w-full overflow-x-hidden overflow-y-scroll",
1451
- children: [/*#__PURE__*/jsx(_default, {
1452
- hasMore: hasMore,
1453
- loadMore: loadMore,
1454
- pack: true,
1455
- position: true,
1456
- className: "w-full",
1457
- loader: Loader,
1458
- sizes: INFINITE_SCROLLER_SIZES,
1459
- style: INFINITE_SCROLLER_STYLE,
1460
- useWindow: false,
1461
- children: images.map(function (image, index) {
1462
- var _image$urls, _image$user, _image$user2;
1463
- return /*#__PURE__*/jsx("div", {
1464
- className: "float-left w-1/2 pb-4 pr-4 md:w-1/4",
1465
- children: /*#__PURE__*/jsx("div", {
1466
- className: "relative w-full",
1467
- style: {
1468
- paddingBottom: "".concat(image.height / image.width * 100, "%")
1469
- },
1470
- children: /*#__PURE__*/jsxs("div", {
1471
- className: "neeto-ui-rounded-sm neeto-ui-bg-gray-100 group absolute h-full w-full",
1472
- "data-cy": "library-image-card",
1473
- id: "unsplashImage".concat(image.id),
1474
- children: [tab === TABS[1].key && /*#__PURE__*/jsxs(Fragment, {
1475
- children: [/*#__PURE__*/jsx("img", {
1476
- "data-cy": "niu-unsplash-image-".concat(index),
1477
- src: image === null || image === void 0 ? void 0 : (_image$urls = image.urls) === null || _image$urls === void 0 ? void 0 : _image$urls.regular,
1478
- onClick: function onClick() {
1479
- return handleUnsplashImageSelect(image);
1480
- }
1481
- }), /*#__PURE__*/jsxs("a", {
1482
- className: "neeto-ui-text-gray-100 absolute bottom-2 left-2 m-auto text-xs underline opacity-0 group-hover:opacity-100",
1483
- href: "https://unsplash.com/@".concat(image === null || image === void 0 ? void 0 : (_image$user = image.user) === null || _image$user === void 0 ? void 0 : _image$user.username),
1484
- rel: "noreferrer",
1485
- target: "_blank",
1486
- children: [image === null || image === void 0 ? void 0 : (_image$user2 = image.user) === null || _image$user2 === void 0 ? void 0 : _image$user2.name, " | ", " ", t("neetoImageUploader.labels.unsplash")]
1487
- })]
1488
- }), tab === TABS[0].key && /*#__PURE__*/jsxs(Fragment, {
1489
- children: [hasPermission(VIEW_ROLES_PERMISSION) && isMenuButtonEnabled && /*#__PURE__*/jsx(Dropdown, {
1490
- buttonSize: "small",
1491
- buttonStyle: "tertiary",
1492
- "data-cy": "image-library-image-options-".concat(index),
1493
- icon: MenuHorizontal,
1494
- buttonProps: {
1495
- className:
1496
- // eslint-disable-next-line @bigbinary/neeto/use-neetoui-classes
1497
- "absolute right-2 top-2 z-[1] rounded-full"
1498
- },
1499
- children: /*#__PURE__*/jsx(Menu, {
1500
- children: /*#__PURE__*/jsx(MenuItem.Button, {
1501
- "data-cy": "image-library-image-delete",
1502
- onClick: function onClick() {
1503
- return setDeleteConfirmation({
1504
- isOpen: true,
1505
- imageIds: [(image === null || image === void 0 ? void 0 : image.fileId) || image.id]
1506
- });
1507
- },
1508
- children: t("neetoImageUploader.deleteConfirmation.delete")
1509
- })
1510
- })
1511
- }), /*#__PURE__*/jsx("img", {
1512
- "data-cy": "niu-library-image-".concat(index),
1513
- src: image === null || image === void 0 ? void 0 : image.url,
1514
- onClick: function onClick() {
1515
- return setSelectedImage(image);
1516
- }
1517
- })]
1518
- })]
1519
- })
1520
- })
1521
- }, image.id);
1522
- })
1523
- }), /*#__PURE__*/jsx(Alert, {
1524
- isOpen: deleteConfirmation.isOpen,
1525
- isSubmitting: isPending,
1526
- message: t("neetoImageUploader.deleteConfirmation.message"),
1527
- submitButtonLabel: t("neetoImageUploader.deleteConfirmation.delete"),
1528
- title: t("neetoImageUploader.deleteConfirmation.title"),
1529
- onClose: function onClose() {
1530
- return setDeleteConfirmation({
1531
- isOpen: false,
1532
- imageIds: []
1533
- });
1534
- },
1535
- onSubmit: handleDelete
1536
- })]
1537
- });
1538
- };
1539
-
1540
- var Images = function Images(_ref) {
1541
- var debouncedQuery = _ref.debouncedQuery,
1542
- setSelectedImage = _ref.setSelectedImage;
1543
- var _useTranslation = useTranslation(),
1544
- t = _useTranslation.t;
1545
- var _useFetchAssets = useFetchAssets({
1546
- searchTerm: debouncedQuery,
1547
- per: IMAGES_PER_PAGE,
1548
- url: ASSETS_FETCH_URL
1549
- }),
1550
- fetchNextPage = _useFetchAssets.fetchNextPage,
1551
- hasNextPage = _useFetchAssets.hasNextPage,
1552
- _useFetchAssets$data = _useFetchAssets.data,
1553
- _useFetchAssets$data2 = _useFetchAssets$data === void 0 ? {} : _useFetchAssets$data,
1554
- _useFetchAssets$data3 = _useFetchAssets$data2.results,
1555
- results = _useFetchAssets$data3 === void 0 ? [] : _useFetchAssets$data3,
1556
- isLoading = _useFetchAssets.isLoading,
1557
- isError = _useFetchAssets.isError;
1558
- if (isError) {
1559
- return /*#__PURE__*/jsx(Typography, {
1560
- className: "mt-9 flex justify-center",
1561
- style: "body2",
1562
- children: t("neetoImageUploader.unsplash.errorMessage")
1563
- });
1564
- }
1565
- if (isLoading) {
1566
- return /*#__PURE__*/jsx("div", {
1567
- className: "flex justify-around",
1568
- children: /*#__PURE__*/jsx(Spinner, {})
1569
- });
1570
- }
1571
- return /*#__PURE__*/createElement(InfiniteScroller, {
1572
- setSelectedImage: setSelectedImage,
1573
- hasMore: hasNextPage,
1574
- images: results,
1575
- key: debouncedQuery,
1576
- loadMore: fetchNextPage,
1577
- tab: TABS[0].key
1578
- });
1579
- };
1580
-
1581
- var newAxiosInstance = axios.create();
1582
- var searchUnsplashImages = function searchUnsplashImages(_ref) {
1583
- var pageNo = _ref.pageNo,
1584
- query = _ref.query;
1585
- return axios.get("neeto_image_uploader_engine/unsplash/fetch", {
1586
- params: {
1587
- page: pageNo,
1588
- per_page: 30,
1589
- query: query || "latest"
1590
- }
1591
- });
1592
- };
1593
- var getUnsplashImage = function getUnsplashImage(url) {
1594
- var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
1595
- return newAxiosInstance.get(url, config);
1596
- };
1597
- var unsplashApi = {
1598
- searchUnsplashImages: searchUnsplashImages,
1599
- getUnsplashImage: getUnsplashImage
1600
- };
1601
-
1602
- function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1603
- function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1604
- var UNSPLASH_LIST = QUERY_KEYS.UNSPLASH_LIST;
1605
- var useFetchUnsplashImages = function useFetchUnsplashImages(_ref) {
1606
- var query = _ref.query;
1607
- var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
1608
- return useInfiniteQuery(_objectSpread$2({
1609
- queryKey: [UNSPLASH_LIST, {
1610
- query: query
1611
- }],
1612
- queryFn: function queryFn(_ref2) {
1613
- var _ref2$pageParam = _ref2.pageParam,
1614
- pageParam = _ref2$pageParam === void 0 ? 1 : _ref2$pageParam;
1615
- return unsplashApi.searchUnsplashImages({
1616
- pageNo: pageParam,
1617
- query: query
1618
- });
1619
- },
1620
- initialPageParam: 1,
1621
- getNextPageParam: function getNextPageParam(lastPage, _, lastPageParam) {
1622
- return lastPageParam < lastPage.totalPages ? lastPageParam + 1 : null;
1623
- },
1624
- select: function select(data) {
1625
- var results = data.pages.flatMap(prop("results"));
1626
- return {
1627
- results: results
1628
- };
1629
- },
1630
- staleTime: UNSPLASH_STALE_TIME,
1631
- placeholderData: keepPreviousData
1632
- }, options));
1633
- };
1634
-
1635
- function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1636
- function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1637
- var UnsplashLibrary = function UnsplashLibrary(_ref) {
1638
- var debouncedQuery = _ref.debouncedQuery,
1639
- setSelectedImage = _ref.setSelectedImage,
1640
- setIsUploading = _ref.setIsUploading,
1641
- setActiveTab = _ref.setActiveTab;
1642
- var _useCreateBlob = useCreateBlob(),
1643
- createBlob = _useCreateBlob.mutate;
1644
- var handleBlobCreation = function handleBlobCreation(image) {
1645
- var payload = {
1646
- filename: generateASCIIFileName(image.filename),
1647
- content_type: image.contentType,
1648
- byte_size: image.byteSize,
1649
- checksum: image.checksum,
1650
- metadata: _objectSpread$1(_objectSpread$1({}, image.metadata), {}, {
1651
- url: image.url,
1652
- isCropped: false
1653
- }),
1654
- service_name: "cloudflare_image"
1655
- };
1656
- createBlob(payload);
1657
- };
1658
- var handleUploadComplete = function handleUploadComplete(image) {
1659
- globalProps.assetsUploaderService === CLOUD_FLARE && handleBlobCreation(image);
1660
- setSelectedImage(image);
1661
- };
1662
- var _useImageUploader = useImageUploader({
1663
- onUploadComplete: handleUploadComplete,
1664
- setIsUploading: setIsUploading
1665
- }),
1666
- uploadFile = _useImageUploader.uploadFile;
1667
- var handleUnsplashImageSelect = /*#__PURE__*/function () {
1668
- var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
1669
- var _image$urls, response, file;
1670
- return _regeneratorRuntime.wrap(function _callee$(_context) {
1671
- while (1) switch (_context.prev = _context.next) {
1672
- case 0:
1673
- _context.prev = 0;
1674
- setIsUploading(true);
1675
- _context.next = 4;
1676
- return unsplashApi.getUnsplashImage((_image$urls = image.urls) === null || _image$urls === void 0 ? void 0 : _image$urls.regular, UNSPLASH_DEFAULT_REQUEST_CONFIG);
1677
- case 4:
1678
- response = _context.sent;
1679
- file = new File([response.data], UNSPLASH_DEFAULT_NAME, {
1680
- type: response.data.type
1681
- });
1682
- uploadFile(file);
1683
- _context.next = 14;
1684
- break;
1685
- case 9:
1686
- _context.prev = 9;
1687
- _context.t0 = _context["catch"](0);
1688
- Toastr.error(_context.t0);
1689
- setActiveTab(TABS[0].key);
1690
- setIsUploading(false);
1691
- case 14:
1692
- case "end":
1693
- return _context.stop();
1694
- }
1695
- }, _callee, null, [[0, 9]]);
1696
- }));
1697
- return function handleUnsplashImageSelect(_x) {
1698
- return _ref2.apply(this, arguments);
1699
- };
1700
- }();
1701
- var _useTranslation = useTranslation(),
1702
- t = _useTranslation.t;
1703
- var _useFetchUnsplashImag = useFetchUnsplashImages({
1704
- query: debouncedQuery
1705
- }),
1706
- fetchNextPage = _useFetchUnsplashImag.fetchNextPage,
1707
- hasNextPage = _useFetchUnsplashImag.hasNextPage,
1708
- _useFetchUnsplashImag2 = _useFetchUnsplashImag.data,
1709
- _useFetchUnsplashImag3 = _useFetchUnsplashImag2 === void 0 ? {} : _useFetchUnsplashImag2,
1710
- _useFetchUnsplashImag4 = _useFetchUnsplashImag3.results,
1711
- results = _useFetchUnsplashImag4 === void 0 ? [] : _useFetchUnsplashImag4,
1712
- isError = _useFetchUnsplashImag.isError,
1713
- isLoading = _useFetchUnsplashImag.isLoading;
1714
- if (isError) {
1715
- return /*#__PURE__*/jsx(Typography, {
1716
- className: "mt-9 flex justify-center",
1717
- style: "body2",
1718
- children: t("neetoImageUploader.unsplash.errorMessage")
1719
- });
1720
- }
1721
- if (isLoading) {
1722
- return /*#__PURE__*/jsx("div", {
1723
- className: "flex justify-around",
1724
- children: /*#__PURE__*/jsx(Spinner, {})
1725
- });
1726
- }
1727
- return /*#__PURE__*/createElement(InfiniteScroller, {
1728
- debouncedQuery: debouncedQuery,
1729
- handleUnsplashImageSelect: handleUnsplashImageSelect,
1730
- hasMore: hasNextPage,
1731
- images: results,
1732
- key: debouncedQuery,
1733
- loadMore: fetchNextPage,
1734
- tab: TABS[1].key
1735
- });
1736
- };
1737
-
1738
- var ImageLibrary = function ImageLibrary(_ref) {
1739
- var setSelectedImage = _ref.setSelectedImage,
1740
- tab = _ref.tab,
1741
- setIsUploading = _ref.setIsUploading,
1742
- setActiveTab = _ref.setActiveTab;
1743
- var _useState = useState(""),
1744
- _useState2 = _slicedToArray(_useState, 2),
1745
- query = _useState2[0],
1746
- setQuery = _useState2[1];
1747
- var _useTranslation = useTranslation(),
1748
- t = _useTranslation.t;
1749
- var debouncedQuery = useDebounce(query, 400);
1750
- var inputPlaceHolder = equals(tab, TABS[1].key) ? t("neetoImageUploader.placeholders.searchImageFromWeb") : t("neetoImageUploader.placeholders.searchImage");
1751
- useEffect(function () {
1752
- setQuery("");
1753
- }, [tab]);
1754
- return /*#__PURE__*/jsxs("div", {
1755
- className: "w-full pb-2 pl-6 pt-1",
1756
- children: [/*#__PURE__*/jsx(Input, {
1757
- autoFocus: true,
1758
- className: "mb-4 mr-6",
1759
- "data-cy": "niu-unsplash-image-picker-search-input",
1760
- name: "text",
1761
- placeholder: inputPlaceHolder,
1762
- value: query,
1763
- onChange: function onChange(_ref2) {
1764
- var value = _ref2.target.value;
1765
- return setQuery(value);
1766
- }
1767
- }), tab === TABS[0].key ? /*#__PURE__*/jsx(Images, {
1768
- debouncedQuery: debouncedQuery,
1769
- query: query,
1770
- setSelectedImage: setSelectedImage
1771
- }) : /*#__PURE__*/jsx(UnsplashLibrary, {
1772
- debouncedQuery: debouncedQuery,
1773
- query: query,
1774
- setActiveTab: setActiveTab,
1775
- setIsUploading: setIsUploading,
1776
- setSelectedImage: setSelectedImage
1777
- })]
1778
- });
1779
- };
1780
-
1781
- var _excluded = ["key"];
1782
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
1783
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
1784
- var Modal = function Modal(_ref) {
1785
- var isOpen = _ref.isOpen,
1786
- _ref$onClose = _ref.onClose,
1787
- onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
1788
- _ref$onUploadComplete = _ref.onUploadComplete,
1789
- onUploadComplete = _ref$onUploadComplete === void 0 ? noop : _ref$onUploadComplete,
1790
- _ref$uploadConfig = _ref.uploadConfig,
1791
- uploadConfig = _ref$uploadConfig === void 0 ? {} : _ref$uploadConfig,
1792
- _ref$fixedAspectRatio = _ref.fixedAspectRatio,
1793
- fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio;
1794
- var _useState = useState(TABS[0].key),
1795
- _useState2 = _slicedToArray(_useState, 2),
1796
- activeTab = _useState2[0],
1797
- setActiveTab = _useState2[1];
1798
- var _useState3 = useState({}),
1799
- _useState4 = _slicedToArray(_useState3, 2),
1800
- selectedImage = _useState4[0],
1801
- setSelectedImage = _useState4[1];
1802
- var _useState5 = useState(false),
1803
- _useState6 = _slicedToArray(_useState5, 2),
1804
- isUploading = _useState6[0],
1805
- setIsUploading = _useState6[1];
1806
- var _useTranslation = useTranslation(),
1807
- t = _useTranslation.t;
1808
- var _useCreateBlob = useCreateBlob(),
1809
- createBlob = _useCreateBlob.mutate;
1810
- var uploadConfigWithDefaults = mergeRight(DEFAULT_UPLOAD_CONFIG, uploadConfig);
1811
- var isCloudFlareImageUploader = globalProps.assetsUploaderService === CLOUD_FLARE;
1812
- var handleCloseModal = function handleCloseModal() {
1813
- onClose();
1814
- setSelectedImage({});
1815
- };
1816
- var handleImageEditComplete = function handleImageEditComplete(editedImage) {
1817
- handleCreateBlob(editedImage, true);
1818
- handleCloseModal();
1819
- };
1820
- var handleUploadComplete = function handleUploadComplete(image) {
1821
- isCloudFlareImageUploader && handleCreateBlob(image);
1822
- setSelectedImage(image);
1823
- };
1824
- var handleCreateBlob = function handleCreateBlob(editedImage) {
1825
- var isCropped = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
1826
- if (IS_DEVELOPMENT_OR_HEROKU_ENV) {
1827
- onUploadComplete({
1828
- url: editedImage.url,
1829
- signedId: editedImage.signedId
1830
- });
1831
- } else {
1832
- var imageKitPayload = function imageKitPayload() {
1833
- return {
1834
- filename: generateASCIIFileName(editedImage.name),
1835
- byte_size: editedImage.size,
1836
- content_type: editedImage.fileType,
1837
- checksum: editedImage.fileId,
1838
- metadata: editedImage,
1839
- service_name: "imagekitio"
1840
- };
1841
- };
1842
- var cloudFlarePayload = function cloudFlarePayload() {
1843
- return {
1844
- filename: generateASCIIFileName(editedImage.filename),
1845
- content_type: editedImage.contentType,
1846
- byte_size: editedImage.byteSize,
1847
- checksum: editedImage.checksum,
1848
- metadata: _objectSpread(_objectSpread({}, editedImage.metadata), {}, {
1849
- url: editedImage.url,
1850
- isCropped: isCropped
1851
- }),
1852
- service_name: "cloudflare_image"
1853
- };
1854
- };
1855
- var payload = isCloudFlareImageUploader ? cloudFlarePayload() : imageKitPayload();
1856
- createBlob(payload, {
1857
- onSuccess: function onSuccess(image) {
1858
- onUploadComplete({
1859
- url: image.blobUrl,
1860
- signedId: image.signedId
1861
- });
1862
- },
1863
- onError: Toastr.error
1864
- });
1865
- }
1866
- };
1867
- var _useImageUploader = useImageUploader({
1868
- onUploadComplete: handleUploadComplete,
1869
- setIsUploading: setIsUploading
1870
- }),
1871
- uploadFile = _useImageUploader.uploadFile;
1872
- var _useUploadDropzone = useUploadDropzone({
1873
- uploadConfig: uploadConfigWithDefaults,
1874
- onDrop: uploadFile
1875
- }),
1876
- getRootProps = _useUploadDropzone.getRootProps,
1877
- getInputProps = _useUploadDropzone.getInputProps,
1878
- isDragActive = _useUploadDropzone.isDragActive,
1879
- inputRef = _useUploadDropzone.inputRef;
1880
- var openFileUploadDialog = function openFileUploadDialog() {
1881
- var _inputRef$current;
1882
- return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
1883
- };
1884
- var options = createOptions([{
1885
- key: "local",
1886
- onClick: openFileUploadDialog
1887
- }]);
1888
- useEffect(function () {
1889
- setActiveTab(TABS[0].key);
1890
- }, [isOpen]);
1891
- return /*#__PURE__*/jsxs(NeetoUIModal, {
1892
- isOpen: isOpen,
1893
- className: "niu-modal",
1894
- size: "large",
1895
- onClose: handleCloseModal,
1896
- children: [isUploading && /*#__PURE__*/jsx("div", {
1897
- className: "neeto-ui-bg-gray-400 absolute inset-0 z-50 flex h-full items-center justify-center opacity-50",
1898
- children: /*#__PURE__*/jsx(Spinner, {})
1899
- }), isNilOrEmpty(selectedImage) && isDragActive && /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
1900
- className: "neeto-ui-rounded-xl neeto-ui-bg-gray-400 absolute flex h-full w-full flex-col items-center justify-around border-4 border-dashed border-gray-900 opacity-40"
1901
- }, getRootProps()), {}, {
1902
- children: /*#__PURE__*/jsx(Typography, {
1903
- children: t("neetoImageUploader.common.dropHere")
1904
- })
1905
- })), !isNilOrEmpty(selectedImage) ? /*#__PURE__*/jsx(ImageEditor, {
1906
- fixedAspectRatio: fixedAspectRatio,
1907
- handleImageEditComplete: handleImageEditComplete,
1908
- handleReset: function handleReset() {
1909
- return setSelectedImage({});
1910
- },
1911
- image: selectedImage,
1912
- signedId: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.signedId
1913
- }) : /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
1914
- className: "h-full flex-col"
1915
- }, getRootProps({
1916
- onClick: function onClick(event) {
1917
- return event.stopPropagation();
1918
- }
1919
- })), {}, {
1920
- children: [/*#__PURE__*/jsx(NeetoUIModal.Header, {
1921
- children: /*#__PURE__*/jsx(Typography, {
1922
- style: "h2",
1923
- children: t("neetoImageUploader.common.imageLibrary")
1924
- })
1925
- }), /*#__PURE__*/jsx("div", {
1926
- className: "px-6 py-2",
1927
- children: /*#__PURE__*/jsxs("div", {
1928
- className: "flex flex-col items-center justify-between gap-2 sm:flex-row",
1929
- children: [/*#__PURE__*/jsx("div", {
1930
- className: "flex gap-2",
1931
- children: /*#__PURE__*/jsx(Tab, {
1932
- size: "small",
1933
- children: TABS.map(function (tab) {
1934
- return /*#__PURE__*/jsx(Tab.Item, {
1935
- active: activeTab === tab.key,
1936
- "data-cy": tab.dataCy,
1937
- onClick: function onClick() {
1938
- return setActiveTab(tab.key);
1939
- },
1940
- children: tab.label
1941
- }, tab.key);
1942
- })
1943
- })
1944
- }), /*#__PURE__*/jsx("div", {
1945
- className: "flex gap-2",
1946
- children: options.map(function (_ref2) {
1947
- var key = _ref2.key,
1948
- otherProps = _objectWithoutProperties$1(_ref2, _excluded);
1949
- return /*#__PURE__*/createElement(Button, _objectSpread(_objectSpread({}, otherProps), {}, {
1950
- key: key,
1951
- size: "small"
1952
- }));
1953
- })
1954
- })]
1955
- })
1956
- }), /*#__PURE__*/jsx(ImageLibrary, {
1957
- setActiveTab: setActiveTab,
1958
- setIsUploading: setIsUploading,
1959
- setSelectedImage: setSelectedImage,
1960
- tab: activeTab
1961
- }), equals(activeTab, TABS[1].key) && /*#__PURE__*/jsx(NeetoUIModal.Footer, {
1962
- className: "flex items-center justify-center gap-2",
1963
- children: /*#__PURE__*/jsx(Typography, {
1964
- style: "body2",
1965
- children: /*#__PURE__*/jsx(Trans, {
1966
- i18nKey: "neetoImageUploader.unsplash.poweredByUnsplash",
1967
- components: {
1968
- a: /*#__PURE__*/jsx("a", {
1969
- href: UNSPLASH_URL,
1970
- rel: "noreferrer",
1971
- target: "_blank"
1972
- })
1973
- }
1974
- })
1975
- })
1976
- })]
1977
- })), /*#__PURE__*/jsx("input", _objectSpread({}, getInputProps()))]
1978
- });
1979
- };
1980
-
1981
- export { Modal as default };
1982
38
  //# sourceMappingURL=AssetLibrary.js.map