Newer
Older
import styled from 'styled-components'
// TODO: cancel button
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
const Root = styled.div`
align-items: center;
display: inline-flex;
flex-direction: column;
margin-bottom: 2em;
margin-right: 3em;
position: relative;
width: 20ch;
`
const ErrorWrapper = styled.div`
background: var(--color-danger);
border: 2px solid white;
color: white;
font-size: 0.8em;
letter-spacing: 0.01em;
opacity: 1;
padding: 0.3em 0.5em;
position: absolute;
top: 25%;
z-index: 4;
`
const Icon = styled.div`
background: #ddd;
height: 100px;
margin: 5px;
opacity: 0.5;
position: relative;
width: 70px;
`
const Progress = styled.div`
background-image:
linear-gradient(
var(--color-primary-light) 50%,
var(--color-primary) 75%,
to top
);
bottom: 0;
content: '';
display: block;
left: 0;
opacity: 1;
position: absolute;
right: 0;
transform-origin: 0 0;
&::after {
/* we can use a data attribute for the numbering below */
bottom: 2px;
color: white;
content: '${props => props.percent}%';
display: block;
position: absolute;
right: 2px;
}
`
const Filename = styled.div`
color: gray;
font-size: 90%;
font-style: italic;
margin: 5px;
max-width: 20ch;
`
const Extension = styled.div`
background: #888;
color: white;
font-size: 12px;
left: 20px;
padding: 2px;
position: absolute;
right: 0;
text-align: center;
text-transform: uppercase;
top: 20px;
`
const extension = ({ name }) => name.replace(/^.+\./, '')
const UploadingFile = ({ file, error, progress }) => (
<Root>
{!!error && <ErrorWrapper>{error}</ErrorWrapper>}
<Icon>
{!!progress && <Progress percent={progress * 100} />}
<Extension>{extension(file)}</Extension>
</Icon>
<Filename>{file.name}</Filename>
</Root>
)
export default UploadingFile
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
// clock experiment, on hold.
// const Progress = styled.div`
// opacity: 1;
// background: var(--color-primary);
// position: absolute;
// bottom: 10%;
// right: 10%;
// content: '';
// width: 3px;
// height: 1em;
// display: block;
// // margin-left: 30%;
// transform-origin: 0 0;
// animation: rotate 1s infinite ease-in-out ;
// background-image:
// &:after {
// content: "uploading";
// display: block;
// position: absolute;
// width: 1em;
// height: 1em;
// }
//
// @keyframes rotate {
// 0% {
// transform: rotate(0)
// }
// 100% {
// transform: rotate(360deg);
// }
// `