@alfalab/core-components-file-upload-item 3.3.3 → 3.4.3

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 +38 -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 +50 -16
  8. package/dist/esm/Component.d.ts +1 -1
  9. package/dist/esm/Component.js +16 -8
  10. package/dist/esm/index.css +62 -28
  11. package/dist/esm/index.js +1 -0
  12. package/dist/index.css +62 -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 +62 -28
  17. package/dist/modern/index.js +1 -0
  18. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,44 @@
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.3](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-file-upload-item@3.4.2...@alfalab/core-components-file-upload-item@3.4.3) (2022-01-17)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **file-upload-item:** корректная обрезка контента ([#942](https://github.com/alfa-laboratory/core-components/issues/942)) ([5a285f2](https://github.com/alfa-laboratory/core-components/commit/5a285f2c1259dab270f52b438203fe7d40c07b29))
12
+
13
+
14
+
15
+
16
+
17
+ ## [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)
18
+
19
+ **Note:** Version bump only for package @alfalab/core-components-file-upload-item
20
+
21
+
22
+
23
+
24
+
25
+ ## [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)
26
+
27
+ **Note:** Version bump only for package @alfalab/core-components-file-upload-item
28
+
29
+
30
+
31
+
32
+
33
+ # [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)
34
+
35
+
36
+ ### Features
37
+
38
+ * **file-upload-item:** обновлен внешний вид ([#902](https://github.com/alfa-laboratory/core-components/issues/902)) ([d0f7d1e](https://github.com/alfa-laboratory/core-components/commit/d0f7d1ebdf302711a01549e86d0d8a5129b66d82))
39
+
40
+
41
+
42
+
43
+
6
44
  ## [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)
7
45
 
8
46
  **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_76rbl","info":"file-upload-item__info_76rbl","icon":"file-upload-item__icon_76rbl","errorIcon":"file-upload-item__errorIcon_76rbl","successIcon":"file-upload-item__successIcon_76rbl","name":"file-upload-item__name_76rbl","meta":"file-upload-item__meta_76rbl","size":"file-upload-item__size_76rbl","delete":"file-upload-item__delete_76rbl","error":"file-upload-item__error_76rbl"};
22
+ var styles = {"component":"file-upload-item__component_cb959","infoSection":"file-upload-item__infoSection_cb959","info":"file-upload-item__info_cb959","icon":"file-upload-item__icon_cb959","errorIcon":"file-upload-item__errorIcon_cb959","successIcon":"file-upload-item__successIcon_cb959","name":"file-upload-item__name_cb959","meta":"file-upload-item__meta_cb959","size":"file-upload-item__size_cb959","delete":"file-upload-item__delete_cb959","download":"file-upload-item__download_cb959","errorWrapper":"file-upload-item__errorWrapper_cb959","restore":"file-upload-item__restore_cb959","spinnerWrapper":"file-upload-item__spinnerWrapper_cb959","spinner":"file-upload-item__spinner_cb959","uploadPercent":"file-upload-item__uploadPercent_cb959"};
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,20 +28,27 @@
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;
51
+ overflow: hidden;
43
52
  }
44
53
  .icon {
45
54
  display: block;
@@ -55,19 +64,17 @@
55
64
  color: var(--color-light-graphic-positive);
56
65
  }
57
66
  .name {
58
- flex: 1;
59
- margin-left: var(--gap-xs);
60
67
  white-space: nowrap;
61
68
  overflow: hidden;
62
69
  text-overflow: ellipsis;
63
- color: var(--color-light-text-primary);
64
- min-width: 40%
70
+ color: var(--color-light-text-primary)
65
71
  }
66
72
  .meta {
67
73
  display: flex;
68
74
  align-items: center;
69
-
70
- white-space: nowrap
75
+ white-space: nowrap;
76
+ margin-right: var(--gap-2xs);
77
+ margin-left: var(--gap-xl)
71
78
  }
72
79
  .meta > * {
73
80
  margin-right: var(--gap-s)
@@ -76,20 +83,47 @@
76
83
  margin-right: 0;
77
84
  }
78
85
  .size {
79
- width: 65px;
80
86
  text-align: right;
81
87
  }
82
- .delete {
88
+ .delete,
89
+ .download {
83
90
  height: 24px;
84
91
  width: 24px;
85
- margin-left: var(--gap-s);
92
+ margin-left: var(--gap-xs)
86
93
  }
87
- .error {
94
+ .delete svg, .download svg {
95
+ width: 18px;
96
+ height: 18px;
97
+ }
98
+ .errorWrapper {
99
+ margin-top: var(--gap-s);
88
100
  color: var(--color-light-text-accent)
89
101
  }
90
102
  @media (--small-only) {
91
- .error {
103
+ .errorWrapper {
92
104
  flex: 1 0 100%;
93
105
  margin-top: var(--gap-3xs)
94
106
  }
95
107
  }
108
+ .restore {
109
+ font-size: 14px;
110
+ line-height: 20px;
111
+ font-weight: 400;
112
+
113
+ margin-left: var(--gap-s);
114
+ }
115
+ .spinnerWrapper {
116
+ display: flex;
117
+ justify-content: center;
118
+ align-items: center;
119
+ width: 24px;
120
+ height: 24px;
121
+ }
122
+ .spinner {
123
+ width: 20px;
124
+ height: 20px;
125
+ }
126
+ .uploadPercent {
127
+ margin-top: var(--gap-2xs);
128
+ margin-left: var(--gap-xl);
129
+ }
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_76rbl","info":"file-upload-item__info_76rbl","icon":"file-upload-item__icon_76rbl","errorIcon":"file-upload-item__errorIcon_76rbl","successIcon":"file-upload-item__successIcon_76rbl","name":"file-upload-item__name_76rbl","meta":"file-upload-item__meta_76rbl","size":"file-upload-item__size_76rbl","delete":"file-upload-item__delete_76rbl","error":"file-upload-item__error_76rbl"};
13
+ var styles = {"component":"file-upload-item__component_cb959","infoSection":"file-upload-item__infoSection_cb959","info":"file-upload-item__info_cb959","icon":"file-upload-item__icon_cb959","errorIcon":"file-upload-item__errorIcon_cb959","successIcon":"file-upload-item__successIcon_cb959","name":"file-upload-item__name_cb959","meta":"file-upload-item__meta_cb959","size":"file-upload-item__size_cb959","delete":"file-upload-item__delete_cb959","download":"file-upload-item__download_cb959","errorWrapper":"file-upload-item__errorWrapper_cb959","restore":"file-upload-item__restore_cb959","spinnerWrapper":"file-upload-item__spinnerWrapper_cb959","spinner":"file-upload-item__spinner_cb959","uploadPercent":"file-upload-item__uploadPercent_cb959"};
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: 1e54w */
1
+ /* hash: 38ihz */
2
2
  :root {
3
3
  --color-light-border-primary: #dbdee1;
4
4
  --color-light-graphic-negative: #f15045;
@@ -17,80 +17,114 @@
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_76rbl {
25
+ .file-upload-item__component_cb959 {
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_76rbl svg {
37
+ .file-upload-item__component_cb959 svg {
37
38
  display: block;
38
39
  }
39
- .file-upload-item__info_76rbl {
40
+ .file-upload-item__infoSection_cb959 {
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_cb959 {
40
49
  display: flex;
41
- align-items: center;
42
50
  flex-wrap: wrap;
43
51
  flex: 1;
52
+ overflow: hidden;
44
53
  }
45
- .file-upload-item__icon_76rbl {
54
+ .file-upload-item__icon_cb959 {
46
55
  display: block;
47
56
  flex-shrink: 0;
48
57
  color: var(--color-light-text-primary);
49
58
  }
50
- .file-upload-item__errorIcon_76rbl {
59
+ .file-upload-item__errorIcon_cb959 {
51
60
  flex-shrink: 0;
52
61
  color: var(--color-light-graphic-negative);
53
62
  }
54
- .file-upload-item__successIcon_76rbl {
63
+ .file-upload-item__successIcon_cb959 {
55
64
  flex-shrink: 0;
56
65
  color: var(--color-light-graphic-positive);
57
66
  }
58
- .file-upload-item__name_76rbl {
59
- flex: 1;
60
- margin-left: var(--gap-xs);
67
+ .file-upload-item__name_cb959 {
61
68
  white-space: nowrap;
62
69
  overflow: hidden;
63
70
  text-overflow: ellipsis;
64
- color: var(--color-light-text-primary);
65
- min-width: 40%
71
+ color: var(--color-light-text-primary)
66
72
  }
67
- .file-upload-item__meta_76rbl {
73
+ .file-upload-item__meta_cb959 {
68
74
  display: flex;
69
75
  align-items: center;
70
-
71
- white-space: nowrap
76
+ white-space: nowrap;
77
+ margin-right: var(--gap-2xs);
78
+ margin-left: var(--gap-xl)
72
79
  }
73
- .file-upload-item__meta_76rbl > * {
80
+ .file-upload-item__meta_cb959 > * {
74
81
  margin-right: var(--gap-s)
75
82
  }
76
- .file-upload-item__meta_76rbl > *:last-child {
83
+ .file-upload-item__meta_cb959 > *:last-child {
77
84
  margin-right: 0;
78
85
  }
79
- .file-upload-item__size_76rbl {
80
- width: 65px;
86
+ .file-upload-item__size_cb959 {
81
87
  text-align: right;
82
88
  }
83
- .file-upload-item__delete_76rbl {
89
+ .file-upload-item__delete_cb959,
90
+ .file-upload-item__download_cb959 {
84
91
  height: 24px;
85
92
  width: 24px;
86
- margin-left: var(--gap-s);
93
+ margin-left: var(--gap-xs)
87
94
  }
88
- .file-upload-item__error_76rbl {
95
+ .file-upload-item__delete_cb959 svg, .file-upload-item__download_cb959 svg {
96
+ width: 18px;
97
+ height: 18px;
98
+ }
99
+ .file-upload-item__errorWrapper_cb959 {
100
+ margin-top: var(--gap-s);
89
101
  color: var(--color-light-text-accent)
90
102
  }
91
103
  @media (--small-only) {
92
- .file-upload-item__error_76rbl {
104
+ .file-upload-item__errorWrapper_cb959 {
93
105
  flex: 1 0 100%;
94
106
  margin-top: var(--gap-3xs)
95
107
  }
96
108
  }
109
+ .file-upload-item__restore_cb959 {
110
+ font-size: 14px;
111
+ line-height: 20px;
112
+ font-weight: 400;
113
+
114
+ margin-left: var(--gap-s);
115
+ }
116
+ .file-upload-item__spinnerWrapper_cb959 {
117
+ display: flex;
118
+ justify-content: center;
119
+ align-items: center;
120
+ width: 24px;
121
+ height: 24px;
122
+ }
123
+ .file-upload-item__spinner_cb959 {
124
+ width: 20px;
125
+ height: 20px;
126
+ }
127
+ .file-upload-item__uploadPercent_cb959 {
128
+ margin-top: var(--gap-2xs);
129
+ margin-left: var(--gap-xl);
130
+ }
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: 1e54w */
1
+ /* hash: 38ihz */
2
2
  :root {
3
3
  --color-light-border-primary: #dbdee1;
4
4
  --color-light-graphic-negative: #f15045;
@@ -17,80 +17,114 @@
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_76rbl {
25
+ .file-upload-item__component_cb959 {
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_76rbl svg {
37
+ .file-upload-item__component_cb959 svg {
37
38
  display: block;
38
39
  }
39
- .file-upload-item__info_76rbl {
40
+ .file-upload-item__infoSection_cb959 {
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_cb959 {
40
49
  display: flex;
41
- align-items: center;
42
50
  flex-wrap: wrap;
43
51
  flex: 1;
52
+ overflow: hidden;
44
53
  }
45
- .file-upload-item__icon_76rbl {
54
+ .file-upload-item__icon_cb959 {
46
55
  display: block;
47
56
  flex-shrink: 0;
48
57
  color: var(--color-light-text-primary);
49
58
  }
50
- .file-upload-item__errorIcon_76rbl {
59
+ .file-upload-item__errorIcon_cb959 {
51
60
  flex-shrink: 0;
52
61
  color: var(--color-light-graphic-negative);
53
62
  }
54
- .file-upload-item__successIcon_76rbl {
63
+ .file-upload-item__successIcon_cb959 {
55
64
  flex-shrink: 0;
56
65
  color: var(--color-light-graphic-positive);
57
66
  }
58
- .file-upload-item__name_76rbl {
59
- flex: 1;
60
- margin-left: var(--gap-xs);
67
+ .file-upload-item__name_cb959 {
61
68
  white-space: nowrap;
62
69
  overflow: hidden;
63
70
  text-overflow: ellipsis;
64
- color: var(--color-light-text-primary);
65
- min-width: 40%
71
+ color: var(--color-light-text-primary)
66
72
  }
67
- .file-upload-item__meta_76rbl {
73
+ .file-upload-item__meta_cb959 {
68
74
  display: flex;
69
75
  align-items: center;
70
-
71
- white-space: nowrap
76
+ white-space: nowrap;
77
+ margin-right: var(--gap-2xs);
78
+ margin-left: var(--gap-xl)
72
79
  }
73
- .file-upload-item__meta_76rbl > * {
80
+ .file-upload-item__meta_cb959 > * {
74
81
  margin-right: var(--gap-s)
75
82
  }
76
- .file-upload-item__meta_76rbl > *:last-child {
83
+ .file-upload-item__meta_cb959 > *:last-child {
77
84
  margin-right: 0;
78
85
  }
79
- .file-upload-item__size_76rbl {
80
- width: 65px;
86
+ .file-upload-item__size_cb959 {
81
87
  text-align: right;
82
88
  }
83
- .file-upload-item__delete_76rbl {
89
+ .file-upload-item__delete_cb959,
90
+ .file-upload-item__download_cb959 {
84
91
  height: 24px;
85
92
  width: 24px;
86
- margin-left: var(--gap-s);
93
+ margin-left: var(--gap-xs)
87
94
  }
88
- .file-upload-item__error_76rbl {
95
+ .file-upload-item__delete_cb959 svg, .file-upload-item__download_cb959 svg {
96
+ width: 18px;
97
+ height: 18px;
98
+ }
99
+ .file-upload-item__errorWrapper_cb959 {
100
+ margin-top: var(--gap-s);
89
101
  color: var(--color-light-text-accent)
90
102
  }
91
103
  @media (--small-only) {
92
- .file-upload-item__error_76rbl {
104
+ .file-upload-item__errorWrapper_cb959 {
93
105
  flex: 1 0 100%;
94
106
  margin-top: var(--gap-3xs)
95
107
  }
96
108
  }
109
+ .file-upload-item__restore_cb959 {
110
+ font-size: 14px;
111
+ line-height: 20px;
112
+ font-weight: 400;
113
+
114
+ margin-left: var(--gap-s);
115
+ }
116
+ .file-upload-item__spinnerWrapper_cb959 {
117
+ display: flex;
118
+ justify-content: center;
119
+ align-items: center;
120
+ width: 24px;
121
+ height: 24px;
122
+ }
123
+ .file-upload-item__spinner_cb959 {
124
+ width: 20px;
125
+ height: 20px;
126
+ }
127
+ .file-upload-item__uploadPercent_cb959 {
128
+ margin-top: var(--gap-2xs);
129
+ margin-left: var(--gap-xl);
130
+ }
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_76rbl","info":"file-upload-item__info_76rbl","icon":"file-upload-item__icon_76rbl","errorIcon":"file-upload-item__errorIcon_76rbl","successIcon":"file-upload-item__successIcon_76rbl","name":"file-upload-item__name_76rbl","meta":"file-upload-item__meta_76rbl","size":"file-upload-item__size_76rbl","delete":"file-upload-item__delete_76rbl","error":"file-upload-item__error_76rbl"};
13
+ var styles = {"component":"file-upload-item__component_cb959","infoSection":"file-upload-item__infoSection_cb959","info":"file-upload-item__info_cb959","icon":"file-upload-item__icon_cb959","errorIcon":"file-upload-item__errorIcon_cb959","successIcon":"file-upload-item__successIcon_cb959","name":"file-upload-item__name_cb959","meta":"file-upload-item__meta_cb959","size":"file-upload-item__size_cb959","delete":"file-upload-item__delete_cb959","download":"file-upload-item__download_cb959","errorWrapper":"file-upload-item__errorWrapper_cb959","restore":"file-upload-item__restore_cb959","spinnerWrapper":"file-upload-item__spinnerWrapper_cb959","spinner":"file-upload-item__spinner_cb959","uploadPercent":"file-upload-item__uploadPercent_cb959"};
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: 1e54w */
1
+ /* hash: 38ihz */
2
2
  :root {
3
3
  --color-light-border-primary: #dbdee1;
4
4
  --color-light-graphic-negative: #f15045;
@@ -17,80 +17,114 @@
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_76rbl {
25
+ .file-upload-item__component_cb959 {
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_76rbl svg {
37
+ .file-upload-item__component_cb959 svg {
37
38
  display: block;
38
39
  }
39
- .file-upload-item__info_76rbl {
40
+ .file-upload-item__infoSection_cb959 {
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_cb959 {
40
49
  display: flex;
41
- align-items: center;
42
50
  flex-wrap: wrap;
43
51
  flex: 1;
52
+ overflow: hidden;
44
53
  }
45
- .file-upload-item__icon_76rbl {
54
+ .file-upload-item__icon_cb959 {
46
55
  display: block;
47
56
  flex-shrink: 0;
48
57
  color: var(--color-light-text-primary);
49
58
  }
50
- .file-upload-item__errorIcon_76rbl {
59
+ .file-upload-item__errorIcon_cb959 {
51
60
  flex-shrink: 0;
52
61
  color: var(--color-light-graphic-negative);
53
62
  }
54
- .file-upload-item__successIcon_76rbl {
63
+ .file-upload-item__successIcon_cb959 {
55
64
  flex-shrink: 0;
56
65
  color: var(--color-light-graphic-positive);
57
66
  }
58
- .file-upload-item__name_76rbl {
59
- flex: 1;
60
- margin-left: var(--gap-xs);
67
+ .file-upload-item__name_cb959 {
61
68
  white-space: nowrap;
62
69
  overflow: hidden;
63
70
  text-overflow: ellipsis;
64
- color: var(--color-light-text-primary);
65
- min-width: 40%
71
+ color: var(--color-light-text-primary)
66
72
  }
67
- .file-upload-item__meta_76rbl {
73
+ .file-upload-item__meta_cb959 {
68
74
  display: flex;
69
75
  align-items: center;
70
-
71
- white-space: nowrap
76
+ white-space: nowrap;
77
+ margin-right: var(--gap-2xs);
78
+ margin-left: var(--gap-xl)
72
79
  }
73
- .file-upload-item__meta_76rbl > * {
80
+ .file-upload-item__meta_cb959 > * {
74
81
  margin-right: var(--gap-s)
75
82
  }
76
- .file-upload-item__meta_76rbl > *:last-child {
83
+ .file-upload-item__meta_cb959 > *:last-child {
77
84
  margin-right: 0;
78
85
  }
79
- .file-upload-item__size_76rbl {
80
- width: 65px;
86
+ .file-upload-item__size_cb959 {
81
87
  text-align: right;
82
88
  }
83
- .file-upload-item__delete_76rbl {
89
+ .file-upload-item__delete_cb959,
90
+ .file-upload-item__download_cb959 {
84
91
  height: 24px;
85
92
  width: 24px;
86
- margin-left: var(--gap-s);
93
+ margin-left: var(--gap-xs)
87
94
  }
88
- .file-upload-item__error_76rbl {
95
+ .file-upload-item__delete_cb959 svg, .file-upload-item__download_cb959 svg {
96
+ width: 18px;
97
+ height: 18px;
98
+ }
99
+ .file-upload-item__errorWrapper_cb959 {
100
+ margin-top: var(--gap-s);
89
101
  color: var(--color-light-text-accent)
90
102
  }
91
103
  @media (--small-only) {
92
- .file-upload-item__error_76rbl {
104
+ .file-upload-item__errorWrapper_cb959 {
93
105
  flex: 1 0 100%;
94
106
  margin-top: var(--gap-3xs)
95
107
  }
96
108
  }
109
+ .file-upload-item__restore_cb959 {
110
+ font-size: 14px;
111
+ line-height: 20px;
112
+ font-weight: 400;
113
+
114
+ margin-left: var(--gap-s);
115
+ }
116
+ .file-upload-item__spinnerWrapper_cb959 {
117
+ display: flex;
118
+ justify-content: center;
119
+ align-items: center;
120
+ width: 24px;
121
+ height: 24px;
122
+ }
123
+ .file-upload-item__spinner_cb959 {
124
+ width: 20px;
125
+ height: 20px;
126
+ }
127
+ .file-upload-item__uploadPercent_cb959 {
128
+ margin-top: var(--gap-2xs);
129
+ margin-left: var(--gap-xl);
130
+ }
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.3",
3
+ "version": "3.4.3",
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.1",
19
+ "@alfalab/core-components-icon-button": "^4.1.2",
20
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": "19a2d088b6c18a127940199cfd6e6fc4e8639ec5"
24
+ "gitHead": "d35b2d43cbc90ecb7665c682a2de13733bc03eb0"
25
25
  }