@alfalab/core-components-file-upload-item 5.1.0 → 5.1.1

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 (8) hide show
  1. package/Component.js +13 -12
  2. package/cssm/Component.js +12 -11
  3. package/esm/Component.js +14 -13
  4. package/esm/index.css +23 -23
  5. package/index.css +23 -23
  6. package/modern/Component.js +14 -13
  7. package/modern/index.css +23 -23
  8. package/package.json +1 -1
package/Component.js CHANGED
@@ -24,26 +24,26 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
24
24
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
25
25
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
26
26
 
27
- var styles = {"component":"file-upload-item__component_2wef3","infoSection":"file-upload-item__infoSection_2wef3","info":"file-upload-item__info_2wef3","icon":"file-upload-item__icon_2wef3","errorIcon":"file-upload-item__errorIcon_2wef3","successIcon":"file-upload-item__successIcon_2wef3","name":"file-upload-item__name_2wef3","meta":"file-upload-item__meta_2wef3","size":"file-upload-item__size_2wef3","delete":"file-upload-item__delete_2wef3","download":"file-upload-item__download_2wef3","errorWrapper":"file-upload-item__errorWrapper_2wef3","restore":"file-upload-item__restore_2wef3","spinnerWrapper":"file-upload-item__spinnerWrapper_2wef3","spinner":"file-upload-item__spinner_2wef3","uploadPercent":"file-upload-item__uploadPercent_2wef3"};
27
+ var styles = {"component":"file-upload-item__component_69bgy","infoSection":"file-upload-item__infoSection_69bgy","info":"file-upload-item__info_69bgy","icon":"file-upload-item__icon_69bgy","errorIcon":"file-upload-item__errorIcon_69bgy","successIcon":"file-upload-item__successIcon_69bgy","name":"file-upload-item__name_69bgy","meta":"file-upload-item__meta_69bgy","size":"file-upload-item__size_69bgy","delete":"file-upload-item__delete_69bgy","download":"file-upload-item__download_69bgy","errorWrapper":"file-upload-item__errorWrapper_69bgy","restore":"file-upload-item__restore_69bgy","spinnerWrapper":"file-upload-item__spinnerWrapper_69bgy","spinner":"file-upload-item__spinner_69bgy","uploadPercent":"file-upload-item__uploadPercent_69bgy"};
28
28
  require('./index.css')
29
29
 
30
30
  var FileUploadItem = function (_a) {
31
31
  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;
32
- var handleDownload = React.useCallback(function (event) {
32
+ var handleDownload = function (event) {
33
33
  if (onDownload) {
34
34
  event.preventDefault();
35
35
  onDownload(id);
36
36
  }
37
- }, [id, onDownload]);
38
- var handleDelete = React.useCallback(function () {
37
+ };
38
+ var handleDelete = function () {
39
39
  if (onDelete)
40
40
  onDelete(id);
41
- }, [id, onDelete]);
42
- var handleRestore = React.useCallback(function () {
41
+ };
42
+ var handleRestore = function () {
43
43
  if (onRestore)
44
44
  onRestore(id);
45
- }, [id, onRestore]);
46
- var renderIcon = React.useCallback(function () {
45
+ };
46
+ var renderIcon = function () {
47
47
  if (showRestore) {
48
48
  return React__default['default'].createElement(ClockMIcon.ClockMIcon, { className: styles.restoreIcon });
49
49
  }
@@ -60,13 +60,14 @@ var FileUploadItem = function (_a) {
60
60
  return React__default['default'].createElement(Icon, { className: styles.icon });
61
61
  }
62
62
  }
63
- }, [showRestore, uploadStatus]);
64
- var renderInfoSection = React.useCallback(function () {
63
+ };
64
+ var renderInfoSection = function () {
65
+ var shouldShownError = uploadStatus === 'ERROR' || !!error;
65
66
  var errorContent = uploadStatus === 'ERROR' && !error ? 'Не удалось загрузить файл' : error;
66
67
  return (React__default['default'].createElement("div", { className: styles.infoSection },
67
68
  React__default['default'].createElement("div", { className: styles.name }, name),
68
- error && (React__default['default'].createElement("div", { className: styles.errorWrapper, role: 'alert' }, errorContent))));
69
- }, [name, uploadStatus, error]);
69
+ shouldShownError && (React__default['default'].createElement("div", { className: styles.errorWrapper, role: 'alert' }, errorContent))));
70
+ };
70
71
  var showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
71
72
  var showDownload = Boolean(downloadLink) && !showRestore;
72
73
  return (React__default['default'].createElement("div", { className: cn__default['default'](className, styles.component, uploadStatus && styles[uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
package/cssm/Component.js CHANGED
@@ -28,21 +28,21 @@ var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
28
28
 
29
29
  var FileUploadItem = function (_a) {
30
30
  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;
31
- var handleDownload = React.useCallback(function (event) {
31
+ var handleDownload = function (event) {
32
32
  if (onDownload) {
33
33
  event.preventDefault();
34
34
  onDownload(id);
35
35
  }
36
- }, [id, onDownload]);
37
- var handleDelete = React.useCallback(function () {
36
+ };
37
+ var handleDelete = function () {
38
38
  if (onDelete)
39
39
  onDelete(id);
40
- }, [id, onDelete]);
41
- var handleRestore = React.useCallback(function () {
40
+ };
41
+ var handleRestore = function () {
42
42
  if (onRestore)
43
43
  onRestore(id);
44
- }, [id, onRestore]);
45
- var renderIcon = React.useCallback(function () {
44
+ };
45
+ var renderIcon = function () {
46
46
  if (showRestore) {
47
47
  return React__default['default'].createElement(ClockMIcon.ClockMIcon, { className: styles__default['default'].restoreIcon });
48
48
  }
@@ -59,13 +59,14 @@ var FileUploadItem = function (_a) {
59
59
  return React__default['default'].createElement(Icon, { className: styles__default['default'].icon });
60
60
  }
61
61
  }
62
- }, [showRestore, uploadStatus]);
63
- var renderInfoSection = React.useCallback(function () {
62
+ };
63
+ var renderInfoSection = function () {
64
+ var shouldShownError = uploadStatus === 'ERROR' || !!error;
64
65
  var errorContent = uploadStatus === 'ERROR' && !error ? 'Не удалось загрузить файл' : error;
65
66
  return (React__default['default'].createElement("div", { className: styles__default['default'].infoSection },
66
67
  React__default['default'].createElement("div", { className: styles__default['default'].name }, name),
67
- error && (React__default['default'].createElement("div", { className: styles__default['default'].errorWrapper, role: 'alert' }, errorContent))));
68
- }, [name, uploadStatus, error]);
68
+ shouldShownError && (React__default['default'].createElement("div", { className: styles__default['default'].errorWrapper, role: 'alert' }, errorContent))));
69
+ };
69
70
  var showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
70
71
  var showDownload = Boolean(downloadLink) && !showRestore;
71
72
  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 },
package/esm/Component.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useCallback } from 'react';
1
+ import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { IconButton } from '@alfalab/core-components-icon-button/esm';
4
4
  import { Link } from '@alfalab/core-components-link/esm';
@@ -15,26 +15,26 @@ import '@alfalab/icons-glyph/DocumentUnknownMIcon';
15
15
  import '@alfalab/icons-glyph/DocumentImageMIcon';
16
16
  import { fileIcon, humanFileSize } from './utils.js';
17
17
 
18
- var styles = {"component":"file-upload-item__component_2wef3","infoSection":"file-upload-item__infoSection_2wef3","info":"file-upload-item__info_2wef3","icon":"file-upload-item__icon_2wef3","errorIcon":"file-upload-item__errorIcon_2wef3","successIcon":"file-upload-item__successIcon_2wef3","name":"file-upload-item__name_2wef3","meta":"file-upload-item__meta_2wef3","size":"file-upload-item__size_2wef3","delete":"file-upload-item__delete_2wef3","download":"file-upload-item__download_2wef3","errorWrapper":"file-upload-item__errorWrapper_2wef3","restore":"file-upload-item__restore_2wef3","spinnerWrapper":"file-upload-item__spinnerWrapper_2wef3","spinner":"file-upload-item__spinner_2wef3","uploadPercent":"file-upload-item__uploadPercent_2wef3"};
18
+ var styles = {"component":"file-upload-item__component_69bgy","infoSection":"file-upload-item__infoSection_69bgy","info":"file-upload-item__info_69bgy","icon":"file-upload-item__icon_69bgy","errorIcon":"file-upload-item__errorIcon_69bgy","successIcon":"file-upload-item__successIcon_69bgy","name":"file-upload-item__name_69bgy","meta":"file-upload-item__meta_69bgy","size":"file-upload-item__size_69bgy","delete":"file-upload-item__delete_69bgy","download":"file-upload-item__download_69bgy","errorWrapper":"file-upload-item__errorWrapper_69bgy","restore":"file-upload-item__restore_69bgy","spinnerWrapper":"file-upload-item__spinnerWrapper_69bgy","spinner":"file-upload-item__spinner_69bgy","uploadPercent":"file-upload-item__uploadPercent_69bgy"};
19
19
  require('./index.css')
20
20
 
21
21
  var FileUploadItem = function (_a) {
22
22
  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;
23
- var handleDownload = useCallback(function (event) {
23
+ var handleDownload = function (event) {
24
24
  if (onDownload) {
25
25
  event.preventDefault();
26
26
  onDownload(id);
27
27
  }
28
- }, [id, onDownload]);
29
- var handleDelete = useCallback(function () {
28
+ };
29
+ var handleDelete = function () {
30
30
  if (onDelete)
31
31
  onDelete(id);
32
- }, [id, onDelete]);
33
- var handleRestore = useCallback(function () {
32
+ };
33
+ var handleRestore = function () {
34
34
  if (onRestore)
35
35
  onRestore(id);
36
- }, [id, onRestore]);
37
- var renderIcon = useCallback(function () {
36
+ };
37
+ var renderIcon = function () {
38
38
  if (showRestore) {
39
39
  return React.createElement(ClockMIcon, { className: styles.restoreIcon });
40
40
  }
@@ -51,13 +51,14 @@ var FileUploadItem = function (_a) {
51
51
  return React.createElement(Icon, { className: styles.icon });
52
52
  }
53
53
  }
54
- }, [showRestore, uploadStatus]);
55
- var renderInfoSection = useCallback(function () {
54
+ };
55
+ var renderInfoSection = function () {
56
+ var shouldShownError = uploadStatus === 'ERROR' || !!error;
56
57
  var errorContent = uploadStatus === 'ERROR' && !error ? 'Не удалось загрузить файл' : error;
57
58
  return (React.createElement("div", { className: styles.infoSection },
58
59
  React.createElement("div", { className: styles.name }, name),
59
- error && (React.createElement("div", { className: styles.errorWrapper, role: 'alert' }, errorContent))));
60
- }, [name, uploadStatus, error]);
60
+ shouldShownError && (React.createElement("div", { className: styles.errorWrapper, role: 'alert' }, errorContent))));
61
+ };
61
62
  var showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
62
63
  var showDownload = Boolean(downloadLink) && !showRestore;
63
64
  return (React.createElement("div", { className: cn(className, styles.component, uploadStatus && styles[uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 10gaw */
1
+ /* hash: ynemu */
2
2
  :root {
3
3
  --color-light-border-primary: #dbdee1;
4
4
  --color-light-graphic-negative: #f15045;
@@ -22,7 +22,7 @@
22
22
  --gap-s: 12px;
23
23
  --gap-xl: 24px;
24
24
  }
25
- .file-upload-item__component_2wef3 {
25
+ .file-upload-item__component_69bgy {
26
26
  font-size: 13px;
27
27
  line-height: 16px;
28
28
  font-weight: 400;
@@ -34,10 +34,10 @@
34
34
  box-shadow: 0 -1px 0 0 var(--color-light-border-primary) inset;
35
35
  box-sizing: border-box
36
36
  }
37
- .file-upload-item__component_2wef3 svg {
37
+ .file-upload-item__component_69bgy svg {
38
38
  display: block;
39
39
  }
40
- .file-upload-item__infoSection_2wef3 {
40
+ .file-upload-item__infoSection_69bgy {
41
41
  display: flex;
42
42
  flex-direction: column;
43
43
  flex: 1;
@@ -45,90 +45,90 @@
45
45
  margin-left: var(--gap-s);
46
46
  min-width: 40%;
47
47
  }
48
- .file-upload-item__info_2wef3 {
48
+ .file-upload-item__info_69bgy {
49
49
  display: flex;
50
50
  flex-wrap: wrap;
51
51
  flex: 1;
52
52
  overflow: hidden;
53
53
  }
54
- .file-upload-item__icon_2wef3 {
54
+ .file-upload-item__icon_69bgy {
55
55
  display: block;
56
56
  flex-shrink: 0;
57
57
  color: var(--color-light-text-primary);
58
58
  }
59
- .file-upload-item__errorIcon_2wef3 {
59
+ .file-upload-item__errorIcon_69bgy {
60
60
  flex-shrink: 0;
61
61
  color: var(--color-light-graphic-negative);
62
62
  }
63
- .file-upload-item__successIcon_2wef3 {
63
+ .file-upload-item__successIcon_69bgy {
64
64
  flex-shrink: 0;
65
65
  color: var(--color-light-graphic-positive);
66
66
  }
67
- .file-upload-item__name_2wef3 {
67
+ .file-upload-item__name_69bgy {
68
68
  white-space: nowrap;
69
69
  overflow: hidden;
70
70
  text-overflow: ellipsis;
71
71
  color: var(--color-light-text-primary)
72
72
  }
73
- .file-upload-item__name_2wef3 a {
73
+ .file-upload-item__name_69bgy a {
74
74
  display: block;
75
75
  margin-bottom: 1px;
76
76
  }
77
- .file-upload-item__meta_2wef3 {
77
+ .file-upload-item__meta_69bgy {
78
78
  display: flex;
79
79
  white-space: nowrap;
80
80
  margin-right: var(--gap-2xs);
81
81
  margin-left: var(--gap-xl);
82
82
  padding: var(--gap-2xs) 0
83
83
  }
84
- .file-upload-item__meta_2wef3 > * {
84
+ .file-upload-item__meta_69bgy > * {
85
85
  margin-right: var(--gap-s)
86
86
  }
87
- .file-upload-item__meta_2wef3 > *:last-child {
87
+ .file-upload-item__meta_69bgy > *:last-child {
88
88
  margin-right: 0;
89
89
  }
90
- .file-upload-item__size_2wef3 {
90
+ .file-upload-item__size_69bgy {
91
91
  text-align: right;
92
92
  }
93
- .file-upload-item__delete_2wef3,
94
- .file-upload-item__download_2wef3 {
93
+ .file-upload-item__delete_69bgy,
94
+ .file-upload-item__download_69bgy {
95
95
  height: 24px;
96
96
  width: 24px;
97
97
  margin-left: var(--gap-xs)
98
98
  }
99
- .file-upload-item__delete_2wef3 svg, .file-upload-item__download_2wef3 svg {
99
+ .file-upload-item__delete_69bgy svg, .file-upload-item__download_69bgy svg {
100
100
  width: 18px;
101
101
  height: 18px;
102
102
  }
103
- .file-upload-item__errorWrapper_2wef3 {
103
+ .file-upload-item__errorWrapper_69bgy {
104
104
  margin-top: var(--gap-s);
105
105
  color: var(--color-light-text-accent)
106
106
  }
107
107
  @media (--small-only) {
108
- .file-upload-item__errorWrapper_2wef3 {
108
+ .file-upload-item__errorWrapper_69bgy {
109
109
  flex: 1 0 100%;
110
110
  margin-top: var(--gap-3xs)
111
111
  }
112
112
  }
113
- .file-upload-item__restore_2wef3 {
113
+ .file-upload-item__restore_69bgy {
114
114
  font-size: 14px;
115
115
  line-height: 20px;
116
116
  font-weight: 400;
117
117
 
118
118
  margin-left: var(--gap-s);
119
119
  }
120
- .file-upload-item__spinnerWrapper_2wef3 {
120
+ .file-upload-item__spinnerWrapper_69bgy {
121
121
  display: flex;
122
122
  justify-content: center;
123
123
  align-items: center;
124
124
  width: 24px;
125
125
  height: 24px;
126
126
  }
127
- .file-upload-item__spinner_2wef3 {
127
+ .file-upload-item__spinner_69bgy {
128
128
  width: 20px;
129
129
  height: 20px;
130
130
  }
131
- .file-upload-item__uploadPercent_2wef3 {
131
+ .file-upload-item__uploadPercent_69bgy {
132
132
  margin-top: var(--gap-2xs);
133
133
  margin-left: var(--gap-xl);
134
134
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 10gaw */
1
+ /* hash: ynemu */
2
2
  :root {
3
3
  --color-light-border-primary: #dbdee1;
4
4
  --color-light-graphic-negative: #f15045;
@@ -22,7 +22,7 @@
22
22
  --gap-s: 12px;
23
23
  --gap-xl: 24px;
24
24
  }
25
- .file-upload-item__component_2wef3 {
25
+ .file-upload-item__component_69bgy {
26
26
  font-size: 13px;
27
27
  line-height: 16px;
28
28
  font-weight: 400;
@@ -34,10 +34,10 @@
34
34
  box-shadow: 0 -1px 0 0 var(--color-light-border-primary) inset;
35
35
  box-sizing: border-box
36
36
  }
37
- .file-upload-item__component_2wef3 svg {
37
+ .file-upload-item__component_69bgy svg {
38
38
  display: block;
39
39
  }
40
- .file-upload-item__infoSection_2wef3 {
40
+ .file-upload-item__infoSection_69bgy {
41
41
  display: flex;
42
42
  flex-direction: column;
43
43
  flex: 1;
@@ -45,90 +45,90 @@
45
45
  margin-left: var(--gap-s);
46
46
  min-width: 40%;
47
47
  }
48
- .file-upload-item__info_2wef3 {
48
+ .file-upload-item__info_69bgy {
49
49
  display: flex;
50
50
  flex-wrap: wrap;
51
51
  flex: 1;
52
52
  overflow: hidden;
53
53
  }
54
- .file-upload-item__icon_2wef3 {
54
+ .file-upload-item__icon_69bgy {
55
55
  display: block;
56
56
  flex-shrink: 0;
57
57
  color: var(--color-light-text-primary);
58
58
  }
59
- .file-upload-item__errorIcon_2wef3 {
59
+ .file-upload-item__errorIcon_69bgy {
60
60
  flex-shrink: 0;
61
61
  color: var(--color-light-graphic-negative);
62
62
  }
63
- .file-upload-item__successIcon_2wef3 {
63
+ .file-upload-item__successIcon_69bgy {
64
64
  flex-shrink: 0;
65
65
  color: var(--color-light-graphic-positive);
66
66
  }
67
- .file-upload-item__name_2wef3 {
67
+ .file-upload-item__name_69bgy {
68
68
  white-space: nowrap;
69
69
  overflow: hidden;
70
70
  text-overflow: ellipsis;
71
71
  color: var(--color-light-text-primary)
72
72
  }
73
- .file-upload-item__name_2wef3 a {
73
+ .file-upload-item__name_69bgy a {
74
74
  display: block;
75
75
  margin-bottom: 1px;
76
76
  }
77
- .file-upload-item__meta_2wef3 {
77
+ .file-upload-item__meta_69bgy {
78
78
  display: flex;
79
79
  white-space: nowrap;
80
80
  margin-right: var(--gap-2xs);
81
81
  margin-left: var(--gap-xl);
82
82
  padding: var(--gap-2xs) 0
83
83
  }
84
- .file-upload-item__meta_2wef3 > * {
84
+ .file-upload-item__meta_69bgy > * {
85
85
  margin-right: var(--gap-s)
86
86
  }
87
- .file-upload-item__meta_2wef3 > *:last-child {
87
+ .file-upload-item__meta_69bgy > *:last-child {
88
88
  margin-right: 0;
89
89
  }
90
- .file-upload-item__size_2wef3 {
90
+ .file-upload-item__size_69bgy {
91
91
  text-align: right;
92
92
  }
93
- .file-upload-item__delete_2wef3,
94
- .file-upload-item__download_2wef3 {
93
+ .file-upload-item__delete_69bgy,
94
+ .file-upload-item__download_69bgy {
95
95
  height: 24px;
96
96
  width: 24px;
97
97
  margin-left: var(--gap-xs)
98
98
  }
99
- .file-upload-item__delete_2wef3 svg, .file-upload-item__download_2wef3 svg {
99
+ .file-upload-item__delete_69bgy svg, .file-upload-item__download_69bgy svg {
100
100
  width: 18px;
101
101
  height: 18px;
102
102
  }
103
- .file-upload-item__errorWrapper_2wef3 {
103
+ .file-upload-item__errorWrapper_69bgy {
104
104
  margin-top: var(--gap-s);
105
105
  color: var(--color-light-text-accent)
106
106
  }
107
107
  @media (--small-only) {
108
- .file-upload-item__errorWrapper_2wef3 {
108
+ .file-upload-item__errorWrapper_69bgy {
109
109
  flex: 1 0 100%;
110
110
  margin-top: var(--gap-3xs)
111
111
  }
112
112
  }
113
- .file-upload-item__restore_2wef3 {
113
+ .file-upload-item__restore_69bgy {
114
114
  font-size: 14px;
115
115
  line-height: 20px;
116
116
  font-weight: 400;
117
117
 
118
118
  margin-left: var(--gap-s);
119
119
  }
120
- .file-upload-item__spinnerWrapper_2wef3 {
120
+ .file-upload-item__spinnerWrapper_69bgy {
121
121
  display: flex;
122
122
  justify-content: center;
123
123
  align-items: center;
124
124
  width: 24px;
125
125
  height: 24px;
126
126
  }
127
- .file-upload-item__spinner_2wef3 {
127
+ .file-upload-item__spinner_69bgy {
128
128
  width: 20px;
129
129
  height: 20px;
130
130
  }
131
- .file-upload-item__uploadPercent_2wef3 {
131
+ .file-upload-item__uploadPercent_69bgy {
132
132
  margin-top: var(--gap-2xs);
133
133
  margin-left: var(--gap-xl);
134
134
  }
package/modern/Component.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useCallback } from 'react';
1
+ import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { IconButton } from '@alfalab/core-components-icon-button/modern';
4
4
  import { Link } from '@alfalab/core-components-link/modern';
@@ -15,25 +15,25 @@ import '@alfalab/icons-glyph/DocumentUnknownMIcon';
15
15
  import '@alfalab/icons-glyph/DocumentImageMIcon';
16
16
  import { fileIcon, humanFileSize } from './utils.js';
17
17
 
18
- var styles = {"component":"file-upload-item__component_2wef3","infoSection":"file-upload-item__infoSection_2wef3","info":"file-upload-item__info_2wef3","icon":"file-upload-item__icon_2wef3","errorIcon":"file-upload-item__errorIcon_2wef3","successIcon":"file-upload-item__successIcon_2wef3","name":"file-upload-item__name_2wef3","meta":"file-upload-item__meta_2wef3","size":"file-upload-item__size_2wef3","delete":"file-upload-item__delete_2wef3","download":"file-upload-item__download_2wef3","errorWrapper":"file-upload-item__errorWrapper_2wef3","restore":"file-upload-item__restore_2wef3","spinnerWrapper":"file-upload-item__spinnerWrapper_2wef3","spinner":"file-upload-item__spinner_2wef3","uploadPercent":"file-upload-item__uploadPercent_2wef3"};
18
+ var styles = {"component":"file-upload-item__component_69bgy","infoSection":"file-upload-item__infoSection_69bgy","info":"file-upload-item__info_69bgy","icon":"file-upload-item__icon_69bgy","errorIcon":"file-upload-item__errorIcon_69bgy","successIcon":"file-upload-item__successIcon_69bgy","name":"file-upload-item__name_69bgy","meta":"file-upload-item__meta_69bgy","size":"file-upload-item__size_69bgy","delete":"file-upload-item__delete_69bgy","download":"file-upload-item__download_69bgy","errorWrapper":"file-upload-item__errorWrapper_69bgy","restore":"file-upload-item__restore_69bgy","spinnerWrapper":"file-upload-item__spinnerWrapper_69bgy","spinner":"file-upload-item__spinner_69bgy","uploadPercent":"file-upload-item__uploadPercent_69bgy"};
19
19
  require('./index.css')
20
20
 
21
21
  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, }) => {
22
- const handleDownload = useCallback((event) => {
22
+ const handleDownload = (event) => {
23
23
  if (onDownload) {
24
24
  event.preventDefault();
25
25
  onDownload(id);
26
26
  }
27
- }, [id, onDownload]);
28
- const handleDelete = useCallback(() => {
27
+ };
28
+ const handleDelete = () => {
29
29
  if (onDelete)
30
30
  onDelete(id);
31
- }, [id, onDelete]);
32
- const handleRestore = useCallback(() => {
31
+ };
32
+ const handleRestore = () => {
33
33
  if (onRestore)
34
34
  onRestore(id);
35
- }, [id, onRestore]);
36
- const renderIcon = useCallback(() => {
35
+ };
36
+ const renderIcon = () => {
37
37
  if (showRestore) {
38
38
  return React.createElement(ClockMIcon, { className: styles.restoreIcon });
39
39
  }
@@ -50,13 +50,14 @@ const FileUploadItem = ({ className, children, id = '0', name = '', size, icon:
50
50
  return React.createElement(Icon, { className: styles.icon });
51
51
  }
52
52
  }
53
- }, [showRestore, uploadStatus]);
54
- const renderInfoSection = useCallback(() => {
53
+ };
54
+ const renderInfoSection = () => {
55
+ const shouldShownError = uploadStatus === 'ERROR' || !!error;
55
56
  const errorContent = uploadStatus === 'ERROR' && !error ? 'Не удалось загрузить файл' : error;
56
57
  return (React.createElement("div", { className: styles.infoSection },
57
58
  React.createElement("div", { className: styles.name }, name),
58
- error && (React.createElement("div", { className: styles.errorWrapper, role: 'alert' }, errorContent))));
59
- }, [name, uploadStatus, error]);
59
+ shouldShownError && (React.createElement("div", { className: styles.errorWrapper, role: 'alert' }, errorContent))));
60
+ };
60
61
  const showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
61
62
  const showDownload = Boolean(downloadLink) && !showRestore;
62
63
  return (React.createElement("div", { className: cn(className, styles.component, uploadStatus && styles[uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 10gaw */
1
+ /* hash: ynemu */
2
2
  :root {
3
3
  --color-light-border-primary: #dbdee1;
4
4
  --color-light-graphic-negative: #f15045;
@@ -22,7 +22,7 @@
22
22
  --gap-s: 12px;
23
23
  --gap-xl: 24px;
24
24
  }
25
- .file-upload-item__component_2wef3 {
25
+ .file-upload-item__component_69bgy {
26
26
  font-size: 13px;
27
27
  line-height: 16px;
28
28
  font-weight: 400;
@@ -34,10 +34,10 @@
34
34
  box-shadow: 0 -1px 0 0 var(--color-light-border-primary) inset;
35
35
  box-sizing: border-box
36
36
  }
37
- .file-upload-item__component_2wef3 svg {
37
+ .file-upload-item__component_69bgy svg {
38
38
  display: block;
39
39
  }
40
- .file-upload-item__infoSection_2wef3 {
40
+ .file-upload-item__infoSection_69bgy {
41
41
  display: flex;
42
42
  flex-direction: column;
43
43
  flex: 1;
@@ -45,90 +45,90 @@
45
45
  margin-left: var(--gap-s);
46
46
  min-width: 40%;
47
47
  }
48
- .file-upload-item__info_2wef3 {
48
+ .file-upload-item__info_69bgy {
49
49
  display: flex;
50
50
  flex-wrap: wrap;
51
51
  flex: 1;
52
52
  overflow: hidden;
53
53
  }
54
- .file-upload-item__icon_2wef3 {
54
+ .file-upload-item__icon_69bgy {
55
55
  display: block;
56
56
  flex-shrink: 0;
57
57
  color: var(--color-light-text-primary);
58
58
  }
59
- .file-upload-item__errorIcon_2wef3 {
59
+ .file-upload-item__errorIcon_69bgy {
60
60
  flex-shrink: 0;
61
61
  color: var(--color-light-graphic-negative);
62
62
  }
63
- .file-upload-item__successIcon_2wef3 {
63
+ .file-upload-item__successIcon_69bgy {
64
64
  flex-shrink: 0;
65
65
  color: var(--color-light-graphic-positive);
66
66
  }
67
- .file-upload-item__name_2wef3 {
67
+ .file-upload-item__name_69bgy {
68
68
  white-space: nowrap;
69
69
  overflow: hidden;
70
70
  text-overflow: ellipsis;
71
71
  color: var(--color-light-text-primary)
72
72
  }
73
- .file-upload-item__name_2wef3 a {
73
+ .file-upload-item__name_69bgy a {
74
74
  display: block;
75
75
  margin-bottom: 1px;
76
76
  }
77
- .file-upload-item__meta_2wef3 {
77
+ .file-upload-item__meta_69bgy {
78
78
  display: flex;
79
79
  white-space: nowrap;
80
80
  margin-right: var(--gap-2xs);
81
81
  margin-left: var(--gap-xl);
82
82
  padding: var(--gap-2xs) 0
83
83
  }
84
- .file-upload-item__meta_2wef3 > * {
84
+ .file-upload-item__meta_69bgy > * {
85
85
  margin-right: var(--gap-s)
86
86
  }
87
- .file-upload-item__meta_2wef3 > *:last-child {
87
+ .file-upload-item__meta_69bgy > *:last-child {
88
88
  margin-right: 0;
89
89
  }
90
- .file-upload-item__size_2wef3 {
90
+ .file-upload-item__size_69bgy {
91
91
  text-align: right;
92
92
  }
93
- .file-upload-item__delete_2wef3,
94
- .file-upload-item__download_2wef3 {
93
+ .file-upload-item__delete_69bgy,
94
+ .file-upload-item__download_69bgy {
95
95
  height: 24px;
96
96
  width: 24px;
97
97
  margin-left: var(--gap-xs)
98
98
  }
99
- .file-upload-item__delete_2wef3 svg, .file-upload-item__download_2wef3 svg {
99
+ .file-upload-item__delete_69bgy svg, .file-upload-item__download_69bgy svg {
100
100
  width: 18px;
101
101
  height: 18px;
102
102
  }
103
- .file-upload-item__errorWrapper_2wef3 {
103
+ .file-upload-item__errorWrapper_69bgy {
104
104
  margin-top: var(--gap-s);
105
105
  color: var(--color-light-text-accent)
106
106
  }
107
107
  @media (--small-only) {
108
- .file-upload-item__errorWrapper_2wef3 {
108
+ .file-upload-item__errorWrapper_69bgy {
109
109
  flex: 1 0 100%;
110
110
  margin-top: var(--gap-3xs)
111
111
  }
112
112
  }
113
- .file-upload-item__restore_2wef3 {
113
+ .file-upload-item__restore_69bgy {
114
114
  font-size: 14px;
115
115
  line-height: 20px;
116
116
  font-weight: 400;
117
117
 
118
118
  margin-left: var(--gap-s);
119
119
  }
120
- .file-upload-item__spinnerWrapper_2wef3 {
120
+ .file-upload-item__spinnerWrapper_69bgy {
121
121
  display: flex;
122
122
  justify-content: center;
123
123
  align-items: center;
124
124
  width: 24px;
125
125
  height: 24px;
126
126
  }
127
- .file-upload-item__spinner_2wef3 {
127
+ .file-upload-item__spinner_69bgy {
128
128
  width: 20px;
129
129
  height: 20px;
130
130
  }
131
- .file-upload-item__uploadPercent_2wef3 {
131
+ .file-upload-item__uploadPercent_69bgy {
132
132
  margin-top: var(--gap-2xs);
133
133
  margin-left: var(--gap-xl);
134
134
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-file-upload-item",
3
- "version": "5.1.0",
3
+ "version": "5.1.1",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",