@dreamcommerce/aurora 2.8.1-17 → 2.8.1-19

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.
@@ -11,10 +11,12 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
11
11
  const [errors, setErrors] = React.useState([]);
12
12
  const [isDragOver, setDragOver] = React.useState(false);
13
13
  const [isPreview, setPreview] = React.useState(true);
14
+ const [imageSize, setImageSize] = React.useState(undefined);
14
15
  React.useEffect(() => {
15
16
  setFile(initialFile);
16
17
  }, [initialFile]);
17
18
  React.useEffect(() => {
19
+ console.log('initialErrors', initialErrors);
18
20
  initialErrors && setErrors(initialErrors);
19
21
  }, [initialErrors]);
20
22
  const onDropFile = (event) => {
@@ -43,10 +45,20 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
43
45
  return isValid;
44
46
  };
45
47
  const onFileChange = ({ target: { files } }) => {
46
- console.log('onFileChange', files === null || files === void 0 ? void 0 : files[0]);
48
+ files && getImageSize(files[0]);
47
49
  setErrors([]);
48
50
  updateFile(files);
49
51
  };
52
+ const getImageSize = (file) => {
53
+ console.log('file', file);
54
+ const img = document.createElement('img');
55
+ const objectURL = URL.createObjectURL(file);
56
+ img.onload = function handleLoad() {
57
+ setImageSize({ width: img.width, height: img.height });
58
+ URL.revokeObjectURL(objectURL);
59
+ };
60
+ img.src = objectURL;
61
+ };
50
62
  const updateFile = (files) => {
51
63
  if (files === null || files === void 0 ? void 0 : files.length) {
52
64
  setFile({
@@ -79,6 +91,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
79
91
  setFile(undefined);
80
92
  setPreview(true);
81
93
  setErrors([]);
94
+ setImageSize(undefined);
82
95
  onChange === null || onChange === void 0 ? void 0 : onChange(null);
83
96
  };
84
97
  const onPreviewError = () => {
@@ -93,6 +106,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
93
106
  onPreviewError,
94
107
  file,
95
108
  errors,
109
+ imageSize,
96
110
  isPreview,
97
111
  isDragOver
98
112
  };
@@ -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;"}
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;"}
@@ -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,11 +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
- console.log('handlePreviewLoaded', $image.width);
58
- setImageSize({ width: $image.width, height: $image.height });
59
56
  };
60
57
  const handleOnFileDelete = () => {
61
- setImageSize(undefined);
62
58
  onFileDelete();
63
59
  };
64
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;"}
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;"}
@@ -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;
@@ -38,6 +42,7 @@ export interface IUseFilePicker {
38
42
  onPreviewError: () => void;
39
43
  file: TFilePickerFile | undefined;
40
44
  errors: string[];
45
+ imageSize: TFilePickerImageSize | undefined;
41
46
  isPreview: boolean;
42
47
  isDragOver: boolean;
43
48
  }
@@ -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
@@ -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"}
@@ -7,10 +7,12 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
7
7
  const [errors, setErrors] = useState([]);
8
8
  const [isDragOver, setDragOver] = useState(false);
9
9
  const [isPreview, setPreview] = useState(true);
10
+ const [imageSize, setImageSize] = useState(undefined);
10
11
  useEffect(() => {
11
12
  setFile(initialFile);
12
13
  }, [initialFile]);
13
14
  useEffect(() => {
15
+ console.log('initialErrors', initialErrors);
14
16
  initialErrors && setErrors(initialErrors);
15
17
  }, [initialErrors]);
16
18
  const onDropFile = (event) => {
@@ -39,10 +41,20 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
39
41
  return isValid;
40
42
  };
41
43
  const onFileChange = ({ target: { files } }) => {
42
- console.log('onFileChange', files === null || files === void 0 ? void 0 : files[0]);
44
+ files && getImageSize(files[0]);
43
45
  setErrors([]);
44
46
  updateFile(files);
45
47
  };
48
+ const getImageSize = (file) => {
49
+ console.log('file', file);
50
+ const img = document.createElement('img');
51
+ const objectURL = URL.createObjectURL(file);
52
+ img.onload = function handleLoad() {
53
+ setImageSize({ width: img.width, height: img.height });
54
+ URL.revokeObjectURL(objectURL);
55
+ };
56
+ img.src = objectURL;
57
+ };
46
58
  const updateFile = (files) => {
47
59
  if (files === null || files === void 0 ? void 0 : files.length) {
48
60
  setFile({
@@ -75,6 +87,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
75
87
  setFile(undefined);
76
88
  setPreview(true);
77
89
  setErrors([]);
90
+ setImageSize(undefined);
78
91
  onChange === null || onChange === void 0 ? void 0 : onChange(null);
79
92
  };
80
93
  const onPreviewError = () => {
@@ -89,6 +102,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
89
102
  onPreviewError,
90
103
  file,
91
104
  errors,
105
+ imageSize,
92
106
  isPreview,
93
107
  isDragOver
94
108
  };
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -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,11 +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
- console.log('handlePreviewLoaded', $image.width);
49
- setImageSize({ width: $image.width, height: $image.height });
50
47
  };
51
48
  const handleOnFileDelete = () => {
52
- setImageSize(undefined);
53
49
  onFileDelete();
54
50
  };
55
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;"}
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;"}
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-17",
5
+ "version": "2.8.1-19",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",