@dreamcommerce/aurora 2.5.3-2 → 2.5.3-3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/build/cjs/packages/aurora/src/components/file_picker/components/file_input.js +1 -1
  2. package/build/cjs/packages/aurora/src/components/file_picker/components/selected_file_preview.js +1 -1
  3. package/build/cjs/packages/aurora/src/components/file_picker/index.js +7 -5
  4. package/build/cjs/packages/aurora/src/components/file_picker/index.js.map +1 -1
  5. package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js +2 -1
  6. package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
  7. package/build/cjs/packages/aurora/src/components/image_picker/components/selected_image_preview.js +1 -1
  8. package/build/cjs/packages/aurora/src/components/image_picker/index.js +4 -3
  9. package/build/cjs/packages/aurora/src/components/image_picker/index.js.map +1 -1
  10. package/build/esm/packages/aurora/src/components/file_picker/components/file_input.js +1 -1
  11. package/build/esm/packages/aurora/src/components/file_picker/components/selected_file_preview.js +1 -1
  12. package/build/esm/packages/aurora/src/components/file_picker/index.js +8 -6
  13. package/build/esm/packages/aurora/src/components/file_picker/index.js.map +1 -1
  14. package/build/esm/packages/aurora/src/components/file_picker/types.d.ts +1 -0
  15. package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.d.ts +1 -1
  16. package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js +2 -1
  17. package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js.map +1 -1
  18. package/build/esm/packages/aurora/src/components/image_picker/components/selected_image_preview.js +1 -1
  19. package/build/esm/packages/aurora/src/components/image_picker/index.js +5 -4
  20. package/build/esm/packages/aurora/src/components/image_picker/index.js.map +1 -1
  21. package/package.json +2 -2
package/build/cjs/packages/aurora/src/components/file_picker/components/file_input.js CHANGED
@@ -6,9 +6,9 @@ var React = require('react');
6
6
  var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
7
7
  var reactJss_esm = require('../../../../../../external/react-jss/dist/react-jss.esm.js');
8
8
  var with_translation = require('../../../utilities/translation/with_translation.js');
9
- var main_module = require('../../../css/file_picker/main.module.less.js');
10
9
  var css_classes = require('../css_classes.js');
11
10
  var icon_upload = require('../../../assets/icon_upload.js');
11
+ var main_module = require('../../../css/file_picker/main.module.less.js');
12
12
 
13
13
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
14
 
package/build/cjs/packages/aurora/src/components/file_picker/components/selected_file_preview.js CHANGED
@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
7
7
  var utilities = require('@dreamcommerce/utilities');
8
- var main_module = require('../../../css/file_picker/main.module.less.js');
9
8
  var css_classes = require('../css_classes.js');
9
+ var main_module = require('../../../css/file_picker/main.module.less.js');
10
10
  var icon_delete = require('../../../assets/icon_delete.js');
11
11
 
12
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
package/build/cjs/packages/aurora/src/components/file_picker/index.js CHANGED
@@ -3,26 +3,28 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var main_module = require('../../css/file_picker/main.module.less.js');
7
6
  var css_classes = require('./css_classes.js');
8
- var selected_file_preview = require('./components/selected_file_preview.js');
7
+ var main_module = require('../../css/file_picker/main.module.less.js');
9
8
  var file_input = require('./components/file_input.js');
10
- var use_file_picker = require('./use_file_picker.js');
9
+ var selected_file_preview = require('./components/selected_file_preview.js');
11
10
  var utils = require('./utils.js');
11
+ var use_file_picker = require('./use_file_picker.js');
12
12
 
13
13
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
14
 
15
15
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
16
 
17
17
  const FilePicker = ({ id, onChange, allowedExtensions = ['WEBP', 'JPG', 'PNG', 'GIF'], initialFile, name, className = '' }) => {
18
+ const inputRef = React.createRef();
18
19
  const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, isPreview, isDragOver } = use_file_picker.useFilePicker({
19
20
  initialFile,
20
- onChange
21
+ onChange,
22
+ inputRef
21
23
  });
22
24
  const acceptFiles = utils.getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
23
25
  return (React__default['default'].createElement("div", { className: className },
24
26
  file ? (React__default['default'].createElement(selected_file_preview['default'], { file: file, onFileDelete: onFileDelete, onPreviewError: onPreviewError, isPreview: isPreview })) : (React__default['default'].createElement(file_input['default'], { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: onDropFile })),
25
- React__default['default'].createElement("input", { onChange: onFileChange, id: id, type: "file", name: name, className: main_module['default'][css_classes['default'].filePickerInput], accept: acceptFiles })));
27
+ React__default['default'].createElement("input", { onChange: onFileChange, id: id, ref: inputRef, type: "file", name: name, className: main_module['default'][css_classes['default'].filePickerInput], accept: acceptFiles })));
26
28
  };
27
29
 
28
30
  exports.default = FilePicker;
package/build/cjs/packages/aurora/src/components/file_picker/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;"}
package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var constants = require('./constants.js');
7
7
 
8
- const useFilePicker = ({ onChange, initialFile, allowedExtensions }) => {
8
+ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef }) => {
9
9
  const [file, setFile] = React.useState(initialFile);
10
10
  const [errors, setErrors] = React.useState([]);
11
11
  const [isDragOver, setDragOver] = React.useState(false);
@@ -91,6 +91,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions }) => {
91
91
  setDragOver(false);
92
92
  };
93
93
  const onFileDelete = () => {
94
+ inputRef.current.value = '';
94
95
  setFile(undefined);
95
96
  setPreview(true);
96
97
  setErrors([]);
package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/aurora/src/components/image_picker/components/selected_image_preview.js CHANGED
@@ -25,7 +25,7 @@ const SelectedImagePreview = ({ file, isPreview, fileFormatIsCorrect, imageSize,
25
25
  isPreview ? (React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerImagePreviewWrapper] }, previewMarkupJsx)) : (React__default['default'].createElement("div", null, t('No preview'))),
26
26
  React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerSelectedFile] },
27
27
  React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerSelectedFileNameWrapper] }, fileFormatIsCorrect && (React__default['default'].createElement("span", { className: main_module['default'][css_classes['default'].imagePickerSelectedFileFullName] },
28
- React__default['default'].createElement("span", null, utilities.FileUtils.getFileNameShortenInMiddle(imageName, 10, 5, 1)),
28
+ React__default['default'].createElement("span", null, utilities.FileUtils.getShortenFileName(imageName, 10, 5, 1)),
29
29
  React__default['default'].createElement("span", null, `.${imageExtension} (${imageWidth}x${imageHeight}px)`)))),
30
30
  React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerSelectedFileRemoveWrapper] },
31
31
  React__default['default'].createElement("span", { onClick: onFileDelete, className: main_module['default'][css_classes['default'].imagePickerDeleteButton] },
package/build/cjs/packages/aurora/src/components/image_picker/index.js CHANGED
@@ -6,9 +6,9 @@ var React = require('react');
6
6
  var useTranslation = require('../../../../../external/react-i18next/dist/es/useTranslation.js');
7
7
  var reactJss_esm = require('../../../../../external/react-jss/dist/react-jss.esm.js');
8
8
  var classnames = require('classnames');
9
+ var utils = require('../file_picker/utils.js');
9
10
  var constants = require('../file_picker/constants.js');
10
11
  var use_file_picker = require('../file_picker/use_file_picker.js');
11
- var utils = require('../file_picker/utils.js');
12
12
  var css_classes = require('./css_classes.js');
13
13
  var index$1 = require('../controls/hoc/control_input/index.js');
14
14
  var main_module = require('../../css/image_picker/main.module.less.js');
@@ -24,11 +24,12 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
24
24
 
25
25
  const ImagePicker = ({ id, onChange, allowedExtensions = ['WEBP', 'JPG', 'PNG', 'GIF'], initialFile, name, className = '', hasWidthInput, widthInputPostfix = 'px', widthInputLabel, widthInputHint }) => {
26
26
  const [t] = useTranslation.useTranslation();
27
+ const inputRef = React.createRef();
27
28
  const [fileFormatIsCorrect, setFileFormatIsCorrect] = React.useState(true);
28
29
  const [imageSize, setImageSize] = React.useState({ width: 0, height: 0 });
29
30
  const [widthInputValue, setWidthInputValue] = React.useState();
30
31
  const [isInputWidthTooBig, setIsInputWidthTooBig] = React.useState(false);
31
- const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver, isVectorImage } = use_file_picker.useFilePicker({ initialFile, onChange, allowedExtensions });
32
+ const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver, isVectorImage } = use_file_picker.useFilePicker({ initialFile, onChange, allowedExtensions, inputRef });
32
33
  const acceptFiles = utils.getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
33
34
  const showMaxWidthInput = hasWidthInput && file && fileFormatIsCorrect && !isVectorImage;
34
35
  const imagePickerClassName = classnames__default['default'](main_module['default'][css_classes['default'].imagePicker], className && className);
@@ -93,7 +94,7 @@ const ImagePicker = ({ id, onChange, allowedExtensions = ['WEBP', 'JPG', 'PNG',
93
94
  React__default['default'].createElement("div", { className: `${imagePickerWrapperClassName} ${dragOverStyles.imagePickerWrapper}` },
94
95
  file && (React__default['default'].createElement(selected_image_preview['default'], { file: file, onFileDelete: handleOnFileDelete, onPreviewError: onPreviewError, isPreview: isPreview, fileFormatIsCorrect: fileFormatIsCorrect, imageSize: imageSize })),
95
96
  React__default['default'].createElement(image_input['default'], { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: handleonDropFile }),
96
- React__default['default'].createElement("input", { onChange: handleOnFileChange, id: id, type: "file", name: name, className: main_module['default'][css_classes['default'].imagePickerInput], accept: acceptFiles })),
97
+ React__default['default'].createElement("input", { onChange: handleOnFileChange, id: id, ref: inputRef, type: "file", name: name, className: main_module['default'][css_classes['default'].imagePickerInput], accept: acceptFiles })),
97
98
  !fileFormatIsCorrect && React__default['default'].createElement("p", { className: main_module['default'][css_classes['default'].imagePickerErrorText] }, t('Invalid file format')),
98
99
  showMaxWidthInput && (React__default['default'].createElement(index['default'], { as: "div", "mt-xs": 2 },
99
100
  React__default['default'].createElement(index$1['default'], { id: `${id}-image-width`, type: "number", postfix: widthInputPostfix, value: widthInputValue, isRequired: true, label: widthInputLabel, hint: widthInputHint, onChange: handleOnWidthInputChange, errors: isInputWidthTooBig ? [`${t(constants.FILE_PICKER_ERROR.invalidInputWidth)}`] : null })))));
package/build/cjs/packages/aurora/src/components/image_picker/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG,2BAA2B,yDAA6D;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;"}
package/build/esm/packages/aurora/src/components/file_picker/components/file_input.js CHANGED
@@ -2,9 +2,9 @@ import React from 'react';
2
2
  import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
3
3
  import { createUseStyles } from '../../../../../../external/react-jss/dist/react-jss.esm.js';
4
4
  import withTranslation from '../../../utilities/translation/with_translation.js';
5
- import styles from '../../../css/file_picker/main.module.less.js';
6
5
  import CSS_CLASSES from '../css_classes.js';
7
6
  import IconUpload from '../../../assets/icon_upload.js';
7
+ import styles from '../../../css/file_picker/main.module.less.js';
8
8
 
9
9
  const useStyles = createUseStyles({
10
10
  filePicker: {
package/build/esm/packages/aurora/src/components/file_picker/components/selected_file_preview.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
3
3
  import { FileUtils } from '@dreamcommerce/utilities';
4
- import styles from '../../../css/file_picker/main.module.less.js';
5
4
  import CSS_CLASSES from '../css_classes.js';
5
+ import styles from '../../../css/file_picker/main.module.less.js';
6
6
  import IconDelete from '../../../assets/icon_delete.js';
7
7
 
8
8
  const SelectedFilePreview = ({ file, isPreview, onPreviewError, onFileDelete }) => {
package/build/esm/packages/aurora/src/components/file_picker/index.js CHANGED
@@ -1,20 +1,22 @@
1
- import React from 'react';
2
- import styles from '../../css/file_picker/main.module.less.js';
1
+ import React, { createRef } from 'react';
3
2
  import CSS_CLASSES from './css_classes.js';
4
- import SelectedFilePreview from './components/selected_file_preview.js';
3
+ import styles from '../../css/file_picker/main.module.less.js';
5
4
  import FileInput from './components/file_input.js';
6
- import { useFilePicker } from './use_file_picker.js';
5
+ import SelectedFilePreview from './components/selected_file_preview.js';
7
6
  import { getAcceptFilesParametersFromAllowedExtensions } from './utils.js';
7
+ import { useFilePicker } from './use_file_picker.js';
8
8
 
9
9
  const FilePicker = ({ id, onChange, allowedExtensions = ['WEBP', 'JPG', 'PNG', 'GIF'], initialFile, name, className = '' }) => {
10
+ const inputRef = createRef();
10
11
  const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, isPreview, isDragOver } = useFilePicker({
11
12
  initialFile,
12
- onChange
13
+ onChange,
14
+ inputRef
13
15
  });
14
16
  const acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
15
17
  return (React.createElement("div", { className: className },
16
18
  file ? (React.createElement(SelectedFilePreview, { file: file, onFileDelete: onFileDelete, onPreviewError: onPreviewError, isPreview: isPreview })) : (React.createElement(FileInput, { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: onDropFile })),
17
- React.createElement("input", { onChange: onFileChange, id: id, type: "file", name: name, className: styles[CSS_CLASSES.filePickerInput], accept: acceptFiles })));
19
+ React.createElement("input", { onChange: onFileChange, id: id, ref: inputRef, type: "file", name: name, className: styles[CSS_CLASSES.filePickerInput], accept: acceptFiles })));
18
20
  };
19
21
 
20
22
  export default FilePicker;
package/build/esm/packages/aurora/src/components/file_picker/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;"}
package/build/esm/packages/aurora/src/components/file_picker/types.d.ts CHANGED
@@ -42,4 +42,5 @@ export interface IUseFilePickerProps {
42
42
  onChange?: (fileList: FileList | null) => void;
43
43
  initialFile?: TFilePickerFile;
44
44
  allowedExtensions?: string[];
45
+ inputRef: React.RefObject<HTMLInputElement>;
45
46
  }
package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { IUseFilePicker, IUseFilePickerProps } from "./types";
2
- export declare const useFilePicker: ({ onChange, initialFile, allowedExtensions }: IUseFilePickerProps) => IUseFilePicker;
2
+ export declare const useFilePicker: ({ onChange, initialFile, allowedExtensions, inputRef }: IUseFilePickerProps) => IUseFilePicker;
package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { useState, useEffect } from 'react';
2
2
  import { FILE_PICKER_ERROR, JPG_EXTENSION, JPEG_EXTENSION, SVG_MIME_TYPE, SVG_EXTENSION } from './constants.js';
3
3
 
4
- const useFilePicker = ({ onChange, initialFile, allowedExtensions }) => {
4
+ const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef }) => {
5
5
  const [file, setFile] = useState(initialFile);
6
6
  const [errors, setErrors] = useState([]);
7
7
  const [isDragOver, setDragOver] = useState(false);
@@ -87,6 +87,7 @@ const useFilePicker = ({ onChange, initialFile, allowedExtensions }) => {
87
87
  setDragOver(false);
88
88
  };
89
89
  const onFileDelete = () => {
90
+ inputRef.current.value = '';
90
91
  setFile(undefined);
91
92
  setPreview(true);
92
93
  setErrors([]);
package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/aurora/src/components/image_picker/components/selected_image_preview.js CHANGED
@@ -17,7 +17,7 @@ const SelectedImagePreview = ({ file, isPreview, fileFormatIsCorrect, imageSize,
17
17
  isPreview ? (React.createElement("div", { className: styles[CSS_CLASSES.imagePickerImagePreviewWrapper] }, previewMarkupJsx)) : (React.createElement("div", null, t('No preview'))),
18
18
  React.createElement("div", { className: styles[CSS_CLASSES.imagePickerSelectedFile] },
19
19
  React.createElement("div", { className: styles[CSS_CLASSES.imagePickerSelectedFileNameWrapper] }, fileFormatIsCorrect && (React.createElement("span", { className: styles[CSS_CLASSES.imagePickerSelectedFileFullName] },
20
- React.createElement("span", null, FileUtils.getFileNameShortenInMiddle(imageName, 10, 5, 1)),
20
+ React.createElement("span", null, FileUtils.getShortenFileName(imageName, 10, 5, 1)),
21
21
  React.createElement("span", null, `.${imageExtension} (${imageWidth}x${imageHeight}px)`)))),
22
22
  React.createElement("div", { className: styles[CSS_CLASSES.imagePickerSelectedFileRemoveWrapper] },
23
23
  React.createElement("span", { onClick: onFileDelete, className: styles[CSS_CLASSES.imagePickerDeleteButton] },
package/build/esm/packages/aurora/src/components/image_picker/index.js CHANGED
@@ -1,10 +1,10 @@
1
- import React, { useState, useEffect } from 'react';
1
+ import React, { createRef, useState, useEffect } from 'react';
2
2
  import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
3
3
  import { createUseStyles } from '../../../../../external/react-jss/dist/react-jss.esm.js';
4
4
  import classnames from 'classnames';
5
+ import { getAcceptFilesParametersFromAllowedExtensions } from '../file_picker/utils.js';
5
6
  import { FILE_PICKER_ERROR } from '../file_picker/constants.js';
6
7
  import { useFilePicker } from '../file_picker/use_file_picker.js';
7
- import { getAcceptFilesParametersFromAllowedExtensions } from '../file_picker/utils.js';
8
8
  import CSS_CLASSES from './css_classes.js';
9
9
  import ControlInput from '../controls/hoc/control_input/index.js';
10
10
  import styles from '../../css/image_picker/main.module.less.js';
@@ -15,11 +15,12 @@ import { checkIfInvalideFileFormatErrorOccured } from './utils.js';
15
15
 
16
16
  const ImagePicker = ({ id, onChange, allowedExtensions = ['WEBP', 'JPG', 'PNG', 'GIF'], initialFile, name, className = '', hasWidthInput, widthInputPostfix = 'px', widthInputLabel, widthInputHint }) => {
17
17
  const [t] = useTranslation();
18
+ const inputRef = createRef();
18
19
  const [fileFormatIsCorrect, setFileFormatIsCorrect] = useState(true);
19
20
  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
20
21
  const [widthInputValue, setWidthInputValue] = useState();
21
22
  const [isInputWidthTooBig, setIsInputWidthTooBig] = useState(false);
22
- const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver, isVectorImage } = useFilePicker({ initialFile, onChange, allowedExtensions });
23
+ const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver, isVectorImage } = useFilePicker({ initialFile, onChange, allowedExtensions, inputRef });
23
24
  const acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
24
25
  const showMaxWidthInput = hasWidthInput && file && fileFormatIsCorrect && !isVectorImage;
25
26
  const imagePickerClassName = classnames(styles[CSS_CLASSES.imagePicker], className && className);
@@ -84,7 +85,7 @@ const ImagePicker = ({ id, onChange, allowedExtensions = ['WEBP', 'JPG', 'PNG',
84
85
  React.createElement("div", { className: `${imagePickerWrapperClassName} ${dragOverStyles.imagePickerWrapper}` },
85
86
  file && (React.createElement(SelectedImagePreview, { file: file, onFileDelete: handleOnFileDelete, onPreviewError: onPreviewError, isPreview: isPreview, fileFormatIsCorrect: fileFormatIsCorrect, imageSize: imageSize })),
86
87
  React.createElement(ImageInput, { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: handleonDropFile }),
87
- React.createElement("input", { onChange: handleOnFileChange, id: id, type: "file", name: name, className: styles[CSS_CLASSES.imagePickerInput], accept: acceptFiles })),
88
+ React.createElement("input", { onChange: handleOnFileChange, id: id, ref: inputRef, type: "file", name: name, className: styles[CSS_CLASSES.imagePickerInput], accept: acceptFiles })),
88
89
  !fileFormatIsCorrect && React.createElement("p", { className: styles[CSS_CLASSES.imagePickerErrorText] }, t('Invalid file format')),
89
90
  showMaxWidthInput && (React.createElement(Spacing, { as: "div", "mt-xs": 2 },
90
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 })))));
package/build/esm/packages/aurora/src/components/image_picker/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG,gCAAgC,yDAA6D;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;"}
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.5.3-2",
5
+ "version": "2.5.3-3",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",
@@ -44,7 +44,7 @@
44
44
  "update-visuals": "jest -c .config/jest/jest.config.visual.js --updateSnapshot"
45
45
  },
46
46
  "devDependencies": {
47
- "@dreamcommerce/utilities": "^1.7.0",
47
+ "@dreamcommerce/utilities": "^1.7.0-2",
48
48
  "@shoper/jest_config": "^0.0.0",
49
49
  "@shoper/tsconfig": "^0.0.0",
50
50
  "@storybook/react": "6.5.7",