@alfalab/core-components-file-upload-item 5.1.24 → 5.2.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 (12) hide show
  1. package/Component.js +1 -1
  2. package/esm/Component.js +1 -1
  3. package/esm/index.css +22 -22
  4. package/index.css +22 -22
  5. package/modern/Component.js +1 -1
  6. package/modern/index.css +22 -22
  7. package/package.json +4 -4
  8. package/src/Component.tsx +261 -0
  9. package/src/index.module.css +121 -0
  10. package/src/index.ts +1 -0
  11. package/src/utils.ts +46 -0
  12. package/send-stats.js +0 -82
package/Component.js CHANGED
@@ -24,7 +24,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
24
24
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
25
25
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
26
26
 
27
- var styles = {"component":"file-upload-item__component_19mgo","infoSection":"file-upload-item__infoSection_19mgo","info":"file-upload-item__info_19mgo","icon":"file-upload-item__icon_19mgo","errorIcon":"file-upload-item__errorIcon_19mgo","successIcon":"file-upload-item__successIcon_19mgo","name":"file-upload-item__name_19mgo","meta":"file-upload-item__meta_19mgo","size":"file-upload-item__size_19mgo","delete":"file-upload-item__delete_19mgo","download":"file-upload-item__download_19mgo","errorWrapper":"file-upload-item__errorWrapper_19mgo","restore":"file-upload-item__restore_19mgo","spinnerWrapper":"file-upload-item__spinnerWrapper_19mgo","spinner":"file-upload-item__spinner_19mgo","uploadPercent":"file-upload-item__uploadPercent_19mgo"};
27
+ var styles = {"component":"file-upload-item__component_crqrl","infoSection":"file-upload-item__infoSection_crqrl","info":"file-upload-item__info_crqrl","icon":"file-upload-item__icon_crqrl","errorIcon":"file-upload-item__errorIcon_crqrl","successIcon":"file-upload-item__successIcon_crqrl","name":"file-upload-item__name_crqrl","meta":"file-upload-item__meta_crqrl","size":"file-upload-item__size_crqrl","delete":"file-upload-item__delete_crqrl","download":"file-upload-item__download_crqrl","errorWrapper":"file-upload-item__errorWrapper_crqrl","restore":"file-upload-item__restore_crqrl","spinnerWrapper":"file-upload-item__spinnerWrapper_crqrl","spinner":"file-upload-item__spinner_crqrl","uploadPercent":"file-upload-item__uploadPercent_crqrl"};
28
28
  require('./index.css')
29
29
 
30
30
  var FileUploadItem = function (_a) {
package/esm/Component.js CHANGED
@@ -15,7 +15,7 @@ import '@alfalab/icons-glyph/DocumentPdfMIcon';
15
15
  import '@alfalab/icons-glyph/DocumentTxtMIcon';
16
16
  import '@alfalab/icons-glyph/DocumentUnknownMIcon';
17
17
 
18
- var styles = {"component":"file-upload-item__component_19mgo","infoSection":"file-upload-item__infoSection_19mgo","info":"file-upload-item__info_19mgo","icon":"file-upload-item__icon_19mgo","errorIcon":"file-upload-item__errorIcon_19mgo","successIcon":"file-upload-item__successIcon_19mgo","name":"file-upload-item__name_19mgo","meta":"file-upload-item__meta_19mgo","size":"file-upload-item__size_19mgo","delete":"file-upload-item__delete_19mgo","download":"file-upload-item__download_19mgo","errorWrapper":"file-upload-item__errorWrapper_19mgo","restore":"file-upload-item__restore_19mgo","spinnerWrapper":"file-upload-item__spinnerWrapper_19mgo","spinner":"file-upload-item__spinner_19mgo","uploadPercent":"file-upload-item__uploadPercent_19mgo"};
18
+ var styles = {"component":"file-upload-item__component_crqrl","infoSection":"file-upload-item__infoSection_crqrl","info":"file-upload-item__info_crqrl","icon":"file-upload-item__icon_crqrl","errorIcon":"file-upload-item__errorIcon_crqrl","successIcon":"file-upload-item__successIcon_crqrl","name":"file-upload-item__name_crqrl","meta":"file-upload-item__meta_crqrl","size":"file-upload-item__size_crqrl","delete":"file-upload-item__delete_crqrl","download":"file-upload-item__download_crqrl","errorWrapper":"file-upload-item__errorWrapper_crqrl","restore":"file-upload-item__restore_crqrl","spinnerWrapper":"file-upload-item__spinnerWrapper_crqrl","spinner":"file-upload-item__spinner_crqrl","uploadPercent":"file-upload-item__uploadPercent_crqrl"};
19
19
  require('./index.css')
20
20
 
21
21
  var FileUploadItem = function (_a) {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1exfb */
1
+ /* hash: 1v8nf */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-primary: #dcdcdd;
@@ -25,7 +25,7 @@
25
25
  --gap-xl: 24px;
26
26
  } :root {
27
27
  } :root {
28
- } .file-upload-item__component_19mgo {
28
+ } .file-upload-item__component_crqrl {
29
29
  font-size: 13px;
30
30
  line-height: 16px;
31
31
  font-weight: 400;
@@ -36,78 +36,78 @@
36
36
  color: var(--color-light-text-secondary);
37
37
  box-shadow: 0 -1px 0 0 var(--color-light-border-primary) inset;
38
38
  box-sizing: border-box
39
- } .file-upload-item__component_19mgo svg {
39
+ } .file-upload-item__component_crqrl svg {
40
40
  display: block;
41
- } .file-upload-item__infoSection_19mgo {
41
+ } .file-upload-item__infoSection_crqrl {
42
42
  display: flex;
43
43
  flex-direction: column;
44
44
  flex: 1;
45
45
  margin-top: var(--gap-2xs);
46
46
  margin-left: var(--gap-s);
47
47
  min-width: 40%;
48
- } .file-upload-item__info_19mgo {
48
+ } .file-upload-item__info_crqrl {
49
49
  display: flex;
50
50
  flex-wrap: wrap;
51
51
  flex: 1;
52
52
  overflow: hidden;
53
- } .file-upload-item__icon_19mgo {
53
+ } .file-upload-item__icon_crqrl {
54
54
  display: block;
55
55
  flex-shrink: 0;
56
56
  color: var(--color-light-text-primary);
57
- } .file-upload-item__errorIcon_19mgo {
57
+ } .file-upload-item__errorIcon_crqrl {
58
58
  flex-shrink: 0;
59
59
  color: var(--color-light-graphic-negative);
60
- } .file-upload-item__successIcon_19mgo {
60
+ } .file-upload-item__successIcon_crqrl {
61
61
  flex-shrink: 0;
62
62
  color: var(--color-light-graphic-positive);
63
- } .file-upload-item__name_19mgo {
63
+ } .file-upload-item__name_crqrl {
64
64
  white-space: nowrap;
65
65
  overflow: hidden;
66
66
  text-overflow: ellipsis;
67
67
  color: var(--color-light-text-primary)
68
- } .file-upload-item__name_19mgo a {
68
+ } .file-upload-item__name_crqrl a {
69
69
  display: block;
70
70
  margin-bottom: 1px;
71
- } .file-upload-item__meta_19mgo {
71
+ } .file-upload-item__meta_crqrl {
72
72
  display: flex;
73
73
  white-space: nowrap;
74
74
  margin-right: var(--gap-2xs);
75
75
  margin-left: var(--gap-xl);
76
76
  padding: var(--gap-2xs) 0
77
- } .file-upload-item__meta_19mgo > * {
77
+ } .file-upload-item__meta_crqrl > * {
78
78
  margin-right: var(--gap-s)
79
- } .file-upload-item__meta_19mgo > *:last-child {
79
+ } .file-upload-item__meta_crqrl > *:last-child {
80
80
  margin-right: 0;
81
- } .file-upload-item__size_19mgo {
81
+ } .file-upload-item__size_crqrl {
82
82
  text-align: right;
83
- } .file-upload-item__delete_19mgo,
84
- .file-upload-item__download_19mgo {
83
+ } .file-upload-item__delete_crqrl,
84
+ .file-upload-item__download_crqrl {
85
85
  height: 24px;
86
86
  width: 24px;
87
87
  margin-left: var(--gap-xs);
88
- } .file-upload-item__errorWrapper_19mgo {
88
+ } .file-upload-item__errorWrapper_crqrl {
89
89
  margin-top: var(--gap-s);
90
90
  color: var(--color-light-text-accent)
91
- } @media (--small-only) { .file-upload-item__errorWrapper_19mgo {
91
+ } @media (--small-only) { .file-upload-item__errorWrapper_crqrl {
92
92
  flex: 1 0 100%;
93
93
  margin-top: var(--gap-3xs)
94
94
  }
95
- } .file-upload-item__restore_19mgo {
95
+ } .file-upload-item__restore_crqrl {
96
96
  font-size: 14px;
97
97
  line-height: 20px;
98
98
  font-weight: 400;
99
99
 
100
100
  margin-left: var(--gap-s);
101
- } .file-upload-item__spinnerWrapper_19mgo {
101
+ } .file-upload-item__spinnerWrapper_crqrl {
102
102
  display: flex;
103
103
  justify-content: center;
104
104
  align-items: center;
105
105
  width: 24px;
106
106
  height: 24px;
107
- } .file-upload-item__spinner_19mgo {
107
+ } .file-upload-item__spinner_crqrl {
108
108
  width: 20px;
109
109
  height: 20px;
110
- } .file-upload-item__uploadPercent_19mgo {
110
+ } .file-upload-item__uploadPercent_crqrl {
111
111
  margin-top: var(--gap-2xs);
112
112
  margin-left: var(--gap-xl);
113
113
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1exfb */
1
+ /* hash: 1v8nf */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-primary: #dcdcdd;
@@ -25,7 +25,7 @@
25
25
  --gap-xl: 24px;
26
26
  } :root {
27
27
  } :root {
28
- } .file-upload-item__component_19mgo {
28
+ } .file-upload-item__component_crqrl {
29
29
  font-size: 13px;
30
30
  line-height: 16px;
31
31
  font-weight: 400;
@@ -36,78 +36,78 @@
36
36
  color: var(--color-light-text-secondary);
37
37
  box-shadow: 0 -1px 0 0 var(--color-light-border-primary) inset;
38
38
  box-sizing: border-box
39
- } .file-upload-item__component_19mgo svg {
39
+ } .file-upload-item__component_crqrl svg {
40
40
  display: block;
41
- } .file-upload-item__infoSection_19mgo {
41
+ } .file-upload-item__infoSection_crqrl {
42
42
  display: flex;
43
43
  flex-direction: column;
44
44
  flex: 1;
45
45
  margin-top: var(--gap-2xs);
46
46
  margin-left: var(--gap-s);
47
47
  min-width: 40%;
48
- } .file-upload-item__info_19mgo {
48
+ } .file-upload-item__info_crqrl {
49
49
  display: flex;
50
50
  flex-wrap: wrap;
51
51
  flex: 1;
52
52
  overflow: hidden;
53
- } .file-upload-item__icon_19mgo {
53
+ } .file-upload-item__icon_crqrl {
54
54
  display: block;
55
55
  flex-shrink: 0;
56
56
  color: var(--color-light-text-primary);
57
- } .file-upload-item__errorIcon_19mgo {
57
+ } .file-upload-item__errorIcon_crqrl {
58
58
  flex-shrink: 0;
59
59
  color: var(--color-light-graphic-negative);
60
- } .file-upload-item__successIcon_19mgo {
60
+ } .file-upload-item__successIcon_crqrl {
61
61
  flex-shrink: 0;
62
62
  color: var(--color-light-graphic-positive);
63
- } .file-upload-item__name_19mgo {
63
+ } .file-upload-item__name_crqrl {
64
64
  white-space: nowrap;
65
65
  overflow: hidden;
66
66
  text-overflow: ellipsis;
67
67
  color: var(--color-light-text-primary)
68
- } .file-upload-item__name_19mgo a {
68
+ } .file-upload-item__name_crqrl a {
69
69
  display: block;
70
70
  margin-bottom: 1px;
71
- } .file-upload-item__meta_19mgo {
71
+ } .file-upload-item__meta_crqrl {
72
72
  display: flex;
73
73
  white-space: nowrap;
74
74
  margin-right: var(--gap-2xs);
75
75
  margin-left: var(--gap-xl);
76
76
  padding: var(--gap-2xs) 0
77
- } .file-upload-item__meta_19mgo > * {
77
+ } .file-upload-item__meta_crqrl > * {
78
78
  margin-right: var(--gap-s)
79
- } .file-upload-item__meta_19mgo > *:last-child {
79
+ } .file-upload-item__meta_crqrl > *:last-child {
80
80
  margin-right: 0;
81
- } .file-upload-item__size_19mgo {
81
+ } .file-upload-item__size_crqrl {
82
82
  text-align: right;
83
- } .file-upload-item__delete_19mgo,
84
- .file-upload-item__download_19mgo {
83
+ } .file-upload-item__delete_crqrl,
84
+ .file-upload-item__download_crqrl {
85
85
  height: 24px;
86
86
  width: 24px;
87
87
  margin-left: var(--gap-xs);
88
- } .file-upload-item__errorWrapper_19mgo {
88
+ } .file-upload-item__errorWrapper_crqrl {
89
89
  margin-top: var(--gap-s);
90
90
  color: var(--color-light-text-accent)
91
- } @media (--small-only) { .file-upload-item__errorWrapper_19mgo {
91
+ } @media (--small-only) { .file-upload-item__errorWrapper_crqrl {
92
92
  flex: 1 0 100%;
93
93
  margin-top: var(--gap-3xs)
94
94
  }
95
- } .file-upload-item__restore_19mgo {
95
+ } .file-upload-item__restore_crqrl {
96
96
  font-size: 14px;
97
97
  line-height: 20px;
98
98
  font-weight: 400;
99
99
 
100
100
  margin-left: var(--gap-s);
101
- } .file-upload-item__spinnerWrapper_19mgo {
101
+ } .file-upload-item__spinnerWrapper_crqrl {
102
102
  display: flex;
103
103
  justify-content: center;
104
104
  align-items: center;
105
105
  width: 24px;
106
106
  height: 24px;
107
- } .file-upload-item__spinner_19mgo {
107
+ } .file-upload-item__spinner_crqrl {
108
108
  width: 20px;
109
109
  height: 20px;
110
- } .file-upload-item__uploadPercent_19mgo {
110
+ } .file-upload-item__uploadPercent_crqrl {
111
111
  margin-top: var(--gap-2xs);
112
112
  margin-left: var(--gap-xl);
113
113
  }
package/modern/Component.js CHANGED
@@ -15,7 +15,7 @@ import '@alfalab/icons-glyph/DocumentPdfMIcon';
15
15
  import '@alfalab/icons-glyph/DocumentTxtMIcon';
16
16
  import '@alfalab/icons-glyph/DocumentUnknownMIcon';
17
17
 
18
- const styles = {"component":"file-upload-item__component_19mgo","infoSection":"file-upload-item__infoSection_19mgo","info":"file-upload-item__info_19mgo","icon":"file-upload-item__icon_19mgo","errorIcon":"file-upload-item__errorIcon_19mgo","successIcon":"file-upload-item__successIcon_19mgo","name":"file-upload-item__name_19mgo","meta":"file-upload-item__meta_19mgo","size":"file-upload-item__size_19mgo","delete":"file-upload-item__delete_19mgo","download":"file-upload-item__download_19mgo","errorWrapper":"file-upload-item__errorWrapper_19mgo","restore":"file-upload-item__restore_19mgo","spinnerWrapper":"file-upload-item__spinnerWrapper_19mgo","spinner":"file-upload-item__spinner_19mgo","uploadPercent":"file-upload-item__uploadPercent_19mgo"};
18
+ const styles = {"component":"file-upload-item__component_crqrl","infoSection":"file-upload-item__infoSection_crqrl","info":"file-upload-item__info_crqrl","icon":"file-upload-item__icon_crqrl","errorIcon":"file-upload-item__errorIcon_crqrl","successIcon":"file-upload-item__successIcon_crqrl","name":"file-upload-item__name_crqrl","meta":"file-upload-item__meta_crqrl","size":"file-upload-item__size_crqrl","delete":"file-upload-item__delete_crqrl","download":"file-upload-item__download_crqrl","errorWrapper":"file-upload-item__errorWrapper_crqrl","restore":"file-upload-item__restore_crqrl","spinnerWrapper":"file-upload-item__spinnerWrapper_crqrl","spinner":"file-upload-item__spinner_crqrl","uploadPercent":"file-upload-item__uploadPercent_crqrl"};
19
19
  require('./index.css')
20
20
 
21
21
  const FileUploadItem = ({ className, children, id = '0', name = '', size, icon: Icon = fileIcon(name), uploadDate, downloadLink, download, uploadStatus, uploadPercent = 0, error, showDelete, showRestore, onDelete, onDownload, onRestore, disableButtons, dataTestId, }) => {
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1exfb */
1
+ /* hash: 1v8nf */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-primary: #dcdcdd;
@@ -25,7 +25,7 @@
25
25
  --gap-xl: 24px;
26
26
  } :root {
27
27
  } :root {
28
- } .file-upload-item__component_19mgo {
28
+ } .file-upload-item__component_crqrl {
29
29
  font-size: 13px;
30
30
  line-height: 16px;
31
31
  font-weight: 400;
@@ -36,78 +36,78 @@
36
36
  color: var(--color-light-text-secondary);
37
37
  box-shadow: 0 -1px 0 0 var(--color-light-border-primary) inset;
38
38
  box-sizing: border-box
39
- } .file-upload-item__component_19mgo svg {
39
+ } .file-upload-item__component_crqrl svg {
40
40
  display: block;
41
- } .file-upload-item__infoSection_19mgo {
41
+ } .file-upload-item__infoSection_crqrl {
42
42
  display: flex;
43
43
  flex-direction: column;
44
44
  flex: 1;
45
45
  margin-top: var(--gap-2xs);
46
46
  margin-left: var(--gap-s);
47
47
  min-width: 40%;
48
- } .file-upload-item__info_19mgo {
48
+ } .file-upload-item__info_crqrl {
49
49
  display: flex;
50
50
  flex-wrap: wrap;
51
51
  flex: 1;
52
52
  overflow: hidden;
53
- } .file-upload-item__icon_19mgo {
53
+ } .file-upload-item__icon_crqrl {
54
54
  display: block;
55
55
  flex-shrink: 0;
56
56
  color: var(--color-light-text-primary);
57
- } .file-upload-item__errorIcon_19mgo {
57
+ } .file-upload-item__errorIcon_crqrl {
58
58
  flex-shrink: 0;
59
59
  color: var(--color-light-graphic-negative);
60
- } .file-upload-item__successIcon_19mgo {
60
+ } .file-upload-item__successIcon_crqrl {
61
61
  flex-shrink: 0;
62
62
  color: var(--color-light-graphic-positive);
63
- } .file-upload-item__name_19mgo {
63
+ } .file-upload-item__name_crqrl {
64
64
  white-space: nowrap;
65
65
  overflow: hidden;
66
66
  text-overflow: ellipsis;
67
67
  color: var(--color-light-text-primary)
68
- } .file-upload-item__name_19mgo a {
68
+ } .file-upload-item__name_crqrl a {
69
69
  display: block;
70
70
  margin-bottom: 1px;
71
- } .file-upload-item__meta_19mgo {
71
+ } .file-upload-item__meta_crqrl {
72
72
  display: flex;
73
73
  white-space: nowrap;
74
74
  margin-right: var(--gap-2xs);
75
75
  margin-left: var(--gap-xl);
76
76
  padding: var(--gap-2xs) 0
77
- } .file-upload-item__meta_19mgo > * {
77
+ } .file-upload-item__meta_crqrl > * {
78
78
  margin-right: var(--gap-s)
79
- } .file-upload-item__meta_19mgo > *:last-child {
79
+ } .file-upload-item__meta_crqrl > *:last-child {
80
80
  margin-right: 0;
81
- } .file-upload-item__size_19mgo {
81
+ } .file-upload-item__size_crqrl {
82
82
  text-align: right;
83
- } .file-upload-item__delete_19mgo,
84
- .file-upload-item__download_19mgo {
83
+ } .file-upload-item__delete_crqrl,
84
+ .file-upload-item__download_crqrl {
85
85
  height: 24px;
86
86
  width: 24px;
87
87
  margin-left: var(--gap-xs);
88
- } .file-upload-item__errorWrapper_19mgo {
88
+ } .file-upload-item__errorWrapper_crqrl {
89
89
  margin-top: var(--gap-s);
90
90
  color: var(--color-light-text-accent)
91
- } @media (--small-only) { .file-upload-item__errorWrapper_19mgo {
91
+ } @media (--small-only) { .file-upload-item__errorWrapper_crqrl {
92
92
  flex: 1 0 100%;
93
93
  margin-top: var(--gap-3xs)
94
94
  }
95
- } .file-upload-item__restore_19mgo {
95
+ } .file-upload-item__restore_crqrl {
96
96
  font-size: 14px;
97
97
  line-height: 20px;
98
98
  font-weight: 400;
99
99
 
100
100
  margin-left: var(--gap-s);
101
- } .file-upload-item__spinnerWrapper_19mgo {
101
+ } .file-upload-item__spinnerWrapper_crqrl {
102
102
  display: flex;
103
103
  justify-content: center;
104
104
  align-items: center;
105
105
  width: 24px;
106
106
  height: 24px;
107
- } .file-upload-item__spinner_19mgo {
107
+ } .file-upload-item__spinner_crqrl {
108
108
  width: 20px;
109
109
  height: 20px;
110
- } .file-upload-item__uploadPercent_19mgo {
110
+ } .file-upload-item__uploadPercent_crqrl {
111
111
  margin-top: var(--gap-2xs);
112
112
  margin-left: var(--gap-xl);
113
113
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-file-upload-item",
3
- "version": "5.1.24",
3
+ "version": "5.2.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -14,9 +14,9 @@
14
14
  "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
15
15
  },
16
16
  "dependencies": {
17
- "@alfalab/core-components-icon-button": "^6.1.2",
18
- "@alfalab/core-components-link": "^5.0.5",
19
- "@alfalab/core-components-spinner": "^3.0.6",
17
+ "@alfalab/core-components-icon-button": "^6.2.0",
18
+ "@alfalab/core-components-link": "^5.1.0",
19
+ "@alfalab/core-components-spinner": "^3.1.0",
20
20
  "@alfalab/icons-glyph": "^2.108.0",
21
21
  "tslib": "^2.4.0"
22
22
  }
package/src/Component.tsx ADDED
@@ -0,0 +1,261 @@
1
+ import React, { ElementType, MouseEvent, ReactNode } from 'react';
2
+ import cn from 'classnames';
3
+
4
+ import { IconButton } from '@alfalab/core-components-icon-button';
5
+ import { Link } from '@alfalab/core-components-link';
6
+ import { Spinner } from '@alfalab/core-components-spinner';
7
+ import { AlertCircleMIcon } from '@alfalab/icons-glyph/AlertCircleMIcon';
8
+ import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
9
+ import { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';
10
+ import { CrossSIcon } from '@alfalab/icons-glyph/CrossSIcon';
11
+ import { PointerDownSIcon } from '@alfalab/icons-glyph/PointerDownSIcon';
12
+
13
+ import { fileIcon, humanFileSize } from './utils';
14
+
15
+ import styles from './index.module.css';
16
+
17
+ export type FileStatuses = 'ERROR' | 'SUCCESS' | 'LOADING' | 'UPLOADING';
18
+
19
+ export type FileUploadItemProps = {
20
+ /**
21
+ * Дополнительный класс
22
+ */
23
+ className?: string;
24
+
25
+ /**
26
+ * Идентификатор элемента
27
+ */
28
+ id?: string;
29
+
30
+ /**
31
+ * Имя файла с расширением
32
+ */
33
+ name?: string;
34
+
35
+ /**
36
+ * Размер файла
37
+ */
38
+ size?: string | number;
39
+
40
+ /**
41
+ * Дата загрузки файла
42
+ */
43
+ uploadDate?: string;
44
+
45
+ /**
46
+ * Ссылка на файл. Если прокидывается этот параметр, то появляется кнопка скачивания
47
+ */
48
+ downloadLink?: string;
49
+
50
+ /**
51
+ * Рекомендует браузеру скачивать контент по ссылке.
52
+ * В проп может быть передано рекомендуемое название скачиваемого файла.
53
+ */
54
+ download?: string | true;
55
+
56
+ /**
57
+ * Отображение кнопки удаления
58
+ */
59
+ showDelete?: boolean;
60
+
61
+ /**
62
+ * Отображение кнопки восстановления
63
+ */
64
+ showRestore?: boolean;
65
+
66
+ /**
67
+ * Процент загрузки файла
68
+ */
69
+ uploadPercent?: number;
70
+
71
+ /**
72
+ * Статус загрузки файла
73
+ */
74
+ uploadStatus?: FileStatuses;
75
+
76
+ /**
77
+ * Сообщение об ошибке
78
+ */
79
+ error?: ReactNode;
80
+
81
+ /**
82
+ * Дочерние элементы
83
+ */
84
+ children?: React.ReactNode;
85
+
86
+ /**
87
+ * Компонент кастомной иконки
88
+ */
89
+ icon?: ElementType<{ className?: string }>;
90
+
91
+ /**
92
+ * Обработчик загрузки файла
93
+ */
94
+ onDownload?: (id: string) => void;
95
+
96
+ /**
97
+ * Обработчик удаления файла
98
+ */
99
+ onDelete?: (id: string) => void;
100
+
101
+ /**
102
+ * Обработчик восстановления файла
103
+ */
104
+ onRestore?: (id: string) => void;
105
+
106
+ /**
107
+ * Управление активностью кнопок
108
+ */
109
+ disableButtons?: boolean;
110
+
111
+ /**
112
+ * Идентификатор для систем автоматизированного тестирования
113
+ */
114
+ dataTestId?: string;
115
+ };
116
+
117
+ export const FileUploadItem: React.FC<FileUploadItemProps> = ({
118
+ className,
119
+ children,
120
+ id = '0',
121
+ name = '',
122
+ size,
123
+ icon: Icon = fileIcon(name),
124
+ uploadDate,
125
+ downloadLink,
126
+ download,
127
+ uploadStatus,
128
+ uploadPercent = 0,
129
+ error,
130
+ showDelete,
131
+ showRestore,
132
+ onDelete,
133
+ onDownload,
134
+ onRestore,
135
+ disableButtons,
136
+ dataTestId,
137
+ }) => {
138
+ const handleDownload = (event: MouseEvent<HTMLElement>) => {
139
+ if (onDownload) {
140
+ event.preventDefault();
141
+ onDownload(id);
142
+ }
143
+ };
144
+
145
+ const handleDelete = () => {
146
+ if (onDelete) onDelete(id);
147
+ };
148
+
149
+ const handleRestore = () => {
150
+ if (onRestore) onRestore(id);
151
+ };
152
+
153
+ const renderIcon = () => {
154
+ if (showRestore) {
155
+ return <ClockMIcon className={styles.restoreIcon} />;
156
+ }
157
+
158
+ switch (uploadStatus) {
159
+ case 'ERROR':
160
+ return <AlertCircleMIcon className={styles.errorIcon} />;
161
+ case 'SUCCESS':
162
+ return <CheckmarkCircleMIcon className={styles.successIcon} />;
163
+ case 'LOADING':
164
+ case 'UPLOADING':
165
+ return (
166
+ <div className={styles.spinnerWrapper}>
167
+ <Spinner visible={true} className={styles.spinner} />
168
+ </div>
169
+ );
170
+ default: {
171
+ return <Icon className={styles.icon} />;
172
+ }
173
+ }
174
+ };
175
+
176
+ const renderInfoSection = () => {
177
+ const shouldShownError = uploadStatus === 'ERROR' || !!error;
178
+ const errorContent =
179
+ uploadStatus === 'ERROR' && !error ? 'Не удалось загрузить файл' : error;
180
+
181
+ return (
182
+ <div className={styles.infoSection}>
183
+ <div className={styles.name}>{name}</div>
184
+
185
+ {shouldShownError && (
186
+ <div className={styles.errorWrapper} role='alert'>
187
+ {errorContent}
188
+ </div>
189
+ )}
190
+ </div>
191
+ );
192
+ };
193
+
194
+ const showMeta = !showRestore && (!uploadStatus || uploadStatus === 'SUCCESS');
195
+ const showDownload = Boolean(downloadLink) && !showRestore;
196
+
197
+ return (
198
+ <div
199
+ className={cn(
200
+ className,
201
+ styles.component,
202
+ uploadStatus && styles[uploadStatus.toLocaleLowerCase()],
203
+ )}
204
+ data-test-id={dataTestId}
205
+ >
206
+ <div className={styles.info}>
207
+ {renderIcon()}
208
+
209
+ {renderInfoSection()}
210
+
211
+ {children}
212
+
213
+ {uploadStatus === 'UPLOADING' && (
214
+ <span className={styles.uploadPercent}>{`${Math.round(uploadPercent)}%`}</span>
215
+ )}
216
+
217
+ {showMeta && (
218
+ <div className={styles.meta}>
219
+ {uploadDate && <span key={uploadDate}>{uploadDate}</span>}
220
+
221
+ {size && (
222
+ <span key={size} className={styles.size}>
223
+ {humanFileSize(size)}
224
+ </span>
225
+ )}
226
+ </div>
227
+ )}
228
+ </div>
229
+
230
+ {showRestore && (
231
+ <Link pseudo={true} className={styles.restore} onClick={handleRestore}>
232
+ Восстановить
233
+ </Link>
234
+ )}
235
+
236
+ {showDownload && (
237
+ <IconButton
238
+ size='xxs'
239
+ icon={PointerDownSIcon}
240
+ className={styles.download}
241
+ aria-label='скачать'
242
+ href={downloadLink}
243
+ onClick={handleDownload}
244
+ disabled={disableButtons}
245
+ download={download}
246
+ />
247
+ )}
248
+
249
+ {showDelete && !showRestore && (
250
+ <IconButton
251
+ size='xxs'
252
+ icon={CrossSIcon}
253
+ onClick={handleDelete}
254
+ disabled={disableButtons}
255
+ className={styles.delete}
256
+ aria-label='удалить'
257
+ />
258
+ )}
259
+ </div>
260
+ );
261
+ };
package/src/index.module.css ADDED
@@ -0,0 +1,121 @@
1
+ @import '@alfalab/core-components-themes/src/default.css';
2
+
3
+ .component {
4
+ @mixin paragraph_secondary_large;
5
+
6
+ display: flex;
7
+ width: 100%;
8
+ padding: var(--gap-xs);
9
+ color: var(--color-light-text-secondary);
10
+ box-shadow: 0 -1px 0 0 var(--color-light-border-primary) inset;
11
+ box-sizing: border-box;
12
+
13
+ & svg {
14
+ display: block;
15
+ }
16
+ }
17
+
18
+ .infoSection {
19
+ display: flex;
20
+ flex-direction: column;
21
+ flex: 1;
22
+ margin-top: var(--gap-2xs);
23
+ margin-left: var(--gap-s);
24
+ min-width: 40%;
25
+ }
26
+
27
+ .info {
28
+ display: flex;
29
+ flex-wrap: wrap;
30
+ flex: 1;
31
+ overflow: hidden;
32
+ }
33
+
34
+ .icon {
35
+ display: block;
36
+ flex-shrink: 0;
37
+ color: var(--color-light-text-primary);
38
+ }
39
+
40
+ .errorIcon {
41
+ flex-shrink: 0;
42
+ color: var(--color-light-graphic-negative);
43
+ }
44
+
45
+ .successIcon {
46
+ flex-shrink: 0;
47
+ color: var(--color-light-graphic-positive);
48
+ }
49
+
50
+ .name {
51
+ white-space: nowrap;
52
+ overflow: hidden;
53
+ text-overflow: ellipsis;
54
+ color: var(--color-light-text-primary);
55
+
56
+ & a {
57
+ display: block;
58
+ margin-bottom: 1px;
59
+ }
60
+ }
61
+
62
+ .meta {
63
+ display: flex;
64
+ white-space: nowrap;
65
+ margin-right: var(--gap-2xs);
66
+ margin-left: var(--gap-xl);
67
+ padding: var(--gap-2xs) 0;
68
+
69
+ & > * {
70
+ margin-right: var(--gap-s);
71
+
72
+ &:last-child {
73
+ margin-right: 0;
74
+ }
75
+ }
76
+ }
77
+
78
+ .size {
79
+ text-align: right;
80
+ }
81
+
82
+ .delete,
83
+ .download {
84
+ height: 24px;
85
+ width: 24px;
86
+ margin-left: var(--gap-xs);
87
+ }
88
+
89
+ .errorWrapper {
90
+ margin-top: var(--gap-s);
91
+ color: var(--color-light-text-accent);
92
+
93
+ @media (--small-only) {
94
+ flex: 1 0 100%;
95
+ margin-top: var(--gap-3xs);
96
+ }
97
+ }
98
+
99
+ .restore {
100
+ @mixin paragraph_primary_small;
101
+
102
+ margin-left: var(--gap-s);
103
+ }
104
+
105
+ .spinnerWrapper {
106
+ display: flex;
107
+ justify-content: center;
108
+ align-items: center;
109
+ width: 24px;
110
+ height: 24px;
111
+ }
112
+
113
+ .spinner {
114
+ width: 20px;
115
+ height: 20px;
116
+ }
117
+
118
+ .uploadPercent {
119
+ margin-top: var(--gap-2xs);
120
+ margin-left: var(--gap-xl);
121
+ }
package/src/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './Component';
package/src/utils.ts ADDED
@@ -0,0 +1,46 @@
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
+ export function humanFileSize(size: string | number) {
8
+ const units = ['Б', 'КБ', 'МБ', 'ГБ'];
9
+
10
+ let humanSize: string | number = Number(size);
11
+ let factor = 0;
12
+
13
+ while (humanSize >= 1024 && factor < units.length - 1) {
14
+ humanSize /= 1024;
15
+ factor += 1;
16
+ }
17
+
18
+ humanSize = humanSize.toFixed(2);
19
+
20
+ return `${Number(humanSize)} ${units[factor]}`;
21
+ }
22
+
23
+ export const getExtension = (filename: string) => filename.toLowerCase().split('.').pop();
24
+
25
+ export function fileIcon(filename: string) {
26
+ const extension = getExtension(filename);
27
+
28
+ switch (extension) {
29
+ case 'png':
30
+ case 'jpg':
31
+ case 'jpeg':
32
+ case 'svg':
33
+ case 'tif':
34
+ case 'tiff':
35
+ return DocumentImageMIcon;
36
+ case 'doc':
37
+ case 'docx':
38
+ return DocumentDocMIcon;
39
+ case 'pdf':
40
+ return DocumentPdfMIcon;
41
+ case 'txt':
42
+ return DocumentTxtMIcon;
43
+ default:
44
+ return DocumentUnknownMIcon;
45
+ }
46
+ }
package/send-stats.js DELETED
@@ -1,82 +0,0 @@
1
- const http = require('http');
2
- const fs = require('fs');
3
- const { promisify } = require('util');
4
- const path = require('path');
5
-
6
- const readFile = promisify(fs.readFile);
7
-
8
- async function main() {
9
- const remoteHost = process.env.NIS_HOST || 'digital';
10
- const remotePort = process.env.NIS_PORT || 80;
11
- const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
12
-
13
- try {
14
- const [_, node, os, arch] =
15
- /node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
16
- const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
17
- const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
18
-
19
- let ownPackageJson, packageJson;
20
-
21
- try {
22
- const result = await Promise.all([
23
- readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
24
- readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
25
- ]);
26
-
27
- ownPackageJson = JSON.parse(result[0]);
28
- packageJson = JSON.parse(result[1]);
29
- } catch (err) {
30
- ownPackageJson = '';
31
- packageJson = '';
32
- }
33
-
34
- const data = {
35
- node,
36
- npm,
37
- yarn,
38
- os,
39
- arch,
40
- ownPackageJson: JSON.stringify(ownPackageJson),
41
- packageJson: JSON.stringify(packageJson),
42
- };
43
-
44
- const body = JSON.stringify(data);
45
-
46
- const options = {
47
- host: remoteHost,
48
- port: remotePort,
49
- path: remotePath,
50
- method: 'POST',
51
- headers: {
52
- 'Content-Type': 'application/json',
53
- 'Content-Length': body.length,
54
- },
55
- };
56
-
57
- return new Promise((resolve, reject) => {
58
- const req = http.request(options, (res) => {
59
- res.on('end', () => {
60
- resolve();
61
- });
62
- });
63
-
64
- req.on('error', () => {
65
- reject();
66
- });
67
-
68
- req.write(body);
69
- req.end();
70
- });
71
- } catch (error) {
72
- throw error;
73
- }
74
- }
75
-
76
- main()
77
- .then(() => {
78
- process.exit(0);
79
- })
80
- .catch(() => {
81
- process.exit(0);
82
- });