@bigbinary/neeto-image-uploader-frontend 1.5.26 → 1.6.0-beta2
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 +619 -598
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +566 -545
- 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,35 @@ 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
|
-
page = _ref.page,
|
|
3912
3928
|
per = _ref.per;
|
|
3913
3929
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
3914
|
-
return reactQuery.
|
|
3915
|
-
|
|
3916
|
-
|
|
3917
|
-
|
|
3918
|
-
|
|
3919
|
-
|
|
3920
|
-
|
|
3921
|
-
|
|
3930
|
+
return reactQuery.useInfiniteQuery(_objectSpread$3({
|
|
3931
|
+
queryKey: [QUERY_KEYS.ASSETS_LIST, searchTerm],
|
|
3932
|
+
queryFn: function queryFn(_ref2) {
|
|
3933
|
+
var _ref2$pageParam = _ref2.pageParam,
|
|
3934
|
+
pageParam = _ref2$pageParam === void 0 ? 1 : _ref2$pageParam;
|
|
3935
|
+
return imagesApi.fetch({
|
|
3936
|
+
searchTerm: searchTerm,
|
|
3937
|
+
url: url,
|
|
3938
|
+
page: pageParam,
|
|
3939
|
+
per: per
|
|
3940
|
+
});
|
|
3941
|
+
},
|
|
3942
|
+
getNextPageParam: function getNextPageParam(lastPage, _, lastPageParam) {
|
|
3943
|
+
return lastPage.length === IMAGES_PER_PAGE ? lastPageParam + 1 : null;
|
|
3944
|
+
},
|
|
3945
|
+
select: function select(data) {
|
|
3946
|
+
var results = data.pages.flatMap(ramda.identity);
|
|
3947
|
+
return {
|
|
3948
|
+
results: results
|
|
3949
|
+
};
|
|
3950
|
+
},
|
|
3951
|
+
initialPageParam: 1,
|
|
3922
3952
|
staleTime: ASSETS_STALE_TIME
|
|
3923
3953
|
}, options));
|
|
3924
3954
|
};
|
|
@@ -4219,7 +4249,7 @@ InfiniteScroll.exports;
|
|
|
4219
4249
|
|
|
4220
4250
|
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
4251
|
|
|
4222
|
-
var _react =
|
|
4252
|
+
var _react = require$$0__default["default"];
|
|
4223
4253
|
|
|
4224
4254
|
var _react2 = _interopRequireDefault(_react);
|
|
4225
4255
|
|
|
@@ -4524,7 +4554,7 @@ var _createClass = function () { function defineProperties(target, props) { for
|
|
|
4524
4554
|
|
|
4525
4555
|
var _class, _temp2;
|
|
4526
4556
|
|
|
4527
|
-
var _react =
|
|
4557
|
+
var _react = require$$0__default["default"];
|
|
4528
4558
|
|
|
4529
4559
|
var _react2 = _interopRequireDefault(_react);
|
|
4530
4560
|
|
|
@@ -4694,123 +4724,100 @@ var InfiniteScroller = function InfiniteScroller(_ref) {
|
|
|
4694
4724
|
handleUnsplashImageSelect = _ref$handleUnsplashIm === void 0 ? neetoCist.noop : _ref$handleUnsplashIm;
|
|
4695
4725
|
var _useTranslation = reactI18next.useTranslation(),
|
|
4696
4726
|
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
|
-
|
|
4727
|
+
var Loader = /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
4728
|
+
className: "flex justify-center",
|
|
4729
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
|
|
4730
|
+
});
|
|
4731
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
4732
|
+
className: "niu-unsplash-container mr-2 max-w-full overflow-x-hidden overflow-y-scroll",
|
|
4733
|
+
children: /*#__PURE__*/jsxRuntime.jsx(_default, {
|
|
4734
|
+
hasMore: hasMore,
|
|
4735
|
+
loadMore: loadMore,
|
|
4736
|
+
pack: true,
|
|
4737
|
+
position: true,
|
|
4738
|
+
className: "w-full",
|
|
4739
|
+
loader: Loader,
|
|
4740
|
+
sizes: INFINITE_SCROLLER_SIZES,
|
|
4741
|
+
style: INFINITE_SCROLLER_STYLE,
|
|
4742
|
+
useWindow: false,
|
|
4743
|
+
children: images.map(function (image, index) {
|
|
4744
|
+
var _image$urls, _image$user, _image$user2;
|
|
4745
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
4746
|
+
className: "float-left w-1/2 pb-4 pr-4 md:w-1/4",
|
|
4747
|
+
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
4748
|
+
className: "relative w-full",
|
|
4749
|
+
style: {
|
|
4750
|
+
paddingBottom: "".concat(image.height / image.width * 100, "%")
|
|
4751
|
+
},
|
|
4752
|
+
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
4753
|
+
className: "neeto-ui-rounded-sm neeto-ui-bg-gray-100 group absolute h-full w-full",
|
|
4754
|
+
id: "unsplashImage".concat(image.id),
|
|
4755
|
+
children: [tab === TABS[1].key && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
4756
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("img", {
|
|
4757
|
+
"data-cy": "niu-unsplash-image-".concat(index),
|
|
4758
|
+
src: image === null || image === void 0 || (_image$urls = image.urls) === null || _image$urls === void 0 ? void 0 : _image$urls.regular,
|
|
4759
|
+
onClick: function onClick() {
|
|
4760
|
+
return handleUnsplashImageSelect(image);
|
|
4761
|
+
}
|
|
4762
|
+
}), /*#__PURE__*/jsxRuntime.jsxs("a", {
|
|
4763
|
+
className: "neeto-ui-text-gray-100 absolute bottom-2 left-2 m-auto text-xs underline opacity-0 group-hover:opacity-100",
|
|
4764
|
+
href: "https://unsplash.com/@".concat(image === null || image === void 0 || (_image$user = image.user) === null || _image$user === void 0 ? void 0 : _image$user.username),
|
|
4765
|
+
rel: "noreferrer",
|
|
4766
|
+
target: "_blank",
|
|
4767
|
+
children: [image === null || image === void 0 || (_image$user2 = image.user) === null || _image$user2 === void 0 ? void 0 : _image$user2.name, " | ", " ", t("neetoImageUploader.labels.unsplash")]
|
|
4768
|
+
})]
|
|
4769
|
+
}), tab === TABS[0].key && /*#__PURE__*/jsxRuntime.jsx("img", {
|
|
4770
|
+
"data-cy": "niu-library-image-".concat(index),
|
|
4771
|
+
src: image === null || image === void 0 ? void 0 : image.url,
|
|
4772
|
+
onClick: function onClick() {
|
|
4773
|
+
return setSelectedImage(image);
|
|
4774
|
+
}
|
|
4775
|
+
})]
|
|
4776
|
+
})
|
|
4777
|
+
})
|
|
4778
|
+
}, image.id);
|
|
4779
|
+
})
|
|
4780
|
+
})
|
|
4781
|
+
});
|
|
4744
4782
|
};
|
|
4745
4783
|
|
|
4746
4784
|
var Images = function Images(_ref) {
|
|
4747
|
-
var
|
|
4748
|
-
debouncedQuery = _ref.debouncedQuery,
|
|
4785
|
+
var debouncedQuery = _ref.debouncedQuery,
|
|
4749
4786
|
setSelectedImage = _ref.setSelectedImage;
|
|
4750
|
-
var _useState = React.useState(true),
|
|
4751
|
-
_useState2 = _slicedToArray$2(_useState, 2),
|
|
4752
|
-
hasMore = _useState2[0],
|
|
4753
|
-
setHasMore = _useState2[1];
|
|
4754
|
-
var _useState3 = React.useState([]),
|
|
4755
|
-
_useState4 = _slicedToArray$2(_useState3, 2),
|
|
4756
|
-
images = _useState4[0],
|
|
4757
|
-
setImages = _useState4[1];
|
|
4758
|
-
var _useState5 = React.useState(1),
|
|
4759
|
-
_useState6 = _slicedToArray$2(_useState5, 2),
|
|
4760
|
-
pageNo = _useState6[0],
|
|
4761
|
-
setPageNo = _useState6[1];
|
|
4762
|
-
var _useState7 = React.useState(false),
|
|
4763
|
-
_useState8 = _slicedToArray$2(_useState7, 2),
|
|
4764
|
-
error = _useState8[0],
|
|
4765
|
-
setError = _useState8[1];
|
|
4766
|
-
var onSuccess = function onSuccess() {
|
|
4767
|
-
var results = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
4768
|
-
ramda.equals(pageNo, 1) ? setImages(results) : setImages(ramda.concat(ramda.__, results));
|
|
4769
|
-
setPageNo(ramda.inc);
|
|
4770
|
-
setHasMore(results.length === IMAGES_PER_PAGE);
|
|
4771
|
-
};
|
|
4772
|
-
var onError = function onError() {
|
|
4773
|
-
return setError(true);
|
|
4774
|
-
};
|
|
4775
4787
|
var _useTranslation = reactI18next.useTranslation(),
|
|
4776
4788
|
t = _useTranslation.t;
|
|
4777
4789
|
var _useFetchAssets = useFetchAssets({
|
|
4778
4790
|
searchTerm: debouncedQuery,
|
|
4779
|
-
page: pageNo,
|
|
4780
4791
|
per: IMAGES_PER_PAGE,
|
|
4781
4792
|
url: ASSETS_FETCH_URL
|
|
4782
|
-
}, {
|
|
4783
|
-
onSuccess: onSuccess,
|
|
4784
|
-
onError: onError
|
|
4785
4793
|
}),
|
|
4786
|
-
|
|
4787
|
-
|
|
4788
|
-
|
|
4789
|
-
|
|
4790
|
-
|
|
4791
|
-
|
|
4792
|
-
|
|
4793
|
-
|
|
4794
|
-
|
|
4795
|
-
|
|
4796
|
-
React.useEffect(function () {
|
|
4797
|
-
setPageNo(1);
|
|
4798
|
-
}, [query]);
|
|
4799
|
-
React.useEffect(function () {
|
|
4800
|
-
setImages([]);
|
|
4801
|
-
refetch();
|
|
4802
|
-
}, [debouncedQuery]);
|
|
4803
|
-
if (error) {
|
|
4804
|
-
return /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
|
|
4794
|
+
fetchNextPage = _useFetchAssets.fetchNextPage,
|
|
4795
|
+
hasNextPage = _useFetchAssets.hasNextPage,
|
|
4796
|
+
_useFetchAssets$data = _useFetchAssets.data,
|
|
4797
|
+
_useFetchAssets$data2 = _useFetchAssets$data === void 0 ? {} : _useFetchAssets$data,
|
|
4798
|
+
_useFetchAssets$data3 = _useFetchAssets$data2.results,
|
|
4799
|
+
results = _useFetchAssets$data3 === void 0 ? [] : _useFetchAssets$data3,
|
|
4800
|
+
isLoading = _useFetchAssets.isLoading,
|
|
4801
|
+
isError = _useFetchAssets.isError;
|
|
4802
|
+
if (isError) {
|
|
4803
|
+
return /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
|
|
4805
4804
|
className: "mt-9 flex justify-center",
|
|
4806
|
-
style: "body2"
|
|
4807
|
-
|
|
4805
|
+
style: "body2",
|
|
4806
|
+
children: t("neetoImageUploader.unsplash.errorMessage")
|
|
4807
|
+
});
|
|
4808
4808
|
}
|
|
4809
|
-
|
|
4810
|
-
|
|
4811
|
-
|
|
4812
|
-
|
|
4809
|
+
if (isLoading) {
|
|
4810
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
4811
|
+
className: "flex justify-around",
|
|
4812
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
|
|
4813
|
+
});
|
|
4814
|
+
}
|
|
4815
|
+
return /*#__PURE__*/require$$0.createElement(InfiniteScroller, {
|
|
4813
4816
|
setSelectedImage: setSelectedImage,
|
|
4817
|
+
hasMore: hasNextPage,
|
|
4818
|
+
images: results,
|
|
4819
|
+
key: debouncedQuery,
|
|
4820
|
+
loadMore: fetchNextPage,
|
|
4814
4821
|
tab: TABS[0].key
|
|
4815
4822
|
});
|
|
4816
4823
|
};
|
|
@@ -4836,18 +4843,36 @@ var unsplashApi = {
|
|
|
4836
4843
|
getUnsplashImage: getUnsplashImage
|
|
4837
4844
|
};
|
|
4838
4845
|
|
|
4846
|
+
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; }
|
|
4847
|
+
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
4848
|
var UNSPLASH_LIST = QUERY_KEYS.UNSPLASH_LIST;
|
|
4840
4849
|
var useFetchUnsplashImages = function useFetchUnsplashImages(_ref) {
|
|
4841
|
-
var
|
|
4842
|
-
query = _ref.query;
|
|
4850
|
+
var query = _ref.query;
|
|
4843
4851
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
4844
|
-
return reactQuery.
|
|
4845
|
-
|
|
4846
|
-
pageNo: pageNo,
|
|
4852
|
+
return reactQuery.useInfiniteQuery(_objectSpread$2({
|
|
4853
|
+
queryKey: [UNSPLASH_LIST, {
|
|
4847
4854
|
query: query
|
|
4848
|
-
}
|
|
4849
|
-
|
|
4850
|
-
|
|
4855
|
+
}],
|
|
4856
|
+
queryFn: function queryFn(_ref2) {
|
|
4857
|
+
var _ref2$pageParam = _ref2.pageParam,
|
|
4858
|
+
pageParam = _ref2$pageParam === void 0 ? 1 : _ref2$pageParam;
|
|
4859
|
+
return unsplashApi.searchUnsplashImages({
|
|
4860
|
+
pageNo: pageParam,
|
|
4861
|
+
query: query
|
|
4862
|
+
});
|
|
4863
|
+
},
|
|
4864
|
+
initialPageParam: 1,
|
|
4865
|
+
getNextPageParam: function getNextPageParam(lastPage, _, lastPageParam) {
|
|
4866
|
+
return lastPageParam < lastPage.totalPages ? lastPageParam + 1 : null;
|
|
4867
|
+
},
|
|
4868
|
+
select: function select(data) {
|
|
4869
|
+
var results = data.pages.flatMap(ramda.prop("results"));
|
|
4870
|
+
return {
|
|
4871
|
+
results: results
|
|
4872
|
+
};
|
|
4873
|
+
},
|
|
4874
|
+
staleTime: UNSPLASH_STALE_TIME,
|
|
4875
|
+
placeholderData: reactQuery.keepPreviousData
|
|
4851
4876
|
}, options));
|
|
4852
4877
|
};
|
|
4853
4878
|
|
|
@@ -4894,37 +4919,12 @@ var uploadWithImageKit = function uploadWithImageKit(file) {
|
|
|
4894
4919
|
};
|
|
4895
4920
|
|
|
4896
4921
|
var UnsplashLibrary = function UnsplashLibrary(_ref) {
|
|
4897
|
-
var
|
|
4898
|
-
debouncedQuery = _ref.debouncedQuery,
|
|
4922
|
+
var debouncedQuery = _ref.debouncedQuery,
|
|
4899
4923
|
setSelectedImage = _ref.setSelectedImage,
|
|
4900
4924
|
setIsUploading = _ref.setIsUploading,
|
|
4901
4925
|
setActiveTab = _ref.setActiveTab;
|
|
4902
|
-
var _useState = React.useState(true),
|
|
4903
|
-
_useState2 = _slicedToArray$2(_useState, 2),
|
|
4904
|
-
hasMore = _useState2[0],
|
|
4905
|
-
setHasMore = _useState2[1];
|
|
4906
|
-
var _useState3 = React.useState([]),
|
|
4907
|
-
_useState4 = _slicedToArray$2(_useState3, 2),
|
|
4908
|
-
images = _useState4[0],
|
|
4909
|
-
setImages = _useState4[1];
|
|
4910
|
-
var _useState5 = React.useState(1),
|
|
4911
|
-
_useState6 = _slicedToArray$2(_useState5, 2),
|
|
4912
|
-
pageNo = _useState6[0],
|
|
4913
|
-
setPageNo = _useState6[1];
|
|
4914
|
-
var _useState7 = React.useState(false),
|
|
4915
|
-
_useState8 = _slicedToArray$2(_useState7, 2),
|
|
4916
|
-
error = _useState8[0],
|
|
4917
|
-
setError = _useState8[1];
|
|
4918
|
-
var onSuccess = function onSuccess(_ref2) {
|
|
4919
|
-
var _ref2$results = _ref2.results,
|
|
4920
|
-
results = _ref2$results === void 0 ? [] : _ref2$results,
|
|
4921
|
-
totalPages = _ref2.totalPages;
|
|
4922
|
-
ramda.equals(pageNo, 1) ? setImages(results) : setImages(ramda.concat(ramda.__, results));
|
|
4923
|
-
setPageNo(ramda.inc);
|
|
4924
|
-
setHasMore(pageNo < totalPages);
|
|
4925
|
-
};
|
|
4926
4926
|
var handleUnsplashImageSelect = /*#__PURE__*/function () {
|
|
4927
|
-
var
|
|
4927
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(image) {
|
|
4928
4928
|
var _image$urls, response, file, result;
|
|
4929
4929
|
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
4930
4930
|
while (1) switch (_context.prev = _context.next) {
|
|
@@ -4974,49 +4974,42 @@ var UnsplashLibrary = function UnsplashLibrary(_ref) {
|
|
|
4974
4974
|
}, _callee, null, [[0, 19, 23, 26]]);
|
|
4975
4975
|
}));
|
|
4976
4976
|
return function handleUnsplashImageSelect(_x) {
|
|
4977
|
-
return
|
|
4977
|
+
return _ref2.apply(this, arguments);
|
|
4978
4978
|
};
|
|
4979
4979
|
}();
|
|
4980
|
-
var onError = function onError() {
|
|
4981
|
-
return setError(true);
|
|
4982
|
-
};
|
|
4983
4980
|
var _useTranslation = reactI18next.useTranslation(),
|
|
4984
4981
|
t = _useTranslation.t;
|
|
4985
4982
|
var _useFetchUnsplashImag = useFetchUnsplashImages({
|
|
4986
|
-
query: debouncedQuery
|
|
4987
|
-
pageNo: pageNo
|
|
4988
|
-
}, {
|
|
4989
|
-
onSuccess: onSuccess,
|
|
4990
|
-
onError: onError
|
|
4983
|
+
query: debouncedQuery
|
|
4991
4984
|
}),
|
|
4992
|
-
|
|
4993
|
-
|
|
4994
|
-
|
|
4995
|
-
|
|
4996
|
-
|
|
4997
|
-
|
|
4998
|
-
|
|
4999
|
-
|
|
5000
|
-
|
|
5001
|
-
|
|
5002
|
-
setPageNo(1);
|
|
5003
|
-
}, [query]);
|
|
5004
|
-
React.useEffect(function () {
|
|
5005
|
-
setPageNo(1);
|
|
5006
|
-
setImages([]);
|
|
5007
|
-
refetch();
|
|
5008
|
-
}, [debouncedQuery]);
|
|
5009
|
-
if (error) {
|
|
5010
|
-
return /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
|
|
4985
|
+
fetchNextPage = _useFetchUnsplashImag.fetchNextPage,
|
|
4986
|
+
hasNextPage = _useFetchUnsplashImag.hasNextPage,
|
|
4987
|
+
_useFetchUnsplashImag2 = _useFetchUnsplashImag.data,
|
|
4988
|
+
_useFetchUnsplashImag3 = _useFetchUnsplashImag2 === void 0 ? {} : _useFetchUnsplashImag2,
|
|
4989
|
+
_useFetchUnsplashImag4 = _useFetchUnsplashImag3.results,
|
|
4990
|
+
results = _useFetchUnsplashImag4 === void 0 ? [] : _useFetchUnsplashImag4,
|
|
4991
|
+
isError = _useFetchUnsplashImag.isError,
|
|
4992
|
+
isLoading = _useFetchUnsplashImag.isLoading;
|
|
4993
|
+
if (isError) {
|
|
4994
|
+
return /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
|
|
5011
4995
|
className: "mt-9 flex justify-center",
|
|
5012
|
-
style: "body2"
|
|
5013
|
-
|
|
4996
|
+
style: "body2",
|
|
4997
|
+
children: t("neetoImageUploader.unsplash.errorMessage")
|
|
4998
|
+
});
|
|
4999
|
+
}
|
|
5000
|
+
if (isLoading) {
|
|
5001
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
5002
|
+
className: "flex justify-around",
|
|
5003
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
|
|
5004
|
+
});
|
|
5014
5005
|
}
|
|
5015
|
-
return /*#__PURE__*/
|
|
5006
|
+
return /*#__PURE__*/require$$0.createElement(InfiniteScroller, {
|
|
5007
|
+
debouncedQuery: debouncedQuery,
|
|
5016
5008
|
handleUnsplashImageSelect: handleUnsplashImageSelect,
|
|
5017
|
-
hasMore:
|
|
5018
|
-
images:
|
|
5019
|
-
|
|
5009
|
+
hasMore: hasNextPage,
|
|
5010
|
+
images: results,
|
|
5011
|
+
key: debouncedQuery,
|
|
5012
|
+
loadMore: fetchNextPage,
|
|
5020
5013
|
tab: TABS[1].key
|
|
5021
5014
|
});
|
|
5022
5015
|
};
|
|
@@ -5026,7 +5019,7 @@ var ImageLibrary = function ImageLibrary(_ref) {
|
|
|
5026
5019
|
tab = _ref.tab,
|
|
5027
5020
|
setIsUploading = _ref.setIsUploading,
|
|
5028
5021
|
setActiveTab = _ref.setActiveTab;
|
|
5029
|
-
var _useState =
|
|
5022
|
+
var _useState = require$$0.useState(""),
|
|
5030
5023
|
_useState2 = _slicedToArray$2(_useState, 2),
|
|
5031
5024
|
query = _useState2[0],
|
|
5032
5025
|
setQuery = _useState2[1];
|
|
@@ -5034,36 +5027,39 @@ var ImageLibrary = function ImageLibrary(_ref) {
|
|
|
5034
5027
|
t = _useTranslation.t;
|
|
5035
5028
|
var debouncedQuery = reactUtils.useDebounce(query, 400);
|
|
5036
5029
|
var inputPlaceHolder = ramda.equals(tab, TABS[1].key) ? t("neetoImageUploader.placeholders.searchImageFromWeb") : t("neetoImageUploader.placeholders.searchImage");
|
|
5037
|
-
|
|
5030
|
+
require$$0.useEffect(function () {
|
|
5038
5031
|
setQuery("");
|
|
5039
5032
|
}, [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
|
-
|
|
5033
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
5034
|
+
className: "w-full pb-2 pl-6 pt-1",
|
|
5035
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
|
|
5036
|
+
autoFocus: true,
|
|
5037
|
+
className: "mb-4 mr-6",
|
|
5038
|
+
"data-cy": "niu-unsplash-image-picker-search-input",
|
|
5039
|
+
name: "text",
|
|
5040
|
+
placeholder: inputPlaceHolder,
|
|
5041
|
+
value: query,
|
|
5042
|
+
onChange: function onChange(_ref2) {
|
|
5043
|
+
var value = _ref2.target.value;
|
|
5044
|
+
return setQuery(value);
|
|
5045
|
+
}
|
|
5046
|
+
}), tab === TABS[0].key ? /*#__PURE__*/jsxRuntime.jsx(Images, {
|
|
5047
|
+
debouncedQuery: debouncedQuery,
|
|
5048
|
+
query: query,
|
|
5049
|
+
setSelectedImage: setSelectedImage
|
|
5050
|
+
}) : /*#__PURE__*/jsxRuntime.jsx(UnsplashLibrary, {
|
|
5051
|
+
debouncedQuery: debouncedQuery,
|
|
5052
|
+
query: query,
|
|
5053
|
+
setActiveTab: setActiveTab,
|
|
5054
|
+
setIsUploading: setIsUploading,
|
|
5055
|
+
setSelectedImage: setSelectedImage
|
|
5056
|
+
})]
|
|
5057
|
+
});
|
|
5064
5058
|
};
|
|
5065
5059
|
|
|
5066
5060
|
var _excluded$1 = ["key"];
|
|
5061
|
+
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; }
|
|
5062
|
+
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
5063
|
var Modal = function Modal(_ref) {
|
|
5068
5064
|
var isOpen = _ref.isOpen,
|
|
5069
5065
|
_ref$onClose = _ref.onClose,
|
|
@@ -5074,15 +5070,15 @@ var Modal = function Modal(_ref) {
|
|
|
5074
5070
|
uploadConfig = _ref$uploadConfig === void 0 ? {} : _ref$uploadConfig,
|
|
5075
5071
|
_ref$fixedAspectRatio = _ref.fixedAspectRatio,
|
|
5076
5072
|
fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio;
|
|
5077
|
-
var _useState =
|
|
5073
|
+
var _useState = require$$0.useState(TABS[0].key),
|
|
5078
5074
|
_useState2 = _slicedToArray$2(_useState, 2),
|
|
5079
5075
|
activeTab = _useState2[0],
|
|
5080
5076
|
setActiveTab = _useState2[1];
|
|
5081
|
-
var _useState3 =
|
|
5077
|
+
var _useState3 = require$$0.useState({}),
|
|
5082
5078
|
_useState4 = _slicedToArray$2(_useState3, 2),
|
|
5083
5079
|
selectedImage = _useState4[0],
|
|
5084
5080
|
setSelectedImage = _useState4[1];
|
|
5085
|
-
var _useState5 =
|
|
5081
|
+
var _useState5 = require$$0.useState(false),
|
|
5086
5082
|
_useState6 = _slicedToArray$2(_useState5, 2),
|
|
5087
5083
|
isUploading = _useState6[0],
|
|
5088
5084
|
setIsUploading = _useState6[1];
|
|
@@ -5143,82 +5139,102 @@ var Modal = function Modal(_ref) {
|
|
|
5143
5139
|
key: "local",
|
|
5144
5140
|
onClick: openFileUploadDialog
|
|
5145
5141
|
}]);
|
|
5146
|
-
|
|
5142
|
+
require$$0.useEffect(function () {
|
|
5147
5143
|
setActiveTab(TABS[0].key);
|
|
5148
5144
|
}, [isOpen]);
|
|
5149
|
-
return /*#__PURE__*/
|
|
5145
|
+
return /*#__PURE__*/jsxRuntime.jsxs(NeetoUIModal__default["default"], {
|
|
5150
5146
|
isOpen: isOpen,
|
|
5151
5147
|
className: "niu-modal",
|
|
5152
5148
|
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"
|
|
5149
|
+
onClose: handleCloseModal,
|
|
5150
|
+
children: [isUploading && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
5151
|
+
className: "neeto-ui-bg-gray-400 absolute inset-0 z-50 flex h-full items-center justify-center opacity-50",
|
|
5152
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Spinner__default["default"], {})
|
|
5153
|
+
}), isNilOrEmpty(selectedImage) && isDragActive && /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$1(_objectSpread$1({
|
|
5154
|
+
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"
|
|
5155
|
+
}, getRootProps()), {}, {
|
|
5156
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
|
|
5157
|
+
children: t("neetoImageUploader.common.dropHere")
|
|
5216
5158
|
})
|
|
5217
|
-
}
|
|
5218
|
-
|
|
5159
|
+
})), !isNilOrEmpty(selectedImage) ? /*#__PURE__*/jsxRuntime.jsx(ImageEditor, {
|
|
5160
|
+
fixedAspectRatio: fixedAspectRatio,
|
|
5161
|
+
handleImageEditComplete: handleImageEditComplete,
|
|
5162
|
+
handleReset: function handleReset() {
|
|
5163
|
+
return setSelectedImage({});
|
|
5164
|
+
},
|
|
5165
|
+
image: selectedImage,
|
|
5166
|
+
signedId: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.signedId
|
|
5167
|
+
}) : /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$1(_objectSpread$1({
|
|
5168
|
+
className: "h-full flex-col"
|
|
5169
|
+
}, getRootProps({
|
|
5170
|
+
onClick: function onClick(event) {
|
|
5171
|
+
return event.stopPropagation();
|
|
5172
|
+
}
|
|
5173
|
+
})), {}, {
|
|
5174
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(NeetoUIModal__default["default"].Header, {
|
|
5175
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
|
|
5176
|
+
style: "h2",
|
|
5177
|
+
children: t("neetoImageUploader.common.imageLibrary")
|
|
5178
|
+
})
|
|
5179
|
+
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
5180
|
+
className: "px-6 py-2",
|
|
5181
|
+
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
5182
|
+
className: "flex flex-col items-center justify-between gap-2 sm:flex-row",
|
|
5183
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
5184
|
+
className: "flex gap-2",
|
|
5185
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Tab__default["default"], {
|
|
5186
|
+
size: "small",
|
|
5187
|
+
children: TABS.map(function (tab) {
|
|
5188
|
+
return /*#__PURE__*/jsxRuntime.jsx(Tab__default["default"].Item, {
|
|
5189
|
+
active: activeTab === tab.key,
|
|
5190
|
+
"data-cy": tab.dataCy,
|
|
5191
|
+
onClick: function onClick() {
|
|
5192
|
+
return setActiveTab(tab.key);
|
|
5193
|
+
},
|
|
5194
|
+
children: tab.label
|
|
5195
|
+
}, tab.key);
|
|
5196
|
+
})
|
|
5197
|
+
})
|
|
5198
|
+
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
5199
|
+
className: "flex gap-2",
|
|
5200
|
+
children: options.map(function (_ref2) {
|
|
5201
|
+
var key = _ref2.key,
|
|
5202
|
+
otherProps = _objectWithoutProperties$2(_ref2, _excluded$1);
|
|
5203
|
+
return /*#__PURE__*/require$$0.createElement(Button__default["default"], _objectSpread$1(_objectSpread$1({}, otherProps), {}, {
|
|
5204
|
+
key: key,
|
|
5205
|
+
size: "small"
|
|
5206
|
+
}));
|
|
5207
|
+
})
|
|
5208
|
+
})]
|
|
5209
|
+
})
|
|
5210
|
+
}), /*#__PURE__*/jsxRuntime.jsx(ImageLibrary, {
|
|
5211
|
+
setActiveTab: setActiveTab,
|
|
5212
|
+
setIsUploading: setIsUploading,
|
|
5213
|
+
setSelectedImage: setSelectedImage,
|
|
5214
|
+
tab: activeTab
|
|
5215
|
+
}), ramda.equals(activeTab, TABS[1].key) && /*#__PURE__*/jsxRuntime.jsx(NeetoUIModal__default["default"].Footer, {
|
|
5216
|
+
className: "flex items-center justify-center gap-2",
|
|
5217
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
|
|
5218
|
+
style: "body2",
|
|
5219
|
+
children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
|
|
5220
|
+
i18nKey: "neetoImageUploader.unsplash.poweredByUnsplash",
|
|
5221
|
+
components: {
|
|
5222
|
+
a: /*#__PURE__*/jsxRuntime.jsx("a", {
|
|
5223
|
+
href: UNSPLASH_URL,
|
|
5224
|
+
rel: "noreferrer",
|
|
5225
|
+
target: "_blank"
|
|
5226
|
+
})
|
|
5227
|
+
}
|
|
5228
|
+
})
|
|
5229
|
+
})
|
|
5230
|
+
})]
|
|
5231
|
+
})), /*#__PURE__*/jsxRuntime.jsx("input", _objectSpread$1({}, getInputProps()))]
|
|
5232
|
+
});
|
|
5219
5233
|
};
|
|
5220
5234
|
|
|
5221
5235
|
var _excluded = ["key", "label"];
|
|
5236
|
+
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; }
|
|
5237
|
+
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
5238
|
var Menu = Dropdown__default["default"].Menu,
|
|
5223
5239
|
MenuItem = Dropdown__default["default"].MenuItem;
|
|
5224
5240
|
var ImageUploader = function ImageUploader(_ref) {
|
|
@@ -5232,11 +5248,11 @@ var ImageUploader = function ImageUploader(_ref) {
|
|
|
5232
5248
|
uploadConfig = _ref$uploadConfig === void 0 ? {} : _ref$uploadConfig,
|
|
5233
5249
|
_ref$fixedAspectRatio = _ref.fixedAspectRatio,
|
|
5234
5250
|
fixedAspectRatio = _ref$fixedAspectRatio === void 0 ? {} : _ref$fixedAspectRatio;
|
|
5235
|
-
var _useState =
|
|
5251
|
+
var _useState = require$$0.useState(false),
|
|
5236
5252
|
_useState2 = _slicedToArray$2(_useState, 2),
|
|
5237
5253
|
isAssetLibraryOpen = _useState2[0],
|
|
5238
5254
|
setIsAssetLibraryOpen = _useState2[1];
|
|
5239
|
-
var _useState3 =
|
|
5255
|
+
var _useState3 = require$$0.useState({
|
|
5240
5256
|
url: src
|
|
5241
5257
|
}),
|
|
5242
5258
|
_useState4 = _slicedToArray$2(_useState3, 2),
|
|
@@ -5317,53 +5333,58 @@ var ImageUploader = function ImageUploader(_ref) {
|
|
|
5317
5333
|
onClick: handleDelete,
|
|
5318
5334
|
"data-cy": "image-uploader-remove-button"
|
|
5319
5335
|
}];
|
|
5320
|
-
return /*#__PURE__*/
|
|
5336
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
5321
5337
|
className: classnames__default["default"](className, {
|
|
5322
5338
|
"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
|
-
|
|
5339
|
+
}),
|
|
5340
|
+
children: [isNotNilOrEmpty(image.url) ? /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
5341
|
+
className: IMAGE_WRAPPER_CLASSNAME,
|
|
5342
|
+
"data-cy": "image-uploader-wrapper",
|
|
5343
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(ImageWithFallback, {
|
|
5344
|
+
className: "h-full w-full",
|
|
5345
|
+
"data-cy": "uploaded-image",
|
|
5346
|
+
src: image.url
|
|
5347
|
+
}), /*#__PURE__*/jsxRuntime.jsx(Dropdown__default["default"], {
|
|
5348
|
+
buttonProps: {
|
|
5349
|
+
className: "absolute right-3 top-3"
|
|
5350
|
+
},
|
|
5351
|
+
buttonSize: "small",
|
|
5352
|
+
buttonStyle: "primary",
|
|
5353
|
+
icon: neetoIcons.MenuHorizontal,
|
|
5354
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Menu, {
|
|
5355
|
+
children: options.map(function (_ref2) {
|
|
5356
|
+
var key = _ref2.key,
|
|
5357
|
+
label = _ref2.label,
|
|
5358
|
+
otherProps = _objectWithoutProperties$2(_ref2, _excluded);
|
|
5359
|
+
return /*#__PURE__*/require$$0.createElement(MenuItem.Button, _objectSpread(_objectSpread({}, otherProps), {}, {
|
|
5360
|
+
key: key
|
|
5361
|
+
}), label);
|
|
5362
|
+
})
|
|
5363
|
+
})
|
|
5364
|
+
})]
|
|
5365
|
+
}) : /*#__PURE__*/jsxRuntime.jsx(ImageDirectUpload, {
|
|
5366
|
+
setIsAssetLibraryOpen: setIsAssetLibraryOpen,
|
|
5367
|
+
isDisabled: neetoCist.isPresent(fixedAspectRatio),
|
|
5368
|
+
uploadConfig: uploadConfigWithDefaults,
|
|
5369
|
+
onDrop: uploadFile
|
|
5370
|
+
}), /*#__PURE__*/jsxRuntime.jsx(Modal, {
|
|
5371
|
+
fixedAspectRatio: fixedAspectRatio,
|
|
5372
|
+
isOpen: isAssetLibraryOpen,
|
|
5373
|
+
uploadConfig: uploadConfigWithDefaults,
|
|
5374
|
+
onClose: function onClose() {
|
|
5375
|
+
return setIsAssetLibraryOpen(false);
|
|
5376
|
+
},
|
|
5377
|
+
onUploadComplete: handleImageSelectionFromLibrary
|
|
5378
|
+
})]
|
|
5379
|
+
});
|
|
5359
5380
|
};
|
|
5360
5381
|
|
|
5361
5382
|
var useImageUpload = function useImageUpload() {
|
|
5362
|
-
var _useState =
|
|
5383
|
+
var _useState = require$$0.useState(0),
|
|
5363
5384
|
_useState2 = _slicedToArray$2(_useState, 2),
|
|
5364
5385
|
uploadProgress = _useState2[0],
|
|
5365
5386
|
setUploadProgress = _useState2[1];
|
|
5366
|
-
var _useState3 =
|
|
5387
|
+
var _useState3 = require$$0.useState(false),
|
|
5367
5388
|
_useState4 = _slicedToArray$2(_useState3, 2),
|
|
5368
5389
|
isUploading = _useState4[0],
|
|
5369
5390
|
setIsUploading = _useState4[1];
|
|
@@ -5504,11 +5525,11 @@ var useImageUpload = function useImageUpload() {
|
|
|
5504
5525
|
var useProfileImageUpload = function useProfileImageUpload(_ref) {
|
|
5505
5526
|
var _ref$uploadConfig = _ref.uploadConfig,
|
|
5506
5527
|
uploadConfig = _ref$uploadConfig === void 0 ? {} : _ref$uploadConfig;
|
|
5507
|
-
var _useState =
|
|
5528
|
+
var _useState = require$$0.useState(0),
|
|
5508
5529
|
_useState2 = _slicedToArray$2(_useState, 2),
|
|
5509
5530
|
uploadProgress = _useState2[0],
|
|
5510
5531
|
setUploadProgress = _useState2[1];
|
|
5511
|
-
var _useState3 =
|
|
5532
|
+
var _useState3 = require$$0.useState(false),
|
|
5512
5533
|
_useState4 = _slicedToArray$2(_useState3, 2),
|
|
5513
5534
|
isUploading = _useState4[0],
|
|
5514
5535
|
setIsUploading = _useState4[1];
|