@dreamcommerce/aurora 2.8.15-1 → 2.8.16

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.
@@ -16,9 +16,10 @@ const ControlXhrImagePicker = ({ url, label, isRequired, id, name, onChange, all
16
16
  const handleControlError = (errors) => {
17
17
  setErrors(errors);
18
18
  };
19
- const handleControlChange = (fileList) => {
19
+ const handleControlChange = (file) => {
20
+ const { fileList, fileAsDataUrl } = file;
20
21
  setErrors(null);
21
- onChange === null || onChange === void 0 ? void 0 : onChange(fileList);
22
+ onChange === null || onChange === void 0 ? void 0 : onChange({ fileList, fileAsDataUrl });
22
23
  };
23
24
  return (React__default['default'].createElement(index['default'], { errors: controlErrors, name: name, id: id },
24
25
  (label || hint) && (React__default['default'].createElement(index['default'].Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
@@ -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;"}
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;"}
@@ -7,16 +7,25 @@ var i18n = require('../../i18n.js');
7
7
  var constants = require('./constants.js');
8
8
 
9
9
  const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors, onError }) => {
10
+ const [fileList, setFileList] = React.useState(null);
10
11
  const [file, setFile] = React.useState(initialFile);
12
+ const [fileAsDataUrl, setFileAsDataUrl] = React.useState(null);
11
13
  const [errors, setErrors] = React.useState([]);
12
14
  const [isDragOver, setDragOver] = React.useState(false);
13
15
  const [isPreview, setPreview] = React.useState(true);
16
+ const reader = React.useRef(new FileReader());
14
17
  React.useEffect(() => {
15
18
  setFile(initialFile);
16
- }, [initialFile]);
19
+ reader.current && getDataUrlFromFile(reader.current.result);
20
+ reader.current.addEventListener('load', () => getDataUrlFromFile(reader.current.result), false);
21
+ return () => reader.current.removeEventListener('load', () => getDataUrlFromFile(reader.current.result));
22
+ }, []);
17
23
  React.useEffect(() => {
18
24
  initialErrors && setErrors(initialErrors);
19
25
  }, [initialErrors]);
26
+ React.useEffect(() => {
27
+ fileAsDataUrl && (onChange === null || onChange === void 0 ? void 0 : onChange({ fileList, fileAsDataUrl }));
28
+ }, [fileAsDataUrl]);
20
29
  const onDropFile = (event) => {
21
30
  setErrors([]);
22
31
  event.stopPropagation();
@@ -48,20 +57,25 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
48
57
  };
49
58
  const updateFile = (files) => {
50
59
  if (files === null || files === void 0 ? void 0 : files.length) {
60
+ setFileList(files);
61
+ reader.current.readAsDataURL(files[0]);
51
62
  setFile({
52
63
  fileName: files === null || files === void 0 ? void 0 : files[0].name,
53
64
  fileUrl: URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0])
54
65
  });
55
66
  const isValid = validateFileExtension(allowedExtensions, files[0].type);
56
67
  if (isValid)
57
- onChange === null || onChange === void 0 ? void 0 : onChange(files);
68
+ onChange === null || onChange === void 0 ? void 0 : onChange({ fileList: files });
58
69
  }
59
70
  else {
60
71
  setFile(undefined);
61
- onChange === null || onChange === void 0 ? void 0 : onChange(files);
72
+ onChange === null || onChange === void 0 ? void 0 : onChange({ fileList: files });
62
73
  }
63
74
  setPreview(true);
64
75
  };
76
+ const getDataUrlFromFile = (fileReaderResult) => {
77
+ setFileAsDataUrl(fileReaderResult);
78
+ };
65
79
  const onDragOver = (event) => {
66
80
  event.stopPropagation();
67
81
  event.preventDefault();
@@ -75,10 +89,12 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
75
89
  };
76
90
  const onFileDelete = () => {
77
91
  inputRef.current.value = '';
92
+ setFileList(null);
78
93
  setFile(undefined);
94
+ setFileAsDataUrl(null);
79
95
  setPreview(true);
80
96
  setErrors([]);
81
- onChange === null || onChange === void 0 ? void 0 : onChange(null);
97
+ onChange === null || onChange === void 0 ? void 0 : onChange({ fileList: null, fileAsDataUrl: null });
82
98
  };
83
99
  const onPreviewError = () => {
84
100
  setPreview(false);
@@ -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;"}
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;"}
@@ -22,8 +22,9 @@ const XhrImagePicker = ({ id, url, name, onUploaded, initialFile, errors, onErro
22
22
  ] }) => {
23
23
  const httpApi = use_http_api.useHttpApi();
24
24
  const pendingRequestRef = React__default['default'].useRef();
25
- const handleControlChange = async (fileList) => {
26
- onChange === null || onChange === void 0 ? void 0 : onChange(fileList);
25
+ const handleControlChange = async (file) => {
26
+ const { fileList, fileAsDataUrl } = file;
27
+ onChange === null || onChange === void 0 ? void 0 : onChange({ fileList, fileAsDataUrl });
27
28
  if (!fileList || !fileList.length)
28
29
  return;
29
30
  if (pendingRequestRef.current) {
@@ -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;"}
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;"}
@@ -8,9 +8,10 @@ const ControlXhrImagePicker = ({ url, label, isRequired, id, name, onChange, all
8
8
  const handleControlError = (errors) => {
9
9
  setErrors(errors);
10
10
  };
11
- const handleControlChange = (fileList) => {
11
+ const handleControlChange = (file) => {
12
+ const { fileList, fileAsDataUrl } = file;
12
13
  setErrors(null);
13
- onChange === null || onChange === void 0 ? void 0 : onChange(fileList);
14
+ onChange === null || onChange === void 0 ? void 0 : onChange({ fileList, fileAsDataUrl });
14
15
  };
15
16
  return (React.createElement(Control, { errors: controlErrors, name: name, id: id },
16
17
  (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
@@ -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;"}
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,12 +1,12 @@
1
1
  import { HTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode, Ref, TextareaHTMLAttributes } from 'react';
2
+ import { IFilePicker, IUseFilePickerOnChange } from "../file_picker/types";
3
+ import { IImagePicker, TImageSize } from "../image_picker/types";
2
4
  import { IMultiSelectProps, ISelectProps } from "../dropdown/types";
3
5
  import { IColorPickerProps } from "../color_picker/types";
4
- import { IFilePicker } from "../file_picker/types";
5
6
  import { IRange } from "../range/types";
7
+ import { IRequestResponse } from '@dreamcommerce/star_core';
6
8
  import React from 'react';
7
9
  import { TVerticalPosition } from "../../typings/general";
8
- import { IImagePicker, TImageSize } from "../image_picker/types";
9
- import { IRequestResponse } from '@dreamcommerce/star_core';
10
10
  export declare type TControlErrors = string[] | null | undefined;
11
11
  export interface IControlContext {
12
12
  errors?: TControlErrors;
@@ -175,7 +175,7 @@ export interface IControlXhrImagePicker extends IImagePicker, IControlCommonProp
175
175
  url: string;
176
176
  label?: string;
177
177
  isRequired?: boolean;
178
- onChange?: (fileList: FileList | null, size?: TImageSize) => void;
178
+ onChange?: (file: IUseFilePickerOnChange, size?: TImageSize) => void;
179
179
  labelAdditionalInfo?: string | ReactNode;
180
180
  onUploaded?: (resp: IRequestResponse<any>, file: File) => void;
181
181
  }
@@ -1,10 +1,10 @@
1
1
  import 'react';
2
+ import '@auroraComponents/file_picker/types';
3
+ import '@auroraComponents/image_picker/types';
2
4
  import '@auroraComponents/dropdown/types';
3
5
  import '@auroraComponents/color_picker/types';
4
- import '@auroraComponents/file_picker/types';
5
6
  import '@auroraComponents/range/types';
7
+ import '@dreamcommerce/star_core';
6
8
  import 'react';
7
9
  import '@auroraTypings/general';
8
- import '@auroraComponents/image_picker/types';
9
- import '@dreamcommerce/star_core';
10
10
  //# sourceMappingURL=types.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/controls/types.ts"],"names":[],"mappings":"AAAA,OAA0G,OAAO,CAAC;AAClH,OAAgD,kCAAkC,CAAC;AAEnF,OAAkC,sCAAsC,CAAC;AACzE,OAA4B,qCAAqC,CAAC;AAClE,OAAuB,+BAA+B,CAAC;AACvD,OAAkB,OAAO,CAAC;AAC1B,OAAkC,wBAAwB,CAAC;AAC3D,OAAyC,sCAAsC,CAAC;AAChF,OAAiC,0BAA0B,CAAC"}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/controls/types.ts"],"names":[],"mappings":"AAAA,OAA0G,OAAO,CAAC;AAClH,OAAoD,qCAAqC,CAAC;AAC1F,OAAyC,sCAAsC,CAAC;AAChF,OAAgD,kCAAkC,CAAC;AAEnF,OAAkC,sCAAsC,CAAC;AACzE,OAAuB,+BAA+B,CAAC;AACvD,OAAiC,0BAA0B,CAAC;AAC5D,OAAkB,OAAO,CAAC;AAC1B,OAAkC,wBAAwB,CAAC"}
@@ -13,7 +13,7 @@ export interface IFilePicker {
13
13
  id: string;
14
14
  name?: string;
15
15
  className?: string;
16
- onChange?: (fileList: FileList | null) => void;
16
+ onChange?: (file: IUseFilePickerOnChange) => void;
17
17
  allowedExtensions?: TFilesExtension[];
18
18
  initialFile?: TFilePickerFile;
19
19
  errors?: TControlErrors;
@@ -45,8 +45,12 @@ export interface IUseFilePicker {
45
45
  isPreview: boolean;
46
46
  isDragOver: boolean;
47
47
  }
48
+ export declare type IUseFilePickerOnChange = {
49
+ fileList: FileList | null;
50
+ fileAsDataUrl?: string | ArrayBuffer | null;
51
+ };
48
52
  export interface IUseFilePickerProps {
49
- onChange?: (fileList: FileList | null) => void;
53
+ onChange?: (file: IUseFilePickerOnChange) => void;
50
54
  initialFile?: TFilePickerFile;
51
55
  allowedExtensions?: TFilesExtension[];
52
56
  inputRef: React.RefObject<HTMLInputElement>;
@@ -1,18 +1,27 @@
1
- import { useState, useEffect } from 'react';
1
+ import { useState, useRef, useEffect } from 'react';
2
2
  import i18n from '../../i18n.js';
3
3
  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
+ const [fileList, setFileList] = useState(null);
6
7
  const [file, setFile] = useState(initialFile);
8
+ const [fileAsDataUrl, setFileAsDataUrl] = useState(null);
7
9
  const [errors, setErrors] = useState([]);
8
10
  const [isDragOver, setDragOver] = useState(false);
9
11
  const [isPreview, setPreview] = useState(true);
12
+ const reader = useRef(new FileReader());
10
13
  useEffect(() => {
11
14
  setFile(initialFile);
12
- }, [initialFile]);
15
+ reader.current && getDataUrlFromFile(reader.current.result);
16
+ reader.current.addEventListener('load', () => getDataUrlFromFile(reader.current.result), false);
17
+ return () => reader.current.removeEventListener('load', () => getDataUrlFromFile(reader.current.result));
18
+ }, []);
13
19
  useEffect(() => {
14
20
  initialErrors && setErrors(initialErrors);
15
21
  }, [initialErrors]);
22
+ useEffect(() => {
23
+ fileAsDataUrl && (onChange === null || onChange === void 0 ? void 0 : onChange({ fileList, fileAsDataUrl }));
24
+ }, [fileAsDataUrl]);
16
25
  const onDropFile = (event) => {
17
26
  setErrors([]);
18
27
  event.stopPropagation();
@@ -44,20 +53,25 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
44
53
  };
45
54
  const updateFile = (files) => {
46
55
  if (files === null || files === void 0 ? void 0 : files.length) {
56
+ setFileList(files);
57
+ reader.current.readAsDataURL(files[0]);
47
58
  setFile({
48
59
  fileName: files === null || files === void 0 ? void 0 : files[0].name,
49
60
  fileUrl: URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0])
50
61
  });
51
62
  const isValid = validateFileExtension(allowedExtensions, files[0].type);
52
63
  if (isValid)
53
- onChange === null || onChange === void 0 ? void 0 : onChange(files);
64
+ onChange === null || onChange === void 0 ? void 0 : onChange({ fileList: files });
54
65
  }
55
66
  else {
56
67
  setFile(undefined);
57
- onChange === null || onChange === void 0 ? void 0 : onChange(files);
68
+ onChange === null || onChange === void 0 ? void 0 : onChange({ fileList: files });
58
69
  }
59
70
  setPreview(true);
60
71
  };
72
+ const getDataUrlFromFile = (fileReaderResult) => {
73
+ setFileAsDataUrl(fileReaderResult);
74
+ };
61
75
  const onDragOver = (event) => {
62
76
  event.stopPropagation();
63
77
  event.preventDefault();
@@ -71,10 +85,12 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
71
85
  };
72
86
  const onFileDelete = () => {
73
87
  inputRef.current.value = '';
88
+ setFileList(null);
74
89
  setFile(undefined);
90
+ setFileAsDataUrl(null);
75
91
  setPreview(true);
76
92
  setErrors([]);
77
- onChange === null || onChange === void 0 ? void 0 : onChange(null);
93
+ onChange === null || onChange === void 0 ? void 0 : onChange({ fileList: null, fileAsDataUrl: null });
78
94
  };
79
95
  const onPreviewError = () => {
80
96
  setPreview(false);
@@ -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;"}
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;"}
@@ -14,8 +14,9 @@ const XhrImagePicker = ({ id, url, name, onUploaded, initialFile, errors, onErro
14
14
  ] }) => {
15
15
  const httpApi = useHttpApi();
16
16
  const pendingRequestRef = React.useRef();
17
- const handleControlChange = async (fileList) => {
18
- onChange === null || onChange === void 0 ? void 0 : onChange(fileList);
17
+ const handleControlChange = async (file) => {
18
+ const { fileList, fileAsDataUrl } = file;
19
+ onChange === null || onChange === void 0 ? void 0 : onChange({ fileList, fileAsDataUrl });
19
20
  if (!fileList || !fileList.length)
20
21
  return;
21
22
  if (pendingRequestRef.current) {
@@ -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;"}
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;"}
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.15-1",
5
+ "version": "2.8.16",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",