@alfalab/core-components-file-upload-item 5.6.10 → 5.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Component.d.ts +5 -1
- package/Component.js +3 -3
- package/cssm/Component.d.ts +5 -1
- package/cssm/Component.js +2 -2
- package/esm/Component.d.ts +5 -1
- package/esm/Component.js +3 -3
- package/esm/index.css +23 -23
- package/index.css +23 -23
- package/modern/Component.d.ts +5 -1
- package/modern/Component.js +3 -3
- package/modern/index.css +23 -23
- package/package.json +1 -1
- package/src/Component.tsx +8 -1
package/Component.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { ElementType, MouseEvent, ReactNode } from "react";
|
|
3
|
+
import { ElementType, HTMLAttributeAnchorTarget, MouseEvent, ReactNode } from "react";
|
|
4
4
|
type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
|
|
5
5
|
type FileUploadItemProps = {
|
|
6
6
|
/**
|
|
@@ -82,6 +82,10 @@ type FileUploadItemProps = {
|
|
|
82
82
|
* Разрешить многострочное название файла
|
|
83
83
|
*/
|
|
84
84
|
multiline?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Указывает, где открыть скачиваемый документ
|
|
87
|
+
*/
|
|
88
|
+
target?: HTMLAttributeAnchorTarget;
|
|
85
89
|
/**
|
|
86
90
|
* Идентификатор для систем автоматизированного тестирования
|
|
87
91
|
*/
|
package/Component.js
CHANGED
|
@@ -19,11 +19,11 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
19
19
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
20
20
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
21
21
|
|
|
22
|
-
var styles = {"component":"file-upload-
|
|
22
|
+
var styles = {"component":"file-upload-item__component_18dki","infoSection":"file-upload-item__infoSection_18dki","info":"file-upload-item__info_18dki","icon":"file-upload-item__icon_18dki","errorIcon":"file-upload-item__errorIcon_18dki","successIcon":"file-upload-item__successIcon_18dki","name":"file-upload-item__name_18dki","rowLimit":"file-upload-item__rowLimit_18dki","meta":"file-upload-item__meta_18dki","size":"file-upload-item__size_18dki","delete":"file-upload-item__delete_18dki","download":"file-upload-item__download_18dki","errorWrapper":"file-upload-item__errorWrapper_18dki","restore":"file-upload-item__restore_18dki","spinnerWrapper":"file-upload-item__spinnerWrapper_18dki","spinner":"file-upload-item__spinner_18dki","uploadPercent":"file-upload-item__uploadPercent_18dki"};
|
|
23
23
|
require('./index.css')
|
|
24
24
|
|
|
25
25
|
var FileUploadItem = function (_a) {
|
|
26
|
-
var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, _d = _a.icon, Icon = _d === void 0 ? utils.fileIcon(name) : _d, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, download = _a.download, uploadStatus = _a.uploadStatus, _e = _a.uploadPercent, uploadPercent = _e === void 0 ? 0 : _e, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, _f = _a.multiline, multiline = _f === void 0 ? false : _f, dataTestId = _a.dataTestId;
|
|
26
|
+
var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, _d = _a.icon, Icon = _d === void 0 ? utils.fileIcon(name) : _d, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, download = _a.download, uploadStatus = _a.uploadStatus, _e = _a.uploadPercent, uploadPercent = _e === void 0 ? 0 : _e, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, _f = _a.multiline, multiline = _f === void 0 ? false : _f, target = _a.target, dataTestId = _a.dataTestId;
|
|
27
27
|
var handleDownload = function (event) {
|
|
28
28
|
if (onDownload) {
|
|
29
29
|
event.preventDefault();
|
|
@@ -76,7 +76,7 @@ var FileUploadItem = function (_a) {
|
|
|
76
76
|
uploadDate && React__default.default.createElement("span", { key: uploadDate }, uploadDate),
|
|
77
77
|
size && (React__default.default.createElement("span", { key: size, className: styles.size }, utils.humanFileSize(size)))))),
|
|
78
78
|
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")),
|
|
79
|
-
showDownload && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: PointerDownSIcon.PointerDownSIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download })),
|
|
79
|
+
showDownload && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: PointerDownSIcon.PointerDownSIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download, target: target })),
|
|
80
80
|
showDelete && !showRestore && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: CrossSIcon.CrossSIcon, onClick: handleDelete, disabled: disableButtons, className: styles.delete, "aria-label": '\u0443\u0434\u0430\u043B\u0438\u0442\u044C' }))));
|
|
81
81
|
};
|
|
82
82
|
|
package/cssm/Component.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { ElementType, MouseEvent, ReactNode } from "react";
|
|
3
|
+
import { ElementType, HTMLAttributeAnchorTarget, MouseEvent, ReactNode } from "react";
|
|
4
4
|
type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
|
|
5
5
|
type FileUploadItemProps = {
|
|
6
6
|
/**
|
|
@@ -82,6 +82,10 @@ type FileUploadItemProps = {
|
|
|
82
82
|
* Разрешить многострочное название файла
|
|
83
83
|
*/
|
|
84
84
|
multiline?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Указывает, где открыть скачиваемый документ
|
|
87
|
+
*/
|
|
88
|
+
target?: HTMLAttributeAnchorTarget;
|
|
85
89
|
/**
|
|
86
90
|
* Идентификатор для систем автоматизированного тестирования
|
|
87
91
|
*/
|
package/cssm/Component.js
CHANGED
|
@@ -22,7 +22,7 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
|
22
22
|
var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
23
23
|
|
|
24
24
|
var FileUploadItem = function (_a) {
|
|
25
|
-
var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, _d = _a.icon, Icon = _d === void 0 ? utils.fileIcon(name) : _d, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, download = _a.download, uploadStatus = _a.uploadStatus, _e = _a.uploadPercent, uploadPercent = _e === void 0 ? 0 : _e, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, _f = _a.multiline, multiline = _f === void 0 ? false : _f, dataTestId = _a.dataTestId;
|
|
25
|
+
var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, _d = _a.icon, Icon = _d === void 0 ? utils.fileIcon(name) : _d, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, download = _a.download, uploadStatus = _a.uploadStatus, _e = _a.uploadPercent, uploadPercent = _e === void 0 ? 0 : _e, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, _f = _a.multiline, multiline = _f === void 0 ? false : _f, target = _a.target, dataTestId = _a.dataTestId;
|
|
26
26
|
var handleDownload = function (event) {
|
|
27
27
|
if (onDownload) {
|
|
28
28
|
event.preventDefault();
|
|
@@ -75,7 +75,7 @@ var FileUploadItem = function (_a) {
|
|
|
75
75
|
uploadDate && React__default.default.createElement("span", { key: uploadDate }, uploadDate),
|
|
76
76
|
size && (React__default.default.createElement("span", { key: size, className: styles__default.default.size }, utils.humanFileSize(size)))))),
|
|
77
77
|
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")),
|
|
78
|
-
showDownload && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: PointerDownSIcon.PointerDownSIcon, className: styles__default.default.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download })),
|
|
78
|
+
showDownload && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: PointerDownSIcon.PointerDownSIcon, className: styles__default.default.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download, target: target })),
|
|
79
79
|
showDelete && !showRestore && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xxs', icon: CrossSIcon.CrossSIcon, onClick: handleDelete, disabled: disableButtons, className: styles__default.default.delete, "aria-label": '\u0443\u0434\u0430\u043B\u0438\u0442\u044C' }))));
|
|
80
80
|
};
|
|
81
81
|
|
package/esm/Component.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { ElementType, MouseEvent, ReactNode } from "react";
|
|
3
|
+
import { ElementType, HTMLAttributeAnchorTarget, MouseEvent, ReactNode } from "react";
|
|
4
4
|
type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
|
|
5
5
|
type FileUploadItemProps = {
|
|
6
6
|
/**
|
|
@@ -82,6 +82,10 @@ type FileUploadItemProps = {
|
|
|
82
82
|
* Разрешить многострочное название файла
|
|
83
83
|
*/
|
|
84
84
|
multiline?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Указывает, где открыть скачиваемый документ
|
|
87
|
+
*/
|
|
88
|
+
target?: HTMLAttributeAnchorTarget;
|
|
85
89
|
/**
|
|
86
90
|
* Идентификатор для систем автоматизированного тестирования
|
|
87
91
|
*/
|
package/esm/Component.js
CHANGED
|
@@ -10,11 +10,11 @@ import { CrossSIcon } from '@alfalab/icons-glyph/CrossSIcon';
|
|
|
10
10
|
import { PointerDownSIcon } from '@alfalab/icons-glyph/PointerDownSIcon';
|
|
11
11
|
import { fileIcon, humanFileSize } from './utils.js';
|
|
12
12
|
|
|
13
|
-
var styles = {"component":"file-upload-
|
|
13
|
+
var styles = {"component":"file-upload-item__component_18dki","infoSection":"file-upload-item__infoSection_18dki","info":"file-upload-item__info_18dki","icon":"file-upload-item__icon_18dki","errorIcon":"file-upload-item__errorIcon_18dki","successIcon":"file-upload-item__successIcon_18dki","name":"file-upload-item__name_18dki","rowLimit":"file-upload-item__rowLimit_18dki","meta":"file-upload-item__meta_18dki","size":"file-upload-item__size_18dki","delete":"file-upload-item__delete_18dki","download":"file-upload-item__download_18dki","errorWrapper":"file-upload-item__errorWrapper_18dki","restore":"file-upload-item__restore_18dki","spinnerWrapper":"file-upload-item__spinnerWrapper_18dki","spinner":"file-upload-item__spinner_18dki","uploadPercent":"file-upload-item__uploadPercent_18dki"};
|
|
14
14
|
require('./index.css')
|
|
15
15
|
|
|
16
16
|
var FileUploadItem = function (_a) {
|
|
17
|
-
var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, _d = _a.icon, Icon = _d === void 0 ? fileIcon(name) : _d, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, download = _a.download, uploadStatus = _a.uploadStatus, _e = _a.uploadPercent, uploadPercent = _e === void 0 ? 0 : _e, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, _f = _a.multiline, multiline = _f === void 0 ? false : _f, dataTestId = _a.dataTestId;
|
|
17
|
+
var className = _a.className, children = _a.children, _b = _a.id, id = _b === void 0 ? '0' : _b, _c = _a.name, name = _c === void 0 ? '' : _c, size = _a.size, _d = _a.icon, Icon = _d === void 0 ? fileIcon(name) : _d, uploadDate = _a.uploadDate, downloadLink = _a.downloadLink, download = _a.download, uploadStatus = _a.uploadStatus, _e = _a.uploadPercent, uploadPercent = _e === void 0 ? 0 : _e, error = _a.error, showDelete = _a.showDelete, showRestore = _a.showRestore, onDelete = _a.onDelete, onDownload = _a.onDownload, onRestore = _a.onRestore, disableButtons = _a.disableButtons, _f = _a.multiline, multiline = _f === void 0 ? false : _f, target = _a.target, dataTestId = _a.dataTestId;
|
|
18
18
|
var handleDownload = function (event) {
|
|
19
19
|
if (onDownload) {
|
|
20
20
|
event.preventDefault();
|
|
@@ -67,7 +67,7 @@ var FileUploadItem = function (_a) {
|
|
|
67
67
|
uploadDate && React.createElement("span", { key: uploadDate }, uploadDate),
|
|
68
68
|
size && (React.createElement("span", { key: size, className: styles.size }, humanFileSize(size)))))),
|
|
69
69
|
showRestore && (React.createElement(Link, { pseudo: true, className: styles.restore, onClick: handleRestore }, "\u0412\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C")),
|
|
70
|
-
showDownload && (React.createElement(IconButton, { size: 'xxs', icon: PointerDownSIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download })),
|
|
70
|
+
showDownload && (React.createElement(IconButton, { size: 'xxs', icon: PointerDownSIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download, target: target })),
|
|
71
71
|
showDelete && !showRestore && (React.createElement(IconButton, { size: 'xxs', icon: CrossSIcon, onClick: handleDelete, disabled: disableButtons, className: styles.delete, "aria-label": '\u0443\u0434\u0430\u043B\u0438\u0442\u044C' }))));
|
|
72
72
|
};
|
|
73
73
|
|
package/esm/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1rs3w */
|
|
2
2
|
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-neutral-300: #e7e8eb;
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
/* новые значения, используйте их */
|
|
31
31
|
} :root {
|
|
32
32
|
} :root {
|
|
33
|
-
} .file-upload-
|
|
33
|
+
} .file-upload-item__component_18dki {
|
|
34
34
|
font-size: 13px;
|
|
35
35
|
line-height: 16px;
|
|
36
36
|
font-weight: 400;
|
|
@@ -42,78 +42,78 @@
|
|
|
42
42
|
color: var(--color-light-text-secondary);
|
|
43
43
|
box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
|
|
44
44
|
box-sizing: border-box
|
|
45
|
-
} .file-upload-
|
|
45
|
+
} .file-upload-item__component_18dki svg {
|
|
46
46
|
display: block;
|
|
47
|
-
} .file-upload-
|
|
47
|
+
} .file-upload-item__component_18dki:last-child {
|
|
48
48
|
box-shadow: none;
|
|
49
|
-
} .file-upload-
|
|
49
|
+
} .file-upload-item__infoSection_18dki {
|
|
50
50
|
display: flex;
|
|
51
51
|
flex-direction: column;
|
|
52
52
|
flex: 1;
|
|
53
53
|
margin-top: var(--gap-2xs);
|
|
54
54
|
margin-left: var(--gap-s);
|
|
55
55
|
min-width: 40%;
|
|
56
|
-
} .file-upload-
|
|
56
|
+
} .file-upload-item__info_18dki {
|
|
57
57
|
display: flex;
|
|
58
58
|
flex-wrap: wrap;
|
|
59
59
|
flex: 1;
|
|
60
60
|
overflow: hidden;
|
|
61
|
-
} .file-upload-
|
|
61
|
+
} .file-upload-item__icon_18dki {
|
|
62
62
|
display: block;
|
|
63
63
|
flex-shrink: 0;
|
|
64
64
|
color: var(--color-light-neutral-translucent-1300);
|
|
65
|
-
} .file-upload-
|
|
65
|
+
} .file-upload-item__errorIcon_18dki {
|
|
66
66
|
flex-shrink: 0;
|
|
67
67
|
color: var(--color-light-status-negative);
|
|
68
|
-
} .file-upload-
|
|
68
|
+
} .file-upload-item__successIcon_18dki {
|
|
69
69
|
flex-shrink: 0;
|
|
70
70
|
color: var(--color-light-status-positive);
|
|
71
|
-
} .file-upload-
|
|
71
|
+
} .file-upload-item__name_18dki {
|
|
72
72
|
color: var(--color-light-text-primary)
|
|
73
|
-
} .file-upload-
|
|
73
|
+
} .file-upload-item__name_18dki a {
|
|
74
74
|
display: block;
|
|
75
75
|
margin-bottom: 1px;
|
|
76
|
-
} .file-upload-
|
|
76
|
+
} .file-upload-item__name_18dki.file-upload-item__rowLimit_18dki {
|
|
77
77
|
white-space: nowrap;
|
|
78
78
|
overflow: hidden;
|
|
79
79
|
text-overflow: ellipsis;
|
|
80
|
-
} .file-upload-
|
|
80
|
+
} .file-upload-item__meta_18dki {
|
|
81
81
|
display: flex;
|
|
82
82
|
white-space: nowrap;
|
|
83
83
|
margin-right: var(--gap-2xs);
|
|
84
84
|
margin-left: 36px;
|
|
85
85
|
padding: var(--gap-2xs) 0
|
|
86
|
-
} .file-upload-
|
|
86
|
+
} .file-upload-item__meta_18dki > * {
|
|
87
87
|
margin-right: var(--gap-s)
|
|
88
|
-
} .file-upload-
|
|
88
|
+
} .file-upload-item__meta_18dki > *:last-child {
|
|
89
89
|
margin-right: 0;
|
|
90
|
-
} .file-upload-
|
|
90
|
+
} .file-upload-item__size_18dki {
|
|
91
91
|
text-align: right;
|
|
92
|
-
} .file-upload-
|
|
93
|
-
.file-upload-
|
|
92
|
+
} .file-upload-item__delete_18dki,
|
|
93
|
+
.file-upload-item__download_18dki {
|
|
94
94
|
height: 24px;
|
|
95
95
|
width: 24px;
|
|
96
96
|
margin-left: var(--gap-xs);
|
|
97
|
-
} .file-upload-
|
|
97
|
+
} .file-upload-item__errorWrapper_18dki {
|
|
98
98
|
margin-top: var(--gap-2xs);
|
|
99
99
|
color: var(--color-light-text-negative);
|
|
100
|
-
} .file-upload-
|
|
100
|
+
} .file-upload-item__restore_18dki {
|
|
101
101
|
font-size: 14px;
|
|
102
102
|
line-height: 20px;
|
|
103
103
|
font-weight: 400;
|
|
104
104
|
|
|
105
105
|
margin-left: var(--gap-s);
|
|
106
106
|
margin-top: var(--gap-3xs);
|
|
107
|
-
} .file-upload-
|
|
107
|
+
} .file-upload-item__spinnerWrapper_18dki {
|
|
108
108
|
display: flex;
|
|
109
109
|
justify-content: center;
|
|
110
110
|
align-items: center;
|
|
111
111
|
width: 24px;
|
|
112
112
|
height: 24px;
|
|
113
|
-
} .file-upload-
|
|
113
|
+
} .file-upload-item__spinner_18dki {
|
|
114
114
|
width: 20px;
|
|
115
115
|
height: 20px;
|
|
116
|
-
} .file-upload-
|
|
116
|
+
} .file-upload-item__uploadPercent_18dki {
|
|
117
117
|
margin-top: var(--gap-2xs);
|
|
118
118
|
margin-left: var(--gap-xl);
|
|
119
119
|
}
|
package/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1rs3w */
|
|
2
2
|
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-neutral-300: #e7e8eb;
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
/* новые значения, используйте их */
|
|
31
31
|
} :root {
|
|
32
32
|
} :root {
|
|
33
|
-
} .file-upload-
|
|
33
|
+
} .file-upload-item__component_18dki {
|
|
34
34
|
font-size: 13px;
|
|
35
35
|
line-height: 16px;
|
|
36
36
|
font-weight: 400;
|
|
@@ -42,78 +42,78 @@
|
|
|
42
42
|
color: var(--color-light-text-secondary);
|
|
43
43
|
box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
|
|
44
44
|
box-sizing: border-box
|
|
45
|
-
} .file-upload-
|
|
45
|
+
} .file-upload-item__component_18dki svg {
|
|
46
46
|
display: block;
|
|
47
|
-
} .file-upload-
|
|
47
|
+
} .file-upload-item__component_18dki:last-child {
|
|
48
48
|
box-shadow: none;
|
|
49
|
-
} .file-upload-
|
|
49
|
+
} .file-upload-item__infoSection_18dki {
|
|
50
50
|
display: flex;
|
|
51
51
|
flex-direction: column;
|
|
52
52
|
flex: 1;
|
|
53
53
|
margin-top: var(--gap-2xs);
|
|
54
54
|
margin-left: var(--gap-s);
|
|
55
55
|
min-width: 40%;
|
|
56
|
-
} .file-upload-
|
|
56
|
+
} .file-upload-item__info_18dki {
|
|
57
57
|
display: flex;
|
|
58
58
|
flex-wrap: wrap;
|
|
59
59
|
flex: 1;
|
|
60
60
|
overflow: hidden;
|
|
61
|
-
} .file-upload-
|
|
61
|
+
} .file-upload-item__icon_18dki {
|
|
62
62
|
display: block;
|
|
63
63
|
flex-shrink: 0;
|
|
64
64
|
color: var(--color-light-neutral-translucent-1300);
|
|
65
|
-
} .file-upload-
|
|
65
|
+
} .file-upload-item__errorIcon_18dki {
|
|
66
66
|
flex-shrink: 0;
|
|
67
67
|
color: var(--color-light-status-negative);
|
|
68
|
-
} .file-upload-
|
|
68
|
+
} .file-upload-item__successIcon_18dki {
|
|
69
69
|
flex-shrink: 0;
|
|
70
70
|
color: var(--color-light-status-positive);
|
|
71
|
-
} .file-upload-
|
|
71
|
+
} .file-upload-item__name_18dki {
|
|
72
72
|
color: var(--color-light-text-primary)
|
|
73
|
-
} .file-upload-
|
|
73
|
+
} .file-upload-item__name_18dki a {
|
|
74
74
|
display: block;
|
|
75
75
|
margin-bottom: 1px;
|
|
76
|
-
} .file-upload-
|
|
76
|
+
} .file-upload-item__name_18dki.file-upload-item__rowLimit_18dki {
|
|
77
77
|
white-space: nowrap;
|
|
78
78
|
overflow: hidden;
|
|
79
79
|
text-overflow: ellipsis;
|
|
80
|
-
} .file-upload-
|
|
80
|
+
} .file-upload-item__meta_18dki {
|
|
81
81
|
display: flex;
|
|
82
82
|
white-space: nowrap;
|
|
83
83
|
margin-right: var(--gap-2xs);
|
|
84
84
|
margin-left: 36px;
|
|
85
85
|
padding: var(--gap-2xs) 0
|
|
86
|
-
} .file-upload-
|
|
86
|
+
} .file-upload-item__meta_18dki > * {
|
|
87
87
|
margin-right: var(--gap-s)
|
|
88
|
-
} .file-upload-
|
|
88
|
+
} .file-upload-item__meta_18dki > *:last-child {
|
|
89
89
|
margin-right: 0;
|
|
90
|
-
} .file-upload-
|
|
90
|
+
} .file-upload-item__size_18dki {
|
|
91
91
|
text-align: right;
|
|
92
|
-
} .file-upload-
|
|
93
|
-
.file-upload-
|
|
92
|
+
} .file-upload-item__delete_18dki,
|
|
93
|
+
.file-upload-item__download_18dki {
|
|
94
94
|
height: 24px;
|
|
95
95
|
width: 24px;
|
|
96
96
|
margin-left: var(--gap-xs);
|
|
97
|
-
} .file-upload-
|
|
97
|
+
} .file-upload-item__errorWrapper_18dki {
|
|
98
98
|
margin-top: var(--gap-2xs);
|
|
99
99
|
color: var(--color-light-text-negative);
|
|
100
|
-
} .file-upload-
|
|
100
|
+
} .file-upload-item__restore_18dki {
|
|
101
101
|
font-size: 14px;
|
|
102
102
|
line-height: 20px;
|
|
103
103
|
font-weight: 400;
|
|
104
104
|
|
|
105
105
|
margin-left: var(--gap-s);
|
|
106
106
|
margin-top: var(--gap-3xs);
|
|
107
|
-
} .file-upload-
|
|
107
|
+
} .file-upload-item__spinnerWrapper_18dki {
|
|
108
108
|
display: flex;
|
|
109
109
|
justify-content: center;
|
|
110
110
|
align-items: center;
|
|
111
111
|
width: 24px;
|
|
112
112
|
height: 24px;
|
|
113
|
-
} .file-upload-
|
|
113
|
+
} .file-upload-item__spinner_18dki {
|
|
114
114
|
width: 20px;
|
|
115
115
|
height: 20px;
|
|
116
|
-
} .file-upload-
|
|
116
|
+
} .file-upload-item__uploadPercent_18dki {
|
|
117
117
|
margin-top: var(--gap-2xs);
|
|
118
118
|
margin-left: var(--gap-xl);
|
|
119
119
|
}
|
package/modern/Component.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { ElementType, MouseEvent, ReactNode } from "react";
|
|
3
|
+
import { ElementType, HTMLAttributeAnchorTarget, MouseEvent, ReactNode } from "react";
|
|
4
4
|
type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
|
|
5
5
|
type FileUploadItemProps = {
|
|
6
6
|
/**
|
|
@@ -82,6 +82,10 @@ type FileUploadItemProps = {
|
|
|
82
82
|
* Разрешить многострочное название файла
|
|
83
83
|
*/
|
|
84
84
|
multiline?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Указывает, где открыть скачиваемый документ
|
|
87
|
+
*/
|
|
88
|
+
target?: HTMLAttributeAnchorTarget;
|
|
85
89
|
/**
|
|
86
90
|
* Идентификатор для систем автоматизированного тестирования
|
|
87
91
|
*/
|
package/modern/Component.js
CHANGED
|
@@ -10,10 +10,10 @@ import { CrossSIcon } from '@alfalab/icons-glyph/CrossSIcon';
|
|
|
10
10
|
import { PointerDownSIcon } from '@alfalab/icons-glyph/PointerDownSIcon';
|
|
11
11
|
import { humanFileSize, fileIcon } from './utils.js';
|
|
12
12
|
|
|
13
|
-
const styles = {"component":"file-upload-
|
|
13
|
+
const styles = {"component":"file-upload-item__component_18dki","infoSection":"file-upload-item__infoSection_18dki","info":"file-upload-item__info_18dki","icon":"file-upload-item__icon_18dki","errorIcon":"file-upload-item__errorIcon_18dki","successIcon":"file-upload-item__successIcon_18dki","name":"file-upload-item__name_18dki","rowLimit":"file-upload-item__rowLimit_18dki","meta":"file-upload-item__meta_18dki","size":"file-upload-item__size_18dki","delete":"file-upload-item__delete_18dki","download":"file-upload-item__download_18dki","errorWrapper":"file-upload-item__errorWrapper_18dki","restore":"file-upload-item__restore_18dki","spinnerWrapper":"file-upload-item__spinnerWrapper_18dki","spinner":"file-upload-item__spinner_18dki","uploadPercent":"file-upload-item__uploadPercent_18dki"};
|
|
14
14
|
require('./index.css')
|
|
15
15
|
|
|
16
|
-
const FileUploadItem = ({ className, children, id = '0', name = '', size, icon: Icon = fileIcon(name), uploadDate, downloadLink, download, uploadStatus, uploadPercent = 0, error, showDelete, showRestore, onDelete, onDownload, onRestore, disableButtons, multiline = false, dataTestId, }) => {
|
|
16
|
+
const FileUploadItem = ({ className, children, id = '0', name = '', size, icon: Icon = fileIcon(name), uploadDate, downloadLink, download, uploadStatus, uploadPercent = 0, error, showDelete, showRestore, onDelete, onDownload, onRestore, disableButtons, multiline = false, target, dataTestId, }) => {
|
|
17
17
|
const handleDownload = (event) => {
|
|
18
18
|
if (onDownload) {
|
|
19
19
|
event.preventDefault();
|
|
@@ -65,7 +65,7 @@ const FileUploadItem = ({ className, children, id = '0', name = '', size, icon:
|
|
|
65
65
|
uploadDate && React.createElement("span", { key: uploadDate }, uploadDate),
|
|
66
66
|
size && (React.createElement("span", { key: size, className: styles.size }, humanFileSize(size)))))),
|
|
67
67
|
showRestore && (React.createElement(Link, { pseudo: true, className: styles.restore, onClick: handleRestore }, "\u0412\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C")),
|
|
68
|
-
showDownload && (React.createElement(IconButton, { size: 'xxs', icon: PointerDownSIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download })),
|
|
68
|
+
showDownload && (React.createElement(IconButton, { size: 'xxs', icon: PointerDownSIcon, className: styles.download, "aria-label": '\u0441\u043A\u0430\u0447\u0430\u0442\u044C', href: downloadLink, onClick: handleDownload, disabled: disableButtons, download: download, target: target })),
|
|
69
69
|
showDelete && !showRestore && (React.createElement(IconButton, { size: 'xxs', icon: CrossSIcon, onClick: handleDelete, disabled: disableButtons, className: styles.delete, "aria-label": '\u0443\u0434\u0430\u043B\u0438\u0442\u044C' }))));
|
|
70
70
|
};
|
|
71
71
|
|
package/modern/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1rs3w */
|
|
2
2
|
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-neutral-300: #e7e8eb;
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
/* новые значения, используйте их */
|
|
31
31
|
} :root {
|
|
32
32
|
} :root {
|
|
33
|
-
} .file-upload-
|
|
33
|
+
} .file-upload-item__component_18dki {
|
|
34
34
|
font-size: 13px;
|
|
35
35
|
line-height: 16px;
|
|
36
36
|
font-weight: 400;
|
|
@@ -42,78 +42,78 @@
|
|
|
42
42
|
color: var(--color-light-text-secondary);
|
|
43
43
|
box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
|
|
44
44
|
box-sizing: border-box
|
|
45
|
-
} .file-upload-
|
|
45
|
+
} .file-upload-item__component_18dki svg {
|
|
46
46
|
display: block;
|
|
47
|
-
} .file-upload-
|
|
47
|
+
} .file-upload-item__component_18dki:last-child {
|
|
48
48
|
box-shadow: none;
|
|
49
|
-
} .file-upload-
|
|
49
|
+
} .file-upload-item__infoSection_18dki {
|
|
50
50
|
display: flex;
|
|
51
51
|
flex-direction: column;
|
|
52
52
|
flex: 1;
|
|
53
53
|
margin-top: var(--gap-2xs);
|
|
54
54
|
margin-left: var(--gap-s);
|
|
55
55
|
min-width: 40%;
|
|
56
|
-
} .file-upload-
|
|
56
|
+
} .file-upload-item__info_18dki {
|
|
57
57
|
display: flex;
|
|
58
58
|
flex-wrap: wrap;
|
|
59
59
|
flex: 1;
|
|
60
60
|
overflow: hidden;
|
|
61
|
-
} .file-upload-
|
|
61
|
+
} .file-upload-item__icon_18dki {
|
|
62
62
|
display: block;
|
|
63
63
|
flex-shrink: 0;
|
|
64
64
|
color: var(--color-light-neutral-translucent-1300);
|
|
65
|
-
} .file-upload-
|
|
65
|
+
} .file-upload-item__errorIcon_18dki {
|
|
66
66
|
flex-shrink: 0;
|
|
67
67
|
color: var(--color-light-status-negative);
|
|
68
|
-
} .file-upload-
|
|
68
|
+
} .file-upload-item__successIcon_18dki {
|
|
69
69
|
flex-shrink: 0;
|
|
70
70
|
color: var(--color-light-status-positive);
|
|
71
|
-
} .file-upload-
|
|
71
|
+
} .file-upload-item__name_18dki {
|
|
72
72
|
color: var(--color-light-text-primary)
|
|
73
|
-
} .file-upload-
|
|
73
|
+
} .file-upload-item__name_18dki a {
|
|
74
74
|
display: block;
|
|
75
75
|
margin-bottom: 1px;
|
|
76
|
-
} .file-upload-
|
|
76
|
+
} .file-upload-item__name_18dki.file-upload-item__rowLimit_18dki {
|
|
77
77
|
white-space: nowrap;
|
|
78
78
|
overflow: hidden;
|
|
79
79
|
text-overflow: ellipsis;
|
|
80
|
-
} .file-upload-
|
|
80
|
+
} .file-upload-item__meta_18dki {
|
|
81
81
|
display: flex;
|
|
82
82
|
white-space: nowrap;
|
|
83
83
|
margin-right: var(--gap-2xs);
|
|
84
84
|
margin-left: 36px;
|
|
85
85
|
padding: var(--gap-2xs) 0
|
|
86
|
-
} .file-upload-
|
|
86
|
+
} .file-upload-item__meta_18dki > * {
|
|
87
87
|
margin-right: var(--gap-s)
|
|
88
|
-
} .file-upload-
|
|
88
|
+
} .file-upload-item__meta_18dki > *:last-child {
|
|
89
89
|
margin-right: 0;
|
|
90
|
-
} .file-upload-
|
|
90
|
+
} .file-upload-item__size_18dki {
|
|
91
91
|
text-align: right;
|
|
92
|
-
} .file-upload-
|
|
93
|
-
.file-upload-
|
|
92
|
+
} .file-upload-item__delete_18dki,
|
|
93
|
+
.file-upload-item__download_18dki {
|
|
94
94
|
height: 24px;
|
|
95
95
|
width: 24px;
|
|
96
96
|
margin-left: var(--gap-xs);
|
|
97
|
-
} .file-upload-
|
|
97
|
+
} .file-upload-item__errorWrapper_18dki {
|
|
98
98
|
margin-top: var(--gap-2xs);
|
|
99
99
|
color: var(--color-light-text-negative);
|
|
100
|
-
} .file-upload-
|
|
100
|
+
} .file-upload-item__restore_18dki {
|
|
101
101
|
font-size: 14px;
|
|
102
102
|
line-height: 20px;
|
|
103
103
|
font-weight: 400;
|
|
104
104
|
|
|
105
105
|
margin-left: var(--gap-s);
|
|
106
106
|
margin-top: var(--gap-3xs);
|
|
107
|
-
} .file-upload-
|
|
107
|
+
} .file-upload-item__spinnerWrapper_18dki {
|
|
108
108
|
display: flex;
|
|
109
109
|
justify-content: center;
|
|
110
110
|
align-items: center;
|
|
111
111
|
width: 24px;
|
|
112
112
|
height: 24px;
|
|
113
|
-
} .file-upload-
|
|
113
|
+
} .file-upload-item__spinner_18dki {
|
|
114
114
|
width: 20px;
|
|
115
115
|
height: 20px;
|
|
116
|
-
} .file-upload-
|
|
116
|
+
} .file-upload-item__uploadPercent_18dki {
|
|
117
117
|
margin-top: var(--gap-2xs);
|
|
118
118
|
margin-left: var(--gap-xl);
|
|
119
119
|
}
|
package/package.json
CHANGED
package/src/Component.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { ElementType, MouseEvent, ReactNode } from 'react';
|
|
1
|
+
import React, { ElementType, HTMLAttributeAnchorTarget, MouseEvent, ReactNode } from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
|
|
4
4
|
import { IconButton } from '@alfalab/core-components-icon-button';
|
|
@@ -113,6 +113,11 @@ export type FileUploadItemProps = {
|
|
|
113
113
|
*/
|
|
114
114
|
multiline?: boolean;
|
|
115
115
|
|
|
116
|
+
/**
|
|
117
|
+
* Указывает, где открыть скачиваемый документ
|
|
118
|
+
*/
|
|
119
|
+
target?: HTMLAttributeAnchorTarget;
|
|
120
|
+
|
|
116
121
|
/**
|
|
117
122
|
* Идентификатор для систем автоматизированного тестирования
|
|
118
123
|
*/
|
|
@@ -139,6 +144,7 @@ export const FileUploadItem: React.FC<FileUploadItemProps> = ({
|
|
|
139
144
|
onRestore,
|
|
140
145
|
disableButtons,
|
|
141
146
|
multiline = false,
|
|
147
|
+
target,
|
|
142
148
|
dataTestId,
|
|
143
149
|
}) => {
|
|
144
150
|
const handleDownload = (event: MouseEvent<HTMLElement>) => {
|
|
@@ -249,6 +255,7 @@ export const FileUploadItem: React.FC<FileUploadItemProps> = ({
|
|
|
249
255
|
onClick={handleDownload}
|
|
250
256
|
disabled={disableButtons}
|
|
251
257
|
download={download}
|
|
258
|
+
target={target}
|
|
252
259
|
/>
|
|
253
260
|
)}
|
|
254
261
|
|