90 lines
2.8 KiB
JavaScript
90 lines
2.8 KiB
JavaScript
/* global $ */
|
|
|
|
import React, { PropTypes, Component } from 'react'
|
|
import { Link } from 'react-router'
|
|
|
|
import MetacodeSelect from '../MetacodeSelect'
|
|
import Permission from './Permission'
|
|
import Follow from './Follow'
|
|
|
|
class Links extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
|
|
this.state = {
|
|
showMetacodeSelect: false
|
|
}
|
|
}
|
|
|
|
handleMetacodeSelect = metacodeId => {
|
|
this.setState({ showMetacodeSelect: false })
|
|
this.props.updateTopic({
|
|
metacode_id: metacodeId
|
|
})
|
|
// this needs to trigger a redraw of the canvas,
|
|
// which it currently does using backbone. If backbone comes out, make sure it still does
|
|
}
|
|
|
|
handleMetacodeBarClick = () => {
|
|
if (this.state.showMetacodeTitle) {
|
|
this.setState({ showMetacodeSelect: !this.state.showMetacodeSelect })
|
|
}
|
|
}
|
|
|
|
render = () => {
|
|
const { topic, onTopicFollow, ActiveMapper } = this.props
|
|
const authorizedToEdit = topic.authorizeToEdit(ActiveMapper)
|
|
const authorizedPermissionChange = topic.authorizePermissionChange(ActiveMapper)
|
|
const metacode = topic.getMetacode()
|
|
const wrappedTopicFollow = () => onTopicFollow(topic)
|
|
const isFollowing = topic.isFollowedBy(ActiveMapper)
|
|
|
|
return (
|
|
<div className="links">
|
|
<div className="linkItem icon metacodeItem"
|
|
onClick={() => authorizedToEdit && this.handleMetacodeBarClick()}
|
|
>
|
|
<div className={`metacodeTitle mbg${metacode.get('id')}`}>
|
|
{metacode.get('name')}
|
|
<div className="expandMetacodeSelect"/>
|
|
</div>
|
|
<div className="metacodeImage"
|
|
style={{backgroundImage: `url(${metacode.get('icon')})`}}
|
|
title="click and drag to move card"
|
|
onMouseEnter={() => this.setState({ showMetacodeTitle: true })}
|
|
/>
|
|
<div className="metacodeSelect"
|
|
style={{ display: this.state.showMetacodeSelect ? 'block' : 'none' }}
|
|
>
|
|
<MetacodeSelect onMetacodeSelect={this.handleMetacodeSelect} metacodeSets={this.props.metacodeSets} />
|
|
</div>
|
|
</div>
|
|
<Permission
|
|
permission={topic.get('permission')}
|
|
authorizedToEdit={authorizedPermissionChange}
|
|
updateTopic={this.props.updateTopic}
|
|
/>
|
|
<Follow isFollowing={isFollowing} onTopicFollow={wrappedTopicFollow} />
|
|
<div className="clearfloat"></div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
Links.propTypes = {
|
|
topic: PropTypes.object, // backbone object
|
|
ActiveMapper: PropTypes.object,
|
|
updateTopic: PropTypes.func,
|
|
onTopicFollow: PropTypes.func,
|
|
metacodeSets: PropTypes.arrayOf(PropTypes.shape({
|
|
name: PropTypes.string,
|
|
metacodes: PropTypes.arrayOf(PropTypes.shape({
|
|
id: PropTypes.number,
|
|
icon_path: PropTypes.string, // url
|
|
name: PropTypes.string
|
|
}))
|
|
}))
|
|
}
|
|
|
|
export default Links
|