@alfalab/core-components-file-upload-item 5.7.1 → 5.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/Component.js +1 -1
  2. package/cssm/index.module.css +3 -2
  3. package/esm/Component.js +1 -1
  4. package/esm/index.css +26 -25
  5. package/index.css +26 -25
  6. package/modern/Component.js +1 -1
  7. package/modern/index.css +26 -25
  8. package/moderncssm/Component.d.ts +95 -0
  9. package/moderncssm/Component.js +70 -0
  10. package/moderncssm/index.d.ts +1 -0
  11. package/moderncssm/index.js +1 -0
  12. package/moderncssm/index.module.css +129 -0
  13. package/moderncssm/utils.d.ts +5 -0
  14. package/moderncssm/utils.js +41 -0
  15. package/package.json +6 -6
  16. package/src/index.module.css +3 -3
package/Component.js CHANGED
@@ -19,7 +19,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
19
19
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
20
20
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
21
21
 
22
- var styles = {"component":"file-upload-item__component_11i2p","infoSection":"file-upload-item__infoSection_11i2p","info":"file-upload-item__info_11i2p","icon":"file-upload-item__icon_11i2p","errorIcon":"file-upload-item__errorIcon_11i2p","successIcon":"file-upload-item__successIcon_11i2p","name":"file-upload-item__name_11i2p","rowLimit":"file-upload-item__rowLimit_11i2p","meta":"file-upload-item__meta_11i2p","size":"file-upload-item__size_11i2p","delete":"file-upload-item__delete_11i2p","download":"file-upload-item__download_11i2p","errorWrapper":"file-upload-item__errorWrapper_11i2p","restore":"file-upload-item__restore_11i2p","spinnerWrapper":"file-upload-item__spinnerWrapper_11i2p","spinner":"file-upload-item__spinner_11i2p","uploadPercent":"file-upload-item__uploadPercent_11i2p"};
22
+ var styles = {"component":"file-upload-item__component_8sw4y","infoSection":"file-upload-item__infoSection_8sw4y","info":"file-upload-item__info_8sw4y","icon":"file-upload-item__icon_8sw4y","errorIcon":"file-upload-item__errorIcon_8sw4y","successIcon":"file-upload-item__successIcon_8sw4y","name":"file-upload-item__name_8sw4y","rowLimit":"file-upload-item__rowLimit_8sw4y","meta":"file-upload-item__meta_8sw4y","size":"file-upload-item__size_8sw4y","delete":"file-upload-item__delete_8sw4y","download":"file-upload-item__download_8sw4y","errorWrapper":"file-upload-item__errorWrapper_8sw4y","restore":"file-upload-item__restore_8sw4y","spinnerWrapper":"file-upload-item__spinnerWrapper_8sw4y","spinner":"file-upload-item__spinner_8sw4y","uploadPercent":"file-upload-item__uploadPercent_8sw4y"};
23
23
  require('./index.css')
24
24
 
25
25
  var FileUploadItem = function (_a) {
package/cssm/index.module.css CHANGED
@@ -27,6 +27,7 @@
27
27
  --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
28
28
 
29
29
  /* новые значения, используйте их */
30
+ --gap-0: 0;
30
31
  --gap-2: var(--gap-3xs);
31
32
  --gap-4: var(--gap-2xs);
32
33
  --gap-8: var(--gap-xs);
@@ -86,11 +87,11 @@
86
87
  white-space: nowrap;
87
88
  margin-right: var(--gap-4);
88
89
  margin-left: 36px;
89
- padding: var(--gap-4) 0
90
+ padding: var(--gap-4) var(--gap-0)
90
91
  } .meta > * {
91
92
  margin-right: var(--gap-12)
92
93
  } .meta > *:last-child {
93
- margin-right: 0;
94
+ margin-right: var(--gap-0);
94
95
  } .size {
95
96
  text-align: right;
96
97
  } .delete,
package/esm/Component.js CHANGED
@@ -10,7 +10,7 @@ import { CrossSIcon } from '@alfalab/icons-glyph/CrossSIcon';
10
10
  import { PointerDownSIcon } from '@alfalab/icons-glyph/PointerDownSIcon';
11
11
  import { fileIcon, humanFileSize } from './utils.js';
12
12
 
13
- var styles = {"component":"file-upload-item__component_11i2p","infoSection":"file-upload-item__infoSection_11i2p","info":"file-upload-item__info_11i2p","icon":"file-upload-item__icon_11i2p","errorIcon":"file-upload-item__errorIcon_11i2p","successIcon":"file-upload-item__successIcon_11i2p","name":"file-upload-item__name_11i2p","rowLimit":"file-upload-item__rowLimit_11i2p","meta":"file-upload-item__meta_11i2p","size":"file-upload-item__size_11i2p","delete":"file-upload-item__delete_11i2p","download":"file-upload-item__download_11i2p","errorWrapper":"file-upload-item__errorWrapper_11i2p","restore":"file-upload-item__restore_11i2p","spinnerWrapper":"file-upload-item__spinnerWrapper_11i2p","spinner":"file-upload-item__spinner_11i2p","uploadPercent":"file-upload-item__uploadPercent_11i2p"};
13
+ var styles = {"component":"file-upload-item__component_8sw4y","infoSection":"file-upload-item__infoSection_8sw4y","info":"file-upload-item__info_8sw4y","icon":"file-upload-item__icon_8sw4y","errorIcon":"file-upload-item__errorIcon_8sw4y","successIcon":"file-upload-item__successIcon_8sw4y","name":"file-upload-item__name_8sw4y","rowLimit":"file-upload-item__rowLimit_8sw4y","meta":"file-upload-item__meta_8sw4y","size":"file-upload-item__size_8sw4y","delete":"file-upload-item__delete_8sw4y","download":"file-upload-item__download_8sw4y","errorWrapper":"file-upload-item__errorWrapper_8sw4y","restore":"file-upload-item__restore_8sw4y","spinnerWrapper":"file-upload-item__spinnerWrapper_8sw4y","spinner":"file-upload-item__spinner_8sw4y","uploadPercent":"file-upload-item__uploadPercent_8sw4y"};
14
14
  require('./index.css')
15
15
 
16
16
  var FileUploadItem = function (_a) {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1ym76 */
1
+ /* hash: 1pcom */
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;
@@ -28,6 +28,7 @@
28
28
  --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
29
29
 
30
30
  /* новые значения, используйте их */
31
+ --gap-0: 0;
31
32
  --gap-2: var(--gap-3xs);
32
33
  --gap-4: var(--gap-2xs);
33
34
  --gap-8: var(--gap-xs);
@@ -35,7 +36,7 @@
35
36
  --gap-24: var(--gap-xl);
36
37
  } :root {
37
38
  } :root {
38
- } .file-upload-item__component_11i2p {
39
+ } .file-upload-item__component_8sw4y {
39
40
  font-size: 13px;
40
41
  line-height: 16px;
41
42
  font-weight: 400;
@@ -47,78 +48,78 @@
47
48
  color: var(--color-light-text-secondary);
48
49
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
49
50
  box-sizing: border-box
50
- } .file-upload-item__component_11i2p svg {
51
+ } .file-upload-item__component_8sw4y svg {
51
52
  display: block;
52
- } .file-upload-item__component_11i2p:last-child {
53
+ } .file-upload-item__component_8sw4y:last-child {
53
54
  box-shadow: none;
54
- } .file-upload-item__infoSection_11i2p {
55
+ } .file-upload-item__infoSection_8sw4y {
55
56
  display: flex;
56
57
  flex-direction: column;
57
58
  flex: 1;
58
59
  margin-top: var(--gap-4);
59
60
  margin-left: var(--gap-12);
60
61
  min-width: 40%;
61
- } .file-upload-item__info_11i2p {
62
+ } .file-upload-item__info_8sw4y {
62
63
  display: flex;
63
64
  flex-wrap: wrap;
64
65
  flex: 1;
65
66
  overflow: hidden;
66
- } .file-upload-item__icon_11i2p {
67
+ } .file-upload-item__icon_8sw4y {
67
68
  display: block;
68
69
  flex-shrink: 0;
69
70
  color: var(--color-light-neutral-translucent-1300);
70
- } .file-upload-item__errorIcon_11i2p {
71
+ } .file-upload-item__errorIcon_8sw4y {
71
72
  flex-shrink: 0;
72
73
  color: var(--color-light-status-negative);
73
- } .file-upload-item__successIcon_11i2p {
74
+ } .file-upload-item__successIcon_8sw4y {
74
75
  flex-shrink: 0;
75
76
  color: var(--color-light-status-positive);
76
- } .file-upload-item__name_11i2p {
77
+ } .file-upload-item__name_8sw4y {
77
78
  color: var(--color-light-text-primary)
78
- } .file-upload-item__name_11i2p a {
79
+ } .file-upload-item__name_8sw4y a {
79
80
  display: block;
80
81
  margin-bottom: 1px;
81
- } .file-upload-item__name_11i2p.file-upload-item__rowLimit_11i2p {
82
+ } .file-upload-item__name_8sw4y.file-upload-item__rowLimit_8sw4y {
82
83
  white-space: nowrap;
83
84
  overflow: hidden;
84
85
  text-overflow: ellipsis;
85
- } .file-upload-item__meta_11i2p {
86
+ } .file-upload-item__meta_8sw4y {
86
87
  display: flex;
87
88
  white-space: nowrap;
88
89
  margin-right: var(--gap-4);
89
90
  margin-left: 36px;
90
- padding: var(--gap-4) 0
91
- } .file-upload-item__meta_11i2p > * {
91
+ padding: var(--gap-4) var(--gap-0)
92
+ } .file-upload-item__meta_8sw4y > * {
92
93
  margin-right: var(--gap-12)
93
- } .file-upload-item__meta_11i2p > *:last-child {
94
- margin-right: 0;
95
- } .file-upload-item__size_11i2p {
94
+ } .file-upload-item__meta_8sw4y > *:last-child {
95
+ margin-right: var(--gap-0);
96
+ } .file-upload-item__size_8sw4y {
96
97
  text-align: right;
97
- } .file-upload-item__delete_11i2p,
98
- .file-upload-item__download_11i2p {
98
+ } .file-upload-item__delete_8sw4y,
99
+ .file-upload-item__download_8sw4y {
99
100
  height: 24px;
100
101
  width: 24px;
101
102
  margin-left: var(--gap-8);
102
- } .file-upload-item__errorWrapper_11i2p {
103
+ } .file-upload-item__errorWrapper_8sw4y {
103
104
  margin-top: var(--gap-4);
104
105
  color: var(--color-light-text-negative);
105
- } .file-upload-item__restore_11i2p {
106
+ } .file-upload-item__restore_8sw4y {
106
107
  font-size: 14px;
107
108
  line-height: 20px;
108
109
  font-weight: 400;
109
110
 
110
111
  margin-left: var(--gap-12);
111
112
  margin-top: var(--gap-2);
112
- } .file-upload-item__spinnerWrapper_11i2p {
113
+ } .file-upload-item__spinnerWrapper_8sw4y {
113
114
  display: flex;
114
115
  justify-content: center;
115
116
  align-items: center;
116
117
  width: 24px;
117
118
  height: 24px;
118
- } .file-upload-item__spinner_11i2p {
119
+ } .file-upload-item__spinner_8sw4y {
119
120
  width: 20px;
120
121
  height: 20px;
121
- } .file-upload-item__uploadPercent_11i2p {
122
+ } .file-upload-item__uploadPercent_8sw4y {
122
123
  margin-top: var(--gap-4);
123
124
  margin-left: var(--gap-24);
124
125
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1ym76 */
1
+ /* hash: 1pcom */
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;
@@ -28,6 +28,7 @@
28
28
  --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
29
29
 
30
30
  /* новые значения, используйте их */
31
+ --gap-0: 0;
31
32
  --gap-2: var(--gap-3xs);
32
33
  --gap-4: var(--gap-2xs);
33
34
  --gap-8: var(--gap-xs);
@@ -35,7 +36,7 @@
35
36
  --gap-24: var(--gap-xl);
36
37
  } :root {
37
38
  } :root {
38
- } .file-upload-item__component_11i2p {
39
+ } .file-upload-item__component_8sw4y {
39
40
  font-size: 13px;
40
41
  line-height: 16px;
41
42
  font-weight: 400;
@@ -47,78 +48,78 @@
47
48
  color: var(--color-light-text-secondary);
48
49
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
49
50
  box-sizing: border-box
50
- } .file-upload-item__component_11i2p svg {
51
+ } .file-upload-item__component_8sw4y svg {
51
52
  display: block;
52
- } .file-upload-item__component_11i2p:last-child {
53
+ } .file-upload-item__component_8sw4y:last-child {
53
54
  box-shadow: none;
54
- } .file-upload-item__infoSection_11i2p {
55
+ } .file-upload-item__infoSection_8sw4y {
55
56
  display: flex;
56
57
  flex-direction: column;
57
58
  flex: 1;
58
59
  margin-top: var(--gap-4);
59
60
  margin-left: var(--gap-12);
60
61
  min-width: 40%;
61
- } .file-upload-item__info_11i2p {
62
+ } .file-upload-item__info_8sw4y {
62
63
  display: flex;
63
64
  flex-wrap: wrap;
64
65
  flex: 1;
65
66
  overflow: hidden;
66
- } .file-upload-item__icon_11i2p {
67
+ } .file-upload-item__icon_8sw4y {
67
68
  display: block;
68
69
  flex-shrink: 0;
69
70
  color: var(--color-light-neutral-translucent-1300);
70
- } .file-upload-item__errorIcon_11i2p {
71
+ } .file-upload-item__errorIcon_8sw4y {
71
72
  flex-shrink: 0;
72
73
  color: var(--color-light-status-negative);
73
- } .file-upload-item__successIcon_11i2p {
74
+ } .file-upload-item__successIcon_8sw4y {
74
75
  flex-shrink: 0;
75
76
  color: var(--color-light-status-positive);
76
- } .file-upload-item__name_11i2p {
77
+ } .file-upload-item__name_8sw4y {
77
78
  color: var(--color-light-text-primary)
78
- } .file-upload-item__name_11i2p a {
79
+ } .file-upload-item__name_8sw4y a {
79
80
  display: block;
80
81
  margin-bottom: 1px;
81
- } .file-upload-item__name_11i2p.file-upload-item__rowLimit_11i2p {
82
+ } .file-upload-item__name_8sw4y.file-upload-item__rowLimit_8sw4y {
82
83
  white-space: nowrap;
83
84
  overflow: hidden;
84
85
  text-overflow: ellipsis;
85
- } .file-upload-item__meta_11i2p {
86
+ } .file-upload-item__meta_8sw4y {
86
87
  display: flex;
87
88
  white-space: nowrap;
88
89
  margin-right: var(--gap-4);
89
90
  margin-left: 36px;
90
- padding: var(--gap-4) 0
91
- } .file-upload-item__meta_11i2p > * {
91
+ padding: var(--gap-4) var(--gap-0)
92
+ } .file-upload-item__meta_8sw4y > * {
92
93
  margin-right: var(--gap-12)
93
- } .file-upload-item__meta_11i2p > *:last-child {
94
- margin-right: 0;
95
- } .file-upload-item__size_11i2p {
94
+ } .file-upload-item__meta_8sw4y > *:last-child {
95
+ margin-right: var(--gap-0);
96
+ } .file-upload-item__size_8sw4y {
96
97
  text-align: right;
97
- } .file-upload-item__delete_11i2p,
98
- .file-upload-item__download_11i2p {
98
+ } .file-upload-item__delete_8sw4y,
99
+ .file-upload-item__download_8sw4y {
99
100
  height: 24px;
100
101
  width: 24px;
101
102
  margin-left: var(--gap-8);
102
- } .file-upload-item__errorWrapper_11i2p {
103
+ } .file-upload-item__errorWrapper_8sw4y {
103
104
  margin-top: var(--gap-4);
104
105
  color: var(--color-light-text-negative);
105
- } .file-upload-item__restore_11i2p {
106
+ } .file-upload-item__restore_8sw4y {
106
107
  font-size: 14px;
107
108
  line-height: 20px;
108
109
  font-weight: 400;
109
110
 
110
111
  margin-left: var(--gap-12);
111
112
  margin-top: var(--gap-2);
112
- } .file-upload-item__spinnerWrapper_11i2p {
113
+ } .file-upload-item__spinnerWrapper_8sw4y {
113
114
  display: flex;
114
115
  justify-content: center;
115
116
  align-items: center;
116
117
  width: 24px;
117
118
  height: 24px;
118
- } .file-upload-item__spinner_11i2p {
119
+ } .file-upload-item__spinner_8sw4y {
119
120
  width: 20px;
120
121
  height: 20px;
121
- } .file-upload-item__uploadPercent_11i2p {
122
+ } .file-upload-item__uploadPercent_8sw4y {
122
123
  margin-top: var(--gap-4);
123
124
  margin-left: var(--gap-24);
124
125
  }
package/modern/Component.js CHANGED
@@ -10,7 +10,7 @@ import { CrossSIcon } from '@alfalab/icons-glyph/CrossSIcon';
10
10
  import { PointerDownSIcon } from '@alfalab/icons-glyph/PointerDownSIcon';
11
11
  import { humanFileSize, fileIcon } from './utils.js';
12
12
 
13
- const styles = {"component":"file-upload-item__component_11i2p","infoSection":"file-upload-item__infoSection_11i2p","info":"file-upload-item__info_11i2p","icon":"file-upload-item__icon_11i2p","errorIcon":"file-upload-item__errorIcon_11i2p","successIcon":"file-upload-item__successIcon_11i2p","name":"file-upload-item__name_11i2p","rowLimit":"file-upload-item__rowLimit_11i2p","meta":"file-upload-item__meta_11i2p","size":"file-upload-item__size_11i2p","delete":"file-upload-item__delete_11i2p","download":"file-upload-item__download_11i2p","errorWrapper":"file-upload-item__errorWrapper_11i2p","restore":"file-upload-item__restore_11i2p","spinnerWrapper":"file-upload-item__spinnerWrapper_11i2p","spinner":"file-upload-item__spinner_11i2p","uploadPercent":"file-upload-item__uploadPercent_11i2p"};
13
+ const styles = {"component":"file-upload-item__component_8sw4y","infoSection":"file-upload-item__infoSection_8sw4y","info":"file-upload-item__info_8sw4y","icon":"file-upload-item__icon_8sw4y","errorIcon":"file-upload-item__errorIcon_8sw4y","successIcon":"file-upload-item__successIcon_8sw4y","name":"file-upload-item__name_8sw4y","rowLimit":"file-upload-item__rowLimit_8sw4y","meta":"file-upload-item__meta_8sw4y","size":"file-upload-item__size_8sw4y","delete":"file-upload-item__delete_8sw4y","download":"file-upload-item__download_8sw4y","errorWrapper":"file-upload-item__errorWrapper_8sw4y","restore":"file-upload-item__restore_8sw4y","spinnerWrapper":"file-upload-item__spinnerWrapper_8sw4y","spinner":"file-upload-item__spinner_8sw4y","uploadPercent":"file-upload-item__uploadPercent_8sw4y"};
14
14
  require('./index.css')
15
15
 
16
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, }) => {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1ym76 */
1
+ /* hash: 1pcom */
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;
@@ -28,6 +28,7 @@
28
28
  --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
29
29
 
30
30
  /* новые значения, используйте их */
31
+ --gap-0: 0;
31
32
  --gap-2: var(--gap-3xs);
32
33
  --gap-4: var(--gap-2xs);
33
34
  --gap-8: var(--gap-xs);
@@ -35,7 +36,7 @@
35
36
  --gap-24: var(--gap-xl);
36
37
  } :root {
37
38
  } :root {
38
- } .file-upload-item__component_11i2p {
39
+ } .file-upload-item__component_8sw4y {
39
40
  font-size: 13px;
40
41
  line-height: 16px;
41
42
  font-weight: 400;
@@ -47,78 +48,78 @@
47
48
  color: var(--color-light-text-secondary);
48
49
  box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
49
50
  box-sizing: border-box
50
- } .file-upload-item__component_11i2p svg {
51
+ } .file-upload-item__component_8sw4y svg {
51
52
  display: block;
52
- } .file-upload-item__component_11i2p:last-child {
53
+ } .file-upload-item__component_8sw4y:last-child {
53
54
  box-shadow: none;
54
- } .file-upload-item__infoSection_11i2p {
55
+ } .file-upload-item__infoSection_8sw4y {
55
56
  display: flex;
56
57
  flex-direction: column;
57
58
  flex: 1;
58
59
  margin-top: var(--gap-4);
59
60
  margin-left: var(--gap-12);
60
61
  min-width: 40%;
61
- } .file-upload-item__info_11i2p {
62
+ } .file-upload-item__info_8sw4y {
62
63
  display: flex;
63
64
  flex-wrap: wrap;
64
65
  flex: 1;
65
66
  overflow: hidden;
66
- } .file-upload-item__icon_11i2p {
67
+ } .file-upload-item__icon_8sw4y {
67
68
  display: block;
68
69
  flex-shrink: 0;
69
70
  color: var(--color-light-neutral-translucent-1300);
70
- } .file-upload-item__errorIcon_11i2p {
71
+ } .file-upload-item__errorIcon_8sw4y {
71
72
  flex-shrink: 0;
72
73
  color: var(--color-light-status-negative);
73
- } .file-upload-item__successIcon_11i2p {
74
+ } .file-upload-item__successIcon_8sw4y {
74
75
  flex-shrink: 0;
75
76
  color: var(--color-light-status-positive);
76
- } .file-upload-item__name_11i2p {
77
+ } .file-upload-item__name_8sw4y {
77
78
  color: var(--color-light-text-primary)
78
- } .file-upload-item__name_11i2p a {
79
+ } .file-upload-item__name_8sw4y a {
79
80
  display: block;
80
81
  margin-bottom: 1px;
81
- } .file-upload-item__name_11i2p.file-upload-item__rowLimit_11i2p {
82
+ } .file-upload-item__name_8sw4y.file-upload-item__rowLimit_8sw4y {
82
83
  white-space: nowrap;
83
84
  overflow: hidden;
84
85
  text-overflow: ellipsis;
85
- } .file-upload-item__meta_11i2p {
86
+ } .file-upload-item__meta_8sw4y {
86
87
  display: flex;
87
88
  white-space: nowrap;
88
89
  margin-right: var(--gap-4);
89
90
  margin-left: 36px;
90
- padding: var(--gap-4) 0
91
- } .file-upload-item__meta_11i2p > * {
91
+ padding: var(--gap-4) var(--gap-0)
92
+ } .file-upload-item__meta_8sw4y > * {
92
93
  margin-right: var(--gap-12)
93
- } .file-upload-item__meta_11i2p > *:last-child {
94
- margin-right: 0;
95
- } .file-upload-item__size_11i2p {
94
+ } .file-upload-item__meta_8sw4y > *:last-child {
95
+ margin-right: var(--gap-0);
96
+ } .file-upload-item__size_8sw4y {
96
97
  text-align: right;
97
- } .file-upload-item__delete_11i2p,
98
- .file-upload-item__download_11i2p {
98
+ } .file-upload-item__delete_8sw4y,
99
+ .file-upload-item__download_8sw4y {
99
100
  height: 24px;
100
101
  width: 24px;
101
102
  margin-left: var(--gap-8);
102
- } .file-upload-item__errorWrapper_11i2p {
103
+ } .file-upload-item__errorWrapper_8sw4y {
103
104
  margin-top: var(--gap-4);
104
105
  color: var(--color-light-text-negative);
105
- } .file-upload-item__restore_11i2p {
106
+ } .file-upload-item__restore_8sw4y {
106
107
  font-size: 14px;
107
108
  line-height: 20px;
108
109
  font-weight: 400;
109
110
 
110
111
  margin-left: var(--gap-12);
111
112
  margin-top: var(--gap-2);
112
- } .file-upload-item__spinnerWrapper_11i2p {
113
+ } .file-upload-item__spinnerWrapper_8sw4y {
113
114
  display: flex;
114
115
  justify-content: center;
115
116
  align-items: center;
116
117
  width: 24px;
117
118
  height: 24px;
118
- } .file-upload-item__spinner_11i2p {
119
+ } .file-upload-item__spinner_8sw4y {
119
120
  width: 20px;
120
121
  height: 20px;
121
- } .file-upload-item__uploadPercent_11i2p {
122
+ } .file-upload-item__uploadPercent_8sw4y {
122
123
  margin-top: var(--gap-4);
123
124
  margin-left: var(--gap-24);
124
125
  }
package/moderncssm/Component.d.ts ADDED
@@ -0,0 +1,95 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { ElementType, HTMLAttributeAnchorTarget, MouseEvent, ReactNode } from "react";
4
+ type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
5
+ type FileUploadItemProps = {
6
+ /**
7
+ * Дополнительный класс
8
+ */
9
+ className?: string;
10
+ /**
11
+ * Идентификатор элемента
12
+ */
13
+ id?: string;
14
+ /**
15
+ * Имя файла с расширением
16
+ */
17
+ name?: string;
18
+ /**
19
+ * Размер файла
20
+ */
21
+ size?: string | number;
22
+ /**
23
+ * Дата загрузки файла
24
+ */
25
+ uploadDate?: string;
26
+ /**
27
+ * Ссылка на файл. Если прокидывается этот параметр, то появляется кнопка скачивания
28
+ */
29
+ downloadLink?: string;
30
+ /**
31
+ * Рекомендует браузеру скачивать контент по ссылке.
32
+ * В проп может быть передано рекомендуемое название скачиваемого файла.
33
+ */
34
+ download?: string | true;
35
+ /**
36
+ * Отображение кнопки удаления
37
+ */
38
+ showDelete?: boolean;
39
+ /**
40
+ * Отображение кнопки восстановления
41
+ */
42
+ showRestore?: boolean;
43
+ /**
44
+ * Процент загрузки файла
45
+ */
46
+ uploadPercent?: number;
47
+ /**
48
+ * Статус загрузки файла
49
+ */
50
+ uploadStatus?: FileStatuses;
51
+ /**
52
+ * Сообщение об ошибке
53
+ */
54
+ error?: ReactNode;
55
+ /**
56
+ * Дочерние элементы
57
+ */
58
+ children?: React.ReactNode;
59
+ /**
60
+ * Компонент кастомной иконки
61
+ */
62
+ icon?: ElementType<{
63
+ className?: string;
64
+ }>;
65
+ /**
66
+ * Обработчик загрузки файла
67
+ */
68
+ onDownload?: (id: string) => void;
69
+ /**
70
+ * Обработчик удаления файла
71
+ */
72
+ onDelete?: (id: string, event?: MouseEvent<HTMLElement>) => void;
73
+ /**
74
+ * Обработчик восстановления файла
75
+ */
76
+ onRestore?: (id: string) => void;
77
+ /**
78
+ * Управление активностью кнопок
79
+ */
80
+ disableButtons?: boolean;
81
+ /**
82
+ * Разрешить многострочное название файла
83
+ */
84
+ multiline?: boolean;
85
+ /**
86
+ * Указывает, где открыть скачиваемый документ
87
+ */
88
+ target?: HTMLAttributeAnchorTarget;
89
+ /**
90
+ * Идентификатор для систем автоматизированного тестирования
91
+ */
92
+ dataTestId?: string;
93
+ };
94
+ declare const FileUploadItem: React.FC<FileUploadItemProps>;
95
+ export { FileStatuses, FileUploadItemProps, FileUploadItem };
package/moderncssm/Component.js ADDED
@@ -0,0 +1,70 @@
1
+ import React from 'react';
2
+ import cn from 'classnames';
3
+ import { IconButton } from '@alfalab/core-components-icon-button/moderncssm';
4
+ import { Link } from '@alfalab/core-components-link/moderncssm';
5
+ import { Spinner } from '@alfalab/core-components-spinner/moderncssm';
6
+ import { AlertCircleMIcon } from '@alfalab/icons-glyph/AlertCircleMIcon';
7
+ import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
8
+ import { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';
9
+ import { CrossSIcon } from '@alfalab/icons-glyph/CrossSIcon';
10
+ import { PointerDownSIcon } from '@alfalab/icons-glyph/PointerDownSIcon';
11
+ import { humanFileSize, fileIcon } from './utils.js';
12
+ import styles from './index.module.css';
13
+
14
+ 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, }) => {
15
+ const handleDownload = (event) => {
16
+ if (onDownload) {
17
+ event.preventDefault();
18
+ onDownload(id);
19
+ }
20
+ };
21
+ const handleDelete = (event) => {
22
+ if (onDelete)
23
+ onDelete(id, event);
24
+ };
25
+ const handleRestore = () => {
26
+ if (onRestore)
27
+ onRestore(id);
28
+ };
29
+ const renderIcon = () => {
30
+ if (showRestore) {
31
+ return React.createElement(ClockMIcon, { className: styles.restoreIcon });
32
+ }
33
+ switch (uploadStatus) {
34
+ case 'ERROR':
35
+ return React.createElement(AlertCircleMIcon, { className: styles.errorIcon });
36
+ case 'SUCCESS':
37
+ return React.createElement(CheckmarkCircleMIcon, { className: styles.successIcon });
38
+ case 'LOADING':
39
+ case 'UPLOADING':
40
+ return (React.createElement("div", { className: styles.spinnerWrapper },
41
+ React.createElement(Spinner, { visible: true, className: styles.spinner })));
42
+ default: {
43
+ return React.createElement(Icon, { className: styles.icon });
44
+ }
45
+ }
46
+ };
47
+ const renderInfoSection = () => {
48
+ const shouldShownError = uploadStatus === 'ERROR' || !!error;
49
+ const errorContent = uploadStatus === 'ERROR' && !error ? 'Не удалось загрузить файл' : error;
50
+ return (React.createElement("div", { className: styles.infoSection },
51
+ React.createElement("div", { className: cn(styles.name, { [styles.rowLimit]: !multiline }) }, name),
52
+ shouldShownError && (React.createElement("div", { className: styles.errorWrapper, role: 'alert' }, errorContent))));
53
+ };
54
+ const showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
55
+ const showDownload = Boolean(downloadLink) && !showRestore;
56
+ return (React.createElement("div", { className: cn(className, styles.component, uploadStatus && styles[uploadStatus.toLocaleLowerCase()]), "data-test-id": dataTestId },
57
+ React.createElement("div", { className: styles.info },
58
+ renderIcon(),
59
+ renderInfoSection(),
60
+ children,
61
+ uploadStatus === 'UPLOADING' && (React.createElement("span", { className: styles.uploadPercent }, `${Math.round(uploadPercent)}%`)),
62
+ showMeta && (React.createElement("div", { className: styles.meta },
63
+ uploadDate && React.createElement("span", { key: uploadDate }, uploadDate),
64
+ size && (React.createElement("span", { key: size, className: styles.size }, humanFileSize(size)))))),
65
+ showRestore && (React.createElement(Link, { pseudo: true, className: styles.restore, onClick: handleRestore }, "\u0412\u043E\u0441\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C")),
66
+ 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 })),
67
+ 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' }))));
68
+ };
69
+
70
+ export { FileUploadItem };
package/moderncssm/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./Component";
package/moderncssm/index.js ADDED
@@ -0,0 +1 @@
1
+ export { FileUploadItem } from './Component.js';
package/moderncssm/index.module.css ADDED
@@ -0,0 +1,129 @@
1
+ /* */
2
+
3
+ .component {
4
+ font-size: 13px;
5
+ line-height: 16px;
6
+ font-weight: 400;
7
+
8
+ display: flex;
9
+ align-items: flex-start;
10
+ width: 100%;
11
+ padding: var(--gap-8);
12
+ color: var(--color-light-text-secondary);
13
+ box-shadow: 0 -1px 0 0 var(--color-light-neutral-300) inset;
14
+ box-sizing: border-box
15
+ }
16
+
17
+ .component svg {
18
+ display: block;
19
+ }
20
+
21
+ .component:last-child {
22
+ box-shadow: none;
23
+ }
24
+
25
+ .infoSection {
26
+ display: flex;
27
+ flex-direction: column;
28
+ flex: 1;
29
+ margin-top: var(--gap-4);
30
+ margin-left: var(--gap-12);
31
+ min-width: 40%;
32
+ }
33
+
34
+ .info {
35
+ display: flex;
36
+ flex-wrap: wrap;
37
+ flex: 1;
38
+ overflow: hidden;
39
+ }
40
+
41
+ .icon {
42
+ display: block;
43
+ flex-shrink: 0;
44
+ color: var(--color-light-neutral-translucent-1300);
45
+ }
46
+
47
+ .errorIcon {
48
+ flex-shrink: 0;
49
+ color: var(--color-light-status-negative);
50
+ }
51
+
52
+ .successIcon {
53
+ flex-shrink: 0;
54
+ color: var(--color-light-status-positive);
55
+ }
56
+
57
+ .name {
58
+ color: var(--color-light-text-primary)
59
+ }
60
+
61
+ .name a {
62
+ display: block;
63
+ margin-bottom: 1px;
64
+ }
65
+
66
+ .name.rowLimit {
67
+ white-space: nowrap;
68
+ overflow: hidden;
69
+ text-overflow: ellipsis;
70
+ }
71
+
72
+ .meta {
73
+ display: flex;
74
+ white-space: nowrap;
75
+ margin-right: var(--gap-4);
76
+ margin-left: 36px;
77
+ padding: var(--gap-4) var(--gap-0)
78
+ }
79
+
80
+ .meta > * {
81
+ margin-right: var(--gap-12)
82
+ }
83
+
84
+ .meta > *:last-child {
85
+ margin-right: var(--gap-0);
86
+ }
87
+
88
+ .size {
89
+ text-align: right;
90
+ }
91
+
92
+ .delete,
93
+ .download {
94
+ height: 24px;
95
+ width: 24px;
96
+ margin-left: var(--gap-8);
97
+ }
98
+
99
+ .errorWrapper {
100
+ margin-top: var(--gap-4);
101
+ color: var(--color-light-text-negative);
102
+ }
103
+
104
+ .restore {
105
+ font-size: 14px;
106
+ line-height: 20px;
107
+ font-weight: 400;
108
+
109
+ margin-left: var(--gap-12);
110
+ margin-top: var(--gap-2);
111
+ }
112
+
113
+ .spinnerWrapper {
114
+ display: flex;
115
+ justify-content: center;
116
+ align-items: center;
117
+ width: 24px;
118
+ height: 24px;
119
+ }
120
+
121
+ .spinner {
122
+ width: 20px;
123
+ height: 20px;
124
+ }
125
+
126
+ .uploadPercent {
127
+ margin-top: var(--gap-4);
128
+ margin-left: var(--gap-24);
129
+ }
package/moderncssm/utils.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ declare function humanFileSize(size: string | number): string;
3
+ declare const getExtension: (filename: string) => string | undefined;
4
+ declare function fileIcon(filename: string): import("react").FC<import("react").SVGProps<SVGSVGElement>>;
5
+ export { humanFileSize, getExtension, fileIcon };
package/moderncssm/utils.js ADDED
@@ -0,0 +1,41 @@
1
+ import { DocumentDocMIcon } from '@alfalab/icons-glyph/DocumentDocMIcon';
2
+ import { DocumentImageMIcon } from '@alfalab/icons-glyph/DocumentImageMIcon';
3
+ import { DocumentPdfMIcon } from '@alfalab/icons-glyph/DocumentPdfMIcon';
4
+ import { DocumentTxtMIcon } from '@alfalab/icons-glyph/DocumentTxtMIcon';
5
+ import { DocumentUnknownMIcon } from '@alfalab/icons-glyph/DocumentUnknownMIcon';
6
+
7
+ function humanFileSize(size) {
8
+ const units = ['Б', 'КБ', 'МБ', 'ГБ'];
9
+ let humanSize = Number(size);
10
+ let factor = 0;
11
+ while (humanSize >= 1024 && factor < units.length - 1) {
12
+ humanSize /= 1024;
13
+ factor += 1;
14
+ }
15
+ humanSize = humanSize.toFixed(2);
16
+ return `${Number(humanSize)} ${units[factor]}`;
17
+ }
18
+ const getExtension = (filename) => filename.toLowerCase().split('.').pop();
19
+ function fileIcon(filename) {
20
+ const extension = getExtension(filename);
21
+ switch (extension) {
22
+ case 'png':
23
+ case 'jpg':
24
+ case 'jpeg':
25
+ case 'svg':
26
+ case 'tif':
27
+ case 'tiff':
28
+ return DocumentImageMIcon;
29
+ case 'doc':
30
+ case 'docx':
31
+ return DocumentDocMIcon;
32
+ case 'pdf':
33
+ return DocumentPdfMIcon;
34
+ case 'txt':
35
+ return DocumentTxtMIcon;
36
+ default:
37
+ return DocumentUnknownMIcon;
38
+ }
39
+ }
40
+
41
+ export { fileIcon, getExtension, humanFileSize };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-file-upload-item",
3
- "version": "5.7.1",
3
+ "version": "5.9.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -14,13 +14,13 @@
14
14
  "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
15
15
  },
16
16
  "dependencies": {
17
- "@alfalab/core-components-icon-button": "^6.7.5",
18
- "@alfalab/core-components-link": "^5.2.3",
19
- "@alfalab/core-components-spinner": "^3.4.0",
17
+ "@alfalab/core-components-icon-button": "^6.9.0",
18
+ "@alfalab/core-components-link": "^5.3.1",
19
+ "@alfalab/core-components-spinner": "^3.5.0",
20
20
  "@alfalab/icons-glyph": "^2.139.0",
21
21
  "classnames": "^2.3.1",
22
22
  "tslib": "^2.4.0"
23
23
  },
24
- "themesVersion": "13.0.2",
25
- "varsVersion": "9.11.1"
24
+ "themesVersion": "13.2.0",
25
+ "varsVersion": "9.13.0"
26
26
  }
package/src/index.module.css CHANGED
@@ -1,4 +1,4 @@
1
- @import '@alfalab/core-components-themes/src/default.css';
1
+ @import '@alfalab/core-components-vars/src/index.css';
2
2
 
3
3
  .component {
4
4
  @mixin paragraph_secondary_large;
@@ -72,13 +72,13 @@
72
72
  white-space: nowrap;
73
73
  margin-right: var(--gap-4);
74
74
  margin-left: 36px;
75
- padding: var(--gap-4) 0;
75
+ padding: var(--gap-4) var(--gap-0);
76
76
 
77
77
  & > * {
78
78
  margin-right: var(--gap-12);
79
79
 
80
80
  &:last-child {
81
- margin-right: 0;
81
+ margin-right: var(--gap-0);
82
82
  }
83
83
  }
84
84
  }