@dreamcommerce/aurora 2.8.3 → 2.8.4-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 (18) hide show
  1. package/build/cjs/packages/aurora/src/components/dropdown/components/search.js +5 -1
  2. package/build/cjs/packages/aurora/src/components/dropdown/components/search.js.map +1 -1
  3. package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js +5 -2
  4. package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
  5. package/build/cjs/packages/aurora/src/components/image_picker/index.js +30 -9
  6. package/build/cjs/packages/aurora/src/components/image_picker/index.js.map +1 -1
  7. package/build/esm/packages/aurora/src/components/dropdown/components/search.js +6 -2
  8. package/build/esm/packages/aurora/src/components/dropdown/components/search.js.map +1 -1
  9. package/build/esm/packages/aurora/src/components/file_picker/types.d.ts +5 -1
  10. package/build/esm/packages/aurora/src/components/file_picker/types.js +1 -1
  11. package/build/esm/packages/aurora/src/components/file_picker/types.js.map +1 -1
  12. package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js +5 -2
  13. package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
  14. package/build/esm/packages/aurora/src/components/image_picker/components/image_preview.d.ts +1 -1
  15. package/build/esm/packages/aurora/src/components/image_picker/index.d.ts +1 -1
  16. package/build/esm/packages/aurora/src/components/image_picker/index.js +30 -9
  17. package/build/esm/packages/aurora/src/components/image_picker/index.js.map +1 -1
  18. package/package.json +1 -1
package/build/cjs/packages/aurora/src/components/dropdown/components/search.js CHANGED
@@ -27,8 +27,12 @@ onKeyUp }) => {
27
27
  const { toggleDropdown, isOpen } = index.useDropdownContext();
28
28
  const ref = React.useRef(null);
29
29
  use_keyboard_open_close.useKeyboardOpenClose(toggleDropdown, isOpen, ref);
30
+ const [value, setValue] = React.useState('');
31
+ const handleOnChange = (event) => {
32
+ setValue(event.target.value);
33
+ };
30
34
  return (React__default['default'].createElement("aside", { className: main_module['default'][css_classes.cssDropdownSearch], ref: ref },
31
- React__default['default'].createElement(input['default'], { placeholder: "Szukaj", padding: "small", onKeyUp: onKeyUp, autoFocus: true })));
35
+ React__default['default'].createElement(input['default'], { placeholder: "Szukaj", padding: "small", onKeyUp: onKeyUp, onChange: handleOnChange, value: value, autoFocus: true })));
32
36
  };
33
37
 
34
38
  exports.default = Search;
package/build/cjs/packages/aurora/src/components/dropdown/components/search.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;"}
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;"}
package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js CHANGED
@@ -8,12 +8,15 @@ var constants = require('./constants.js');
8
8
 
9
9
  const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors, onError }) => {
10
10
  const [file, setFile] = React.useState(initialFile);
11
- const [errors, setErrors] = React.useState(initialErrors !== null && initialErrors !== void 0 ? initialErrors : []);
11
+ const [errors, setErrors] = React.useState([]);
12
12
  const [isDragOver, setDragOver] = React.useState(false);
13
13
  const [isPreview, setPreview] = React.useState(true);
14
14
  React.useEffect(() => {
15
15
  setFile(initialFile);
16
- }, [initialFile]);
16
+ }, []);
17
+ React.useEffect(() => {
18
+ initialErrors && setErrors(initialErrors);
19
+ }, [initialErrors]);
17
20
  const onDropFile = (event) => {
18
21
  setErrors([]);
19
22
  event.stopPropagation();
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;"}
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;"}
package/build/cjs/packages/aurora/src/components/image_picker/index.js CHANGED
@@ -31,8 +31,8 @@ const ImagePicker = React.memo(({ id, onChange, onError, errors: initialErrors,
31
31
  ], initialFile, name, className = '', onImageSizeUpdated }) => {
32
32
  const [t] = useTranslation.useTranslation();
33
33
  const inputRef = React.createRef();
34
- const [imageSize, setImageSize] = React.useState(undefined);
35
34
  const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver } = use_file_picker.useFilePicker({ initialFile, onChange, allowedExtensions, initialErrors, onError, inputRef });
35
+ const [imageSize, setImageSize] = React.useState(undefined);
36
36
  const acceptFiles = utils.getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
37
37
  const imagePickerClassName = classnames__default['default'](main_module['default'][css_classes['default'].imagePicker], className && className);
38
38
  const imagePickerWrapperClassName = classnames__default['default'](main_module['default'][css_classes['default'].imagePickerWrapper], file && main_module['default'][css_classes['default'].imagePickerWrapperHasFile], {
@@ -41,6 +41,20 @@ const ImagePicker = React.memo(({ id, onChange, onError, errors: initialErrors,
41
41
  React.useEffect(() => {
42
42
  onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(imageSize);
43
43
  }, [imageSize]);
44
+ React.useEffect(() => {
45
+ initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
46
+ }, [initialFile]);
47
+ const setImageSizeBasedOnUrl = (fileUrl) => {
48
+ createImageFromUrl(fileUrl).then((image) => {
49
+ setImageSize({ width: image.naturalWidth, height: image.naturalHeight });
50
+ });
51
+ };
52
+ const createImageFromUrl = async (url) => {
53
+ const img = new Image();
54
+ img.src = url;
55
+ await img.decode();
56
+ return img;
57
+ };
44
58
  const useStyles = reactJss_esm.createUseStyles({
45
59
  imagePickerWrapper: {
46
60
  border: ({ isDragOver }) => (isDragOver ? '1px solid #135cc8' : ''),
@@ -52,26 +66,33 @@ const ImagePicker = React.memo(({ id, onChange, onError, errors: initialErrors,
52
66
  }
53
67
  });
54
68
  const dragOverStyles = useStyles({ isDragOver });
55
- const handlePreviewLoaded = (event) => {
56
- const $image = event.target;
57
- setImageSize({ width: $image.width, height: $image.height });
58
- };
59
69
  const handleOnFileDelete = () => {
60
- setImageSize(undefined);
61
70
  onFileDelete();
71
+ setImageSize(undefined);
72
+ };
73
+ const handleOnFileChange = (event) => {
74
+ onFileChange(event);
75
+ updateFile(event.target.files);
76
+ };
77
+ const updateFile = (files) => {
78
+ if (files === null || files === void 0 ? void 0 : files.length) {
79
+ setImageSizeBasedOnUrl(URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0]));
80
+ }
62
81
  };
63
82
  return (React__default['default'].createElement("div", { className: imagePickerClassName },
64
83
  React__default['default'].createElement("div", { className: `${imagePickerWrapperClassName} ${dragOverStyles.imagePickerWrapper}` },
65
84
  file &&
66
85
  (isPreview ? (React__default['default'].createElement(React__default['default'].Fragment, null,
67
- React__default['default'].createElement(image_preview.ImagePreview, { file: file, isValid: !(errors === null || errors === void 0 ? void 0 : errors.length), onError: onPreviewError, onLoad: handlePreviewLoaded }),
86
+ React__default['default'].createElement(image_preview.ImagePreview, { file: file, isValid: !(errors === null || errors === void 0 ? void 0 : errors.length), onError: onPreviewError }),
68
87
  React__default['default'].createElement(uploaded_image_item.UploadedImageItem, { imageSize: imageSize, file: file, isValid: !(errors === null || errors === void 0 ? void 0 : errors.length), onFileDelete: handleOnFileDelete }))) : (React__default['default'].createElement("div", null, t('No preview')))),
69
88
  React__default['default'].createElement(image_input['default'], { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: onDropFile }),
70
- React__default['default'].createElement("input", { onChange: onFileChange, id: id, ref: inputRef, type: "file", name: name, className: main_module['default'][css_classes['default'].imagePickerInput], accept: acceptFiles })),
89
+ React__default['default'].createElement("input", { onChange: handleOnFileChange, id: id, ref: inputRef, type: "file", name: name, className: main_module['default'][css_classes['default'].imagePickerInput], accept: acceptFiles })),
71
90
  errors && React__default['default'].createElement(errors_list.ErrorsList, { errors: errors })));
72
91
  }, (prev, curr) => {
73
92
  var _a, _b, _c, _d;
74
- return ((_a = prev.initialFile) === null || _a === void 0 ? void 0 : _a.fileUrl) === ((_b = curr.initialFile) === null || _b === void 0 ? void 0 : _b.fileUrl) && ((_c = prev.initialFile) === null || _c === void 0 ? void 0 : _c.fileName) === ((_d = curr.initialFile) === null || _d === void 0 ? void 0 : _d.fileName);
93
+ return (((_a = prev.initialFile) === null || _a === void 0 ? void 0 : _a.fileUrl) === ((_b = curr.initialFile) === null || _b === void 0 ? void 0 : _b.fileUrl) &&
94
+ ((_c = prev.initialFile) === null || _c === void 0 ? void 0 : _c.fileName) === ((_d = curr.initialFile) === null || _d === void 0 ? void 0 : _d.fileName) &&
95
+ prev.errors === curr.errors);
75
96
  });
76
97
 
77
98
  exports.default = ImagePicker;
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,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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG,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;"}
package/build/esm/packages/aurora/src/components/dropdown/components/search.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useRef } from 'react';
1
+ import React, { useRef, useState } from 'react';
2
2
  import { useDropdownContext } from '../context/index.js';
3
3
  import Input from '../../controls/components/input.js';
4
4
  import { cssDropdownSearch } from '../css_classes.js';
@@ -19,8 +19,12 @@ onKeyUp }) => {
19
19
  const { toggleDropdown, isOpen } = useDropdownContext();
20
20
  const ref = useRef(null);
21
21
  useKeyboardOpenClose(toggleDropdown, isOpen, ref);
22
+ const [value, setValue] = useState('');
23
+ const handleOnChange = (event) => {
24
+ setValue(event.target.value);
25
+ };
22
26
  return (React.createElement("aside", { className: cssClasses[cssDropdownSearch], ref: ref },
23
- React.createElement(Input, { placeholder: "Szukaj", padding: "small", onKeyUp: onKeyUp, autoFocus: true })));
27
+ React.createElement(Input, { placeholder: "Szukaj", padding: "small", onKeyUp: onKeyUp, onChange: handleOnChange, value: value, autoFocus: true })));
24
28
  };
25
29
 
26
30
  export default Search;
package/build/esm/packages/aurora/src/components/dropdown/components/search.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;"}
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;"}
package/build/esm/packages/aurora/src/components/file_picker/types.d.ts CHANGED
@@ -1,10 +1,14 @@
1
- import React, { ChangeEvent } from 'react';
2
1
  import { FILES_EXTENSIONS, MIME_FILE_EXTENSIONS } from "./constants";
2
+ import React, { ChangeEvent } from 'react';
3
3
  import { TControlErrors } from "../controls/types";
4
4
  export declare type TFilePickerFile = {
5
5
  fileUrl: string;
6
6
  fileName: string;
7
7
  };
8
+ export declare type TFilePickerImageSize = {
9
+ width: number;
10
+ height: number;
11
+ };
8
12
  export interface IFilePicker {
9
13
  id: string;
10
14
  name?: string;
package/build/esm/packages/aurora/src/components/file_picker/types.js CHANGED
@@ -1,4 +1,4 @@
1
- import 'react';
2
1
  import '@auroraComponents/file_picker/constants';
2
+ import 'react';
3
3
  import '@auroraComponents/controls/types';
4
4
  //# sourceMappingURL=types.js.map
package/build/esm/packages/aurora/src/components/file_picker/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/file_picker/types.ts"],"names":[],"mappings":"AAAA,OAAmC,OAAO,CAAC;AAC3C,OAAuD,yCAAyC,CAAC;AACjG,OAA+B,kCAAkC,CAAC"}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/file_picker/types.ts"],"names":[],"mappings":"AAAA,OAAuD,yCAAyC,CAAC;AACjG,OAAmC,OAAO,CAAC;AAE3C,OAA+B,kCAAkC,CAAC"}
package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js CHANGED
@@ -4,12 +4,15 @@ import { MIME_TYPE_TO_FILE_EXTENSIONS, FILE_PICKER_ERROR } from './constants.js'
4
4
 
5
5
  const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors, onError }) => {
6
6
  const [file, setFile] = useState(initialFile);
7
- const [errors, setErrors] = useState(initialErrors !== null && initialErrors !== void 0 ? initialErrors : []);
7
+ const [errors, setErrors] = useState([]);
8
8
  const [isDragOver, setDragOver] = useState(false);
9
9
  const [isPreview, setPreview] = useState(true);
10
10
  useEffect(() => {
11
11
  setFile(initialFile);
12
- }, [initialFile]);
12
+ }, []);
13
+ useEffect(() => {
14
+ initialErrors && setErrors(initialErrors);
15
+ }, [initialErrors]);
13
16
  const onDropFile = (event) => {
14
17
  setErrors([]);
15
18
  event.stopPropagation();
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;"}
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;"}
package/build/esm/packages/aurora/src/components/image_picker/components/image_preview.d.ts CHANGED
@@ -4,7 +4,7 @@ declare type TImagePreviewProps = {
4
4
  file: TFilePickerFile;
5
5
  isValid: boolean;
6
6
  onError: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
7
- onLoad: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
7
+ onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
8
8
  };
9
9
  export declare const ImagePreview: ({ isValid, file, onError, onLoad }: TImagePreviewProps) => JSX.Element;
10
10
  export {};
package/build/esm/packages/aurora/src/components/image_picker/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { IImagePicker } from "./types";
2
1
  import React from 'react';
2
+ import { IImagePicker } from "./types";
3
3
  declare const ImagePicker: React.FC<IImagePicker>;
4
4
  export default ImagePicker;
package/build/esm/packages/aurora/src/components/image_picker/index.js CHANGED
@@ -22,8 +22,8 @@ const ImagePicker = memo(({ id, onChange, onError, errors: initialErrors, allowe
22
22
  ], initialFile, name, className = '', onImageSizeUpdated }) => {
23
23
  const [t] = useTranslation();
24
24
  const inputRef = createRef();
25
- const [imageSize, setImageSize] = useState(undefined);
26
25
  const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver } = useFilePicker({ initialFile, onChange, allowedExtensions, initialErrors, onError, inputRef });
26
+ const [imageSize, setImageSize] = useState(undefined);
27
27
  const acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
28
28
  const imagePickerClassName = classnames(styles[CSS_CLASSES.imagePicker], className && className);
29
29
  const imagePickerWrapperClassName = classnames(styles[CSS_CLASSES.imagePickerWrapper], file && styles[CSS_CLASSES.imagePickerWrapperHasFile], {
@@ -32,6 +32,20 @@ const ImagePicker = memo(({ id, onChange, onError, errors: initialErrors, allowe
32
32
  useEffect(() => {
33
33
  onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(imageSize);
34
34
  }, [imageSize]);
35
+ useEffect(() => {
36
+ initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
37
+ }, [initialFile]);
38
+ const setImageSizeBasedOnUrl = (fileUrl) => {
39
+ createImageFromUrl(fileUrl).then((image) => {
40
+ setImageSize({ width: image.naturalWidth, height: image.naturalHeight });
41
+ });
42
+ };
43
+ const createImageFromUrl = async (url) => {
44
+ const img = new Image();
45
+ img.src = url;
46
+ await img.decode();
47
+ return img;
48
+ };
35
49
  const useStyles = createUseStyles({
36
50
  imagePickerWrapper: {
37
51
  border: ({ isDragOver }) => (isDragOver ? '1px solid #135cc8' : ''),
@@ -43,26 +57,33 @@ const ImagePicker = memo(({ id, onChange, onError, errors: initialErrors, allowe
43
57
  }
44
58
  });
45
59
  const dragOverStyles = useStyles({ isDragOver });
46
- const handlePreviewLoaded = (event) => {
47
- const $image = event.target;
48
- setImageSize({ width: $image.width, height: $image.height });
49
- };
50
60
  const handleOnFileDelete = () => {
51
- setImageSize(undefined);
52
61
  onFileDelete();
62
+ setImageSize(undefined);
63
+ };
64
+ const handleOnFileChange = (event) => {
65
+ onFileChange(event);
66
+ updateFile(event.target.files);
67
+ };
68
+ const updateFile = (files) => {
69
+ if (files === null || files === void 0 ? void 0 : files.length) {
70
+ setImageSizeBasedOnUrl(URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0]));
71
+ }
53
72
  };
54
73
  return (React.createElement("div", { className: imagePickerClassName },
55
74
  React.createElement("div", { className: `${imagePickerWrapperClassName} ${dragOverStyles.imagePickerWrapper}` },
56
75
  file &&
57
76
  (isPreview ? (React.createElement(React.Fragment, null,
58
- React.createElement(ImagePreview, { file: file, isValid: !(errors === null || errors === void 0 ? void 0 : errors.length), onError: onPreviewError, onLoad: handlePreviewLoaded }),
77
+ React.createElement(ImagePreview, { file: file, isValid: !(errors === null || errors === void 0 ? void 0 : errors.length), onError: onPreviewError }),
59
78
  React.createElement(UploadedImageItem, { imageSize: imageSize, file: file, isValid: !(errors === null || errors === void 0 ? void 0 : errors.length), onFileDelete: handleOnFileDelete }))) : (React.createElement("div", null, t('No preview')))),
60
79
  React.createElement(ImageInput, { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: onDropFile }),
61
- React.createElement("input", { onChange: onFileChange, id: id, ref: inputRef, type: "file", name: name, className: styles[CSS_CLASSES.imagePickerInput], accept: acceptFiles })),
80
+ React.createElement("input", { onChange: handleOnFileChange, id: id, ref: inputRef, type: "file", name: name, className: styles[CSS_CLASSES.imagePickerInput], accept: acceptFiles })),
62
81
  errors && React.createElement(ErrorsList, { errors: errors })));
63
82
  }, (prev, curr) => {
64
83
  var _a, _b, _c, _d;
65
- return ((_a = prev.initialFile) === null || _a === void 0 ? void 0 : _a.fileUrl) === ((_b = curr.initialFile) === null || _b === void 0 ? void 0 : _b.fileUrl) && ((_c = prev.initialFile) === null || _c === void 0 ? void 0 : _c.fileName) === ((_d = curr.initialFile) === null || _d === void 0 ? void 0 : _d.fileName);
84
+ return (((_a = prev.initialFile) === null || _a === void 0 ? void 0 : _a.fileUrl) === ((_b = curr.initialFile) === null || _b === void 0 ? void 0 : _b.fileUrl) &&
85
+ ((_c = prev.initialFile) === null || _c === void 0 ? void 0 : _c.fileName) === ((_d = curr.initialFile) === null || _d === void 0 ? void 0 : _d.fileName) &&
86
+ prev.errors === curr.errors);
66
87
  });
67
88
 
68
89
  export default ImagePicker;
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,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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG,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;"}
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.8.3",
5
+ "version": "2.8.4-10",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",