@alfalab/core-components-file-upload-item 5.4.3 → 5.6.0

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 (15) hide show
  1. package/Component.d.ts +6 -2
  2. package/Component.js +6 -5
  3. package/cssm/Component.d.ts +6 -2
  4. package/cssm/Component.js +5 -4
  5. package/cssm/index.module.css +8 -3
  6. package/esm/Component.d.ts +6 -2
  7. package/esm/Component.js +6 -5
  8. package/esm/index.css +30 -25
  9. package/index.css +30 -25
  10. package/modern/Component.d.ts +6 -2
  11. package/modern/Component.js +5 -5
  12. package/modern/index.css +30 -25
  13. package/package.json +3 -3
  14. package/src/Component.tsx +10 -4
  15. package/src/index.module.css +12 -3
package/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ElementType, ReactNode } from "react";
3
+ import { ElementType, MouseEvent, ReactNode } from "react";
4
4
  type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
5
5
  type FileUploadItemProps = {
6
6
  /**
@@ -69,7 +69,7 @@ type FileUploadItemProps = {
69
69
  /**
70
70
  * Обработчик удаления файла
71
71
  */
72
- onDelete?: (id: string) => void;
72
+ onDelete?: (id: string, event?: MouseEvent<HTMLElement>) => void;
73
73
  /**
74
74
  * Обработчик восстановления файла
75
75
  */
@@ -78,6 +78,10 @@ type FileUploadItemProps = {
78
78
  * Управление активностью кнопок
79
79
  */
80
80
  disableButtons?: boolean;
81
+ /**
82
+ * Разрешить многострочное название файла
83
+ */
84
+ multiline?: boolean;
81
85
  /**
82
86
  * Идентификатор для систем автоматизированного тестирования
83
87
  */
package/Component.js CHANGED
@@ -19,20 +19,20 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
19
19
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
20
20
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
21
21
 
22
- var styles = {"component":"file-upload-item__component_1f20v","infoSection":"file-upload-item__infoSection_1f20v","info":"file-upload-item__info_1f20v","icon":"file-upload-item__icon_1f20v","errorIcon":"file-upload-item__errorIcon_1f20v","successIcon":"file-upload-item__successIcon_1f20v","name":"file-upload-item__name_1f20v","meta":"file-upload-item__meta_1f20v","size":"file-upload-item__size_1f20v","delete":"file-upload-item__delete_1f20v","download":"file-upload-item__download_1f20v","errorWrapper":"file-upload-item__errorWrapper_1f20v","restore":"file-upload-item__restore_1f20v","spinnerWrapper":"file-upload-item__spinnerWrapper_1f20v","spinner":"file-upload-item__spinner_1f20v","uploadPercent":"file-upload-item__uploadPercent_1f20v"};
22
+ var styles = {"component":"file-upload-item__component_15h75","infoSection":"file-upload-item__infoSection_15h75","info":"file-upload-item__info_15h75","icon":"file-upload-item__icon_15h75","errorIcon":"file-upload-item__errorIcon_15h75","successIcon":"file-upload-item__successIcon_15h75","name":"file-upload-item__name_15h75","rowLimit":"file-upload-item__rowLimit_15h75","meta":"file-upload-item__meta_15h75","size":"file-upload-item__size_15h75","delete":"file-upload-item__delete_15h75","download":"file-upload-item__download_15h75","errorWrapper":"file-upload-item__errorWrapper_15h75","restore":"file-upload-item__restore_15h75","spinnerWrapper":"file-upload-item__spinnerWrapper_15h75","spinner":"file-upload-item__spinner_15h75","uploadPercent":"file-upload-item__uploadPercent_15h75"};
23
23
  require('./index.css')
24
24
 
25
25
  var FileUploadItem = function (_a) {
26
- 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, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, dataTestId = _a.dataTestId;
26
+ 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, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, _f = _a.multiline, multiline = _f === void 0 ? false : _f, dataTestId = _a.dataTestId;
27
27
  var handleDownload = function (event) {
28
28
  if (onDownload) {
29
29
  event.preventDefault();
30
30
  onDownload(id);
31
31
  }
32
32
  };
33
- var handleDelete = function () {
33
+ var handleDelete = function (event) {
34
34
  if (onDelete)
35
- onDelete(id);
35
+ onDelete(id, event);
36
36
  };
37
37
  var handleRestore = function () {
38
38
  if (onRestore)
@@ -57,10 +57,11 @@ var FileUploadItem = function (_a) {
57
57
  }
58
58
  };
59
59
  var renderInfoSection = function () {
60
+ var _a;
60
61
  var shouldShownError = uploadStatus === 'ERROR' || !!error;
61
62
  var errorContent = uploadStatus === 'ERROR' && !error ? 'Не удалось загрузить файл' : error;
62
63
  return (React__default.default.createElement("div", { className: styles.infoSection },
63
- React__default.default.createElement("div", { className: styles.name }, name),
64
+ React__default.default.createElement("div", { className: cn__default.default(styles.name, (_a = {}, _a[styles.rowLimit] = !multiline, _a)) }, name),
64
65
  shouldShownError && (React__default.default.createElement("div", { className: styles.errorWrapper, role: 'alert' }, errorContent))));
65
66
  };
66
67
  var showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
package/cssm/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ElementType, ReactNode } from "react";
3
+ import { ElementType, MouseEvent, ReactNode } from "react";
4
4
  type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
5
5
  type FileUploadItemProps = {
6
6
  /**
@@ -69,7 +69,7 @@ type FileUploadItemProps = {
69
69
  /**
70
70
  * Обработчик удаления файла
71
71
  */
72
- onDelete?: (id: string) => void;
72
+ onDelete?: (id: string, event?: MouseEvent<HTMLElement>) => void;
73
73
  /**
74
74
  * Обработчик восстановления файла
75
75
  */
@@ -78,6 +78,10 @@ type FileUploadItemProps = {
78
78
  * Управление активностью кнопок
79
79
  */
80
80
  disableButtons?: boolean;
81
+ /**
82
+ * Разрешить многострочное название файла
83
+ */
84
+ multiline?: boolean;
81
85
  /**
82
86
  * Идентификатор для систем автоматизированного тестирования
83
87
  */
package/cssm/Component.js CHANGED
@@ -22,16 +22,16 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
22
22
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
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, _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, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, 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, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, _f = _a.multiline, multiline = _f === void 0 ? false : _f, dataTestId = _a.dataTestId;
26
26
  var handleDownload = function (event) {
27
27
  if (onDownload) {
28
28
  event.preventDefault();
29
29
  onDownload(id);
30
30
  }
31
31
  };
32
- var handleDelete = function () {
32
+ var handleDelete = function (event) {
33
33
  if (onDelete)
34
- onDelete(id);
34
+ onDelete(id, event);
35
35
  };
36
36
  var handleRestore = function () {
37
37
  if (onRestore)
@@ -56,10 +56,11 @@ var FileUploadItem = function (_a) {
56
56
  }
57
57
  };
58
58
  var renderInfoSection = function () {
59
+ var _a;
59
60
  var shouldShownError = uploadStatus === 'ERROR' || !!error;
60
61
  var errorContent = uploadStatus === 'ERROR' && !error ? 'Не удалось загрузить файл' : error;
61
62
  return (React__default.default.createElement("div", { className: styles__default.default.infoSection },
62
- React__default.default.createElement("div", { className: styles__default.default.name }, name),
63
+ React__default.default.createElement("div", { className: cn__default.default(styles__default.default.name, (_a = {}, _a[styles__default.default.rowLimit] = !multiline, _a)) }, name),
63
64
  shouldShownError && (React__default.default.createElement("div", { className: styles__default.default.errorWrapper, role: 'alert' }, errorContent))));
64
65
  };
65
66
  var showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
package/cssm/index.module.css CHANGED
@@ -31,6 +31,7 @@
31
31
  font-weight: 400;
32
32
 
33
33
  display: flex;
34
+ align-items: flex-start;
34
35
  width: 100%;
35
36
  padding: var(--gap-xs);
36
37
  color: var(--color-light-text-secondary);
@@ -38,6 +39,8 @@
38
39
  box-sizing: border-box
39
40
  } .component svg {
40
41
  display: block;
42
+ } .component:last-child {
43
+ box-shadow: none;
41
44
  } .infoSection {
42
45
  display: flex;
43
46
  flex-direction: column;
@@ -61,13 +64,14 @@
61
64
  flex-shrink: 0;
62
65
  color: var(--color-light-status-positive);
63
66
  } .name {
64
- white-space: nowrap;
65
- overflow: hidden;
66
- text-overflow: ellipsis;
67
67
  color: var(--color-light-text-primary)
68
68
  } .name a {
69
69
  display: block;
70
70
  margin-bottom: 1px;
71
+ } .name.rowLimit {
72
+ white-space: nowrap;
73
+ overflow: hidden;
74
+ text-overflow: ellipsis;
71
75
  } .meta {
72
76
  display: flex;
73
77
  white-space: nowrap;
@@ -98,6 +102,7 @@
98
102
  font-weight: 400;
99
103
 
100
104
  margin-left: var(--gap-s);
105
+ margin-top: var(--gap-3xs);
101
106
  } .spinnerWrapper {
102
107
  display: flex;
103
108
  justify-content: center;
package/esm/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ElementType, ReactNode } from "react";
3
+ import { ElementType, MouseEvent, ReactNode } from "react";
4
4
  type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
5
5
  type FileUploadItemProps = {
6
6
  /**
@@ -69,7 +69,7 @@ type FileUploadItemProps = {
69
69
  /**
70
70
  * Обработчик удаления файла
71
71
  */
72
- onDelete?: (id: string) => void;
72
+ onDelete?: (id: string, event?: MouseEvent<HTMLElement>) => void;
73
73
  /**
74
74
  * Обработчик восстановления файла
75
75
  */
@@ -78,6 +78,10 @@ type FileUploadItemProps = {
78
78
  * Управление активностью кнопок
79
79
  */
80
80
  disableButtons?: boolean;
81
+ /**
82
+ * Разрешить многострочное название файла
83
+ */
84
+ multiline?: boolean;
81
85
  /**
82
86
  * Идентификатор для систем автоматизированного тестирования
83
87
  */
package/esm/Component.js CHANGED
@@ -10,20 +10,20 @@ import { CrossSIcon } from '@alfalab/icons-glyph/CrossSIcon';
10
10
  import { PointerDownSIcon } from '@alfalab/icons-glyph/PointerDownSIcon';
11
11
  import { fileIcon, humanFileSize } from './utils.js';
12
12
 
13
- var styles = {"component":"file-upload-item__component_1f20v","infoSection":"file-upload-item__infoSection_1f20v","info":"file-upload-item__info_1f20v","icon":"file-upload-item__icon_1f20v","errorIcon":"file-upload-item__errorIcon_1f20v","successIcon":"file-upload-item__successIcon_1f20v","name":"file-upload-item__name_1f20v","meta":"file-upload-item__meta_1f20v","size":"file-upload-item__size_1f20v","delete":"file-upload-item__delete_1f20v","download":"file-upload-item__download_1f20v","errorWrapper":"file-upload-item__errorWrapper_1f20v","restore":"file-upload-item__restore_1f20v","spinnerWrapper":"file-upload-item__spinnerWrapper_1f20v","spinner":"file-upload-item__spinner_1f20v","uploadPercent":"file-upload-item__uploadPercent_1f20v"};
13
+ var styles = {"component":"file-upload-item__component_15h75","infoSection":"file-upload-item__infoSection_15h75","info":"file-upload-item__info_15h75","icon":"file-upload-item__icon_15h75","errorIcon":"file-upload-item__errorIcon_15h75","successIcon":"file-upload-item__successIcon_15h75","name":"file-upload-item__name_15h75","rowLimit":"file-upload-item__rowLimit_15h75","meta":"file-upload-item__meta_15h75","size":"file-upload-item__size_15h75","delete":"file-upload-item__delete_15h75","download":"file-upload-item__download_15h75","errorWrapper":"file-upload-item__errorWrapper_15h75","restore":"file-upload-item__restore_15h75","spinnerWrapper":"file-upload-item__spinnerWrapper_15h75","spinner":"file-upload-item__spinner_15h75","uploadPercent":"file-upload-item__uploadPercent_15h75"};
14
14
  require('./index.css')
15
15
 
16
16
  var FileUploadItem = function (_a) {
17
- 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, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, dataTestId = _a.dataTestId;
17
+ 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, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, _f = _a.multiline, multiline = _f === void 0 ? false : _f, dataTestId = _a.dataTestId;
18
18
  var handleDownload = function (event) {
19
19
  if (onDownload) {
20
20
  event.preventDefault();
21
21
  onDownload(id);
22
22
  }
23
23
  };
24
- var handleDelete = function () {
24
+ var handleDelete = function (event) {
25
25
  if (onDelete)
26
- onDelete(id);
26
+ onDelete(id, event);
27
27
  };
28
28
  var handleRestore = function () {
29
29
  if (onRestore)
@@ -48,10 +48,11 @@ var FileUploadItem = function (_a) {
48
48
  }
49
49
  };
50
50
  var renderInfoSection = function () {
51
+ var _a;
51
52
  var shouldShownError = uploadStatus === 'ERROR' || !!error;
52
53
  var errorContent = uploadStatus === 'ERROR' && !error ? 'Не удалось загрузить файл' : error;
53
54
  return (React.createElement("div", { className: styles.infoSection },
54
- React.createElement("div", { className: styles.name }, name),
55
+ React.createElement("div", { className: cn(styles.name, (_a = {}, _a[styles.rowLimit] = !multiline, _a)) }, name),
55
56
  shouldShownError && (React.createElement("div", { className: styles.errorWrapper, role: 'alert' }, errorContent))));
56
57
  };
57
58
  var showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 8hh2u */
1
+ /* hash: ycu52 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-1500: #0e0e0e;
@@ -26,89 +26,94 @@
26
26
  --gap-xl: 24px;
27
27
  } :root {
28
28
  } :root {
29
- } .file-upload-item__component_1f20v {
29
+ } .file-upload-item__component_15h75 {
30
30
  font-size: 13px;
31
31
  line-height: 16px;
32
32
  font-weight: 400;
33
33
 
34
34
  display: flex;
35
+ align-items: flex-start;
35
36
  width: 100%;
36
37
  padding: var(--gap-xs);
37
38
  color: var(--color-light-text-secondary);
38
39
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
39
40
  box-sizing: border-box
40
- } .file-upload-item__component_1f20v svg {
41
+ } .file-upload-item__component_15h75 svg {
41
42
  display: block;
42
- } .file-upload-item__infoSection_1f20v {
43
+ } .file-upload-item__component_15h75:last-child {
44
+ box-shadow: none;
45
+ } .file-upload-item__infoSection_15h75 {
43
46
  display: flex;
44
47
  flex-direction: column;
45
48
  flex: 1;
46
49
  margin-top: var(--gap-2xs);
47
50
  margin-left: var(--gap-s);
48
51
  min-width: 40%;
49
- } .file-upload-item__info_1f20v {
52
+ } .file-upload-item__info_15h75 {
50
53
  display: flex;
51
54
  flex-wrap: wrap;
52
55
  flex: 1;
53
56
  overflow: hidden;
54
- } .file-upload-item__icon_1f20v {
57
+ } .file-upload-item__icon_15h75 {
55
58
  display: block;
56
59
  flex-shrink: 0;
57
60
  color: var(--color-light-neutral-1500);
58
- } .file-upload-item__errorIcon_1f20v {
61
+ } .file-upload-item__errorIcon_15h75 {
59
62
  flex-shrink: 0;
60
63
  color: var(--color-light-status-negative);
61
- } .file-upload-item__successIcon_1f20v {
64
+ } .file-upload-item__successIcon_15h75 {
62
65
  flex-shrink: 0;
63
66
  color: var(--color-light-status-positive);
64
- } .file-upload-item__name_1f20v {
65
- white-space: nowrap;
66
- overflow: hidden;
67
- text-overflow: ellipsis;
67
+ } .file-upload-item__name_15h75 {
68
68
  color: var(--color-light-text-primary)
69
- } .file-upload-item__name_1f20v a {
69
+ } .file-upload-item__name_15h75 a {
70
70
  display: block;
71
71
  margin-bottom: 1px;
72
- } .file-upload-item__meta_1f20v {
72
+ } .file-upload-item__name_15h75.file-upload-item__rowLimit_15h75 {
73
+ white-space: nowrap;
74
+ overflow: hidden;
75
+ text-overflow: ellipsis;
76
+ } .file-upload-item__meta_15h75 {
73
77
  display: flex;
74
78
  white-space: nowrap;
75
79
  margin-right: var(--gap-2xs);
76
80
  margin-left: 36px;
77
81
  padding: var(--gap-2xs) 0
78
- } .file-upload-item__meta_1f20v > * {
82
+ } .file-upload-item__meta_15h75 > * {
79
83
  margin-right: var(--gap-s)
80
- } .file-upload-item__meta_1f20v > *:last-child {
84
+ } .file-upload-item__meta_15h75 > *:last-child {
81
85
  margin-right: 0;
82
- } .file-upload-item__size_1f20v {
86
+ } .file-upload-item__size_15h75 {
83
87
  text-align: right;
84
- } .file-upload-item__delete_1f20v,
85
- .file-upload-item__download_1f20v {
88
+ } .file-upload-item__delete_15h75,
89
+ .file-upload-item__download_15h75 {
86
90
  height: 24px;
87
91
  width: 24px;
88
92
  margin-left: var(--gap-xs);
89
- } .file-upload-item__errorWrapper_1f20v {
93
+ } .file-upload-item__errorWrapper_15h75 {
90
94
  margin-top: var(--gap-s);
91
95
  color: var(--color-light-text-negative)
92
- } @media (--small-only) { .file-upload-item__errorWrapper_1f20v {
96
+ } @media (--small-only) { .file-upload-item__errorWrapper_15h75 {
93
97
  flex: 1 0 100%;
94
98
  margin-top: var(--gap-3xs)
95
99
  }
96
- } .file-upload-item__restore_1f20v {
100
+ } .file-upload-item__restore_15h75 {
97
101
  font-size: 14px;
98
102
  line-height: 20px;
99
103
  font-weight: 400;
100
104
 
101
105
  margin-left: var(--gap-s);
102
- } .file-upload-item__spinnerWrapper_1f20v {
106
+ margin-top: var(--gap-3xs);
107
+ } .file-upload-item__spinnerWrapper_15h75 {
103
108
  display: flex;
104
109
  justify-content: center;
105
110
  align-items: center;
106
111
  width: 24px;
107
112
  height: 24px;
108
- } .file-upload-item__spinner_1f20v {
113
+ } .file-upload-item__spinner_15h75 {
109
114
  width: 20px;
110
115
  height: 20px;
111
- } .file-upload-item__uploadPercent_1f20v {
116
+ } .file-upload-item__uploadPercent_15h75 {
112
117
  margin-top: var(--gap-2xs);
113
118
  margin-left: var(--gap-xl);
114
119
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 8hh2u */
1
+ /* hash: ycu52 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-1500: #0e0e0e;
@@ -26,89 +26,94 @@
26
26
  --gap-xl: 24px;
27
27
  } :root {
28
28
  } :root {
29
- } .file-upload-item__component_1f20v {
29
+ } .file-upload-item__component_15h75 {
30
30
  font-size: 13px;
31
31
  line-height: 16px;
32
32
  font-weight: 400;
33
33
 
34
34
  display: flex;
35
+ align-items: flex-start;
35
36
  width: 100%;
36
37
  padding: var(--gap-xs);
37
38
  color: var(--color-light-text-secondary);
38
39
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
39
40
  box-sizing: border-box
40
- } .file-upload-item__component_1f20v svg {
41
+ } .file-upload-item__component_15h75 svg {
41
42
  display: block;
42
- } .file-upload-item__infoSection_1f20v {
43
+ } .file-upload-item__component_15h75:last-child {
44
+ box-shadow: none;
45
+ } .file-upload-item__infoSection_15h75 {
43
46
  display: flex;
44
47
  flex-direction: column;
45
48
  flex: 1;
46
49
  margin-top: var(--gap-2xs);
47
50
  margin-left: var(--gap-s);
48
51
  min-width: 40%;
49
- } .file-upload-item__info_1f20v {
52
+ } .file-upload-item__info_15h75 {
50
53
  display: flex;
51
54
  flex-wrap: wrap;
52
55
  flex: 1;
53
56
  overflow: hidden;
54
- } .file-upload-item__icon_1f20v {
57
+ } .file-upload-item__icon_15h75 {
55
58
  display: block;
56
59
  flex-shrink: 0;
57
60
  color: var(--color-light-neutral-1500);
58
- } .file-upload-item__errorIcon_1f20v {
61
+ } .file-upload-item__errorIcon_15h75 {
59
62
  flex-shrink: 0;
60
63
  color: var(--color-light-status-negative);
61
- } .file-upload-item__successIcon_1f20v {
64
+ } .file-upload-item__successIcon_15h75 {
62
65
  flex-shrink: 0;
63
66
  color: var(--color-light-status-positive);
64
- } .file-upload-item__name_1f20v {
65
- white-space: nowrap;
66
- overflow: hidden;
67
- text-overflow: ellipsis;
67
+ } .file-upload-item__name_15h75 {
68
68
  color: var(--color-light-text-primary)
69
- } .file-upload-item__name_1f20v a {
69
+ } .file-upload-item__name_15h75 a {
70
70
  display: block;
71
71
  margin-bottom: 1px;
72
- } .file-upload-item__meta_1f20v {
72
+ } .file-upload-item__name_15h75.file-upload-item__rowLimit_15h75 {
73
+ white-space: nowrap;
74
+ overflow: hidden;
75
+ text-overflow: ellipsis;
76
+ } .file-upload-item__meta_15h75 {
73
77
  display: flex;
74
78
  white-space: nowrap;
75
79
  margin-right: var(--gap-2xs);
76
80
  margin-left: 36px;
77
81
  padding: var(--gap-2xs) 0
78
- } .file-upload-item__meta_1f20v > * {
82
+ } .file-upload-item__meta_15h75 > * {
79
83
  margin-right: var(--gap-s)
80
- } .file-upload-item__meta_1f20v > *:last-child {
84
+ } .file-upload-item__meta_15h75 > *:last-child {
81
85
  margin-right: 0;
82
- } .file-upload-item__size_1f20v {
86
+ } .file-upload-item__size_15h75 {
83
87
  text-align: right;
84
- } .file-upload-item__delete_1f20v,
85
- .file-upload-item__download_1f20v {
88
+ } .file-upload-item__delete_15h75,
89
+ .file-upload-item__download_15h75 {
86
90
  height: 24px;
87
91
  width: 24px;
88
92
  margin-left: var(--gap-xs);
89
- } .file-upload-item__errorWrapper_1f20v {
93
+ } .file-upload-item__errorWrapper_15h75 {
90
94
  margin-top: var(--gap-s);
91
95
  color: var(--color-light-text-negative)
92
- } @media (--small-only) { .file-upload-item__errorWrapper_1f20v {
96
+ } @media (--small-only) { .file-upload-item__errorWrapper_15h75 {
93
97
  flex: 1 0 100%;
94
98
  margin-top: var(--gap-3xs)
95
99
  }
96
- } .file-upload-item__restore_1f20v {
100
+ } .file-upload-item__restore_15h75 {
97
101
  font-size: 14px;
98
102
  line-height: 20px;
99
103
  font-weight: 400;
100
104
 
101
105
  margin-left: var(--gap-s);
102
- } .file-upload-item__spinnerWrapper_1f20v {
106
+ margin-top: var(--gap-3xs);
107
+ } .file-upload-item__spinnerWrapper_15h75 {
103
108
  display: flex;
104
109
  justify-content: center;
105
110
  align-items: center;
106
111
  width: 24px;
107
112
  height: 24px;
108
- } .file-upload-item__spinner_1f20v {
113
+ } .file-upload-item__spinner_15h75 {
109
114
  width: 20px;
110
115
  height: 20px;
111
- } .file-upload-item__uploadPercent_1f20v {
116
+ } .file-upload-item__uploadPercent_15h75 {
112
117
  margin-top: var(--gap-2xs);
113
118
  margin-left: var(--gap-xl);
114
119
  }
package/modern/Component.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
- import { ElementType, ReactNode } from "react";
3
+ import { ElementType, MouseEvent, ReactNode } from "react";
4
4
  type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
5
5
  type FileUploadItemProps = {
6
6
  /**
@@ -69,7 +69,7 @@ type FileUploadItemProps = {
69
69
  /**
70
70
  * Обработчик удаления файла
71
71
  */
72
- onDelete?: (id: string) => void;
72
+ onDelete?: (id: string, event?: MouseEvent<HTMLElement>) => void;
73
73
  /**
74
74
  * Обработчик восстановления файла
75
75
  */
@@ -78,6 +78,10 @@ type FileUploadItemProps = {
78
78
  * Управление активностью кнопок
79
79
  */
80
80
  disableButtons?: boolean;
81
+ /**
82
+ * Разрешить многострочное название файла
83
+ */
84
+ multiline?: boolean;
81
85
  /**
82
86
  * Идентификатор для систем автоматизированного тестирования
83
87
  */
package/modern/Component.js CHANGED
@@ -10,19 +10,19 @@ import { CrossSIcon } from '@alfalab/icons-glyph/CrossSIcon';
10
10
  import { PointerDownSIcon } from '@alfalab/icons-glyph/PointerDownSIcon';
11
11
  import { humanFileSize, fileIcon } from './utils.js';
12
12
 
13
- const styles = {"component":"file-upload-item__component_1f20v","infoSection":"file-upload-item__infoSection_1f20v","info":"file-upload-item__info_1f20v","icon":"file-upload-item__icon_1f20v","errorIcon":"file-upload-item__errorIcon_1f20v","successIcon":"file-upload-item__successIcon_1f20v","name":"file-upload-item__name_1f20v","meta":"file-upload-item__meta_1f20v","size":"file-upload-item__size_1f20v","delete":"file-upload-item__delete_1f20v","download":"file-upload-item__download_1f20v","errorWrapper":"file-upload-item__errorWrapper_1f20v","restore":"file-upload-item__restore_1f20v","spinnerWrapper":"file-upload-item__spinnerWrapper_1f20v","spinner":"file-upload-item__spinner_1f20v","uploadPercent":"file-upload-item__uploadPercent_1f20v"};
13
+ const styles = {"component":"file-upload-item__component_15h75","infoSection":"file-upload-item__infoSection_15h75","info":"file-upload-item__info_15h75","icon":"file-upload-item__icon_15h75","errorIcon":"file-upload-item__errorIcon_15h75","successIcon":"file-upload-item__successIcon_15h75","name":"file-upload-item__name_15h75","rowLimit":"file-upload-item__rowLimit_15h75","meta":"file-upload-item__meta_15h75","size":"file-upload-item__size_15h75","delete":"file-upload-item__delete_15h75","download":"file-upload-item__download_15h75","errorWrapper":"file-upload-item__errorWrapper_15h75","restore":"file-upload-item__restore_15h75","spinnerWrapper":"file-upload-item__spinnerWrapper_15h75","spinner":"file-upload-item__spinner_15h75","uploadPercent":"file-upload-item__uploadPercent_15h75"};
14
14
  require('./index.css')
15
15
 
16
- const FileUploadItem = ({ className, children, id = '0', name = '', size, icon: Icon = fileIcon(name), uploadDate, downloadLink, download, uploadStatus, uploadPercent = 0, error, showDelete, showRestore, onDelete, onDownload, onRestore, disableButtons, dataTestId, }) => {
16
+ const FileUploadItem = ({ className, children, id = '0', name = '', size, icon: Icon = fileIcon(name), uploadDate, downloadLink, download, uploadStatus, uploadPercent = 0, error, showDelete, showRestore, onDelete, onDownload, onRestore, disableButtons, multiline = false, dataTestId, }) => {
17
17
  const handleDownload = (event) => {
18
18
  if (onDownload) {
19
19
  event.preventDefault();
20
20
  onDownload(id);
21
21
  }
22
22
  };
23
- const handleDelete = () => {
23
+ const handleDelete = (event) => {
24
24
  if (onDelete)
25
- onDelete(id);
25
+ onDelete(id, event);
26
26
  };
27
27
  const handleRestore = () => {
28
28
  if (onRestore)
@@ -50,7 +50,7 @@ const FileUploadItem = ({ className, children, id = '0', name = '', size, icon:
50
50
  const shouldShownError = uploadStatus === 'ERROR' || !!error;
51
51
  const errorContent = uploadStatus === 'ERROR' && !error ? 'Не удалось загрузить файл' : error;
52
52
  return (React.createElement("div", { className: styles.infoSection },
53
- React.createElement("div", { className: styles.name }, name),
53
+ React.createElement("div", { className: cn(styles.name, { [styles.rowLimit]: !multiline }) }, name),
54
54
  shouldShownError && (React.createElement("div", { className: styles.errorWrapper, role: 'alert' }, errorContent))));
55
55
  };
56
56
  const showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 8hh2u */
1
+ /* hash: ycu52 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-1500: #0e0e0e;
@@ -26,89 +26,94 @@
26
26
  --gap-xl: 24px;
27
27
  } :root {
28
28
  } :root {
29
- } .file-upload-item__component_1f20v {
29
+ } .file-upload-item__component_15h75 {
30
30
  font-size: 13px;
31
31
  line-height: 16px;
32
32
  font-weight: 400;
33
33
 
34
34
  display: flex;
35
+ align-items: flex-start;
35
36
  width: 100%;
36
37
  padding: var(--gap-xs);
37
38
  color: var(--color-light-text-secondary);
38
39
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
39
40
  box-sizing: border-box
40
- } .file-upload-item__component_1f20v svg {
41
+ } .file-upload-item__component_15h75 svg {
41
42
  display: block;
42
- } .file-upload-item__infoSection_1f20v {
43
+ } .file-upload-item__component_15h75:last-child {
44
+ box-shadow: none;
45
+ } .file-upload-item__infoSection_15h75 {
43
46
  display: flex;
44
47
  flex-direction: column;
45
48
  flex: 1;
46
49
  margin-top: var(--gap-2xs);
47
50
  margin-left: var(--gap-s);
48
51
  min-width: 40%;
49
- } .file-upload-item__info_1f20v {
52
+ } .file-upload-item__info_15h75 {
50
53
  display: flex;
51
54
  flex-wrap: wrap;
52
55
  flex: 1;
53
56
  overflow: hidden;
54
- } .file-upload-item__icon_1f20v {
57
+ } .file-upload-item__icon_15h75 {
55
58
  display: block;
56
59
  flex-shrink: 0;
57
60
  color: var(--color-light-neutral-1500);
58
- } .file-upload-item__errorIcon_1f20v {
61
+ } .file-upload-item__errorIcon_15h75 {
59
62
  flex-shrink: 0;
60
63
  color: var(--color-light-status-negative);
61
- } .file-upload-item__successIcon_1f20v {
64
+ } .file-upload-item__successIcon_15h75 {
62
65
  flex-shrink: 0;
63
66
  color: var(--color-light-status-positive);
64
- } .file-upload-item__name_1f20v {
65
- white-space: nowrap;
66
- overflow: hidden;
67
- text-overflow: ellipsis;
67
+ } .file-upload-item__name_15h75 {
68
68
  color: var(--color-light-text-primary)
69
- } .file-upload-item__name_1f20v a {
69
+ } .file-upload-item__name_15h75 a {
70
70
  display: block;
71
71
  margin-bottom: 1px;
72
- } .file-upload-item__meta_1f20v {
72
+ } .file-upload-item__name_15h75.file-upload-item__rowLimit_15h75 {
73
+ white-space: nowrap;
74
+ overflow: hidden;
75
+ text-overflow: ellipsis;
76
+ } .file-upload-item__meta_15h75 {
73
77
  display: flex;
74
78
  white-space: nowrap;
75
79
  margin-right: var(--gap-2xs);
76
80
  margin-left: 36px;
77
81
  padding: var(--gap-2xs) 0
78
- } .file-upload-item__meta_1f20v > * {
82
+ } .file-upload-item__meta_15h75 > * {
79
83
  margin-right: var(--gap-s)
80
- } .file-upload-item__meta_1f20v > *:last-child {
84
+ } .file-upload-item__meta_15h75 > *:last-child {
81
85
  margin-right: 0;
82
- } .file-upload-item__size_1f20v {
86
+ } .file-upload-item__size_15h75 {
83
87
  text-align: right;
84
- } .file-upload-item__delete_1f20v,
85
- .file-upload-item__download_1f20v {
88
+ } .file-upload-item__delete_15h75,
89
+ .file-upload-item__download_15h75 {
86
90
  height: 24px;
87
91
  width: 24px;
88
92
  margin-left: var(--gap-xs);
89
- } .file-upload-item__errorWrapper_1f20v {
93
+ } .file-upload-item__errorWrapper_15h75 {
90
94
  margin-top: var(--gap-s);
91
95
  color: var(--color-light-text-negative)
92
- } @media (--small-only) { .file-upload-item__errorWrapper_1f20v {
96
+ } @media (--small-only) { .file-upload-item__errorWrapper_15h75 {
93
97
  flex: 1 0 100%;
94
98
  margin-top: var(--gap-3xs)
95
99
  }
96
- } .file-upload-item__restore_1f20v {
100
+ } .file-upload-item__restore_15h75 {
97
101
  font-size: 14px;
98
102
  line-height: 20px;
99
103
  font-weight: 400;
100
104
 
101
105
  margin-left: var(--gap-s);
102
- } .file-upload-item__spinnerWrapper_1f20v {
106
+ margin-top: var(--gap-3xs);
107
+ } .file-upload-item__spinnerWrapper_15h75 {
103
108
  display: flex;
104
109
  justify-content: center;
105
110
  align-items: center;
106
111
  width: 24px;
107
112
  height: 24px;
108
- } .file-upload-item__spinner_1f20v {
113
+ } .file-upload-item__spinner_15h75 {
109
114
  width: 20px;
110
115
  height: 20px;
111
- } .file-upload-item__uploadPercent_1f20v {
116
+ } .file-upload-item__uploadPercent_15h75 {
112
117
  margin-top: var(--gap-2xs);
113
118
  margin-left: var(--gap-xl);
114
119
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-file-upload-item",
3
- "version": "5.4.3",
3
+ "version": "5.6.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -14,8 +14,8 @@
14
14
  "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
15
15
  },
16
16
  "dependencies": {
17
- "@alfalab/core-components-icon-button": "^6.5.3",
18
- "@alfalab/core-components-link": "^5.2.0",
17
+ "@alfalab/core-components-icon-button": "^6.5.5",
18
+ "@alfalab/core-components-link": "^5.2.1",
19
19
  "@alfalab/core-components-spinner": "^3.3.0",
20
20
  "@alfalab/icons-glyph": "^2.139.0",
21
21
  "classnames": "^2.3.1",
package/src/Component.tsx CHANGED
@@ -96,7 +96,7 @@ export type FileUploadItemProps = {
96
96
  /**
97
97
  * Обработчик удаления файла
98
98
  */
99
- onDelete?: (id: string) => void;
99
+ onDelete?: (id: string, event?: MouseEvent<HTMLElement>) => void;
100
100
 
101
101
  /**
102
102
  * Обработчик восстановления файла
@@ -108,6 +108,11 @@ export type FileUploadItemProps = {
108
108
  */
109
109
  disableButtons?: boolean;
110
110
 
111
+ /**
112
+ * Разрешить многострочное название файла
113
+ */
114
+ multiline?: boolean;
115
+
111
116
  /**
112
117
  * Идентификатор для систем автоматизированного тестирования
113
118
  */
@@ -133,6 +138,7 @@ export const FileUploadItem: React.FC<FileUploadItemProps> = ({
133
138
  onDownload,
134
139
  onRestore,
135
140
  disableButtons,
141
+ multiline = false,
136
142
  dataTestId,
137
143
  }) => {
138
144
  const handleDownload = (event: MouseEvent<HTMLElement>) => {
@@ -142,8 +148,8 @@ export const FileUploadItem: React.FC<FileUploadItemProps> = ({
142
148
  }
143
149
  };
144
150
 
145
- const handleDelete = () => {
146
- if (onDelete) onDelete(id);
151
+ const handleDelete = (event: MouseEvent<HTMLElement>) => {
152
+ if (onDelete) onDelete(id, event);
147
153
  };
148
154
 
149
155
  const handleRestore = () => {
@@ -180,7 +186,7 @@ export const FileUploadItem: React.FC<FileUploadItemProps> = ({
180
186
 
181
187
  return (
182
188
  <div className={styles.infoSection}>
183
- <div className={styles.name}>{name}</div>
189
+ <div className={cn(styles.name, { [styles.rowLimit]: !multiline })}>{name}</div>
184
190
 
185
191
  {shouldShownError && (
186
192
  <div className={styles.errorWrapper} role='alert'>
package/src/index.module.css CHANGED
@@ -4,6 +4,7 @@
4
4
  @mixin paragraph_secondary_large;
5
5
 
6
6
  display: flex;
7
+ align-items: flex-start;
7
8
  width: 100%;
8
9
  padding: var(--gap-xs);
9
10
  color: var(--color-light-text-secondary);
@@ -13,6 +14,10 @@
13
14
  & svg {
14
15
  display: block;
15
16
  }
17
+
18
+ &:last-child {
19
+ box-shadow: none;
20
+ }
16
21
  }
17
22
 
18
23
  .infoSection {
@@ -48,15 +53,18 @@
48
53
  }
49
54
 
50
55
  .name {
51
- white-space: nowrap;
52
- overflow: hidden;
53
- text-overflow: ellipsis;
54
56
  color: var(--color-light-text-primary);
55
57
 
56
58
  & a {
57
59
  display: block;
58
60
  margin-bottom: 1px;
59
61
  }
62
+
63
+ &.rowLimit {
64
+ white-space: nowrap;
65
+ overflow: hidden;
66
+ text-overflow: ellipsis;
67
+ }
60
68
  }
61
69
 
62
70
  .meta {
@@ -100,6 +108,7 @@
100
108
  @mixin paragraph_primary_small;
101
109
 
102
110
  margin-left: var(--gap-s);
111
+ margin-top: var(--gap-3xs);
103
112
  }
104
113
 
105
114
  .spinnerWrapper {