@dreamcommerce/aurora 2.8.1-35 → 2.8.1-37

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.
@@ -14,10 +14,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
14
14
  const [imageSize, setImageSize] = React.useState(undefined);
15
15
  React.useEffect(() => {
16
16
  setFile(initialFile);
17
- initialFile &&
18
- createImageFromUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl).then((image) => {
19
- setImageSize({ width: image.naturalWidth, height: image.naturalHeight });
20
- });
17
+ initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
21
18
  }, [initialFile]);
22
19
  React.useEffect(() => {
23
20
  console.log('imageSize', imageSize);
@@ -25,6 +22,11 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
25
22
  React.useEffect(() => {
26
23
  initialErrors && setErrors(initialErrors);
27
24
  }, [initialErrors]);
25
+ const setImageSizeBasedOnUrl = (fileUrl) => {
26
+ createImageFromUrl(fileUrl).then((image) => {
27
+ setImageSize({ width: image.naturalWidth, height: image.naturalHeight });
28
+ });
29
+ };
28
30
  const createImageFromUrl = async (url) => {
29
31
  const img = new Image();
30
32
  img.src = url;
@@ -62,10 +64,12 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
62
64
  };
63
65
  const updateFile = (files) => {
64
66
  if (files === null || files === void 0 ? void 0 : files.length) {
67
+ const fileUrl = URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0]);
65
68
  setFile({
66
69
  fileName: files === null || files === void 0 ? void 0 : files[0].name,
67
- fileUrl: URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0])
70
+ fileUrl: fileUrl
68
71
  });
72
+ setImageSizeBasedOnUrl(fileUrl);
69
73
  const isValid = validateFileExtension(allowedExtensions, files[0].type);
70
74
  if (isValid)
71
75
  onChange === null || onChange === void 0 ? void 0 : onChange(files);
@@ -92,6 +96,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
92
96
  setFile(undefined);
93
97
  setPreview(true);
94
98
  setErrors([]);
99
+ setImageSize(undefined);
95
100
  onChange === null || onChange === void 0 ? void 0 : onChange(null);
96
101
  };
97
102
  const onPreviewError = () => {
@@ -106,6 +111,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
106
111
  onPreviewError,
107
112
  file,
108
113
  errors,
114
+ imageSize,
109
115
  isPreview,
110
116
  isDragOver
111
117
  };
@@ -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;"}
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;"}
@@ -31,8 +31,7 @@ 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
- const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver } = use_file_picker.useFilePicker({ initialFile, onChange, allowedExtensions, initialErrors, onError, inputRef });
34
+ const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, imageSize, isPreview, isDragOver } = use_file_picker.useFilePicker({ initialFile, onChange, allowedExtensions, initialErrors, onError, inputRef });
36
35
  const acceptFiles = utils.getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
37
36
  const imagePickerClassName = classnames__default['default'](main_module['default'][css_classes['default'].imagePicker], className && className);
38
37
  const imagePickerWrapperClassName = classnames__default['default'](main_module['default'][css_classes['default'].imagePickerWrapper], file && main_module['default'][css_classes['default'].imagePickerWrapperHasFile], {
@@ -54,10 +53,8 @@ const ImagePicker = React.memo(({ id, onChange, onError, errors: initialErrors,
54
53
  const dragOverStyles = useStyles({ isDragOver });
55
54
  const handlePreviewLoaded = (event) => {
56
55
  const $image = event.target;
57
- setImageSize({ width: $image.width, height: $image.height });
58
56
  };
59
57
  const handleOnFileDelete = () => {
60
- setImageSize(undefined);
61
58
  onFileDelete();
62
59
  };
63
60
  return (React__default['default'].createElement("div", { className: imagePickerClassName },
@@ -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;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;"}
@@ -42,6 +42,7 @@ export interface IUseFilePicker {
42
42
  onPreviewError: () => void;
43
43
  file: TFilePickerFile | undefined;
44
44
  errors: string[];
45
+ imageSize: TFilePickerImageSize | undefined;
45
46
  isPreview: boolean;
46
47
  isDragOver: boolean;
47
48
  }
@@ -10,10 +10,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
10
10
  const [imageSize, setImageSize] = useState(undefined);
11
11
  useEffect(() => {
12
12
  setFile(initialFile);
13
- initialFile &&
14
- createImageFromUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl).then((image) => {
15
- setImageSize({ width: image.naturalWidth, height: image.naturalHeight });
16
- });
13
+ initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
17
14
  }, [initialFile]);
18
15
  useEffect(() => {
19
16
  console.log('imageSize', imageSize);
@@ -21,6 +18,11 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
21
18
  useEffect(() => {
22
19
  initialErrors && setErrors(initialErrors);
23
20
  }, [initialErrors]);
21
+ const setImageSizeBasedOnUrl = (fileUrl) => {
22
+ createImageFromUrl(fileUrl).then((image) => {
23
+ setImageSize({ width: image.naturalWidth, height: image.naturalHeight });
24
+ });
25
+ };
24
26
  const createImageFromUrl = async (url) => {
25
27
  const img = new Image();
26
28
  img.src = url;
@@ -58,10 +60,12 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
58
60
  };
59
61
  const updateFile = (files) => {
60
62
  if (files === null || files === void 0 ? void 0 : files.length) {
63
+ const fileUrl = URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0]);
61
64
  setFile({
62
65
  fileName: files === null || files === void 0 ? void 0 : files[0].name,
63
- fileUrl: URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0])
66
+ fileUrl: fileUrl
64
67
  });
68
+ setImageSizeBasedOnUrl(fileUrl);
65
69
  const isValid = validateFileExtension(allowedExtensions, files[0].type);
66
70
  if (isValid)
67
71
  onChange === null || onChange === void 0 ? void 0 : onChange(files);
@@ -88,6 +92,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
88
92
  setFile(undefined);
89
93
  setPreview(true);
90
94
  setErrors([]);
95
+ setImageSize(undefined);
91
96
  onChange === null || onChange === void 0 ? void 0 : onChange(null);
92
97
  };
93
98
  const onPreviewError = () => {
@@ -102,6 +107,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
102
107
  onPreviewError,
103
108
  file,
104
109
  errors,
110
+ imageSize,
105
111
  isPreview,
106
112
  isDragOver
107
113
  };
@@ -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;"}
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;"}
@@ -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;
@@ -1,4 +1,4 @@
1
- import React, { memo, createRef, useState, useEffect } from 'react';
1
+ import React, { memo, createRef, useEffect } from 'react';
2
2
  import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
3
3
  import { createUseStyles } from '../../../../../external/react-jss/dist/react-jss.esm.js';
4
4
  import classnames from 'classnames';
@@ -22,8 +22,7 @@ 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
- const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver } = useFilePicker({ initialFile, onChange, allowedExtensions, initialErrors, onError, inputRef });
25
+ const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, imageSize, isPreview, isDragOver } = useFilePicker({ initialFile, onChange, allowedExtensions, initialErrors, onError, inputRef });
27
26
  const acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
28
27
  const imagePickerClassName = classnames(styles[CSS_CLASSES.imagePicker], className && className);
29
28
  const imagePickerWrapperClassName = classnames(styles[CSS_CLASSES.imagePickerWrapper], file && styles[CSS_CLASSES.imagePickerWrapperHasFile], {
@@ -45,10 +44,8 @@ const ImagePicker = memo(({ id, onChange, onError, errors: initialErrors, allowe
45
44
  const dragOverStyles = useStyles({ isDragOver });
46
45
  const handlePreviewLoaded = (event) => {
47
46
  const $image = event.target;
48
- setImageSize({ width: $image.width, height: $image.height });
49
47
  };
50
48
  const handleOnFileDelete = () => {
51
- setImageSize(undefined);
52
49
  onFileDelete();
53
50
  };
54
51
  return (React.createElement("div", { className: imagePickerClassName },
@@ -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;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;"}
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.1-35",
5
+ "version": "2.8.1-37",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",