@dreamcommerce/aurora 2.8.1-18 → 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,6 +11,7 @@ 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]);
@@ -44,16 +45,16 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
44
45
  return isValid;
45
46
  };
46
47
  const onFileChange = ({ target: { files } }) => {
47
- files && getFileSize(files[0]);
48
+ files && getImageSize(files[0]);
48
49
  setErrors([]);
49
50
  updateFile(files);
50
51
  };
51
- const getFileSize = (file) => {
52
+ const getImageSize = (file) => {
52
53
  console.log('file', file);
53
54
  const img = document.createElement('img');
54
55
  const objectURL = URL.createObjectURL(file);
55
56
  img.onload = function handleLoad() {
56
- console.log(`Width: ${img.width}, Height: ${img.height}`);
57
+ setImageSize({ width: img.width, height: img.height });
57
58
  URL.revokeObjectURL(objectURL);
58
59
  };
59
60
  img.src = objectURL;
@@ -90,6 +91,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
90
91
  setFile(undefined);
91
92
  setPreview(true);
92
93
  setErrors([]);
94
+ setImageSize(undefined);
93
95
  onChange === null || onChange === void 0 ? void 0 : onChange(null);
94
96
  };
95
97
  const onPreviewError = () => {
@@ -104,6 +106,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
104
106
  onPreviewError,
105
107
  file,
106
108
  errors,
109
+ imageSize,
107
110
  isPreview,
108
111
  isDragOver
109
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;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,6 +7,7 @@ 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]);
@@ -40,16 +41,16 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
40
41
  return isValid;
41
42
  };
42
43
  const onFileChange = ({ target: { files } }) => {
43
- files && getFileSize(files[0]);
44
+ files && getImageSize(files[0]);
44
45
  setErrors([]);
45
46
  updateFile(files);
46
47
  };
47
- const getFileSize = (file) => {
48
+ const getImageSize = (file) => {
48
49
  console.log('file', file);
49
50
  const img = document.createElement('img');
50
51
  const objectURL = URL.createObjectURL(file);
51
52
  img.onload = function handleLoad() {
52
- console.log(`Width: ${img.width}, Height: ${img.height}`);
53
+ setImageSize({ width: img.width, height: img.height });
53
54
  URL.revokeObjectURL(objectURL);
54
55
  };
55
56
  img.src = objectURL;
@@ -86,6 +87,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
86
87
  setFile(undefined);
87
88
  setPreview(true);
88
89
  setErrors([]);
90
+ setImageSize(undefined);
89
91
  onChange === null || onChange === void 0 ? void 0 : onChange(null);
90
92
  };
91
93
  const onPreviewError = () => {
@@ -100,6 +102,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
100
102
  onPreviewError,
101
103
  file,
102
104
  errors,
105
+ imageSize,
103
106
  isPreview,
104
107
  isDragOver
105
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;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-18",
5
+ "version": "2.8.1-19",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",