maputnik/src/layers/listitem.jsx

64 lines
1.8 KiB
React
Raw Normal View History

2016-12-17 16:43:25 +01:00
import React from 'react'
import Radium from 'radium'
import Immutable from 'immutable'
import color from 'color'
import Heading from 'rebass/dist/Heading'
import Toolbar from 'rebass/dist/Toolbar'
import NavItem from 'rebass/dist/NavItem'
import Space from 'rebass/dist/Space'
import { LayerEditor } from './editor.jsx'
import scrollbars from '../scrollbars.scss'
import PureRenderMixin from 'react-addons-pure-render-mixin';
import theme from '../theme.js'
2016-12-17 19:58:30 +01:00
import {SortableElement, SortableHandle} from 'react-sortable-hoc';
import MdDragHandle from 'react-icons/lib/md/drag-handle'
2016-12-17 16:43:25 +01:00
2016-12-17 19:58:30 +01:00
const DragHandle = SortableHandle(() => <MdDragHandle />);
@SortableElement
2016-12-17 16:43:25 +01:00
@Radium
class LayerListItem extends React.Component {
static propTypes = {
2016-12-17 19:58:30 +01:00
layerId: React.PropTypes.string.isRequired,
2016-12-17 16:43:25 +01:00
onLayerSelected: React.PropTypes.func.isRequired,
}
constructor(props) {
super(props)
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
}
render() {
2016-12-17 19:58:30 +01:00
return <li
key={this.props.layerId}
onClick={() => this.props.onLayerSelected(this.props.layerId)}
style={{
fontWeight: 400,
color: theme.colors.lowgray,
fontSize: theme.fontSizes[5],
2016-12-17 16:43:25 +01:00
borderBottom: 1,
borderLeft: 2,
borderRight: 0,
borderStyle: "solid",
2016-12-17 19:58:30 +01:00
userSelect: 'none',
listStyle: 'none',
zIndex: 2000,
cursor: 'pointer',
position: 'relative',
padding: theme.scale[1],
2016-12-17 16:43:25 +01:00
borderColor: color(theme.colors.gray).lighten(0.1).hexString(),
2016-12-17 19:58:30 +01:00
backgroundColor: theme.colors.gray,
":hover": {
backgroundColor: color(theme.colors.gray).lighten(0.15).hexString(),
}
2016-12-17 16:43:25 +01:00
}}>
2016-12-17 19:58:30 +01:00
<DragHandle />
<span>#{this.props.layerId}</span>
</li>
2016-12-17 16:43:25 +01:00
}
}
export default Radium(LayerListItem);