@bigbinary/neeto-image-uploader-frontend 4.0.2 → 4.0.4

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