-
Notifications
You must be signed in to change notification settings - Fork 481
/
Attachments.jsx
106 lines (94 loc) · 2.2 KB
/
Attachments.jsx
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
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
/* eslint-disable react/no-is-mounted */
/* global dashboard */
import PropTypes from 'prop-types';
import React from 'react';
import {assets as assetsApi} from '@cdo/apps/clientApi';
import assetListStore from '../assets/assetListStore';
/**
* An attachment list component.
*/
export default class Attachments extends React.Component {
static propTypes = {
readonly: PropTypes.bool,
showUnderageWarning: PropTypes.bool
};
state = {loaded: false};
UNSAFE_componentWillMount() {
assetsApi.getFiles(this.onAssetListReceived);
}
componentDidMount() {
this.isMounted_ = true;
}
componentWillUnmount() {
this.isMounted_ = false;
}
onAssetListReceived = result => {
assetListStore.reset(result.files);
if (this.isMounted_) {
this.setState({loaded: true});
}
};
showAssetManager = () => {
dashboard.assets.showAssetManager(
null,
'document',
this.setState.bind(this, {loaded: true}),
{
showUnderageWarning: this.props.showUnderageWarning
}
);
};
render() {
let attachmentList = <span style={{fontSize: '0.8em'}}>Loading...</span>;
if (this.state.loaded) {
attachmentList = assetListStore.list().map(asset => {
const url = assetsApi.basePath(asset.filename);
return (
<a
key={asset.filename}
style={styles.attachment}
href={url}
className="uitest-attachment"
target="_blank"
rel="noopener noreferrer"
>
{asset.filename}
</a>
);
});
}
let button;
if (!this.props.readonly) {
button = (
<input
style={styles.button}
className="btn btn-default"
type="button"
value="Add/Remove Attachments"
onClick={this.showAssetManager}
/>
);
}
return (
<span>
{button}
{attachmentList}
</span>
);
}
}
const styles = {
button: {
float: 'left',
marginRight: '5px'
},
attachment: {
background: '#08c',
color: '#fff',
borderRadius: '4px',
padding: '0 5px',
margin: '4px 4px 4px 0',
float: 'left',
fontSize: '0.8em'
}
};