@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.
- package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js +21 -12
- package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/image_picker/index.js +39 -21
- package/build/cjs/packages/aurora/src/components/image_picker/index.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/loader/index.js +1 -1
- package/build/cjs/packages/aurora/src/components/with_loader/index.js +1 -1
- package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js +62 -39
- package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js.map +1 -1
- package/build/cjs/packages/aurora/src/index.js +4 -4
- package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js +21 -12
- package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
- package/build/esm/packages/aurora/src/components/image_picker/index.js +40 -22
- package/build/esm/packages/aurora/src/components/image_picker/index.js.map +1 -1
- package/build/esm/packages/aurora/src/components/loader/index.js +1 -1
- package/build/esm/packages/aurora/src/components/with_loader/index.js +1 -1
- package/build/esm/packages/aurora/src/components/xhr_image_picker/index.d.ts +1 -1
- package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js +62 -39
- package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js.map +1 -1
- package/build/esm/packages/aurora/src/index.js +2 -2
- 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
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
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
|
-
|
|
56
|
-
|
|
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 &&
|
|
68
|
-
|
|
69
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
103
|
-
|
|
104
|
-
|
|
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
|
-
|
|
118
|
-
|
|
119
|
-
_context.next = 4;
|
|
120
|
-
return img.decode();
|
|
117
|
+
_context.next = 2;
|
|
118
|
+
return createImageFromUrl(fileUrl);
|
|
121
119
|
|
|
122
|
-
case
|
|
123
|
-
|
|
120
|
+
case 2:
|
|
121
|
+
image = _context.sent;
|
|
124
122
|
|
|
125
|
-
|
|
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
|
|
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$
|
|
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 =
|
|
102
|
+
_context.next = 5;
|
|
96
103
|
break;
|
|
97
104
|
}
|
|
98
105
|
|
|
99
106
|
return _context.abrupt("return");
|
|
100
107
|
|
|
101
|
-
case
|
|
102
|
-
|
|
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
|
-
|
|
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$
|
|
121
|
+
}), response = _httpApi$fetch2.response, cancelRequest = _httpApi$fetch2.cancelRequest;
|
|
113
122
|
pendingRequestRef.current = cancelRequest;
|
|
114
|
-
_context.next =
|
|
123
|
+
_context.next = 12;
|
|
115
124
|
return response;
|
|
116
125
|
|
|
117
|
-
case
|
|
126
|
+
case 12:
|
|
118
127
|
responseObject = _context.sent;
|
|
119
|
-
|
|
120
|
-
|
|
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
|
|
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
|
-
|
|
150
|
-
_context2.next = 3;
|
|
181
|
+
_context2.next = 2;
|
|
151
182
|
return fetch(fileData.fileUrl);
|
|
152
183
|
|
|
153
|
-
case
|
|
184
|
+
case 2:
|
|
154
185
|
response = _context2.sent;
|
|
155
|
-
_context2.next =
|
|
186
|
+
_context2.next = 5;
|
|
156
187
|
return response.blob();
|
|
157
188
|
|
|
158
|
-
case
|
|
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
|
-
|
|
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);
|
|
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
|
|
191
|
-
|
|
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
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
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
|
-
|
|
52
|
-
|
|
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 &&
|
|
64
|
-
|
|
65
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
94
|
-
|
|
95
|
-
|
|
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
|
-
|
|
109
|
-
|
|
110
|
-
_context.next = 4;
|
|
111
|
-
return img.decode();
|
|
108
|
+
_context.next = 2;
|
|
109
|
+
return createImageFromUrl(fileUrl);
|
|
112
110
|
|
|
113
|
-
case
|
|
114
|
-
|
|
111
|
+
case 2:
|
|
112
|
+
image = _context.sent;
|
|
115
113
|
|
|
116
|
-
|
|
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
|
|
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,
|
|
@@ -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$
|
|
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 =
|
|
94
|
+
_context.next = 5;
|
|
88
95
|
break;
|
|
89
96
|
}
|
|
90
97
|
|
|
91
98
|
return _context.abrupt("return");
|
|
92
99
|
|
|
93
|
-
case
|
|
94
|
-
|
|
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
|
-
|
|
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$
|
|
113
|
+
}), response = _httpApi$fetch2.response, cancelRequest = _httpApi$fetch2.cancelRequest;
|
|
105
114
|
pendingRequestRef.current = cancelRequest;
|
|
106
|
-
_context.next =
|
|
115
|
+
_context.next = 12;
|
|
107
116
|
return response;
|
|
108
117
|
|
|
109
|
-
case
|
|
118
|
+
case 12:
|
|
110
119
|
responseObject = _context.sent;
|
|
111
|
-
|
|
112
|
-
|
|
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
|
|
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
|
-
|
|
142
|
-
_context2.next = 3;
|
|
173
|
+
_context2.next = 2;
|
|
143
174
|
return fetch(fileData.fileUrl);
|
|
144
175
|
|
|
145
|
-
case
|
|
176
|
+
case 2:
|
|
146
177
|
response = _context2.sent;
|
|
147
|
-
_context2.next =
|
|
178
|
+
_context2.next = 5;
|
|
148
179
|
return response.blob();
|
|
149
180
|
|
|
150
|
-
case
|
|
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
|
-
|
|
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);
|
|
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
|
|
183
|
-
|
|
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
|