@bigbinary/neeto-image-uploader-frontend 1.5.26 → 1.6.0-beta1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +559 -498
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +492 -431
- package/dist/index.js.map +1 -1
- package/package.json +11 -11
package/dist/index.cjs.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var require$$0 = require('react');
|
|
6
6
|
var classnames = require('classnames');
|
|
7
7
|
var neetoCist = require('@bigbinary/neeto-cist');
|
|
8
8
|
var neetoIcons = require('@bigbinary/neeto-icons');
|
|
@@ -13,12 +13,13 @@ var reactI18next = require('react-i18next');
|
|
|
13
13
|
var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
|
|
14
14
|
var i18next = require('i18next');
|
|
15
15
|
var Toastr = require('@bigbinary/neetoui/Toastr');
|
|
16
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
16
17
|
var Dropdown = require('@bigbinary/neetoui/Dropdown');
|
|
17
18
|
var NeetoUIModal = require('@bigbinary/neetoui/Modal');
|
|
18
19
|
var Tab = require('@bigbinary/neetoui/Tab');
|
|
19
20
|
var Spinner = require('@bigbinary/neetoui/Spinner');
|
|
21
|
+
var reactQuery = require('@tanstack/react-query');
|
|
20
22
|
var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
|
|
21
|
-
var reactQuery = require('react-query');
|
|
22
23
|
var axios = require('axios');
|
|
23
24
|
var activestorage = require('@rails/activestorage');
|
|
24
25
|
var utils = require('@bigbinary/neeto-commons-frontend/utils');
|
|
@@ -27,7 +28,7 @@ var Switch = require('@bigbinary/neetoui/Switch');
|
|
|
27
28
|
|
|
28
29
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
29
30
|
|
|
30
|
-
var
|
|
31
|
+
var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
|
|
31
32
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
32
33
|
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
33
34
|
var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
|
|
@@ -46,21 +47,6 @@ var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r
|
|
|
46
47
|
var css = ".ReactCrop{position:relative;display:inline-block;cursor:crosshair;overflow:hidden;max-width:100%}.ReactCrop *,.ReactCrop *::before,.ReactCrop *::after{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{max-height:inherit}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-width:100%;max-height:inherit}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video{touch-action:none}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-selection{position:absolute;top:0;left:0;transform:translate3d(0, 0, 0);cursor:move;box-shadow:0 0 0 9999em rgba(0,0,0,.5);border:1px dashed #fff}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%;box-shadow:0px 0px 1px 1px #fff,0 0 0 9999em rgba(0,0,0,.5)}.ReactCrop__crop-selection:focus{outline:none;border-color:blue;border-style:solid}.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-vt::before,.ReactCrop__rule-of-thirds-vt::after,.ReactCrop__rule-of-thirds-hz::before,.ReactCrop__rule-of-thirds-hz::after{content:\"\";display:block;position:absolute;background-color:rgba(255,255,255,.4)}.ReactCrop__rule-of-thirds-vt::before,.ReactCrop__rule-of-thirds-vt::after{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt::before{left:33.3333333333%}.ReactCrop__rule-of-thirds-vt::after{left:66.6666666667%}.ReactCrop__rule-of-thirds-hz::before,.ReactCrop__rule-of-thirds-hz::after{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz::before{top:33.3333333333%}.ReactCrop__rule-of-thirds-hz::after{top:66.6666666667%}.ReactCrop__drag-handle{position:absolute}.ReactCrop__drag-handle::after{position:absolute;content:\"\";display:block;width:10px;height:10px;background-color:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.7);outline:1px solid rgba(0,0,0,0)}.ReactCrop__drag-handle:focus::after{border-color:blue;background:#2dbfff}.ReactCrop .ord-nw{top:0;left:0;margin-top:-5px;margin-left:-5px;cursor:nw-resize}.ReactCrop .ord-nw::after{top:0;left:0}.ReactCrop .ord-n{top:0;left:50%;margin-top:-5px;margin-left:-5px;cursor:n-resize}.ReactCrop .ord-n::after{top:0}.ReactCrop .ord-ne{top:0;right:0;margin-top:-5px;margin-right:-5px;cursor:ne-resize}.ReactCrop .ord-ne::after{top:0;right:0}.ReactCrop .ord-e{top:50%;right:0;margin-top:-5px;margin-right:-5px;cursor:e-resize}.ReactCrop .ord-e::after{right:0}.ReactCrop .ord-se{bottom:0;right:0;margin-bottom:-5px;margin-right:-5px;cursor:se-resize}.ReactCrop .ord-se::after{bottom:0;right:0}.ReactCrop .ord-s{bottom:0;left:50%;margin-bottom:-5px;margin-left:-5px;cursor:s-resize}.ReactCrop .ord-s::after{bottom:0}.ReactCrop .ord-sw{bottom:0;left:0;margin-bottom:-5px;margin-left:-5px;cursor:sw-resize}.ReactCrop .ord-sw::after{bottom:0;left:0}.ReactCrop .ord-w{top:50%;left:0;margin-top:-5px;margin-left:-5px;cursor:w-resize}.ReactCrop .ord-w::after{left:0}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{top:0;left:0;width:100%;height:6px;margin-top:-3px}.ReactCrop__drag-bar.ord-e{right:0;top:0;width:6px;height:100%;margin-right:-3px}.ReactCrop__drag-bar.ord-s{bottom:0;left:0;width:100%;height:6px;margin-bottom:-3px}.ReactCrop__drag-bar.ord-w{top:0;left:0;width:6px;height:100%;margin-left:-3px}.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar{display:none}.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}@media(pointer: coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:24px;height:24px}}.niu-modal {\n width: 95vw !important;\n height: 75vh !important;\n max-width: 1152px !important;\n max-height: 576px !important;\n position: relative !important;\n}.niu-unsplash-container {\n height: calc(75vh - 220px) !important;\n max-height: 355px;\n}.niu-unsplash-container img {\n height: 100%;\n width: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n animation: fade-in 1.2s 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;\n border-radius: var(--neeto-ui-rounded);\n position: relative;\n cursor: pointer;\n}.ReactCrop .ReactCrop__child-wrapper {\n width: 100%;\n height: 100%;\n}.ReactCrop .ReactCrop__child-wrapper img {\n height: auto;\n width: auto;\n max-width: 100%;\n max-height: 100%;\n display: block;\n}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9yZWFjdC1pbWFnZS1jcm9wL2Rpc3QvUmVhY3RDcm9wLmNzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX21vZGFsLnNjc3MiLCJhcHAvamF2YXNjcmlwdC9zdHlsZXNoZWV0cy9hcHBsaWNhdGlvbi5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvY29tcG9uZW50cy9faW1hZ2UtbGlicmFyeS5zY3NzIiwiYXBwL2phdmFzY3JpcHQvc3R5bGVzaGVldHMvYWJzdHJhY3RzL192YXJpYWJsZXMuc2NzcyIsImFwcC9qYXZhc2NyaXB0L3N0eWxlc2hlZXRzL2NvbXBvbmVudHMvX3JlYWN0LWNyb3Auc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxXQUFXLGlCQUFpQixDQUFDLG9CQUFvQixDQUFDLGdCQUFnQixDQUFDLGVBQWUsQ0FBQyxjQUFjLENBQUMsc0RBQXNELHFCQUFxQixDQUFDLHdDQUF3QyxjQUFjLENBQUMsMEJBQTBCLGtCQUFrQixDQUFDLDhEQUE4RCxhQUFhLENBQUMsY0FBYyxDQUFDLGtCQUFrQixDQUFDLHdJQUF3SSxpQkFBaUIsQ0FBQyxnRUFBZ0UsaUJBQWlCLENBQUMsMkJBQTJCLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsOEJBQThCLENBQUMsV0FBVyxDQUFDLHNDQUFzQyxDQUFDLHNCQUFzQixDQUFDLGdEQUFnRCxjQUFjLENBQUMscURBQXFELGlCQUFpQixDQUFDLDJEQUEyRCxDQUFDLGlDQUFpQyxZQUFZLENBQUMsaUJBQWlCLENBQUMsa0JBQWtCLENBQUMsc0RBQXNELFlBQVksQ0FBQyxzSkFBc0osVUFBVSxDQUFDLGFBQWEsQ0FBQyxpQkFBaUIsQ0FBQyxxQ0FBcUMsQ0FBQywyRUFBMkUsU0FBUyxDQUFDLFdBQVcsQ0FBQyxzQ0FBb0QsbUJBQW1CLENBQUMscUNBQW1ELG1CQUFtQixDQUFDLDJFQUEyRSxVQUFVLENBQUMsVUFBVSxDQUFDLHNDQUFtRCxrQkFBa0IsQ0FBQyxxQ0FBa0Qsa0JBQWtCLENBQUMsd0JBQXdCLGlCQUFpQixDQUFDLCtCQUErQixpQkFBaUIsQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLFVBQVUsQ0FBQyxXQUFXLENBQUMsK0JBQStCLENBQUMscUNBQXFDLENBQUMsK0JBQStCLENBQUMscUNBQXFDLGlCQUFpQixDQUFDLGtCQUFrQixDQUFDLG1CQUFtQixLQUFLLENBQUMsTUFBTSxDQUFDLGVBQWUsQ0FBQyxnQkFBZ0IsQ0FBQyxnQkFBZ0IsQ0FBQywwQkFBMEIsS0FBSyxDQUFDLE1BQU0sQ0FBQyxrQkFBa0IsS0FBSyxDQUFDLFFBQVEsQ0FBQyxlQUFlLENBQUMsZ0JBQWdCLENBQUMsZUFBZSxDQUFDLHlCQUF5QixLQUFLLENBQUMsbUJBQW1CLEtBQUssQ0FBQyxPQUFPLENBQUMsZUFBZSxDQUFDLGlCQUFpQixDQUFDLGdCQUFnQixDQUFDLDBCQUEwQixLQUFLLENBQUMsT0FBTyxDQUFDLGtCQUFrQixPQUFPLENBQUMsT0FBTyxDQUFDLGVBQWUsQ0FBQyxpQkFBaUIsQ0FBQyxlQUFlLENBQUMseUJBQXlCLE9BQU8sQ0FBQyxtQkFBbUIsUUFBUSxDQUFDLE9BQU8sQ0FBQyxrQkFBa0IsQ0FBQyxpQkFBaUIsQ0FBQyxnQkFBZ0IsQ0FBQywwQkFBMEIsUUFBUSxDQUFDLE9BQU8sQ0FBQyxrQkFBa0IsUUFBUSxDQUFDLFFBQVEsQ0FBQyxrQkFBa0IsQ0FBQyxnQkFBZ0IsQ0FBQyxlQUFlLENBQUMseUJBQXlCLFFBQVEsQ0FBQyxtQkFBbUIsUUFBUSxDQUFDLE1BQU0sQ0FBQyxrQkFBa0IsQ0FBQyxnQkFBZ0IsQ0FBQyxnQkFBZ0IsQ0FBQywwQkFBMEIsUUFBUSxDQUFDLE1BQU0sQ0FBQyxrQkFBa0IsT0FBTyxDQUFDLE1BQU0sQ0FBQyxlQUFlLENBQUMsZ0JBQWdCLENBQUMsZUFBZSxDQUFDLHlCQUF5QixNQUFNLENBQUMsNkNBQTZDLGNBQWMsQ0FBQyxxQkFBcUIsaUJBQWlCLENBQUMsMkJBQTJCLEtBQUssQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLFVBQVUsQ0FBQyxlQUFlLENBQUMsMkJBQTJCLE9BQU8sQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLFdBQVcsQ0FBQyxpQkFBaUIsQ0FBQywyQkFBMkIsUUFBUSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUMsVUFBVSxDQUFDLGtCQUFrQixDQUFDLDJCQUEyQixLQUFLLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsZ0JBQWdCLENBQUMscUlBQXFJLFlBQVksQ0FBQyw0TkFBNE4sWUFBWSxDQUFDLHdCQUF3Qix3RUFBd0UsWUFBWSxDQUFDLHdCQUF3QixVQUFVLENBQUMsV0FBVyxDQUFDLENDQS8rSDtFQUNFLHNCQUFBO0VBQ0EsdUJBQUE7RUFDQSw0QkFBQTtFQUNBLDRCQUFBO0VBQ0EsNkJBQUE7QUNFRixDQ1BBO0VBQ0UscUNBQUE7RUFDQSxpQkNJa0M7QUZNcEMsQ0NSRTtFQUNFLFlBQUE7RUFDQSxXQUFBO0VBQ0Esb0JBQUE7S0FBQSxpQkFBQTtFQUNBLG1FQUFBO0VBQ0Esc0NBQUE7RUFDQSxrQkFBQTtFQUNBLGVBQUE7QURVSixDR3BCRTtFQUNFLFdBQUE7RUFDQSxZQUFBO0FIdUJKLENHckJJO0VBQ0UsWUFBQTtFQUNBLFdBQUE7RUFDQSxlQUFBO0VBQ0EsZ0JBQUE7RUFDQSxjQUFBO0FIdUJOIiwic291cmNlc0NvbnRlbnQiOlsiLlJlYWN0Q3JvcHtwb3NpdGlvbjpyZWxhdGl2ZTtkaXNwbGF5OmlubGluZS1ibG9jaztjdXJzb3I6Y3Jvc3NoYWlyO292ZXJmbG93OmhpZGRlbjttYXgtd2lkdGg6MTAwJX0uUmVhY3RDcm9wICosLlJlYWN0Q3JvcCAqOjpiZWZvcmUsLlJlYWN0Q3JvcCAqOjphZnRlcntib3gtc2l6aW5nOmJvcmRlci1ib3h9LlJlYWN0Q3JvcC0tZGlzYWJsZWQsLlJlYWN0Q3JvcC0tbG9ja2Vke2N1cnNvcjppbmhlcml0fS5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXJ7bWF4LWhlaWdodDppbmhlcml0fS5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXI+aW1nLC5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXI+dmlkZW97ZGlzcGxheTpibG9jazttYXgtd2lkdGg6MTAwJTttYXgtaGVpZ2h0OmluaGVyaXR9LlJlYWN0Q3JvcDpub3QoLlJlYWN0Q3JvcC0tZGlzYWJsZWQpIC5SZWFjdENyb3BfX2NoaWxkLXdyYXBwZXI+aW1nLC5SZWFjdENyb3A6bm90KC5SZWFjdENyb3AtLWRpc2FibGVkKSAuUmVhY3RDcm9wX19jaGlsZC13cmFwcGVyPnZpZGVve3RvdWNoLWFjdGlvbjpub25lfS5SZWFjdENyb3A6bm90KC5SZWFjdENyb3AtLWRpc2FibGVkKSAuUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbnt0b3VjaC1hY3Rpb246bm9uZX0uUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbntwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDtsZWZ0OjA7dHJhbnNmb3JtOnRyYW5zbGF0ZTNkKDAsIDAsIDApO2N1cnNvcjptb3ZlO2JveC1zaGFkb3c6MCAwIDAgOTk5OWVtIHJnYmEoMCwwLDAsLjUpO2JvcmRlcjoxcHggZGFzaGVkICNmZmZ9LlJlYWN0Q3JvcC0tZGlzYWJsZWQgLlJlYWN0Q3JvcF9fY3JvcC1zZWxlY3Rpb257Y3Vyc29yOmluaGVyaXR9LlJlYWN0Q3JvcC0tY2lyY3VsYXItY3JvcCAuUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbntib3JkZXItcmFkaXVzOjUwJTtib3gtc2hhZG93OjBweCAwcHggMXB4IDFweCAjZmZmLDAgMCAwIDk5OTllbSByZ2JhKDAsMCwwLC41KX0uUmVhY3RDcm9wX19jcm9wLXNlbGVjdGlvbjpmb2N1c3tvdXRsaW5lOm5vbmU7Ym9yZGVyLWNvbG9yOmJsdWU7Ym9yZGVyLXN0eWxlOnNvbGlkfS5SZWFjdENyb3AtLWludmlzaWJsZS1jcm9wIC5SZWFjdENyb3BfX2Nyb3Atc2VsZWN0aW9ue2Rpc3BsYXk6bm9uZX0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy12dDo6YmVmb3JlLC5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLXZ0OjphZnRlciwuUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy1oejo6YmVmb3JlLC5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLWh6OjphZnRlcntjb250ZW50OlwiXCI7ZGlzcGxheTpibG9jaztwb3NpdGlvbjphYnNvbHV0ZTtiYWNrZ3JvdW5kLWNvbG9yOnJnYmEoMjU1LDI1NSwyNTUsLjQpfS5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLXZ0OjpiZWZvcmUsLlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtdnQ6OmFmdGVye3dpZHRoOjFweDtoZWlnaHQ6MTAwJX0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy12dDo6YmVmb3Jle2xlZnQ6MzMuMzMzMyU7bGVmdDozMy4zMzMzMzMzMzMzJX0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy12dDo6YWZ0ZXJ7bGVmdDo2Ni42NjY2JTtsZWZ0OjY2LjY2NjY2NjY2NjclfS5SZWFjdENyb3BfX3J1bGUtb2YtdGhpcmRzLWh6OjpiZWZvcmUsLlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtaHo6OmFmdGVye3dpZHRoOjEwMCU7aGVpZ2h0OjFweH0uUmVhY3RDcm9wX19ydWxlLW9mLXRoaXJkcy1oejo6YmVmb3Jle3RvcDozMy4zMzMzJTt0b3A6MzMuMzMzMzMzMzMzMyV9LlJlYWN0Q3JvcF9fcnVsZS1vZi10aGlyZHMtaHo6OmFmdGVye3RvcDo2Ni42NjY2JTt0b3A6NjYuNjY2NjY2NjY2NyV9LlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGV7cG9zaXRpb246YWJzb2x1dGV9LlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGU6OmFmdGVye3Bvc2l0aW9uOmFic29sdXRlO2NvbnRlbnQ6XCJcIjtkaXNwbGF5OmJsb2NrO3dpZHRoOjEwcHg7aGVpZ2h0OjEwcHg7YmFja2dyb3VuZC1jb2xvcjpyZ2JhKDAsMCwwLC4yKTtib3JkZXI6MXB4IHNvbGlkIHJnYmEoMjU1LDI1NSwyNTUsLjcpO291dGxpbmU6MXB4IHNvbGlkIHJnYmEoMCwwLDAsMCl9LlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGU6Zm9jdXM6OmFmdGVye2JvcmRlci1jb2xvcjpibHVlO2JhY2tncm91bmQ6IzJkYmZmZn0uUmVhY3RDcm9wIC5vcmQtbnd7dG9wOjA7bGVmdDowO21hcmdpbi10b3A6LTVweDttYXJnaW4tbGVmdDotNXB4O2N1cnNvcjpudy1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLW53OjphZnRlcnt0b3A6MDtsZWZ0OjB9LlJlYWN0Q3JvcCAub3JkLW57dG9wOjA7bGVmdDo1MCU7bWFyZ2luLXRvcDotNXB4O21hcmdpbi1sZWZ0Oi01cHg7Y3Vyc29yOm4tcmVzaXplfS5SZWFjdENyb3AgLm9yZC1uOjphZnRlcnt0b3A6MH0uUmVhY3RDcm9wIC5vcmQtbmV7dG9wOjA7cmlnaHQ6MDttYXJnaW4tdG9wOi01cHg7bWFyZ2luLXJpZ2h0Oi01cHg7Y3Vyc29yOm5lLXJlc2l6ZX0uUmVhY3RDcm9wIC5vcmQtbmU6OmFmdGVye3RvcDowO3JpZ2h0OjB9LlJlYWN0Q3JvcCAub3JkLWV7dG9wOjUwJTtyaWdodDowO21hcmdpbi10b3A6LTVweDttYXJnaW4tcmlnaHQ6LTVweDtjdXJzb3I6ZS1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLWU6OmFmdGVye3JpZ2h0OjB9LlJlYWN0Q3JvcCAub3JkLXNle2JvdHRvbTowO3JpZ2h0OjA7bWFyZ2luLWJvdHRvbTotNXB4O21hcmdpbi1yaWdodDotNXB4O2N1cnNvcjpzZS1yZXNpemV9LlJlYWN0Q3JvcCAub3JkLXNlOjphZnRlcntib3R0b206MDtyaWdodDowfS5SZWFjdENyb3AgLm9yZC1ze2JvdHRvbTowO2xlZnQ6NTAlO21hcmdpbi1ib3R0b206LTVweDttYXJnaW4tbGVmdDotNXB4O2N1cnNvcjpzLXJlc2l6ZX0uUmVhY3RDcm9wIC5vcmQtczo6YWZ0ZXJ7Ym90dG9tOjB9LlJlYWN0Q3JvcCAub3JkLXN3e2JvdHRvbTowO2xlZnQ6MDttYXJnaW4tYm90dG9tOi01cHg7bWFyZ2luLWxlZnQ6LTVweDtjdXJzb3I6c3ctcmVzaXplfS5SZWFjdENyb3AgLm9yZC1zdzo6YWZ0ZXJ7Ym90dG9tOjA7bGVmdDowfS5SZWFjdENyb3AgLm9yZC13e3RvcDo1MCU7bGVmdDowO21hcmdpbi10b3A6LTVweDttYXJnaW4tbGVmdDotNXB4O2N1cnNvcjp3LXJlc2l6ZX0uUmVhY3RDcm9wIC5vcmQtdzo6YWZ0ZXJ7bGVmdDowfS5SZWFjdENyb3BfX2Rpc2FibGVkIC5SZWFjdENyb3BfX2RyYWctaGFuZGxle2N1cnNvcjppbmhlcml0fS5SZWFjdENyb3BfX2RyYWctYmFye3Bvc2l0aW9uOmFic29sdXRlfS5SZWFjdENyb3BfX2RyYWctYmFyLm9yZC1ue3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlO2hlaWdodDo2cHg7bWFyZ2luLXRvcDotM3B4fS5SZWFjdENyb3BfX2RyYWctYmFyLm9yZC1le3JpZ2h0OjA7dG9wOjA7d2lkdGg6NnB4O2hlaWdodDoxMDAlO21hcmdpbi1yaWdodDotM3B4fS5SZWFjdENyb3BfX2RyYWctYmFyLm9yZC1ze2JvdHRvbTowO2xlZnQ6MDt3aWR0aDoxMDAlO2hlaWdodDo2cHg7bWFyZ2luLWJvdHRvbTotM3B4fS5SZWFjdENyb3BfX2RyYWctYmFyLm9yZC13e3RvcDowO2xlZnQ6MDt3aWR0aDo2cHg7aGVpZ2h0OjEwMCU7bWFyZ2luLWxlZnQ6LTNweH0uUmVhY3RDcm9wLS1uZXctY3JvcCAuUmVhY3RDcm9wX19kcmFnLWJhciwuUmVhY3RDcm9wLS1uZXctY3JvcCAuUmVhY3RDcm9wX19kcmFnLWhhbmRsZSwuUmVhY3RDcm9wLS1maXhlZC1hc3BlY3QgLlJlYWN0Q3JvcF9fZHJhZy1iYXJ7ZGlzcGxheTpub25lfS5SZWFjdENyb3AtLWZpeGVkLWFzcGVjdCAuUmVhY3RDcm9wX19kcmFnLWhhbmRsZS5vcmQtbiwuUmVhY3RDcm9wLS1maXhlZC1hc3BlY3QgLlJlYWN0Q3JvcF9fZHJhZy1oYW5kbGUub3JkLWUsLlJlYWN0Q3JvcC0tZml4ZWQtYXNwZWN0IC5SZWFjdENyb3BfX2RyYWctaGFuZGxlLm9yZC1zLC5SZWFjdENyb3AtLWZpeGVkLWFzcGVjdCAuUmVhY3RDcm9wX19kcmFnLWhhbmRsZS5vcmQtd3tkaXNwbGF5Om5vbmV9QG1lZGlhKHBvaW50ZXI6IGNvYXJzZSl7LlJlYWN0Q3JvcCAub3JkLW4sLlJlYWN0Q3JvcCAub3JkLWUsLlJlYWN0Q3JvcCAub3JkLXMsLlJlYWN0Q3JvcCAub3JkLXd7ZGlzcGxheTpub25lfS5SZWFjdENyb3BfX2RyYWctaGFuZGxle3dpZHRoOjI0cHg7aGVpZ2h0OjI0cHh9fVxuIiwiLm5pdS1tb2RhbCB7XG4gIHdpZHRoOiAkbml1LW1vZGFsLXdpZHRoICFpbXBvcnRhbnQ7XG4gIGhlaWdodDogJG5pdS1tb2RhbC1oZWlnaHQgIWltcG9ydGFudDtcbiAgbWF4LXdpZHRoOiAkbml1LW1vZGFsLW1heC13aWR0aCAhaW1wb3J0YW50O1xuICBtYXgtaGVpZ2h0OiAkbml1LW1vZGFsLW1heC1oZWlnaHQgIWltcG9ydGFudDtcbiAgcG9zaXRpb246IHJlbGF0aXZlICFpbXBvcnRhbnQ7XG59XG4iLCJAaW1wb3J0IFwicmVhY3QtaW1hZ2UtY3JvcC9kaXN0L1JlYWN0Q3JvcC5jc3NcIjtcblxuLy9BYnN0cmFjdHNcbkBpbXBvcnQgXCJhYnN0cmFjdHMvdmFyaWFibGVzXCI7XG5cbi8vQ29tcG9uZW50c1xuQGltcG9ydCBcIi4vY29tcG9uZW50cy9tb2RhbFwiO1xuQGltcG9ydCBcIi4vY29tcG9uZW50cy9pbWFnZS1saWJyYXJ5XCI7XG5AaW1wb3J0IFwiLi9jb21wb25lbnRzL3JlYWN0LWNyb3BcIjtcbiIsIi5uaXUtdW5zcGxhc2gtY29udGFpbmVyIHtcbiAgaGVpZ2h0OiBjYWxjKCN7JG5pdS1tb2RhbC1oZWlnaHR9IC0gI3skbml1LW1vZGFsLWhlYWRlci1oZWlnaHR9KSAhaW1wb3J0YW50O1xuICBtYXgtaGVpZ2h0OiAkbml1LXVuc3BsYXNoLWNvbnRhaW5lci1tYXgtaGVpZ2h0O1xuXG4gIGltZyB7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG9iamVjdC1maXQ6IGNvdmVyO1xuICAgIGFuaW1hdGlvbjogZmFkZS1pbiAxLjJzIDFzIGN1YmljLWJlemllcigwLjM5LCAwLjU3NSwgMC41NjUsIDEpIGJvdGg7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tbmVldG8tdWktcm91bmRlZCk7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgfVxufVxuIiwiJG5pdS1tb2RhbC13aWR0aDogOTV2dztcbiRuaXUtbW9kYWwtaGVpZ2h0OiA3NXZoO1xuJG5pdS1tb2RhbC1tYXgtd2lkdGg6IDExNTJweDtcbiRuaXUtbW9kYWwtbWF4LWhlaWdodDogNTc2cHg7XG4kbml1LW1vZGFsLWhlYWRlci1oZWlnaHQ6IDIyMHB4O1xuXG4kbml1LXVuc3BsYXNoLWNvbnRhaW5lci1tYXgtaGVpZ2h0OiAzNTVweDtcbiIsIi5SZWFjdENyb3Age1xuICAuUmVhY3RDcm9wX19jaGlsZC13cmFwcGVyIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG5cbiAgICBpbWcge1xuICAgICAgaGVpZ2h0OiBhdXRvO1xuICAgICAgd2lkdGg6IGF1dG87XG4gICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgICBtYXgtaGVpZ2h0OiAxMDAlO1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgfVxuICB9XG59XG4iXX0= */";
|
|
47
48
|
n(css,{});
|
|
48
49
|
|
|
49
|
-
function _extends$1() {
|
|
50
|
-
_extends$1 = Object.assign ? Object.assign.bind() : function (target) {
|
|
51
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
52
|
-
var source = arguments[i];
|
|
53
|
-
for (var key in source) {
|
|
54
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
55
|
-
target[key] = source[key];
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
return target;
|
|
60
|
-
};
|
|
61
|
-
return _extends$1.apply(this, arguments);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
50
|
function _typeof$2(o) {
|
|
65
51
|
"@babel/helpers - typeof";
|
|
66
52
|
|
|
@@ -756,9 +742,9 @@ function _iterableToArray$1(iter) { if (typeof Symbol !== "undefined" && iter[Sy
|
|
|
756
742
|
|
|
757
743
|
function _arrayWithoutHoles$1(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$1(arr); }
|
|
758
744
|
|
|
759
|
-
function ownKeys$
|
|
745
|
+
function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
760
746
|
|
|
761
|
-
function _objectSpread$
|
|
747
|
+
function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
762
748
|
|
|
763
749
|
function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
764
750
|
|
|
@@ -975,7 +961,7 @@ function pickerOptionsFromAccept(accept) {
|
|
|
975
961
|
mimeType = _ref5[0],
|
|
976
962
|
ext = _ref5[1];
|
|
977
963
|
|
|
978
|
-
return _objectSpread$
|
|
964
|
+
return _objectSpread$b(_objectSpread$b({}, agg), {}, _defineProperty$2({}, mimeType, ext));
|
|
979
965
|
}, {});
|
|
980
966
|
return [{
|
|
981
967
|
// description is required due to https://crbug.com/1264708
|
|
@@ -1088,9 +1074,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
|
|
|
1088
1074
|
|
|
1089
1075
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
1090
1076
|
|
|
1091
|
-
function ownKeys$
|
|
1077
|
+
function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
1092
1078
|
|
|
1093
|
-
function _objectSpread$
|
|
1079
|
+
function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
1094
1080
|
|
|
1095
1081
|
function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
1096
1082
|
|
|
@@ -1112,7 +1098,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
1112
1098
|
* ```
|
|
1113
1099
|
*/
|
|
1114
1100
|
|
|
1115
|
-
var Dropzone = /*#__PURE__*/
|
|
1101
|
+
var Dropzone = /*#__PURE__*/require$$0.forwardRef(function (_ref, ref) {
|
|
1116
1102
|
var children = _ref.children,
|
|
1117
1103
|
params = _objectWithoutProperties$1(_ref, _excluded$5);
|
|
1118
1104
|
|
|
@@ -1120,13 +1106,13 @@ var Dropzone = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
1120
1106
|
open = _useDropzone.open,
|
|
1121
1107
|
props = _objectWithoutProperties$1(_useDropzone, _excluded2);
|
|
1122
1108
|
|
|
1123
|
-
|
|
1109
|
+
require$$0.useImperativeHandle(ref, function () {
|
|
1124
1110
|
return {
|
|
1125
1111
|
open: open
|
|
1126
1112
|
};
|
|
1127
1113
|
}, [open]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
|
|
1128
1114
|
|
|
1129
|
-
return /*#__PURE__*/
|
|
1115
|
+
return /*#__PURE__*/require$$0__default["default"].createElement(require$$0.Fragment, null, children(_objectSpread$a(_objectSpread$a({}, props), {}, {
|
|
1130
1116
|
open: open
|
|
1131
1117
|
})));
|
|
1132
1118
|
});
|
|
@@ -1499,7 +1485,7 @@ var initialState = {
|
|
|
1499
1485
|
function useDropzone() {
|
|
1500
1486
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
1501
1487
|
|
|
1502
|
-
var _defaultProps$props = _objectSpread$
|
|
1488
|
+
var _defaultProps$props = _objectSpread$a(_objectSpread$a({}, defaultProps), props),
|
|
1503
1489
|
accept = _defaultProps$props.accept,
|
|
1504
1490
|
disabled = _defaultProps$props.disabled,
|
|
1505
1491
|
getFilesFromEvent = _defaultProps$props.getFilesFromEvent,
|
|
@@ -1525,16 +1511,16 @@ function useDropzone() {
|
|
|
1525
1511
|
onError = _defaultProps$props.onError,
|
|
1526
1512
|
validator = _defaultProps$props.validator;
|
|
1527
1513
|
|
|
1528
|
-
var acceptAttr =
|
|
1514
|
+
var acceptAttr = require$$0.useMemo(function () {
|
|
1529
1515
|
return acceptPropAsAcceptAttr(accept);
|
|
1530
1516
|
}, [accept]);
|
|
1531
|
-
var pickerTypes =
|
|
1517
|
+
var pickerTypes = require$$0.useMemo(function () {
|
|
1532
1518
|
return pickerOptionsFromAccept(accept);
|
|
1533
1519
|
}, [accept]);
|
|
1534
|
-
var onFileDialogOpenCb =
|
|
1520
|
+
var onFileDialogOpenCb = require$$0.useMemo(function () {
|
|
1535
1521
|
return typeof onFileDialogOpen === "function" ? onFileDialogOpen : noop;
|
|
1536
1522
|
}, [onFileDialogOpen]);
|
|
1537
|
-
var onFileDialogCancelCb =
|
|
1523
|
+
var onFileDialogCancelCb = require$$0.useMemo(function () {
|
|
1538
1524
|
return typeof onFileDialogCancel === "function" ? onFileDialogCancel : noop;
|
|
1539
1525
|
}, [onFileDialogCancel]);
|
|
1540
1526
|
/**
|
|
@@ -1542,17 +1528,17 @@ function useDropzone() {
|
|
|
1542
1528
|
* @type {React.MutableRefObject<HTMLElement>}
|
|
1543
1529
|
*/
|
|
1544
1530
|
|
|
1545
|
-
var rootRef =
|
|
1546
|
-
var inputRef =
|
|
1531
|
+
var rootRef = require$$0.useRef(null);
|
|
1532
|
+
var inputRef = require$$0.useRef(null);
|
|
1547
1533
|
|
|
1548
|
-
var _useReducer =
|
|
1534
|
+
var _useReducer = require$$0.useReducer(reducer, initialState),
|
|
1549
1535
|
_useReducer2 = _slicedToArray(_useReducer, 2),
|
|
1550
1536
|
state = _useReducer2[0],
|
|
1551
1537
|
dispatch = _useReducer2[1];
|
|
1552
1538
|
|
|
1553
1539
|
var isFocused = state.isFocused,
|
|
1554
1540
|
isFileDialogActive = state.isFileDialogActive;
|
|
1555
|
-
var fsAccessApiWorksRef =
|
|
1541
|
+
var fsAccessApiWorksRef = require$$0.useRef(typeof window !== "undefined" && window.isSecureContext && useFsAccessApi && canUseFileSystemAccessAPI()); // Update file dialog active state when the window is focused on
|
|
1556
1542
|
|
|
1557
1543
|
var onWindowFocus = function onWindowFocus() {
|
|
1558
1544
|
// Execute the timeout only if the file dialog is opened in the browser
|
|
@@ -1572,13 +1558,13 @@ function useDropzone() {
|
|
|
1572
1558
|
}
|
|
1573
1559
|
};
|
|
1574
1560
|
|
|
1575
|
-
|
|
1561
|
+
require$$0.useEffect(function () {
|
|
1576
1562
|
window.addEventListener("focus", onWindowFocus, false);
|
|
1577
1563
|
return function () {
|
|
1578
1564
|
window.removeEventListener("focus", onWindowFocus, false);
|
|
1579
1565
|
};
|
|
1580
1566
|
}, [inputRef, isFileDialogActive, onFileDialogCancelCb, fsAccessApiWorksRef]);
|
|
1581
|
-
var dragTargetsRef =
|
|
1567
|
+
var dragTargetsRef = require$$0.useRef([]);
|
|
1582
1568
|
|
|
1583
1569
|
var onDocumentDrop = function onDocumentDrop(event) {
|
|
1584
1570
|
if (rootRef.current && rootRef.current.contains(event.target)) {
|
|
@@ -1590,7 +1576,7 @@ function useDropzone() {
|
|
|
1590
1576
|
dragTargetsRef.current = [];
|
|
1591
1577
|
};
|
|
1592
1578
|
|
|
1593
|
-
|
|
1579
|
+
require$$0.useEffect(function () {
|
|
1594
1580
|
if (preventDropOnDocument) {
|
|
1595
1581
|
document.addEventListener("dragover", onDocumentDragOver, false);
|
|
1596
1582
|
document.addEventListener("drop", onDocumentDrop, false);
|
|
@@ -1604,14 +1590,14 @@ function useDropzone() {
|
|
|
1604
1590
|
};
|
|
1605
1591
|
}, [rootRef, preventDropOnDocument]); // Auto focus the root when autoFocus is true
|
|
1606
1592
|
|
|
1607
|
-
|
|
1593
|
+
require$$0.useEffect(function () {
|
|
1608
1594
|
if (!disabled && autoFocus && rootRef.current) {
|
|
1609
1595
|
rootRef.current.focus();
|
|
1610
1596
|
}
|
|
1611
1597
|
|
|
1612
1598
|
return function () {};
|
|
1613
1599
|
}, [rootRef, autoFocus, disabled]);
|
|
1614
|
-
var onErrCb =
|
|
1600
|
+
var onErrCb = require$$0.useCallback(function (e) {
|
|
1615
1601
|
if (onError) {
|
|
1616
1602
|
onError(e);
|
|
1617
1603
|
} else {
|
|
@@ -1619,7 +1605,7 @@ function useDropzone() {
|
|
|
1619
1605
|
console.error(e);
|
|
1620
1606
|
}
|
|
1621
1607
|
}, [onError]);
|
|
1622
|
-
var onDragEnterCb =
|
|
1608
|
+
var onDragEnterCb = require$$0.useCallback(function (event) {
|
|
1623
1609
|
event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done
|
|
1624
1610
|
|
|
1625
1611
|
event.persist();
|
|
@@ -1658,7 +1644,7 @@ function useDropzone() {
|
|
|
1658
1644
|
});
|
|
1659
1645
|
}
|
|
1660
1646
|
}, [getFilesFromEvent, onDragEnter, onErrCb, noDragEventsBubbling, acceptAttr, minSize, maxSize, multiple, maxFiles, validator]);
|
|
1661
|
-
var onDragOverCb =
|
|
1647
|
+
var onDragOverCb = require$$0.useCallback(function (event) {
|
|
1662
1648
|
event.preventDefault();
|
|
1663
1649
|
event.persist();
|
|
1664
1650
|
stopPropagation(event);
|
|
@@ -1678,7 +1664,7 @@ function useDropzone() {
|
|
|
1678
1664
|
|
|
1679
1665
|
return false;
|
|
1680
1666
|
}, [onDragOver, noDragEventsBubbling]);
|
|
1681
|
-
var onDragLeaveCb =
|
|
1667
|
+
var onDragLeaveCb = require$$0.useCallback(function (event) {
|
|
1682
1668
|
event.preventDefault();
|
|
1683
1669
|
event.persist();
|
|
1684
1670
|
stopPropagation(event); // Only deactivate once the dropzone and all children have been left
|
|
@@ -1711,7 +1697,7 @@ function useDropzone() {
|
|
|
1711
1697
|
onDragLeave(event);
|
|
1712
1698
|
}
|
|
1713
1699
|
}, [rootRef, onDragLeave, noDragEventsBubbling]);
|
|
1714
|
-
var setFiles =
|
|
1700
|
+
var setFiles = require$$0.useCallback(function (files, event) {
|
|
1715
1701
|
var acceptedFiles = [];
|
|
1716
1702
|
var fileRejections = [];
|
|
1717
1703
|
files.forEach(function (file) {
|
|
@@ -1774,7 +1760,7 @@ function useDropzone() {
|
|
|
1774
1760
|
onDropAccepted(acceptedFiles, event);
|
|
1775
1761
|
}
|
|
1776
1762
|
}, [dispatch, multiple, acceptAttr, minSize, maxSize, maxFiles, onDrop, onDropAccepted, onDropRejected, validator]);
|
|
1777
|
-
var onDropCb =
|
|
1763
|
+
var onDropCb = require$$0.useCallback(function (event) {
|
|
1778
1764
|
event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done
|
|
1779
1765
|
|
|
1780
1766
|
event.persist();
|
|
@@ -1798,7 +1784,7 @@ function useDropzone() {
|
|
|
1798
1784
|
});
|
|
1799
1785
|
}, [getFilesFromEvent, setFiles, onErrCb, noDragEventsBubbling]); // Fn for opening the file dialog programmatically
|
|
1800
1786
|
|
|
1801
|
-
var openFileDialog =
|
|
1787
|
+
var openFileDialog = require$$0.useCallback(function () {
|
|
1802
1788
|
// No point to use FS access APIs if context is not secure
|
|
1803
1789
|
// https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts#feature_detection
|
|
1804
1790
|
if (fsAccessApiWorksRef.current) {
|
|
@@ -1852,7 +1838,7 @@ function useDropzone() {
|
|
|
1852
1838
|
}
|
|
1853
1839
|
}, [dispatch, onFileDialogOpenCb, onFileDialogCancelCb, useFsAccessApi, setFiles, onErrCb, pickerTypes, multiple]); // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
|
|
1854
1840
|
|
|
1855
|
-
var onKeyDownCb =
|
|
1841
|
+
var onKeyDownCb = require$$0.useCallback(function (event) {
|
|
1856
1842
|
// Ignore keyboard events bubbling up the DOM tree
|
|
1857
1843
|
if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
|
|
1858
1844
|
return;
|
|
@@ -1864,18 +1850,18 @@ function useDropzone() {
|
|
|
1864
1850
|
}
|
|
1865
1851
|
}, [rootRef, openFileDialog]); // Update focus state for the dropzone
|
|
1866
1852
|
|
|
1867
|
-
var onFocusCb =
|
|
1853
|
+
var onFocusCb = require$$0.useCallback(function () {
|
|
1868
1854
|
dispatch({
|
|
1869
1855
|
type: "focus"
|
|
1870
1856
|
});
|
|
1871
1857
|
}, []);
|
|
1872
|
-
var onBlurCb =
|
|
1858
|
+
var onBlurCb = require$$0.useCallback(function () {
|
|
1873
1859
|
dispatch({
|
|
1874
1860
|
type: "blur"
|
|
1875
1861
|
});
|
|
1876
1862
|
}, []); // Cb to open the file dialog when click occurs on the dropzone
|
|
1877
1863
|
|
|
1878
|
-
var onClickCb =
|
|
1864
|
+
var onClickCb = require$$0.useCallback(function () {
|
|
1879
1865
|
if (noClick) {
|
|
1880
1866
|
return;
|
|
1881
1867
|
} // In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()
|
|
@@ -1908,7 +1894,7 @@ function useDropzone() {
|
|
|
1908
1894
|
}
|
|
1909
1895
|
};
|
|
1910
1896
|
|
|
1911
|
-
var getRootProps =
|
|
1897
|
+
var getRootProps = require$$0.useMemo(function () {
|
|
1912
1898
|
return function () {
|
|
1913
1899
|
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
1914
1900
|
_ref2$refKey = _ref2.refKey,
|
|
@@ -1924,7 +1910,7 @@ function useDropzone() {
|
|
|
1924
1910
|
onDrop = _ref2.onDrop,
|
|
1925
1911
|
rest = _objectWithoutProperties$1(_ref2, _excluded3);
|
|
1926
1912
|
|
|
1927
|
-
return _objectSpread$
|
|
1913
|
+
return _objectSpread$a(_objectSpread$a(_defineProperty$1({
|
|
1928
1914
|
onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
|
|
1929
1915
|
onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
|
|
1930
1916
|
onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
|
|
@@ -1939,10 +1925,10 @@ function useDropzone() {
|
|
|
1939
1925
|
} : {}), rest);
|
|
1940
1926
|
};
|
|
1941
1927
|
}, [rootRef, onKeyDownCb, onFocusCb, onBlurCb, onClickCb, onDragEnterCb, onDragOverCb, onDragLeaveCb, onDropCb, noKeyboard, noDrag, disabled]);
|
|
1942
|
-
var onInputElementClick =
|
|
1928
|
+
var onInputElementClick = require$$0.useCallback(function (event) {
|
|
1943
1929
|
event.stopPropagation();
|
|
1944
1930
|
}, []);
|
|
1945
|
-
var getInputProps =
|
|
1931
|
+
var getInputProps = require$$0.useMemo(function () {
|
|
1946
1932
|
return function () {
|
|
1947
1933
|
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
1948
1934
|
_ref3$refKey = _ref3.refKey,
|
|
@@ -1963,10 +1949,10 @@ function useDropzone() {
|
|
|
1963
1949
|
tabIndex: -1
|
|
1964
1950
|
}, refKey, inputRef);
|
|
1965
1951
|
|
|
1966
|
-
return _objectSpread$
|
|
1952
|
+
return _objectSpread$a(_objectSpread$a({}, inputProps), rest);
|
|
1967
1953
|
};
|
|
1968
1954
|
}, [inputRef, accept, multiple, onDropCb, disabled]);
|
|
1969
|
-
return _objectSpread$
|
|
1955
|
+
return _objectSpread$a(_objectSpread$a({}, state), {}, {
|
|
1970
1956
|
isFocused: isFocused && !disabled,
|
|
1971
1957
|
getRootProps: getRootProps,
|
|
1972
1958
|
getInputProps: getInputProps,
|
|
@@ -1985,40 +1971,40 @@ function reducer(state, action) {
|
|
|
1985
1971
|
/* istanbul ignore next */
|
|
1986
1972
|
switch (action.type) {
|
|
1987
1973
|
case "focus":
|
|
1988
|
-
return _objectSpread$
|
|
1974
|
+
return _objectSpread$a(_objectSpread$a({}, state), {}, {
|
|
1989
1975
|
isFocused: true
|
|
1990
1976
|
});
|
|
1991
1977
|
|
|
1992
1978
|
case "blur":
|
|
1993
|
-
return _objectSpread$
|
|
1979
|
+
return _objectSpread$a(_objectSpread$a({}, state), {}, {
|
|
1994
1980
|
isFocused: false
|
|
1995
1981
|
});
|
|
1996
1982
|
|
|
1997
1983
|
case "openDialog":
|
|
1998
|
-
return _objectSpread$
|
|
1984
|
+
return _objectSpread$a(_objectSpread$a({}, initialState), {}, {
|
|
1999
1985
|
isFileDialogActive: true
|
|
2000
1986
|
});
|
|
2001
1987
|
|
|
2002
1988
|
case "closeDialog":
|
|
2003
|
-
return _objectSpread$
|
|
1989
|
+
return _objectSpread$a(_objectSpread$a({}, state), {}, {
|
|
2004
1990
|
isFileDialogActive: false
|
|
2005
1991
|
});
|
|
2006
1992
|
|
|
2007
1993
|
case "setDraggedFiles":
|
|
2008
|
-
return _objectSpread$
|
|
1994
|
+
return _objectSpread$a(_objectSpread$a({}, state), {}, {
|
|
2009
1995
|
isDragActive: action.isDragActive,
|
|
2010
1996
|
isDragAccept: action.isDragAccept,
|
|
2011
1997
|
isDragReject: action.isDragReject
|
|
2012
1998
|
});
|
|
2013
1999
|
|
|
2014
2000
|
case "setFiles":
|
|
2015
|
-
return _objectSpread$
|
|
2001
|
+
return _objectSpread$a(_objectSpread$a({}, state), {}, {
|
|
2016
2002
|
acceptedFiles: action.acceptedFiles,
|
|
2017
2003
|
fileRejections: action.fileRejections
|
|
2018
2004
|
});
|
|
2019
2005
|
|
|
2020
2006
|
case "reset":
|
|
2021
|
-
return _objectSpread$
|
|
2007
|
+
return _objectSpread$a({}, initialState);
|
|
2022
2008
|
|
|
2023
2009
|
default:
|
|
2024
2010
|
return state;
|
|
@@ -2050,7 +2036,7 @@ var useUploadDropzone = function useUploadDropzone(_ref) {
|
|
|
2050
2036
|
maxImageSize: 0
|
|
2051
2037
|
} : _ref$uploadConfig,
|
|
2052
2038
|
_onDrop = _ref.onDrop;
|
|
2053
|
-
var _useState =
|
|
2039
|
+
var _useState = require$$0.useState(0),
|
|
2054
2040
|
_useState2 = _slicedToArray$2(_useState, 2),
|
|
2055
2041
|
uploadProgress = _useState2[0],
|
|
2056
2042
|
setUploadProgress = _useState2[1];
|
|
@@ -2080,19 +2066,24 @@ var ProgressBar = function ProgressBar(_ref) {
|
|
|
2080
2066
|
var _ref$progressPercenta = _ref.progressPercentage,
|
|
2081
2067
|
progressPercentage = _ref$progressPercenta === void 0 ? 0 : _ref$progressPercenta,
|
|
2082
2068
|
progressValue = _ref.progressValue;
|
|
2083
|
-
return /*#__PURE__*/
|
|
2084
|
-
className: "neeto-ui-border-primary-600 hover:neeto-ui-bg-gray-100 neeto-ui-rounded-lg flex h-full cursor-pointer items-center justify-center gap-3 border border-dashed p-5 transition-all duration-300 ease-in-out"
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2069
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2070
|
+
className: "neeto-ui-border-primary-600 hover:neeto-ui-bg-gray-100 neeto-ui-rounded-lg flex h-full cursor-pointer items-center justify-center gap-3 border border-dashed p-5 transition-all duration-300 ease-in-out",
|
|
2071
|
+
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2072
|
+
className: "neeto-ui-bg-gray-200 neeto-ui-rounded-full w-full overflow-hidden dark:bg-gray-700",
|
|
2073
|
+
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2074
|
+
className: "neeto-ui-bg-primary-600 text-2xs neeto-ui-text-primary-100 neeto-ui-rounded-full flex h-3 animate-pulse items-center justify-center font-medium leading-none transition-all duration-300 ease-in-out",
|
|
2075
|
+
"data-cy": "neeto-image-uploader-progress-bar",
|
|
2076
|
+
style: {
|
|
2077
|
+
width: "".concat(progressPercentage, "%")
|
|
2078
|
+
},
|
|
2079
|
+
children: progressValue
|
|
2080
|
+
})
|
|
2081
|
+
})
|
|
2082
|
+
});
|
|
2094
2083
|
};
|
|
2095
2084
|
|
|
2085
|
+
function ownKeys$a(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; }
|
|
2086
|
+
function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
2096
2087
|
var ImageDirectUpload = function ImageDirectUpload(_ref) {
|
|
2097
2088
|
var _ref$uploadConfig = _ref.uploadConfig,
|
|
2098
2089
|
uploadConfig = _ref$uploadConfig === void 0 ? DEFAULT_UPLOAD_CONFIG : _ref$uploadConfig,
|
|
@@ -2110,72 +2101,79 @@ var ImageDirectUpload = function ImageDirectUpload(_ref) {
|
|
|
2110
2101
|
isDragActive = _useUploadDropzone.isDragActive,
|
|
2111
2102
|
uploadProgress = _useUploadDropzone.uploadProgress;
|
|
2112
2103
|
var shouldShowProgress = !!(uploadProgress && !ramda.equals(uploadProgress, 1));
|
|
2113
|
-
return shouldShowProgress ? /*#__PURE__*/
|
|
2104
|
+
return shouldShowProgress ? /*#__PURE__*/jsxRuntime.jsx(ProgressBar, {
|
|
2114
2105
|
progressPercentage: uploadProgress,
|
|
2115
2106
|
progressValue: "".concat(uploadProgress, "%")
|
|
2116
|
-
}) : /*#__PURE__*/
|
|
2107
|
+
}) : /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$9(_objectSpread$9({}, getRootProps()), {}, {
|
|
2117
2108
|
className: classnames__default["default"](DROPZONE_ROOT_DIV_CLASSNAME, {
|
|
2118
2109
|
"neeto-ui-border-gray-300": !isDragActive,
|
|
2119
2110
|
"neeto-ui-border-gray-700": isDragActive
|
|
2111
|
+
}),
|
|
2112
|
+
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
2113
|
+
className: "flex flex-col space-y-1",
|
|
2114
|
+
children: [!isDisabled && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
|
|
2115
|
+
className: "neeto-ui-text-gray-800 text-center leading-4",
|
|
2116
|
+
style: "body2",
|
|
2117
|
+
children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
|
|
2118
|
+
i18nKey: "neetoImageUploader.imageUpload.dragAndDropOrBrowseFile",
|
|
2119
|
+
components: {
|
|
2120
|
+
span: /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
2121
|
+
className: "neeto-ui-text-primary-500",
|
|
2122
|
+
"data-cy": "neeto-image-uploader-browse-text"
|
|
2123
|
+
})
|
|
2124
|
+
}
|
|
2125
|
+
})
|
|
2126
|
+
}), setIsAssetLibraryOpen && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
|
|
2127
|
+
className: "text-center leading-4",
|
|
2128
|
+
style: "body2",
|
|
2129
|
+
onClick: function onClick(e) {
|
|
2130
|
+
e.stopPropagation();
|
|
2131
|
+
setIsAssetLibraryOpen(true);
|
|
2132
|
+
},
|
|
2133
|
+
children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
|
|
2134
|
+
i18nKey: "neetoImageUploader.imageUpload.selectImagefromImageLibrary",
|
|
2135
|
+
components: {
|
|
2136
|
+
span: /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
2137
|
+
className: "neeto-ui-text-primary-500",
|
|
2138
|
+
"data-cy": "open-asset-library-button"
|
|
2139
|
+
})
|
|
2140
|
+
}
|
|
2141
|
+
})
|
|
2142
|
+
}), /*#__PURE__*/jsxRuntime.jsx("input", _objectSpread$9(_objectSpread$9({}, getInputProps()), {}, {
|
|
2143
|
+
"data-cy": "neeto-image-uploader-file-input",
|
|
2144
|
+
disabled: isDisabled
|
|
2145
|
+
})), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
|
|
2146
|
+
className: "neeto-ui-text-gray-700 text-center leading-4",
|
|
2147
|
+
"data-cy": "neeto-image-uploader-restriction-message",
|
|
2148
|
+
lineHeight: "snug",
|
|
2149
|
+
style: "nano",
|
|
2150
|
+
children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
|
|
2151
|
+
i18nKey: "neetoImageUploader.imageUpload.restrictionMessage",
|
|
2152
|
+
values: {
|
|
2153
|
+
fileTypes: getAllowedTypes(uploadConfig),
|
|
2154
|
+
size: uploadConfig === null || uploadConfig === void 0 ? void 0 : uploadConfig.maxImageSize
|
|
2155
|
+
}
|
|
2156
|
+
})
|
|
2157
|
+
})]
|
|
2120
2158
|
})
|
|
2121
|
-
})
|
|
2122
|
-
className: "flex flex-col space-y-1"
|
|
2123
|
-
}, !isDisabled && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
|
|
2124
|
-
className: "neeto-ui-text-gray-800 text-center leading-4",
|
|
2125
|
-
style: "body2"
|
|
2126
|
-
}, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
|
|
2127
|
-
i18nKey: "neetoImageUploader.imageUpload.dragAndDropOrBrowseFile",
|
|
2128
|
-
components: {
|
|
2129
|
-
span: /*#__PURE__*/React__default["default"].createElement("span", {
|
|
2130
|
-
className: "neeto-ui-text-primary-500",
|
|
2131
|
-
"data-cy": "neeto-image-uploader-browse-text"
|
|
2132
|
-
})
|
|
2133
|
-
}
|
|
2134
|
-
})), setIsAssetLibraryOpen && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
|
|
2135
|
-
className: "text-center leading-4",
|
|
2136
|
-
style: "body2",
|
|
2137
|
-
onClick: function onClick(e) {
|
|
2138
|
-
e.stopPropagation();
|
|
2139
|
-
setIsAssetLibraryOpen(true);
|
|
2140
|
-
}
|
|
2141
|
-
}, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
|
|
2142
|
-
i18nKey: "neetoImageUploader.imageUpload.selectImagefromImageLibrary",
|
|
2143
|
-
components: {
|
|
2144
|
-
span: /*#__PURE__*/React__default["default"].createElement("span", {
|
|
2145
|
-
className: "neeto-ui-text-primary-500",
|
|
2146
|
-
"data-cy": "open-asset-library-button"
|
|
2147
|
-
})
|
|
2148
|
-
}
|
|
2149
|
-
})), /*#__PURE__*/React__default["default"].createElement("input", _extends$1({}, getInputProps(), {
|
|
2150
|
-
"data-cy": "neeto-image-uploader-file-input",
|
|
2151
|
-
disabled: isDisabled
|
|
2152
|
-
})), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
|
|
2153
|
-
className: "neeto-ui-text-gray-700 text-center leading-4",
|
|
2154
|
-
"data-cy": "neeto-image-uploader-restriction-message",
|
|
2155
|
-
lineHeight: "snug",
|
|
2156
|
-
style: "nano"
|
|
2157
|
-
}, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
|
|
2158
|
-
i18nKey: "neetoImageUploader.imageUpload.restrictionMessage",
|
|
2159
|
-
values: {
|
|
2160
|
-
fileTypes: getAllowedTypes(uploadConfig),
|
|
2161
|
-
size: uploadConfig === null || uploadConfig === void 0 ? void 0 : uploadConfig.maxImageSize
|
|
2162
|
-
}
|
|
2163
|
-
}))));
|
|
2159
|
+
}));
|
|
2164
2160
|
};
|
|
2165
2161
|
|
|
2166
2162
|
var _excluded$4 = ["className"];
|
|
2163
|
+
function ownKeys$9(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; }
|
|
2164
|
+
function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
2167
2165
|
var ImagePlaceholder = function ImagePlaceholder(_ref) {
|
|
2168
2166
|
var _ref$className = _ref.className,
|
|
2169
2167
|
className = _ref$className === void 0 ? "" : _ref$className,
|
|
2170
2168
|
props = _objectWithoutProperties$2(_ref, _excluded$4);
|
|
2171
|
-
return /*#__PURE__*/
|
|
2169
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$8({
|
|
2172
2170
|
className: classnames__default["default"]("neeto-ui-bg-gray-200", _defineProperty$3({}, className, className))
|
|
2173
2171
|
}, props));
|
|
2174
2172
|
};
|
|
2175
2173
|
|
|
2176
2174
|
var _excluded$3 = ["src", "className", "fallback"];
|
|
2177
|
-
function ownKeys$
|
|
2178
|
-
function _objectSpread$
|
|
2175
|
+
function ownKeys$8(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; }
|
|
2176
|
+
function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
2179
2177
|
var ImageWithFallback = function ImageWithFallback(_ref) {
|
|
2180
2178
|
var src = _ref.src,
|
|
2181
2179
|
_ref$className = _ref.className,
|
|
@@ -2183,24 +2181,24 @@ var ImageWithFallback = function ImageWithFallback(_ref) {
|
|
|
2183
2181
|
_ref$fallback = _ref.fallback,
|
|
2184
2182
|
Fallback = _ref$fallback === void 0 ? ImagePlaceholder : _ref$fallback,
|
|
2185
2183
|
props = _objectWithoutProperties$2(_ref, _excluded$3);
|
|
2186
|
-
var _useState =
|
|
2184
|
+
var _useState = require$$0.useState(false),
|
|
2187
2185
|
_useState2 = _slicedToArray$2(_useState, 2),
|
|
2188
2186
|
isLoaded = _useState2[0],
|
|
2189
2187
|
setIsLoaded = _useState2[1];
|
|
2190
|
-
|
|
2188
|
+
require$$0.useEffect(function () {
|
|
2191
2189
|
var img = new Image();
|
|
2192
2190
|
img.onload = function () {
|
|
2193
2191
|
setIsLoaded(true);
|
|
2194
2192
|
};
|
|
2195
2193
|
img.src = src;
|
|
2196
2194
|
}, [src]);
|
|
2197
|
-
return isLoaded ? /*#__PURE__*/
|
|
2195
|
+
return isLoaded ? /*#__PURE__*/jsxRuntime.jsx("img", _objectSpread$7(_objectSpread$7({}, _objectSpread$7({
|
|
2198
2196
|
src: src
|
|
2199
|
-
}, props), {
|
|
2197
|
+
}, props)), {}, {
|
|
2200
2198
|
className: "h-full w-auto object-contain"
|
|
2201
|
-
})) : /*#__PURE__*/
|
|
2199
|
+
})) : /*#__PURE__*/jsxRuntime.jsx(Fallback, _objectSpread$7({}, _objectSpread$7({
|
|
2202
2200
|
className: className
|
|
2203
|
-
}, props));
|
|
2201
|
+
}, props)));
|
|
2204
2202
|
};
|
|
2205
2203
|
|
|
2206
2204
|
var IS_DEVELOPMENT_OR_HEROKU_ENV = process.env.RAILS_ENV === "development" || process.env.RAILS_ENV === "heroku";
|
|
@@ -2309,7 +2307,7 @@ function _defineProperty(obj, key, value) {
|
|
|
2309
2307
|
return obj;
|
|
2310
2308
|
}
|
|
2311
2309
|
|
|
2312
|
-
function ownKeys$
|
|
2310
|
+
function ownKeys$7(object, enumerableOnly) {
|
|
2313
2311
|
var keys = Object.keys(object);
|
|
2314
2312
|
|
|
2315
2313
|
if (Object.getOwnPropertySymbols) {
|
|
@@ -2328,13 +2326,13 @@ function _objectSpread2(target) {
|
|
|
2328
2326
|
var source = arguments[i] != null ? arguments[i] : {};
|
|
2329
2327
|
|
|
2330
2328
|
if (i % 2) {
|
|
2331
|
-
ownKeys$
|
|
2329
|
+
ownKeys$7(Object(source), true).forEach(function (key) {
|
|
2332
2330
|
_defineProperty(target, key, source[key]);
|
|
2333
2331
|
});
|
|
2334
2332
|
} else if (Object.getOwnPropertyDescriptors) {
|
|
2335
2333
|
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
2336
2334
|
} else {
|
|
2337
|
-
ownKeys$
|
|
2335
|
+
ownKeys$7(Object(source)).forEach(function (key) {
|
|
2338
2336
|
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
2339
2337
|
});
|
|
2340
2338
|
}
|
|
@@ -2907,8 +2905,8 @@ var isItemsCenter = function isItemsCenter(_ref4) {
|
|
|
2907
2905
|
};
|
|
2908
2906
|
|
|
2909
2907
|
var _excluded$2 = ["src", "className", "imageFallbackProps", "onDrop", "isDisabled", "onRemove"];
|
|
2910
|
-
function ownKeys$
|
|
2911
|
-
function _objectSpread$
|
|
2908
|
+
function ownKeys$6(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; }
|
|
2909
|
+
function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
2912
2910
|
var BasicImageUploader = function BasicImageUploader(_ref) {
|
|
2913
2911
|
var _ref$src = _ref.src,
|
|
2914
2912
|
src = _ref$src === void 0 ? "" : _ref$src,
|
|
@@ -2926,29 +2924,31 @@ var BasicImageUploader = function BasicImageUploader(_ref) {
|
|
|
2926
2924
|
_ref$onRemove = _ref.onRemove,
|
|
2927
2925
|
onRemove = _ref$onRemove === void 0 ? neetoCist.noop : _ref$onRemove,
|
|
2928
2926
|
props = _objectWithoutProperties$2(_ref, _excluded$2);
|
|
2929
|
-
return /*#__PURE__*/
|
|
2927
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
2930
2928
|
className: classnames__default["default"](className, {
|
|
2931
2929
|
"cursor-pointer": true,
|
|
2932
2930
|
"cursor-not-allowed": isDisabled,
|
|
2933
2931
|
"opacity-70": isDisabled && isNilOrEmpty(src)
|
|
2934
|
-
})
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2932
|
+
}),
|
|
2933
|
+
children: isNotNilOrEmpty(src) ? /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
2934
|
+
className: IMAGE_WRAPPER_CLASSNAME,
|
|
2935
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(ImageWithFallback, _objectSpread$6(_objectSpread$6({}, _objectSpread$6(_objectSpread$6({}, imageFallbackProps), {}, {
|
|
2936
|
+
src: src
|
|
2937
|
+
})), {}, {
|
|
2938
|
+
"data-cy": "uploaded-image"
|
|
2939
|
+
})), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
|
|
2940
|
+
className: "absolute right-3 top-3",
|
|
2941
|
+
"data-cy": "basic-image-uploader-remove-button",
|
|
2942
|
+
disabled: isDisabled,
|
|
2943
|
+
icon: neetoIcons.Delete,
|
|
2944
|
+
size: "small",
|
|
2945
|
+
onClick: onRemove
|
|
2946
|
+
})]
|
|
2947
|
+
}) : /*#__PURE__*/jsxRuntime.jsx(ImageDirectUpload, _objectSpread$6({}, _objectSpread$6(_objectSpread$6({}, props), {}, {
|
|
2948
|
+
isDisabled: isDisabled,
|
|
2949
|
+
onDrop: onDrop
|
|
2950
|
+
})))
|
|
2951
|
+
});
|
|
2952
2952
|
};
|
|
2953
2953
|
|
|
2954
2954
|
var create = function create(payload) {
|
|
@@ -2980,10 +2980,10 @@ var ASSETS_STALE_TIME = 900000; // 15 mins
|
|
|
2980
2980
|
|
|
2981
2981
|
var UNSPLASH_STALE_TIME = 900000;
|
|
2982
2982
|
|
|
2983
|
-
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; }
|
|
2984
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty$3(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; }
|
|
2983
|
+
function ownKeys$5(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; }
|
|
2984
|
+
function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
2985
2985
|
var useCreateBlob = function useCreateBlob(options) {
|
|
2986
|
-
return reactUtils.useMutationWithInvalidation(directUploadsApi.create, _objectSpread({
|
|
2986
|
+
return reactUtils.useMutationWithInvalidation(directUploadsApi.create, _objectSpread$5({
|
|
2987
2987
|
keysToInvalidate: [QUERY_KEYS.ASSETS_LIST]
|
|
2988
2988
|
}, options));
|
|
2989
2989
|
};
|
|
@@ -3520,7 +3520,7 @@ var ReactCrop_min = {exports: {}};
|
|
|
3520
3520
|
ReactCrop_min.exports;
|
|
3521
3521
|
|
|
3522
3522
|
(function (module, exports) {
|
|
3523
|
-
!function(e,t){module.exports=t(React__default["default"]);}(commonjsGlobal,(e=>(()=>{var t={899:t=>{t.exports=e;}},n={};function o(e){var r=n[e];if(void 0!==r)return r.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,o),i.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]});},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0});};var r={};return (()=>{o.r(r),o.d(r,{Component:()=>u,areCropsEqual:()=>h,centerCrop:()=>d,clamp:()=>a,containCrop:()=>p,convertToPercentCrop:()=>c,convertToPixelCrop:()=>l,default:()=>u,defaultCrop:()=>i,makeAspectCrop:()=>s,nudgeCrop:()=>g});var e=o(899),t=o.n(e);function n(e){var t,o,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(o=n(e[t]))&&(r&&(r+=" "),r+=o);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}const i={x:0,y:0,width:0,height:0,unit:"px"};function a(e,t,n){return Math.min(Math.max(e,t),n)}function h(e,t){return e.width===t.width&&e.height===t.height&&e.x===t.x&&e.y===t.y&&e.unit===t.unit}function s(e,t,n,o){const r=l(e,n,o);return e.width&&(r.height=r.width/t),e.height&&(r.width=r.height*t),r.y+r.height>o&&(r.height=o-r.y,r.width=r.height*t),r.x+r.width>n&&(r.width=n-r.x,r.height=r.width/t),"%"===e.unit?c(r,n,o):r}function d(e,t,n){const o=l(e,t,n);return o.x=(t-o.width)/2,o.y=(n-o.height)/2,"%"===e.unit?c(o,t,n):o}function c(e,t,n){return "%"===e.unit?{...i,...e,unit:"%"}:{unit:"%",x:e.x?e.x/t*100:0,y:e.y?e.y/n*100:0,width:e.width?e.width/t*100:0,height:e.height?e.height/n*100:0}}function l(e,t,n){return e.unit?"px"===e.unit?{...i,...e,unit:"px"}:{unit:"px",x:e.x?e.x*t/100:0,y:e.y?e.y*n/100:0,width:e.width?e.width*t/100:0,height:e.height?e.height*n/100:0}:{...i,...e,unit:"px"}}function p(e,t,n,o,r,i=0,a=0,h=o,s=r){const d={...e};let c=Math.min(i,o),l=Math.min(a,r),p=Math.min(h,o),g=Math.min(s,r);t&&(t>1?(c=a?a*t:c,l=c/t,p=h*t):(l=i?i/t:l,c=l*t,g=s/t)),d.y<0&&(d.height=Math.max(d.height+d.y,l),d.y=0),d.x<0&&(d.width=Math.max(d.width+d.x,c),d.x=0);const w=o-(d.x+d.width);w<0&&(d.x=Math.min(d.x,o-c),d.width+=w);const u=r-(d.y+d.height);if(u<0&&(d.y=Math.min(d.y,r-l),d.height+=u),d.width<c&&("sw"!==n&&"nw"!=n||(d.x-=c-d.width),d.width=c),d.height<l&&("nw"!==n&&"ne"!=n||(d.y-=l-d.height),d.height=l),d.width>p&&("sw"!==n&&"nw"!=n||(d.x-=p-d.width),d.width=p),d.height>g&&("nw"!==n&&"ne"!=n||(d.y-=g-d.height),d.height=g),t){const e=d.width/d.height;if(e<t){const e=Math.max(d.width/t,l);"nw"!==n&&"ne"!=n||(d.y-=e-d.height),d.height=e;}else if(e>t){const e=Math.max(d.height*t,c);"sw"!==n&&"nw"!=n||(d.x-=e-d.width),d.width=e;}}return d}function g(e,t,n,o){const r={...e};return "ArrowLeft"===t?"nw"===o?(r.x-=n,r.y-=n,r.width+=n,r.height+=n):"w"===o?(r.x-=n,r.width+=n):"sw"===o?(r.x-=n,r.width+=n,r.height+=n):"ne"===o?(r.y+=n,r.width-=n,r.height-=n):"e"===o?r.width-=n:"se"===o&&(r.width-=n,r.height-=n):"ArrowRight"===t&&("nw"===o?(r.x+=n,r.y+=n,r.width-=n,r.height-=n):"w"===o?(r.x+=n,r.width-=n):"sw"===o?(r.x+=n,r.width-=n,r.height-=n):"ne"===o?(r.y-=n,r.width+=n,r.height+=n):"e"===o?r.width+=n:"se"===o&&(r.width+=n,r.height+=n)),"ArrowUp"===t?"nw"===o?(r.x-=n,r.y-=n,r.width+=n,r.height+=n):"n"===o?(r.y-=n,r.height+=n):"ne"===o?(r.y-=n,r.width+=n,r.height+=n):"sw"===o?(r.x+=n,r.width-=n,r.height-=n):"s"===o?r.height-=n:"se"===o&&(r.width-=n,r.height-=n):"ArrowDown"===t&&("nw"===o?(r.x+=n,r.y+=n,r.width-=n,r.height-=n):"n"===o?(r.y+=n,r.height-=n):"ne"===o?(r.y+=n,r.width-=n,r.height-=n):"sw"===o?(r.x-=n,r.width+=n,r.height+=n):"s"===o?r.height+=n:"se"===o&&(r.width+=n,r.height+=n)),r}const w={capture:!0,passive:!1};class u extends e.PureComponent{constructor(){super(...arguments),this.docMoveBound=!1,this.mouseDownOnCrop=!1,this.dragStarted=!1,this.evData={startClientX:0,startClientY:0,startCropX:0,startCropY:0,clientX:0,clientY:0,isResize:!0},this.componentRef=(0, e.createRef)(),this.mediaRef=(0, e.createRef)(),this.initChangeCalled=!1,this.state={cropIsActive:!1,newCropIsBeingDrawn:!1},this.onCropPointerDown=e=>{const{crop:t,disabled:n}=this.props,o=this.getBox();if(!t)return;const r=l(t,o.width,o.height);if(n)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});const i=e.target.dataset.ord,a=Boolean(i);let h=e.clientX,s=e.clientY,d=r.x,c=r.y;if(i){const t=e.clientX-o.x,n=e.clientY-o.y;let a=0,l=0;"ne"===i||"e"==i?(a=t-(r.x+r.width),l=n-r.y,d=r.x,c=r.y+r.height):"se"===i||"s"===i?(a=t-(r.x+r.width),l=n-(r.y+r.height),d=r.x,c=r.y):"sw"===i||"w"==i?(a=t-r.x,l=n-(r.y+r.height),d=r.x+r.width,c=r.y):"nw"!==i&&"n"!=i||(a=t-r.x,l=n-r.y,d=r.x+r.width,c=r.y+r.height),h=d+o.x+a,s=c+o.y+l;}this.evData={startClientX:h,startClientY:s,startCropX:d,startCropY:c,clientX:e.clientX,clientY:e.clientY,isResize:a,ord:i},this.mouseDownOnCrop=!0,this.setState({cropIsActive:!0});},this.onComponentPointerDown=e=>{const{crop:t,disabled:n,locked:o,keepSelection:r,onChange:i}=this.props,a=this.getBox();if(n||o||r&&t)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});const h=e.clientX-a.x,s=e.clientY-a.y,d={unit:"px",x:h,y:s,width:0,height:0};this.evData={startClientX:e.clientX,startClientY:e.clientY,startCropX:h,startCropY:s,clientX:e.clientX,clientY:e.clientY,isResize:!0},this.mouseDownOnCrop=!0,i(l(d,a.width,a.height),c(d,a.width,a.height)),this.setState({cropIsActive:!0,newCropIsBeingDrawn:!0});},this.onDocPointerMove=e=>{const{crop:t,disabled:n,onChange:o,onDragStart:r}=this.props,i=this.getBox();if(n||!t||!this.mouseDownOnCrop)return;e.cancelable&&e.preventDefault(),this.dragStarted||(this.dragStarted=!0,r&&r(e));const{evData:a}=this;let s;a.clientX=e.clientX,a.clientY=e.clientY,s=a.isResize?this.resizeCrop():this.dragCrop(),h(t,s)||o(l(s,i.width,i.height),c(s,i.width,i.height));},this.onComponentKeyDown=e=>{const{crop:t,disabled:n,onChange:o,onComplete:r}=this.props,i=this.getBox();if(n)return;const h=e.key;let s=!1;if(!t)return;const d=this.makePixelCrop(),p=(navigator.platform.match("Mac")?e.metaKey:e.ctrlKey)?u.nudgeStepLarge:e.shiftKey?u.nudgeStepMedium:u.nudgeStep;if("ArrowLeft"===h?(d.x-=p,s=!0):"ArrowRight"===h?(d.x+=p,s=!0):"ArrowUp"===h?(d.y-=p,s=!0):"ArrowDown"===h&&(d.y+=p,s=!0),s){e.cancelable&&e.preventDefault(),d.x=a(d.x,0,i.width-d.width),d.y=a(d.y,0,i.height-d.height);const t=l(d,i.width,i.height),n=c(d,i.width,i.height);o(t,n),r&&r(t,n);}},this.onHandlerKeyDown=(e,t)=>{const{aspect:n=0,crop:o,disabled:r,minWidth:i=0,minHeight:a=0,maxWidth:s,maxHeight:d,onChange:w,onComplete:m}=this.props,y=this.getBox();if(r||!o)return;if("ArrowUp"!==e.key&&"ArrowDown"!==e.key&&"ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.stopPropagation(),e.preventDefault();const x=(navigator.platform.match("Mac")?e.metaKey:e.ctrlKey)?u.nudgeStepLarge:e.shiftKey?u.nudgeStepMedium:u.nudgeStep,C=p(g(l(o,y.width,y.height),e.key,x,t),n,t,y.width,y.height,i,a,s,d);if(!h(o,C)){const e=c(C,y.width,y.height);w(C,e),m&&m(C,e);}},this.onDocPointerDone=e=>{const{crop:t,disabled:n,onComplete:o,onDragEnd:r}=this.props,i=this.getBox();this.unbindDocMove(),!n&&t&&this.mouseDownOnCrop&&(this.mouseDownOnCrop=!1,this.dragStarted=!1,r&&r(e),o&&o(l(t,i.width,i.height),c(t,i.width,i.height)),this.setState({cropIsActive:!1,newCropIsBeingDrawn:!1}));},this.onDragFocus=e=>{var t;null===(t=this.componentRef.current)||void 0===t||t.scrollTo(0,0);};}get document(){return document}getBox(){const e=this.mediaRef.current;if(!e)return {x:0,y:0,width:0,height:0};const{x:t,y:n,width:o,height:r}=e.getBoundingClientRect();return {x:t,y:n,width:o,height:r}}componentDidUpdate(e){const{crop:t,onComplete:n}=this.props;if(n&&!e.crop&&t){const{width:e,height:o}=this.getBox();e&&o&&n(l(t,e,o),c(t,e,o));}}componentWillUnmount(){this.resizeObserver&&this.resizeObserver.disconnect();}bindDocMove(){this.docMoveBound||(this.document.addEventListener("pointermove",this.onDocPointerMove,w),this.document.addEventListener("pointerup",this.onDocPointerDone,w),this.document.addEventListener("pointercancel",this.onDocPointerDone,w),this.docMoveBound=!0);}unbindDocMove(){this.docMoveBound&&(this.document.removeEventListener("pointermove",this.onDocPointerMove,w),this.document.removeEventListener("pointerup",this.onDocPointerDone,w),this.document.removeEventListener("pointercancel",this.onDocPointerDone,w),this.docMoveBound=!1);}getCropStyle(){const{crop:e}=this.props;if(e)return {top:`${e.y}${e.unit}`,left:`${e.x}${e.unit}`,width:`${e.width}${e.unit}`,height:`${e.height}${e.unit}`}}dragCrop(){const{evData:e}=this,t=this.getBox(),n=this.makePixelCrop(),o=e.clientX-e.startClientX,r=e.clientY-e.startClientY;return n.x=a(e.startCropX+o,0,t.width-n.width),n.y=a(e.startCropY+r,0,t.height-n.height),n}getPointRegion(e){const{evData:t}=this,n=t.clientX-e.x,o=t.clientY-e.y<t.startCropY;return n<t.startCropX?o?"nw":"sw":o?"ne":"se"}resizeCrop(){const{evData:e}=this,t=this.getBox(),{aspect:n=0,minWidth:o=0,minHeight:r=0,maxWidth:i,maxHeight:a}=this.props,h=this.getPointRegion(t),s=this.makePixelCrop(),d=e.ord?e.ord:h,c=e.clientX-e.startClientX,l=e.clientY-e.startClientY,g={unit:"px",x:0,y:0,width:0,height:0};"ne"===h?(g.x=e.startCropX,g.width=c,n?(g.height=g.width/n,g.y=e.startCropY-g.height):(g.height=Math.abs(l),g.y=e.startCropY-g.height)):"se"===h?(g.x=e.startCropX,g.y=e.startCropY,g.width=c,g.height=n?g.width/n:l):"sw"===h?(g.x=e.startCropX+c,g.y=e.startCropY,g.width=Math.abs(c),g.height=n?g.width/n:l):"nw"===h&&(g.x=e.startCropX+c,g.width=Math.abs(c),n?(g.height=g.width/n,g.y=e.startCropY-g.height):(g.height=Math.abs(l),g.y=e.startCropY+l));const w=p(g,n,h,t.width,t.height,o,r,i,a);return n||u.xyOrds.indexOf(d)>-1?(s.x=w.x,s.y=w.y,s.width=w.width,s.height=w.height):u.xOrds.indexOf(d)>-1?(s.x=w.x,s.width=w.width):u.yOrds.indexOf(d)>-1&&(s.y=w.y,s.height=w.height),s}createCropSelection(){const{ariaLabels:e=u.defaultProps.ariaLabels,disabled:n,locked:o,renderSelectionAddon:r,ruleOfThirds:i,crop:a}=this.props,h=this.getCropStyle();if(a)return t().createElement("div",{style:h,className:"ReactCrop__crop-selection",onPointerDown:this.onCropPointerDown,"aria-label":e.cropArea,tabIndex:0,onKeyDown:this.onComponentKeyDown,role:"group"},!n&&!o&&t().createElement("div",{className:"ReactCrop__drag-elements",onFocus:this.onDragFocus},t().createElement("div",{className:"ReactCrop__drag-bar ord-n","data-ord":"n"}),t().createElement("div",{className:"ReactCrop__drag-bar ord-e","data-ord":"e"}),t().createElement("div",{className:"ReactCrop__drag-bar ord-s","data-ord":"s"}),t().createElement("div",{className:"ReactCrop__drag-bar ord-w","data-ord":"w"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-nw","data-ord":"nw",tabIndex:0,"aria-label":e.nwDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"nw"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-n","data-ord":"n",tabIndex:0,"aria-label":e.nDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"n"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-ne","data-ord":"ne",tabIndex:0,"aria-label":e.neDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"ne"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-e","data-ord":"e",tabIndex:0,"aria-label":e.eDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"e"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-se","data-ord":"se",tabIndex:0,"aria-label":e.seDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"se"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-s","data-ord":"s",tabIndex:0,"aria-label":e.sDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"s"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-sw","data-ord":"sw",tabIndex:0,"aria-label":e.swDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"sw"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-w","data-ord":"w",tabIndex:0,"aria-label":e.wDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"w"),role:"button"})),r&&t().createElement("div",{className:"ReactCrop__selection-addon",onMouseDown:e=>e.stopPropagation()},r(this.state)),i&&t().createElement(t().Fragment,null,t().createElement("div",{className:"ReactCrop__rule-of-thirds-hz"}),t().createElement("div",{className:"ReactCrop__rule-of-thirds-vt"})))}makePixelCrop(){const e={...i,...this.props.crop||{}},t=this.getBox();return l(e,t.width,t.height)}render(){const{aspect:e,children:o,circularCrop:r,className:i,crop:a,disabled:h,locked:s,style:d,ruleOfThirds:c}=this.props,{cropIsActive:l,newCropIsBeingDrawn:p}=this.state,g=a?this.createCropSelection():null,w=function(){for(var e,t,o=0,r="";o<arguments.length;)(e=arguments[o++])&&(t=n(e))&&(r&&(r+=" "),r+=t);return r}("ReactCrop",i,{"ReactCrop--active":l,"ReactCrop--disabled":h,"ReactCrop--locked":s,"ReactCrop--new-crop":p,"ReactCrop--fixed-aspect":a&&e,"ReactCrop--circular-crop":a&&r,"ReactCrop--rule-of-thirds":a&&c,"ReactCrop--invisible-crop":!this.dragStarted&&a&&!a.width&&!a.height});return t().createElement("div",{ref:this.componentRef,className:w,style:d},t().createElement("div",{ref:this.mediaRef,className:"ReactCrop__child-wrapper",onPointerDown:this.onComponentPointerDown},o),g)}}u.xOrds=["e","w"],u.yOrds=["n","s"],u.xyOrds=["nw","ne","se","sw"],u.nudgeStep=1,u.nudgeStepMedium=10,u.nudgeStepLarge=100,u.defaultProps={ariaLabels:{cropArea:"Use the arrow keys to move the crop selection area",nwDragHandle:"Use the arrow keys to move the north west drag handle to change the crop selection area",nDragHandle:"Use the up and down arrow keys to move the north drag handle to change the crop selection area",neDragHandle:"Use the arrow keys to move the north east drag handle to change the crop selection area",eDragHandle:"Use the up and down arrow keys to move the east drag handle to change the crop selection area",seDragHandle:"Use the arrow keys to move the south east drag handle to change the crop selection area",sDragHandle:"Use the up and down arrow keys to move the south drag handle to change the crop selection area",swDragHandle:"Use the arrow keys to move the south west drag handle to change the crop selection area",wDragHandle:"Use the up and down arrow keys to move the west drag handle to change the crop selection area"}};})(),r})()));
|
|
3523
|
+
!function(e,t){module.exports=t(require$$0__default["default"]);}(commonjsGlobal,(e=>(()=>{var t={899:t=>{t.exports=e;}},n={};function o(e){var r=n[e];if(void 0!==r)return r.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,o),i.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]});},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0});};var r={};return (()=>{o.r(r),o.d(r,{Component:()=>u,areCropsEqual:()=>h,centerCrop:()=>d,clamp:()=>a,containCrop:()=>p,convertToPercentCrop:()=>c,convertToPixelCrop:()=>l,default:()=>u,defaultCrop:()=>i,makeAspectCrop:()=>s,nudgeCrop:()=>g});var e=o(899),t=o.n(e);function n(e){var t,o,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(o=n(e[t]))&&(r&&(r+=" "),r+=o);else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}const i={x:0,y:0,width:0,height:0,unit:"px"};function a(e,t,n){return Math.min(Math.max(e,t),n)}function h(e,t){return e.width===t.width&&e.height===t.height&&e.x===t.x&&e.y===t.y&&e.unit===t.unit}function s(e,t,n,o){const r=l(e,n,o);return e.width&&(r.height=r.width/t),e.height&&(r.width=r.height*t),r.y+r.height>o&&(r.height=o-r.y,r.width=r.height*t),r.x+r.width>n&&(r.width=n-r.x,r.height=r.width/t),"%"===e.unit?c(r,n,o):r}function d(e,t,n){const o=l(e,t,n);return o.x=(t-o.width)/2,o.y=(n-o.height)/2,"%"===e.unit?c(o,t,n):o}function c(e,t,n){return "%"===e.unit?{...i,...e,unit:"%"}:{unit:"%",x:e.x?e.x/t*100:0,y:e.y?e.y/n*100:0,width:e.width?e.width/t*100:0,height:e.height?e.height/n*100:0}}function l(e,t,n){return e.unit?"px"===e.unit?{...i,...e,unit:"px"}:{unit:"px",x:e.x?e.x*t/100:0,y:e.y?e.y*n/100:0,width:e.width?e.width*t/100:0,height:e.height?e.height*n/100:0}:{...i,...e,unit:"px"}}function p(e,t,n,o,r,i=0,a=0,h=o,s=r){const d={...e};let c=Math.min(i,o),l=Math.min(a,r),p=Math.min(h,o),g=Math.min(s,r);t&&(t>1?(c=a?a*t:c,l=c/t,p=h*t):(l=i?i/t:l,c=l*t,g=s/t)),d.y<0&&(d.height=Math.max(d.height+d.y,l),d.y=0),d.x<0&&(d.width=Math.max(d.width+d.x,c),d.x=0);const w=o-(d.x+d.width);w<0&&(d.x=Math.min(d.x,o-c),d.width+=w);const u=r-(d.y+d.height);if(u<0&&(d.y=Math.min(d.y,r-l),d.height+=u),d.width<c&&("sw"!==n&&"nw"!=n||(d.x-=c-d.width),d.width=c),d.height<l&&("nw"!==n&&"ne"!=n||(d.y-=l-d.height),d.height=l),d.width>p&&("sw"!==n&&"nw"!=n||(d.x-=p-d.width),d.width=p),d.height>g&&("nw"!==n&&"ne"!=n||(d.y-=g-d.height),d.height=g),t){const e=d.width/d.height;if(e<t){const e=Math.max(d.width/t,l);"nw"!==n&&"ne"!=n||(d.y-=e-d.height),d.height=e;}else if(e>t){const e=Math.max(d.height*t,c);"sw"!==n&&"nw"!=n||(d.x-=e-d.width),d.width=e;}}return d}function g(e,t,n,o){const r={...e};return "ArrowLeft"===t?"nw"===o?(r.x-=n,r.y-=n,r.width+=n,r.height+=n):"w"===o?(r.x-=n,r.width+=n):"sw"===o?(r.x-=n,r.width+=n,r.height+=n):"ne"===o?(r.y+=n,r.width-=n,r.height-=n):"e"===o?r.width-=n:"se"===o&&(r.width-=n,r.height-=n):"ArrowRight"===t&&("nw"===o?(r.x+=n,r.y+=n,r.width-=n,r.height-=n):"w"===o?(r.x+=n,r.width-=n):"sw"===o?(r.x+=n,r.width-=n,r.height-=n):"ne"===o?(r.y-=n,r.width+=n,r.height+=n):"e"===o?r.width+=n:"se"===o&&(r.width+=n,r.height+=n)),"ArrowUp"===t?"nw"===o?(r.x-=n,r.y-=n,r.width+=n,r.height+=n):"n"===o?(r.y-=n,r.height+=n):"ne"===o?(r.y-=n,r.width+=n,r.height+=n):"sw"===o?(r.x+=n,r.width-=n,r.height-=n):"s"===o?r.height-=n:"se"===o&&(r.width-=n,r.height-=n):"ArrowDown"===t&&("nw"===o?(r.x+=n,r.y+=n,r.width-=n,r.height-=n):"n"===o?(r.y+=n,r.height-=n):"ne"===o?(r.y+=n,r.width-=n,r.height-=n):"sw"===o?(r.x-=n,r.width+=n,r.height+=n):"s"===o?r.height+=n:"se"===o&&(r.width+=n,r.height+=n)),r}const w={capture:!0,passive:!1};class u extends e.PureComponent{constructor(){super(...arguments),this.docMoveBound=!1,this.mouseDownOnCrop=!1,this.dragStarted=!1,this.evData={startClientX:0,startClientY:0,startCropX:0,startCropY:0,clientX:0,clientY:0,isResize:!0},this.componentRef=(0, e.createRef)(),this.mediaRef=(0, e.createRef)(),this.initChangeCalled=!1,this.state={cropIsActive:!1,newCropIsBeingDrawn:!1},this.onCropPointerDown=e=>{const{crop:t,disabled:n}=this.props,o=this.getBox();if(!t)return;const r=l(t,o.width,o.height);if(n)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});const i=e.target.dataset.ord,a=Boolean(i);let h=e.clientX,s=e.clientY,d=r.x,c=r.y;if(i){const t=e.clientX-o.x,n=e.clientY-o.y;let a=0,l=0;"ne"===i||"e"==i?(a=t-(r.x+r.width),l=n-r.y,d=r.x,c=r.y+r.height):"se"===i||"s"===i?(a=t-(r.x+r.width),l=n-(r.y+r.height),d=r.x,c=r.y):"sw"===i||"w"==i?(a=t-r.x,l=n-(r.y+r.height),d=r.x+r.width,c=r.y):"nw"!==i&&"n"!=i||(a=t-r.x,l=n-r.y,d=r.x+r.width,c=r.y+r.height),h=d+o.x+a,s=c+o.y+l;}this.evData={startClientX:h,startClientY:s,startCropX:d,startCropY:c,clientX:e.clientX,clientY:e.clientY,isResize:a,ord:i},this.mouseDownOnCrop=!0,this.setState({cropIsActive:!0});},this.onComponentPointerDown=e=>{const{crop:t,disabled:n,locked:o,keepSelection:r,onChange:i}=this.props,a=this.getBox();if(n||o||r&&t)return;e.cancelable&&e.preventDefault(),this.bindDocMove(),this.componentRef.current.focus({preventScroll:!0});const h=e.clientX-a.x,s=e.clientY-a.y,d={unit:"px",x:h,y:s,width:0,height:0};this.evData={startClientX:e.clientX,startClientY:e.clientY,startCropX:h,startCropY:s,clientX:e.clientX,clientY:e.clientY,isResize:!0},this.mouseDownOnCrop=!0,i(l(d,a.width,a.height),c(d,a.width,a.height)),this.setState({cropIsActive:!0,newCropIsBeingDrawn:!0});},this.onDocPointerMove=e=>{const{crop:t,disabled:n,onChange:o,onDragStart:r}=this.props,i=this.getBox();if(n||!t||!this.mouseDownOnCrop)return;e.cancelable&&e.preventDefault(),this.dragStarted||(this.dragStarted=!0,r&&r(e));const{evData:a}=this;let s;a.clientX=e.clientX,a.clientY=e.clientY,s=a.isResize?this.resizeCrop():this.dragCrop(),h(t,s)||o(l(s,i.width,i.height),c(s,i.width,i.height));},this.onComponentKeyDown=e=>{const{crop:t,disabled:n,onChange:o,onComplete:r}=this.props,i=this.getBox();if(n)return;const h=e.key;let s=!1;if(!t)return;const d=this.makePixelCrop(),p=(navigator.platform.match("Mac")?e.metaKey:e.ctrlKey)?u.nudgeStepLarge:e.shiftKey?u.nudgeStepMedium:u.nudgeStep;if("ArrowLeft"===h?(d.x-=p,s=!0):"ArrowRight"===h?(d.x+=p,s=!0):"ArrowUp"===h?(d.y-=p,s=!0):"ArrowDown"===h&&(d.y+=p,s=!0),s){e.cancelable&&e.preventDefault(),d.x=a(d.x,0,i.width-d.width),d.y=a(d.y,0,i.height-d.height);const t=l(d,i.width,i.height),n=c(d,i.width,i.height);o(t,n),r&&r(t,n);}},this.onHandlerKeyDown=(e,t)=>{const{aspect:n=0,crop:o,disabled:r,minWidth:i=0,minHeight:a=0,maxWidth:s,maxHeight:d,onChange:w,onComplete:m}=this.props,y=this.getBox();if(r||!o)return;if("ArrowUp"!==e.key&&"ArrowDown"!==e.key&&"ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.stopPropagation(),e.preventDefault();const x=(navigator.platform.match("Mac")?e.metaKey:e.ctrlKey)?u.nudgeStepLarge:e.shiftKey?u.nudgeStepMedium:u.nudgeStep,C=p(g(l(o,y.width,y.height),e.key,x,t),n,t,y.width,y.height,i,a,s,d);if(!h(o,C)){const e=c(C,y.width,y.height);w(C,e),m&&m(C,e);}},this.onDocPointerDone=e=>{const{crop:t,disabled:n,onComplete:o,onDragEnd:r}=this.props,i=this.getBox();this.unbindDocMove(),!n&&t&&this.mouseDownOnCrop&&(this.mouseDownOnCrop=!1,this.dragStarted=!1,r&&r(e),o&&o(l(t,i.width,i.height),c(t,i.width,i.height)),this.setState({cropIsActive:!1,newCropIsBeingDrawn:!1}));},this.onDragFocus=e=>{var t;null===(t=this.componentRef.current)||void 0===t||t.scrollTo(0,0);};}get document(){return document}getBox(){const e=this.mediaRef.current;if(!e)return {x:0,y:0,width:0,height:0};const{x:t,y:n,width:o,height:r}=e.getBoundingClientRect();return {x:t,y:n,width:o,height:r}}componentDidUpdate(e){const{crop:t,onComplete:n}=this.props;if(n&&!e.crop&&t){const{width:e,height:o}=this.getBox();e&&o&&n(l(t,e,o),c(t,e,o));}}componentWillUnmount(){this.resizeObserver&&this.resizeObserver.disconnect();}bindDocMove(){this.docMoveBound||(this.document.addEventListener("pointermove",this.onDocPointerMove,w),this.document.addEventListener("pointerup",this.onDocPointerDone,w),this.document.addEventListener("pointercancel",this.onDocPointerDone,w),this.docMoveBound=!0);}unbindDocMove(){this.docMoveBound&&(this.document.removeEventListener("pointermove",this.onDocPointerMove,w),this.document.removeEventListener("pointerup",this.onDocPointerDone,w),this.document.removeEventListener("pointercancel",this.onDocPointerDone,w),this.docMoveBound=!1);}getCropStyle(){const{crop:e}=this.props;if(e)return {top:`${e.y}${e.unit}`,left:`${e.x}${e.unit}`,width:`${e.width}${e.unit}`,height:`${e.height}${e.unit}`}}dragCrop(){const{evData:e}=this,t=this.getBox(),n=this.makePixelCrop(),o=e.clientX-e.startClientX,r=e.clientY-e.startClientY;return n.x=a(e.startCropX+o,0,t.width-n.width),n.y=a(e.startCropY+r,0,t.height-n.height),n}getPointRegion(e){const{evData:t}=this,n=t.clientX-e.x,o=t.clientY-e.y<t.startCropY;return n<t.startCropX?o?"nw":"sw":o?"ne":"se"}resizeCrop(){const{evData:e}=this,t=this.getBox(),{aspect:n=0,minWidth:o=0,minHeight:r=0,maxWidth:i,maxHeight:a}=this.props,h=this.getPointRegion(t),s=this.makePixelCrop(),d=e.ord?e.ord:h,c=e.clientX-e.startClientX,l=e.clientY-e.startClientY,g={unit:"px",x:0,y:0,width:0,height:0};"ne"===h?(g.x=e.startCropX,g.width=c,n?(g.height=g.width/n,g.y=e.startCropY-g.height):(g.height=Math.abs(l),g.y=e.startCropY-g.height)):"se"===h?(g.x=e.startCropX,g.y=e.startCropY,g.width=c,g.height=n?g.width/n:l):"sw"===h?(g.x=e.startCropX+c,g.y=e.startCropY,g.width=Math.abs(c),g.height=n?g.width/n:l):"nw"===h&&(g.x=e.startCropX+c,g.width=Math.abs(c),n?(g.height=g.width/n,g.y=e.startCropY-g.height):(g.height=Math.abs(l),g.y=e.startCropY+l));const w=p(g,n,h,t.width,t.height,o,r,i,a);return n||u.xyOrds.indexOf(d)>-1?(s.x=w.x,s.y=w.y,s.width=w.width,s.height=w.height):u.xOrds.indexOf(d)>-1?(s.x=w.x,s.width=w.width):u.yOrds.indexOf(d)>-1&&(s.y=w.y,s.height=w.height),s}createCropSelection(){const{ariaLabels:e=u.defaultProps.ariaLabels,disabled:n,locked:o,renderSelectionAddon:r,ruleOfThirds:i,crop:a}=this.props,h=this.getCropStyle();if(a)return t().createElement("div",{style:h,className:"ReactCrop__crop-selection",onPointerDown:this.onCropPointerDown,"aria-label":e.cropArea,tabIndex:0,onKeyDown:this.onComponentKeyDown,role:"group"},!n&&!o&&t().createElement("div",{className:"ReactCrop__drag-elements",onFocus:this.onDragFocus},t().createElement("div",{className:"ReactCrop__drag-bar ord-n","data-ord":"n"}),t().createElement("div",{className:"ReactCrop__drag-bar ord-e","data-ord":"e"}),t().createElement("div",{className:"ReactCrop__drag-bar ord-s","data-ord":"s"}),t().createElement("div",{className:"ReactCrop__drag-bar ord-w","data-ord":"w"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-nw","data-ord":"nw",tabIndex:0,"aria-label":e.nwDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"nw"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-n","data-ord":"n",tabIndex:0,"aria-label":e.nDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"n"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-ne","data-ord":"ne",tabIndex:0,"aria-label":e.neDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"ne"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-e","data-ord":"e",tabIndex:0,"aria-label":e.eDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"e"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-se","data-ord":"se",tabIndex:0,"aria-label":e.seDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"se"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-s","data-ord":"s",tabIndex:0,"aria-label":e.sDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"s"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-sw","data-ord":"sw",tabIndex:0,"aria-label":e.swDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"sw"),role:"button"}),t().createElement("div",{className:"ReactCrop__drag-handle ord-w","data-ord":"w",tabIndex:0,"aria-label":e.wDragHandle,onKeyDown:e=>this.onHandlerKeyDown(e,"w"),role:"button"})),r&&t().createElement("div",{className:"ReactCrop__selection-addon",onMouseDown:e=>e.stopPropagation()},r(this.state)),i&&t().createElement(t().Fragment,null,t().createElement("div",{className:"ReactCrop__rule-of-thirds-hz"}),t().createElement("div",{className:"ReactCrop__rule-of-thirds-vt"})))}makePixelCrop(){const e={...i,...this.props.crop||{}},t=this.getBox();return l(e,t.width,t.height)}render(){const{aspect:e,children:o,circularCrop:r,className:i,crop:a,disabled:h,locked:s,style:d,ruleOfThirds:c}=this.props,{cropIsActive:l,newCropIsBeingDrawn:p}=this.state,g=a?this.createCropSelection():null,w=function(){for(var e,t,o=0,r="";o<arguments.length;)(e=arguments[o++])&&(t=n(e))&&(r&&(r+=" "),r+=t);return r}("ReactCrop",i,{"ReactCrop--active":l,"ReactCrop--disabled":h,"ReactCrop--locked":s,"ReactCrop--new-crop":p,"ReactCrop--fixed-aspect":a&&e,"ReactCrop--circular-crop":a&&r,"ReactCrop--rule-of-thirds":a&&c,"ReactCrop--invisible-crop":!this.dragStarted&&a&&!a.width&&!a.height});return t().createElement("div",{ref:this.componentRef,className:w,style:d},t().createElement("div",{ref:this.mediaRef,className:"ReactCrop__child-wrapper",onPointerDown:this.onComponentPointerDown},o),g)}}u.xOrds=["e","w"],u.yOrds=["n","s"],u.xyOrds=["nw","ne","se","sw"],u.nudgeStep=1,u.nudgeStepMedium=10,u.nudgeStepLarge=100,u.defaultProps={ariaLabels:{cropArea:"Use the arrow keys to move the crop selection area",nwDragHandle:"Use the arrow keys to move the north west drag handle to change the crop selection area",nDragHandle:"Use the up and down arrow keys to move the north drag handle to change the crop selection area",neDragHandle:"Use the arrow keys to move the north east drag handle to change the crop selection area",eDragHandle:"Use the up and down arrow keys to move the east drag handle to change the crop selection area",seDragHandle:"Use the arrow keys to move the south east drag handle to change the crop selection area",sDragHandle:"Use the up and down arrow keys to move the south drag handle to change the crop selection area",swDragHandle:"Use the arrow keys to move the south west drag handle to change the crop selection area",wDragHandle:"Use the up and down arrow keys to move the west drag handle to change the crop selection area"}};})(),r})()));
|
|
3524
3524
|
} (ReactCrop_min, ReactCrop_min.exports));
|
|
3525
3525
|
|
|
3526
3526
|
var ReactCrop_minExports = ReactCrop_min.exports;
|
|
@@ -3533,8 +3533,12 @@ var developmentApi = {
|
|
|
3533
3533
|
cropImage: cropImage
|
|
3534
3534
|
};
|
|
3535
3535
|
|
|
3536
|
+
function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3537
|
+
function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty$3(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
3536
3538
|
var useCropImage = function useCropImage(options) {
|
|
3537
|
-
return reactQuery.useMutation(
|
|
3539
|
+
return reactQuery.useMutation(_objectSpread$4({
|
|
3540
|
+
mutationFn: developmentApi.cropImage
|
|
3541
|
+
}, options));
|
|
3538
3542
|
};
|
|
3539
3543
|
|
|
3540
3544
|
var useImageControls = function useImageControls(_ref) {
|
|
@@ -3672,11 +3676,11 @@ var Controls = function Controls(_ref) {
|
|
|
3672
3676
|
var _imageRef$current3, _imageRef$current4;
|
|
3673
3677
|
return cropHeight * (((_imageRef$current3 = imageRef.current) === null || _imageRef$current3 === void 0 ? void 0 : _imageRef$current3.naturalWidth) / ((_imageRef$current4 = imageRef.current) === null || _imageRef$current4 === void 0 ? void 0 : _imageRef$current4.width));
|
|
3674
3678
|
};
|
|
3675
|
-
var _useState =
|
|
3679
|
+
var _useState = require$$0.useState(getActualCropHeight(crop.height)),
|
|
3676
3680
|
_useState2 = _slicedToArray$2(_useState, 2),
|
|
3677
3681
|
height = _useState2[0],
|
|
3678
3682
|
setHeight = _useState2[1];
|
|
3679
|
-
var _useState3 =
|
|
3683
|
+
var _useState3 = require$$0.useState(getActualCropWidth(crop.width)),
|
|
3680
3684
|
_useState4 = _slicedToArray$2(_useState3, 2),
|
|
3681
3685
|
width = _useState4[0],
|
|
3682
3686
|
setWidth = _useState4[1];
|
|
@@ -3698,73 +3702,80 @@ var Controls = function Controls(_ref) {
|
|
|
3698
3702
|
handleAspectHeightChange = _useImageControls.handleAspectHeightChange;
|
|
3699
3703
|
var debouncedHeight = reactUtils.useDebounce(height, 800);
|
|
3700
3704
|
var debouncedWidth = reactUtils.useDebounce(width, 800);
|
|
3701
|
-
|
|
3705
|
+
require$$0.useEffect(function () {
|
|
3702
3706
|
handleHeightChange(debouncedHeight);
|
|
3703
3707
|
}, [debouncedHeight]);
|
|
3704
|
-
|
|
3708
|
+
require$$0.useEffect(function () {
|
|
3705
3709
|
handleWidthChange(debouncedWidth);
|
|
3706
3710
|
}, [debouncedWidth]);
|
|
3707
|
-
|
|
3711
|
+
require$$0.useEffect(function () {
|
|
3708
3712
|
setHeight(getActualCropHeight(crop.height));
|
|
3709
3713
|
setWidth(getActualCropWidth(crop.width));
|
|
3710
3714
|
}, [crop]);
|
|
3711
|
-
return /*#__PURE__*/
|
|
3712
|
-
className: "flex flex-col p-4 md:w-2/6 "
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
|
|
3716
|
-
|
|
3717
|
-
|
|
3718
|
-
|
|
3719
|
-
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
|
|
3724
|
-
|
|
3725
|
-
|
|
3726
|
-
|
|
3727
|
-
|
|
3728
|
-
|
|
3729
|
-
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
-
|
|
3733
|
-
|
|
3734
|
-
|
|
3735
|
-
|
|
3736
|
-
|
|
3737
|
-
|
|
3738
|
-
|
|
3739
|
-
|
|
3740
|
-
|
|
3741
|
-
|
|
3742
|
-
|
|
3743
|
-
|
|
3744
|
-
|
|
3745
|
-
|
|
3746
|
-
|
|
3747
|
-
|
|
3748
|
-
|
|
3749
|
-
|
|
3750
|
-
|
|
3751
|
-
|
|
3752
|
-
|
|
3753
|
-
|
|
3754
|
-
|
|
3755
|
-
|
|
3756
|
-
|
|
3757
|
-
|
|
3758
|
-
|
|
3759
|
-
|
|
3760
|
-
|
|
3761
|
-
|
|
3762
|
-
|
|
3763
|
-
|
|
3764
|
-
|
|
3765
|
-
|
|
3766
|
-
|
|
3767
|
-
|
|
3715
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3716
|
+
className: "flex flex-col p-4 md:w-2/6 ",
|
|
3717
|
+
children: [!hideControls && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
3718
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(Switch__default["default"], {
|
|
3719
|
+
checked: isFullImage,
|
|
3720
|
+
className: "flex-grow-0",
|
|
3721
|
+
label: t("neetoImageUploader.labels.selectOriginalImage"),
|
|
3722
|
+
onChange: function onChange() {
|
|
3723
|
+
return setIsFullImage(function (isFullImage) {
|
|
3724
|
+
return !isFullImage;
|
|
3725
|
+
});
|
|
3726
|
+
}
|
|
3727
|
+
}), /*#__PURE__*/jsxRuntime.jsx(Switch__default["default"], {
|
|
3728
|
+
checked: isAspectRatioLocked,
|
|
3729
|
+
className: "mt-4 flex-grow-0",
|
|
3730
|
+
disabled: isFullImage,
|
|
3731
|
+
label: t("neetoImageUploader.labels.lockAspectRatio"),
|
|
3732
|
+
onChange: onToggleAspectRatioLock
|
|
3733
|
+
}), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
|
|
3734
|
+
className: "mb-2 mt-6",
|
|
3735
|
+
style: "body2",
|
|
3736
|
+
children: t("neetoImageUploader.imageEditor.aspectRatio")
|
|
3737
|
+
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3738
|
+
className: "flex gap-4 self-start",
|
|
3739
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
|
|
3740
|
+
"data-cy": "aspect-ratio-width-input",
|
|
3741
|
+
disabled: isFullImage,
|
|
3742
|
+
size: "small",
|
|
3743
|
+
type: "number",
|
|
3744
|
+
value: aspectRatio.width,
|
|
3745
|
+
onChange: utils.withEventTargetValue(handleAspectWidthChange)
|
|
3746
|
+
}), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
|
|
3747
|
+
children: " : "
|
|
3748
|
+
}), /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
|
|
3749
|
+
"data-cy": "aspect-ratio-height-input",
|
|
3750
|
+
disabled: isFullImage,
|
|
3751
|
+
size: "small",
|
|
3752
|
+
type: "number",
|
|
3753
|
+
value: aspectRatio.height,
|
|
3754
|
+
onChange: utils.withEventTargetValue(handleAspectHeightChange)
|
|
3755
|
+
})]
|
|
3756
|
+
})]
|
|
3757
|
+
}), /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
|
|
3758
|
+
className: "mt-4 flex-grow-0",
|
|
3759
|
+
disabled: isFullImage,
|
|
3760
|
+
label: t("neetoImageUploader.labels.width"),
|
|
3761
|
+
type: "number",
|
|
3762
|
+
value: Math.round(width),
|
|
3763
|
+
onChange: utils.withEventTargetValue(setWidth)
|
|
3764
|
+
}), /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
|
|
3765
|
+
className: "mt-4 flex-grow-0",
|
|
3766
|
+
disabled: isFullImage,
|
|
3767
|
+
label: t("neetoImageUploader.labels.height"),
|
|
3768
|
+
type: "number",
|
|
3769
|
+
value: Math.round(height),
|
|
3770
|
+
onChange: utils.withEventTargetValue(setHeight)
|
|
3771
|
+
}), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
|
|
3772
|
+
className: "mt-6 self-start",
|
|
3773
|
+
"data-cy": "neeto-image-uploader-crop-submit-button",
|
|
3774
|
+
label: t("neetoImageUploader.labels.done"),
|
|
3775
|
+
disabled: isNilOrEmpty(imageRef.current) && (crop.width <= 0 || crop.height <= 0),
|
|
3776
|
+
onClick: handleSubmit
|
|
3777
|
+
})]
|
|
3778
|
+
});
|
|
3768
3779
|
};
|
|
3769
3780
|
|
|
3770
3781
|
var ImageEditor = function ImageEditor(_ref) {
|
|
@@ -3776,22 +3787,22 @@ var ImageEditor = function ImageEditor(_ref) {
|
|
|
3776
3787
|
signedId = _ref$signedId === void 0 ? "" : _ref$signedId,
|
|
3777
3788
|
_ref$fixedAspectRatio = _ref.fixedAspectRatio,
|
|
3778
3789
|
fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio;
|
|
3779
|
-
var _useState =
|
|
3790
|
+
var _useState = require$$0.useState(true),
|
|
3780
3791
|
_useState2 = _slicedToArray$2(_useState, 2),
|
|
3781
3792
|
isAspectRatioLocked = _useState2[0],
|
|
3782
3793
|
setIsAspectRatioLocked = _useState2[1];
|
|
3783
|
-
var _useState3 =
|
|
3794
|
+
var _useState3 = require$$0.useState(false),
|
|
3784
3795
|
_useState4 = _slicedToArray$2(_useState3, 2),
|
|
3785
3796
|
isFullImage = _useState4[0],
|
|
3786
3797
|
setIsFullImage = _useState4[1];
|
|
3787
|
-
var _useState5 =
|
|
3798
|
+
var _useState5 = require$$0.useState({
|
|
3788
3799
|
width: (fixedAspectRatio === null || fixedAspectRatio === void 0 ? void 0 : fixedAspectRatio.width) || 16,
|
|
3789
3800
|
height: (fixedAspectRatio === null || fixedAspectRatio === void 0 ? void 0 : fixedAspectRatio.height) || 9
|
|
3790
3801
|
}),
|
|
3791
3802
|
_useState6 = _slicedToArray$2(_useState5, 2),
|
|
3792
3803
|
aspectRatio = _useState6[0],
|
|
3793
3804
|
setAspectRatio = _useState6[1];
|
|
3794
|
-
var _useState7 =
|
|
3805
|
+
var _useState7 = require$$0.useState(DEFAULT_CROP_CONFIG),
|
|
3795
3806
|
_useState8 = _slicedToArray$2(_useState7, 2),
|
|
3796
3807
|
crop = _useState8[0],
|
|
3797
3808
|
setCrop = _useState8[1];
|
|
@@ -3799,8 +3810,8 @@ var ImageEditor = function ImageEditor(_ref) {
|
|
|
3799
3810
|
t = _useTranslation.t;
|
|
3800
3811
|
var _useCropImage = useCropImage(),
|
|
3801
3812
|
cropImage = _useCropImage.mutate;
|
|
3802
|
-
var imageRef =
|
|
3803
|
-
var wrapperRef =
|
|
3813
|
+
var imageRef = require$$0.useRef(null);
|
|
3814
|
+
var wrapperRef = require$$0.useRef(null);
|
|
3804
3815
|
var cropAspectRatio = neetoCist.isPresent(fixedAspectRatio === null || fixedAspectRatio === void 0 ? void 0 : fixedAspectRatio.width) && neetoCist.isPresent(fixedAspectRatio.height) ? (fixedAspectRatio === null || fixedAspectRatio === void 0 ? void 0 : fixedAspectRatio.width) / (fixedAspectRatio === null || fixedAspectRatio === void 0 ? void 0 : fixedAspectRatio.height) : 16 / 9;
|
|
3805
3816
|
var processCrop = function processCrop() {
|
|
3806
3817
|
if (isFullImage) {
|
|
@@ -3835,57 +3846,61 @@ var ImageEditor = function ImageEditor(_ref) {
|
|
|
3835
3846
|
url: newURL
|
|
3836
3847
|
}));
|
|
3837
3848
|
};
|
|
3838
|
-
return /*#__PURE__*/
|
|
3839
|
-
className: "flex h-full flex-col gap-4 px-8 py-12"
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
|
|
3844
|
-
|
|
3845
|
-
|
|
3846
|
-
|
|
3847
|
-
|
|
3848
|
-
|
|
3849
|
-
|
|
3850
|
-
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
|
|
3854
|
-
|
|
3855
|
-
|
|
3856
|
-
|
|
3857
|
-
|
|
3858
|
-
|
|
3859
|
-
|
|
3860
|
-
|
|
3861
|
-
|
|
3862
|
-
|
|
3863
|
-
|
|
3864
|
-
|
|
3865
|
-
|
|
3866
|
-
|
|
3867
|
-
|
|
3868
|
-
|
|
3869
|
-
|
|
3870
|
-
|
|
3871
|
-
|
|
3849
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3850
|
+
className: "flex h-full flex-col gap-4 px-8 py-12",
|
|
3851
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
|
|
3852
|
+
className: "self-start",
|
|
3853
|
+
"data-cy": "image-editor-back-button",
|
|
3854
|
+
icon: neetoIcons.LeftArrow,
|
|
3855
|
+
iconPosition: "left",
|
|
3856
|
+
style: "text",
|
|
3857
|
+
onClick: handleReset
|
|
3858
|
+
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
3859
|
+
className: "flex h-full w-full flex-col gap-2 overflow-y-scroll md:flex-row md:overflow-y-auto",
|
|
3860
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
3861
|
+
id: "imageEditor",
|
|
3862
|
+
ref: wrapperRef,
|
|
3863
|
+
className: classnames__default["default"]("flex", "h-full w-full md:w-4/6", "justify-around", "neeto-ui-bg-gray-200", {
|
|
3864
|
+
"items-center": isItemsCenter({
|
|
3865
|
+
wrapperRef: wrapperRef,
|
|
3866
|
+
imageRef: imageRef
|
|
3867
|
+
})
|
|
3868
|
+
}),
|
|
3869
|
+
children: /*#__PURE__*/jsxRuntime.jsx(ReactCrop, {
|
|
3870
|
+
crop: isFullImage ? null : crop,
|
|
3871
|
+
src: image === null || image === void 0 ? void 0 : image.url,
|
|
3872
|
+
aspect: isAspectRatioLocked ? aspectRatio.width / aspectRatio.height : 0,
|
|
3873
|
+
onChange: setCrop,
|
|
3874
|
+
onComplete: setCrop,
|
|
3875
|
+
children: /*#__PURE__*/jsxRuntime.jsx("img", {
|
|
3876
|
+
alt: t("neetoImageUploader.common.image"),
|
|
3877
|
+
"data-cy": "image-editor-uploaded-image",
|
|
3878
|
+
ref: imageRef,
|
|
3879
|
+
src: image === null || image === void 0 ? void 0 : image.url,
|
|
3880
|
+
onLoad: function onLoad(e) {
|
|
3881
|
+
return onImageLoaded({
|
|
3882
|
+
image: e.target,
|
|
3883
|
+
setCrop: setCrop,
|
|
3884
|
+
cropAspectRatio: cropAspectRatio
|
|
3885
|
+
});
|
|
3886
|
+
}
|
|
3887
|
+
})
|
|
3888
|
+
})
|
|
3889
|
+
}), /*#__PURE__*/jsxRuntime.jsx(Controls, {
|
|
3890
|
+
aspectRatio: aspectRatio,
|
|
3891
|
+
crop: crop,
|
|
3892
|
+
handleSubmit: handleSubmit,
|
|
3893
|
+
imageRef: imageRef,
|
|
3894
|
+
isAspectRatioLocked: isAspectRatioLocked,
|
|
3895
|
+
isFullImage: isFullImage,
|
|
3896
|
+
setAspectRatio: setAspectRatio,
|
|
3872
3897
|
setCrop: setCrop,
|
|
3873
|
-
|
|
3874
|
-
|
|
3875
|
-
|
|
3876
|
-
|
|
3877
|
-
|
|
3878
|
-
|
|
3879
|
-
handleSubmit: handleSubmit,
|
|
3880
|
-
imageRef: imageRef,
|
|
3881
|
-
isAspectRatioLocked: isAspectRatioLocked,
|
|
3882
|
-
isFullImage: isFullImage,
|
|
3883
|
-
setAspectRatio: setAspectRatio,
|
|
3884
|
-
setCrop: setCrop,
|
|
3885
|
-
setIsFullImage: setIsFullImage,
|
|
3886
|
-
hideControls: neetoCist.isPresent(fixedAspectRatio),
|
|
3887
|
-
setAspectRatioLocked: setIsAspectRatioLocked
|
|
3888
|
-
})));
|
|
3898
|
+
setIsFullImage: setIsFullImage,
|
|
3899
|
+
hideControls: neetoCist.isPresent(fixedAspectRatio),
|
|
3900
|
+
setAspectRatioLocked: setIsAspectRatioLocked
|
|
3901
|
+
})]
|
|
3902
|
+
})]
|
|
3903
|
+
});
|
|
3889
3904
|
};
|
|
3890
3905
|
|
|
3891
3906
|
var fetch = function fetch(_ref) {
|
|
@@ -3905,20 +3920,24 @@ var imagesApi = {
|
|
|
3905
3920
|
fetch: fetch
|
|
3906
3921
|
};
|
|
3907
3922
|
|
|
3923
|
+
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; }
|
|
3924
|
+
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty$3(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; }
|
|
3908
3925
|
var useFetchAssets = function useFetchAssets(_ref) {
|
|
3909
3926
|
var searchTerm = _ref.searchTerm,
|
|
3910
3927
|
url = _ref.url,
|
|
3911
3928
|
page = _ref.page,
|
|
3912
3929
|
per = _ref.per;
|
|
3913
3930
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
3914
|
-
return reactQuery.useQuery(
|
|
3915
|
-
|
|
3916
|
-
|
|
3917
|
-
|
|
3918
|
-
|
|
3919
|
-
|
|
3920
|
-
|
|
3921
|
-
|
|
3931
|
+
return reactQuery.useQuery(_objectSpread$3({
|
|
3932
|
+
queryKey: [QUERY_KEYS.ASSETS_LIST],
|
|
3933
|
+
queryFn: function queryFn() {
|
|
3934
|
+
return imagesApi.fetch({
|
|
3935
|
+
searchTerm: searchTerm,
|
|
3936
|
+
url: url,
|
|
3937
|
+
page: page,
|
|
3938
|
+
per: per
|
|
3939
|
+
});
|
|
3940
|
+
},
|
|
3922
3941
|
staleTime: ASSETS_STALE_TIME
|
|
3923
3942
|
}, options));
|
|
3924
3943
|
};
|
|
@@ -4219,7 +4238,7 @@ InfiniteScroll.exports;
|
|
|
4219
4238
|
|
|
4220
4239
|
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; }; }();
|
|
4221
4240
|
|
|
4222
|
-
var _react =
|
|
4241
|
+
var _react = require$$0__default["default"];
|
|
4223
4242
|
|
|
4224
4243
|
var _react2 = _interopRequireDefault(_react);
|
|
4225
4244
|
|
|
@@ -4524,7 +4543,7 @@ var _createClass = function () { function defineProperties(target, props) { for
|
|
|
4524
4543
|
|
|
4525
4544
|
var _class, _temp2;
|
|
4526
4545
|
|
|
4527
|
-
var _react =
|
|
4546
|
+
var _react = require$$0__default["default"];
|
|
4528
4547
|
|
|
4529
4548
|
var _react2 = _interopRequireDefault(_react);
|
|
4530
4549
|
|
|
@@ -4694,72 +4713,80 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
|
|
|
4694
4713
|
handleUnsplashImageSelect = _ref$handleUnsplashIm === void 0 ? neetoCist.noop : _ref$handleUnsplashIm;
|
|
4695
4714
|
var _useTranslation = reactI18next.useTranslation(),
|
|
4696
4715
|
t = _useTranslation.t;
|
|
4697
|
-
var Loader = /*#__PURE__*/
|
|
4698
|
-
className: "flex justify-center"
|
|
4699
|
-
|
|
4700
|
-
|
|
4701
|
-
|
|
4702
|
-
|
|
4703
|
-
|
|
4704
|
-
|
|
4705
|
-
|
|
4706
|
-
|
|
4707
|
-
|
|
4708
|
-
|
|
4709
|
-
|
|
4710
|
-
|
|
4711
|
-
|
|
4712
|
-
|
|
4713
|
-
|
|
4714
|
-
|
|
4715
|
-
|
|
4716
|
-
|
|
4717
|
-
|
|
4718
|
-
|
|
4719
|
-
|
|
4720
|
-
|
|
4721
|
-
|
|
4722
|
-
|
|
4723
|
-
|
|
4724
|
-
|
|
4725
|
-
|
|
4726
|
-
|
|
4727
|
-
|
|
4728
|
-
|
|
4729
|
-
|
|
4730
|
-
|
|
4731
|
-
|
|
4732
|
-
|
|
4733
|
-
|
|
4734
|
-
|
|
4735
|
-
|
|
4736
|
-
|
|
4737
|
-
|
|
4738
|
-
|
|
4739
|
-
|
|
4740
|
-
|
|
4741
|
-
|
|
4742
|
-
|
|
4743
|
-
|
|
4716
|
+
var Loader = /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
4717
|
+
className: "flex justify-center",
|
|
4718
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
|
|
4719
|
+
});
|
|
4720
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
4721
|
+
className: "niu-unsplash-container mr-2 max-w-full overflow-x-hidden overflow-y-scroll",
|
|
4722
|
+
children: /*#__PURE__*/jsxRuntime.jsx(_default, {
|
|
4723
|
+
hasMore: hasMore,
|
|
4724
|
+
loadMore: loadMore,
|
|
4725
|
+
pack: true,
|
|
4726
|
+
position: true,
|
|
4727
|
+
className: "w-full",
|
|
4728
|
+
loader: Loader,
|
|
4729
|
+
sizes: INFINITE_SCROLLER_SIZES,
|
|
4730
|
+
style: INFINITE_SCROLLER_STYLE,
|
|
4731
|
+
useWindow: false,
|
|
4732
|
+
children: images.map(function (image, index) {
|
|
4733
|
+
var _image$urls, _image$user, _image$user2;
|
|
4734
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
4735
|
+
className: "float-left w-1/2 pb-4 pr-4 md:w-1/4",
|
|
4736
|
+
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
4737
|
+
className: "relative w-full",
|
|
4738
|
+
style: {
|
|
4739
|
+
paddingBottom: "".concat(image.height / image.width * 100, "%")
|
|
4740
|
+
},
|
|
4741
|
+
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
4742
|
+
className: "neeto-ui-rounded-sm neeto-ui-bg-gray-100 group absolute h-full w-full",
|
|
4743
|
+
id: "unsplashImage".concat(image.id),
|
|
4744
|
+
children: [tab === TABS[1].key && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
4745
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("img", {
|
|
4746
|
+
"data-cy": "niu-unsplash-image-".concat(index),
|
|
4747
|
+
src: image === null || image === void 0 || (_image$urls = image.urls) === null || _image$urls === void 0 ? void 0 : _image$urls.regular,
|
|
4748
|
+
onClick: function onClick() {
|
|
4749
|
+
return handleUnsplashImageSelect(image);
|
|
4750
|
+
}
|
|
4751
|
+
}), /*#__PURE__*/jsxRuntime.jsxs("a", {
|
|
4752
|
+
className: "neeto-ui-text-gray-100 absolute bottom-2 left-2 m-auto text-xs underline opacity-0 group-hover:opacity-100",
|
|
4753
|
+
href: "https://unsplash.com/@".concat(image === null || image === void 0 || (_image$user = image.user) === null || _image$user === void 0 ? void 0 : _image$user.username),
|
|
4754
|
+
rel: "noreferrer",
|
|
4755
|
+
target: "_blank",
|
|
4756
|
+
children: [image === null || image === void 0 || (_image$user2 = image.user) === null || _image$user2 === void 0 ? void 0 : _image$user2.name, " | ", " ", t("neetoImageUploader.labels.unsplash")]
|
|
4757
|
+
})]
|
|
4758
|
+
}), tab === TABS[0].key && /*#__PURE__*/jsxRuntime.jsx("img", {
|
|
4759
|
+
"data-cy": "niu-library-image-".concat(index),
|
|
4760
|
+
src: image === null || image === void 0 ? void 0 : image.url,
|
|
4761
|
+
onClick: function onClick() {
|
|
4762
|
+
return setSelectedImage(image);
|
|
4763
|
+
}
|
|
4764
|
+
})]
|
|
4765
|
+
})
|
|
4766
|
+
})
|
|
4767
|
+
}, image.id);
|
|
4768
|
+
})
|
|
4769
|
+
})
|
|
4770
|
+
});
|
|
4744
4771
|
};
|
|
4745
4772
|
|
|
4746
4773
|
var Images = function Images(_ref) {
|
|
4747
4774
|
var query = _ref.query,
|
|
4748
4775
|
debouncedQuery = _ref.debouncedQuery,
|
|
4749
4776
|
setSelectedImage = _ref.setSelectedImage;
|
|
4750
|
-
var _useState =
|
|
4777
|
+
var _useState = require$$0.useState(true),
|
|
4751
4778
|
_useState2 = _slicedToArray$2(_useState, 2),
|
|
4752
4779
|
hasMore = _useState2[0],
|
|
4753
4780
|
setHasMore = _useState2[1];
|
|
4754
|
-
var _useState3 =
|
|
4781
|
+
var _useState3 = require$$0.useState([]),
|
|
4755
4782
|
_useState4 = _slicedToArray$2(_useState3, 2),
|
|
4756
4783
|
images = _useState4[0],
|
|
4757
4784
|
setImages = _useState4[1];
|
|
4758
|
-
var _useState5 =
|
|
4785
|
+
var _useState5 = require$$0.useState(1),
|
|
4759
4786
|
_useState6 = _slicedToArray$2(_useState5, 2),
|
|
4760
4787
|
pageNo = _useState6[0],
|
|
4761
4788
|
setPageNo = _useState6[1];
|
|
4762
|
-
var _useState7 =
|
|
4789
|
+
var _useState7 = require$$0.useState(false),
|
|
4763
4790
|
_useState8 = _slicedToArray$2(_useState7, 2),
|
|
4764
4791
|
error = _useState8[0],
|
|
4765
4792
|
setError = _useState8[1];
|
|
@@ -4793,20 +4820,21 @@ var Images = function Images(_ref) {
|
|
|
4793
4820
|
refetch();
|
|
4794
4821
|
}
|
|
4795
4822
|
}, 500);
|
|
4796
|
-
|
|
4823
|
+
require$$0.useEffect(function () {
|
|
4797
4824
|
setPageNo(1);
|
|
4798
4825
|
}, [query]);
|
|
4799
|
-
|
|
4826
|
+
require$$0.useEffect(function () {
|
|
4800
4827
|
setImages([]);
|
|
4801
4828
|
refetch();
|
|
4802
4829
|
}, [debouncedQuery]);
|
|
4803
4830
|
if (error) {
|
|
4804
|
-
return /*#__PURE__*/
|
|
4831
|
+
return /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
|
|
4805
4832
|
className: "mt-9 flex justify-center",
|
|
4806
|
-
style: "body2"
|
|
4807
|
-
|
|
4833
|
+
style: "body2",
|
|
4834
|
+
children: t("neetoImageUploader.unsplash.errorMessage")
|
|
4835
|
+
});
|
|
4808
4836
|
}
|
|
4809
|
-
return /*#__PURE__*/
|
|
4837
|
+
return /*#__PURE__*/jsxRuntime.jsx(InfiniteScroller, {
|
|
4810
4838
|
hasMore: hasMore,
|
|
4811
4839
|
images: images,
|
|
4812
4840
|
loadMore: loadMore,
|
|
@@ -4836,17 +4864,21 @@ var unsplashApi = {
|
|
|
4836
4864
|
getUnsplashImage: getUnsplashImage
|
|
4837
4865
|
};
|
|
4838
4866
|
|
|
4867
|
+
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; }
|
|
4868
|
+
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty$3(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; }
|
|
4839
4869
|
var UNSPLASH_LIST = QUERY_KEYS.UNSPLASH_LIST;
|
|
4840
4870
|
var useFetchUnsplashImages = function useFetchUnsplashImages(_ref) {
|
|
4841
4871
|
var pageNo = _ref.pageNo,
|
|
4842
4872
|
query = _ref.query;
|
|
4843
4873
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
4844
|
-
return reactQuery.useQuery(
|
|
4845
|
-
|
|
4846
|
-
|
|
4847
|
-
|
|
4848
|
-
|
|
4849
|
-
|
|
4874
|
+
return reactQuery.useQuery(_objectSpread$2({
|
|
4875
|
+
queryKey: [UNSPLASH_LIST],
|
|
4876
|
+
queryFn: function queryFn() {
|
|
4877
|
+
return unsplashApi.searchUnsplashImages({
|
|
4878
|
+
pageNo: pageNo,
|
|
4879
|
+
query: query
|
|
4880
|
+
});
|
|
4881
|
+
},
|
|
4850
4882
|
staleTime: UNSPLASH_STALE_TIME
|
|
4851
4883
|
}, options));
|
|
4852
4884
|
};
|
|
@@ -4899,19 +4931,19 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
|
|
|
4899
4931
|
setSelectedImage = _ref.setSelectedImage,
|
|
4900
4932
|
setIsUploading = _ref.setIsUploading,
|
|
4901
4933
|
setActiveTab = _ref.setActiveTab;
|
|
4902
|
-
var _useState =
|
|
4934
|
+
var _useState = require$$0.useState(true),
|
|
4903
4935
|
_useState2 = _slicedToArray$2(_useState, 2),
|
|
4904
4936
|
hasMore = _useState2[0],
|
|
4905
4937
|
setHasMore = _useState2[1];
|
|
4906
|
-
var _useState3 =
|
|
4938
|
+
var _useState3 = require$$0.useState([]),
|
|
4907
4939
|
_useState4 = _slicedToArray$2(_useState3, 2),
|
|
4908
4940
|
images = _useState4[0],
|
|
4909
4941
|
setImages = _useState4[1];
|
|
4910
|
-
var _useState5 =
|
|
4942
|
+
var _useState5 = require$$0.useState(1),
|
|
4911
4943
|
_useState6 = _slicedToArray$2(_useState5, 2),
|
|
4912
4944
|
pageNo = _useState6[0],
|
|
4913
4945
|
setPageNo = _useState6[1];
|
|
4914
|
-
var _useState7 =
|
|
4946
|
+
var _useState7 = require$$0.useState(false),
|
|
4915
4947
|
_useState8 = _slicedToArray$2(_useState7, 2),
|
|
4916
4948
|
error = _useState8[0],
|
|
4917
4949
|
setError = _useState8[1];
|
|
@@ -4998,21 +5030,22 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
|
|
|
4998
5030
|
refetch();
|
|
4999
5031
|
}
|
|
5000
5032
|
}, 500);
|
|
5001
|
-
|
|
5033
|
+
require$$0.useEffect(function () {
|
|
5002
5034
|
setPageNo(1);
|
|
5003
5035
|
}, [query]);
|
|
5004
|
-
|
|
5036
|
+
require$$0.useEffect(function () {
|
|
5005
5037
|
setPageNo(1);
|
|
5006
5038
|
setImages([]);
|
|
5007
5039
|
refetch();
|
|
5008
5040
|
}, [debouncedQuery]);
|
|
5009
5041
|
if (error) {
|
|
5010
|
-
return /*#__PURE__*/
|
|
5042
|
+
return /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
|
|
5011
5043
|
className: "mt-9 flex justify-center",
|
|
5012
|
-
style: "body2"
|
|
5013
|
-
|
|
5044
|
+
style: "body2",
|
|
5045
|
+
children: t("neetoImageUploader.unsplash.errorMessage")
|
|
5046
|
+
});
|
|
5014
5047
|
}
|
|
5015
|
-
return /*#__PURE__*/
|
|
5048
|
+
return /*#__PURE__*/jsxRuntime.jsx(InfiniteScroller, {
|
|
5016
5049
|
handleUnsplashImageSelect: handleUnsplashImageSelect,
|
|
5017
5050
|
hasMore: hasMore,
|
|
5018
5051
|
images: images,
|
|
@@ -5026,7 +5059,7 @@ var ImageLibrary = function ImageLibrary(_ref) {
|
|
|
5026
5059
|
tab = _ref.tab,
|
|
5027
5060
|
setIsUploading = _ref.setIsUploading,
|
|
5028
5061
|
setActiveTab = _ref.setActiveTab;
|
|
5029
|
-
var _useState =
|
|
5062
|
+
var _useState = require$$0.useState(""),
|
|
5030
5063
|
_useState2 = _slicedToArray$2(_useState, 2),
|
|
5031
5064
|
query = _useState2[0],
|
|
5032
5065
|
setQuery = _useState2[1];
|
|
@@ -5034,36 +5067,39 @@ var ImageLibrary = function ImageLibrary(_ref) {
|
|
|
5034
5067
|
t = _useTranslation.t;
|
|
5035
5068
|
var debouncedQuery = reactUtils.useDebounce(query, 400);
|
|
5036
5069
|
var inputPlaceHolder = ramda.equals(tab, TABS[1].key) ? t("neetoImageUploader.placeholders.searchImageFromWeb") : t("neetoImageUploader.placeholders.searchImage");
|
|
5037
|
-
|
|
5070
|
+
require$$0.useEffect(function () {
|
|
5038
5071
|
setQuery("");
|
|
5039
5072
|
}, [tab]);
|
|
5040
|
-
return /*#__PURE__*/
|
|
5041
|
-
className: "w-full pb-2 pl-6 pt-1"
|
|
5042
|
-
|
|
5043
|
-
|
|
5044
|
-
|
|
5045
|
-
|
|
5046
|
-
|
|
5047
|
-
|
|
5048
|
-
|
|
5049
|
-
|
|
5050
|
-
|
|
5051
|
-
|
|
5052
|
-
|
|
5053
|
-
|
|
5054
|
-
|
|
5055
|
-
|
|
5056
|
-
|
|
5057
|
-
|
|
5058
|
-
|
|
5059
|
-
|
|
5060
|
-
|
|
5061
|
-
|
|
5062
|
-
|
|
5063
|
-
|
|
5073
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
5074
|
+
className: "w-full pb-2 pl-6 pt-1",
|
|
5075
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
|
|
5076
|
+
autoFocus: true,
|
|
5077
|
+
className: "mb-4 mr-6",
|
|
5078
|
+
"data-cy": "niu-unsplash-image-picker-search-input",
|
|
5079
|
+
name: "text",
|
|
5080
|
+
placeholder: inputPlaceHolder,
|
|
5081
|
+
value: query,
|
|
5082
|
+
onChange: function onChange(_ref2) {
|
|
5083
|
+
var value = _ref2.target.value;
|
|
5084
|
+
return setQuery(value);
|
|
5085
|
+
}
|
|
5086
|
+
}), tab === TABS[0].key ? /*#__PURE__*/jsxRuntime.jsx(Images, {
|
|
5087
|
+
debouncedQuery: debouncedQuery,
|
|
5088
|
+
query: query,
|
|
5089
|
+
setSelectedImage: setSelectedImage
|
|
5090
|
+
}) : /*#__PURE__*/jsxRuntime.jsx(UnsplashLibrary, {
|
|
5091
|
+
debouncedQuery: debouncedQuery,
|
|
5092
|
+
query: query,
|
|
5093
|
+
setActiveTab: setActiveTab,
|
|
5094
|
+
setIsUploading: setIsUploading,
|
|
5095
|
+
setSelectedImage: setSelectedImage
|
|
5096
|
+
})]
|
|
5097
|
+
});
|
|
5064
5098
|
};
|
|
5065
5099
|
|
|
5066
5100
|
var _excluded$1 = ["key"];
|
|
5101
|
+
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; }
|
|
5102
|
+
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty$3(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; }
|
|
5067
5103
|
var Modal = function Modal(_ref) {
|
|
5068
5104
|
var isOpen = _ref.isOpen,
|
|
5069
5105
|
_ref$onClose = _ref.onClose,
|
|
@@ -5074,15 +5110,15 @@ var Modal = function Modal(_ref) {
|
|
|
5074
5110
|
uploadConfig = _ref$uploadConfig === void 0 ? {} : _ref$uploadConfig,
|
|
5075
5111
|
_ref$fixedAspectRatio = _ref.fixedAspectRatio,
|
|
5076
5112
|
fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio;
|
|
5077
|
-
var _useState =
|
|
5113
|
+
var _useState = require$$0.useState(TABS[0].key),
|
|
5078
5114
|
_useState2 = _slicedToArray$2(_useState, 2),
|
|
5079
5115
|
activeTab = _useState2[0],
|
|
5080
5116
|
setActiveTab = _useState2[1];
|
|
5081
|
-
var _useState3 =
|
|
5117
|
+
var _useState3 = require$$0.useState({}),
|
|
5082
5118
|
_useState4 = _slicedToArray$2(_useState3, 2),
|
|
5083
5119
|
selectedImage = _useState4[0],
|
|
5084
5120
|
setSelectedImage = _useState4[1];
|
|
5085
|
-
var _useState5 =
|
|
5121
|
+
var _useState5 = require$$0.useState(false),
|
|
5086
5122
|
_useState6 = _slicedToArray$2(_useState5, 2),
|
|
5087
5123
|
isUploading = _useState6[0],
|
|
5088
5124
|
setIsUploading = _useState6[1];
|
|
@@ -5143,82 +5179,102 @@ var Modal = function Modal(_ref) {
|
|
|
5143
5179
|
key: "local",
|
|
5144
5180
|
onClick: openFileUploadDialog
|
|
5145
5181
|
}]);
|
|
5146
|
-
|
|
5182
|
+
require$$0.useEffect(function () {
|
|
5147
5183
|
setActiveTab(TABS[0].key);
|
|
5148
5184
|
}, [isOpen]);
|
|
5149
|
-
return /*#__PURE__*/
|
|
5185
|
+
return /*#__PURE__*/jsxRuntime.jsxs(NeetoUIModal__default["default"], {
|
|
5150
5186
|
isOpen: isOpen,
|
|
5151
5187
|
className: "niu-modal",
|
|
5152
5188
|
size: "large",
|
|
5153
|
-
onClose: handleCloseModal
|
|
5154
|
-
|
|
5155
|
-
|
|
5156
|
-
|
|
5157
|
-
|
|
5158
|
-
|
|
5159
|
-
|
|
5160
|
-
|
|
5161
|
-
|
|
5162
|
-
return setSelectedImage({});
|
|
5163
|
-
},
|
|
5164
|
-
image: selectedImage,
|
|
5165
|
-
signedId: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.signedId
|
|
5166
|
-
}) : /*#__PURE__*/React__default["default"].createElement("div", _extends$1({
|
|
5167
|
-
className: "h-full flex-col"
|
|
5168
|
-
}, getRootProps({
|
|
5169
|
-
onClick: function onClick(event) {
|
|
5170
|
-
return event.stopPropagation();
|
|
5171
|
-
}
|
|
5172
|
-
})), /*#__PURE__*/React__default["default"].createElement(NeetoUIModal__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
|
|
5173
|
-
style: "h2"
|
|
5174
|
-
}, t("neetoImageUploader.common.imageLibrary"))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
5175
|
-
className: "px-6 py-2"
|
|
5176
|
-
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
5177
|
-
className: "flex flex-col items-center justify-between gap-2 sm:flex-row"
|
|
5178
|
-
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
5179
|
-
className: "flex gap-2"
|
|
5180
|
-
}, /*#__PURE__*/React__default["default"].createElement(Tab__default["default"], {
|
|
5181
|
-
size: "small"
|
|
5182
|
-
}, TABS.map(function (tab) {
|
|
5183
|
-
return /*#__PURE__*/React__default["default"].createElement(Tab__default["default"].Item, {
|
|
5184
|
-
active: activeTab === tab.key,
|
|
5185
|
-
"data-cy": tab.dataCy,
|
|
5186
|
-
key: tab.key,
|
|
5187
|
-
onClick: function onClick() {
|
|
5188
|
-
return setActiveTab(tab.key);
|
|
5189
|
-
}
|
|
5190
|
-
}, tab.label);
|
|
5191
|
-
}))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
5192
|
-
className: "flex gap-2"
|
|
5193
|
-
}, options.map(function (_ref2) {
|
|
5194
|
-
var key = _ref2.key,
|
|
5195
|
-
otherProps = _objectWithoutProperties$2(_ref2, _excluded$1);
|
|
5196
|
-
return /*#__PURE__*/React__default["default"].createElement(Button__default["default"], _extends$1({}, otherProps, {
|
|
5197
|
-
key: key,
|
|
5198
|
-
size: "small"
|
|
5199
|
-
}));
|
|
5200
|
-
})))), /*#__PURE__*/React__default["default"].createElement(ImageLibrary, {
|
|
5201
|
-
setActiveTab: setActiveTab,
|
|
5202
|
-
setIsUploading: setIsUploading,
|
|
5203
|
-
setSelectedImage: setSelectedImage,
|
|
5204
|
-
tab: activeTab
|
|
5205
|
-
}), ramda.equals(activeTab, TABS[1].key) && /*#__PURE__*/React__default["default"].createElement(NeetoUIModal__default["default"].Footer, {
|
|
5206
|
-
className: "flex items-center justify-center gap-2"
|
|
5207
|
-
}, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
|
|
5208
|
-
style: "body2"
|
|
5209
|
-
}, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
|
|
5210
|
-
i18nKey: "neetoImageUploader.unsplash.poweredByUnsplash",
|
|
5211
|
-
components: {
|
|
5212
|
-
a: /*#__PURE__*/React__default["default"].createElement("a", {
|
|
5213
|
-
href: UNSPLASH_URL,
|
|
5214
|
-
rel: "noreferrer",
|
|
5215
|
-
target: "_blank"
|
|
5189
|
+
onClose: handleCloseModal,
|
|
5190
|
+
children: [isUploading && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
5191
|
+
className: "neeto-ui-bg-gray-400 absolute inset-0 z-50 flex h-full items-center justify-center opacity-50",
|
|
5192
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
|
|
5193
|
+
}), isNilOrEmpty(selectedImage) && isDragActive && /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$1(_objectSpread$1({
|
|
5194
|
+
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"
|
|
5195
|
+
}, getRootProps()), {}, {
|
|
5196
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
|
|
5197
|
+
children: t("neetoImageUploader.common.dropHere")
|
|
5216
5198
|
})
|
|
5217
|
-
}
|
|
5218
|
-
|
|
5199
|
+
})), !isNilOrEmpty(selectedImage) ? /*#__PURE__*/jsxRuntime.jsx(ImageEditor, {
|
|
5200
|
+
fixedAspectRatio: fixedAspectRatio,
|
|
5201
|
+
handleImageEditComplete: handleImageEditComplete,
|
|
5202
|
+
handleReset: function handleReset() {
|
|
5203
|
+
return setSelectedImage({});
|
|
5204
|
+
},
|
|
5205
|
+
image: selectedImage,
|
|
5206
|
+
signedId: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.signedId
|
|
5207
|
+
}) : /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$1(_objectSpread$1({
|
|
5208
|
+
className: "h-full flex-col"
|
|
5209
|
+
}, getRootProps({
|
|
5210
|
+
onClick: function onClick(event) {
|
|
5211
|
+
return event.stopPropagation();
|
|
5212
|
+
}
|
|
5213
|
+
})), {}, {
|
|
5214
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(NeetoUIModal__default["default"].Header, {
|
|
5215
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
|
|
5216
|
+
style: "h2",
|
|
5217
|
+
children: t("neetoImageUploader.common.imageLibrary")
|
|
5218
|
+
})
|
|
5219
|
+
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
5220
|
+
className: "px-6 py-2",
|
|
5221
|
+
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
5222
|
+
className: "flex flex-col items-center justify-between gap-2 sm:flex-row",
|
|
5223
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
5224
|
+
className: "flex gap-2",
|
|
5225
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Tab__default["default"], {
|
|
5226
|
+
size: "small",
|
|
5227
|
+
children: TABS.map(function (tab) {
|
|
5228
|
+
return /*#__PURE__*/jsxRuntime.jsx(Tab__default["default"].Item, {
|
|
5229
|
+
active: activeTab === tab.key,
|
|
5230
|
+
"data-cy": tab.dataCy,
|
|
5231
|
+
onClick: function onClick() {
|
|
5232
|
+
return setActiveTab(tab.key);
|
|
5233
|
+
},
|
|
5234
|
+
children: tab.label
|
|
5235
|
+
}, tab.key);
|
|
5236
|
+
})
|
|
5237
|
+
})
|
|
5238
|
+
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
5239
|
+
className: "flex gap-2",
|
|
5240
|
+
children: options.map(function (_ref2) {
|
|
5241
|
+
var key = _ref2.key,
|
|
5242
|
+
otherProps = _objectWithoutProperties$2(_ref2, _excluded$1);
|
|
5243
|
+
return /*#__PURE__*/require$$0.createElement(Button__default["default"], _objectSpread$1(_objectSpread$1({}, otherProps), {}, {
|
|
5244
|
+
key: key,
|
|
5245
|
+
size: "small"
|
|
5246
|
+
}));
|
|
5247
|
+
})
|
|
5248
|
+
})]
|
|
5249
|
+
})
|
|
5250
|
+
}), /*#__PURE__*/jsxRuntime.jsx(ImageLibrary, {
|
|
5251
|
+
setActiveTab: setActiveTab,
|
|
5252
|
+
setIsUploading: setIsUploading,
|
|
5253
|
+
setSelectedImage: setSelectedImage,
|
|
5254
|
+
tab: activeTab
|
|
5255
|
+
}), ramda.equals(activeTab, TABS[1].key) && /*#__PURE__*/jsxRuntime.jsx(NeetoUIModal__default["default"].Footer, {
|
|
5256
|
+
className: "flex items-center justify-center gap-2",
|
|
5257
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
|
|
5258
|
+
style: "body2",
|
|
5259
|
+
children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
|
|
5260
|
+
i18nKey: "neetoImageUploader.unsplash.poweredByUnsplash",
|
|
5261
|
+
components: {
|
|
5262
|
+
a: /*#__PURE__*/jsxRuntime.jsx("a", {
|
|
5263
|
+
href: UNSPLASH_URL,
|
|
5264
|
+
rel: "noreferrer",
|
|
5265
|
+
target: "_blank"
|
|
5266
|
+
})
|
|
5267
|
+
}
|
|
5268
|
+
})
|
|
5269
|
+
})
|
|
5270
|
+
})]
|
|
5271
|
+
})), /*#__PURE__*/jsxRuntime.jsx("input", _objectSpread$1({}, getInputProps()))]
|
|
5272
|
+
});
|
|
5219
5273
|
};
|
|
5220
5274
|
|
|
5221
5275
|
var _excluded = ["key", "label"];
|
|
5276
|
+
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; }
|
|
5277
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty$3(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; }
|
|
5222
5278
|
var Menu = Dropdown__default["default"].Menu,
|
|
5223
5279
|
MenuItem = Dropdown__default["default"].MenuItem;
|
|
5224
5280
|
var ImageUploader = function ImageUploader(_ref) {
|
|
@@ -5232,11 +5288,11 @@ var ImageUploader = function ImageUploader(_ref) {
|
|
|
5232
5288
|
uploadConfig = _ref$uploadConfig === void 0 ? {} : _ref$uploadConfig,
|
|
5233
5289
|
_ref$fixedAspectRatio = _ref.fixedAspectRatio,
|
|
5234
5290
|
fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio;
|
|
5235
|
-
var _useState =
|
|
5291
|
+
var _useState = require$$0.useState(false),
|
|
5236
5292
|
_useState2 = _slicedToArray$2(_useState, 2),
|
|
5237
5293
|
isAssetLibraryOpen = _useState2[0],
|
|
5238
5294
|
setIsAssetLibraryOpen = _useState2[1];
|
|
5239
|
-
var _useState3 =
|
|
5295
|
+
var _useState3 = require$$0.useState({
|
|
5240
5296
|
url: src
|
|
5241
5297
|
}),
|
|
5242
5298
|
_useState4 = _slicedToArray$2(_useState3, 2),
|
|
@@ -5317,53 +5373,58 @@ var ImageUploader = function ImageUploader(_ref) {
|
|
|
5317
5373
|
onClick: handleDelete,
|
|
5318
5374
|
"data-cy": "image-uploader-remove-button"
|
|
5319
5375
|
}];
|
|
5320
|
-
return /*#__PURE__*/
|
|
5376
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
5321
5377
|
className: classnames__default["default"](className, {
|
|
5322
5378
|
"cursor-pointer": true
|
|
5323
|
-
})
|
|
5324
|
-
|
|
5325
|
-
|
|
5326
|
-
|
|
5327
|
-
|
|
5328
|
-
|
|
5329
|
-
|
|
5330
|
-
|
|
5331
|
-
|
|
5332
|
-
|
|
5333
|
-
|
|
5334
|
-
|
|
5335
|
-
|
|
5336
|
-
|
|
5337
|
-
|
|
5338
|
-
|
|
5339
|
-
|
|
5340
|
-
|
|
5341
|
-
|
|
5342
|
-
|
|
5343
|
-
|
|
5344
|
-
|
|
5345
|
-
|
|
5346
|
-
|
|
5347
|
-
|
|
5348
|
-
|
|
5349
|
-
|
|
5350
|
-
|
|
5351
|
-
|
|
5352
|
-
|
|
5353
|
-
|
|
5354
|
-
|
|
5355
|
-
|
|
5356
|
-
|
|
5357
|
-
|
|
5358
|
-
|
|
5379
|
+
}),
|
|
5380
|
+
children: [isNotNilOrEmpty(image.url) ? /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
5381
|
+
className: IMAGE_WRAPPER_CLASSNAME,
|
|
5382
|
+
"data-cy": "image-uploader-wrapper",
|
|
5383
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(ImageWithFallback, {
|
|
5384
|
+
className: "h-full w-full",
|
|
5385
|
+
"data-cy": "uploaded-image",
|
|
5386
|
+
src: image.url
|
|
5387
|
+
}), /*#__PURE__*/jsxRuntime.jsx(Dropdown__default["default"], {
|
|
5388
|
+
buttonProps: {
|
|
5389
|
+
className: "absolute right-3 top-3"
|
|
5390
|
+
},
|
|
5391
|
+
buttonSize: "small",
|
|
5392
|
+
buttonStyle: "primary",
|
|
5393
|
+
icon: neetoIcons.MenuHorizontal,
|
|
5394
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Menu, {
|
|
5395
|
+
children: options.map(function (_ref2) {
|
|
5396
|
+
var key = _ref2.key,
|
|
5397
|
+
label = _ref2.label,
|
|
5398
|
+
otherProps = _objectWithoutProperties$2(_ref2, _excluded);
|
|
5399
|
+
return /*#__PURE__*/require$$0.createElement(MenuItem.Button, _objectSpread(_objectSpread({}, otherProps), {}, {
|
|
5400
|
+
key: key
|
|
5401
|
+
}), label);
|
|
5402
|
+
})
|
|
5403
|
+
})
|
|
5404
|
+
})]
|
|
5405
|
+
}) : /*#__PURE__*/jsxRuntime.jsx(ImageDirectUpload, {
|
|
5406
|
+
setIsAssetLibraryOpen: setIsAssetLibraryOpen,
|
|
5407
|
+
isDisabled: neetoCist.isPresent(fixedAspectRatio),
|
|
5408
|
+
uploadConfig: uploadConfigWithDefaults,
|
|
5409
|
+
onDrop: uploadFile
|
|
5410
|
+
}), /*#__PURE__*/jsxRuntime.jsx(Modal, {
|
|
5411
|
+
fixedAspectRatio: fixedAspectRatio,
|
|
5412
|
+
isOpen: isAssetLibraryOpen,
|
|
5413
|
+
uploadConfig: uploadConfigWithDefaults,
|
|
5414
|
+
onClose: function onClose() {
|
|
5415
|
+
return setIsAssetLibraryOpen(false);
|
|
5416
|
+
},
|
|
5417
|
+
onUploadComplete: handleImageSelectionFromLibrary
|
|
5418
|
+
})]
|
|
5419
|
+
});
|
|
5359
5420
|
};
|
|
5360
5421
|
|
|
5361
5422
|
var useImageUpload = function useImageUpload() {
|
|
5362
|
-
var _useState =
|
|
5423
|
+
var _useState = require$$0.useState(0),
|
|
5363
5424
|
_useState2 = _slicedToArray$2(_useState, 2),
|
|
5364
5425
|
uploadProgress = _useState2[0],
|
|
5365
5426
|
setUploadProgress = _useState2[1];
|
|
5366
|
-
var _useState3 =
|
|
5427
|
+
var _useState3 = require$$0.useState(false),
|
|
5367
5428
|
_useState4 = _slicedToArray$2(_useState3, 2),
|
|
5368
5429
|
isUploading = _useState4[0],
|
|
5369
5430
|
setIsUploading = _useState4[1];
|
|
@@ -5504,11 +5565,11 @@ var useImageUpload = function useImageUpload() {
|
|
|
5504
5565
|
var useProfileImageUpload = function useProfileImageUpload(_ref) {
|
|
5505
5566
|
var _ref$uploadConfig = _ref.uploadConfig,
|
|
5506
5567
|
uploadConfig = _ref$uploadConfig === void 0 ? {} : _ref$uploadConfig;
|
|
5507
|
-
var _useState =
|
|
5568
|
+
var _useState = require$$0.useState(0),
|
|
5508
5569
|
_useState2 = _slicedToArray$2(_useState, 2),
|
|
5509
5570
|
uploadProgress = _useState2[0],
|
|
5510
5571
|
setUploadProgress = _useState2[1];
|
|
5511
|
-
var _useState3 =
|
|
5572
|
+
var _useState3 = require$$0.useState(false),
|
|
5512
5573
|
_useState4 = _slicedToArray$2(_useState3, 2),
|
|
5513
5574
|
isUploading = _useState4[0],
|
|
5514
5575
|
setIsUploading = _useState4[1];
|