@dreamcommerce/aurora 2.5.3-3 → 2.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/packages/aurora/src/components/file_picker/components/file_input.js +1 -1
- package/build/cjs/packages/aurora/src/components/file_picker/components/selected_file_preview.js +1 -1
- package/build/cjs/packages/aurora/src/components/file_picker/index.js +5 -7
- package/build/cjs/packages/aurora/src/components/file_picker/index.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js +2 -51
- package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
- package/build/cjs/packages/aurora/src/components/message-box/index.js +1 -1
- package/build/cjs/packages/aurora/src/index.js +47 -51
- package/build/cjs/packages/aurora/src/index.js.map +1 -1
- package/build/cjs/packages/aurora/src/translations/en.json.js +1 -4
- package/build/cjs/packages/aurora/src/translations/en.json.js.map +1 -1
- package/build/cjs/packages/aurora/src/translations/pl.json.js +1 -4
- package/build/cjs/packages/aurora/src/translations/pl.json.js.map +1 -1
- package/build/esm/packages/aurora/src/components/controls/types.d.ts +0 -10
- package/build/esm/packages/aurora/src/components/file_picker/components/file_input.js +1 -1
- package/build/esm/packages/aurora/src/components/file_picker/components/selected_file_preview.js +1 -1
- package/build/esm/packages/aurora/src/components/file_picker/index.js +6 -8
- package/build/esm/packages/aurora/src/components/file_picker/index.js.map +1 -1
- package/build/esm/packages/aurora/src/components/file_picker/types.d.ts +0 -4
- package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.d.ts +1 -1
- package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js +2 -51
- package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
- package/build/esm/packages/aurora/src/components/message-box/index.d.ts +1 -1
- package/build/esm/packages/aurora/src/components/message-box/index.js +1 -1
- package/build/esm/packages/aurora/src/components/message-box/types.d.ts +1 -1
- package/build/esm/packages/aurora/src/index.d.ts +4 -7
- package/build/esm/packages/aurora/src/index.js +2 -4
- package/build/esm/packages/aurora/src/index.js.map +1 -1
- package/build/esm/packages/aurora/src/translations/en.json +1 -4
- package/build/esm/packages/aurora/src/translations/en.json.js +1 -4
- package/build/esm/packages/aurora/src/translations/en.json.js.map +1 -1
- package/build/esm/packages/aurora/src/translations/pl.json +1 -4
- package/build/esm/packages/aurora/src/translations/pl.json.js +1 -4
- package/build/esm/packages/aurora/src/translations/pl.json.js.map +1 -1
- package/package.json +2 -2
- package/build/cjs/packages/aurora/src/assets/icon_wrong_file_format.js +0 -22
- package/build/cjs/packages/aurora/src/assets/icon_wrong_file_format.js.map +0 -1
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_image_picker/index.js +0 -26
- package/build/cjs/packages/aurora/src/components/controls/hoc/control_image_picker/index.js.map +0 -1
- package/build/cjs/packages/aurora/src/components/file_picker/constants.js +0 -19
- package/build/cjs/packages/aurora/src/components/file_picker/constants.js.map +0 -1
- package/build/cjs/packages/aurora/src/components/image_picker/components/image_input.js +0 -32
- package/build/cjs/packages/aurora/src/components/image_picker/components/image_input.js.map +0 -1
- package/build/cjs/packages/aurora/src/components/image_picker/components/selected_image_preview.js +0 -37
- package/build/cjs/packages/aurora/src/components/image_picker/components/selected_image_preview.js.map +0 -1
- package/build/cjs/packages/aurora/src/components/image_picker/css_classes.js +0 -29
- package/build/cjs/packages/aurora/src/components/image_picker/css_classes.js.map +0 -1
- package/build/cjs/packages/aurora/src/components/image_picker/index.js +0 -104
- package/build/cjs/packages/aurora/src/components/image_picker/index.js.map +0 -1
- package/build/cjs/packages/aurora/src/components/image_picker/utils.js +0 -12
- package/build/cjs/packages/aurora/src/components/image_picker/utils.js.map +0 -1
- package/build/cjs/packages/aurora/src/css/image_picker/main.module.less.js +0 -12
- package/build/cjs/packages/aurora/src/css/image_picker/main.module.less.js.map +0 -1
- package/build/esm/packages/aurora/src/assets/icon_wrong_file_format.d.ts +0 -4
- package/build/esm/packages/aurora/src/assets/icon_wrong_file_format.js +0 -14
- package/build/esm/packages/aurora/src/assets/icon_wrong_file_format.js.map +0 -1
- package/build/esm/packages/aurora/src/components/controls/hoc/control_image_picker/index.d.ts +0 -4
- package/build/esm/packages/aurora/src/components/controls/hoc/control_image_picker/index.js +0 -18
- package/build/esm/packages/aurora/src/components/controls/hoc/control_image_picker/index.js.map +0 -1
- package/build/esm/packages/aurora/src/components/file_picker/constants.d.ts +0 -8
- package/build/esm/packages/aurora/src/components/file_picker/constants.js +0 -11
- package/build/esm/packages/aurora/src/components/file_picker/constants.js.map +0 -1
- package/build/esm/packages/aurora/src/components/image_picker/components/image_input.d.ts +0 -4
- package/build/esm/packages/aurora/src/components/image_picker/components/image_input.js +0 -24
- package/build/esm/packages/aurora/src/components/image_picker/components/image_input.js.map +0 -1
- package/build/esm/packages/aurora/src/components/image_picker/components/selected_image_preview.d.ts +0 -4
- package/build/esm/packages/aurora/src/components/image_picker/components/selected_image_preview.js +0 -29
- package/build/esm/packages/aurora/src/components/image_picker/components/selected_image_preview.js.map +0 -1
- package/build/esm/packages/aurora/src/components/image_picker/css_classes.d.ts +0 -22
- package/build/esm/packages/aurora/src/components/image_picker/css_classes.js +0 -25
- package/build/esm/packages/aurora/src/components/image_picker/css_classes.js.map +0 -1
- package/build/esm/packages/aurora/src/components/image_picker/index.d.ts +0 -4
- package/build/esm/packages/aurora/src/components/image_picker/index.js +0 -95
- package/build/esm/packages/aurora/src/components/image_picker/index.js.map +0 -1
- package/build/esm/packages/aurora/src/components/image_picker/types.d.ts +0 -37
- package/build/esm/packages/aurora/src/components/image_picker/types.js +0 -2
- package/build/esm/packages/aurora/src/components/image_picker/types.js.map +0 -1
- package/build/esm/packages/aurora/src/components/image_picker/utils.d.ts +0 -1
- package/build/esm/packages/aurora/src/components/image_picker/utils.js +0 -8
- package/build/esm/packages/aurora/src/components/image_picker/utils.js.map +0 -1
- package/build/esm/packages/aurora/src/css/image_picker/main.module.less.js +0 -8
- package/build/esm/packages/aurora/src/css/image_picker/main.module.less.js.map +0 -1
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export declare const FILE_PICKER_ERROR: {
|
|
2
|
-
invalidFileFormat: string;
|
|
3
|
-
invalidInputWidth: string;
|
|
4
|
-
};
|
|
5
|
-
export declare const JPG_EXTENSION = "jpg";
|
|
6
|
-
export declare const JPEG_EXTENSION = "jpeg";
|
|
7
|
-
export declare const SVG_MIME_TYPE = "svg+xml";
|
|
8
|
-
export declare const SVG_EXTENSION = "svg";
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
const FILE_PICKER_ERROR = {
|
|
2
|
-
invalidFileFormat: 'Invalid file format',
|
|
3
|
-
invalidInputWidth: 'The value cannot be greater than the width of the uploaded file'
|
|
4
|
-
};
|
|
5
|
-
const JPG_EXTENSION = 'jpg';
|
|
6
|
-
const JPEG_EXTENSION = 'jpeg';
|
|
7
|
-
const SVG_MIME_TYPE = 'svg+xml';
|
|
8
|
-
const SVG_EXTENSION = 'svg';
|
|
9
|
-
|
|
10
|
-
export { FILE_PICKER_ERROR, JPEG_EXTENSION, JPG_EXTENSION, SVG_EXTENSION, SVG_MIME_TYPE };
|
|
11
|
-
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
|
|
3
|
-
import withTranslation from '../../../utilities/translation/with_translation.js';
|
|
4
|
-
import IconUpload from '../../../assets/icon_upload.js';
|
|
5
|
-
import CSS_CLASSES from '../css_classes.js';
|
|
6
|
-
import styles from '../../../css/image_picker/main.module.less.js';
|
|
7
|
-
|
|
8
|
-
const ImageInput = ({ id, onDropFile, onDragOver, onDragLeave, allowedExtensions, isDragOver }) => {
|
|
9
|
-
const [t] = useTranslation();
|
|
10
|
-
return (React.createElement("label", { htmlFor: id, onDrop: onDropFile, onDragOver: onDragOver, onDragLeave: onDragLeave, className: styles[CSS_CLASSES.imagePickerLabel] },
|
|
11
|
-
React.createElement("div", { className: styles[CSS_CLASSES.imagePickerDescription] },
|
|
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,
|
|
15
|
-
"(",
|
|
16
|
-
t('supported format'),
|
|
17
|
-
": ",
|
|
18
|
-
allowedExtensions.join(', '),
|
|
19
|
-
")"))));
|
|
20
|
-
};
|
|
21
|
-
var ImageInput$1 = withTranslation(ImageInput);
|
|
22
|
-
|
|
23
|
-
export default ImageInput$1;
|
|
24
|
-
//# sourceMappingURL=image_input.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;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/components/selected_image_preview.js
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
|
|
3
|
-
import { FileUtils } from '@dreamcommerce/utilities';
|
|
4
|
-
import IconDelete from '../../../assets/icon_delete.js';
|
|
5
|
-
import CSS_CLASSES from '../css_classes.js';
|
|
6
|
-
import styles from '../../../css/image_picker/main.module.less.js';
|
|
7
|
-
import IconWrongFileFormat from '../../../assets/icon_wrong_file_format.js';
|
|
8
|
-
|
|
9
|
-
const SelectedImagePreview = ({ file, isPreview, fileFormatIsCorrect, imageSize, onPreviewError, onFileDelete }) => {
|
|
10
|
-
const [t] = useTranslation();
|
|
11
|
-
const imageName = FileUtils.getFileName(file.fileName);
|
|
12
|
-
const imageExtension = FileUtils.getFileExtension(file.fileName);
|
|
13
|
-
const imageWidth = imageSize && imageSize.width;
|
|
14
|
-
const imageHeight = imageSize && imageSize.height;
|
|
15
|
-
const previewMarkupJsx = fileFormatIsCorrect ? (React.createElement("img", { alt: "", src: (file === null || file === void 0 ? void 0 : file.fileUrl) || '', onError: onPreviewError, className: styles[CSS_CLASSES.imagePickerImagePreview] })) : (React.createElement(IconWrongFileFormat, { className: styles[CSS_CLASSES.imagePickerWrongFileFormatIcon] }));
|
|
16
|
-
return (React.createElement("div", null,
|
|
17
|
-
isPreview ? (React.createElement("div", { className: styles[CSS_CLASSES.imagePickerImagePreviewWrapper] }, previewMarkupJsx)) : (React.createElement("div", null, t('No preview'))),
|
|
18
|
-
React.createElement("div", { className: styles[CSS_CLASSES.imagePickerSelectedFile] },
|
|
19
|
-
React.createElement("div", { className: styles[CSS_CLASSES.imagePickerSelectedFileNameWrapper] }, fileFormatIsCorrect && (React.createElement("span", { className: styles[CSS_CLASSES.imagePickerSelectedFileFullName] },
|
|
20
|
-
React.createElement("span", null, FileUtils.getShortenFileName(imageName, 10, 5, 1)),
|
|
21
|
-
React.createElement("span", null, `.${imageExtension} (${imageWidth}x${imageHeight}px)`)))),
|
|
22
|
-
React.createElement("div", { className: styles[CSS_CLASSES.imagePickerSelectedFileRemoveWrapper] },
|
|
23
|
-
React.createElement("span", { onClick: onFileDelete, className: styles[CSS_CLASSES.imagePickerDeleteButton] },
|
|
24
|
-
React.createElement(IconDelete, { className: styles[CSS_CLASSES.imagePickerDeleteIcon] }),
|
|
25
|
-
React.createElement("span", { className: styles[CSS_CLASSES.imagePickerDeleteLabel] }, t('Remove')))))));
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
export default SelectedImagePreview;
|
|
29
|
-
//# sourceMappingURL=selected_image_preview.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;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,22 +0,0 @@
|
|
|
1
|
-
declare const _default: {
|
|
2
|
-
imagePicker: string;
|
|
3
|
-
imagePickerWrapper: string;
|
|
4
|
-
imagePickerWrapperError: string;
|
|
5
|
-
imagePickerWrapperHasFile: string;
|
|
6
|
-
imagePickerLabel: string;
|
|
7
|
-
imagePickerDescription: string;
|
|
8
|
-
imagePickerImagePreview: string;
|
|
9
|
-
imagePickerImagePreviewWrapper: string;
|
|
10
|
-
imagePickerWrongFileFormatIcon: string;
|
|
11
|
-
imagePickerErrorText: string;
|
|
12
|
-
imagePickerUploadIcon: string;
|
|
13
|
-
imagePickerDeleteButton: string;
|
|
14
|
-
imagePickerDeleteLabel: string;
|
|
15
|
-
imagePickerDeleteIcon: string;
|
|
16
|
-
imagePickerInput: string;
|
|
17
|
-
imagePickerSelectedFile: string;
|
|
18
|
-
imagePickerSelectedFileNameWrapper: string;
|
|
19
|
-
imagePickerSelectedFileRemoveWrapper: string;
|
|
20
|
-
imagePickerSelectedFileFullName: string;
|
|
21
|
-
};
|
|
22
|
-
export default _default;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
const imagePicker = 'image-picker';
|
|
2
|
-
var CSS_CLASSES = {
|
|
3
|
-
imagePicker: `${imagePicker}`,
|
|
4
|
-
imagePickerWrapper: `${imagePicker}__wrapper`,
|
|
5
|
-
imagePickerWrapperError: `${imagePicker}__wrapper-error`,
|
|
6
|
-
imagePickerWrapperHasFile: `${imagePicker}__wrapper-has-file`,
|
|
7
|
-
imagePickerLabel: `${imagePicker}__label`,
|
|
8
|
-
imagePickerDescription: `${imagePicker}__description`,
|
|
9
|
-
imagePickerImagePreview: `${imagePicker}__image-preview`,
|
|
10
|
-
imagePickerImagePreviewWrapper: `${imagePicker}__image-preview-wrapper`,
|
|
11
|
-
imagePickerWrongFileFormatIcon: `${imagePicker}__wrong-file-format-icon`,
|
|
12
|
-
imagePickerErrorText: `${imagePicker}__error-text`,
|
|
13
|
-
imagePickerUploadIcon: `${imagePicker}__upload-icon`,
|
|
14
|
-
imagePickerDeleteButton: `${imagePicker}__delete-button`,
|
|
15
|
-
imagePickerDeleteLabel: `${imagePicker}__delete-label`,
|
|
16
|
-
imagePickerDeleteIcon: `${imagePicker}__delete-icon`,
|
|
17
|
-
imagePickerInput: `${imagePicker}__input`,
|
|
18
|
-
imagePickerSelectedFile: `${imagePicker}__selected-file`,
|
|
19
|
-
imagePickerSelectedFileNameWrapper: `${imagePicker}__selected-file-name-wrapper`,
|
|
20
|
-
imagePickerSelectedFileRemoveWrapper: `${imagePicker}__selected-file-remove-wrapper`,
|
|
21
|
-
imagePickerSelectedFileFullName: `${imagePicker}__selected-file-full-name`
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export default CSS_CLASSES;
|
|
25
|
-
//# sourceMappingURL=css_classes.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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;"}
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import React, { createRef, useState, useEffect } from 'react';
|
|
2
|
-
import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
|
|
3
|
-
import { createUseStyles } from '../../../../../external/react-jss/dist/react-jss.esm.js';
|
|
4
|
-
import classnames from 'classnames';
|
|
5
|
-
import { getAcceptFilesParametersFromAllowedExtensions } from '../file_picker/utils.js';
|
|
6
|
-
import { FILE_PICKER_ERROR } from '../file_picker/constants.js';
|
|
7
|
-
import { useFilePicker } from '../file_picker/use_file_picker.js';
|
|
8
|
-
import CSS_CLASSES from './css_classes.js';
|
|
9
|
-
import ControlInput from '../controls/hoc/control_input/index.js';
|
|
10
|
-
import styles from '../../css/image_picker/main.module.less.js';
|
|
11
|
-
import ImageInput from './components/image_input.js';
|
|
12
|
-
import SelectedImagePreview from './components/selected_image_preview.js';
|
|
13
|
-
import Spacing from '../spacing/index.js';
|
|
14
|
-
import { checkIfInvalideFileFormatErrorOccured } from './utils.js';
|
|
15
|
-
|
|
16
|
-
const ImagePicker = ({ id, onChange, allowedExtensions = ['WEBP', 'JPG', 'PNG', 'GIF'], initialFile, name, className = '', hasWidthInput, widthInputPostfix = 'px', widthInputLabel, widthInputHint }) => {
|
|
17
|
-
const [t] = useTranslation();
|
|
18
|
-
const inputRef = createRef();
|
|
19
|
-
const [fileFormatIsCorrect, setFileFormatIsCorrect] = useState(true);
|
|
20
|
-
const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
|
|
21
|
-
const [widthInputValue, setWidthInputValue] = useState();
|
|
22
|
-
const [isInputWidthTooBig, setIsInputWidthTooBig] = useState(false);
|
|
23
|
-
const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver, isVectorImage } = useFilePicker({ initialFile, onChange, allowedExtensions, inputRef });
|
|
24
|
-
const acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
|
|
25
|
-
const showMaxWidthInput = hasWidthInput && file && fileFormatIsCorrect && !isVectorImage;
|
|
26
|
-
const imagePickerClassName = classnames(styles[CSS_CLASSES.imagePicker], className && className);
|
|
27
|
-
const imagePickerWrapperClassName = classnames(styles[CSS_CLASSES.imagePickerWrapper], file && styles[CSS_CLASSES.imagePickerWrapperHasFile], !fileFormatIsCorrect && styles[CSS_CLASSES.imagePickerWrapperError]);
|
|
28
|
-
const useStyles = createUseStyles({
|
|
29
|
-
imagePickerWrapper: {
|
|
30
|
-
border: ({ isDragOver }) => (isDragOver ? '1px solid #135cc8' : ''),
|
|
31
|
-
backgroundColor: ({ isDragOver }) => (isDragOver ? 'rgba(208, 230, 255, 0.5)' : ''),
|
|
32
|
-
'& svg': {
|
|
33
|
-
// @ts-ignore
|
|
34
|
-
fill: ({ isDragOver }) => (isDragOver ? '#3c83ec' : '')
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
const dragOverStyles = useStyles({ isDragOver });
|
|
39
|
-
const getImageWidth = (event) => {
|
|
40
|
-
let selectedImage;
|
|
41
|
-
if (event.target instanceof HTMLInputElement) {
|
|
42
|
-
const { target: { files } } = event;
|
|
43
|
-
selectedImage = files[0];
|
|
44
|
-
}
|
|
45
|
-
else {
|
|
46
|
-
const { dataTransfer: { files } } = event;
|
|
47
|
-
selectedImage = files[0];
|
|
48
|
-
}
|
|
49
|
-
const imgElement = document.createElement('img');
|
|
50
|
-
const objectURL = URL.createObjectURL(selectedImage);
|
|
51
|
-
imgElement.onload = () => {
|
|
52
|
-
setImageSize({ width: imgElement.width, height: imgElement.height });
|
|
53
|
-
URL.revokeObjectURL(objectURL);
|
|
54
|
-
};
|
|
55
|
-
imgElement.src = objectURL;
|
|
56
|
-
};
|
|
57
|
-
const checkIfInputMaxWidthIsGreaterThenImageWidth = () => {
|
|
58
|
-
if (!widthInputValue || !imageSize.width)
|
|
59
|
-
return;
|
|
60
|
-
widthInputValue > imageSize.width ? setIsInputWidthTooBig(true) : setIsInputWidthTooBig(false);
|
|
61
|
-
};
|
|
62
|
-
const handleonDropFile = (event) => {
|
|
63
|
-
onDropFile(event);
|
|
64
|
-
getImageWidth(event);
|
|
65
|
-
};
|
|
66
|
-
const handleOnFileChange = (event) => {
|
|
67
|
-
onFileChange(event);
|
|
68
|
-
getImageWidth(event);
|
|
69
|
-
};
|
|
70
|
-
const handleOnFileDelete = () => {
|
|
71
|
-
setImageSize({ width: 0, height: 0 });
|
|
72
|
-
onFileDelete();
|
|
73
|
-
};
|
|
74
|
-
const handleOnWidthInputChange = (event) => {
|
|
75
|
-
setWidthInputValue(event.target.valueAsNumber);
|
|
76
|
-
};
|
|
77
|
-
useEffect(() => {
|
|
78
|
-
checkIfInvalideFileFormatErrorOccured(errors) ? setFileFormatIsCorrect(false) : setFileFormatIsCorrect(true);
|
|
79
|
-
file && checkIfInputMaxWidthIsGreaterThenImageWidth();
|
|
80
|
-
}, [errors, file, widthInputValue]);
|
|
81
|
-
useEffect(() => {
|
|
82
|
-
setWidthInputValue(imageSize.width);
|
|
83
|
-
}, [imageSize]);
|
|
84
|
-
return (React.createElement("div", { className: imagePickerClassName },
|
|
85
|
-
React.createElement("div", { className: `${imagePickerWrapperClassName} ${dragOverStyles.imagePickerWrapper}` },
|
|
86
|
-
file && (React.createElement(SelectedImagePreview, { file: file, onFileDelete: handleOnFileDelete, onPreviewError: onPreviewError, isPreview: isPreview, fileFormatIsCorrect: fileFormatIsCorrect, imageSize: imageSize })),
|
|
87
|
-
React.createElement(ImageInput, { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: handleonDropFile }),
|
|
88
|
-
React.createElement("input", { onChange: handleOnFileChange, id: id, ref: inputRef, type: "file", name: name, className: styles[CSS_CLASSES.imagePickerInput], accept: acceptFiles })),
|
|
89
|
-
!fileFormatIsCorrect && React.createElement("p", { className: styles[CSS_CLASSES.imagePickerErrorText] }, t('Invalid file format')),
|
|
90
|
-
showMaxWidthInput && (React.createElement(Spacing, { as: "div", "mt-xs": 2 },
|
|
91
|
-
React.createElement(ControlInput, { id: `${id}-image-width`, type: "number", postfix: widthInputPostfix, value: widthInputValue, isRequired: true, label: widthInputLabel, hint: widthInputHint, onChange: handleOnWidthInputChange, errors: isInputWidthTooBig ? [`${t(FILE_PICKER_ERROR.invalidInputWidth)}`] : null })))));
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
export default ImagePicker;
|
|
95
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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;"}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare type TImagePickerFile = {
|
|
3
|
-
fileUrl: string;
|
|
4
|
-
fileName: string;
|
|
5
|
-
};
|
|
6
|
-
export interface IImagePicker {
|
|
7
|
-
id: string;
|
|
8
|
-
name?: string;
|
|
9
|
-
className?: string;
|
|
10
|
-
onChange?: (imageList: FileList | null) => void;
|
|
11
|
-
allowedExtensions?: string[];
|
|
12
|
-
initialFile?: TImagePickerFile;
|
|
13
|
-
hasWidthInput?: boolean;
|
|
14
|
-
widthInputPostfix?: string;
|
|
15
|
-
widthInputLabel?: string;
|
|
16
|
-
widthInputHint?: string;
|
|
17
|
-
}
|
|
18
|
-
export interface ISelectedImagePreview {
|
|
19
|
-
file: TImagePickerFile;
|
|
20
|
-
isPreview: boolean;
|
|
21
|
-
fileFormatIsCorrect?: boolean;
|
|
22
|
-
imageSize?: TImageSize;
|
|
23
|
-
onPreviewError: () => void;
|
|
24
|
-
onFileDelete: () => void;
|
|
25
|
-
}
|
|
26
|
-
export interface IImagePickerInput {
|
|
27
|
-
id: string;
|
|
28
|
-
onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
|
|
29
|
-
onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
|
|
30
|
-
onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
|
|
31
|
-
allowedExtensions: string[];
|
|
32
|
-
isDragOver: boolean;
|
|
33
|
-
}
|
|
34
|
-
export declare type TImageSize = {
|
|
35
|
-
width: number;
|
|
36
|
-
height: number;
|
|
37
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/types.ts"],"names":[],"mappings":"AAAA,OAAkB,OAAO,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const checkIfInvalideFileFormatErrorOccured: (errorsArray: string[] | undefined) => boolean | undefined;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { FILE_PICKER_ERROR } from '../file_picker/constants.js';
|
|
2
|
-
|
|
3
|
-
const checkIfInvalideFileFormatErrorOccured = (errorsArray) => {
|
|
4
|
-
return errorsArray && errorsArray.includes(FILE_PICKER_ERROR.invalidFileFormat);
|
|
5
|
-
};
|
|
6
|
-
|
|
7
|
-
export { checkIfInvalideFileFormatErrorOccured };
|
|
8
|
-
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
|
|
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 flex-shrink: 0;\n color: #3c83ec;\n cursor: pointer;\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 flex: 1;\n max-width: 50%;\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-full-name__3fALB {\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__selected-file-full-name":"main-module_image-picker__selected-file-full-name__3fALB","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
|
-
styleInject(css_248z);
|
|
6
|
-
|
|
7
|
-
export default styles;
|
|
8
|
-
//# sourceMappingURL=main.module.less.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;"}
|