@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.
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.js +3 -2
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js +13 -4
- package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js +3 -2
- package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js.map +1 -1
- package/build/cjs/packages/aurora/src/css/hint/main.module.less.js +1 -1
- package/build/cjs/packages/aurora/src/css/slide/main.module.less.js +1 -1
- package/build/esm/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.js +3 -2
- package/build/esm/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.js.map +1 -1
- package/build/esm/packages/aurora/src/components/controls/types.d.ts +4 -4
- package/build/esm/packages/aurora/src/components/controls/types.js +3 -3
- package/build/esm/packages/aurora/src/components/controls/types.js.map +1 -1
- package/build/esm/packages/aurora/src/components/file_picker/types.d.ts +6 -2
- package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js +13 -4
- package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
- package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js +3 -2
- package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js.map +1 -1
- package/build/esm/packages/aurora/src/css/hint/main.module.less.js +1 -1
- package/build/esm/packages/aurora/src/css/slide/main.module.less.js +1 -1
- package/package.json +1 -1
package/build/cjs/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.js
CHANGED
|
@@ -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 = (
|
|
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 },
|
package/build/cjs/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.js.map
CHANGED
|
@@ -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 (
|
|
26
|
-
|
|
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
|
|
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
|
|
package/build/esm/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.js
CHANGED
|
@@ -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 = (
|
|
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 },
|
package/build/esm/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.js.map
CHANGED
|
@@ -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?: (
|
|
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,
|
|
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?: (
|
|
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?: (
|
|
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 (
|
|
18
|
-
|
|
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
|
|
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
|
|