@alfalab/core-components-file-upload-item 5.4.3 → 5.5.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 +4 -0
  2. package/Component.js +4 -3
  3. package/cssm/Component.d.ts +4 -0
  4. package/cssm/Component.js +3 -2
  5. package/cssm/index.module.css +8 -3
  6. package/esm/Component.d.ts +4 -0
  7. package/esm/Component.js +4 -3
  8. package/esm/index.css +30 -25
  9. package/index.css +30 -25
  10. package/modern/Component.d.ts +4 -0
  11. package/modern/Component.js +3 -3
  12. package/modern/index.css +30 -25
  13. package/package.json +3 -3
  14. package/src/Component.tsx +7 -1
  15. package/src/index.module.css +12 -3
package/Component.d.ts CHANGED
@@ -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,11 +19,11 @@ 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_1sj7r","infoSection":"file-upload-item__infoSection_1sj7r","info":"file-upload-item__info_1sj7r","icon":"file-upload-item__icon_1sj7r","errorIcon":"file-upload-item__errorIcon_1sj7r","successIcon":"file-upload-item__successIcon_1sj7r","name":"file-upload-item__name_1sj7r","rowLimit":"file-upload-item__rowLimit_1sj7r","meta":"file-upload-item__meta_1sj7r","size":"file-upload-item__size_1sj7r","delete":"file-upload-item__delete_1sj7r","download":"file-upload-item__download_1sj7r","errorWrapper":"file-upload-item__errorWrapper_1sj7r","restore":"file-upload-item__restore_1sj7r","spinnerWrapper":"file-upload-item__spinnerWrapper_1sj7r","spinner":"file-upload-item__spinner_1sj7r","uploadPercent":"file-upload-item__uploadPercent_1sj7r"};
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();
@@ -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
@@ -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,7 +22,7 @@ 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();
@@ -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
@@ -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,11 +10,11 @@ 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_1sj7r","infoSection":"file-upload-item__infoSection_1sj7r","info":"file-upload-item__info_1sj7r","icon":"file-upload-item__icon_1sj7r","errorIcon":"file-upload-item__errorIcon_1sj7r","successIcon":"file-upload-item__successIcon_1sj7r","name":"file-upload-item__name_1sj7r","rowLimit":"file-upload-item__rowLimit_1sj7r","meta":"file-upload-item__meta_1sj7r","size":"file-upload-item__size_1sj7r","delete":"file-upload-item__delete_1sj7r","download":"file-upload-item__download_1sj7r","errorWrapper":"file-upload-item__errorWrapper_1sj7r","restore":"file-upload-item__restore_1sj7r","spinnerWrapper":"file-upload-item__spinnerWrapper_1sj7r","spinner":"file-upload-item__spinner_1sj7r","uploadPercent":"file-upload-item__uploadPercent_1sj7r"};
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();
@@ -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: 12ndz */
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_1sj7r {
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_1sj7r svg {
41
42
  display: block;
42
- } .file-upload-item__infoSection_1f20v {
43
+ } .file-upload-item__component_1sj7r:last-child {
44
+ box-shadow: none;
45
+ } .file-upload-item__infoSection_1sj7r {
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_1sj7r {
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_1sj7r {
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_1sj7r {
59
62
  flex-shrink: 0;
60
63
  color: var(--color-light-status-negative);
61
- } .file-upload-item__successIcon_1f20v {
64
+ } .file-upload-item__successIcon_1sj7r {
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_1sj7r {
68
68
  color: var(--color-light-text-primary)
69
- } .file-upload-item__name_1f20v a {
69
+ } .file-upload-item__name_1sj7r a {
70
70
  display: block;
71
71
  margin-bottom: 1px;
72
- } .file-upload-item__meta_1f20v {
72
+ } .file-upload-item__name_1sj7r.file-upload-item__rowLimit_1sj7r {
73
+ white-space: nowrap;
74
+ overflow: hidden;
75
+ text-overflow: ellipsis;
76
+ } .file-upload-item__meta_1sj7r {
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_1sj7r > * {
79
83
  margin-right: var(--gap-s)
80
- } .file-upload-item__meta_1f20v > *:last-child {
84
+ } .file-upload-item__meta_1sj7r > *:last-child {
81
85
  margin-right: 0;
82
- } .file-upload-item__size_1f20v {
86
+ } .file-upload-item__size_1sj7r {
83
87
  text-align: right;
84
- } .file-upload-item__delete_1f20v,
85
- .file-upload-item__download_1f20v {
88
+ } .file-upload-item__delete_1sj7r,
89
+ .file-upload-item__download_1sj7r {
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_1sj7r {
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_1sj7r {
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_1sj7r {
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_1sj7r {
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_1sj7r {
109
114
  width: 20px;
110
115
  height: 20px;
111
- } .file-upload-item__uploadPercent_1f20v {
116
+ } .file-upload-item__uploadPercent_1sj7r {
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: 12ndz */
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_1sj7r {
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_1sj7r svg {
41
42
  display: block;
42
- } .file-upload-item__infoSection_1f20v {
43
+ } .file-upload-item__component_1sj7r:last-child {
44
+ box-shadow: none;
45
+ } .file-upload-item__infoSection_1sj7r {
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_1sj7r {
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_1sj7r {
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_1sj7r {
59
62
  flex-shrink: 0;
60
63
  color: var(--color-light-status-negative);
61
- } .file-upload-item__successIcon_1f20v {
64
+ } .file-upload-item__successIcon_1sj7r {
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_1sj7r {
68
68
  color: var(--color-light-text-primary)
69
- } .file-upload-item__name_1f20v a {
69
+ } .file-upload-item__name_1sj7r a {
70
70
  display: block;
71
71
  margin-bottom: 1px;
72
- } .file-upload-item__meta_1f20v {
72
+ } .file-upload-item__name_1sj7r.file-upload-item__rowLimit_1sj7r {
73
+ white-space: nowrap;
74
+ overflow: hidden;
75
+ text-overflow: ellipsis;
76
+ } .file-upload-item__meta_1sj7r {
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_1sj7r > * {
79
83
  margin-right: var(--gap-s)
80
- } .file-upload-item__meta_1f20v > *:last-child {
84
+ } .file-upload-item__meta_1sj7r > *:last-child {
81
85
  margin-right: 0;
82
- } .file-upload-item__size_1f20v {
86
+ } .file-upload-item__size_1sj7r {
83
87
  text-align: right;
84
- } .file-upload-item__delete_1f20v,
85
- .file-upload-item__download_1f20v {
88
+ } .file-upload-item__delete_1sj7r,
89
+ .file-upload-item__download_1sj7r {
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_1sj7r {
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_1sj7r {
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_1sj7r {
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_1sj7r {
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_1sj7r {
109
114
  width: 20px;
110
115
  height: 20px;
111
- } .file-upload-item__uploadPercent_1f20v {
116
+ } .file-upload-item__uploadPercent_1sj7r {
112
117
  margin-top: var(--gap-2xs);
113
118
  margin-left: var(--gap-xl);
114
119
  }
package/modern/Component.d.ts CHANGED
@@ -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,10 +10,10 @@ 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_1sj7r","infoSection":"file-upload-item__infoSection_1sj7r","info":"file-upload-item__info_1sj7r","icon":"file-upload-item__icon_1sj7r","errorIcon":"file-upload-item__errorIcon_1sj7r","successIcon":"file-upload-item__successIcon_1sj7r","name":"file-upload-item__name_1sj7r","rowLimit":"file-upload-item__rowLimit_1sj7r","meta":"file-upload-item__meta_1sj7r","size":"file-upload-item__size_1sj7r","delete":"file-upload-item__delete_1sj7r","download":"file-upload-item__download_1sj7r","errorWrapper":"file-upload-item__errorWrapper_1sj7r","restore":"file-upload-item__restore_1sj7r","spinnerWrapper":"file-upload-item__spinnerWrapper_1sj7r","spinner":"file-upload-item__spinner_1sj7r","uploadPercent":"file-upload-item__uploadPercent_1sj7r"};
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();
@@ -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: 12ndz */
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_1sj7r {
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_1sj7r svg {
41
42
  display: block;
42
- } .file-upload-item__infoSection_1f20v {
43
+ } .file-upload-item__component_1sj7r:last-child {
44
+ box-shadow: none;
45
+ } .file-upload-item__infoSection_1sj7r {
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_1sj7r {
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_1sj7r {
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_1sj7r {
59
62
  flex-shrink: 0;
60
63
  color: var(--color-light-status-negative);
61
- } .file-upload-item__successIcon_1f20v {
64
+ } .file-upload-item__successIcon_1sj7r {
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_1sj7r {
68
68
  color: var(--color-light-text-primary)
69
- } .file-upload-item__name_1f20v a {
69
+ } .file-upload-item__name_1sj7r a {
70
70
  display: block;
71
71
  margin-bottom: 1px;
72
- } .file-upload-item__meta_1f20v {
72
+ } .file-upload-item__name_1sj7r.file-upload-item__rowLimit_1sj7r {
73
+ white-space: nowrap;
74
+ overflow: hidden;
75
+ text-overflow: ellipsis;
76
+ } .file-upload-item__meta_1sj7r {
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_1sj7r > * {
79
83
  margin-right: var(--gap-s)
80
- } .file-upload-item__meta_1f20v > *:last-child {
84
+ } .file-upload-item__meta_1sj7r > *:last-child {
81
85
  margin-right: 0;
82
- } .file-upload-item__size_1f20v {
86
+ } .file-upload-item__size_1sj7r {
83
87
  text-align: right;
84
- } .file-upload-item__delete_1f20v,
85
- .file-upload-item__download_1f20v {
88
+ } .file-upload-item__delete_1sj7r,
89
+ .file-upload-item__download_1sj7r {
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_1sj7r {
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_1sj7r {
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_1sj7r {
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_1sj7r {
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_1sj7r {
109
114
  width: 20px;
110
115
  height: 20px;
111
- } .file-upload-item__uploadPercent_1f20v {
116
+ } .file-upload-item__uploadPercent_1sj7r {
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.5.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.4",
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
@@ -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>) => {
@@ -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 {