@dreamcommerce/aurora 2.19.0-1 → 2.19.0-3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js +21 -12
  2. package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
  3. package/build/cjs/packages/aurora/src/components/image_picker/index.js +39 -21
  4. package/build/cjs/packages/aurora/src/components/image_picker/index.js.map +1 -1
  5. package/build/cjs/packages/aurora/src/components/loader/index.js +1 -1
  6. package/build/cjs/packages/aurora/src/components/with_loader/index.js +1 -1
  7. package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js +62 -39
  8. package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js.map +1 -1
  9. package/build/cjs/packages/aurora/src/index.js +4 -4
  10. package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js +21 -12
  11. package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
  12. package/build/esm/packages/aurora/src/components/image_picker/index.js +40 -22
  13. package/build/esm/packages/aurora/src/components/image_picker/index.js.map +1 -1
  14. package/build/esm/packages/aurora/src/components/loader/index.js +1 -1
  15. package/build/esm/packages/aurora/src/components/with_loader/index.js +1 -1
  16. package/build/esm/packages/aurora/src/components/xhr_image_picker/index.d.ts +1 -1
  17. package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js +62 -39
  18. package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js.map +1 -1
  19. package/build/esm/packages/aurora/src/index.js +2 -2
  20. package/package.json +1 -1
@@ -46,15 +46,20 @@ var useFilePicker = function useFilePicker(_ref) {
46
46
  setPreview = _useState12[1];
47
47
 
48
48
  var reader = React.useRef(new FileReader());
49
+ var isMountedRef = React.useRef(true);
49
50
  React.useEffect(function () {
50
- reader.current && getDataUrlFromFile(reader.current.result);
51
- reader.current.addEventListener('load', function () {
52
- return getDataUrlFromFile(reader.current.result);
53
- }, false);
51
+ isMountedRef.current = true;
52
+
53
+ var loadListener = function loadListener() {
54
+ if (isMountedRef.current) {
55
+ getDataUrlFromFile(reader.current.result);
56
+ }
57
+ };
58
+
59
+ reader.current.addEventListener('load', loadListener, false);
54
60
  return function () {
55
- return reader.current.removeEventListener('load', function () {
56
- return getDataUrlFromFile(reader.current.result);
57
- });
61
+ isMountedRef.current = false;
62
+ reader.current.removeEventListener('load', loadListener);
58
63
  };
59
64
  }, []);
60
65
  React.useEffect(function () {
@@ -64,10 +69,12 @@ var useFilePicker = function useFilePicker(_ref) {
64
69
  initialErrors && setErrors(initialErrors);
65
70
  }, [initialErrors]);
66
71
  React.useEffect(function () {
67
- fileAsDataUrl && (onChange === null || onChange === void 0 ? void 0 : onChange({
68
- fileList: fileList,
69
- fileAsDataUrl: fileAsDataUrl
70
- }));
72
+ if (fileAsDataUrl && isMountedRef.current) {
73
+ onChange === null || onChange === void 0 || onChange({
74
+ fileList: fileList,
75
+ fileAsDataUrl: fileAsDataUrl
76
+ });
77
+ }
71
78
  }, [fileAsDataUrl]);
72
79
 
73
80
  var onDropFile = function onDropFile(event) {
@@ -129,7 +136,9 @@ var useFilePicker = function useFilePicker(_ref) {
129
136
  };
130
137
 
131
138
  var getDataUrlFromFile = function getDataUrlFromFile(fileReaderResult) {
132
- setFileAsDataUrl(fileReaderResult);
139
+ if (isMountedRef.current) {
140
+ setFileAsDataUrl(fileReaderResult);
141
+ }
133
142
  };
134
143
 
135
144
  var onDragOver = function onDragOver(event) {
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -42,6 +42,7 @@ var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
42
42
  t = _useTranslation2[0];
43
43
 
44
44
  var inputRef = /*#__PURE__*/React.createRef();
45
+ var isMountedRef = React.useRef(true);
45
46
 
46
47
  var handleOnChange = function handleOnChange(ev) {
47
48
  var _ev$fileList;
@@ -85,7 +86,15 @@ var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
85
86
  onImageSizeUpdated === null || onImageSizeUpdated === void 0 || onImageSizeUpdated(imageSize);
86
87
  }, [imageSize]);
87
88
  React.useEffect(function () {
88
- initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
89
+ isMountedRef.current = true;
90
+
91
+ if (initialFile) {
92
+ setImageSizeBasedOnUrl(initialFile.fileUrl);
93
+ }
94
+
95
+ return function () {
96
+ isMountedRef.current = false;
97
+ };
89
98
  }, [initialFile]);
90
99
  React.useEffect(function () {
91
100
  if (!editedImageResult) return;
@@ -99,41 +108,50 @@ var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
99
108
  return fileArray;
100
109
  };
101
110
 
102
- var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
103
- createImageFromUrl(fileUrl).then(function (image) {
104
- setImageSize({
105
- width: image.naturalWidth,
106
- height: image.naturalHeight
107
- });
108
- });
109
- };
110
-
111
- var createImageFromUrl = /*#__PURE__*/function () {
112
- var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(url) {
113
- var img;
111
+ var setImageSizeBasedOnUrl = /*#__PURE__*/function () {
112
+ var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(fileUrl) {
113
+ var image;
114
114
  return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
115
115
  while (1) switch (_context.prev = _context.next) {
116
116
  case 0:
117
- img = new Image();
118
- img.src = url;
119
- _context.next = 4;
120
- return img.decode();
117
+ _context.next = 2;
118
+ return createImageFromUrl(fileUrl);
121
119
 
122
- case 4:
123
- return _context.abrupt("return", img);
120
+ case 2:
121
+ image = _context.sent;
124
122
 
125
- case 5:
123
+ if (isMountedRef.current) {
124
+ setImageSize({
125
+ width: image.naturalWidth,
126
+ height: image.naturalHeight
127
+ });
128
+ }
129
+
130
+ case 4:
126
131
  case "end":
127
132
  return _context.stop();
128
133
  }
129
134
  }, _callee);
130
135
  }));
131
136
 
132
- return function createImageFromUrl(_x) {
137
+ return function setImageSizeBasedOnUrl(_x) {
133
138
  return _ref2.apply(this, arguments);
134
139
  };
135
140
  }();
136
141
 
142
+ var createImageFromUrl = function createImageFromUrl(url) {
143
+ return new Promise(function (resolve, reject) {
144
+ var img = new Image();
145
+ img.src = url;
146
+
147
+ img.onload = function () {
148
+ return resolve(img);
149
+ };
150
+
151
+ img.onerror = reject;
152
+ });
153
+ };
154
+
137
155
  var useStyles = reactJss_esm.createUseStyles({
138
156
  imagePickerWrapper: {
139
157
  border: function border(_ref3) {
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG;AACA;AACA;AACA,2BAA2B,yDAA6D;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG;AACA;AACA;AACA,2BAA2B,yDAA6D;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
6
  var classnames = require('classnames');
7
- var main_module = require('../../css/loader/main.module.less.js');
8
7
  var css_classes = require('./css_classes.js');
9
8
  var constants = require('./constants.js');
9
+ var main_module = require('../../css/loader/main.module.less.js');
10
10
 
11
11
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
12
 
@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var classnames = require('classnames');
7
7
  var main_module = require('../../css/with-loader/main.module.less.js');
8
- var index = require('../loader/index.js');
9
8
  var css_classes = require('./css_classes.js');
9
+ var index = require('../loader/index.js');
10
10
 
11
11
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
12
 
@@ -73,62 +73,95 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
73
73
  isLoading = _useState10[0],
74
74
  setIsLoading = _useState10[1];
75
75
 
76
+ var isMountedRef = React.useRef(true);
77
+ React.useEffect(function () {
78
+ return function () {
79
+ isMountedRef.current = false;
80
+
81
+ if (pendingRequestRef.current) {
82
+ pendingRequestRef.current();
83
+ }
84
+ };
85
+ }, []);
86
+
76
87
  var handleControlChange = /*#__PURE__*/function () {
77
88
  var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(file) {
78
- var fileList, fileAsDataUrl, _httpApi$fetch, response, cancelRequest, responseObject;
89
+ var fileList, fileAsDataUrl, _httpApi$fetch2, response, cancelRequest, responseObject;
79
90
 
80
91
  return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
81
92
  while (1) switch (_context.prev = _context.next) {
82
93
  case 0:
83
94
  fileList = file.fileList, fileAsDataUrl = file.fileAsDataUrl;
84
- console.log('handleControlChange - file:', file);
85
- console.log('handleControlChange - fileList:', fileList);
86
- console.log('handleControlChange - fileAsDataUrl:', fileAsDataUrl);
87
95
  fileList && setImage(fileList[0]);
88
96
  onChange === null || onChange === void 0 || onChange({
89
97
  fileList: fileList,
90
98
  fileAsDataUrl: fileAsDataUrl
91
99
  });
92
- console.log('handleControlChange - fileAsDataUrl:', fileAsDataUrl);
93
100
 
94
101
  if (!(!fileList || !fileList.length)) {
95
- _context.next = 9;
102
+ _context.next = 5;
96
103
  break;
97
104
  }
98
105
 
99
106
  return _context.abrupt("return");
100
107
 
101
- case 9:
102
- // setIsLoading(true);
108
+ case 5:
109
+ setIsLoading(true);
110
+
103
111
  if (pendingRequestRef.current) {
104
112
  pendingRequestRef.current();
105
113
  pendingRequestRef.current = undefined;
106
114
  }
107
115
 
108
- _httpApi$fetch = httpApi.fetch({
116
+ _context.prev = 7;
117
+ _httpApi$fetch2 = httpApi.fetch({
109
118
  url: url,
110
119
  method: http_requester_contants.REQUEST_TYPES.post,
111
120
  data: fileList[0]
112
- }), response = _httpApi$fetch.response, cancelRequest = _httpApi$fetch.cancelRequest;
121
+ }), response = _httpApi$fetch2.response, cancelRequest = _httpApi$fetch2.cancelRequest;
113
122
  pendingRequestRef.current = cancelRequest;
114
- _context.next = 14;
123
+ _context.next = 12;
115
124
  return response;
116
125
 
117
- case 14:
126
+ case 12:
118
127
  responseObject = _context.sent;
119
- // setIsLoading(false);
120
- console.log('handleControlChange - responseObject:', responseObject);
128
+
129
+ if (isMountedRef.current) {
130
+ _context.next = 15;
131
+ break;
132
+ }
133
+
134
+ return _context.abrupt("return");
135
+
136
+ case 15:
121
137
  onUploaded === null || onUploaded === void 0 || onUploaded({
122
138
  fileList: fileList,
123
139
  dataUrl: fileAsDataUrl,
124
140
  imageId: responseObject.data.imageId
125
141
  });
142
+ _context.next = 22;
143
+ break;
144
+
145
+ case 18:
146
+ _context.prev = 18;
147
+ _context.t0 = _context["catch"](7);
148
+ console.error('Error uploading image:', _context.t0);
149
+ onError === null || onError === void 0 || onError([t('Error uploading image')]);
126
150
 
127
- case 17:
151
+ case 22:
152
+ _context.prev = 22;
153
+
154
+ if (isMountedRef.current) {
155
+ setIsLoading(false);
156
+ }
157
+
158
+ return _context.finish(22);
159
+
160
+ case 25:
128
161
  case "end":
129
162
  return _context.stop();
130
163
  }
131
- }, _callee);
164
+ }, _callee, null, [[7, 18, 22, 25]]);
132
165
  }));
133
166
 
134
167
  return function handleControlChange(_x) {
@@ -138,7 +171,6 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
138
171
 
139
172
  React.useEffect(function () {
140
173
  initialImageFile.current = initialFile;
141
- console.log('useEffect - initialFile:', initialFile);
142
174
 
143
175
  var setFileFromUrl = /*#__PURE__*/function () {
144
176
  var _ref3 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee2(fileData) {
@@ -146,22 +178,23 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
146
178
  return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee2$(_context2) {
147
179
  while (1) switch (_context2.prev = _context2.next) {
148
180
  case 0:
149
- console.log('setFileFromUrl - fileData:', fileData);
150
- _context2.next = 3;
181
+ _context2.next = 2;
151
182
  return fetch(fileData.fileUrl);
152
183
 
153
- case 3:
184
+ case 2:
154
185
  response = _context2.sent;
155
- _context2.next = 6;
186
+ _context2.next = 5;
156
187
  return response.blob();
157
188
 
158
- case 6:
189
+ case 5:
159
190
  data = _context2.sent;
160
191
  file = new File([data], fileData.fileName);
161
- setInitialImage(file);
162
- console.log('setFileFromUrl - file:', file);
163
192
 
164
- case 10:
193
+ if (isMountedRef.current) {
194
+ setInitialImage(file);
195
+ }
196
+
197
+ case 8:
165
198
  case "end":
166
199
  return _context2.stop();
167
200
  }
@@ -173,13 +206,8 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
173
206
  };
174
207
  }();
175
208
 
176
- console.log('image.webkitRelativePath', image === null || image === void 0 ? void 0 : image.webkitRelativePath);
177
- console.log('image.name', image === null || image === void 0 ? void 0 : image.name);
178
209
  if (!initialImageFile.current) return;
179
- setFileFromUrl(initialImageFile.current); // !initialImageFile.current
180
- // ? image && setFileFromUrl({ fileName: image.name, fileUrl: image.webkitRelativePath })
181
- // : setFileFromUrl(initialImageFile.current);
182
-
210
+ setFileFromUrl(initialImageFile.current);
183
211
  return function () {
184
212
  var _pendingRequestRef$cu;
185
213
 
@@ -187,20 +215,15 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
187
215
  };
188
216
  }, [image, initialFile]);
189
217
  React.useEffect(function () {
190
- var src = image !== null && image !== void 0 ? image : initialImage;
191
- console.log('useEffect - image:', image);
192
- console.log('useEffect - initialImage:', initialImage);
193
- console.log('useEffect - src:', src !== null && src !== void 0 ? src : '');
194
- setImageEditorSrc(src !== null && src !== void 0 ? src : '');
218
+ var src = image ? URL.createObjectURL(image) : initialImage ? URL.createObjectURL(initialImage) : '';
219
+ setImageEditorSrc(src);
195
220
  }, [image, initialImage]);
196
- console.log('useEffect - setImageEditorSrc(src ?? ""):', imageEditorSrc);
197
221
 
198
222
  var renderImageEditor = function renderImageEditor(defaultProps) {
199
- console.log('renderImageEditor - defaultProps:', defaultProps);
200
223
  return ImageEditor ? /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(ImageEditor, _rollupPluginBabelHelpers.objectSpread2({}, defaultProps))) : null;
201
224
  };
202
225
 
203
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(index['default'], {
226
+ return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, isLoading ? /*#__PURE__*/React__default['default'].createElement("div", null, t('File transfer...')) : /*#__PURE__*/React__default['default'].createElement(index['default'], {
204
227
  id: id,
205
228
  name: name,
206
229
  onChange: handleControlChange,
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -44,8 +44,6 @@ var index$g = require('./components/controls/hoc/control_textarea/index.js');
44
44
  var index$F = require('./components/image_picker/index.js');
45
45
  var use_modals_context = require('./components/modal_new/hooks/use_modals_context.js');
46
46
  var modal = require('./components/modal_new/components/modal/modal.js');
47
- var index$L = require('./components/loader/index.js');
48
- var index$M = require('./components/with_loader/index.js');
49
47
  var index$P = require('./components/xhr_image_picker/index.js');
50
48
  var index$p = require('./components/controls/hoc/control_xhr_image_picker/index.js');
51
49
  var index$z = require('./components/table/index.js');
@@ -65,6 +63,7 @@ var icon_mobile = require('./assets/icon_mobile.js');
65
63
  var icon_tablet = require('./assets/icon_tablet.js');
66
64
  var icon_warning = require('./assets/icon_warning.js');
67
65
  var index$N = require('./components/link/index.js');
66
+ var index$L = require('./components/loader/index.js');
68
67
  var index$s = require('./components/modal/index.js');
69
68
  var modal_context = require('./components/modal/context/modal_context.js');
70
69
  var modal_provider = require('./components/modal/hoc/modal_provider.js');
@@ -93,6 +92,7 @@ var index$2 = require('./components/tooltip/index.js');
93
92
  var index$Q = require('./components/tree/index.js');
94
93
  var tree_node = require('./components/tree/components/tree_node.js');
95
94
  var values_syncer = require('./components/controls/components/values_syncer.js');
95
+ var index$M = require('./components/with_loader/index.js');
96
96
 
97
97
 
98
98
 
@@ -139,8 +139,6 @@ exports.ControlTextarea = index$g['default'];
139
139
  exports.ImagePicker = index$F['default'];
140
140
  exports.useModalsContext = use_modals_context.useModalsContext;
141
141
  exports.ModalNew = modal.ModalNew;
142
- exports.Loader = index$L['default'];
143
- exports.WithLoader = index$M['default'];
144
142
  exports.XhrImagePicker = index$P['default'];
145
143
  exports.ControlXhrImagePicker = index$p['default'];
146
144
  exports.Table = index$z['default'];
@@ -161,6 +159,7 @@ exports.IconMobile = icon_mobile['default'];
161
159
  exports.IconTablet = icon_tablet['default'];
162
160
  exports.IconWarning = icon_warning['default'];
163
161
  exports.Link = index$N['default'];
162
+ exports.Loader = index$L['default'];
164
163
  exports.Modal = index$s['default'];
165
164
  exports.ModalContext = modal_context.ModalContext;
166
165
  exports.ModalProvider = modal_provider['default'];
@@ -189,4 +188,5 @@ exports.Tooltip = index$2['default'];
189
188
  exports.Tree = index$Q.Tree;
190
189
  exports.TreeNode = tree_node.TreeNode;
191
190
  exports.ValuesSyncer = values_syncer['default'];
191
+ exports.WithLoader = index$M['default'];
192
192
  //# sourceMappingURL=index.js.map
@@ -42,15 +42,20 @@ var useFilePicker = function useFilePicker(_ref) {
42
42
  setPreview = _useState12[1];
43
43
 
44
44
  var reader = useRef(new FileReader());
45
+ var isMountedRef = useRef(true);
45
46
  useEffect(function () {
46
- reader.current && getDataUrlFromFile(reader.current.result);
47
- reader.current.addEventListener('load', function () {
48
- return getDataUrlFromFile(reader.current.result);
49
- }, false);
47
+ isMountedRef.current = true;
48
+
49
+ var loadListener = function loadListener() {
50
+ if (isMountedRef.current) {
51
+ getDataUrlFromFile(reader.current.result);
52
+ }
53
+ };
54
+
55
+ reader.current.addEventListener('load', loadListener, false);
50
56
  return function () {
51
- return reader.current.removeEventListener('load', function () {
52
- return getDataUrlFromFile(reader.current.result);
53
- });
57
+ isMountedRef.current = false;
58
+ reader.current.removeEventListener('load', loadListener);
54
59
  };
55
60
  }, []);
56
61
  useEffect(function () {
@@ -60,10 +65,12 @@ var useFilePicker = function useFilePicker(_ref) {
60
65
  initialErrors && setErrors(initialErrors);
61
66
  }, [initialErrors]);
62
67
  useEffect(function () {
63
- fileAsDataUrl && (onChange === null || onChange === void 0 ? void 0 : onChange({
64
- fileList: fileList,
65
- fileAsDataUrl: fileAsDataUrl
66
- }));
68
+ if (fileAsDataUrl && isMountedRef.current) {
69
+ onChange === null || onChange === void 0 || onChange({
70
+ fileList: fileList,
71
+ fileAsDataUrl: fileAsDataUrl
72
+ });
73
+ }
67
74
  }, [fileAsDataUrl]);
68
75
 
69
76
  var onDropFile = function onDropFile(event) {
@@ -125,7 +132,9 @@ var useFilePicker = function useFilePicker(_ref) {
125
132
  };
126
133
 
127
134
  var getDataUrlFromFile = function getDataUrlFromFile(fileReaderResult) {
128
- setFileAsDataUrl(fileReaderResult);
135
+ if (isMountedRef.current) {
136
+ setFileAsDataUrl(fileReaderResult);
137
+ }
129
138
  };
130
139
 
131
140
  var onDragOver = function onDragOver(event) {
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -1,4 +1,4 @@
1
- import React, { memo, useState, useEffect, createRef } from 'react';
1
+ import React, { memo, useRef, useState, useEffect, createRef } from 'react';
2
2
  import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
3
3
  import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
4
4
  import { FILES_EXTENSIONS } from '../file_picker/constants.js';
@@ -33,6 +33,7 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
33
33
  t = _useTranslation2[0];
34
34
 
35
35
  var inputRef = /*#__PURE__*/createRef();
36
+ var isMountedRef = useRef(true);
36
37
 
37
38
  var handleOnChange = function handleOnChange(ev) {
38
39
  var _ev$fileList;
@@ -76,7 +77,15 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
76
77
  onImageSizeUpdated === null || onImageSizeUpdated === void 0 || onImageSizeUpdated(imageSize);
77
78
  }, [imageSize]);
78
79
  useEffect(function () {
79
- initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
80
+ isMountedRef.current = true;
81
+
82
+ if (initialFile) {
83
+ setImageSizeBasedOnUrl(initialFile.fileUrl);
84
+ }
85
+
86
+ return function () {
87
+ isMountedRef.current = false;
88
+ };
80
89
  }, [initialFile]);
81
90
  useEffect(function () {
82
91
  if (!editedImageResult) return;
@@ -90,41 +99,50 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
90
99
  return fileArray;
91
100
  };
92
101
 
93
- var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
94
- createImageFromUrl(fileUrl).then(function (image) {
95
- setImageSize({
96
- width: image.naturalWidth,
97
- height: image.naturalHeight
98
- });
99
- });
100
- };
101
-
102
- var createImageFromUrl = /*#__PURE__*/function () {
103
- var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(url) {
104
- var img;
102
+ var setImageSizeBasedOnUrl = /*#__PURE__*/function () {
103
+ var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(fileUrl) {
104
+ var image;
105
105
  return _regeneratorRuntime().wrap(function _callee$(_context) {
106
106
  while (1) switch (_context.prev = _context.next) {
107
107
  case 0:
108
- img = new Image();
109
- img.src = url;
110
- _context.next = 4;
111
- return img.decode();
108
+ _context.next = 2;
109
+ return createImageFromUrl(fileUrl);
112
110
 
113
- case 4:
114
- return _context.abrupt("return", img);
111
+ case 2:
112
+ image = _context.sent;
115
113
 
116
- case 5:
114
+ if (isMountedRef.current) {
115
+ setImageSize({
116
+ width: image.naturalWidth,
117
+ height: image.naturalHeight
118
+ });
119
+ }
120
+
121
+ case 4:
117
122
  case "end":
118
123
  return _context.stop();
119
124
  }
120
125
  }, _callee);
121
126
  }));
122
127
 
123
- return function createImageFromUrl(_x) {
128
+ return function setImageSizeBasedOnUrl(_x) {
124
129
  return _ref2.apply(this, arguments);
125
130
  };
126
131
  }();
127
132
 
133
+ var createImageFromUrl = function createImageFromUrl(url) {
134
+ return new Promise(function (resolve, reject) {
135
+ var img = new Image();
136
+ img.src = url;
137
+
138
+ img.onload = function () {
139
+ return resolve(img);
140
+ };
141
+
142
+ img.onerror = reject;
143
+ });
144
+ };
145
+
128
146
  var useStyles = createUseStyles({
129
147
  imagePickerWrapper: {
130
148
  border: function border(_ref3) {
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA,gCAAgC,yDAA6D;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA,gCAAgC,yDAA6D;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import classnames from 'classnames';
3
- import cssClasses from '../../css/loader/main.module.less.js';
4
3
  import { cssLoader } from './css_classes.js';
5
4
  import { LOADER_SIZE_CSS_CLASS_MAP, LOADER_SIZE } from './constants.js';
5
+ import cssClasses from '../../css/loader/main.module.less.js';
6
6
 
7
7
  var Loader = function Loader(_ref) {
8
8
  var size = _ref.size,
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import classnames from 'classnames';
3
3
  import cssClasses from '../../css/with-loader/main.module.less.js';
4
- import Loader from '../loader/index.js';
5
4
  import { cssWithLoaderWrapper, cssWithLoader } from './css_classes.js';
5
+ import Loader from '../loader/index.js';
6
6
 
7
7
  var WithLoader = function WithLoader(_ref) {
8
8
  var isLoading = _ref.isLoading,
@@ -1,4 +1,4 @@
1
- import { IXhrImagePickerProps } from "./types";
2
1
  import React from 'react';
2
+ import { IXhrImagePickerProps } from "./types";
3
3
  declare const XhrImagePicker: React.FC<IXhrImagePickerProps>;
4
4
  export default XhrImagePicker;
@@ -65,62 +65,95 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
65
65
  isLoading = _useState10[0],
66
66
  setIsLoading = _useState10[1];
67
67
 
68
+ var isMountedRef = useRef(true);
69
+ useEffect(function () {
70
+ return function () {
71
+ isMountedRef.current = false;
72
+
73
+ if (pendingRequestRef.current) {
74
+ pendingRequestRef.current();
75
+ }
76
+ };
77
+ }, []);
78
+
68
79
  var handleControlChange = /*#__PURE__*/function () {
69
80
  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
70
- var fileList, fileAsDataUrl, _httpApi$fetch, response, cancelRequest, responseObject;
81
+ var fileList, fileAsDataUrl, _httpApi$fetch2, response, cancelRequest, responseObject;
71
82
 
72
83
  return _regeneratorRuntime().wrap(function _callee$(_context) {
73
84
  while (1) switch (_context.prev = _context.next) {
74
85
  case 0:
75
86
  fileList = file.fileList, fileAsDataUrl = file.fileAsDataUrl;
76
- console.log('handleControlChange - file:', file);
77
- console.log('handleControlChange - fileList:', fileList);
78
- console.log('handleControlChange - fileAsDataUrl:', fileAsDataUrl);
79
87
  fileList && setImage(fileList[0]);
80
88
  onChange === null || onChange === void 0 || onChange({
81
89
  fileList: fileList,
82
90
  fileAsDataUrl: fileAsDataUrl
83
91
  });
84
- console.log('handleControlChange - fileAsDataUrl:', fileAsDataUrl);
85
92
 
86
93
  if (!(!fileList || !fileList.length)) {
87
- _context.next = 9;
94
+ _context.next = 5;
88
95
  break;
89
96
  }
90
97
 
91
98
  return _context.abrupt("return");
92
99
 
93
- case 9:
94
- // setIsLoading(true);
100
+ case 5:
101
+ setIsLoading(true);
102
+
95
103
  if (pendingRequestRef.current) {
96
104
  pendingRequestRef.current();
97
105
  pendingRequestRef.current = undefined;
98
106
  }
99
107
 
100
- _httpApi$fetch = httpApi.fetch({
108
+ _context.prev = 7;
109
+ _httpApi$fetch2 = httpApi.fetch({
101
110
  url: url,
102
111
  method: REQUEST_TYPES.post,
103
112
  data: fileList[0]
104
- }), response = _httpApi$fetch.response, cancelRequest = _httpApi$fetch.cancelRequest;
113
+ }), response = _httpApi$fetch2.response, cancelRequest = _httpApi$fetch2.cancelRequest;
105
114
  pendingRequestRef.current = cancelRequest;
106
- _context.next = 14;
115
+ _context.next = 12;
107
116
  return response;
108
117
 
109
- case 14:
118
+ case 12:
110
119
  responseObject = _context.sent;
111
- // setIsLoading(false);
112
- console.log('handleControlChange - responseObject:', responseObject);
120
+
121
+ if (isMountedRef.current) {
122
+ _context.next = 15;
123
+ break;
124
+ }
125
+
126
+ return _context.abrupt("return");
127
+
128
+ case 15:
113
129
  onUploaded === null || onUploaded === void 0 || onUploaded({
114
130
  fileList: fileList,
115
131
  dataUrl: fileAsDataUrl,
116
132
  imageId: responseObject.data.imageId
117
133
  });
134
+ _context.next = 22;
135
+ break;
136
+
137
+ case 18:
138
+ _context.prev = 18;
139
+ _context.t0 = _context["catch"](7);
140
+ console.error('Error uploading image:', _context.t0);
141
+ onError === null || onError === void 0 || onError([t('Error uploading image')]);
118
142
 
119
- case 17:
143
+ case 22:
144
+ _context.prev = 22;
145
+
146
+ if (isMountedRef.current) {
147
+ setIsLoading(false);
148
+ }
149
+
150
+ return _context.finish(22);
151
+
152
+ case 25:
120
153
  case "end":
121
154
  return _context.stop();
122
155
  }
123
- }, _callee);
156
+ }, _callee, null, [[7, 18, 22, 25]]);
124
157
  }));
125
158
 
126
159
  return function handleControlChange(_x) {
@@ -130,7 +163,6 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
130
163
 
131
164
  useEffect(function () {
132
165
  initialImageFile.current = initialFile;
133
- console.log('useEffect - initialFile:', initialFile);
134
166
 
135
167
  var setFileFromUrl = /*#__PURE__*/function () {
136
168
  var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(fileData) {
@@ -138,22 +170,23 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
138
170
  return _regeneratorRuntime().wrap(function _callee2$(_context2) {
139
171
  while (1) switch (_context2.prev = _context2.next) {
140
172
  case 0:
141
- console.log('setFileFromUrl - fileData:', fileData);
142
- _context2.next = 3;
173
+ _context2.next = 2;
143
174
  return fetch(fileData.fileUrl);
144
175
 
145
- case 3:
176
+ case 2:
146
177
  response = _context2.sent;
147
- _context2.next = 6;
178
+ _context2.next = 5;
148
179
  return response.blob();
149
180
 
150
- case 6:
181
+ case 5:
151
182
  data = _context2.sent;
152
183
  file = new File([data], fileData.fileName);
153
- setInitialImage(file);
154
- console.log('setFileFromUrl - file:', file);
155
184
 
156
- case 10:
185
+ if (isMountedRef.current) {
186
+ setInitialImage(file);
187
+ }
188
+
189
+ case 8:
157
190
  case "end":
158
191
  return _context2.stop();
159
192
  }
@@ -165,13 +198,8 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
165
198
  };
166
199
  }();
167
200
 
168
- console.log('image.webkitRelativePath', image === null || image === void 0 ? void 0 : image.webkitRelativePath);
169
- console.log('image.name', image === null || image === void 0 ? void 0 : image.name);
170
201
  if (!initialImageFile.current) return;
171
- setFileFromUrl(initialImageFile.current); // !initialImageFile.current
172
- // ? image && setFileFromUrl({ fileName: image.name, fileUrl: image.webkitRelativePath })
173
- // : setFileFromUrl(initialImageFile.current);
174
-
202
+ setFileFromUrl(initialImageFile.current);
175
203
  return function () {
176
204
  var _pendingRequestRef$cu;
177
205
 
@@ -179,20 +207,15 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
179
207
  };
180
208
  }, [image, initialFile]);
181
209
  useEffect(function () {
182
- var src = image !== null && image !== void 0 ? image : initialImage;
183
- console.log('useEffect - image:', image);
184
- console.log('useEffect - initialImage:', initialImage);
185
- console.log('useEffect - src:', src !== null && src !== void 0 ? src : '');
186
- setImageEditorSrc(src !== null && src !== void 0 ? src : '');
210
+ var src = image ? URL.createObjectURL(image) : initialImage ? URL.createObjectURL(initialImage) : '';
211
+ setImageEditorSrc(src);
187
212
  }, [image, initialImage]);
188
- console.log('useEffect - setImageEditorSrc(src ?? ""):', imageEditorSrc);
189
213
 
190
214
  var renderImageEditor = function renderImageEditor(defaultProps) {
191
- console.log('renderImageEditor - defaultProps:', defaultProps);
192
215
  return ImageEditor ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ImageEditor, _objectSpread2({}, defaultProps))) : null;
193
216
  };
194
217
 
195
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImagePicker, {
218
+ return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement("div", null, t('File transfer...')) : /*#__PURE__*/React.createElement(ImagePicker, {
196
219
  id: id,
197
220
  name: name,
198
221
  onChange: handleControlChange,
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -40,8 +40,6 @@ export { default as ControlTextarea } from './components/controls/hoc/control_te
40
40
  export { default as ImagePicker } from './components/image_picker/index.js';
41
41
  export { useModalsContext } from './components/modal_new/hooks/use_modals_context.js';
42
42
  export { ModalNew } from './components/modal_new/components/modal/modal.js';
43
- export { default as Loader } from './components/loader/index.js';
44
- export { default as WithLoader } from './components/with_loader/index.js';
45
43
  export { default as XhrImagePicker } from './components/xhr_image_picker/index.js';
46
44
  export { default as ControlXhrImagePicker } from './components/controls/hoc/control_xhr_image_picker/index.js';
47
45
  export { default as Table } from './components/table/index.js';
@@ -61,6 +59,7 @@ export { default as IconMobile } from './assets/icon_mobile.js';
61
59
  export { default as IconTablet } from './assets/icon_tablet.js';
62
60
  export { default as IconWarning } from './assets/icon_warning.js';
63
61
  export { default as Link } from './components/link/index.js';
62
+ export { default as Loader } from './components/loader/index.js';
64
63
  export { default as Modal } from './components/modal/index.js';
65
64
  export { ModalContext } from './components/modal/context/modal_context.js';
66
65
  export { default as ModalProvider } from './components/modal/hoc/modal_provider.js';
@@ -89,4 +88,5 @@ export { default as Tooltip } from './components/tooltip/index.js';
89
88
  export { Tree } from './components/tree/index.js';
90
89
  export { TreeNode } from './components/tree/components/tree_node.js';
91
90
  export { default as ValuesSyncer } from './components/controls/components/values_syncer.js';
91
+ export { default as WithLoader } from './components/with_loader/index.js';
92
92
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@dreamcommerce/aurora",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "2.19.0-1",
5
+ "version": "2.19.0-3",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",