-
Notifications
You must be signed in to change notification settings - Fork 295
/
ImageUploadWidget.tsx
49 lines (45 loc) · 1.31 KB
/
ImageUploadWidget.tsx
1
2
3
4
5
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
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { defineMessages, intlShape } from 'react-intl';
import styles from './ImageUploadWidget.scss';
export const messages = defineMessages({
dropFileHere: {
id: 'ImageUploadWidget.dropFileHint',
defaultMessage: '!!!Drop file here',
description: 'Label "Drop file here" on the file upload widget.',
},
orClickToUpload: {
id: 'ImageUploadWidget.clickToUploadLabel',
defaultMessage: '!!!or click to upload',
description: 'Label "or click to upload" on the file upload widget.',
},
});
type Props = {
label: string,
};
@observer
export default class ImageUploadWidget extends Component<Props> {
static contextTypes = {
intl: intlShape.isRequired,
};
render() {
const { intl } = this.context;
const { label } = this.props;
return (
<div>
<div className={styles.label}>{label}</div>
<div className={styles.uploadBox}>
<div className={styles.instructions}>
<div className={styles.title}>
{intl.formatMessage(messages.dropFileHere)}
</div>
<div className={styles.subtitle}>
{intl.formatMessage(messages.orClickToUpload)}
</div>
</div>
</div>
</div>
);
}
}