@alfalab/core-components-file-upload-item 3.1.1 → 3.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/dist/Component.d.ts +12 -1
  3. package/dist/Component.js +5 -6
  4. package/dist/cssm/Component.d.ts +12 -1
  5. package/dist/cssm/Component.js +4 -5
  6. package/dist/esm/Component.d.ts +12 -1
  7. package/dist/esm/Component.js +5 -6
  8. package/dist/esm/index.css +15 -15
  9. package/dist/index.css +15 -15
  10. package/dist/modern/Component.d.ts +12 -1
  11. package/dist/modern/Component.js +5 -6
  12. package/dist/modern/index.css +15 -15
  13. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,45 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.3.2](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-file-upload-item@3.3.1...@alfalab/core-components-file-upload-item@3.3.2) (2021-11-26)
7
+
8
+ **Note:** Version bump only for package @alfalab/core-components-file-upload-item
9
+
10
+
11
+
12
+
13
+
14
+ ## [3.3.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-file-upload-item@3.3.0...@alfalab/core-components-file-upload-item@3.3.1) (2021-11-16)
15
+
16
+ **Note:** Version bump only for package @alfalab/core-components-file-upload-item
17
+
18
+
19
+
20
+
21
+
22
+ # [3.3.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-file-upload-item@3.2.0...@alfalab/core-components-file-upload-item@3.3.0) (2021-10-12)
23
+
24
+
25
+ ### Features
26
+
27
+ * **file-upload-item:** добавлен пропс download ([#844](https://github.com/alfa-laboratory/core-components/issues/844)) ([db2a4ca](https://github.com/alfa-laboratory/core-components/commit/db2a4ca27ee7a64721138c7c2e918b4657c75489))
28
+
29
+
30
+
31
+
32
+
33
+ # [3.2.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-file-upload-item@3.1.1...@alfalab/core-components-file-upload-item@3.2.0) (2021-10-11)
34
+
35
+
36
+ ### Features
37
+
38
+ * проставлен role=alert для ошибок ([#850](https://github.com/alfa-laboratory/core-components/issues/850)) ([dc634a3](https://github.com/alfa-laboratory/core-components/commit/dc634a3d008accfab10192ce234c12ef0ecc7fa9))
39
+ * **file-upload-item:** custom icon ([#849](https://github.com/alfa-laboratory/core-components/issues/849)) ([59b8925](https://github.com/alfa-laboratory/core-components/commit/59b8925fbb9c631534c49c8dbb68cf493678e9e5))
40
+
41
+
42
+
43
+
44
+
6
45
  ## [3.1.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-file-upload-item@3.1.0...@alfalab/core-components-file-upload-item@3.1.1) (2021-09-27)
7
46
 
8
47
 
package/dist/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ReactNode } from "react";
3
+ import { ElementType, ReactNode } from "react";
4
4
  type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
5
5
  type FileUploadItemProps = {
6
6
  /**
@@ -27,6 +27,11 @@ type FileUploadItemProps = {
27
27
  * Ссылка на файл. Если прокидывается этот параметр, то заголовок становится ссылкой
28
28
  */
29
29
  downloadLink?: string;
30
+ /**
31
+ * Рекомендует браузеру скачивать контент по ссылке.
32
+ * В проп может быть передано рекомендуемое название скачиваемого файла.
33
+ */
34
+ download?: string | true;
30
35
  /**
31
36
  * Отображение кнопки удаления
32
37
  */
@@ -51,6 +56,12 @@ type FileUploadItemProps = {
51
56
  * Дочерние элементы
52
57
  */
53
58
  children?: React.ReactNode;
59
+ /**
60
+ * Компонент кастомной иконки
61
+ */
62
+ icon?: ElementType<{
63
+ className?: string;
64
+ }>;
54
65
  /**
55
66
  * Обработчик загрузки файла
56
67
  */
package/dist/Component.js CHANGED
@@ -18,11 +18,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
18
18
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
19
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
20
20
 
21
- var styles = {"component":"file-upload-item__component_171n7","info":"file-upload-item__info_171n7","icon":"file-upload-item__icon_171n7","errorIcon":"file-upload-item__errorIcon_171n7","successIcon":"file-upload-item__successIcon_171n7","name":"file-upload-item__name_171n7","meta":"file-upload-item__meta_171n7","size":"file-upload-item__size_171n7","delete":"file-upload-item__delete_171n7","error":"file-upload-item__error_171n7"};
21
+ var styles = {"component":"file-upload-item__component_1g56v","info":"file-upload-item__info_1g56v","icon":"file-upload-item__icon_1g56v","errorIcon":"file-upload-item__errorIcon_1g56v","successIcon":"file-upload-item__successIcon_1g56v","name":"file-upload-item__name_1g56v","meta":"file-upload-item__meta_1g56v","size":"file-upload-item__size_1g56v","delete":"file-upload-item__delete_1g56v","error":"file-upload-item__error_1g56v"};
22
22
  require('./index.css')
23
23
 
24
24
  var FileUploadItem = function (_a) {
25
- var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, uploadStatus = _a.uploadStatus, _d = _a.uploadPercent, uploadPercent = _d === void 0 ? 0 : _d, _e = _a.error, error = _e === void 0 ? uploadStatus === 'ERROR' ? 'Не удалось загрузить файл' : undefined : _e, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, dataTestId = _a.dataTestId;
25
+ var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, _d = _a.icon, Icon = _d === void 0 ? utils.fileIcon(name) : _d, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, download = _a.download, uploadStatus = _a.uploadStatus, _e = _a.uploadPercent, uploadPercent = _e === void 0 ? 0 : _e, _f = _a.error, error = _f === void 0 ? uploadStatus === 'ERROR' ? 'Не удалось загрузить файл' : undefined : _f, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, dataTestId = _a.dataTestId;
26
26
  var handleDownload = React.useCallback(function (event) {
27
27
  if (onDownload) {
28
28
  event.preventDefault();
@@ -47,12 +47,11 @@ var FileUploadItem = function (_a) {
47
47
  case 'UPLOADING':
48
48
  return React__default['default'].createElement(coreComponentsSpinner.Spinner, { visible: true });
49
49
  default: {
50
- var Icon = utils.fileIcon(name);
51
50
  return React__default['default'].createElement(Icon, { className: styles.icon });
52
51
  }
53
52
  }
54
- }, [name, uploadStatus]);
55
- var renderName = React.useCallback(function () { return (React__default['default'].createElement("div", { className: styles.name }, downloadLink ? (React__default['default'].createElement(coreComponentsLink.Link, { pseudo: true, href: downloadLink, onClick: handleDownload }, name)) : (name))); }, [downloadLink, handleDownload, name]);
53
+ }, [uploadStatus]);
54
+ var renderName = React.useCallback(function () { return (React__default['default'].createElement("div", { className: styles.name }, downloadLink ? (React__default['default'].createElement(coreComponentsLink.Link, { pseudo: true, href: downloadLink, onClick: handleDownload, download: download }, name)) : (name))); }, [downloadLink, handleDownload, download, name]);
56
55
  var showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
57
56
  return (React__default['default'].createElement("div", { className: cn__default['default'](className, styles.component, uploadStatus && styles[uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
58
57
  React__default['default'].createElement("div", { className: styles.info },
@@ -60,7 +59,7 @@ var FileUploadItem = function (_a) {
60
59
  renderName(),
61
60
  children,
62
61
  uploadStatus === 'UPLOADING' && React__default['default'].createElement("span", null, Math.round(uploadPercent) + "%"),
63
- uploadStatus === 'ERROR' && React__default['default'].createElement("span", { className: styles.error }, error),
62
+ uploadStatus === 'ERROR' && (React__default['default'].createElement("span", { className: styles.error, role: 'alert' }, error)),
64
63
  showMeta && (React__default['default'].createElement("div", { className: styles.meta },
65
64
  uploadDate && React__default['default'].createElement("span", { key: uploadDate }, uploadDate),
66
65
  size && (React__default['default'].createElement("span", { key: size, className: styles.size }, utils.humanFileSize(size)))))),
package/dist/cssm/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ReactNode } from "react";
3
+ import { ElementType, ReactNode } from "react";
4
4
  type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
5
5
  type FileUploadItemProps = {
6
6
  /**
@@ -27,6 +27,11 @@ type FileUploadItemProps = {
27
27
  * Ссылка на файл. Если прокидывается этот параметр, то заголовок становится ссылкой
28
28
  */
29
29
  downloadLink?: string;
30
+ /**
31
+ * Рекомендует браузеру скачивать контент по ссылке.
32
+ * В проп может быть передано рекомендуемое название скачиваемого файла.
33
+ */
34
+ download?: string | true;
30
35
  /**
31
36
  * Отображение кнопки удаления
32
37
  */
@@ -51,6 +56,12 @@ type FileUploadItemProps = {
51
56
  * Дочерние элементы
52
57
  */
53
58
  children?: React.ReactNode;
59
+ /**
60
+ * Компонент кастомной иконки
61
+ */
62
+ icon?: ElementType<{
63
+ className?: string;
64
+ }>;
54
65
  /**
55
66
  * Обработчик загрузки файла
56
67
  */
package/dist/cssm/Component.js CHANGED
@@ -21,7 +21,7 @@ var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
21
21
  var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
22
22
 
23
23
  var FileUploadItem = function (_a) {
24
- var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, uploadStatus = _a.uploadStatus, _d = _a.uploadPercent, uploadPercent = _d === void 0 ? 0 : _d, _e = _a.error, error = _e === void 0 ? uploadStatus === 'ERROR' ? 'Не удалось загрузить файл' : undefined : _e, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, dataTestId = _a.dataTestId;
24
+ var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, _d = _a.icon, Icon = _d === void 0 ? utils.fileIcon(name) : _d, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, download = _a.download, uploadStatus = _a.uploadStatus, _e = _a.uploadPercent, uploadPercent = _e === void 0 ? 0 : _e, _f = _a.error, error = _f === void 0 ? uploadStatus === 'ERROR' ? 'Не удалось загрузить файл' : undefined : _f, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, dataTestId = _a.dataTestId;
25
25
  var handleDownload = React.useCallback(function (event) {
26
26
  if (onDownload) {
27
27
  event.preventDefault();
@@ -46,12 +46,11 @@ var FileUploadItem = function (_a) {
46
46
  case 'UPLOADING':
47
47
  return React__default['default'].createElement(coreComponentsSpinner.Spinner, { visible: true });
48
48
  default: {
49
- var Icon = utils.fileIcon(name);
50
49
  return React__default['default'].createElement(Icon, { className: styles__default['default'].icon });
51
50
  }
52
51
  }
53
- }, [name, uploadStatus]);
54
- var renderName = React.useCallback(function () { return (React__default['default'].createElement("div", { className: styles__default['default'].name }, downloadLink ? (React__default['default'].createElement(coreComponentsLink.Link, { pseudo: true, href: downloadLink, onClick: handleDownload }, name)) : (name))); }, [downloadLink, handleDownload, name]);
52
+ }, [uploadStatus]);
53
+ var renderName = React.useCallback(function () { return (React__default['default'].createElement("div", { className: styles__default['default'].name }, downloadLink ? (React__default['default'].createElement(coreComponentsLink.Link, { pseudo: true, href: downloadLink, onClick: handleDownload, download: download }, name)) : (name))); }, [downloadLink, handleDownload, download, name]);
55
54
  var showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
56
55
  return (React__default['default'].createElement("div", { className: cn__default['default'](className, styles__default['default'].component, uploadStatus && styles__default['default'][uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
57
56
  React__default['default'].createElement("div", { className: styles__default['default'].info },
@@ -59,7 +58,7 @@ var FileUploadItem = function (_a) {
59
58
  renderName(),
60
59
  children,
61
60
  uploadStatus === 'UPLOADING' && React__default['default'].createElement("span", null, Math.round(uploadPercent) + "%"),
62
- uploadStatus === 'ERROR' && React__default['default'].createElement("span", { className: styles__default['default'].error }, error),
61
+ uploadStatus === 'ERROR' && (React__default['default'].createElement("span", { className: styles__default['default'].error, role: 'alert' }, error)),
63
62
  showMeta && (React__default['default'].createElement("div", { className: styles__default['default'].meta },
64
63
  uploadDate && React__default['default'].createElement("span", { key: uploadDate }, uploadDate),
65
64
  size && (React__default['default'].createElement("span", { key: size, className: styles__default['default'].size }, utils.humanFileSize(size)))))),
package/dist/esm/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ReactNode } from "react";
3
+ import { ElementType, ReactNode } from "react";
4
4
  type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
5
5
  type FileUploadItemProps = {
6
6
  /**
@@ -27,6 +27,11 @@ type FileUploadItemProps = {
27
27
  * Ссылка на файл. Если прокидывается этот параметр, то заголовок становится ссылкой
28
28
  */
29
29
  downloadLink?: string;
30
+ /**
31
+ * Рекомендует браузеру скачивать контент по ссылке.
32
+ * В проп может быть передано рекомендуемое название скачиваемого файла.
33
+ */
34
+ download?: string | true;
30
35
  /**
31
36
  * Отображение кнопки удаления
32
37
  */
@@ -51,6 +56,12 @@ type FileUploadItemProps = {
51
56
  * Дочерние элементы
52
57
  */
53
58
  children?: React.ReactNode;
59
+ /**
60
+ * Компонент кастомной иконки
61
+ */
62
+ icon?: ElementType<{
63
+ className?: string;
64
+ }>;
54
65
  /**
55
66
  * Обработчик загрузки файла
56
67
  */
package/dist/esm/Component.js CHANGED
@@ -9,11 +9,11 @@ import { AlertCircleMIcon } from '@alfalab/icons-glyph/AlertCircleMIcon';
9
9
  import '@alfalab/icons-glyph';
10
10
  import { fileIcon, humanFileSize } from './utils.js';
11
11
 
12
- var styles = {"component":"file-upload-item__component_171n7","info":"file-upload-item__info_171n7","icon":"file-upload-item__icon_171n7","errorIcon":"file-upload-item__errorIcon_171n7","successIcon":"file-upload-item__successIcon_171n7","name":"file-upload-item__name_171n7","meta":"file-upload-item__meta_171n7","size":"file-upload-item__size_171n7","delete":"file-upload-item__delete_171n7","error":"file-upload-item__error_171n7"};
12
+ var styles = {"component":"file-upload-item__component_1g56v","info":"file-upload-item__info_1g56v","icon":"file-upload-item__icon_1g56v","errorIcon":"file-upload-item__errorIcon_1g56v","successIcon":"file-upload-item__successIcon_1g56v","name":"file-upload-item__name_1g56v","meta":"file-upload-item__meta_1g56v","size":"file-upload-item__size_1g56v","delete":"file-upload-item__delete_1g56v","error":"file-upload-item__error_1g56v"};
13
13
  require('./index.css')
14
14
 
15
15
  var FileUploadItem = function (_a) {
16
- var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, uploadStatus = _a.uploadStatus, _d = _a.uploadPercent, uploadPercent = _d === void 0 ? 0 : _d, _e = _a.error, error = _e === void 0 ? uploadStatus === 'ERROR' ? 'Не удалось загрузить файл' : undefined : _e, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, dataTestId = _a.dataTestId;
16
+ var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, _d = _a.icon, Icon = _d === void 0 ? fileIcon(name) : _d, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, download = _a.download, uploadStatus = _a.uploadStatus, _e = _a.uploadPercent, uploadPercent = _e === void 0 ? 0 : _e, _f = _a.error, error = _f === void 0 ? uploadStatus === 'ERROR' ? 'Не удалось загрузить файл' : undefined : _f, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, dataTestId = _a.dataTestId;
17
17
  var handleDownload = useCallback(function (event) {
18
18
  if (onDownload) {
19
19
  event.preventDefault();
@@ -38,12 +38,11 @@ var FileUploadItem = function (_a) {
38
38
  case 'UPLOADING':
39
39
  return React.createElement(Spinner, { visible: true });
40
40
  default: {
41
- var Icon = fileIcon(name);
42
41
  return React.createElement(Icon, { className: styles.icon });
43
42
  }
44
43
  }
45
- }, [name, uploadStatus]);
46
- var renderName = useCallback(function () { return (React.createElement("div", { className: styles.name }, downloadLink ? (React.createElement(Link, { pseudo: true, href: downloadLink, onClick: handleDownload }, name)) : (name))); }, [downloadLink, handleDownload, name]);
44
+ }, [uploadStatus]);
45
+ var renderName = useCallback(function () { return (React.createElement("div", { className: styles.name }, downloadLink ? (React.createElement(Link, { pseudo: true, href: downloadLink, onClick: handleDownload, download: download }, name)) : (name))); }, [downloadLink, handleDownload, download, name]);
47
46
  var showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
48
47
  return (React.createElement("div", { className: cn(className, styles.component, uploadStatus && styles[uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
49
48
  React.createElement("div", { className: styles.info },
@@ -51,7 +50,7 @@ var FileUploadItem = function (_a) {
51
50
  renderName(),
52
51
  children,
53
52
  uploadStatus === 'UPLOADING' && React.createElement("span", null, Math.round(uploadPercent) + "%"),
54
- uploadStatus === 'ERROR' && React.createElement("span", { className: styles.error }, error),
53
+ uploadStatus === 'ERROR' && (React.createElement("span", { className: styles.error, role: 'alert' }, error)),
55
54
  showMeta && (React.createElement("div", { className: styles.meta },
56
55
  uploadDate && React.createElement("span", { key: uploadDate }, uploadDate),
57
56
  size && (React.createElement("span", { key: size, className: styles.size }, humanFileSize(size)))))),
package/dist/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 171n7 */
1
+ /* hash: bky84 */
2
2
  :root {
3
3
  --color-light-border-primary: #dbdee1;
4
4
  --color-light-graphic-negative: #f15045;
@@ -20,7 +20,7 @@
20
20
  --gap-xs: 8px;
21
21
  --gap-s: 12px;
22
22
  }
23
- .file-upload-item__component_171n7 {
23
+ .file-upload-item__component_1g56v {
24
24
  font-size: 13px;
25
25
  line-height: 16px;
26
26
  font-weight: 400;
@@ -33,29 +33,29 @@
33
33
  padding: 0 0 var(--gap-xs) 0;
34
34
  margin-bottom: var(--gap-xs)
35
35
  }
36
- .file-upload-item__component_171n7 svg {
36
+ .file-upload-item__component_1g56v svg {
37
37
  display: block;
38
38
  }
39
- .file-upload-item__info_171n7 {
39
+ .file-upload-item__info_1g56v {
40
40
  display: flex;
41
41
  align-items: center;
42
42
  flex-wrap: wrap;
43
43
  flex: 1;
44
44
  }
45
- .file-upload-item__icon_171n7 {
45
+ .file-upload-item__icon_1g56v {
46
46
  display: block;
47
47
  flex-shrink: 0;
48
48
  color: var(--color-light-text-primary);
49
49
  }
50
- .file-upload-item__errorIcon_171n7 {
50
+ .file-upload-item__errorIcon_1g56v {
51
51
  flex-shrink: 0;
52
52
  color: var(--color-light-graphic-negative);
53
53
  }
54
- .file-upload-item__successIcon_171n7 {
54
+ .file-upload-item__successIcon_1g56v {
55
55
  flex-shrink: 0;
56
56
  color: var(--color-light-graphic-positive);
57
57
  }
58
- .file-upload-item__name_171n7 {
58
+ .file-upload-item__name_1g56v {
59
59
  flex: 1;
60
60
  margin-left: var(--gap-xs);
61
61
  white-space: nowrap;
@@ -64,32 +64,32 @@
64
64
  color: var(--color-light-text-primary);
65
65
  min-width: 40%
66
66
  }
67
- .file-upload-item__meta_171n7 {
67
+ .file-upload-item__meta_1g56v {
68
68
  display: flex;
69
69
  align-items: center;
70
70
 
71
71
  white-space: nowrap
72
72
  }
73
- .file-upload-item__meta_171n7 > * {
73
+ .file-upload-item__meta_1g56v > * {
74
74
  margin-right: var(--gap-s)
75
75
  }
76
- .file-upload-item__meta_171n7 > *:last-child {
76
+ .file-upload-item__meta_1g56v > *:last-child {
77
77
  margin-right: 0;
78
78
  }
79
- .file-upload-item__size_171n7 {
79
+ .file-upload-item__size_1g56v {
80
80
  width: 65px;
81
81
  text-align: right;
82
82
  }
83
- .file-upload-item__delete_171n7 {
83
+ .file-upload-item__delete_1g56v {
84
84
  height: 24px;
85
85
  width: 24px;
86
86
  margin-left: var(--gap-s);
87
87
  }
88
- .file-upload-item__error_171n7 {
88
+ .file-upload-item__error_1g56v {
89
89
  color: var(--color-light-text-accent)
90
90
  }
91
91
  @media (--small-only) {
92
- .file-upload-item__error_171n7 {
92
+ .file-upload-item__error_1g56v {
93
93
  flex: 1 0 100%;
94
94
  margin-top: var(--gap-3xs)
95
95
  }
package/dist/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 171n7 */
1
+ /* hash: bky84 */
2
2
  :root {
3
3
  --color-light-border-primary: #dbdee1;
4
4
  --color-light-graphic-negative: #f15045;
@@ -20,7 +20,7 @@
20
20
  --gap-xs: 8px;
21
21
  --gap-s: 12px;
22
22
  }
23
- .file-upload-item__component_171n7 {
23
+ .file-upload-item__component_1g56v {
24
24
  font-size: 13px;
25
25
  line-height: 16px;
26
26
  font-weight: 400;
@@ -33,29 +33,29 @@
33
33
  padding: 0 0 var(--gap-xs) 0;
34
34
  margin-bottom: var(--gap-xs)
35
35
  }
36
- .file-upload-item__component_171n7 svg {
36
+ .file-upload-item__component_1g56v svg {
37
37
  display: block;
38
38
  }
39
- .file-upload-item__info_171n7 {
39
+ .file-upload-item__info_1g56v {
40
40
  display: flex;
41
41
  align-items: center;
42
42
  flex-wrap: wrap;
43
43
  flex: 1;
44
44
  }
45
- .file-upload-item__icon_171n7 {
45
+ .file-upload-item__icon_1g56v {
46
46
  display: block;
47
47
  flex-shrink: 0;
48
48
  color: var(--color-light-text-primary);
49
49
  }
50
- .file-upload-item__errorIcon_171n7 {
50
+ .file-upload-item__errorIcon_1g56v {
51
51
  flex-shrink: 0;
52
52
  color: var(--color-light-graphic-negative);
53
53
  }
54
- .file-upload-item__successIcon_171n7 {
54
+ .file-upload-item__successIcon_1g56v {
55
55
  flex-shrink: 0;
56
56
  color: var(--color-light-graphic-positive);
57
57
  }
58
- .file-upload-item__name_171n7 {
58
+ .file-upload-item__name_1g56v {
59
59
  flex: 1;
60
60
  margin-left: var(--gap-xs);
61
61
  white-space: nowrap;
@@ -64,32 +64,32 @@
64
64
  color: var(--color-light-text-primary);
65
65
  min-width: 40%
66
66
  }
67
- .file-upload-item__meta_171n7 {
67
+ .file-upload-item__meta_1g56v {
68
68
  display: flex;
69
69
  align-items: center;
70
70
 
71
71
  white-space: nowrap
72
72
  }
73
- .file-upload-item__meta_171n7 > * {
73
+ .file-upload-item__meta_1g56v > * {
74
74
  margin-right: var(--gap-s)
75
75
  }
76
- .file-upload-item__meta_171n7 > *:last-child {
76
+ .file-upload-item__meta_1g56v > *:last-child {
77
77
  margin-right: 0;
78
78
  }
79
- .file-upload-item__size_171n7 {
79
+ .file-upload-item__size_1g56v {
80
80
  width: 65px;
81
81
  text-align: right;
82
82
  }
83
- .file-upload-item__delete_171n7 {
83
+ .file-upload-item__delete_1g56v {
84
84
  height: 24px;
85
85
  width: 24px;
86
86
  margin-left: var(--gap-s);
87
87
  }
88
- .file-upload-item__error_171n7 {
88
+ .file-upload-item__error_1g56v {
89
89
  color: var(--color-light-text-accent)
90
90
  }
91
91
  @media (--small-only) {
92
- .file-upload-item__error_171n7 {
92
+ .file-upload-item__error_1g56v {
93
93
  flex: 1 0 100%;
94
94
  margin-top: var(--gap-3xs)
95
95
  }
package/dist/modern/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ReactNode } from "react";
3
+ import { ElementType, ReactNode } from "react";
4
4
  type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
5
5
  type FileUploadItemProps = {
6
6
  /**
@@ -27,6 +27,11 @@ type FileUploadItemProps = {
27
27
  * Ссылка на файл. Если прокидывается этот параметр, то заголовок становится ссылкой
28
28
  */
29
29
  downloadLink?: string;
30
+ /**
31
+ * Рекомендует браузеру скачивать контент по ссылке.
32
+ * В проп может быть передано рекомендуемое название скачиваемого файла.
33
+ */
34
+ download?: string | true;
30
35
  /**
31
36
  * Отображение кнопки удаления
32
37
  */
@@ -51,6 +56,12 @@ type FileUploadItemProps = {
51
56
  * Дочерние элементы
52
57
  */
53
58
  children?: React.ReactNode;
59
+ /**
60
+ * Компонент кастомной иконки
61
+ */
62
+ icon?: ElementType<{
63
+ className?: string;
64
+ }>;
54
65
  /**
55
66
  * Обработчик загрузки файла
56
67
  */
package/dist/modern/Component.js CHANGED
@@ -9,10 +9,10 @@ import { AlertCircleMIcon } from '@alfalab/icons-glyph/AlertCircleMIcon';
9
9
  import '@alfalab/icons-glyph';
10
10
  import { fileIcon, humanFileSize } from './utils.js';
11
11
 
12
- var styles = {"component":"file-upload-item__component_171n7","info":"file-upload-item__info_171n7","icon":"file-upload-item__icon_171n7","errorIcon":"file-upload-item__errorIcon_171n7","successIcon":"file-upload-item__successIcon_171n7","name":"file-upload-item__name_171n7","meta":"file-upload-item__meta_171n7","size":"file-upload-item__size_171n7","delete":"file-upload-item__delete_171n7","error":"file-upload-item__error_171n7"};
12
+ var styles = {"component":"file-upload-item__component_1g56v","info":"file-upload-item__info_1g56v","icon":"file-upload-item__icon_1g56v","errorIcon":"file-upload-item__errorIcon_1g56v","successIcon":"file-upload-item__successIcon_1g56v","name":"file-upload-item__name_1g56v","meta":"file-upload-item__meta_1g56v","size":"file-upload-item__size_1g56v","delete":"file-upload-item__delete_1g56v","error":"file-upload-item__error_1g56v"};
13
13
  require('./index.css')
14
14
 
15
- const FileUploadItem = ({ className, children, id = '0', name = '', size, uploadDate, downloadLink, uploadStatus, uploadPercent = 0, error = uploadStatus === 'ERROR' ? 'Не удалось загрузить файл' : undefined, showDelete, showRestore, onDelete, onDownload, onRestore, dataTestId, }) => {
15
+ const FileUploadItem = ({ className, children, id = '0', name = '', size, icon: Icon = fileIcon(name), uploadDate, downloadLink, download, uploadStatus, uploadPercent = 0, error = uploadStatus === 'ERROR' ? 'Не удалось загрузить файл' : undefined, showDelete, showRestore, onDelete, onDownload, onRestore, dataTestId, }) => {
16
16
  const handleDownload = useCallback((event) => {
17
17
  if (onDownload) {
18
18
  event.preventDefault();
@@ -37,12 +37,11 @@ const FileUploadItem = ({ className, children, id = '0', name = '', size, upload
37
37
  case 'UPLOADING':
38
38
  return React.createElement(Spinner, { visible: true });
39
39
  default: {
40
- const Icon = fileIcon(name);
41
40
  return React.createElement(Icon, { className: styles.icon });
42
41
  }
43
42
  }
44
- }, [name, uploadStatus]);
45
- const renderName = useCallback(() => (React.createElement("div", { className: styles.name }, downloadLink ? (React.createElement(Link, { pseudo: true, href: downloadLink, onClick: handleDownload }, name)) : (name))), [downloadLink, handleDownload, name]);
43
+ }, [uploadStatus]);
44
+ const renderName = useCallback(() => (React.createElement("div", { className: styles.name }, downloadLink ? (React.createElement(Link, { pseudo: true, href: downloadLink, onClick: handleDownload, download: download }, name)) : (name))), [downloadLink, handleDownload, download, name]);
46
45
  const showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
47
46
  return (React.createElement("div", { className: cn(className, styles.component, uploadStatus && styles[uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
48
47
  React.createElement("div", { className: styles.info },
@@ -50,7 +49,7 @@ const FileUploadItem = ({ className, children, id = '0', name = '', size, upload
50
49
  renderName(),
51
50
  children,
52
51
  uploadStatus === 'UPLOADING' && React.createElement("span", null, `${Math.round(uploadPercent)}%`),
53
- uploadStatus === 'ERROR' && React.createElement("span", { className: styles.error }, error),
52
+ uploadStatus === 'ERROR' && (React.createElement("span", { className: styles.error, role: 'alert' }, error)),
54
53
  showMeta && (React.createElement("div", { className: styles.meta },
55
54
  uploadDate && React.createElement("span", { key: uploadDate }, uploadDate),
56
55
  size && (React.createElement("span", { key: size, className: styles.size }, humanFileSize(size)))))),
package/dist/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 171n7 */
1
+ /* hash: bky84 */
2
2
  :root {
3
3
  --color-light-border-primary: #dbdee1;
4
4
  --color-light-graphic-negative: #f15045;
@@ -20,7 +20,7 @@
20
20
  --gap-xs: 8px;
21
21
  --gap-s: 12px;
22
22
  }
23
- .file-upload-item__component_171n7 {
23
+ .file-upload-item__component_1g56v {
24
24
  font-size: 13px;
25
25
  line-height: 16px;
26
26
  font-weight: 400;
@@ -33,29 +33,29 @@
33
33
  padding: 0 0 var(--gap-xs) 0;
34
34
  margin-bottom: var(--gap-xs)
35
35
  }
36
- .file-upload-item__component_171n7 svg {
36
+ .file-upload-item__component_1g56v svg {
37
37
  display: block;
38
38
  }
39
- .file-upload-item__info_171n7 {
39
+ .file-upload-item__info_1g56v {
40
40
  display: flex;
41
41
  align-items: center;
42
42
  flex-wrap: wrap;
43
43
  flex: 1;
44
44
  }
45
- .file-upload-item__icon_171n7 {
45
+ .file-upload-item__icon_1g56v {
46
46
  display: block;
47
47
  flex-shrink: 0;
48
48
  color: var(--color-light-text-primary);
49
49
  }
50
- .file-upload-item__errorIcon_171n7 {
50
+ .file-upload-item__errorIcon_1g56v {
51
51
  flex-shrink: 0;
52
52
  color: var(--color-light-graphic-negative);
53
53
  }
54
- .file-upload-item__successIcon_171n7 {
54
+ .file-upload-item__successIcon_1g56v {
55
55
  flex-shrink: 0;
56
56
  color: var(--color-light-graphic-positive);
57
57
  }
58
- .file-upload-item__name_171n7 {
58
+ .file-upload-item__name_1g56v {
59
59
  flex: 1;
60
60
  margin-left: var(--gap-xs);
61
61
  white-space: nowrap;
@@ -64,32 +64,32 @@
64
64
  color: var(--color-light-text-primary);
65
65
  min-width: 40%
66
66
  }
67
- .file-upload-item__meta_171n7 {
67
+ .file-upload-item__meta_1g56v {
68
68
  display: flex;
69
69
  align-items: center;
70
70
 
71
71
  white-space: nowrap
72
72
  }
73
- .file-upload-item__meta_171n7 > * {
73
+ .file-upload-item__meta_1g56v > * {
74
74
  margin-right: var(--gap-s)
75
75
  }
76
- .file-upload-item__meta_171n7 > *:last-child {
76
+ .file-upload-item__meta_1g56v > *:last-child {
77
77
  margin-right: 0;
78
78
  }
79
- .file-upload-item__size_171n7 {
79
+ .file-upload-item__size_1g56v {
80
80
  width: 65px;
81
81
  text-align: right;
82
82
  }
83
- .file-upload-item__delete_171n7 {
83
+ .file-upload-item__delete_1g56v {
84
84
  height: 24px;
85
85
  width: 24px;
86
86
  margin-left: var(--gap-s);
87
87
  }
88
- .file-upload-item__error_171n7 {
88
+ .file-upload-item__error_1g56v {
89
89
  color: var(--color-light-text-accent)
90
90
  }
91
91
  @media (--small-only) {
92
- .file-upload-item__error_171n7 {
92
+ .file-upload-item__error_1g56v {
93
93
  flex: 1 0 100%;
94
94
  margin-top: var(--gap-3xs)
95
95
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-file-upload-item",
3
- "version": "3.1.1",
3
+ "version": "3.3.2",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -16,10 +16,10 @@
16
16
  "react": "^16.9.0 || ^17.0.1"
17
17
  },
18
18
  "dependencies": {
19
- "@alfalab/core-components-icon-button": "^3.3.1",
19
+ "@alfalab/core-components-icon-button": "^4.0.0",
20
20
  "@alfalab/core-components-link": "^3.2.0",
21
21
  "@alfalab/core-components-spinner": "^2.0.1",
22
- "@alfalab/icons-glyph": "^1.150.0"
22
+ "@alfalab/icons-glyph": "^1.190.0"
23
23
  },
24
- "gitHead": "06ce84bb0c1b831858968f9a5d0bface6a163dc0"
24
+ "gitHead": "10c9fd1caacf98a5c15f84529889ddf41e9e1b54"
25
25
  }