@dreamcommerce/aurora 2.8.1-2 → 2.8.1-20

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.
@@ -8,12 +8,17 @@ 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
+ const [imageSize, setImageSize] = React.useState(undefined);
14
15
  React.useEffect(() => {
15
16
  setFile(initialFile);
16
17
  }, [initialFile]);
18
+ React.useEffect(() => {
19
+ console.log('initialErrors', initialErrors);
20
+ initialErrors && setErrors(initialErrors);
21
+ }, [initialErrors]);
17
22
  const onDropFile = (event) => {
18
23
  setErrors([]);
19
24
  event.stopPropagation();
@@ -40,9 +45,19 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
40
45
  return isValid;
41
46
  };
42
47
  const onFileChange = ({ target: { files } }) => {
48
+ files && getImageSize(files[0]);
43
49
  setErrors([]);
44
50
  updateFile(files);
45
51
  };
52
+ const getImageSize = (file) => {
53
+ const img = document.createElement('img');
54
+ const objectURL = URL.createObjectURL(file);
55
+ img.onload = function handleLoad() {
56
+ setImageSize({ width: img.width, height: img.height });
57
+ URL.revokeObjectURL(objectURL);
58
+ };
59
+ img.src = objectURL;
60
+ };
46
61
  const updateFile = (files) => {
47
62
  if (files === null || files === void 0 ? void 0 : files.length) {
48
63
  setFile({
@@ -75,6 +90,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
75
90
  setFile(undefined);
76
91
  setPreview(true);
77
92
  setErrors([]);
93
+ setImageSize(undefined);
78
94
  onChange === null || onChange === void 0 ? void 0 : onChange(null);
79
95
  };
80
96
  const onPreviewError = () => {
@@ -89,6 +105,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
89
105
  onPreviewError,
90
106
  file,
91
107
  errors,
108
+ imageSize,
92
109
  isPreview,
93
110
  isDragOver
94
111
  };
@@ -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;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;"}
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;"}
@@ -42,7 +42,6 @@ const XhrImagePicker = ({ id, url, name, onUploaded, initialFile, errors, onErro
42
42
  React.useEffect(() => {
43
43
  return () => { var _a; return (_a = pendingRequestRef.current) === null || _a === void 0 ? void 0 : _a.call(pendingRequestRef); };
44
44
  }, []);
45
- console.log('XhrImagePicker', errors);
46
45
  return (React__default['default'].createElement(index['default'], { id: id, name: name, onChange: handleControlChange, onError: onError, errors: errors, allowedExtensions: allowedExtensions, initialFile: initialFile, onImageSizeUpdated: onImageSizeUpdated }));
47
46
  };
48
47
 
@@ -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;"}
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;"}
@@ -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"}
@@ -4,12 +4,17 @@ 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
+ const [imageSize, setImageSize] = useState(undefined);
10
11
  useEffect(() => {
11
12
  setFile(initialFile);
12
13
  }, [initialFile]);
14
+ useEffect(() => {
15
+ console.log('initialErrors', initialErrors);
16
+ initialErrors && setErrors(initialErrors);
17
+ }, [initialErrors]);
13
18
  const onDropFile = (event) => {
14
19
  setErrors([]);
15
20
  event.stopPropagation();
@@ -36,9 +41,19 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
36
41
  return isValid;
37
42
  };
38
43
  const onFileChange = ({ target: { files } }) => {
44
+ files && getImageSize(files[0]);
39
45
  setErrors([]);
40
46
  updateFile(files);
41
47
  };
48
+ const getImageSize = (file) => {
49
+ const img = document.createElement('img');
50
+ const objectURL = URL.createObjectURL(file);
51
+ img.onload = function handleLoad() {
52
+ setImageSize({ width: img.width, height: img.height });
53
+ URL.revokeObjectURL(objectURL);
54
+ };
55
+ img.src = objectURL;
56
+ };
42
57
  const updateFile = (files) => {
43
58
  if (files === null || files === void 0 ? void 0 : files.length) {
44
59
  setFile({
@@ -71,6 +86,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
71
86
  setFile(undefined);
72
87
  setPreview(true);
73
88
  setErrors([]);
89
+ setImageSize(undefined);
74
90
  onChange === null || onChange === void 0 ? void 0 : onChange(null);
75
91
  };
76
92
  const onPreviewError = () => {
@@ -85,6 +101,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
85
101
  onPreviewError,
86
102
  file,
87
103
  errors,
104
+ imageSize,
88
105
  isPreview,
89
106
  isDragOver
90
107
  };
@@ -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;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;"}
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;"}
@@ -34,7 +34,6 @@ const XhrImagePicker = ({ id, url, name, onUploaded, initialFile, errors, onErro
34
34
  useEffect(() => {
35
35
  return () => { var _a; return (_a = pendingRequestRef.current) === null || _a === void 0 ? void 0 : _a.call(pendingRequestRef); };
36
36
  }, []);
37
- console.log('XhrImagePicker', errors);
38
37
  return (React.createElement(ImagePicker, { id: id, name: name, onChange: handleControlChange, onError: onError, errors: errors, allowedExtensions: allowedExtensions, initialFile: initialFile, onImageSizeUpdated: onImageSizeUpdated }));
39
38
  };
40
39
 
@@ -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;"}
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;"}
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-2",
5
+ "version": "2.8.1-20",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",