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