@dreamcommerce/aurora 2.19.0-1 → 2.19.0-10

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 (33) hide show
  1. package/build/cjs/packages/aurora/src/components/image_picker/css_classes.js +4 -1
  2. package/build/cjs/packages/aurora/src/components/image_picker/css_classes.js.map +1 -1
  3. package/build/cjs/packages/aurora/src/components/with_loader/css_classes.js +0 -2
  4. package/build/cjs/packages/aurora/src/components/with_loader/css_classes.js.map +1 -1
  5. package/build/cjs/packages/aurora/src/components/with_loader/index.js +3 -9
  6. package/build/cjs/packages/aurora/src/components/with_loader/index.js.map +1 -1
  7. package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js +26 -37
  8. package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js.map +1 -1
  9. package/build/cjs/packages/aurora/src/css/image_picker/main.module.less.js +5 -2
  10. package/build/cjs/packages/aurora/src/css/image_picker/main.module.less.js.map +1 -1
  11. package/build/cjs/packages/aurora/src/css/with-loader/main.module.less.js +2 -4
  12. package/build/cjs/packages/aurora/src/css/with-loader/main.module.less.js.map +1 -1
  13. package/build/cjs/packages/aurora/src/index.js +2 -2
  14. package/build/esm/packages/aurora/src/components/image_picker/css_classes.d.ts +3 -0
  15. package/build/esm/packages/aurora/src/components/image_picker/css_classes.js +4 -1
  16. package/build/esm/packages/aurora/src/components/image_picker/css_classes.js.map +1 -1
  17. package/build/esm/packages/aurora/src/components/image_picker/types.d.ts +0 -1
  18. package/build/esm/packages/aurora/src/components/with_loader/css_classes.d.ts +0 -2
  19. package/build/esm/packages/aurora/src/components/with_loader/css_classes.js +1 -2
  20. package/build/esm/packages/aurora/src/components/with_loader/css_classes.js.map +1 -1
  21. package/build/esm/packages/aurora/src/components/with_loader/index.js +4 -10
  22. package/build/esm/packages/aurora/src/components/with_loader/index.js.map +1 -1
  23. package/build/esm/packages/aurora/src/components/with_loader/types.d.ts +2 -4
  24. package/build/esm/packages/aurora/src/components/with_loader/types.js +0 -1
  25. package/build/esm/packages/aurora/src/components/with_loader/types.js.map +1 -1
  26. package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js +26 -37
  27. package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js.map +1 -1
  28. package/build/esm/packages/aurora/src/css/image_picker/main.module.less.js +5 -2
  29. package/build/esm/packages/aurora/src/css/image_picker/main.module.less.js.map +1 -1
  30. package/build/esm/packages/aurora/src/css/with-loader/main.module.less.js +2 -4
  31. package/build/esm/packages/aurora/src/css/with-loader/main.module.less.js.map +1 -1
  32. package/build/esm/packages/aurora/src/index.js +1 -1
  33. package/package.json +1 -1
@@ -24,7 +24,10 @@ var CSS_CLASSES = {
24
24
  imagePickerSelectedFile: "".concat(imagePicker, "__selected-file"),
25
25
  imagePickerSelectedFileNameWrapper: "".concat(imagePicker, "__selected-file-name-wrapper"),
26
26
  imagePickerSelectedFileRemoveWrapper: "".concat(imagePicker, "__selected-file-remove-wrapper"),
27
- imagePickerSupportedFormats: "".concat(imagePicker, "__supported-formats")
27
+ imagePickerSupportedFormats: "".concat(imagePicker, "__supported-formats"),
28
+ imagePickerLoadingWrapper: "".concat(imagePicker, "__loading-wrapper"),
29
+ imagePickerLoadingWrapperContent: "".concat(imagePicker, "__loading-wrapper-content"),
30
+ imagePickerLoadingWrapperContentText: "".concat(imagePicker, "__loading-wrapper-content-text")
28
31
  };
29
32
 
30
33
  exports.default = CSS_CLASSES;
@@ -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;"}
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;"}
@@ -3,8 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var cssWithLoader = 'with-loader';
6
- var cssWithLoaderWrapper = 'with-loader-wrapper';
7
6
 
8
7
  exports.cssWithLoader = cssWithLoader;
9
- exports.cssWithLoaderWrapper = cssWithLoaderWrapper;
10
8
  //# sourceMappingURL=css_classes.js.map
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}
@@ -4,8 +4,8 @@ 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/with-loader/main.module.less.js');
8
7
  var index = require('../loader/index.js');
8
+ var main_module = require('../../css/with-loader/main.module.less.js');
9
9
  var css_classes = require('./css_classes.js');
10
10
 
11
11
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,20 +15,14 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
15
15
 
16
16
  var WithLoader = function WithLoader(_ref) {
17
17
  var isLoading = _ref.isLoading,
18
- textOnLoading = _ref.textOnLoading,
19
18
  children = _ref.children,
20
- size = _ref.size,
21
- customStyle = _ref.customStyle;
19
+ size = _ref.size;
22
20
  return isLoading ? /*#__PURE__*/React__default['default'].createElement("div", {
23
- className: customStyle || ''
24
- }, /*#__PURE__*/React__default['default'].createElement("div", {
25
- className: classnames__default['default'](main_module['default'][css_classes.cssWithLoaderWrapper])
26
- }, /*#__PURE__*/React__default['default'].createElement("div", {
27
21
  className: classnames__default['default'](main_module['default'][css_classes.cssWithLoader]),
28
22
  "data-test-id": "loader"
29
23
  }, /*#__PURE__*/React__default['default'].createElement(index['default'], {
30
24
  size: size
31
- }), textOnLoading && /*#__PURE__*/React__default['default'].createElement("span", null, textOnLoading)))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, children);
25
+ })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, children);
32
26
  };
33
27
 
34
28
  exports.default = WithLoader;
@@ -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;"}
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;"}
@@ -6,7 +6,6 @@ var React = require('react');
6
6
  var useTranslation = require('../../../../../external/react-i18next/dist/es/useTranslation.js');
7
7
  var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
8
8
  var constants = require('../file_picker/constants.js');
9
- require('classnames');
10
9
  var css_classes = require('../image_picker/css_classes.js');
11
10
  var icon_image = require('../../assets/icon_image.js');
12
11
  var main_module = require('../../css/image_picker/main.module.less.js');
@@ -15,6 +14,7 @@ var use_modals_context = require('../modal_new/hooks/use_modals_context.js');
15
14
  var modal = require('../modal_new/components/modal/modal.js');
16
15
  var http_requester_contants = require('../../../../star_core/build/esm/packages/star_core/src/features/http_requester/http_requester_contants.js');
17
16
  var use_http_api = require('../../hooks/use_http_api.js');
17
+ var index$1 = require('../loader/index.js');
18
18
 
19
19
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
20
20
 
@@ -81,50 +81,46 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
81
81
  while (1) switch (_context.prev = _context.next) {
82
82
  case 0:
83
83
  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
84
  fileList && setImage(fileList[0]);
88
85
  onChange === null || onChange === void 0 || onChange({
89
86
  fileList: fileList,
90
87
  fileAsDataUrl: fileAsDataUrl
91
88
  });
92
- console.log('handleControlChange - fileAsDataUrl:', fileAsDataUrl);
93
89
 
94
90
  if (!(!fileList || !fileList.length)) {
95
- _context.next = 9;
91
+ _context.next = 5;
96
92
  break;
97
93
  }
98
94
 
99
95
  return _context.abrupt("return");
100
96
 
101
- case 9:
102
- // setIsLoading(true);
97
+ case 5:
103
98
  if (pendingRequestRef.current) {
104
99
  pendingRequestRef.current();
105
100
  pendingRequestRef.current = undefined;
106
101
  }
107
102
 
103
+ setIsLoading(true);
108
104
  _httpApi$fetch = httpApi.fetch({
109
105
  url: url,
110
106
  method: http_requester_contants.REQUEST_TYPES.post,
111
107
  data: fileList[0]
112
108
  }), response = _httpApi$fetch.response, cancelRequest = _httpApi$fetch.cancelRequest;
113
109
  pendingRequestRef.current = cancelRequest;
114
- _context.next = 14;
115
- return response;
110
+ _context.next = 11;
111
+ return response.finally(function () {
112
+ return setIsLoading(false);
113
+ });
116
114
 
117
- case 14:
115
+ case 11:
118
116
  responseObject = _context.sent;
119
- // setIsLoading(false);
120
- console.log('handleControlChange - responseObject:', responseObject);
121
117
  onUploaded === null || onUploaded === void 0 || onUploaded({
122
118
  fileList: fileList,
123
119
  dataUrl: fileAsDataUrl,
124
120
  imageId: responseObject.data.imageId
125
121
  });
126
122
 
127
- case 17:
123
+ case 13:
128
124
  case "end":
129
125
  return _context.stop();
130
126
  }
@@ -138,7 +134,6 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
138
134
 
139
135
  React.useEffect(function () {
140
136
  initialImageFile.current = initialFile;
141
- console.log('useEffect - initialFile:', initialFile);
142
137
 
143
138
  var setFileFromUrl = /*#__PURE__*/function () {
144
139
  var _ref3 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee2(fileData) {
@@ -146,22 +141,20 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
146
141
  return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee2$(_context2) {
147
142
  while (1) switch (_context2.prev = _context2.next) {
148
143
  case 0:
149
- console.log('setFileFromUrl - fileData:', fileData);
150
- _context2.next = 3;
144
+ _context2.next = 2;
151
145
  return fetch(fileData.fileUrl);
152
146
 
153
- case 3:
147
+ case 2:
154
148
  response = _context2.sent;
155
- _context2.next = 6;
149
+ _context2.next = 5;
156
150
  return response.blob();
157
151
 
158
- case 6:
152
+ case 5:
159
153
  data = _context2.sent;
160
154
  file = new File([data], fileData.fileName);
161
155
  setInitialImage(file);
162
- console.log('setFileFromUrl - file:', file);
163
156
 
164
- case 10:
157
+ case 8:
165
158
  case "end":
166
159
  return _context2.stop();
167
160
  }
@@ -173,34 +166,26 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
173
166
  };
174
167
  }();
175
168
 
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
169
  if (!initialImageFile.current) return;
179
- setFileFromUrl(initialImageFile.current); // !initialImageFile.current
180
- // ? image && setFileFromUrl({ fileName: image.name, fileUrl: image.webkitRelativePath })
181
- // : setFileFromUrl(initialImageFile.current);
182
-
170
+ setFileFromUrl(initialImageFile.current);
183
171
  return function () {
184
172
  var _pendingRequestRef$cu;
185
173
 
186
174
  return (_pendingRequestRef$cu = pendingRequestRef.current) === null || _pendingRequestRef$cu === void 0 ? void 0 : _pendingRequestRef$cu.call(pendingRequestRef);
187
175
  };
188
- }, [image, initialFile]);
176
+ }, [image]);
189
177
  React.useEffect(function () {
190
178
  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
179
  setImageEditorSrc(src !== null && src !== void 0 ? src : '');
195
- }, [image, initialImage]);
196
- console.log('useEffect - setImageEditorSrc(src ?? ""):', imageEditorSrc);
180
+ }, [image, initialImage, isLoading]);
197
181
 
198
182
  var renderImageEditor = function renderImageEditor(defaultProps) {
199
- console.log('renderImageEditor - defaultProps:', defaultProps);
200
183
  return ImageEditor ? /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(ImageEditor, _rollupPluginBabelHelpers.objectSpread2({}, defaultProps))) : null;
201
184
  };
202
185
 
203
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(index['default'], {
186
+ return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
187
+ className: main_module['default'][css_classes['default'].imagePickerLoadingWrapper]
188
+ }, /*#__PURE__*/React__default['default'].createElement(index['default'], {
204
189
  id: id,
205
190
  name: name,
206
191
  onChange: handleControlChange,
@@ -217,7 +202,11 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
217
202
  type: "button"
218
203
  }, /*#__PURE__*/React__default['default'].createElement(icon_image['default'], null), t('Edit')),
219
204
  editedImageResult: imageEditorResult
220
- }), ImageEditor && /*#__PURE__*/React__default['default'].createElement(modal.ModalNew, {
205
+ }), isLoading && /*#__PURE__*/React__default['default'].createElement("div", {
206
+ className: main_module['default'][css_classes['default'].imagePickerLoadingWrapperContent]
207
+ }, /*#__PURE__*/React__default['default'].createElement(index$1['default'], null), /*#__PURE__*/React__default['default'].createElement("span", {
208
+ className: main_module['default'][css_classes['default'].imagePickerLoadingWrapperContentText]
209
+ }, t('Transfering file...')))), ImageEditor && /*#__PURE__*/React__default['default'].createElement(modal.ModalNew, {
221
210
  name: modalId,
222
211
  header: t('Edit image'),
223
212
  minWidth: "80vw"
@@ -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;"}
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
6
6
 
7
- var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n position: relative;\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 46px;\n left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n fill: #3c83ec;\n}\n.main-module_image-picker__wrapper-top-buttons__241RY {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n top: 1rem;\n right: 1rem;\n z-index: 10;\n}\n.main-module_image-picker__edit-button__3O-iq {\n display: flex;\n align-items: center;\n gap: 4px;\n background-color: #ffffff;\n background-image: none;\n border: 0;\n border-radius: 2px;\n padding: 0.5rem;\n font-size: 12px;\n color: #3c83ec;\n cursor: pointer;\n}\n.main-module_image-picker__label__1i_Fq {\n cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n display: none;\n}\n.main-module_image-picker__description__1v13N {\n padding: 2rem 0;\n text-align: center;\n color: #3c83ec;\n}\n.main-module_image-picker__supported-formats__1_R_X {\n font-size: 12px;\n color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n width: 1rem;\n height: auto;\n margin-bottom: 1rem;\n fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n display: flex;\n align-items: center;\n color: #3c83ec;\n cursor: pointer;\n background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n text-decoration: underline;\n}\n.main-module_image-picker__delete-button__21_kT .main-module_image-picker__delete-label__3v2ot {\n color: #3c83ec;\n}\n.main-module_image-picker__delete-button__21_kT svg {\n fill: #3c83ec;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n margin: 2rem 0 0.5rem;\n fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n fill: #3c83ec;\n margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n display: flex;\n justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU svg {\n fill: transparent;\n}\n.main-module_image-picker__image-preview__12pRu {\n max-width: 100%;\n max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n margin-top: 0.5rem;\n color: #e60c54;\n}\n";
7
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n position: relative;\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 46px;\n left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n fill: #3c83ec;\n}\n.main-module_image-picker__wrapper-top-buttons__241RY {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n top: 1rem;\n right: 1rem;\n z-index: 10;\n}\n.main-module_image-picker__edit-button__3O-iq {\n display: flex;\n align-items: center;\n gap: 4px;\n background-color: #ffffff;\n background-image: none;\n border: 0;\n border-radius: 2px;\n padding: 0.5rem;\n font-size: 12px;\n color: #3c83ec;\n cursor: pointer;\n}\n.main-module_image-picker__label__1i_Fq {\n cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n display: none;\n}\n.main-module_image-picker__description__1v13N {\n padding: 2rem 0;\n text-align: center;\n color: #3c83ec;\n}\n.main-module_image-picker__supported-formats__1_R_X {\n font-size: 12px;\n color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n width: 1rem;\n height: auto;\n margin-bottom: 1rem;\n fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n display: flex;\n align-items: center;\n color: #3c83ec;\n cursor: pointer;\n background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n text-decoration: underline;\n}\n.main-module_image-picker__delete-button__21_kT .main-module_image-picker__delete-label__3v2ot {\n color: #3c83ec;\n}\n.main-module_image-picker__delete-button__21_kT svg {\n fill: #3c83ec;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n margin: 2rem 0 0.5rem;\n fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n fill: #3c83ec;\n margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n display: flex;\n justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU svg {\n fill: transparent;\n}\n.main-module_image-picker__image-preview__12pRu {\n max-width: 100%;\n max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n margin-top: 0.5rem;\n color: #e60c54;\n}\n.main-module_image-picker__loading-wrapper__gBtlh {\n position: relative;\n}\n.main-module_image-picker__loading-wrapper-content__21jzx {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: #ffffff;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n}\n.main-module_image-picker__loading-wrapper-content-text__2-Fup {\n color: #5c657e;\n margin-top: 0.5rem;\n}\n";
8
8
  var styles = {
9
9
  "image-picker__wrapper": "main-module_image-picker__wrapper__2RK3f",
10
10
  "image-picker__wrapper-error": "main-module_image-picker__wrapper-error__kCZeA",
@@ -25,7 +25,10 @@ var styles = {
25
25
  "image-picker__selected-file-remove-wrapper": "main-module_image-picker__selected-file-remove-wrapper__2v4W2",
26
26
  "image-picker__image-preview-wrapper": "main-module_image-picker__image-preview-wrapper__1jPXU",
27
27
  "image-picker__image-preview": "main-module_image-picker__image-preview__12pRu",
28
- "image-picker__error-text": "main-module_image-picker__error-text__rXAvw"
28
+ "image-picker__error-text": "main-module_image-picker__error-text__rXAvw",
29
+ "image-picker__loading-wrapper": "main-module_image-picker__loading-wrapper__gBtlh",
30
+ "image-picker__loading-wrapper-content": "main-module_image-picker__loading-wrapper-content__21jzx",
31
+ "image-picker__loading-wrapper-content-text": "main-module_image-picker__loading-wrapper-content-text__2-Fup"
29
32
  };
30
33
  styleInject_es['default'](css_248z);
31
34
 
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,6BAA6B,8DAAkE;AAC/F;AACA;AACA;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,6BAA6B,8DAAkE;AAC/F;AACA;AACA;AACA;AACA;AACA;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,11 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
6
6
 
7
- var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n/** WithLoader Variables */\n.main-module_with-loader__X2lLa {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.main-module_with-loader__X2lLa :nth-child(2) {\n margin-top: 0.5rem;\n color: #5c657e;\n}\n.main-module_with-loader-wrapper__B1nI2 {\n padding: 2rem 0;\n}\n.main-module_with-loader-bordered__1pf_Y {\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n";
7
+ var css_248z = ".main-module_with-loader__X2lLa {\n text-align: center;\n}\n";
8
8
  var cssClasses = {
9
- "with-loader": "main-module_with-loader__X2lLa",
10
- "with-loader-wrapper": "main-module_with-loader-wrapper__B1nI2",
11
- "with-loader-bordered": "main-module_with-loader-bordered__1pf_Y"
9
+ "with-loader": "main-module_with-loader__X2lLa"
12
10
  };
13
11
  styleInject_es['default'](css_248z);
14
12
 
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,6BAA6B,8DAAkE;AAC/F;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,6BAA6B,8DAAkE;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -45,7 +45,6 @@ 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
47
  var index$L = require('./components/loader/index.js');
48
- var index$M = require('./components/with_loader/index.js');
49
48
  var index$P = require('./components/xhr_image_picker/index.js');
50
49
  var index$p = require('./components/controls/hoc/control_xhr_image_picker/index.js');
51
50
  var index$z = require('./components/table/index.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
 
@@ -140,7 +140,6 @@ exports.ImagePicker = index$F['default'];
140
140
  exports.useModalsContext = use_modals_context.useModalsContext;
141
141
  exports.ModalNew = modal.ModalNew;
142
142
  exports.Loader = index$L['default'];
143
- exports.WithLoader = index$M['default'];
144
143
  exports.XhrImagePicker = index$P['default'];
145
144
  exports.ControlXhrImagePicker = index$p['default'];
146
145
  exports.Table = index$z['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
@@ -20,5 +20,8 @@ declare const _default: {
20
20
  imagePickerSelectedFileNameWrapper: string;
21
21
  imagePickerSelectedFileRemoveWrapper: string;
22
22
  imagePickerSupportedFormats: string;
23
+ imagePickerLoadingWrapper: string;
24
+ imagePickerLoadingWrapperContent: string;
25
+ imagePickerLoadingWrapperContentText: string;
23
26
  };
24
27
  export default _default;
@@ -20,7 +20,10 @@ var CSS_CLASSES = {
20
20
  imagePickerSelectedFile: "".concat(imagePicker, "__selected-file"),
21
21
  imagePickerSelectedFileNameWrapper: "".concat(imagePicker, "__selected-file-name-wrapper"),
22
22
  imagePickerSelectedFileRemoveWrapper: "".concat(imagePicker, "__selected-file-remove-wrapper"),
23
- imagePickerSupportedFormats: "".concat(imagePicker, "__supported-formats")
23
+ imagePickerSupportedFormats: "".concat(imagePicker, "__supported-formats"),
24
+ imagePickerLoadingWrapper: "".concat(imagePicker, "__loading-wrapper"),
25
+ imagePickerLoadingWrapperContent: "".concat(imagePicker, "__loading-wrapper-content"),
26
+ imagePickerLoadingWrapperContentText: "".concat(imagePicker, "__loading-wrapper-content-text")
24
27
  };
25
28
 
26
29
  export default CSS_CLASSES;
@@ -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;"}
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;"}
@@ -16,7 +16,6 @@ export interface IImagePickerInput {
16
16
  onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
17
17
  allowedExtensions: TFilesExtension[];
18
18
  isDragOver: boolean;
19
- isLoaderVisible?: boolean;
20
19
  }
21
20
  export declare type TImageSize = {
22
21
  width: number;
@@ -1,3 +1 @@
1
1
  export declare const cssWithLoader = "with-loader";
2
- export declare const cssWithLoaderWrapper = "with-loader-wrapper";
3
- export declare const cssWithLoaderBordered = "with-loader-bordered";
@@ -1,5 +1,4 @@
1
1
  var cssWithLoader = 'with-loader';
2
- var cssWithLoaderWrapper = 'with-loader-wrapper';
3
2
 
4
- export { cssWithLoader, cssWithLoaderWrapper };
3
+ export { cssWithLoader };
5
4
  //# sourceMappingURL=css_classes.js.map
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;"}
@@ -1,25 +1,19 @@
1
1
  import React from 'react';
2
2
  import classnames from 'classnames';
3
- import cssClasses from '../../css/with-loader/main.module.less.js';
4
3
  import Loader from '../loader/index.js';
5
- import { cssWithLoaderWrapper, cssWithLoader } from './css_classes.js';
4
+ import cssClasses from '../../css/with-loader/main.module.less.js';
5
+ import { cssWithLoader } from './css_classes.js';
6
6
 
7
7
  var WithLoader = function WithLoader(_ref) {
8
8
  var isLoading = _ref.isLoading,
9
- textOnLoading = _ref.textOnLoading,
10
9
  children = _ref.children,
11
- size = _ref.size,
12
- customStyle = _ref.customStyle;
10
+ size = _ref.size;
13
11
  return isLoading ? /*#__PURE__*/React.createElement("div", {
14
- className: customStyle || ''
15
- }, /*#__PURE__*/React.createElement("div", {
16
- className: classnames(cssClasses[cssWithLoaderWrapper])
17
- }, /*#__PURE__*/React.createElement("div", {
18
12
  className: classnames(cssClasses[cssWithLoader]),
19
13
  "data-test-id": "loader"
20
14
  }, /*#__PURE__*/React.createElement(Loader, {
21
15
  size: size
22
- }), textOnLoading && /*#__PURE__*/React.createElement("span", null, textOnLoading)))) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
16
+ })) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
23
17
  };
24
18
 
25
19
  export default WithLoader;
@@ -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;"}
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;"}
@@ -1,10 +1,8 @@
1
+ /// <reference types="react" />
1
2
  import { ILoaderProps } from "../loader/types";
2
3
  import { TLoaderSize } from "../loader/types";
3
- import { ReactNode } from 'react';
4
4
  export interface IWithLoader extends ILoaderProps {
5
5
  size?: TLoaderSize;
6
6
  children?: React.ReactNode;
7
- isLoading?: boolean;
8
- textOnLoading?: ReactNode | string;
9
- customStyle?: string;
7
+ isLoading: boolean;
10
8
  }
@@ -1,4 +1,3 @@
1
1
  import '@auroraComponents/loader/types';
2
2
  import '@auroraComponents/loader/types';
3
- import 'react';
4
3
  //# sourceMappingURL=types.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/with_loader/types.ts"],"names":[],"mappings":"AAAA,OAA6B,gCAAgC,CAAC;AAC9D,OAA4B,gCAAgC,CAAC;AAC7D,OAA0B,OAAO,CAAC"}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/with_loader/types.ts"],"names":[],"mappings":"AAAA,OAA6B,gCAAgC,CAAC;AAC9D,OAA4B,gCAAgC,CAAC"}
@@ -2,7 +2,6 @@ import React, { useRef, useState, useEffect } from 'react';
2
2
  import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
3
3
  import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
4
4
  import { FILES_EXTENSIONS } from '../file_picker/constants.js';
5
- import 'classnames';
6
5
  import CSS_CLASSES from '../image_picker/css_classes.js';
7
6
  import IconImage from '../../assets/icon_image.js';
8
7
  import styles from '../../css/image_picker/main.module.less.js';
@@ -11,6 +10,7 @@ import { useModalsContext } from '../modal_new/hooks/use_modals_context.js';
11
10
  import { ModalNew } from '../modal_new/components/modal/modal.js';
12
11
  import { REQUEST_TYPES } from '../../../../star_core/build/esm/packages/star_core/src/features/http_requester/http_requester_contants.js';
13
12
  import { useHttpApi } from '../../hooks/use_http_api.js';
13
+ import Loader from '../loader/index.js';
14
14
 
15
15
  var XhrImagePicker = function XhrImagePicker(_ref) {
16
16
  var id = _ref.id,
@@ -73,50 +73,46 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
73
73
  while (1) switch (_context.prev = _context.next) {
74
74
  case 0:
75
75
  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
76
  fileList && setImage(fileList[0]);
80
77
  onChange === null || onChange === void 0 || onChange({
81
78
  fileList: fileList,
82
79
  fileAsDataUrl: fileAsDataUrl
83
80
  });
84
- console.log('handleControlChange - fileAsDataUrl:', fileAsDataUrl);
85
81
 
86
82
  if (!(!fileList || !fileList.length)) {
87
- _context.next = 9;
83
+ _context.next = 5;
88
84
  break;
89
85
  }
90
86
 
91
87
  return _context.abrupt("return");
92
88
 
93
- case 9:
94
- // setIsLoading(true);
89
+ case 5:
95
90
  if (pendingRequestRef.current) {
96
91
  pendingRequestRef.current();
97
92
  pendingRequestRef.current = undefined;
98
93
  }
99
94
 
95
+ setIsLoading(true);
100
96
  _httpApi$fetch = httpApi.fetch({
101
97
  url: url,
102
98
  method: REQUEST_TYPES.post,
103
99
  data: fileList[0]
104
100
  }), response = _httpApi$fetch.response, cancelRequest = _httpApi$fetch.cancelRequest;
105
101
  pendingRequestRef.current = cancelRequest;
106
- _context.next = 14;
107
- return response;
102
+ _context.next = 11;
103
+ return response.finally(function () {
104
+ return setIsLoading(false);
105
+ });
108
106
 
109
- case 14:
107
+ case 11:
110
108
  responseObject = _context.sent;
111
- // setIsLoading(false);
112
- console.log('handleControlChange - responseObject:', responseObject);
113
109
  onUploaded === null || onUploaded === void 0 || onUploaded({
114
110
  fileList: fileList,
115
111
  dataUrl: fileAsDataUrl,
116
112
  imageId: responseObject.data.imageId
117
113
  });
118
114
 
119
- case 17:
115
+ case 13:
120
116
  case "end":
121
117
  return _context.stop();
122
118
  }
@@ -130,7 +126,6 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
130
126
 
131
127
  useEffect(function () {
132
128
  initialImageFile.current = initialFile;
133
- console.log('useEffect - initialFile:', initialFile);
134
129
 
135
130
  var setFileFromUrl = /*#__PURE__*/function () {
136
131
  var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(fileData) {
@@ -138,22 +133,20 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
138
133
  return _regeneratorRuntime().wrap(function _callee2$(_context2) {
139
134
  while (1) switch (_context2.prev = _context2.next) {
140
135
  case 0:
141
- console.log('setFileFromUrl - fileData:', fileData);
142
- _context2.next = 3;
136
+ _context2.next = 2;
143
137
  return fetch(fileData.fileUrl);
144
138
 
145
- case 3:
139
+ case 2:
146
140
  response = _context2.sent;
147
- _context2.next = 6;
141
+ _context2.next = 5;
148
142
  return response.blob();
149
143
 
150
- case 6:
144
+ case 5:
151
145
  data = _context2.sent;
152
146
  file = new File([data], fileData.fileName);
153
147
  setInitialImage(file);
154
- console.log('setFileFromUrl - file:', file);
155
148
 
156
- case 10:
149
+ case 8:
157
150
  case "end":
158
151
  return _context2.stop();
159
152
  }
@@ -165,34 +158,26 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
165
158
  };
166
159
  }();
167
160
 
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
161
  if (!initialImageFile.current) return;
171
- setFileFromUrl(initialImageFile.current); // !initialImageFile.current
172
- // ? image && setFileFromUrl({ fileName: image.name, fileUrl: image.webkitRelativePath })
173
- // : setFileFromUrl(initialImageFile.current);
174
-
162
+ setFileFromUrl(initialImageFile.current);
175
163
  return function () {
176
164
  var _pendingRequestRef$cu;
177
165
 
178
166
  return (_pendingRequestRef$cu = pendingRequestRef.current) === null || _pendingRequestRef$cu === void 0 ? void 0 : _pendingRequestRef$cu.call(pendingRequestRef);
179
167
  };
180
- }, [image, initialFile]);
168
+ }, [image]);
181
169
  useEffect(function () {
182
170
  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
171
  setImageEditorSrc(src !== null && src !== void 0 ? src : '');
187
- }, [image, initialImage]);
188
- console.log('useEffect - setImageEditorSrc(src ?? ""):', imageEditorSrc);
172
+ }, [image, initialImage, isLoading]);
189
173
 
190
174
  var renderImageEditor = function renderImageEditor(defaultProps) {
191
- console.log('renderImageEditor - defaultProps:', defaultProps);
192
175
  return ImageEditor ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ImageEditor, _objectSpread2({}, defaultProps))) : null;
193
176
  };
194
177
 
195
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImagePicker, {
178
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
179
+ className: styles[CSS_CLASSES.imagePickerLoadingWrapper]
180
+ }, /*#__PURE__*/React.createElement(ImagePicker, {
196
181
  id: id,
197
182
  name: name,
198
183
  onChange: handleControlChange,
@@ -209,7 +194,11 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
209
194
  type: "button"
210
195
  }, /*#__PURE__*/React.createElement(IconImage, null), t('Edit')),
211
196
  editedImageResult: imageEditorResult
212
- }), ImageEditor && /*#__PURE__*/React.createElement(ModalNew, {
197
+ }), isLoading && /*#__PURE__*/React.createElement("div", {
198
+ className: styles[CSS_CLASSES.imagePickerLoadingWrapperContent]
199
+ }, /*#__PURE__*/React.createElement(Loader, null), /*#__PURE__*/React.createElement("span", {
200
+ className: styles[CSS_CLASSES.imagePickerLoadingWrapperContentText]
201
+ }, t('Transfering file...')))), ImageEditor && /*#__PURE__*/React.createElement(ModalNew, {
213
202
  name: modalId,
214
203
  header: t('Edit image'),
215
204
  minWidth: "80vw"
@@ -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;"}
@@ -1,6 +1,6 @@
1
1
  import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n position: relative;\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 46px;\n left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n fill: #3c83ec;\n}\n.main-module_image-picker__wrapper-top-buttons__241RY {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n top: 1rem;\n right: 1rem;\n z-index: 10;\n}\n.main-module_image-picker__edit-button__3O-iq {\n display: flex;\n align-items: center;\n gap: 4px;\n background-color: #ffffff;\n background-image: none;\n border: 0;\n border-radius: 2px;\n padding: 0.5rem;\n font-size: 12px;\n color: #3c83ec;\n cursor: pointer;\n}\n.main-module_image-picker__label__1i_Fq {\n cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n display: none;\n}\n.main-module_image-picker__description__1v13N {\n padding: 2rem 0;\n text-align: center;\n color: #3c83ec;\n}\n.main-module_image-picker__supported-formats__1_R_X {\n font-size: 12px;\n color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n width: 1rem;\n height: auto;\n margin-bottom: 1rem;\n fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n display: flex;\n align-items: center;\n color: #3c83ec;\n cursor: pointer;\n background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n text-decoration: underline;\n}\n.main-module_image-picker__delete-button__21_kT .main-module_image-picker__delete-label__3v2ot {\n color: #3c83ec;\n}\n.main-module_image-picker__delete-button__21_kT svg {\n fill: #3c83ec;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n margin: 2rem 0 0.5rem;\n fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n fill: #3c83ec;\n margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n display: flex;\n justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU svg {\n fill: transparent;\n}\n.main-module_image-picker__image-preview__12pRu {\n max-width: 100%;\n max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n margin-top: 0.5rem;\n color: #e60c54;\n}\n";
3
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n position: relative;\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 46px;\n left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n fill: #3c83ec;\n}\n.main-module_image-picker__wrapper-top-buttons__241RY {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n top: 1rem;\n right: 1rem;\n z-index: 10;\n}\n.main-module_image-picker__edit-button__3O-iq {\n display: flex;\n align-items: center;\n gap: 4px;\n background-color: #ffffff;\n background-image: none;\n border: 0;\n border-radius: 2px;\n padding: 0.5rem;\n font-size: 12px;\n color: #3c83ec;\n cursor: pointer;\n}\n.main-module_image-picker__label__1i_Fq {\n cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n display: none;\n}\n.main-module_image-picker__description__1v13N {\n padding: 2rem 0;\n text-align: center;\n color: #3c83ec;\n}\n.main-module_image-picker__supported-formats__1_R_X {\n font-size: 12px;\n color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n width: 1rem;\n height: auto;\n margin-bottom: 1rem;\n fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n display: flex;\n align-items: center;\n color: #3c83ec;\n cursor: pointer;\n background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n text-decoration: underline;\n}\n.main-module_image-picker__delete-button__21_kT .main-module_image-picker__delete-label__3v2ot {\n color: #3c83ec;\n}\n.main-module_image-picker__delete-button__21_kT svg {\n fill: #3c83ec;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n margin: 2rem 0 0.5rem;\n fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n fill: #3c83ec;\n margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n display: flex;\n justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU svg {\n fill: transparent;\n}\n.main-module_image-picker__image-preview__12pRu {\n max-width: 100%;\n max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n margin-top: 0.5rem;\n color: #e60c54;\n}\n.main-module_image-picker__loading-wrapper__gBtlh {\n position: relative;\n}\n.main-module_image-picker__loading-wrapper-content__21jzx {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: #ffffff;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n}\n.main-module_image-picker__loading-wrapper-content-text__2-Fup {\n color: #5c657e;\n margin-top: 0.5rem;\n}\n";
4
4
  var styles = {
5
5
  "image-picker__wrapper": "main-module_image-picker__wrapper__2RK3f",
6
6
  "image-picker__wrapper-error": "main-module_image-picker__wrapper-error__kCZeA",
@@ -21,7 +21,10 @@ var styles = {
21
21
  "image-picker__selected-file-remove-wrapper": "main-module_image-picker__selected-file-remove-wrapper__2v4W2",
22
22
  "image-picker__image-preview-wrapper": "main-module_image-picker__image-preview-wrapper__1jPXU",
23
23
  "image-picker__image-preview": "main-module_image-picker__image-preview__12pRu",
24
- "image-picker__error-text": "main-module_image-picker__error-text__rXAvw"
24
+ "image-picker__error-text": "main-module_image-picker__error-text__rXAvw",
25
+ "image-picker__loading-wrapper": "main-module_image-picker__loading-wrapper__gBtlh",
26
+ "image-picker__loading-wrapper-content": "main-module_image-picker__loading-wrapper-content__21jzx",
27
+ "image-picker__loading-wrapper-content-text": "main-module_image-picker__loading-wrapper-content-text__2-Fup"
25
28
  };
26
29
  styleInject(css_248z);
27
30
 
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,8DAAkE;AAC1F;AACA;AACA;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,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;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,10 +1,8 @@
1
1
  import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n/** WithLoader Variables */\n.main-module_with-loader__X2lLa {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.main-module_with-loader__X2lLa :nth-child(2) {\n margin-top: 0.5rem;\n color: #5c657e;\n}\n.main-module_with-loader-wrapper__B1nI2 {\n padding: 2rem 0;\n}\n.main-module_with-loader-bordered__1pf_Y {\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n";
3
+ var css_248z = ".main-module_with-loader__X2lLa {\n text-align: center;\n}\n";
4
4
  var cssClasses = {
5
- "with-loader": "main-module_with-loader__X2lLa",
6
- "with-loader-wrapper": "main-module_with-loader-wrapper__B1nI2",
7
- "with-loader-bordered": "main-module_with-loader-bordered__1pf_Y"
5
+ "with-loader": "main-module_with-loader__X2lLa"
8
6
  };
9
7
  styleInject(css_248z);
10
8
 
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -41,7 +41,6 @@ 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
43
  export { default as Loader } from './components/loader/index.js';
44
- export { default as WithLoader } from './components/with_loader/index.js';
45
44
  export { default as XhrImagePicker } from './components/xhr_image_picker/index.js';
46
45
  export { default as ControlXhrImagePicker } from './components/controls/hoc/control_xhr_image_picker/index.js';
47
46
  export { default as Table } from './components/table/index.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-10",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",