@dreamcommerce/aurora 2.18.0-3 → 2.18.0-4

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