-
Notifications
You must be signed in to change notification settings - Fork 165
/
toolbar.js
126 lines (114 loc) · 3.14 KB
/
toolbar.js
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/* global setTimeout */
import React, { PureComponent } from 'react';
import styled from 'styled-components';
import { MODES } from './constants';
const ICON_MAP = [
{ id: MODES.EDITING, text: 'Edit Feature', icon: 'icon-select.svg' },
{ id: MODES.DRAW_POINT, text: 'Draw Point', icon: 'icon-point.svg' },
{ id: MODES.DRAW_PATH, text: 'Draw Polyline', icon: 'icon-path.svg' },
{ id: MODES.DRAW_POLYGON, text: 'Draw Polygon', icon: 'icon-polygon.svg' },
{ id: MODES.DRAW_RECTANGLE, text: 'Draw Rectangle', icon: 'icon-rectangle.svg' },
];
const Container = styled.div`
position: absolute;
width: 48px;
left: 24px;
top: 24px;
background: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
outline: none;
display: flex;
justify-content: center;
flex-direction: column;
`;
const Row = styled.div`
height: 34px;
padding: 7px;
display: flex;
justify-content: left;
color: ${(props) => (props.selected ? '#ffffff' : 'inherit')};
background: ${(props) => (props.selected ? '#0071bc' : props.hovered ? '#e6e6e6' : 'inherit')};
`;
const Img = styled.img`
width: inherit;
height: inherit;
`;
const Tooltip = styled.div`
position: absolute;
left: 52px;
padding: 4px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
min-width: 100px;
max-width: 300px;
height: 24px;
font-size: 12px;
z-index: 9;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
`;
const Delete = styled(Row)`
&:hover {
background: ${(props) => (props.selected ? '#0071bc' : '#e6e6e6')};
}
&:active: {
background: ${(props) => (props.selected ? '#0071bc' : 'inherit')};
}
`;
export default class Toolbar extends PureComponent {
constructor(props) {
super(props);
this.state = {
deleting: false,
hoveredId: null,
};
}
_onHover = (evt) => {
this.setState({ hoveredId: evt && evt.target.id });
};
_onDelete = (evt) => {
this.props.onDelete(evt);
this.setState({ deleting: true });
setTimeout(() => this.setState({ deleting: false }), 500);
};
render() {
const { selectedMode } = this.props;
const { hoveredId } = this.state;
return (
<Container>
{ICON_MAP.map((m) => {
return (
<Row
onClick={this.props.onSwitchMode}
onMouseOver={this._onHover}
onMouseOut={(_) => this._onHover(null)}
selected={m.id === selectedMode}
hovered={m.id === hoveredId}
key={m.id}
id={m.id}
>
<Img id={m.id} onMouseOver={this._onHover} src={m.icon} />
{hoveredId === m.id && <Tooltip>{m.text}</Tooltip>}
</Row>
);
})}
<Delete
selected={this.state.deleting}
onClick={this._onDelete}
onMouseOver={this._onHover}
onMouseOut={(_) => this._onHover(null)}
>
<Img
id={'delete'}
onMouseOver={this._onHover}
onClick={this._onDelete}
src={'icon-delete.svg'}
/>
{hoveredId === 'delete' && <Tooltip>{'Delete'}</Tooltip>}
</Delete>
</Container>
);
}
}