/
PreviewButton.jsx
76 lines (69 loc) · 2.79 KB
/
PreviewButton.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
/*
* Copyright 2017, GeoSolutions Sas.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*/
const React = require('react');
const PropTypes = require('prop-types');
const Toolbar = require('../misc/toolbar/Toolbar');
require('./css/previewbutton.css');
class PreviewButton extends React.Component {
static propTypes = {
mode: PropTypes.string,
src: PropTypes.string,
side: PropTypes.number,
frame: PropTypes.number,
margin: PropTypes.number,
labelHeight: PropTypes.number,
label: PropTypes.string,
showLabel: PropTypes.bool,
onToggle: PropTypes.func,
onAdd: PropTypes.func,
currentLayer: PropTypes.object,
enabledCatalog: PropTypes.bool,
layers: PropTypes.array,
mapIsEditable: PropTypes.bool
};
static defaultProps = {
mode: 'desktop',
src: './images/mapthumbs/none.jpg',
side: 50,
frame: 4,
margin: 5,
labelHeight: 29,
label: '',
showLabel: true,
onToggle: () => {},
onAdd: () => {},
currentLayer: {},
layers: []
};
render() {
return (
<div className="background-preview-button" style={{margin: this.props.margin}}>
<div className="background-preview-button-container bg-body" onClick={this.props.onToggle} style={{padding: this.props.frame / 2, width: this.props.side + this.props.frame, height: this.props.side + this.props.frame}}>
{this.props.showLabel ? (<div className="background-preview-button-label" style={{width: this.props.side, height: this.props.labelHeight, marginTop: 0, padding: 0}} ><div className="bg-body bg-text" style={{padding: this.props.frame }}>{this.props.label}</div></div>) : null}
<div className="background-preview-button-frame" style={{width: this.props.side, height: this.props.side}}>
<img src={this.props.src}/>
</div>
</div>
{this.props.labelHeight > 0 ? <Toolbar
btnDefaultProps={{
className: 'square-button-md',
bsStyle: 'primary'
}}
buttons={this.props.mode !== 'mobile' && this.props.mapIsEditable ? [
{
glyph: 'plus',
tooltipId: "backgroundSelector.addTooltip",
onClick: () => this.props.onAdd(),
visible: !this.props.enabledCatalog
}
] : []}/> : null}
</div>
);
}
}
module.exports = PreviewButton;