@dreamcommerce/aurora 2.8.11 → 2.8.12-2

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.
Files changed (21) hide show
  1. package/build/cjs/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.js +3 -2
  2. package/build/cjs/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.js.map +1 -1
  3. package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js +13 -4
  4. package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
  5. package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js +3 -2
  6. package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js.map +1 -1
  7. package/build/cjs/packages/aurora/src/css/hint/main.module.less.js +1 -1
  8. package/build/cjs/packages/aurora/src/css/slide/main.module.less.js +1 -1
  9. package/build/esm/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.js +3 -2
  10. package/build/esm/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.js.map +1 -1
  11. package/build/esm/packages/aurora/src/components/controls/types.d.ts +4 -4
  12. package/build/esm/packages/aurora/src/components/controls/types.js +3 -3
  13. package/build/esm/packages/aurora/src/components/controls/types.js.map +1 -1
  14. package/build/esm/packages/aurora/src/components/file_picker/types.d.ts +6 -2
  15. package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js +13 -4
  16. package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
  17. package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js +3 -2
  18. package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js.map +1 -1
  19. package/build/esm/packages/aurora/src/css/hint/main.module.less.js +1 -1
  20. package/build/esm/packages/aurora/src/css/slide/main.module.less.js +1 -1
  21. package/package.json +1 -1
@@ -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;"}
@@ -8,11 +8,15 @@ 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 [fileAsDataUrl, setFileAsDataUrl] = React.useState(null);
11
12
  const [errors, setErrors] = React.useState([]);
12
13
  const [isDragOver, setDragOver] = React.useState(false);
13
14
  const [isPreview, setPreview] = React.useState(true);
15
+ const reader = new FileReader();
14
16
  React.useEffect(() => {
15
17
  initialFile && setFile(initialFile);
18
+ reader.addEventListener('load', () => getDataUrlFromFile(reader.result), false);
19
+ return () => reader.removeEventListener('load', () => getDataUrlFromFile(reader.result));
16
20
  }, []);
17
21
  React.useEffect(() => {
18
22
  initialErrors && setErrors(initialErrors);
@@ -47,21 +51,25 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
47
51
  updateFile(files);
48
52
  };
49
53
  const updateFile = (files) => {
50
- if (files === null || files === void 0 ? void 0 : files.length) {
54
+ if ((files === null || files === void 0 ? void 0 : files.length) && !fileAsDataUrl) {
55
+ reader.readAsDataURL(files[0]);
51
56
  setFile({
52
57
  fileName: files === null || files === void 0 ? void 0 : files[0].name,
53
58
  fileUrl: URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0])
54
59
  });
55
60
  const isValid = validateFileExtension(allowedExtensions, files[0].type);
56
61
  if (isValid)
57
- onChange === null || onChange === void 0 ? void 0 : onChange(files);
62
+ onChange === null || onChange === void 0 ? void 0 : onChange({ fileList: files, fileAsDataUrl });
58
63
  }
59
64
  else {
60
65
  setFile(undefined);
61
- onChange === null || onChange === void 0 ? void 0 : onChange(files);
66
+ onChange === null || onChange === void 0 ? void 0 : onChange({ fileList: files, fileAsDataUrl });
62
67
  }
63
68
  setPreview(true);
64
69
  };
70
+ const getDataUrlFromFile = (fileReaderResult) => {
71
+ setFileAsDataUrl(fileReaderResult);
72
+ };
65
73
  const onDragOver = (event) => {
66
74
  event.stopPropagation();
67
75
  event.preventDefault();
@@ -76,9 +84,10 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
76
84
  const onFileDelete = () => {
77
85
  inputRef.current.value = '';
78
86
  setFile(undefined);
87
+ setFileAsDataUrl(null);
79
88
  setPreview(true);
80
89
  setErrors([]);
81
- onChange === null || onChange === void 0 ? void 0 : onChange(null);
90
+ onChange === null || onChange === void 0 ? void 0 : onChange({ fileList: null, fileAsDataUrl: null });
82
91
  };
83
92
  const onPreviewError = () => {
84
93
  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;"}
@@ -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;"}
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
6
6
 
7
- var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_hint__3cahT {\n vertical-align: middle;\n}\n.main-module_hint_spacing-left__1dKcO {\n margin-left: 1rem;\n}\n.main-module_hint_spacing-right__2dV0Q {\n margin-right: 1rem;\n}\n.main-module_hint__content__IIh3W {\n min-width: 258px;\n max-width: 500px;\n padding: 1rem !important;\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2) !important;\n}\n.main-module_hint__content_yellow__3NyBP {\n background-color: #fff6cc;\n}\n.main-module_hint__content_yellow__3NyBP.main-module_dropdown__content_top__1bZPH::before {\n border-color: #fff6cc transparent transparent transparent;\n}\n.main-module_hint__content_yellow__3NyBP.main-module_dropdown__content_bottom__10hXS::before {\n border-color: transparent transparent #fff6cc transparent;\n}\n";
7
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_hint__3cahT {\n vertical-align: middle;\n}\n.main-module_hint_spacing-left__1dKcO {\n margin-left: 1rem;\n}\n.main-module_hint_spacing-right__2dV0Q {\n margin-right: 1rem;\n}\n.main-module_hint__3cahT:hover span {\n color: #3c83ec;\n}\n.main-module_hint__content__IIh3W {\n min-width: 258px;\n max-width: 500px;\n padding: 1rem !important;\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2) !important;\n}\n.main-module_hint__content_yellow__3NyBP {\n background-color: #fff6cc;\n}\n.main-module_hint__content_yellow__3NyBP.main-module_dropdown__content_top__1bZPH::before {\n border-color: #fff6cc transparent transparent transparent;\n}\n.main-module_hint__content_yellow__3NyBP.main-module_dropdown__content_bottom__10hXS::before {\n border-color: transparent transparent #fff6cc transparent;\n}\n";
8
8
  var cssClasses = {"hint":"main-module_hint__3cahT","hint_spacing-left":"main-module_hint_spacing-left__1dKcO","hint_spacing-right":"main-module_hint_spacing-right__2dV0Q","hint__content":"main-module_hint__content__IIh3W","hint__content_yellow":"main-module_hint__content_yellow__3NyBP","dropdown__content_top":"main-module_dropdown__content_top__1bZPH","dropdown__content_bottom":"main-module_dropdown__content_bottom__10hXS"};
9
9
  styleInject_es['default'](css_248z);
10
10
 
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
6
6
 
7
- var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n@-webkit-keyframes main-module_directionLeftShow__1VVi1 {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes main-module_directionLeftShow__1VVi1 {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@-webkit-keyframes main-module_directionLeftHide__QSuRw {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes main-module_directionLeftHide__QSuRw {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n.main-module_slide__1kcca {\n position: absolute;\n top: 0;\n height: 100%;\n background-color: #fff;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n overflow-y: hidden;\n z-index: 1;\n}\n.main-module_slide__wrapper__3mC8j {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.main-module_slide__header__11UTh {\n width: 100%;\n border-bottom: 2px solid transparent;\n background-color: #fff;\n}\n.main-module_slide__sub-header__7iIPF {\n width: 100%;\n border-bottom: 2px solid transparent;\n background-color: #f3f4f8;\n display: flex;\n align-items: center;\n padding: 1rem;\n}\n.main-module_slide__content__3KeZM {\n scrollbar-color: #79829c #f3f4f8;\n scrollbar-width: thin;\n flex: 1;\n overflow-x: hidden;\n overflow-y: auto;\n}\n.main-module_slide__content__3KeZM::-webkit-scrollbar {\n width: 7px;\n}\n.main-module_slide__content__3KeZM::-webkit-scrollbar-track {\n background-color: #f3f4f8;\n}\n.main-module_slide__content__3KeZM::-webkit-scrollbar-track:hover {\n background-color: #f3f4f8;\n}\n.main-module_slide__content__3KeZM::-webkit-scrollbar-thumb {\n background-color: #5c657e;\n}\n.main-module_slide__content__3KeZM::-webkit-scrollbar-thumb:hover {\n background-color: #2d3748;\n}\n.main-module_slide__footer__3wvMP {\n padding: 0.5rem 1rem 0.5rem 1rem;\n background-color: #f3f4f8;\n border-top: 1px solid #abb4cd;\n box-shadow: 0 1px 5px 0 rgba(171, 180, 205, 0.6);\n}\n.main-module_slide_direction-left__Rg5kV {\n right: 0;\n left: 0;\n -webkit-animation-name: main-module_directionLeftHide__QSuRw;\n animation-name: main-module_directionLeftHide__QSuRw;\n}\n.main-module_slide_direction-left__Rg5kV.main-module_slide_is-open__3twK9 {\n -webkit-animation-name: main-module_directionLeftShow__1VVi1;\n animation-name: main-module_directionLeftShow__1VVi1;\n}\n";
7
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n@-webkit-keyframes main-module_directionLeftShow__1VVi1 {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes main-module_directionLeftShow__1VVi1 {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@-webkit-keyframes main-module_directionLeftHide__QSuRw {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes main-module_directionLeftHide__QSuRw {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n.main-module_slide__1kcca {\n position: absolute;\n top: 0;\n height: 100%;\n background-color: #fff;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n overflow-y: hidden;\n z-index: 1;\n}\n.main-module_slide__wrapper__3mC8j {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.main-module_slide__header__11UTh {\n width: 100%;\n border-bottom: 2px solid transparent;\n background-color: #fff;\n}\n.main-module_slide__sub-header__7iIPF {\n width: 100%;\n border-bottom: 2px solid transparent;\n background-color: #f3f4f8;\n display: flex;\n align-items: center;\n padding: 1rem;\n}\n.main-module_slide__content__3KeZM {\n flex: 1;\n overflow-x: hidden;\n overflow-y: scroll;\n}\n.main-module_slide__footer__3wvMP {\n padding: 0.5rem 1rem 0.5rem 1rem;\n background-color: #f3f4f8;\n border-top: 1px solid #abb4cd;\n box-shadow: 0 1px 5px 0 rgba(171, 180, 205, 0.6);\n}\n.main-module_slide_direction-left__Rg5kV {\n right: 0;\n left: 0;\n -webkit-animation-name: main-module_directionLeftHide__QSuRw;\n animation-name: main-module_directionLeftHide__QSuRw;\n}\n.main-module_slide_direction-left__Rg5kV.main-module_slide_is-open__3twK9 {\n -webkit-animation-name: main-module_directionLeftShow__1VVi1;\n animation-name: main-module_directionLeftShow__1VVi1;\n}\n";
8
8
  var cssClasses = {"slide":"main-module_slide__1kcca","slide__wrapper":"main-module_slide__wrapper__3mC8j","slide__header":"main-module_slide__header__11UTh","slide__sub-header":"main-module_slide__sub-header__7iIPF","slide__content":"main-module_slide__content__3KeZM","slide__footer":"main-module_slide__footer__3wvMP","slide_direction-left":"main-module_slide_direction-left__Rg5kV","directionLeftHide":"main-module_directionLeftHide__QSuRw","slide_is-open":"main-module_slide_is-open__3twK9","directionLeftShow":"main-module_directionLeftShow__1VVi1"};
9
9
  styleInject_es['default'](css_248z);
10
10
 
@@ -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>;
@@ -4,11 +4,15 @@ 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 [fileAsDataUrl, setFileAsDataUrl] = useState(null);
7
8
  const [errors, setErrors] = useState([]);
8
9
  const [isDragOver, setDragOver] = useState(false);
9
10
  const [isPreview, setPreview] = useState(true);
11
+ const reader = new FileReader();
10
12
  useEffect(() => {
11
13
  initialFile && setFile(initialFile);
14
+ reader.addEventListener('load', () => getDataUrlFromFile(reader.result), false);
15
+ return () => reader.removeEventListener('load', () => getDataUrlFromFile(reader.result));
12
16
  }, []);
13
17
  useEffect(() => {
14
18
  initialErrors && setErrors(initialErrors);
@@ -43,21 +47,25 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
43
47
  updateFile(files);
44
48
  };
45
49
  const updateFile = (files) => {
46
- if (files === null || files === void 0 ? void 0 : files.length) {
50
+ if ((files === null || files === void 0 ? void 0 : files.length) && !fileAsDataUrl) {
51
+ reader.readAsDataURL(files[0]);
47
52
  setFile({
48
53
  fileName: files === null || files === void 0 ? void 0 : files[0].name,
49
54
  fileUrl: URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0])
50
55
  });
51
56
  const isValid = validateFileExtension(allowedExtensions, files[0].type);
52
57
  if (isValid)
53
- onChange === null || onChange === void 0 ? void 0 : onChange(files);
58
+ onChange === null || onChange === void 0 ? void 0 : onChange({ fileList: files, fileAsDataUrl });
54
59
  }
55
60
  else {
56
61
  setFile(undefined);
57
- onChange === null || onChange === void 0 ? void 0 : onChange(files);
62
+ onChange === null || onChange === void 0 ? void 0 : onChange({ fileList: files, fileAsDataUrl });
58
63
  }
59
64
  setPreview(true);
60
65
  };
66
+ const getDataUrlFromFile = (fileReaderResult) => {
67
+ setFileAsDataUrl(fileReaderResult);
68
+ };
61
69
  const onDragOver = (event) => {
62
70
  event.stopPropagation();
63
71
  event.preventDefault();
@@ -72,9 +80,10 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
72
80
  const onFileDelete = () => {
73
81
  inputRef.current.value = '';
74
82
  setFile(undefined);
83
+ setFileAsDataUrl(null);
75
84
  setPreview(true);
76
85
  setErrors([]);
77
- onChange === null || onChange === void 0 ? void 0 : onChange(null);
86
+ onChange === null || onChange === void 0 ? void 0 : onChange({ fileList: null, fileAsDataUrl: null });
78
87
  };
79
88
  const onPreviewError = () => {
80
89
  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;"}
@@ -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;"}
@@ -1,6 +1,6 @@
1
1
  import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_hint__3cahT {\n vertical-align: middle;\n}\n.main-module_hint_spacing-left__1dKcO {\n margin-left: 1rem;\n}\n.main-module_hint_spacing-right__2dV0Q {\n margin-right: 1rem;\n}\n.main-module_hint__content__IIh3W {\n min-width: 258px;\n max-width: 500px;\n padding: 1rem !important;\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2) !important;\n}\n.main-module_hint__content_yellow__3NyBP {\n background-color: #fff6cc;\n}\n.main-module_hint__content_yellow__3NyBP.main-module_dropdown__content_top__1bZPH::before {\n border-color: #fff6cc transparent transparent transparent;\n}\n.main-module_hint__content_yellow__3NyBP.main-module_dropdown__content_bottom__10hXS::before {\n border-color: transparent transparent #fff6cc transparent;\n}\n";
3
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_hint__3cahT {\n vertical-align: middle;\n}\n.main-module_hint_spacing-left__1dKcO {\n margin-left: 1rem;\n}\n.main-module_hint_spacing-right__2dV0Q {\n margin-right: 1rem;\n}\n.main-module_hint__3cahT:hover span {\n color: #3c83ec;\n}\n.main-module_hint__content__IIh3W {\n min-width: 258px;\n max-width: 500px;\n padding: 1rem !important;\n box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2) !important;\n}\n.main-module_hint__content_yellow__3NyBP {\n background-color: #fff6cc;\n}\n.main-module_hint__content_yellow__3NyBP.main-module_dropdown__content_top__1bZPH::before {\n border-color: #fff6cc transparent transparent transparent;\n}\n.main-module_hint__content_yellow__3NyBP.main-module_dropdown__content_bottom__10hXS::before {\n border-color: transparent transparent #fff6cc transparent;\n}\n";
4
4
  var cssClasses = {"hint":"main-module_hint__3cahT","hint_spacing-left":"main-module_hint_spacing-left__1dKcO","hint_spacing-right":"main-module_hint_spacing-right__2dV0Q","hint__content":"main-module_hint__content__IIh3W","hint__content_yellow":"main-module_hint__content_yellow__3NyBP","dropdown__content_top":"main-module_dropdown__content_top__1bZPH","dropdown__content_bottom":"main-module_dropdown__content_bottom__10hXS"};
5
5
  styleInject(css_248z);
6
6
 
@@ -1,6 +1,6 @@
1
1
  import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n@-webkit-keyframes main-module_directionLeftShow__1VVi1 {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes main-module_directionLeftShow__1VVi1 {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@-webkit-keyframes main-module_directionLeftHide__QSuRw {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes main-module_directionLeftHide__QSuRw {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n.main-module_slide__1kcca {\n position: absolute;\n top: 0;\n height: 100%;\n background-color: #fff;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n overflow-y: hidden;\n z-index: 1;\n}\n.main-module_slide__wrapper__3mC8j {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.main-module_slide__header__11UTh {\n width: 100%;\n border-bottom: 2px solid transparent;\n background-color: #fff;\n}\n.main-module_slide__sub-header__7iIPF {\n width: 100%;\n border-bottom: 2px solid transparent;\n background-color: #f3f4f8;\n display: flex;\n align-items: center;\n padding: 1rem;\n}\n.main-module_slide__content__3KeZM {\n scrollbar-color: #79829c #f3f4f8;\n scrollbar-width: thin;\n flex: 1;\n overflow-x: hidden;\n overflow-y: auto;\n}\n.main-module_slide__content__3KeZM::-webkit-scrollbar {\n width: 7px;\n}\n.main-module_slide__content__3KeZM::-webkit-scrollbar-track {\n background-color: #f3f4f8;\n}\n.main-module_slide__content__3KeZM::-webkit-scrollbar-track:hover {\n background-color: #f3f4f8;\n}\n.main-module_slide__content__3KeZM::-webkit-scrollbar-thumb {\n background-color: #5c657e;\n}\n.main-module_slide__content__3KeZM::-webkit-scrollbar-thumb:hover {\n background-color: #2d3748;\n}\n.main-module_slide__footer__3wvMP {\n padding: 0.5rem 1rem 0.5rem 1rem;\n background-color: #f3f4f8;\n border-top: 1px solid #abb4cd;\n box-shadow: 0 1px 5px 0 rgba(171, 180, 205, 0.6);\n}\n.main-module_slide_direction-left__Rg5kV {\n right: 0;\n left: 0;\n -webkit-animation-name: main-module_directionLeftHide__QSuRw;\n animation-name: main-module_directionLeftHide__QSuRw;\n}\n.main-module_slide_direction-left__Rg5kV.main-module_slide_is-open__3twK9 {\n -webkit-animation-name: main-module_directionLeftShow__1VVi1;\n animation-name: main-module_directionLeftShow__1VVi1;\n}\n";
3
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n@-webkit-keyframes main-module_directionLeftShow__1VVi1 {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@keyframes main-module_directionLeftShow__1VVi1 {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n@-webkit-keyframes main-module_directionLeftHide__QSuRw {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes main-module_directionLeftHide__QSuRw {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n}\n.main-module_slide__1kcca {\n position: absolute;\n top: 0;\n height: 100%;\n background-color: #fff;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n overflow-y: hidden;\n z-index: 1;\n}\n.main-module_slide__wrapper__3mC8j {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.main-module_slide__header__11UTh {\n width: 100%;\n border-bottom: 2px solid transparent;\n background-color: #fff;\n}\n.main-module_slide__sub-header__7iIPF {\n width: 100%;\n border-bottom: 2px solid transparent;\n background-color: #f3f4f8;\n display: flex;\n align-items: center;\n padding: 1rem;\n}\n.main-module_slide__content__3KeZM {\n flex: 1;\n overflow-x: hidden;\n overflow-y: scroll;\n}\n.main-module_slide__footer__3wvMP {\n padding: 0.5rem 1rem 0.5rem 1rem;\n background-color: #f3f4f8;\n border-top: 1px solid #abb4cd;\n box-shadow: 0 1px 5px 0 rgba(171, 180, 205, 0.6);\n}\n.main-module_slide_direction-left__Rg5kV {\n right: 0;\n left: 0;\n -webkit-animation-name: main-module_directionLeftHide__QSuRw;\n animation-name: main-module_directionLeftHide__QSuRw;\n}\n.main-module_slide_direction-left__Rg5kV.main-module_slide_is-open__3twK9 {\n -webkit-animation-name: main-module_directionLeftShow__1VVi1;\n animation-name: main-module_directionLeftShow__1VVi1;\n}\n";
4
4
  var cssClasses = {"slide":"main-module_slide__1kcca","slide__wrapper":"main-module_slide__wrapper__3mC8j","slide__header":"main-module_slide__header__11UTh","slide__sub-header":"main-module_slide__sub-header__7iIPF","slide__content":"main-module_slide__content__3KeZM","slide__footer":"main-module_slide__footer__3wvMP","slide_direction-left":"main-module_slide_direction-left__Rg5kV","directionLeftHide":"main-module_directionLeftHide__QSuRw","slide_is-open":"main-module_slide_is-open__3twK9","directionLeftShow":"main-module_directionLeftShow__1VVi1"};
5
5
  styleInject(css_248z);
6
6
 
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.11",
5
+ "version": "2.8.12-2",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",