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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/dist/Component.d.ts +1 -1
  3. package/dist/Component.js +16 -8
  4. package/dist/cssm/Component.d.ts +1 -1
  5. package/dist/cssm/Component.js +15 -7
  6. package/dist/cssm/index.js +1 -0
  7. package/dist/cssm/index.module.css +49 -16
  8. package/dist/esm/Component.d.ts +1 -1
  9. package/dist/esm/Component.js +16 -8
  10. package/dist/esm/index.css +61 -28
  11. package/dist/esm/index.js +1 -0
  12. package/dist/index.css +61 -28
  13. package/dist/index.js +1 -0
  14. package/dist/modern/Component.d.ts +1 -1
  15. package/dist/modern/Component.js +16 -8
  16. package/dist/modern/index.css +61 -28
  17. package/dist/modern/index.js +1 -0
  18. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,41 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.4.2](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-file-upload-item@3.4.1...@alfalab/core-components-file-upload-item@3.4.2) (2021-12-29)
7
+
8
+ **Note:** Version bump only for package @alfalab/core-components-file-upload-item
9
+
10
+
11
+
12
+
13
+
14
+ ## [3.4.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-file-upload-item@3.4.0...@alfalab/core-components-file-upload-item@3.4.1) (2021-12-14)
15
+
16
+ **Note:** Version bump only for package @alfalab/core-components-file-upload-item
17
+
18
+
19
+
20
+
21
+
22
+ # [3.4.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-file-upload-item@3.3.3...@alfalab/core-components-file-upload-item@3.4.0) (2021-12-09)
23
+
24
+
25
+ ### Features
26
+
27
+ * **file-upload-item:** обновлен внешний вид ([#902](https://github.com/alfa-laboratory/core-components/issues/902)) ([d0f7d1e](https://github.com/alfa-laboratory/core-components/commit/d0f7d1ebdf302711a01549e86d0d8a5129b66d82))
28
+
29
+
30
+
31
+
32
+
33
+ ## [3.3.3](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-file-upload-item@3.3.2...@alfalab/core-components-file-upload-item@3.3.3) (2021-12-08)
34
+
35
+ **Note:** Version bump only for package @alfalab/core-components-file-upload-item
36
+
37
+
38
+
39
+
40
+
6
41
  ## [3.3.2](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-file-upload-item@3.3.1...@alfalab/core-components-file-upload-item@3.3.2) (2021-11-26)
7
42
 
8
43
  **Note:** Version bump only for package @alfalab/core-components-file-upload-item
package/dist/Component.d.ts CHANGED
@@ -24,7 +24,7 @@ type FileUploadItemProps = {
24
24
  */
25
25
  uploadDate?: string;
26
26
  /**
27
- * Ссылка на файл. Если прокидывается этот параметр, то заголовок становится ссылкой
27
+ * Ссылка на файл. Если прокидывается этот параметр, то появляется кнопка скачивания
28
28
  */
29
29
  downloadLink?: string;
30
30
  /**
package/dist/Component.js CHANGED
@@ -10,7 +10,8 @@ var coreComponentsSpinner = require('@alfalab/core-components-spinner');
10
10
  var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
11
11
  var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
12
12
  var AlertCircleMIcon = require('@alfalab/icons-glyph/AlertCircleMIcon');
13
- require('@alfalab/icons-glyph');
13
+ var PointerDownMIcon = require('@alfalab/icons-glyph/PointerDownMIcon');
14
+ var iconsGlyph = require('@alfalab/icons-glyph');
14
15
  var utils = require('./utils.js');
15
16
 
16
17
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -18,7 +19,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
18
19
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
20
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
20
21
 
21
- var styles = {"component":"file-upload-item__component_1g56v","info":"file-upload-item__info_1g56v","icon":"file-upload-item__icon_1g56v","errorIcon":"file-upload-item__errorIcon_1g56v","successIcon":"file-upload-item__successIcon_1g56v","name":"file-upload-item__name_1g56v","meta":"file-upload-item__meta_1g56v","size":"file-upload-item__size_1g56v","delete":"file-upload-item__delete_1g56v","error":"file-upload-item__error_1g56v"};
22
+ var styles = {"component":"file-upload-item__component_1sqor","infoSection":"file-upload-item__infoSection_1sqor","info":"file-upload-item__info_1sqor","icon":"file-upload-item__icon_1sqor","errorIcon":"file-upload-item__errorIcon_1sqor","successIcon":"file-upload-item__successIcon_1sqor","name":"file-upload-item__name_1sqor","meta":"file-upload-item__meta_1sqor","size":"file-upload-item__size_1sqor","delete":"file-upload-item__delete_1sqor","download":"file-upload-item__download_1sqor","errorWrapper":"file-upload-item__errorWrapper_1sqor","restore":"file-upload-item__restore_1sqor","spinnerWrapper":"file-upload-item__spinnerWrapper_1sqor","spinner":"file-upload-item__spinner_1sqor","uploadPercent":"file-upload-item__uploadPercent_1sqor"};
22
23
  require('./index.css')
23
24
 
24
25
  var FileUploadItem = function (_a) {
@@ -38,6 +39,9 @@ var FileUploadItem = function (_a) {
38
39
  onRestore(id);
39
40
  }, [id, onRestore]);
40
41
  var renderIcon = React.useCallback(function () {
42
+ if (showRestore) {
43
+ return React__default['default'].createElement(iconsGlyph.ClockMIcon, { className: styles.restoreIcon });
44
+ }
41
45
  switch (uploadStatus) {
42
46
  case 'ERROR':
43
47
  return React__default['default'].createElement(AlertCircleMIcon.AlertCircleMIcon, { className: styles.errorIcon });
@@ -45,25 +49,29 @@ var FileUploadItem = function (_a) {
45
49
  return React__default['default'].createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, { className: styles.successIcon });
46
50
  case 'LOADING':
47
51
  case 'UPLOADING':
48
- return React__default['default'].createElement(coreComponentsSpinner.Spinner, { visible: true });
52
+ return (React__default['default'].createElement("div", { className: styles.spinnerWrapper },
53
+ React__default['default'].createElement(coreComponentsSpinner.Spinner, { visible: true, className: styles.spinner })));
49
54
  default: {
50
55
  return React__default['default'].createElement(Icon, { className: styles.icon });
51
56
  }
52
57
  }
53
- }, [uploadStatus]);
54
- var renderName = React.useCallback(function () { return (React__default['default'].createElement("div", { className: styles.name }, downloadLink ? (React__default['default'].createElement(coreComponentsLink.Link, { pseudo: true, href: downloadLink, onClick: handleDownload, download: download }, name)) : (name))); }, [downloadLink, handleDownload, download, name]);
58
+ }, [showRestore, uploadStatus]);
59
+ var renderInfoSection = React.useCallback(function () { return (React__default['default'].createElement("div", { className: styles.infoSection },
60
+ React__default['default'].createElement("div", { className: styles.name }, name),
61
+ uploadStatus === 'ERROR' && error && (React__default['default'].createElement("div", { className: styles.errorWrapper, role: 'alert' }, error)))); }, [name, uploadStatus, error]);
55
62
  var showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
63
+ var showDownload = Boolean(downloadLink) && !showRestore;
56
64
  return (React__default['default'].createElement("div", { className: cn__default['default'](className, styles.component, uploadStatus && styles[uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
57
65
  React__default['default'].createElement("div", { className: styles.info },
58
66
  renderIcon(),
59
- renderName(),
67
+ renderInfoSection(),
60
68
  children,
61
- uploadStatus === 'UPLOADING' && React__default['default'].createElement("span", null, Math.round(uploadPercent) + "%"),
62
- uploadStatus === 'ERROR' && (React__default['default'].createElement("span", { className: styles.error, role: 'alert' }, error)),
69
+ uploadStatus === 'UPLOADING' && (React__default['default'].createElement("span", { className: styles.uploadPercent }, Math.round(uploadPercent) + "%")),
63
70
  showMeta && (React__default['default'].createElement("div", { className: styles.meta },
64
71
  uploadDate && React__default['default'].createElement("span", { key: uploadDate }, uploadDate),
65
72
  size && (React__default['default'].createElement("span", { key: size, className: styles.size }, utils.humanFileSize(size)))))),
66
73
  showRestore && (React__default['default'].createElement(coreComponentsLink.Link, { pseudo: true, className: styles.restore, onClick: handleRestore }, "\u0412\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C")),
74
+ showDownload && (React__default['default'].createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: PointerDownMIcon.PointerDownMIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, download: download })),
67
75
  showDelete && !showRestore && (React__default['default'].createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: CrossMIcon.CrossMIcon, onClick: handleDelete, className: styles.delete, "aria-label": '\u0443\u0434\u0430\u043B\u0438\u0442\u044C' }))));
68
76
  };
69
77
 
package/dist/cssm/Component.d.ts CHANGED
@@ -24,7 +24,7 @@ type FileUploadItemProps = {
24
24
  */
25
25
  uploadDate?: string;
26
26
  /**
27
- * Ссылка на файл. Если прокидывается этот параметр, то заголовок становится ссылкой
27
+ * Ссылка на файл. Если прокидывается этот параметр, то появляется кнопка скачивания
28
28
  */
29
29
  downloadLink?: string;
30
30
  /**
package/dist/cssm/Component.js CHANGED
@@ -10,7 +10,8 @@ var coreComponentsSpinner = require('@alfalab/core-components-spinner/dist/cssm'
10
10
  var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
11
11
  var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
12
12
  var AlertCircleMIcon = require('@alfalab/icons-glyph/AlertCircleMIcon');
13
- require('@alfalab/icons-glyph');
13
+ var PointerDownMIcon = require('@alfalab/icons-glyph/PointerDownMIcon');
14
+ var iconsGlyph = require('@alfalab/icons-glyph');
14
15
  var utils = require('./utils.js');
15
16
  var styles = require('./index.module.css');
16
17
 
@@ -37,6 +38,9 @@ var FileUploadItem = function (_a) {
37
38
  onRestore(id);
38
39
  }, [id, onRestore]);
39
40
  var renderIcon = React.useCallback(function () {
41
+ if (showRestore) {
42
+ return React__default['default'].createElement(iconsGlyph.ClockMIcon, { className: styles__default['default'].restoreIcon });
43
+ }
40
44
  switch (uploadStatus) {
41
45
  case 'ERROR':
42
46
  return React__default['default'].createElement(AlertCircleMIcon.AlertCircleMIcon, { className: styles__default['default'].errorIcon });
@@ -44,25 +48,29 @@ var FileUploadItem = function (_a) {
44
48
  return React__default['default'].createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, { className: styles__default['default'].successIcon });
45
49
  case 'LOADING':
46
50
  case 'UPLOADING':
47
- return React__default['default'].createElement(coreComponentsSpinner.Spinner, { visible: true });
51
+ return (React__default['default'].createElement("div", { className: styles__default['default'].spinnerWrapper },
52
+ React__default['default'].createElement(coreComponentsSpinner.Spinner, { visible: true, className: styles__default['default'].spinner })));
48
53
  default: {
49
54
  return React__default['default'].createElement(Icon, { className: styles__default['default'].icon });
50
55
  }
51
56
  }
52
- }, [uploadStatus]);
53
- var renderName = React.useCallback(function () { return (React__default['default'].createElement("div", { className: styles__default['default'].name }, downloadLink ? (React__default['default'].createElement(coreComponentsLink.Link, { pseudo: true, href: downloadLink, onClick: handleDownload, download: download }, name)) : (name))); }, [downloadLink, handleDownload, download, name]);
57
+ }, [showRestore, uploadStatus]);
58
+ var renderInfoSection = React.useCallback(function () { return (React__default['default'].createElement("div", { className: styles__default['default'].infoSection },
59
+ React__default['default'].createElement("div", { className: styles__default['default'].name }, name),
60
+ uploadStatus === 'ERROR' && error && (React__default['default'].createElement("div", { className: styles__default['default'].errorWrapper, role: 'alert' }, error)))); }, [name, uploadStatus, error]);
54
61
  var showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
62
+ var showDownload = Boolean(downloadLink) && !showRestore;
55
63
  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 },
56
64
  React__default['default'].createElement("div", { className: styles__default['default'].info },
57
65
  renderIcon(),
58
- renderName(),
66
+ renderInfoSection(),
59
67
  children,
60
- uploadStatus === 'UPLOADING' && React__default['default'].createElement("span", null, Math.round(uploadPercent) + "%"),
61
- uploadStatus === 'ERROR' && (React__default['default'].createElement("span", { className: styles__default['default'].error, role: 'alert' }, error)),
68
+ uploadStatus === 'UPLOADING' && (React__default['default'].createElement("span", { className: styles__default['default'].uploadPercent }, Math.round(uploadPercent) + "%")),
62
69
  showMeta && (React__default['default'].createElement("div", { className: styles__default['default'].meta },
63
70
  uploadDate && React__default['default'].createElement("span", { key: uploadDate }, uploadDate),
64
71
  size && (React__default['default'].createElement("span", { key: size, className: styles__default['default'].size }, utils.humanFileSize(size)))))),
65
72
  showRestore && (React__default['default'].createElement(coreComponentsLink.Link, { pseudo: true, className: styles__default['default'].restore, onClick: handleRestore }, "\u0412\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C")),
73
+ showDownload && (React__default['default'].createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: PointerDownMIcon.PointerDownMIcon, className: styles__default['default'].download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, download: download })),
66
74
  showDelete && !showRestore && (React__default['default'].createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: CrossMIcon.CrossMIcon, onClick: handleDelete, className: styles__default['default'].delete, "aria-label": '\u0443\u0434\u0430\u043B\u0438\u0442\u044C' }))));
67
75
  };
68
76
 
package/dist/cssm/index.js CHANGED
@@ -10,6 +10,7 @@ require('@alfalab/core-components-spinner/dist/cssm');
10
10
  require('@alfalab/icons-glyph/CrossMIcon');
11
11
  require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
12
12
  require('@alfalab/icons-glyph/AlertCircleMIcon');
13
+ require('@alfalab/icons-glyph/PointerDownMIcon');
13
14
  require('@alfalab/icons-glyph');
14
15
  require('./utils.js');
15
16
  require('./index.module.css');
package/dist/cssm/index.module.css CHANGED
@@ -16,8 +16,10 @@
16
16
  }
17
17
  :root {
18
18
  --gap-3xs: 2px;
19
+ --gap-2xs: 4px;
19
20
  --gap-xs: 8px;
20
21
  --gap-s: 12px;
22
+ --gap-xl: 24px;
21
23
  }
22
24
  .component {
23
25
  font-size: 13px;
@@ -26,18 +28,24 @@
26
28
 
27
29
  display: flex;
28
30
  width: 100%;
29
- align-items: center;
30
- border-bottom: 1px solid var(--color-light-border-primary);
31
+ padding: var(--gap-xs);
31
32
  color: var(--color-light-text-secondary);
32
- padding: 0 0 var(--gap-xs) 0;
33
- margin-bottom: var(--gap-xs)
33
+ box-shadow: 0 -1px 0 0 var(--color-light-border-primary) inset;
34
+ box-sizing: border-box
34
35
  }
35
36
  .component svg {
36
37
  display: block;
37
38
  }
39
+ .infoSection {
40
+ display: flex;
41
+ flex-direction: column;
42
+ flex: 1;
43
+ margin-top: var(--gap-2xs);
44
+ margin-left: var(--gap-s);
45
+ min-width: 40%;
46
+ }
38
47
  .info {
39
48
  display: flex;
40
- align-items: center;
41
49
  flex-wrap: wrap;
42
50
  flex: 1;
43
51
  }
@@ -55,19 +63,17 @@
55
63
  color: var(--color-light-graphic-positive);
56
64
  }
57
65
  .name {
58
- flex: 1;
59
- margin-left: var(--gap-xs);
60
66
  white-space: nowrap;
61
67
  overflow: hidden;
62
68
  text-overflow: ellipsis;
63
- color: var(--color-light-text-primary);
64
- min-width: 40%
69
+ color: var(--color-light-text-primary)
65
70
  }
66
71
  .meta {
67
72
  display: flex;
68
73
  align-items: center;
69
-
70
- white-space: nowrap
74
+ white-space: nowrap;
75
+ margin-right: var(--gap-2xs);
76
+ margin-left: var(--gap-xl)
71
77
  }
72
78
  .meta > * {
73
79
  margin-right: var(--gap-s)
@@ -76,20 +82,47 @@
76
82
  margin-right: 0;
77
83
  }
78
84
  .size {
79
- width: 65px;
80
85
  text-align: right;
81
86
  }
82
- .delete {
87
+ .delete,
88
+ .download {
83
89
  height: 24px;
84
90
  width: 24px;
85
- margin-left: var(--gap-s);
91
+ margin-left: var(--gap-xs)
86
92
  }
87
- .error {
93
+ .delete svg, .download svg {
94
+ width: 18px;
95
+ height: 18px;
96
+ }
97
+ .errorWrapper {
98
+ margin-top: var(--gap-s);
88
99
  color: var(--color-light-text-accent)
89
100
  }
90
101
  @media (--small-only) {
91
- .error {
102
+ .errorWrapper {
92
103
  flex: 1 0 100%;
93
104
  margin-top: var(--gap-3xs)
94
105
  }
95
106
  }
107
+ .restore {
108
+ font-size: 14px;
109
+ line-height: 20px;
110
+ font-weight: 400;
111
+
112
+ margin-left: var(--gap-s);
113
+ }
114
+ .spinnerWrapper {
115
+ display: flex;
116
+ justify-content: center;
117
+ align-items: center;
118
+ width: 24px;
119
+ height: 24px;
120
+ }
121
+ .spinner {
122
+ width: 20px;
123
+ height: 20px;
124
+ }
125
+ .uploadPercent {
126
+ margin-top: var(--gap-2xs);
127
+ margin-left: var(--gap-xl);
128
+ }
package/dist/esm/Component.d.ts CHANGED
@@ -24,7 +24,7 @@ type FileUploadItemProps = {
24
24
  */
25
25
  uploadDate?: string;
26
26
  /**
27
- * Ссылка на файл. Если прокидывается этот параметр, то заголовок становится ссылкой
27
+ * Ссылка на файл. Если прокидывается этот параметр, то появляется кнопка скачивания
28
28
  */
29
29
  downloadLink?: string;
30
30
  /**
package/dist/esm/Component.js CHANGED
@@ -6,10 +6,11 @@ import { Spinner } from '@alfalab/core-components-spinner/dist/esm';
6
6
  import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
7
7
  import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
8
8
  import { AlertCircleMIcon } from '@alfalab/icons-glyph/AlertCircleMIcon';
9
- import '@alfalab/icons-glyph';
9
+ import { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';
10
+ import { ClockMIcon } from '@alfalab/icons-glyph';
10
11
  import { fileIcon, humanFileSize } from './utils.js';
11
12
 
12
- var styles = {"component":"file-upload-item__component_1g56v","info":"file-upload-item__info_1g56v","icon":"file-upload-item__icon_1g56v","errorIcon":"file-upload-item__errorIcon_1g56v","successIcon":"file-upload-item__successIcon_1g56v","name":"file-upload-item__name_1g56v","meta":"file-upload-item__meta_1g56v","size":"file-upload-item__size_1g56v","delete":"file-upload-item__delete_1g56v","error":"file-upload-item__error_1g56v"};
13
+ var styles = {"component":"file-upload-item__component_1sqor","infoSection":"file-upload-item__infoSection_1sqor","info":"file-upload-item__info_1sqor","icon":"file-upload-item__icon_1sqor","errorIcon":"file-upload-item__errorIcon_1sqor","successIcon":"file-upload-item__successIcon_1sqor","name":"file-upload-item__name_1sqor","meta":"file-upload-item__meta_1sqor","size":"file-upload-item__size_1sqor","delete":"file-upload-item__delete_1sqor","download":"file-upload-item__download_1sqor","errorWrapper":"file-upload-item__errorWrapper_1sqor","restore":"file-upload-item__restore_1sqor","spinnerWrapper":"file-upload-item__spinnerWrapper_1sqor","spinner":"file-upload-item__spinner_1sqor","uploadPercent":"file-upload-item__uploadPercent_1sqor"};
13
14
  require('./index.css')
14
15
 
15
16
  var FileUploadItem = function (_a) {
@@ -29,6 +30,9 @@ var FileUploadItem = function (_a) {
29
30
  onRestore(id);
30
31
  }, [id, onRestore]);
31
32
  var renderIcon = useCallback(function () {
33
+ if (showRestore) {
34
+ return React.createElement(ClockMIcon, { className: styles.restoreIcon });
35
+ }
32
36
  switch (uploadStatus) {
33
37
  case 'ERROR':
34
38
  return React.createElement(AlertCircleMIcon, { className: styles.errorIcon });
@@ -36,25 +40,29 @@ var FileUploadItem = function (_a) {
36
40
  return React.createElement(CheckmarkCircleMIcon, { className: styles.successIcon });
37
41
  case 'LOADING':
38
42
  case 'UPLOADING':
39
- return React.createElement(Spinner, { visible: true });
43
+ return (React.createElement("div", { className: styles.spinnerWrapper },
44
+ React.createElement(Spinner, { visible: true, className: styles.spinner })));
40
45
  default: {
41
46
  return React.createElement(Icon, { className: styles.icon });
42
47
  }
43
48
  }
44
- }, [uploadStatus]);
45
- var renderName = useCallback(function () { return (React.createElement("div", { className: styles.name }, downloadLink ? (React.createElement(Link, { pseudo: true, href: downloadLink, onClick: handleDownload, download: download }, name)) : (name))); }, [downloadLink, handleDownload, download, name]);
49
+ }, [showRestore, uploadStatus]);
50
+ var renderInfoSection = useCallback(function () { return (React.createElement("div", { className: styles.infoSection },
51
+ React.createElement("div", { className: styles.name }, name),
52
+ uploadStatus === 'ERROR' && error && (React.createElement("div", { className: styles.errorWrapper, role: 'alert' }, error)))); }, [name, uploadStatus, error]);
46
53
  var showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
54
+ var showDownload = Boolean(downloadLink) && !showRestore;
47
55
  return (React.createElement("div", { className: cn(className, styles.component, uploadStatus && styles[uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
48
56
  React.createElement("div", { className: styles.info },
49
57
  renderIcon(),
50
- renderName(),
58
+ renderInfoSection(),
51
59
  children,
52
- uploadStatus === 'UPLOADING' && React.createElement("span", null, Math.round(uploadPercent) + "%"),
53
- uploadStatus === 'ERROR' && (React.createElement("span", { className: styles.error, role: 'alert' }, error)),
60
+ uploadStatus === 'UPLOADING' && (React.createElement("span", { className: styles.uploadPercent }, Math.round(uploadPercent) + "%")),
54
61
  showMeta && (React.createElement("div", { className: styles.meta },
55
62
  uploadDate && React.createElement("span", { key: uploadDate }, uploadDate),
56
63
  size && (React.createElement("span", { key: size, className: styles.size }, humanFileSize(size)))))),
57
64
  showRestore && (React.createElement(Link, { pseudo: true, className: styles.restore, onClick: handleRestore }, "\u0412\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C")),
65
+ showDownload && (React.createElement(IconButton, { size: 'xxs', icon: PointerDownMIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, download: download })),
58
66
  showDelete && !showRestore && (React.createElement(IconButton, { size: 'xxs', icon: CrossMIcon, onClick: handleDelete, className: styles.delete, "aria-label": '\u0443\u0434\u0430\u043B\u0438\u0442\u044C' }))));
59
67
  };
60
68
 
package/dist/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: bky84 */
1
+ /* hash: hcy3h */
2
2
  :root {
3
3
  --color-light-border-primary: #dbdee1;
4
4
  --color-light-graphic-negative: #f15045;
@@ -17,80 +17,113 @@
17
17
  }
18
18
  :root {
19
19
  --gap-3xs: 2px;
20
+ --gap-2xs: 4px;
20
21
  --gap-xs: 8px;
21
22
  --gap-s: 12px;
23
+ --gap-xl: 24px;
22
24
  }
23
- .file-upload-item__component_1g56v {
25
+ .file-upload-item__component_1sqor {
24
26
  font-size: 13px;
25
27
  line-height: 16px;
26
28
  font-weight: 400;
27
29
 
28
30
  display: flex;
29
31
  width: 100%;
30
- align-items: center;
31
- border-bottom: 1px solid var(--color-light-border-primary);
32
+ padding: var(--gap-xs);
32
33
  color: var(--color-light-text-secondary);
33
- padding: 0 0 var(--gap-xs) 0;
34
- margin-bottom: var(--gap-xs)
34
+ box-shadow: 0 -1px 0 0 var(--color-light-border-primary) inset;
35
+ box-sizing: border-box
35
36
  }
36
- .file-upload-item__component_1g56v svg {
37
+ .file-upload-item__component_1sqor svg {
37
38
  display: block;
38
39
  }
39
- .file-upload-item__info_1g56v {
40
+ .file-upload-item__infoSection_1sqor {
41
+ display: flex;
42
+ flex-direction: column;
43
+ flex: 1;
44
+ margin-top: var(--gap-2xs);
45
+ margin-left: var(--gap-s);
46
+ min-width: 40%;
47
+ }
48
+ .file-upload-item__info_1sqor {
40
49
  display: flex;
41
- align-items: center;
42
50
  flex-wrap: wrap;
43
51
  flex: 1;
44
52
  }
45
- .file-upload-item__icon_1g56v {
53
+ .file-upload-item__icon_1sqor {
46
54
  display: block;
47
55
  flex-shrink: 0;
48
56
  color: var(--color-light-text-primary);
49
57
  }
50
- .file-upload-item__errorIcon_1g56v {
58
+ .file-upload-item__errorIcon_1sqor {
51
59
  flex-shrink: 0;
52
60
  color: var(--color-light-graphic-negative);
53
61
  }
54
- .file-upload-item__successIcon_1g56v {
62
+ .file-upload-item__successIcon_1sqor {
55
63
  flex-shrink: 0;
56
64
  color: var(--color-light-graphic-positive);
57
65
  }
58
- .file-upload-item__name_1g56v {
59
- flex: 1;
60
- margin-left: var(--gap-xs);
66
+ .file-upload-item__name_1sqor {
61
67
  white-space: nowrap;
62
68
  overflow: hidden;
63
69
  text-overflow: ellipsis;
64
- color: var(--color-light-text-primary);
65
- min-width: 40%
70
+ color: var(--color-light-text-primary)
66
71
  }
67
- .file-upload-item__meta_1g56v {
72
+ .file-upload-item__meta_1sqor {
68
73
  display: flex;
69
74
  align-items: center;
70
-
71
- white-space: nowrap
75
+ white-space: nowrap;
76
+ margin-right: var(--gap-2xs);
77
+ margin-left: var(--gap-xl)
72
78
  }
73
- .file-upload-item__meta_1g56v > * {
79
+ .file-upload-item__meta_1sqor > * {
74
80
  margin-right: var(--gap-s)
75
81
  }
76
- .file-upload-item__meta_1g56v > *:last-child {
82
+ .file-upload-item__meta_1sqor > *:last-child {
77
83
  margin-right: 0;
78
84
  }
79
- .file-upload-item__size_1g56v {
80
- width: 65px;
85
+ .file-upload-item__size_1sqor {
81
86
  text-align: right;
82
87
  }
83
- .file-upload-item__delete_1g56v {
88
+ .file-upload-item__delete_1sqor,
89
+ .file-upload-item__download_1sqor {
84
90
  height: 24px;
85
91
  width: 24px;
86
- margin-left: var(--gap-s);
92
+ margin-left: var(--gap-xs)
87
93
  }
88
- .file-upload-item__error_1g56v {
94
+ .file-upload-item__delete_1sqor svg, .file-upload-item__download_1sqor svg {
95
+ width: 18px;
96
+ height: 18px;
97
+ }
98
+ .file-upload-item__errorWrapper_1sqor {
99
+ margin-top: var(--gap-s);
89
100
  color: var(--color-light-text-accent)
90
101
  }
91
102
  @media (--small-only) {
92
- .file-upload-item__error_1g56v {
103
+ .file-upload-item__errorWrapper_1sqor {
93
104
  flex: 1 0 100%;
94
105
  margin-top: var(--gap-3xs)
95
106
  }
96
107
  }
108
+ .file-upload-item__restore_1sqor {
109
+ font-size: 14px;
110
+ line-height: 20px;
111
+ font-weight: 400;
112
+
113
+ margin-left: var(--gap-s);
114
+ }
115
+ .file-upload-item__spinnerWrapper_1sqor {
116
+ display: flex;
117
+ justify-content: center;
118
+ align-items: center;
119
+ width: 24px;
120
+ height: 24px;
121
+ }
122
+ .file-upload-item__spinner_1sqor {
123
+ width: 20px;
124
+ height: 20px;
125
+ }
126
+ .file-upload-item__uploadPercent_1sqor {
127
+ margin-top: var(--gap-2xs);
128
+ margin-left: var(--gap-xl);
129
+ }
package/dist/esm/index.js CHANGED
@@ -6,6 +6,7 @@ import '@alfalab/core-components-spinner/dist/esm';
6
6
  import '@alfalab/icons-glyph/CrossMIcon';
7
7
  import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
8
8
  import '@alfalab/icons-glyph/AlertCircleMIcon';
9
+ import '@alfalab/icons-glyph/PointerDownMIcon';
9
10
  import '@alfalab/icons-glyph';
10
11
  import './utils.js';
11
12
  export { FileUploadItem } from './Component.js';
package/dist/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: bky84 */
1
+ /* hash: hcy3h */
2
2
  :root {
3
3
  --color-light-border-primary: #dbdee1;
4
4
  --color-light-graphic-negative: #f15045;
@@ -17,80 +17,113 @@
17
17
  }
18
18
  :root {
19
19
  --gap-3xs: 2px;
20
+ --gap-2xs: 4px;
20
21
  --gap-xs: 8px;
21
22
  --gap-s: 12px;
23
+ --gap-xl: 24px;
22
24
  }
23
- .file-upload-item__component_1g56v {
25
+ .file-upload-item__component_1sqor {
24
26
  font-size: 13px;
25
27
  line-height: 16px;
26
28
  font-weight: 400;
27
29
 
28
30
  display: flex;
29
31
  width: 100%;
30
- align-items: center;
31
- border-bottom: 1px solid var(--color-light-border-primary);
32
+ padding: var(--gap-xs);
32
33
  color: var(--color-light-text-secondary);
33
- padding: 0 0 var(--gap-xs) 0;
34
- margin-bottom: var(--gap-xs)
34
+ box-shadow: 0 -1px 0 0 var(--color-light-border-primary) inset;
35
+ box-sizing: border-box
35
36
  }
36
- .file-upload-item__component_1g56v svg {
37
+ .file-upload-item__component_1sqor svg {
37
38
  display: block;
38
39
  }
39
- .file-upload-item__info_1g56v {
40
+ .file-upload-item__infoSection_1sqor {
41
+ display: flex;
42
+ flex-direction: column;
43
+ flex: 1;
44
+ margin-top: var(--gap-2xs);
45
+ margin-left: var(--gap-s);
46
+ min-width: 40%;
47
+ }
48
+ .file-upload-item__info_1sqor {
40
49
  display: flex;
41
- align-items: center;
42
50
  flex-wrap: wrap;
43
51
  flex: 1;
44
52
  }
45
- .file-upload-item__icon_1g56v {
53
+ .file-upload-item__icon_1sqor {
46
54
  display: block;
47
55
  flex-shrink: 0;
48
56
  color: var(--color-light-text-primary);
49
57
  }
50
- .file-upload-item__errorIcon_1g56v {
58
+ .file-upload-item__errorIcon_1sqor {
51
59
  flex-shrink: 0;
52
60
  color: var(--color-light-graphic-negative);
53
61
  }
54
- .file-upload-item__successIcon_1g56v {
62
+ .file-upload-item__successIcon_1sqor {
55
63
  flex-shrink: 0;
56
64
  color: var(--color-light-graphic-positive);
57
65
  }
58
- .file-upload-item__name_1g56v {
59
- flex: 1;
60
- margin-left: var(--gap-xs);
66
+ .file-upload-item__name_1sqor {
61
67
  white-space: nowrap;
62
68
  overflow: hidden;
63
69
  text-overflow: ellipsis;
64
- color: var(--color-light-text-primary);
65
- min-width: 40%
70
+ color: var(--color-light-text-primary)
66
71
  }
67
- .file-upload-item__meta_1g56v {
72
+ .file-upload-item__meta_1sqor {
68
73
  display: flex;
69
74
  align-items: center;
70
-
71
- white-space: nowrap
75
+ white-space: nowrap;
76
+ margin-right: var(--gap-2xs);
77
+ margin-left: var(--gap-xl)
72
78
  }
73
- .file-upload-item__meta_1g56v > * {
79
+ .file-upload-item__meta_1sqor > * {
74
80
  margin-right: var(--gap-s)
75
81
  }
76
- .file-upload-item__meta_1g56v > *:last-child {
82
+ .file-upload-item__meta_1sqor > *:last-child {
77
83
  margin-right: 0;
78
84
  }
79
- .file-upload-item__size_1g56v {
80
- width: 65px;
85
+ .file-upload-item__size_1sqor {
81
86
  text-align: right;
82
87
  }
83
- .file-upload-item__delete_1g56v {
88
+ .file-upload-item__delete_1sqor,
89
+ .file-upload-item__download_1sqor {
84
90
  height: 24px;
85
91
  width: 24px;
86
- margin-left: var(--gap-s);
92
+ margin-left: var(--gap-xs)
87
93
  }
88
- .file-upload-item__error_1g56v {
94
+ .file-upload-item__delete_1sqor svg, .file-upload-item__download_1sqor svg {
95
+ width: 18px;
96
+ height: 18px;
97
+ }
98
+ .file-upload-item__errorWrapper_1sqor {
99
+ margin-top: var(--gap-s);
89
100
  color: var(--color-light-text-accent)
90
101
  }
91
102
  @media (--small-only) {
92
- .file-upload-item__error_1g56v {
103
+ .file-upload-item__errorWrapper_1sqor {
93
104
  flex: 1 0 100%;
94
105
  margin-top: var(--gap-3xs)
95
106
  }
96
107
  }
108
+ .file-upload-item__restore_1sqor {
109
+ font-size: 14px;
110
+ line-height: 20px;
111
+ font-weight: 400;
112
+
113
+ margin-left: var(--gap-s);
114
+ }
115
+ .file-upload-item__spinnerWrapper_1sqor {
116
+ display: flex;
117
+ justify-content: center;
118
+ align-items: center;
119
+ width: 24px;
120
+ height: 24px;
121
+ }
122
+ .file-upload-item__spinner_1sqor {
123
+ width: 20px;
124
+ height: 20px;
125
+ }
126
+ .file-upload-item__uploadPercent_1sqor {
127
+ margin-top: var(--gap-2xs);
128
+ margin-left: var(--gap-xl);
129
+ }
package/dist/index.js CHANGED
@@ -10,6 +10,7 @@ require('@alfalab/core-components-spinner');
10
10
  require('@alfalab/icons-glyph/CrossMIcon');
11
11
  require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
12
12
  require('@alfalab/icons-glyph/AlertCircleMIcon');
13
+ require('@alfalab/icons-glyph/PointerDownMIcon');
13
14
  require('@alfalab/icons-glyph');
14
15
  require('./utils.js');
15
16
  var Component = require('./Component.js');
package/dist/modern/Component.d.ts CHANGED
@@ -24,7 +24,7 @@ type FileUploadItemProps = {
24
24
  */
25
25
  uploadDate?: string;
26
26
  /**
27
- * Ссылка на файл. Если прокидывается этот параметр, то заголовок становится ссылкой
27
+ * Ссылка на файл. Если прокидывается этот параметр, то появляется кнопка скачивания
28
28
  */
29
29
  downloadLink?: string;
30
30
  /**
package/dist/modern/Component.js CHANGED
@@ -6,10 +6,11 @@ import { Spinner } from '@alfalab/core-components-spinner/dist/modern';
6
6
  import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
7
7
  import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
8
8
  import { AlertCircleMIcon } from '@alfalab/icons-glyph/AlertCircleMIcon';
9
- import '@alfalab/icons-glyph';
9
+ import { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';
10
+ import { ClockMIcon } from '@alfalab/icons-glyph';
10
11
  import { fileIcon, humanFileSize } from './utils.js';
11
12
 
12
- var styles = {"component":"file-upload-item__component_1g56v","info":"file-upload-item__info_1g56v","icon":"file-upload-item__icon_1g56v","errorIcon":"file-upload-item__errorIcon_1g56v","successIcon":"file-upload-item__successIcon_1g56v","name":"file-upload-item__name_1g56v","meta":"file-upload-item__meta_1g56v","size":"file-upload-item__size_1g56v","delete":"file-upload-item__delete_1g56v","error":"file-upload-item__error_1g56v"};
13
+ var styles = {"component":"file-upload-item__component_1sqor","infoSection":"file-upload-item__infoSection_1sqor","info":"file-upload-item__info_1sqor","icon":"file-upload-item__icon_1sqor","errorIcon":"file-upload-item__errorIcon_1sqor","successIcon":"file-upload-item__successIcon_1sqor","name":"file-upload-item__name_1sqor","meta":"file-upload-item__meta_1sqor","size":"file-upload-item__size_1sqor","delete":"file-upload-item__delete_1sqor","download":"file-upload-item__download_1sqor","errorWrapper":"file-upload-item__errorWrapper_1sqor","restore":"file-upload-item__restore_1sqor","spinnerWrapper":"file-upload-item__spinnerWrapper_1sqor","spinner":"file-upload-item__spinner_1sqor","uploadPercent":"file-upload-item__uploadPercent_1sqor"};
13
14
  require('./index.css')
14
15
 
15
16
  const FileUploadItem = ({ className, children, id = '0', name = '', size, icon: Icon = fileIcon(name), uploadDate, downloadLink, download, uploadStatus, uploadPercent = 0, error = uploadStatus === 'ERROR' ? 'Не удалось загрузить файл' : undefined, showDelete, showRestore, onDelete, onDownload, onRestore, dataTestId, }) => {
@@ -28,6 +29,9 @@ const FileUploadItem = ({ className, children, id = '0', name = '', size, icon:
28
29
  onRestore(id);
29
30
  }, [id, onRestore]);
30
31
  const renderIcon = useCallback(() => {
32
+ if (showRestore) {
33
+ return React.createElement(ClockMIcon, { className: styles.restoreIcon });
34
+ }
31
35
  switch (uploadStatus) {
32
36
  case 'ERROR':
33
37
  return React.createElement(AlertCircleMIcon, { className: styles.errorIcon });
@@ -35,25 +39,29 @@ const FileUploadItem = ({ className, children, id = '0', name = '', size, icon:
35
39
  return React.createElement(CheckmarkCircleMIcon, { className: styles.successIcon });
36
40
  case 'LOADING':
37
41
  case 'UPLOADING':
38
- return React.createElement(Spinner, { visible: true });
42
+ return (React.createElement("div", { className: styles.spinnerWrapper },
43
+ React.createElement(Spinner, { visible: true, className: styles.spinner })));
39
44
  default: {
40
45
  return React.createElement(Icon, { className: styles.icon });
41
46
  }
42
47
  }
43
- }, [uploadStatus]);
44
- const renderName = useCallback(() => (React.createElement("div", { className: styles.name }, downloadLink ? (React.createElement(Link, { pseudo: true, href: downloadLink, onClick: handleDownload, download: download }, name)) : (name))), [downloadLink, handleDownload, download, name]);
48
+ }, [showRestore, uploadStatus]);
49
+ const renderInfoSection = useCallback(() => (React.createElement("div", { className: styles.infoSection },
50
+ React.createElement("div", { className: styles.name }, name),
51
+ uploadStatus === 'ERROR' && error && (React.createElement("div", { className: styles.errorWrapper, role: 'alert' }, error)))), [name, uploadStatus, error]);
45
52
  const showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
53
+ const showDownload = Boolean(downloadLink) && !showRestore;
46
54
  return (React.createElement("div", { className: cn(className, styles.component, uploadStatus && styles[uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
47
55
  React.createElement("div", { className: styles.info },
48
56
  renderIcon(),
49
- renderName(),
57
+ renderInfoSection(),
50
58
  children,
51
- uploadStatus === 'UPLOADING' && React.createElement("span", null, `${Math.round(uploadPercent)}%`),
52
- uploadStatus === 'ERROR' && (React.createElement("span", { className: styles.error, role: 'alert' }, error)),
59
+ uploadStatus === 'UPLOADING' && (React.createElement("span", { className: styles.uploadPercent }, `${Math.round(uploadPercent)}%`)),
53
60
  showMeta && (React.createElement("div", { className: styles.meta },
54
61
  uploadDate && React.createElement("span", { key: uploadDate }, uploadDate),
55
62
  size && (React.createElement("span", { key: size, className: styles.size }, humanFileSize(size)))))),
56
63
  showRestore && (React.createElement(Link, { pseudo: true, className: styles.restore, onClick: handleRestore }, "\u0412\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C")),
64
+ showDownload && (React.createElement(IconButton, { size: 'xxs', icon: PointerDownMIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, download: download })),
57
65
  showDelete && !showRestore && (React.createElement(IconButton, { size: 'xxs', icon: CrossMIcon, onClick: handleDelete, className: styles.delete, "aria-label": '\u0443\u0434\u0430\u043B\u0438\u0442\u044C' }))));
58
66
  };
59
67
 
package/dist/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: bky84 */
1
+ /* hash: hcy3h */
2
2
  :root {
3
3
  --color-light-border-primary: #dbdee1;
4
4
  --color-light-graphic-negative: #f15045;
@@ -17,80 +17,113 @@
17
17
  }
18
18
  :root {
19
19
  --gap-3xs: 2px;
20
+ --gap-2xs: 4px;
20
21
  --gap-xs: 8px;
21
22
  --gap-s: 12px;
23
+ --gap-xl: 24px;
22
24
  }
23
- .file-upload-item__component_1g56v {
25
+ .file-upload-item__component_1sqor {
24
26
  font-size: 13px;
25
27
  line-height: 16px;
26
28
  font-weight: 400;
27
29
 
28
30
  display: flex;
29
31
  width: 100%;
30
- align-items: center;
31
- border-bottom: 1px solid var(--color-light-border-primary);
32
+ padding: var(--gap-xs);
32
33
  color: var(--color-light-text-secondary);
33
- padding: 0 0 var(--gap-xs) 0;
34
- margin-bottom: var(--gap-xs)
34
+ box-shadow: 0 -1px 0 0 var(--color-light-border-primary) inset;
35
+ box-sizing: border-box
35
36
  }
36
- .file-upload-item__component_1g56v svg {
37
+ .file-upload-item__component_1sqor svg {
37
38
  display: block;
38
39
  }
39
- .file-upload-item__info_1g56v {
40
+ .file-upload-item__infoSection_1sqor {
41
+ display: flex;
42
+ flex-direction: column;
43
+ flex: 1;
44
+ margin-top: var(--gap-2xs);
45
+ margin-left: var(--gap-s);
46
+ min-width: 40%;
47
+ }
48
+ .file-upload-item__info_1sqor {
40
49
  display: flex;
41
- align-items: center;
42
50
  flex-wrap: wrap;
43
51
  flex: 1;
44
52
  }
45
- .file-upload-item__icon_1g56v {
53
+ .file-upload-item__icon_1sqor {
46
54
  display: block;
47
55
  flex-shrink: 0;
48
56
  color: var(--color-light-text-primary);
49
57
  }
50
- .file-upload-item__errorIcon_1g56v {
58
+ .file-upload-item__errorIcon_1sqor {
51
59
  flex-shrink: 0;
52
60
  color: var(--color-light-graphic-negative);
53
61
  }
54
- .file-upload-item__successIcon_1g56v {
62
+ .file-upload-item__successIcon_1sqor {
55
63
  flex-shrink: 0;
56
64
  color: var(--color-light-graphic-positive);
57
65
  }
58
- .file-upload-item__name_1g56v {
59
- flex: 1;
60
- margin-left: var(--gap-xs);
66
+ .file-upload-item__name_1sqor {
61
67
  white-space: nowrap;
62
68
  overflow: hidden;
63
69
  text-overflow: ellipsis;
64
- color: var(--color-light-text-primary);
65
- min-width: 40%
70
+ color: var(--color-light-text-primary)
66
71
  }
67
- .file-upload-item__meta_1g56v {
72
+ .file-upload-item__meta_1sqor {
68
73
  display: flex;
69
74
  align-items: center;
70
-
71
- white-space: nowrap
75
+ white-space: nowrap;
76
+ margin-right: var(--gap-2xs);
77
+ margin-left: var(--gap-xl)
72
78
  }
73
- .file-upload-item__meta_1g56v > * {
79
+ .file-upload-item__meta_1sqor > * {
74
80
  margin-right: var(--gap-s)
75
81
  }
76
- .file-upload-item__meta_1g56v > *:last-child {
82
+ .file-upload-item__meta_1sqor > *:last-child {
77
83
  margin-right: 0;
78
84
  }
79
- .file-upload-item__size_1g56v {
80
- width: 65px;
85
+ .file-upload-item__size_1sqor {
81
86
  text-align: right;
82
87
  }
83
- .file-upload-item__delete_1g56v {
88
+ .file-upload-item__delete_1sqor,
89
+ .file-upload-item__download_1sqor {
84
90
  height: 24px;
85
91
  width: 24px;
86
- margin-left: var(--gap-s);
92
+ margin-left: var(--gap-xs)
87
93
  }
88
- .file-upload-item__error_1g56v {
94
+ .file-upload-item__delete_1sqor svg, .file-upload-item__download_1sqor svg {
95
+ width: 18px;
96
+ height: 18px;
97
+ }
98
+ .file-upload-item__errorWrapper_1sqor {
99
+ margin-top: var(--gap-s);
89
100
  color: var(--color-light-text-accent)
90
101
  }
91
102
  @media (--small-only) {
92
- .file-upload-item__error_1g56v {
103
+ .file-upload-item__errorWrapper_1sqor {
93
104
  flex: 1 0 100%;
94
105
  margin-top: var(--gap-3xs)
95
106
  }
96
107
  }
108
+ .file-upload-item__restore_1sqor {
109
+ font-size: 14px;
110
+ line-height: 20px;
111
+ font-weight: 400;
112
+
113
+ margin-left: var(--gap-s);
114
+ }
115
+ .file-upload-item__spinnerWrapper_1sqor {
116
+ display: flex;
117
+ justify-content: center;
118
+ align-items: center;
119
+ width: 24px;
120
+ height: 24px;
121
+ }
122
+ .file-upload-item__spinner_1sqor {
123
+ width: 20px;
124
+ height: 20px;
125
+ }
126
+ .file-upload-item__uploadPercent_1sqor {
127
+ margin-top: var(--gap-2xs);
128
+ margin-left: var(--gap-xl);
129
+ }
package/dist/modern/index.js CHANGED
@@ -6,6 +6,7 @@ import '@alfalab/core-components-spinner/dist/modern';
6
6
  import '@alfalab/icons-glyph/CrossMIcon';
7
7
  import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
8
8
  import '@alfalab/icons-glyph/AlertCircleMIcon';
9
+ import '@alfalab/icons-glyph/PointerDownMIcon';
9
10
  import '@alfalab/icons-glyph';
10
11
  import './utils.js';
11
12
  export { FileUploadItem } from './Component.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-file-upload-item",
3
- "version": "3.3.2",
3
+ "version": "3.4.2",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -16,10 +16,10 @@
16
16
  "react": "^16.9.0 || ^17.0.1"
17
17
  },
18
18
  "dependencies": {
19
- "@alfalab/core-components-icon-button": "^4.0.0",
20
- "@alfalab/core-components-link": "^3.2.0",
19
+ "@alfalab/core-components-icon-button": "^4.1.2",
20
+ "@alfalab/core-components-link": "^3.2.1",
21
21
  "@alfalab/core-components-spinner": "^2.0.1",
22
22
  "@alfalab/icons-glyph": "^1.190.0"
23
23
  },
24
- "gitHead": "10c9fd1caacf98a5c15f84529889ddf41e9e1b54"
24
+ "gitHead": "94999e533968aa575e92106dffa8bbbb8e7ac71d"
25
25
  }