@alfalab/core-components-file-upload-item 5.1.25 → 5.2.1

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 (11) 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 +5 -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
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_1rhap","infoSection":"file-upload-item__infoSection_1rhap","info":"file-upload-item__info_1rhap","icon":"file-upload-item__icon_1rhap","errorIcon":"file-upload-item__errorIcon_1rhap","successIcon":"file-upload-item__successIcon_1rhap","name":"file-upload-item__name_1rhap","meta":"file-upload-item__meta_1rhap","size":"file-upload-item__size_1rhap","delete":"file-upload-item__delete_1rhap","download":"file-upload-item__download_1rhap","errorWrapper":"file-upload-item__errorWrapper_1rhap","restore":"file-upload-item__restore_1rhap","spinnerWrapper":"file-upload-item__spinnerWrapper_1rhap","spinner":"file-upload-item__spinner_1rhap","uploadPercent":"file-upload-item__uploadPercent_1rhap"};
27
+ var styles = {"component":"file-upload-item__component_1sm6i","infoSection":"file-upload-item__infoSection_1sm6i","info":"file-upload-item__info_1sm6i","icon":"file-upload-item__icon_1sm6i","errorIcon":"file-upload-item__errorIcon_1sm6i","successIcon":"file-upload-item__successIcon_1sm6i","name":"file-upload-item__name_1sm6i","meta":"file-upload-item__meta_1sm6i","size":"file-upload-item__size_1sm6i","delete":"file-upload-item__delete_1sm6i","download":"file-upload-item__download_1sm6i","errorWrapper":"file-upload-item__errorWrapper_1sm6i","restore":"file-upload-item__restore_1sm6i","spinnerWrapper":"file-upload-item__spinnerWrapper_1sm6i","spinner":"file-upload-item__spinner_1sm6i","uploadPercent":"file-upload-item__uploadPercent_1sm6i"};
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_1rhap","infoSection":"file-upload-item__infoSection_1rhap","info":"file-upload-item__info_1rhap","icon":"file-upload-item__icon_1rhap","errorIcon":"file-upload-item__errorIcon_1rhap","successIcon":"file-upload-item__successIcon_1rhap","name":"file-upload-item__name_1rhap","meta":"file-upload-item__meta_1rhap","size":"file-upload-item__size_1rhap","delete":"file-upload-item__delete_1rhap","download":"file-upload-item__download_1rhap","errorWrapper":"file-upload-item__errorWrapper_1rhap","restore":"file-upload-item__restore_1rhap","spinnerWrapper":"file-upload-item__spinnerWrapper_1rhap","spinner":"file-upload-item__spinner_1rhap","uploadPercent":"file-upload-item__uploadPercent_1rhap"};
18
+ var styles = {"component":"file-upload-item__component_1sm6i","infoSection":"file-upload-item__infoSection_1sm6i","info":"file-upload-item__info_1sm6i","icon":"file-upload-item__icon_1sm6i","errorIcon":"file-upload-item__errorIcon_1sm6i","successIcon":"file-upload-item__successIcon_1sm6i","name":"file-upload-item__name_1sm6i","meta":"file-upload-item__meta_1sm6i","size":"file-upload-item__size_1sm6i","delete":"file-upload-item__delete_1sm6i","download":"file-upload-item__download_1sm6i","errorWrapper":"file-upload-item__errorWrapper_1sm6i","restore":"file-upload-item__restore_1sm6i","spinnerWrapper":"file-upload-item__spinnerWrapper_1sm6i","spinner":"file-upload-item__spinner_1sm6i","uploadPercent":"file-upload-item__uploadPercent_1sm6i"};
19
19
  require('./index.css')
20
20
 
21
21
  var FileUploadItem = function (_a) {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: plx1w */
1
+ /* hash: 1ojvl */
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_1rhap {
28
+ } .file-upload-item__component_1sm6i {
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_1rhap svg {
39
+ } .file-upload-item__component_1sm6i svg {
40
40
  display: block;
41
- } .file-upload-item__infoSection_1rhap {
41
+ } .file-upload-item__infoSection_1sm6i {
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_1rhap {
48
+ } .file-upload-item__info_1sm6i {
49
49
  display: flex;
50
50
  flex-wrap: wrap;
51
51
  flex: 1;
52
52
  overflow: hidden;
53
- } .file-upload-item__icon_1rhap {
53
+ } .file-upload-item__icon_1sm6i {
54
54
  display: block;
55
55
  flex-shrink: 0;
56
56
  color: var(--color-light-text-primary);
57
- } .file-upload-item__errorIcon_1rhap {
57
+ } .file-upload-item__errorIcon_1sm6i {
58
58
  flex-shrink: 0;
59
59
  color: var(--color-light-graphic-negative);
60
- } .file-upload-item__successIcon_1rhap {
60
+ } .file-upload-item__successIcon_1sm6i {
61
61
  flex-shrink: 0;
62
62
  color: var(--color-light-graphic-positive);
63
- } .file-upload-item__name_1rhap {
63
+ } .file-upload-item__name_1sm6i {
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_1rhap a {
68
+ } .file-upload-item__name_1sm6i a {
69
69
  display: block;
70
70
  margin-bottom: 1px;
71
- } .file-upload-item__meta_1rhap {
71
+ } .file-upload-item__meta_1sm6i {
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_1rhap > * {
77
+ } .file-upload-item__meta_1sm6i > * {
78
78
  margin-right: var(--gap-s)
79
- } .file-upload-item__meta_1rhap > *:last-child {
79
+ } .file-upload-item__meta_1sm6i > *:last-child {
80
80
  margin-right: 0;
81
- } .file-upload-item__size_1rhap {
81
+ } .file-upload-item__size_1sm6i {
82
82
  text-align: right;
83
- } .file-upload-item__delete_1rhap,
84
- .file-upload-item__download_1rhap {
83
+ } .file-upload-item__delete_1sm6i,
84
+ .file-upload-item__download_1sm6i {
85
85
  height: 24px;
86
86
  width: 24px;
87
87
  margin-left: var(--gap-xs);
88
- } .file-upload-item__errorWrapper_1rhap {
88
+ } .file-upload-item__errorWrapper_1sm6i {
89
89
  margin-top: var(--gap-s);
90
90
  color: var(--color-light-text-accent)
91
- } @media (--small-only) { .file-upload-item__errorWrapper_1rhap {
91
+ } @media (--small-only) { .file-upload-item__errorWrapper_1sm6i {
92
92
  flex: 1 0 100%;
93
93
  margin-top: var(--gap-3xs)
94
94
  }
95
- } .file-upload-item__restore_1rhap {
95
+ } .file-upload-item__restore_1sm6i {
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_1rhap {
101
+ } .file-upload-item__spinnerWrapper_1sm6i {
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_1rhap {
107
+ } .file-upload-item__spinner_1sm6i {
108
108
  width: 20px;
109
109
  height: 20px;
110
- } .file-upload-item__uploadPercent_1rhap {
110
+ } .file-upload-item__uploadPercent_1sm6i {
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: plx1w */
1
+ /* hash: 1ojvl */
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_1rhap {
28
+ } .file-upload-item__component_1sm6i {
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_1rhap svg {
39
+ } .file-upload-item__component_1sm6i svg {
40
40
  display: block;
41
- } .file-upload-item__infoSection_1rhap {
41
+ } .file-upload-item__infoSection_1sm6i {
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_1rhap {
48
+ } .file-upload-item__info_1sm6i {
49
49
  display: flex;
50
50
  flex-wrap: wrap;
51
51
  flex: 1;
52
52
  overflow: hidden;
53
- } .file-upload-item__icon_1rhap {
53
+ } .file-upload-item__icon_1sm6i {
54
54
  display: block;
55
55
  flex-shrink: 0;
56
56
  color: var(--color-light-text-primary);
57
- } .file-upload-item__errorIcon_1rhap {
57
+ } .file-upload-item__errorIcon_1sm6i {
58
58
  flex-shrink: 0;
59
59
  color: var(--color-light-graphic-negative);
60
- } .file-upload-item__successIcon_1rhap {
60
+ } .file-upload-item__successIcon_1sm6i {
61
61
  flex-shrink: 0;
62
62
  color: var(--color-light-graphic-positive);
63
- } .file-upload-item__name_1rhap {
63
+ } .file-upload-item__name_1sm6i {
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_1rhap a {
68
+ } .file-upload-item__name_1sm6i a {
69
69
  display: block;
70
70
  margin-bottom: 1px;
71
- } .file-upload-item__meta_1rhap {
71
+ } .file-upload-item__meta_1sm6i {
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_1rhap > * {
77
+ } .file-upload-item__meta_1sm6i > * {
78
78
  margin-right: var(--gap-s)
79
- } .file-upload-item__meta_1rhap > *:last-child {
79
+ } .file-upload-item__meta_1sm6i > *:last-child {
80
80
  margin-right: 0;
81
- } .file-upload-item__size_1rhap {
81
+ } .file-upload-item__size_1sm6i {
82
82
  text-align: right;
83
- } .file-upload-item__delete_1rhap,
84
- .file-upload-item__download_1rhap {
83
+ } .file-upload-item__delete_1sm6i,
84
+ .file-upload-item__download_1sm6i {
85
85
  height: 24px;
86
86
  width: 24px;
87
87
  margin-left: var(--gap-xs);
88
- } .file-upload-item__errorWrapper_1rhap {
88
+ } .file-upload-item__errorWrapper_1sm6i {
89
89
  margin-top: var(--gap-s);
90
90
  color: var(--color-light-text-accent)
91
- } @media (--small-only) { .file-upload-item__errorWrapper_1rhap {
91
+ } @media (--small-only) { .file-upload-item__errorWrapper_1sm6i {
92
92
  flex: 1 0 100%;
93
93
  margin-top: var(--gap-3xs)
94
94
  }
95
- } .file-upload-item__restore_1rhap {
95
+ } .file-upload-item__restore_1sm6i {
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_1rhap {
101
+ } .file-upload-item__spinnerWrapper_1sm6i {
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_1rhap {
107
+ } .file-upload-item__spinner_1sm6i {
108
108
  width: 20px;
109
109
  height: 20px;
110
- } .file-upload-item__uploadPercent_1rhap {
110
+ } .file-upload-item__uploadPercent_1sm6i {
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_1rhap","infoSection":"file-upload-item__infoSection_1rhap","info":"file-upload-item__info_1rhap","icon":"file-upload-item__icon_1rhap","errorIcon":"file-upload-item__errorIcon_1rhap","successIcon":"file-upload-item__successIcon_1rhap","name":"file-upload-item__name_1rhap","meta":"file-upload-item__meta_1rhap","size":"file-upload-item__size_1rhap","delete":"file-upload-item__delete_1rhap","download":"file-upload-item__download_1rhap","errorWrapper":"file-upload-item__errorWrapper_1rhap","restore":"file-upload-item__restore_1rhap","spinnerWrapper":"file-upload-item__spinnerWrapper_1rhap","spinner":"file-upload-item__spinner_1rhap","uploadPercent":"file-upload-item__uploadPercent_1rhap"};
18
+ const styles = {"component":"file-upload-item__component_1sm6i","infoSection":"file-upload-item__infoSection_1sm6i","info":"file-upload-item__info_1sm6i","icon":"file-upload-item__icon_1sm6i","errorIcon":"file-upload-item__errorIcon_1sm6i","successIcon":"file-upload-item__successIcon_1sm6i","name":"file-upload-item__name_1sm6i","meta":"file-upload-item__meta_1sm6i","size":"file-upload-item__size_1sm6i","delete":"file-upload-item__delete_1sm6i","download":"file-upload-item__download_1sm6i","errorWrapper":"file-upload-item__errorWrapper_1sm6i","restore":"file-upload-item__restore_1sm6i","spinnerWrapper":"file-upload-item__spinnerWrapper_1sm6i","spinner":"file-upload-item__spinner_1sm6i","uploadPercent":"file-upload-item__uploadPercent_1sm6i"};
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: plx1w */
1
+ /* hash: 1ojvl */
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_1rhap {
28
+ } .file-upload-item__component_1sm6i {
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_1rhap svg {
39
+ } .file-upload-item__component_1sm6i svg {
40
40
  display: block;
41
- } .file-upload-item__infoSection_1rhap {
41
+ } .file-upload-item__infoSection_1sm6i {
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_1rhap {
48
+ } .file-upload-item__info_1sm6i {
49
49
  display: flex;
50
50
  flex-wrap: wrap;
51
51
  flex: 1;
52
52
  overflow: hidden;
53
- } .file-upload-item__icon_1rhap {
53
+ } .file-upload-item__icon_1sm6i {
54
54
  display: block;
55
55
  flex-shrink: 0;
56
56
  color: var(--color-light-text-primary);
57
- } .file-upload-item__errorIcon_1rhap {
57
+ } .file-upload-item__errorIcon_1sm6i {
58
58
  flex-shrink: 0;
59
59
  color: var(--color-light-graphic-negative);
60
- } .file-upload-item__successIcon_1rhap {
60
+ } .file-upload-item__successIcon_1sm6i {
61
61
  flex-shrink: 0;
62
62
  color: var(--color-light-graphic-positive);
63
- } .file-upload-item__name_1rhap {
63
+ } .file-upload-item__name_1sm6i {
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_1rhap a {
68
+ } .file-upload-item__name_1sm6i a {
69
69
  display: block;
70
70
  margin-bottom: 1px;
71
- } .file-upload-item__meta_1rhap {
71
+ } .file-upload-item__meta_1sm6i {
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_1rhap > * {
77
+ } .file-upload-item__meta_1sm6i > * {
78
78
  margin-right: var(--gap-s)
79
- } .file-upload-item__meta_1rhap > *:last-child {
79
+ } .file-upload-item__meta_1sm6i > *:last-child {
80
80
  margin-right: 0;
81
- } .file-upload-item__size_1rhap {
81
+ } .file-upload-item__size_1sm6i {
82
82
  text-align: right;
83
- } .file-upload-item__delete_1rhap,
84
- .file-upload-item__download_1rhap {
83
+ } .file-upload-item__delete_1sm6i,
84
+ .file-upload-item__download_1sm6i {
85
85
  height: 24px;
86
86
  width: 24px;
87
87
  margin-left: var(--gap-xs);
88
- } .file-upload-item__errorWrapper_1rhap {
88
+ } .file-upload-item__errorWrapper_1sm6i {
89
89
  margin-top: var(--gap-s);
90
90
  color: var(--color-light-text-accent)
91
- } @media (--small-only) { .file-upload-item__errorWrapper_1rhap {
91
+ } @media (--small-only) { .file-upload-item__errorWrapper_1sm6i {
92
92
  flex: 1 0 100%;
93
93
  margin-top: var(--gap-3xs)
94
94
  }
95
- } .file-upload-item__restore_1rhap {
95
+ } .file-upload-item__restore_1sm6i {
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_1rhap {
101
+ } .file-upload-item__spinnerWrapper_1sm6i {
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_1rhap {
107
+ } .file-upload-item__spinner_1sm6i {
108
108
  width: 20px;
109
109
  height: 20px;
110
- } .file-upload-item__uploadPercent_1rhap {
110
+ } .file-upload-item__uploadPercent_1sm6i {
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.25",
3
+ "version": "5.2.1",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -14,10 +14,11 @@
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.3",
18
- "@alfalab/core-components-link": "^5.0.6",
19
- "@alfalab/core-components-spinner": "^3.0.7",
17
+ "@alfalab/core-components-icon-button": "^6.2.1",
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
+ "classnames": "^2.3.1",
21
22
  "tslib": "^2.4.0"
22
23
  }
23
24
  }
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
+ }