@dreamcommerce/aurora 2.6.0-11 → 2.6.0-13

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 (40) hide show
  1. package/build/cjs/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.js +10 -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 +7 -5
  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/image_picker/components/image_input.js +3 -3
  6. package/build/cjs/packages/aurora/src/components/image_picker/css_classes.js +2 -1
  7. package/build/cjs/packages/aurora/src/components/image_picker/css_classes.js.map +1 -1
  8. package/build/cjs/packages/aurora/src/components/image_picker/index.js +3 -62
  9. package/build/cjs/packages/aurora/src/components/image_picker/index.js.map +1 -1
  10. package/build/cjs/packages/aurora/src/components/message-box/index.js +1 -1
  11. package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js +14 -3
  12. package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js.map +1 -1
  13. package/build/cjs/packages/aurora/src/css/image_picker/main.module.less.js +2 -2
  14. package/build/cjs/packages/aurora/src/css/slide/main.module.less.js +1 -1
  15. package/build/esm/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.js +11 -3
  16. package/build/esm/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.js.map +1 -1
  17. package/build/esm/packages/aurora/src/components/file_picker/types.d.ts +2 -0
  18. package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.d.ts +1 -1
  19. package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js +8 -6
  20. package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
  21. package/build/esm/packages/aurora/src/components/image_picker/components/image_input.js +3 -3
  22. package/build/esm/packages/aurora/src/components/image_picker/css_classes.d.ts +1 -0
  23. package/build/esm/packages/aurora/src/components/image_picker/css_classes.js +2 -1
  24. package/build/esm/packages/aurora/src/components/image_picker/css_classes.js.map +1 -1
  25. package/build/esm/packages/aurora/src/components/image_picker/index.js +3 -62
  26. package/build/esm/packages/aurora/src/components/image_picker/index.js.map +1 -1
  27. package/build/esm/packages/aurora/src/components/message-box/index.d.ts +1 -1
  28. package/build/esm/packages/aurora/src/components/message-box/index.js +1 -1
  29. package/build/esm/packages/aurora/src/components/message-box/types.d.ts +1 -1
  30. package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js +15 -4
  31. package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js.map +1 -1
  32. package/build/esm/packages/aurora/src/css/image_picker/main.module.less.js +2 -2
  33. package/build/esm/packages/aurora/src/css/slide/main.module.less.js +1 -1
  34. package/package.json +1 -1
  35. package/build/esm/packages/aurora/src/components/image_picker/utils.d.ts +0 -1
  36. package/build/esm/packages/aurora/src/components/image_picker/utils.js +0 -5
  37. package/build/esm/packages/aurora/src/components/image_picker/utils.js.map +0 -1
  38. package/build/esm/packages/aurora/src/components/xhr_image_picker/utils.d.ts +0 -1
  39. package/build/esm/packages/aurora/src/components/xhr_image_picker/utils.js +0 -45
  40. package/build/esm/packages/aurora/src/components/xhr_image_picker/utils.js.map +0 -1
@@ -12,13 +12,21 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
 
14
14
  const ControlXhrImagePicker = ({ url, label, isRequired, id, name, onChange, allowedExtensions, initialFile, className, errors, hint, labelAdditionalInfo, onUploaded, onImageSizeUpdated }) => {
15
- return (React__default['default'].createElement(index['default'], { errors: errors, name: name, id: id },
15
+ const [controlErrors, setErrors] = React.useState(errors);
16
+ const handleControlError = (errors) => {
17
+ setErrors(errors);
18
+ };
19
+ const handleControlChange = (fileList) => {
20
+ setErrors([]);
21
+ onChange === null || onChange === void 0 ? void 0 : onChange(fileList);
22
+ };
23
+ return (React__default['default'].createElement(index['default'], { errors: controlErrors, name: name, id: id },
16
24
  (label || hint) && (React__default['default'].createElement(index['default'].Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
17
25
  label,
18
26
  hint && React__default['default'].createElement(index$1['default'], { hint: hint, spacingLeft: true }))),
19
27
  React__default['default'].createElement(index['default'].Content, null,
20
28
  React__default['default'].createElement(index['default'].Element, null,
21
- React__default['default'].createElement(index$2['default'], { url: url, id: id, name: name, onChange: onChange, allowedExtensions: allowedExtensions, initialFile: initialFile, className: className, errors: errors, onUploaded: onUploaded, onImageSizeUpdated: onImageSizeUpdated }))),
29
+ React__default['default'].createElement(index$2['default'], { url: url, id: id, name: name, onChange: handleControlChange, onError: handleControlError, allowedExtensions: allowedExtensions, initialFile: initialFile, className: className, errors: errors, onUploaded: onUploaded, onImageSizeUpdated: onImageSizeUpdated }))),
22
30
  React__default['default'].createElement(index['default'].Errors, null)));
23
31
  };
24
32
 
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -6,14 +6,11 @@ var React = require('react');
6
6
  var i18n = require('../../i18n.js');
7
7
  var constants = require('./constants.js');
8
8
 
9
- const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors }) => {
9
+ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors, onError }) => {
10
10
  const [file, setFile] = React.useState(initialFile);
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();
@@ -31,7 +28,12 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
31
28
  const isValid = allowedExtensions.reduce((acc, extension) => {
32
29
  return acc ? acc : constants.MIME_TYPE_TO_FILE_EXTENSIONS[mimeType] === extension;
33
30
  }, false);
34
- !isValid ? setErrors([...errors, i18n['default'].t(constants.FILE_PICKER_ERROR.invalidFileFormat)]) : setErrors([]);
31
+ if (isValid) {
32
+ setErrors([]);
33
+ return;
34
+ }
35
+ setErrors([...errors, i18n['default'].t(constants.FILE_PICKER_ERROR.invalidFileFormat)]);
36
+ onError === null || onError === void 0 ? void 0 : onError(errors);
35
37
  };
36
38
  const onFileChange = ({ target: { files } }) => {
37
39
  setErrors([]);
@@ -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;AACA;AACA;AACA;AACA;AACA;"}
@@ -18,12 +18,12 @@ const ImageInput = ({ id, onDropFile, onDragOver, onDragLeave, allowedExtensions
18
18
  return (React__default['default'].createElement("label", { htmlFor: id, onDrop: onDropFile, onDragOver: onDragOver, onDragLeave: onDragLeave, className: main_module['default'][css_classes['default'].imagePickerLabel] },
19
19
  React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerDescription] },
20
20
  React__default['default'].createElement(icon_upload['default'], { className: main_module['default'][css_classes['default'].imagePickerUploadIcon] }),
21
- React__default['default'].createElement("p", null, t('Drag a file here or browse')),
22
- React__default['default'].createElement("span", null,
21
+ React__default['default'].createElement("div", null, t('Drag a file here or browse')),
22
+ React__default['default'].createElement("span", { className: main_module['default'][css_classes['default'].imagePickerSupportedFormats] },
23
23
  "(",
24
24
  t('supported format'),
25
25
  ": ",
26
- allowedExtensions.join(', '),
26
+ allowedExtensions.map((extension) => `*.${extension}`).join(', '),
27
27
  ")"))));
28
28
  };
29
29
  var ImageInput$1 = with_translation['default'](ImageInput);
@@ -21,7 +21,8 @@ var CSS_CLASSES = {
21
21
  imagePickerInput: `${imagePicker}__input`,
22
22
  imagePickerSelectedFile: `${imagePicker}__selected-file`,
23
23
  imagePickerSelectedFileNameWrapper: `${imagePicker}__selected-file-name-wrapper`,
24
- imagePickerSelectedFileRemoveWrapper: `${imagePicker}__selected-file-remove-wrapper`
24
+ imagePickerSelectedFileRemoveWrapper: `${imagePicker}__selected-file-remove-wrapper`,
25
+ imagePickerSupportedFormats: `${imagePicker}__supported-formats`
25
26
  };
26
27
 
27
28
  exports.default = CSS_CLASSES;
@@ -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;"}
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;"}
@@ -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, onError, 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, onError, 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,15 @@ 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]);
56
+ console.log('errors', errors);
116
57
  return (React__default['default'].createElement("div", { className: imagePickerClassName },
117
58
  React__default['default'].createElement("div", { className: `${imagePickerWrapperClassName} ${dragOverStyles.imagePickerWrapper}` },
118
59
  file &&
@@ -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;AACA;"}
@@ -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)));
@@ -12,18 +12,29 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
 
13
13
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
14
 
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] }) => {
15
+ const XhrImagePicker = ({ id, url, name, onUploaded, initialFile, errors, onError, 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 || !fileList.length)
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
  };
26
- return (React__default['default'].createElement(index['default'], { id: id, name: name, onChange: onChange, errors: errors, allowedExtensions: allowedExtensions, initialFile: initialFile, onImageSizeUpdated: onImageSizeUpdated }));
34
+ React.useEffect(() => {
35
+ return () => { var _a; return (_a = pendingRequestRef.current) === null || _a === void 0 ? void 0 : _a.call(pendingRequestRef); };
36
+ }, []);
37
+ return (React__default['default'].createElement(index['default'], { id: id, name: name, onChange: onChange, onError: onError, errors: errors, allowedExtensions: allowedExtensions, initialFile: initialFile, onImageSizeUpdated: onImageSizeUpdated }));
27
38
  };
28
39
 
29
40
  exports.default = XhrImagePicker;
@@ -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;"}
@@ -4,8 +4,8 @@ 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_image-picker__wrapper__2RK3f {\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 46px;\n left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n fill: #3c83ec;\n}\n.main-module_image-picker__label__1i_Fq {\n cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n display: none;\n}\n.main-module_image-picker__description__1v13N {\n padding: 2rem 0;\n text-align: center;\n}\n.main-module_image-picker__description__1v13N p {\n color: #3c83ec;\n}\n.main-module_image-picker__description__1v13N span {\n font-size: 12px;\n color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n width: 1rem;\n height: auto;\n margin-bottom: 1rem;\n fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n display: flex;\n align-items: center;\n color: #3c83ec;\n cursor: pointer;\n background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n text-decoration: underline;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n margin: 2rem 0 0.5rem;\n fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n fill: #3c83ec;\n margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n display: flex;\n justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.main-module_image-picker__image-preview__12pRu {\n max-width: 100%;\n max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n margin-top: 0.5rem;\n color: #e60c54;\n}\n";
8
- var styles = {"image-picker__wrapper":"main-module_image-picker__wrapper__2RK3f","image-picker__wrapper-error":"main-module_image-picker__wrapper-error__kCZeA","image-picker__wrapper-has-file":"main-module_image-picker__wrapper-has-file__2zmRc","image-picker__label":"main-module_image-picker__label__1i_Fq","image-picker__description":"main-module_image-picker__description__1v13N","image-picker__upload-icon":"main-module_image-picker__upload-icon__3sMvN","image-picker__input":"main-module_image-picker__input__3Wu2I","image-picker__delete-button":"main-module_image-picker__delete-button__21_kT","image-picker__delete-label":"main-module_image-picker__delete-label__3v2ot","image-picker__wrong-file-format-icon":"main-module_image-picker__wrong-file-format-icon__X-NL0","image-picker__delete-icon":"main-module_image-picker__delete-icon__30pkO","image-picker__selected-file":"main-module_image-picker__selected-file__3bRqa","image-picker__selected-file-name-wrapper":"main-module_image-picker__selected-file-name-wrapper__37MKd","image-picker__selected-file-remove-wrapper":"main-module_image-picker__selected-file-remove-wrapper__2v4W2","image-picker__image-preview-wrapper":"main-module_image-picker__image-preview-wrapper__1jPXU","image-picker__image-preview":"main-module_image-picker__image-preview__12pRu","image-picker__error-text":"main-module_image-picker__error-text__rXAvw"};
7
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 46px;\n left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n fill: #3c83ec;\n}\n.main-module_image-picker__label__1i_Fq {\n cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n display: none;\n}\n.main-module_image-picker__description__1v13N {\n padding: 2rem 0;\n text-align: center;\n color: #3c83ec;\n}\n.main-module_image-picker__supported-formats__1_R_X {\n font-size: 12px;\n color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n width: 1rem;\n height: auto;\n margin-bottom: 1rem;\n fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n display: flex;\n align-items: center;\n color: #3c83ec;\n cursor: pointer;\n background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n text-decoration: underline;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n margin: 2rem 0 0.5rem;\n fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n fill: #3c83ec;\n margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n display: flex;\n justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU svg {\n fill: transparent;\n}\n.main-module_image-picker__image-preview__12pRu {\n max-width: 100%;\n max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n margin-top: 0.5rem;\n color: #e60c54;\n}\n";
8
+ var styles = {"image-picker__wrapper":"main-module_image-picker__wrapper__2RK3f","image-picker__wrapper-error":"main-module_image-picker__wrapper-error__kCZeA","image-picker__wrapper-has-file":"main-module_image-picker__wrapper-has-file__2zmRc","image-picker__label":"main-module_image-picker__label__1i_Fq","image-picker__description":"main-module_image-picker__description__1v13N","image-picker__upload-icon":"main-module_image-picker__upload-icon__3sMvN","image-picker__input":"main-module_image-picker__input__3Wu2I","image-picker__supported-formats":"main-module_image-picker__supported-formats__1_R_X","image-picker__delete-button":"main-module_image-picker__delete-button__21_kT","image-picker__delete-label":"main-module_image-picker__delete-label__3v2ot","image-picker__wrong-file-format-icon":"main-module_image-picker__wrong-file-format-icon__X-NL0","image-picker__delete-icon":"main-module_image-picker__delete-icon__30pkO","image-picker__selected-file":"main-module_image-picker__selected-file__3bRqa","image-picker__selected-file-name-wrapper":"main-module_image-picker__selected-file-name-wrapper__37MKd","image-picker__selected-file-remove-wrapper":"main-module_image-picker__selected-file-remove-wrapper__2v4W2","image-picker__image-preview-wrapper":"main-module_image-picker__image-preview-wrapper__1jPXU","image-picker__image-preview":"main-module_image-picker__image-preview__12pRu","image-picker__error-text":"main-module_image-picker__error-text__rXAvw"};
9
9
  styleInject_es['default'](css_248z);
10
10
 
11
11
  exports.default = styles;
@@ -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
 
@@ -1,16 +1,24 @@
1
- import React from 'react';
1
+ import React, { useState } from 'react';
2
2
  import Control from '../../index.js';
3
3
  import Hint from '../../../hint/index.js';
4
4
  import XhrImagePicker from '../../../xhr_image_picker/index.js';
5
5
 
6
6
  const ControlXhrImagePicker = ({ url, label, isRequired, id, name, onChange, allowedExtensions, initialFile, className, errors, hint, labelAdditionalInfo, onUploaded, onImageSizeUpdated }) => {
7
- return (React.createElement(Control, { errors: errors, name: name, id: id },
7
+ const [controlErrors, setErrors] = useState(errors);
8
+ const handleControlError = (errors) => {
9
+ setErrors(errors);
10
+ };
11
+ const handleControlChange = (fileList) => {
12
+ setErrors([]);
13
+ onChange === null || onChange === void 0 ? void 0 : onChange(fileList);
14
+ };
15
+ return (React.createElement(Control, { errors: controlErrors, name: name, id: id },
8
16
  (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
9
17
  label,
10
18
  hint && React.createElement(Hint, { hint: hint, spacingLeft: true }))),
11
19
  React.createElement(Control.Content, null,
12
20
  React.createElement(Control.Element, null,
13
- React.createElement(XhrImagePicker, { url: url, id: id, name: name, onChange: onChange, allowedExtensions: allowedExtensions, initialFile: initialFile, className: className, errors: errors, onUploaded: onUploaded, onImageSizeUpdated: onImageSizeUpdated }))),
21
+ React.createElement(XhrImagePicker, { url: url, id: id, name: name, onChange: handleControlChange, onError: handleControlError, allowedExtensions: allowedExtensions, initialFile: initialFile, className: className, errors: errors, onUploaded: onUploaded, onImageSizeUpdated: onImageSizeUpdated }))),
14
22
  React.createElement(Control.Errors, null)));
15
23
  };
16
24
 
@@ -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;"}
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;"}
@@ -13,6 +13,7 @@ export interface IFilePicker {
13
13
  allowedExtensions?: TFilesExtension[];
14
14
  initialFile?: TFilePickerFile;
15
15
  errors?: TControlErrors;
16
+ onError?: (errors: string[]) => void;
16
17
  }
17
18
  export interface ISelectedFilePreview {
18
19
  file: TFilePickerFile | null;
@@ -46,6 +47,7 @@ export interface IUseFilePickerProps {
46
47
  allowedExtensions?: TFilesExtension[];
47
48
  inputRef: React.RefObject<HTMLInputElement>;
48
49
  initialErrors?: TControlErrors;
50
+ onError?: (errors: string[]) => void;
49
51
  }
50
52
  export declare type TFilesExtension = typeof FILES_EXTENSIONS[keyof typeof FILES_EXTENSIONS];
51
53
  export declare type TMimeFileExtension = typeof MIME_FILE_EXTENSIONS[keyof typeof MIME_FILE_EXTENSIONS];
@@ -1,2 +1,2 @@
1
1
  import { IUseFilePicker, IUseFilePickerProps } from "./types";
2
- export declare const useFilePicker: ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors }: IUseFilePickerProps) => IUseFilePicker;
2
+ export declare const useFilePicker: ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors, onError }: IUseFilePickerProps) => IUseFilePicker;
@@ -1,15 +1,12 @@
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
 
5
- const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors }) => {
5
+ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors, onError }) => {
6
6
  const [file, setFile] = useState(initialFile);
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();
@@ -27,7 +24,12 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, ini
27
24
  const isValid = allowedExtensions.reduce((acc, extension) => {
28
25
  return acc ? acc : MIME_TYPE_TO_FILE_EXTENSIONS[mimeType] === extension;
29
26
  }, false);
30
- !isValid ? setErrors([...errors, i18n.t(FILE_PICKER_ERROR.invalidFileFormat)]) : setErrors([]);
27
+ if (isValid) {
28
+ setErrors([]);
29
+ return;
30
+ }
31
+ setErrors([...errors, i18n.t(FILE_PICKER_ERROR.invalidFileFormat)]);
32
+ onError === null || onError === void 0 ? void 0 : onError(errors);
31
33
  };
32
34
  const onFileChange = ({ target: { files } }) => {
33
35
  setErrors([]);
@@ -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;AACA;AACA;AACA;AACA;AACA;"}
@@ -10,12 +10,12 @@ const ImageInput = ({ id, onDropFile, onDragOver, onDragLeave, allowedExtensions
10
10
  return (React.createElement("label", { htmlFor: id, onDrop: onDropFile, onDragOver: onDragOver, onDragLeave: onDragLeave, className: styles[CSS_CLASSES.imagePickerLabel] },
11
11
  React.createElement("div", { className: styles[CSS_CLASSES.imagePickerDescription] },
12
12
  React.createElement(IconUpload, { className: styles[CSS_CLASSES.imagePickerUploadIcon] }),
13
- React.createElement("p", null, t('Drag a file here or browse')),
14
- React.createElement("span", null,
13
+ React.createElement("div", null, t('Drag a file here or browse')),
14
+ React.createElement("span", { className: styles[CSS_CLASSES.imagePickerSupportedFormats] },
15
15
  "(",
16
16
  t('supported format'),
17
17
  ": ",
18
- allowedExtensions.join(', '),
18
+ allowedExtensions.map((extension) => `*.${extension}`).join(', '),
19
19
  ")"))));
20
20
  };
21
21
  var ImageInput$1 = withTranslation(ImageInput);
@@ -17,5 +17,6 @@ declare const _default: {
17
17
  imagePickerSelectedFile: string;
18
18
  imagePickerSelectedFileNameWrapper: string;
19
19
  imagePickerSelectedFileRemoveWrapper: string;
20
+ imagePickerSupportedFormats: string;
20
21
  };
21
22
  export default _default;
@@ -17,7 +17,8 @@ var CSS_CLASSES = {
17
17
  imagePickerInput: `${imagePicker}__input`,
18
18
  imagePickerSelectedFile: `${imagePicker}__selected-file`,
19
19
  imagePickerSelectedFileNameWrapper: `${imagePicker}__selected-file-name-wrapper`,
20
- imagePickerSelectedFileRemoveWrapper: `${imagePicker}__selected-file-remove-wrapper`
20
+ imagePickerSelectedFileRemoveWrapper: `${imagePicker}__selected-file-remove-wrapper`,
21
+ imagePickerSupportedFormats: `${imagePicker}__supported-formats`
21
22
  };
22
23
 
23
24
  export default CSS_CLASSES;
@@ -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;"}
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;"}
@@ -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, onError, 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, onError, 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,15 @@ 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]);
47
+ console.log('errors', errors);
107
48
  return (React.createElement("div", { className: imagePickerClassName },
108
49
  React.createElement("div", { className: `${imagePickerWrapperClassName} ${dragOverStyles.imagePickerWrapper}` },
109
50
  file &&
@@ -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;AACA;"}
@@ -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;
@@ -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)));
@@ -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;
@@ -1,21 +1,32 @@
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';
5
5
  import { useHttpApi } from '../../hooks/use_http_api.js';
6
6
 
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] }) => {
7
+ const XhrImagePicker = ({ id, url, name, onUploaded, initialFile, errors, onError, 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 || !fileList.length)
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
  };
18
- return (React.createElement(ImagePicker, { id: id, name: name, onChange: onChange, errors: errors, allowedExtensions: allowedExtensions, initialFile: initialFile, onImageSizeUpdated: onImageSizeUpdated }));
26
+ useEffect(() => {
27
+ return () => { var _a; return (_a = pendingRequestRef.current) === null || _a === void 0 ? void 0 : _a.call(pendingRequestRef); };
28
+ }, []);
29
+ return (React.createElement(ImagePicker, { id: id, name: name, onChange: onChange, onError: onError, errors: errors, allowedExtensions: allowedExtensions, initialFile: initialFile, onImageSizeUpdated: onImageSizeUpdated }));
19
30
  };
20
31
 
21
32
  export default XhrImagePicker;
@@ -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;"}
@@ -1,7 +1,7 @@
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_image-picker__wrapper__2RK3f {\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 46px;\n left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n fill: #3c83ec;\n}\n.main-module_image-picker__label__1i_Fq {\n cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n display: none;\n}\n.main-module_image-picker__description__1v13N {\n padding: 2rem 0;\n text-align: center;\n}\n.main-module_image-picker__description__1v13N p {\n color: #3c83ec;\n}\n.main-module_image-picker__description__1v13N span {\n font-size: 12px;\n color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n width: 1rem;\n height: auto;\n margin-bottom: 1rem;\n fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n display: flex;\n align-items: center;\n color: #3c83ec;\n cursor: pointer;\n background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n text-decoration: underline;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n margin: 2rem 0 0.5rem;\n fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n fill: #3c83ec;\n margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n display: flex;\n justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.main-module_image-picker__image-preview__12pRu {\n max-width: 100%;\n max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n margin-top: 0.5rem;\n color: #e60c54;\n}\n";
4
- var styles = {"image-picker__wrapper":"main-module_image-picker__wrapper__2RK3f","image-picker__wrapper-error":"main-module_image-picker__wrapper-error__kCZeA","image-picker__wrapper-has-file":"main-module_image-picker__wrapper-has-file__2zmRc","image-picker__label":"main-module_image-picker__label__1i_Fq","image-picker__description":"main-module_image-picker__description__1v13N","image-picker__upload-icon":"main-module_image-picker__upload-icon__3sMvN","image-picker__input":"main-module_image-picker__input__3Wu2I","image-picker__delete-button":"main-module_image-picker__delete-button__21_kT","image-picker__delete-label":"main-module_image-picker__delete-label__3v2ot","image-picker__wrong-file-format-icon":"main-module_image-picker__wrong-file-format-icon__X-NL0","image-picker__delete-icon":"main-module_image-picker__delete-icon__30pkO","image-picker__selected-file":"main-module_image-picker__selected-file__3bRqa","image-picker__selected-file-name-wrapper":"main-module_image-picker__selected-file-name-wrapper__37MKd","image-picker__selected-file-remove-wrapper":"main-module_image-picker__selected-file-remove-wrapper__2v4W2","image-picker__image-preview-wrapper":"main-module_image-picker__image-preview-wrapper__1jPXU","image-picker__image-preview":"main-module_image-picker__image-preview__12pRu","image-picker__error-text":"main-module_image-picker__error-text__rXAvw"};
3
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n border: 1px dashed #abb4cd;\n border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 46px;\n left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n fill: #3c83ec;\n}\n.main-module_image-picker__label__1i_Fq {\n cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n display: none;\n}\n.main-module_image-picker__description__1v13N {\n padding: 2rem 0;\n text-align: center;\n color: #3c83ec;\n}\n.main-module_image-picker__supported-formats__1_R_X {\n font-size: 12px;\n color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n width: 1rem;\n height: auto;\n margin-bottom: 1rem;\n fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n display: flex;\n align-items: center;\n color: #3c83ec;\n cursor: pointer;\n background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n text-decoration: underline;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n margin: 2rem 0 0.5rem;\n fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n fill: #3c83ec;\n margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n display: flex;\n justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU svg {\n fill: transparent;\n}\n.main-module_image-picker__image-preview__12pRu {\n max-width: 100%;\n max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n margin-top: 0.5rem;\n color: #e60c54;\n}\n";
4
+ var styles = {"image-picker__wrapper":"main-module_image-picker__wrapper__2RK3f","image-picker__wrapper-error":"main-module_image-picker__wrapper-error__kCZeA","image-picker__wrapper-has-file":"main-module_image-picker__wrapper-has-file__2zmRc","image-picker__label":"main-module_image-picker__label__1i_Fq","image-picker__description":"main-module_image-picker__description__1v13N","image-picker__upload-icon":"main-module_image-picker__upload-icon__3sMvN","image-picker__input":"main-module_image-picker__input__3Wu2I","image-picker__supported-formats":"main-module_image-picker__supported-formats__1_R_X","image-picker__delete-button":"main-module_image-picker__delete-button__21_kT","image-picker__delete-label":"main-module_image-picker__delete-label__3v2ot","image-picker__wrong-file-format-icon":"main-module_image-picker__wrong-file-format-icon__X-NL0","image-picker__delete-icon":"main-module_image-picker__delete-icon__30pkO","image-picker__selected-file":"main-module_image-picker__selected-file__3bRqa","image-picker__selected-file-name-wrapper":"main-module_image-picker__selected-file-name-wrapper__37MKd","image-picker__selected-file-remove-wrapper":"main-module_image-picker__selected-file-remove-wrapper__2v4W2","image-picker__image-preview-wrapper":"main-module_image-picker__image-preview-wrapper__1jPXU","image-picker__image-preview":"main-module_image-picker__image-preview__12pRu","image-picker__error-text":"main-module_image-picker__error-text__rXAvw"};
5
5
  styleInject(css_248z);
6
6
 
7
7
  export default styles;
@@ -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-13",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",
@@ -1 +0,0 @@
1
- export declare const checkIfInvalideFileFormatErrorOccured: (errorsArray: string[] | undefined) => boolean | undefined;
@@ -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
@@ -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"}
@@ -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
@@ -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"}