@dreamcommerce/aurora 2.18.0-4 → 2.18.0-5

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 (9) hide show
  1. package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js +0 -46
  2. package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
  3. package/build/cjs/packages/aurora/src/components/image_picker/index.js +70 -41
  4. package/build/cjs/packages/aurora/src/components/image_picker/index.js.map +1 -1
  5. package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js +1 -47
  6. package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
  7. package/build/esm/packages/aurora/src/components/image_picker/index.js +72 -43
  8. package/build/esm/packages/aurora/src/components/image_picker/index.js.map +1 -1
  9. package/package.json +1 -1
package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js CHANGED
@@ -46,12 +46,6 @@ var useFilePicker = function useFilePicker(_ref) {
46
46
  setPreview = _useState12[1];
47
47
 
48
48
  var reader = React.useRef(new FileReader());
49
-
50
- var _useState13 = React.useState(undefined),
51
- _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
52
- imageSize = _useState14[0],
53
- setImageSize = _useState14[1];
54
-
55
49
  React.useEffect(function () {
56
50
  reader.current && getDataUrlFromFile(reader.current.result);
57
51
  reader.current.addEventListener('load', function () {
@@ -65,7 +59,6 @@ var useFilePicker = function useFilePicker(_ref) {
65
59
  }, []);
66
60
  React.useEffect(function () {
67
61
  setFile(initialFile);
68
- if (initialFile !== null && initialFile !== void 0 && initialFile.fileUrl) setImageSizeBasedOnUrl(initialFile.fileUrl);
69
62
  }, [initialFile]);
70
63
  React.useEffect(function () {
71
64
  initialErrors && setErrors(initialErrors);
@@ -77,41 +70,6 @@ var useFilePicker = function useFilePicker(_ref) {
77
70
  }));
78
71
  }, [fileAsDataUrl]);
79
72
 
80
- var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
81
- createImageFromUrl(fileUrl).then(function (image) {
82
- setImageSize({
83
- width: image.naturalWidth,
84
- height: image.naturalHeight
85
- });
86
- });
87
- };
88
-
89
- var createImageFromUrl = /*#__PURE__*/function () {
90
- var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(url) {
91
- var img;
92
- return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
93
- while (1) switch (_context.prev = _context.next) {
94
- case 0:
95
- img = new Image();
96
- img.src = url;
97
- _context.next = 4;
98
- return img.decode();
99
-
100
- case 4:
101
- return _context.abrupt("return", img);
102
-
103
- case 5:
104
- case "end":
105
- return _context.stop();
106
- }
107
- }, _callee);
108
- }));
109
-
110
- return function createImageFromUrl(_x) {
111
- return _ref2.apply(this, arguments);
112
- };
113
- }();
114
-
115
73
  var onDropFile = function onDropFile(event) {
116
74
  setErrors([]);
117
75
  event.stopPropagation();
@@ -160,10 +118,8 @@ var useFilePicker = function useFilePicker(_ref) {
160
118
  if (isValid) onChange === null || onChange === void 0 || onChange({
161
119
  fileList: files
162
120
  });
163
- setImageSizeBasedOnUrl(URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0]));
164
121
  } else {
165
122
  setFile(undefined);
166
- setImageSize(undefined);
167
123
  onChange === null || onChange === void 0 || onChange({
168
124
  fileList: files
169
125
  });
@@ -201,7 +157,6 @@ var useFilePicker = function useFilePicker(_ref) {
201
157
  fileList: null,
202
158
  fileAsDataUrl: null
203
159
  });
204
- setImageSize(undefined);
205
160
  };
206
161
 
207
162
  var onPreviewError = function onPreviewError() {
@@ -209,7 +164,6 @@ var useFilePicker = function useFilePicker(_ref) {
209
164
  };
210
165
 
211
166
  return {
212
- imageSize: imageSize,
213
167
  onDropFile: onDropFile,
214
168
  onFileChange: onFileChange,
215
169
  onDragOver: onDragOver,
package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js.map CHANGED
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}
package/build/cjs/packages/aurora/src/components/image_picker/index.js CHANGED
@@ -43,15 +43,24 @@ var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
43
43
 
44
44
  var inputRef = /*#__PURE__*/React.createRef();
45
45
 
46
+ var handleOnChange = function handleOnChange(ev) {
47
+ var _ev$fileList;
48
+
49
+ onChange === null || onChange === void 0 || onChange(ev);
50
+
51
+ if ((_ev$fileList = ev.fileList) !== null && _ev$fileList !== void 0 && _ev$fileList.length) {
52
+ setImageSizeBasedOnUrl(URL.createObjectURL(ev.fileList[0]));
53
+ }
54
+ };
55
+
46
56
  var _useFilePicker = use_file_picker.useFilePicker({
47
57
  initialFile: initialFile,
48
- onChange: onChange,
58
+ onChange: handleOnChange,
49
59
  allowedExtensions: allowedExtensions,
50
60
  initialErrors: initialErrors,
51
61
  onError: onError,
52
62
  inputRef: inputRef
53
63
  }),
54
- imageSize = _useFilePicker.imageSize,
55
64
  onDropFile = _useFilePicker.onDropFile,
56
65
  onFileChange = _useFilePicker.onFileChange,
57
66
  onDragOver = _useFilePicker.onDragOver,
@@ -64,53 +73,81 @@ var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
64
73
  isPreview = _useFilePicker.isPreview,
65
74
  isDragOver = _useFilePicker.isDragOver;
66
75
 
76
+ var _useState = React.useState(undefined),
77
+ _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
78
+ imageSize = _useState2[0],
79
+ setImageSize = _useState2[1];
80
+
67
81
  var acceptFiles = utils.getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
68
82
  var imagePickerClassName = classnames__default['default'](main_module['default'][css_classes['default'].imagePicker], className && className);
69
83
  var imagePickerWrapperClassName = classnames__default['default'](main_module['default'][css_classes['default'].imagePickerWrapper], file && main_module['default'][css_classes['default'].imagePickerWrapperHasFile], _rollupPluginBabelHelpers.defineProperty({}, main_module['default'][css_classes['default'].imagePickerWrapperError], errors.length));
70
84
  React.useEffect(function () {
71
- if (imageSize) onImageSizeUpdated === null || onImageSizeUpdated === void 0 || onImageSizeUpdated(imageSize);
72
- }, [imageSize]); // useEffect(() => {
73
- // initialFile && setImageSizeBasedOnUrl(initialFile?.fileUrl);
74
- // }, [initialFile]);
75
-
85
+ onImageSizeUpdated === null || onImageSizeUpdated === void 0 || onImageSizeUpdated(imageSize);
86
+ }, [imageSize]);
87
+ React.useEffect(function () {
88
+ initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
89
+ }, [initialFile]);
76
90
  React.useEffect(function () {
77
91
  if (!editedImageResult) return;
78
92
  var fileList = createFileList(editedImageResult);
79
- changeFile(fileList); // updateFile(fileList);
93
+ changeFile(fileList);
80
94
  }, [editedImageResult]);
81
95
 
82
96
  var createFileList = function createFileList(file) {
83
97
  var fileArray = [];
84
98
  fileArray.push(file);
85
99
  return fileArray;
86
- }; // const setImageSizeBasedOnUrl = (fileUrl: string) => {
87
- // createImageFromUrl(fileUrl).then((image) => {
88
- // setImageSize({ width: image.naturalWidth, height: image.naturalHeight });
89
- // });
90
- // };
91
- //
92
- // const createImageFromUrl = async (url: string) => {
93
- // const img = new Image();
94
- // img.src = url;
95
- // await img.decode();
96
- // return img;
97
- // };
100
+ };
101
+
102
+ var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
103
+ createImageFromUrl(fileUrl).then(function (image) {
104
+ setImageSize({
105
+ width: image.naturalWidth,
106
+ height: image.naturalHeight
107
+ });
108
+ });
109
+ };
110
+
111
+ var createImageFromUrl = /*#__PURE__*/function () {
112
+ var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(url) {
113
+ var img;
114
+ return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
115
+ while (1) switch (_context.prev = _context.next) {
116
+ case 0:
117
+ img = new Image();
118
+ img.src = url;
119
+ _context.next = 4;
120
+ return img.decode();
121
+
122
+ case 4:
123
+ return _context.abrupt("return", img);
124
+
125
+ case 5:
126
+ case "end":
127
+ return _context.stop();
128
+ }
129
+ }, _callee);
130
+ }));
98
131
 
132
+ return function createImageFromUrl(_x) {
133
+ return _ref2.apply(this, arguments);
134
+ };
135
+ }();
99
136
 
100
137
  var useStyles = reactJss_esm.createUseStyles({
101
138
  imagePickerWrapper: {
102
- border: function border(_ref2) {
103
- var isDragOver = _ref2.isDragOver;
139
+ border: function border(_ref3) {
140
+ var isDragOver = _ref3.isDragOver;
104
141
  return isDragOver ? '1px solid #135cc8' : '';
105
142
  },
106
- backgroundColor: function backgroundColor(_ref3) {
107
- var isDragOver = _ref3.isDragOver;
143
+ backgroundColor: function backgroundColor(_ref4) {
144
+ var isDragOver = _ref4.isDragOver;
108
145
  return isDragOver ? 'rgba(208, 230, 255, 0.5)' : '';
109
146
  },
110
147
  '& svg': {
111
148
  // @ts-ignore
112
- fill: function fill(_ref4) {
113
- var isDragOver = _ref4.isDragOver;
149
+ fill: function fill(_ref5) {
150
+ var isDragOver = _ref5.isDragOver;
114
151
  return isDragOver ? '#3c83ec' : '';
115
152
  }
116
153
  }
@@ -118,20 +155,12 @@ var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
118
155
  });
119
156
  var dragOverStyles = useStyles({
120
157
  isDragOver: isDragOver
121
- }); // const handleOnFileDelete = () => {
122
- // onFileDelete();
123
- // // setImageSize(undefined);
124
- // };
125
- // const handleOnFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
126
- // onFileChange(event);
127
- // updateFile(event.target.files);
128
- // };
129
- //
130
- // const updateFile = (files: FileList | null) => {
131
- // if (files?.length) {
132
- // setImageSizeBasedOnUrl(URL.createObjectURL(files?.[0]));
133
- // }
134
- // };
158
+ });
159
+
160
+ var handleOnFileDelete = function handleOnFileDelete() {
161
+ onFileDelete();
162
+ setImageSize(undefined);
163
+ };
135
164
 
136
165
  return /*#__PURE__*/React__default['default'].createElement("div", {
137
166
  className: imagePickerClassName
@@ -147,7 +176,7 @@ var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
147
176
  imageSize: imageSize,
148
177
  file: file,
149
178
  isValid: !(errors !== null && errors !== void 0 && errors.length),
150
- onFileDelete: onFileDelete
179
+ onFileDelete: handleOnFileDelete
151
180
  })) : /*#__PURE__*/React__default['default'].createElement("div", null, t('No preview'))), /*#__PURE__*/React__default['default'].createElement(image_input['default'], {
152
181
  onDragLeave: onDragLeave,
153
182
  onDragOver: onDragOver,
package/build/cjs/packages/aurora/src/components/image_picker/index.js.map CHANGED
@@ -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;"}
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;"}
package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useState, useRef, useEffect } from 'react';
2
2
  import i18n from '../../i18n.js';
3
- import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, toConsumableArray as _toConsumableArray, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
3
+ import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
4
4
  import { MIME_TYPE_TO_FILE_EXTENSIONS, FILE_PICKER_ERROR } from './constants.js';
5
5
 
6
6
  var useFilePicker = function useFilePicker(_ref) {
@@ -42,12 +42,6 @@ var useFilePicker = function useFilePicker(_ref) {
42
42
  setPreview = _useState12[1];
43
43
 
44
44
  var reader = useRef(new FileReader());
45
-
46
- var _useState13 = useState(undefined),
47
- _useState14 = _slicedToArray(_useState13, 2),
48
- imageSize = _useState14[0],
49
- setImageSize = _useState14[1];
50
-
51
45
  useEffect(function () {
52
46
  reader.current && getDataUrlFromFile(reader.current.result);
53
47
  reader.current.addEventListener('load', function () {
@@ -61,7 +55,6 @@ var useFilePicker = function useFilePicker(_ref) {
61
55
  }, []);
62
56
  useEffect(function () {
63
57
  setFile(initialFile);
64
- if (initialFile !== null && initialFile !== void 0 && initialFile.fileUrl) setImageSizeBasedOnUrl(initialFile.fileUrl);
65
58
  }, [initialFile]);
66
59
  useEffect(function () {
67
60
  initialErrors && setErrors(initialErrors);
@@ -73,41 +66,6 @@ var useFilePicker = function useFilePicker(_ref) {
73
66
  }));
74
67
  }, [fileAsDataUrl]);
75
68
 
76
- var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
77
- createImageFromUrl(fileUrl).then(function (image) {
78
- setImageSize({
79
- width: image.naturalWidth,
80
- height: image.naturalHeight
81
- });
82
- });
83
- };
84
-
85
- var createImageFromUrl = /*#__PURE__*/function () {
86
- var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(url) {
87
- var img;
88
- return _regeneratorRuntime().wrap(function _callee$(_context) {
89
- while (1) switch (_context.prev = _context.next) {
90
- case 0:
91
- img = new Image();
92
- img.src = url;
93
- _context.next = 4;
94
- return img.decode();
95
-
96
- case 4:
97
- return _context.abrupt("return", img);
98
-
99
- case 5:
100
- case "end":
101
- return _context.stop();
102
- }
103
- }, _callee);
104
- }));
105
-
106
- return function createImageFromUrl(_x) {
107
- return _ref2.apply(this, arguments);
108
- };
109
- }();
110
-
111
69
  var onDropFile = function onDropFile(event) {
112
70
  setErrors([]);
113
71
  event.stopPropagation();
@@ -156,10 +114,8 @@ var useFilePicker = function useFilePicker(_ref) {
156
114
  if (isValid) onChange === null || onChange === void 0 || onChange({
157
115
  fileList: files
158
116
  });
159
- setImageSizeBasedOnUrl(URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0]));
160
117
  } else {
161
118
  setFile(undefined);
162
- setImageSize(undefined);
163
119
  onChange === null || onChange === void 0 || onChange({
164
120
  fileList: files
165
121
  });
@@ -197,7 +153,6 @@ var useFilePicker = function useFilePicker(_ref) {
197
153
  fileList: null,
198
154
  fileAsDataUrl: null
199
155
  });
200
- setImageSize(undefined);
201
156
  };
202
157
 
203
158
  var onPreviewError = function onPreviewError() {
@@ -205,7 +160,6 @@ var useFilePicker = function useFilePicker(_ref) {
205
160
  };
206
161
 
207
162
  return {
208
- imageSize: imageSize,
209
163
  onDropFile: onDropFile,
210
164
  onFileChange: onFileChange,
211
165
  onDragOver: onDragOver,
package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js.map CHANGED
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}
package/build/esm/packages/aurora/src/components/image_picker/index.js CHANGED
@@ -1,6 +1,6 @@
1
- import React, { memo, useEffect, createRef } from 'react';
1
+ import React, { memo, useState, useEffect, createRef } from 'react';
2
2
  import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
3
- import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
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';
5
5
  import classnames from 'classnames';
6
6
  import { createUseStyles } from '../../../../../external/react-jss/dist/react-jss.esm.js';
@@ -34,15 +34,24 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
34
34
 
35
35
  var inputRef = /*#__PURE__*/createRef();
36
36
 
37
+ var handleOnChange = function handleOnChange(ev) {
38
+ var _ev$fileList;
39
+
40
+ onChange === null || onChange === void 0 || onChange(ev);
41
+
42
+ if ((_ev$fileList = ev.fileList) !== null && _ev$fileList !== void 0 && _ev$fileList.length) {
43
+ setImageSizeBasedOnUrl(URL.createObjectURL(ev.fileList[0]));
44
+ }
45
+ };
46
+
37
47
  var _useFilePicker = useFilePicker({
38
48
  initialFile: initialFile,
39
- onChange: onChange,
49
+ onChange: handleOnChange,
40
50
  allowedExtensions: allowedExtensions,
41
51
  initialErrors: initialErrors,
42
52
  onError: onError,
43
53
  inputRef: inputRef
44
54
  }),
45
- imageSize = _useFilePicker.imageSize,
46
55
  onDropFile = _useFilePicker.onDropFile,
47
56
  onFileChange = _useFilePicker.onFileChange,
48
57
  onDragOver = _useFilePicker.onDragOver,
@@ -55,53 +64,81 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
55
64
  isPreview = _useFilePicker.isPreview,
56
65
  isDragOver = _useFilePicker.isDragOver;
57
66
 
67
+ var _useState = useState(undefined),
68
+ _useState2 = _slicedToArray(_useState, 2),
69
+ imageSize = _useState2[0],
70
+ setImageSize = _useState2[1];
71
+
58
72
  var acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
59
73
  var imagePickerClassName = classnames(styles[CSS_CLASSES.imagePicker], className && className);
60
74
  var imagePickerWrapperClassName = classnames(styles[CSS_CLASSES.imagePickerWrapper], file && styles[CSS_CLASSES.imagePickerWrapperHasFile], _defineProperty({}, styles[CSS_CLASSES.imagePickerWrapperError], errors.length));
61
75
  useEffect(function () {
62
- if (imageSize) onImageSizeUpdated === null || onImageSizeUpdated === void 0 || onImageSizeUpdated(imageSize);
63
- }, [imageSize]); // useEffect(() => {
64
- // initialFile && setImageSizeBasedOnUrl(initialFile?.fileUrl);
65
- // }, [initialFile]);
66
-
76
+ onImageSizeUpdated === null || onImageSizeUpdated === void 0 || onImageSizeUpdated(imageSize);
77
+ }, [imageSize]);
78
+ useEffect(function () {
79
+ initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
80
+ }, [initialFile]);
67
81
  useEffect(function () {
68
82
  if (!editedImageResult) return;
69
83
  var fileList = createFileList(editedImageResult);
70
- changeFile(fileList); // updateFile(fileList);
84
+ changeFile(fileList);
71
85
  }, [editedImageResult]);
72
86
 
73
87
  var createFileList = function createFileList(file) {
74
88
  var fileArray = [];
75
89
  fileArray.push(file);
76
90
  return fileArray;
77
- }; // const setImageSizeBasedOnUrl = (fileUrl: string) => {
78
- // createImageFromUrl(fileUrl).then((image) => {
79
- // setImageSize({ width: image.naturalWidth, height: image.naturalHeight });
80
- // });
81
- // };
82
- //
83
- // const createImageFromUrl = async (url: string) => {
84
- // const img = new Image();
85
- // img.src = url;
86
- // await img.decode();
87
- // return img;
88
- // };
91
+ };
92
+
93
+ var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
94
+ createImageFromUrl(fileUrl).then(function (image) {
95
+ setImageSize({
96
+ width: image.naturalWidth,
97
+ height: image.naturalHeight
98
+ });
99
+ });
100
+ };
89
101
 
102
+ var createImageFromUrl = /*#__PURE__*/function () {
103
+ var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(url) {
104
+ var img;
105
+ return _regeneratorRuntime().wrap(function _callee$(_context) {
106
+ while (1) switch (_context.prev = _context.next) {
107
+ case 0:
108
+ img = new Image();
109
+ img.src = url;
110
+ _context.next = 4;
111
+ return img.decode();
112
+
113
+ case 4:
114
+ return _context.abrupt("return", img);
115
+
116
+ case 5:
117
+ case "end":
118
+ return _context.stop();
119
+ }
120
+ }, _callee);
121
+ }));
122
+
123
+ return function createImageFromUrl(_x) {
124
+ return _ref2.apply(this, arguments);
125
+ };
126
+ }();
90
127
 
91
128
  var useStyles = createUseStyles({
92
129
  imagePickerWrapper: {
93
- border: function border(_ref2) {
94
- var isDragOver = _ref2.isDragOver;
130
+ border: function border(_ref3) {
131
+ var isDragOver = _ref3.isDragOver;
95
132
  return isDragOver ? '1px solid #135cc8' : '';
96
133
  },
97
- backgroundColor: function backgroundColor(_ref3) {
98
- var isDragOver = _ref3.isDragOver;
134
+ backgroundColor: function backgroundColor(_ref4) {
135
+ var isDragOver = _ref4.isDragOver;
99
136
  return isDragOver ? 'rgba(208, 230, 255, 0.5)' : '';
100
137
  },
101
138
  '& svg': {
102
139
  // @ts-ignore
103
- fill: function fill(_ref4) {
104
- var isDragOver = _ref4.isDragOver;
140
+ fill: function fill(_ref5) {
141
+ var isDragOver = _ref5.isDragOver;
105
142
  return isDragOver ? '#3c83ec' : '';
106
143
  }
107
144
  }
@@ -109,20 +146,12 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
109
146
  });
110
147
  var dragOverStyles = useStyles({
111
148
  isDragOver: isDragOver
112
- }); // const handleOnFileDelete = () => {
113
- // onFileDelete();
114
- // // setImageSize(undefined);
115
- // };
116
- // const handleOnFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
117
- // onFileChange(event);
118
- // updateFile(event.target.files);
119
- // };
120
- //
121
- // const updateFile = (files: FileList | null) => {
122
- // if (files?.length) {
123
- // setImageSizeBasedOnUrl(URL.createObjectURL(files?.[0]));
124
- // }
125
- // };
149
+ });
150
+
151
+ var handleOnFileDelete = function handleOnFileDelete() {
152
+ onFileDelete();
153
+ setImageSize(undefined);
154
+ };
126
155
 
127
156
  return /*#__PURE__*/React.createElement("div", {
128
157
  className: imagePickerClassName
@@ -138,7 +167,7 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
138
167
  imageSize: imageSize,
139
168
  file: file,
140
169
  isValid: !(errors !== null && errors !== void 0 && errors.length),
141
- onFileDelete: onFileDelete
170
+ onFileDelete: handleOnFileDelete
142
171
  })) : /*#__PURE__*/React.createElement("div", null, t('No preview'))), /*#__PURE__*/React.createElement(ImageInput, {
143
172
  onDragLeave: onDragLeave,
144
173
  onDragOver: onDragOver,
package/build/esm/packages/aurora/src/components/image_picker/index.js.map CHANGED
@@ -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;"}
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;"}
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.18.0-4",
5
+ "version": "2.18.0-5",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",