@dreamcommerce/aurora 2.6.0-11 → 2.6.0-12

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 (25) hide show
  1. package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js +0 -3
  2. package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
  3. package/build/cjs/packages/aurora/src/components/image_picker/index.js +2 -62
  4. package/build/cjs/packages/aurora/src/components/image_picker/index.js.map +1 -1
  5. package/build/cjs/packages/aurora/src/components/message-box/index.js +1 -1
  6. package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js +12 -1
  7. package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js.map +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/file_picker/use_file_picker.js +1 -4
  10. package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
  11. package/build/esm/packages/aurora/src/components/image_picker/index.js +2 -62
  12. package/build/esm/packages/aurora/src/components/image_picker/index.js.map +1 -1
  13. package/build/esm/packages/aurora/src/components/message-box/index.d.ts +1 -1
  14. package/build/esm/packages/aurora/src/components/message-box/index.js +1 -1
  15. package/build/esm/packages/aurora/src/components/message-box/types.d.ts +1 -1
  16. package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js +13 -2
  17. package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js.map +1 -1
  18. package/build/esm/packages/aurora/src/css/slide/main.module.less.js +1 -1
  19. package/package.json +1 -1
  20. package/build/esm/packages/aurora/src/components/image_picker/utils.d.ts +0 -1
  21. package/build/esm/packages/aurora/src/components/image_picker/utils.js +0 -5
  22. package/build/esm/packages/aurora/src/components/image_picker/utils.js.map +0 -1
  23. package/build/esm/packages/aurora/src/components/xhr_image_picker/utils.d.ts +0 -1
  24. package/build/esm/packages/aurora/src/components/xhr_image_picker/utils.js +0 -45
  25. package/build/esm/packages/aurora/src/components/xhr_image_picker/utils.js.map +0 -1
package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js CHANGED
@@ -11,9 +11,6 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
11
11
  const [errors, setErrors] = React.useState(initialErrors !== null && initialErrors !== void 0 ? initialErrors : []);
12
12
  const [isDragOver, setDragOver] = React.useState(false);
13
13
  const [isPreview, setPreview] = React.useState(true);
14
- React.useEffect(() => {
15
- setFile(initialFile);
16
- }, [initialFile]);
17
14
  const onDropFile = (event) => {
18
15
  setErrors([]);
19
16
  event.stopPropagation();
package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}
package/build/cjs/packages/aurora/src/components/image_picker/index.js CHANGED
@@ -21,24 +21,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
21
21
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
22
22
  var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
23
23
 
24
- const ImagePicker = ({ id, onChange, errors: initialErrors, allowedExtensions = [constants.FILES_EXTENSIONS.WEBP, constants.FILES_EXTENSIONS.JPG, constants.FILES_EXTENSIONS.PNG, constants.FILES_EXTENSIONS.GIF, constants.FILES_EXTENSIONS.SVG], initialFile, name, className = '', onImageSizeUpdated
25
- // hasWidthInput,
26
- // widthInputPostfix = 'px',
27
- // widthInputLabel,
28
- // widthInputHint
29
- }) => {
24
+ const ImagePicker = ({ id, onChange, errors: initialErrors, allowedExtensions = [constants.FILES_EXTENSIONS.WEBP, constants.FILES_EXTENSIONS.JPG, constants.FILES_EXTENSIONS.PNG, constants.FILES_EXTENSIONS.GIF, constants.FILES_EXTENSIONS.SVG], initialFile, name, className = '', onImageSizeUpdated }) => {
30
25
  const [t] = useTranslation.useTranslation();
31
26
  const inputRef = React.createRef();
32
- // const [fileFormatIsCorrect, setFileFormatIsCorrect] = useState<boolean>(true);
33
27
  const [imageSize, setImageSize] = React.useState(undefined);
34
- // const [widthInputValue, setWidthInputValue] = useState<number | undefined>();
35
- // const [isInputWidthTooBig, setIsInputWidthTooBig] = useState<boolean>(false);
36
- const onImageFileChange = (fileList) => {
37
- onChange === null || onChange === void 0 ? void 0 : onChange(fileList);
38
- };
39
- const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver } = use_file_picker.useFilePicker({ initialFile, onChange: onImageFileChange, allowedExtensions, initialErrors, inputRef });
28
+ const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver } = use_file_picker.useFilePicker({ initialFile, onChange, allowedExtensions, initialErrors, inputRef });
40
29
  const acceptFiles = utils.getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
41
- // const showMaxWidthInput = hasWidthInput && file && fileFormatIsCorrect && !isVectorImage;
42
30
  const imagePickerClassName = classnames__default['default'](main_module['default'][css_classes['default'].imagePicker], className && className);
43
31
  const imagePickerWrapperClassName = classnames__default['default'](main_module['default'][css_classes['default'].imagePickerWrapper], file && main_module['default'][css_classes['default'].imagePickerWrapperHasFile], {
44
32
  [main_module['default'][css_classes['default'].imagePickerWrapperError]]: errors.length
@@ -57,62 +45,14 @@ const ImagePicker = ({ id, onChange, errors: initialErrors, allowedExtensions =
57
45
  }
58
46
  });
59
47
  const dragOverStyles = useStyles({ isDragOver });
60
- // const getImageWidth = (event: any) => {
61
- // let selectedImage;
62
- //
63
- // if (event.target instanceof HTMLInputElement) {
64
- // const {
65
- // target: { files }
66
- // } = event;
67
- // selectedImage = files[0];
68
- // } else {
69
- // const {
70
- // dataTransfer: { files }
71
- // } = event;
72
- // selectedImage = files[0];
73
- // }
74
- //
75
- // const imgElement = document.createElement('img');
76
- // const objectURL = URL.createObjectURL(selectedImage);
77
- //
78
- // imgElement.onload = () => {
79
- // setImageSize({ width: imgElement.width, height: imgElement.height });
80
- // URL.revokeObjectURL(objectURL);
81
- // };
82
- //
83
- // imgElement.src = objectURL;
84
- // };
85
48
  const handlePreviewLoaded = (event) => {
86
49
  const $image = event.target;
87
50
  setImageSize({ width: $image.width, height: $image.height });
88
51
  };
89
- // const checkIfInputMaxWidthIsGreaterThenImageWidth = (): void => {
90
- // if (!widthInputValue || !imageSize.width) return;
91
- // widthInputValue > imageSize.width ? setIsInputWidthTooBig(true) : setIsInputWidthTooBig(false);
92
- // };
93
- // const handleOnDropFile = (event: React.DragEvent<HTMLLabelElement>) => {
94
- // onDropFile(event);
95
- // // getImageWidth(event);
96
- // };
97
- //
98
- // const handleOnFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
99
- // onFileChange(event);
100
- // // getImageWidth(event);
101
- // };
102
52
  const handleOnFileDelete = () => {
103
53
  setImageSize(undefined);
104
54
  onFileDelete();
105
55
  };
106
- // const handleOnWidthInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
107
- // setWidthInputValue(event.target.valueAsNumber);
108
- // };
109
- // useEffect(() => {
110
- // // checkIfInvalideFileFormatErrorOccured(errors) ? setFileFormatIsCorrect(false) : setFileFormatIsCorrect(true);
111
- // // file && checkIfInputMaxWidthIsGreaterThenImageWidth();
112
- // }, [errors, file, widthInputValue]);
113
- // useEffect(() => {
114
- // setWidthInputValue(imageSize.width);
115
- // }, [imageSize]);
116
56
  return (React__default['default'].createElement("div", { className: imagePickerClassName },
117
57
  React__default['default'].createElement("div", { className: `${imagePickerWrapperClassName} ${dragOverStyles.imagePickerWrapper}` },
118
58
  file &&
package/build/cjs/packages/aurora/src/components/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,6BAA6B,iEAAqE;AAClG,2BAA2B,yDAA6D;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}
package/build/cjs/packages/aurora/src/components/message-box/index.js CHANGED
@@ -13,7 +13,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
  const MessageBox = ({ children, header, type, withoutIcon, fullWidth, className }) => {
14
14
  const messageBoxClassName = classNames.classNames([className, 'message-box', type && `message-box_${type}`, fullWidth && `message-box_full-width`], main_module['default']);
15
15
  return (React__default['default'].createElement("div", { className: messageBoxClassName },
16
- !withoutIcon && React__default['default'].createElement("div", { className: main_module['default']['message-box__icon'] }),
16
+ !withoutIcon && type !== 'blank' && React__default['default'].createElement("div", { className: main_module['default']['message-box__icon'] }),
17
17
  React__default['default'].createElement("div", { className: main_module['default']['message-box__content'] },
18
18
  header && React__default['default'].createElement("h4", { className: main_module['default']['message-box__header'] }, header),
19
19
  children)));
package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js CHANGED
@@ -14,15 +14,26 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
14
 
15
15
  const XhrImagePicker = ({ id, url, name, onUploaded, initialFile, errors, onImageSizeUpdated, allowedExtensions = [constants.FILES_EXTENSIONS.WEBP, constants.FILES_EXTENSIONS.JPG, constants.FILES_EXTENSIONS.PNG, constants.FILES_EXTENSIONS.GIF, constants.FILES_EXTENSIONS.SVG] }) => {
16
16
  const httpApi = use_http_api.useHttpApi();
17
+ const pendingRequestRef = React__default['default'].useRef();
17
18
  const onChange = async (fileList) => {
18
- const { response } = httpApi.fetch({
19
+ if (!fileList)
20
+ return;
21
+ if (pendingRequestRef.current) {
22
+ pendingRequestRef.current();
23
+ pendingRequestRef.current = undefined;
24
+ }
25
+ const { response, cancelRequest } = httpApi.fetch({
19
26
  url,
20
27
  method: http_requester_contants.REQUEST_TYPES.post,
21
28
  data: fileList[0]
22
29
  });
30
+ pendingRequestRef.current = cancelRequest;
23
31
  const data = await response;
24
32
  onUploaded === null || onUploaded === void 0 ? void 0 : onUploaded(data, fileList[0]);
25
33
  };
34
+ React.useEffect(() => {
35
+ return () => { var _a; return (_a = pendingRequestRef.current) === null || _a === void 0 ? void 0 : _a.call(pendingRequestRef); };
36
+ }, []);
26
37
  return (React__default['default'].createElement(index['default'], { id: id, name: name, onChange: onChange, errors: errors, allowedExtensions: allowedExtensions, initialFile: initialFile, onImageSizeUpdated: onImageSizeUpdated }));
27
38
  };
28
39
 
package/build/cjs/packages/aurora/src/components/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;"}
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/build/cjs/packages/aurora/src/css/slide/main.module.less.js CHANGED
@@ -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: 1px solid #abb4cd;\n background-color: #fff;\n display: flex;\n align-items: center;\n box-shadow: 0 0 9px 0 rgba(16, 47, 102, 0.16);\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: 1.5rem 1rem 1.5rem 1rem;\n background-color: #fff;\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: 1px solid #abb4cd;\n background-color: #fff;\n display: flex;\n align-items: center;\n box-shadow: 0 0 9px 0 rgba(16, 47, 102, 0.16);\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__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/file_picker/use_file_picker.js CHANGED
@@ -1,4 +1,4 @@
1
- import { useState, useEffect } from 'react';
1
+ import { useState } 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
 
@@ -7,9 +7,6 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
7
7
  const [errors, setErrors] = useState(initialErrors !== null && initialErrors !== void 0 ? initialErrors : []);
8
8
  const [isDragOver, setDragOver] = useState(false);
9
9
  const [isPreview, setPreview] = useState(true);
10
- useEffect(() => {
11
- setFile(initialFile);
12
- }, [initialFile]);
13
10
  const onDropFile = (event) => {
14
11
  setErrors([]);
15
12
  event.stopPropagation();
package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}
package/build/esm/packages/aurora/src/components/image_picker/index.js CHANGED
@@ -12,24 +12,12 @@ import ImageInput from './components/image_input.js';
12
12
  import { ImagePreview } from './components/image_preview.js';
13
13
  import { UploadedImageItem } from './components/uploaded_image_item.js';
14
14
 
15
- const ImagePicker = ({ id, onChange, errors: initialErrors, allowedExtensions = [FILES_EXTENSIONS.WEBP, FILES_EXTENSIONS.JPG, FILES_EXTENSIONS.PNG, FILES_EXTENSIONS.GIF, FILES_EXTENSIONS.SVG], initialFile, name, className = '', onImageSizeUpdated
16
- // hasWidthInput,
17
- // widthInputPostfix = 'px',
18
- // widthInputLabel,
19
- // widthInputHint
20
- }) => {
15
+ const ImagePicker = ({ id, onChange, errors: initialErrors, allowedExtensions = [FILES_EXTENSIONS.WEBP, FILES_EXTENSIONS.JPG, FILES_EXTENSIONS.PNG, FILES_EXTENSIONS.GIF, FILES_EXTENSIONS.SVG], initialFile, name, className = '', onImageSizeUpdated }) => {
21
16
  const [t] = useTranslation();
22
17
  const inputRef = createRef();
23
- // const [fileFormatIsCorrect, setFileFormatIsCorrect] = useState<boolean>(true);
24
18
  const [imageSize, setImageSize] = useState(undefined);
25
- // const [widthInputValue, setWidthInputValue] = useState<number | undefined>();
26
- // const [isInputWidthTooBig, setIsInputWidthTooBig] = useState<boolean>(false);
27
- const onImageFileChange = (fileList) => {
28
- onChange === null || onChange === void 0 ? void 0 : onChange(fileList);
29
- };
30
- const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver } = useFilePicker({ initialFile, onChange: onImageFileChange, allowedExtensions, initialErrors, inputRef });
19
+ const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver } = useFilePicker({ initialFile, onChange, allowedExtensions, initialErrors, inputRef });
31
20
  const acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
32
- // const showMaxWidthInput = hasWidthInput && file && fileFormatIsCorrect && !isVectorImage;
33
21
  const imagePickerClassName = classnames(styles[CSS_CLASSES.imagePicker], className && className);
34
22
  const imagePickerWrapperClassName = classnames(styles[CSS_CLASSES.imagePickerWrapper], file && styles[CSS_CLASSES.imagePickerWrapperHasFile], {
35
23
  [styles[CSS_CLASSES.imagePickerWrapperError]]: errors.length
@@ -48,62 +36,14 @@ const ImagePicker = ({ id, onChange, errors: initialErrors, allowedExtensions =
48
36
  }
49
37
  });
50
38
  const dragOverStyles = useStyles({ isDragOver });
51
- // const getImageWidth = (event: any) => {
52
- // let selectedImage;
53
- //
54
- // if (event.target instanceof HTMLInputElement) {
55
- // const {
56
- // target: { files }
57
- // } = event;
58
- // selectedImage = files[0];
59
- // } else {
60
- // const {
61
- // dataTransfer: { files }
62
- // } = event;
63
- // selectedImage = files[0];
64
- // }
65
- //
66
- // const imgElement = document.createElement('img');
67
- // const objectURL = URL.createObjectURL(selectedImage);
68
- //
69
- // imgElement.onload = () => {
70
- // setImageSize({ width: imgElement.width, height: imgElement.height });
71
- // URL.revokeObjectURL(objectURL);
72
- // };
73
- //
74
- // imgElement.src = objectURL;
75
- // };
76
39
  const handlePreviewLoaded = (event) => {
77
40
  const $image = event.target;
78
41
  setImageSize({ width: $image.width, height: $image.height });
79
42
  };
80
- // const checkIfInputMaxWidthIsGreaterThenImageWidth = (): void => {
81
- // if (!widthInputValue || !imageSize.width) return;
82
- // widthInputValue > imageSize.width ? setIsInputWidthTooBig(true) : setIsInputWidthTooBig(false);
83
- // };
84
- // const handleOnDropFile = (event: React.DragEvent<HTMLLabelElement>) => {
85
- // onDropFile(event);
86
- // // getImageWidth(event);
87
- // };
88
- //
89
- // const handleOnFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
90
- // onFileChange(event);
91
- // // getImageWidth(event);
92
- // };
93
43
  const handleOnFileDelete = () => {
94
44
  setImageSize(undefined);
95
45
  onFileDelete();
96
46
  };
97
- // const handleOnWidthInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
98
- // setWidthInputValue(event.target.valueAsNumber);
99
- // };
100
- // useEffect(() => {
101
- // // checkIfInvalideFileFormatErrorOccured(errors) ? setFileFormatIsCorrect(false) : setFileFormatIsCorrect(true);
102
- // // file && checkIfInputMaxWidthIsGreaterThenImageWidth();
103
- // }, [errors, file, widthInputValue]);
104
- // useEffect(() => {
105
- // setWidthInputValue(imageSize.width);
106
- // }, [imageSize]);
107
47
  return (React.createElement("div", { className: imagePickerClassName },
108
48
  React.createElement("div", { className: `${imagePickerWrapperClassName} ${dragOverStyles.imagePickerWrapper}` },
109
49
  file &&
package/build/esm/packages/aurora/src/components/image_picker/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG,gCAAgC,yDAA6D;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}
package/build/esm/packages/aurora/src/components/message-box/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
2
1
  import { IMessageBox } from './types';
2
+ import React from 'react';
3
3
  declare const MessageBox: React.FC<IMessageBox>;
4
4
  export default MessageBox;
package/build/esm/packages/aurora/src/components/message-box/index.js CHANGED
@@ -5,7 +5,7 @@ import cssClasses from '../../css/message-box/main.module.less.js';
5
5
  const MessageBox = ({ children, header, type, withoutIcon, fullWidth, className }) => {
6
6
  const messageBoxClassName = classNames([className, 'message-box', type && `message-box_${type}`, fullWidth && `message-box_full-width`], cssClasses);
7
7
  return (React.createElement("div", { className: messageBoxClassName },
8
- !withoutIcon && React.createElement("div", { className: cssClasses['message-box__icon'] }),
8
+ !withoutIcon && type !== 'blank' && React.createElement("div", { className: cssClasses['message-box__icon'] }),
9
9
  React.createElement("div", { className: cssClasses['message-box__content'] },
10
10
  header && React.createElement("h4", { className: cssClasses['message-box__header'] }, header),
11
11
  children)));
package/build/esm/packages/aurora/src/components/message-box/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- export declare type TMessageBoxType = 'success' | 'alert' | 'warning' | 'light';
2
+ export declare type TMessageBoxType = 'success' | 'alert' | 'warning' | 'light' | 'blank';
3
3
  export interface IMessageBox {
4
4
  type?: TMessageBoxType;
5
5
  header?: string;
package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { useEffect } from 'react';
2
2
  import { FILES_EXTENSIONS } from '../file_picker/constants.js';
3
3
  import { REQUEST_TYPES } from '../../../../star_core/build/esm/packages/star_core/src/features/http_requester/http_requester_contants.js';
4
4
  import ImagePicker from '../image_picker/index.js';
@@ -6,15 +6,26 @@ import { useHttpApi } from '../../hooks/use_http_api.js';
6
6
 
7
7
  const XhrImagePicker = ({ id, url, name, onUploaded, initialFile, errors, onImageSizeUpdated, allowedExtensions = [FILES_EXTENSIONS.WEBP, FILES_EXTENSIONS.JPG, FILES_EXTENSIONS.PNG, FILES_EXTENSIONS.GIF, FILES_EXTENSIONS.SVG] }) => {
8
8
  const httpApi = useHttpApi();
9
+ const pendingRequestRef = React.useRef();
9
10
  const onChange = async (fileList) => {
10
- const { response } = httpApi.fetch({
11
+ if (!fileList)
12
+ return;
13
+ if (pendingRequestRef.current) {
14
+ pendingRequestRef.current();
15
+ pendingRequestRef.current = undefined;
16
+ }
17
+ const { response, cancelRequest } = httpApi.fetch({
11
18
  url,
12
19
  method: REQUEST_TYPES.post,
13
20
  data: fileList[0]
14
21
  });
22
+ pendingRequestRef.current = cancelRequest;
15
23
  const data = await response;
16
24
  onUploaded === null || onUploaded === void 0 ? void 0 : onUploaded(data, fileList[0]);
17
25
  };
26
+ useEffect(() => {
27
+ return () => { var _a; return (_a = pendingRequestRef.current) === null || _a === void 0 ? void 0 : _a.call(pendingRequestRef); };
28
+ }, []);
18
29
  return (React.createElement(ImagePicker, { id: id, name: name, onChange: onChange, errors: errors, allowedExtensions: allowedExtensions, initialFile: initialFile, onImageSizeUpdated: onImageSizeUpdated }));
19
30
  };
20
31
 
package/build/esm/packages/aurora/src/components/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;"}
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;"}
package/build/esm/packages/aurora/src/css/slide/main.module.less.js CHANGED
@@ -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: 1px solid #abb4cd;\n background-color: #fff;\n display: flex;\n align-items: center;\n box-shadow: 0 0 9px 0 rgba(16, 47, 102, 0.16);\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: 1.5rem 1rem 1.5rem 1rem;\n background-color: #fff;\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: 1px solid #abb4cd;\n background-color: #fff;\n display: flex;\n align-items: center;\n box-shadow: 0 0 9px 0 rgba(16, 47, 102, 0.16);\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__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.6.0-11",
5
+ "version": "2.6.0-12",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",
package/build/esm/packages/aurora/src/components/image_picker/utils.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const checkIfInvalideFileFormatErrorOccured: (errorsArray: string[] | undefined) => boolean | undefined;
package/build/esm/packages/aurora/src/components/image_picker/utils.js DELETED
@@ -1,5 +0,0 @@
1
- import { FILE_PICKER_ERROR } from '@auroraComponents/file_picker/constants';
2
- export const checkIfInvalideFileFormatErrorOccured = (errorsArray) => {
3
- return errorsArray && errorsArray.includes(FILE_PICKER_ERROR.invalidFileFormat);
4
- };
5
- //# sourceMappingURL=utils.js.map
package/build/esm/packages/aurora/src/components/image_picker/utils.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAE5E,MAAM,CAAC,MAAM,qCAAqC,GAAG,CAAC,WAAiC,EAAuB,EAAE;IAC5G,OAAO,WAAW,IAAI,WAAW,CAAC,QAAQ,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;AACpF,CAAC,CAAC"}
package/build/esm/packages/aurora/src/components/xhr_image_picker/utils.js DELETED
@@ -1,45 +0,0 @@
1
- // import { useCallback, useEffect, useState } from 'react';
2
- //
3
- // import { AxiosClient } from '@dreamcommerce/star_core';
4
- // import { TFetchXhrImageData } from './types';
5
- //
6
- // export const useXhr = ({ url, imageFile }: TFetchXhrImageData) => {
7
- // const [imageId, setImageId] = useState();
8
- // const fetchClient = new AxiosClient();
9
- //
10
- // const fetchXhrData = useCallback(
11
- // ({ url, imageFile, handleResponseData }) => {
12
- // fetchClient
13
- // .fetch<any>({ method: 'post', url, data: imageFile })
14
- // .then((response) => {
15
- // handleResponseData(response);
16
- // })
17
- // .catch();
18
- // },
19
- // [fetchClient]
20
- // );
21
- //
22
- // const getImageId = () => {
23
- // fetchXhrData({
24
- // url,
25
- // imageFile,
26
- // handleResponseData: (response) => {
27
- // setImageId(response);
28
- // }
29
- // });
30
- // };
31
- //
32
- // useEffect(() => {
33
- // getImageId();
34
- //
35
- // return () => {
36
- // fetchClient.makeCancelable().cancelRequest();
37
- // };
38
- // }, []);
39
- //
40
- // return {
41
- // imageId
42
- // };
43
- // };
44
- export {};
45
- //# sourceMappingURL=utils.js.map
package/build/esm/packages/aurora/src/components/xhr_image_picker/utils.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../../../src/components/xhr_image_picker/utils.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,EAAE;AACF,0DAA0D;AAC1D,gDAAgD;AAChD,EAAE;AACF,sEAAsE;AACtE,gDAAgD;AAChD,6CAA6C;AAC7C,EAAE;AACF,wCAAwC;AACxC,wDAAwD;AACxD,0BAA0B;AAC1B,wEAAwE;AACxE,wCAAwC;AACxC,oDAAoD;AACpD,qBAAqB;AACrB,4BAA4B;AAC5B,aAAa;AACb,wBAAwB;AACxB,SAAS;AACT,EAAE;AACF,iCAAiC;AACjC,yBAAyB;AACzB,mBAAmB;AACnB,yBAAyB;AACzB,kDAAkD;AAClD,wCAAwC;AACxC,gBAAgB;AAChB,cAAc;AACd,SAAS;AACT,EAAE;AACF,wBAAwB;AACxB,wBAAwB;AACxB,EAAE;AACF,yBAAyB;AACzB,4DAA4D;AAC5D,aAAa;AACb,cAAc;AACd,EAAE;AACF,eAAe;AACf,kBAAkB;AAClB,SAAS;AACT,KAAK"}