Click to add description...
'
+ : Util.mdToHTML(this.props.desc)
+
+ if (this.props.authorizedToEdit) {
+ return (
+
+
+ )
+ }
+}
+
+Links.propTypes = {
+ topic: PropTypes.object, // backbone object
+ ActiveMapper: PropTypes.object,
+ updateTopic: 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
+ }))
+ })),
+ redrawCanvas: PropTypes.func
+}
+
+export default Links
diff --git a/frontend/src/components/TopicCard/Permission.js b/frontend/src/components/TopicCard/Permission.js
new file mode 100644
index 00000000..bceb2d4c
--- /dev/null
+++ b/frontend/src/components/TopicCard/Permission.js
@@ -0,0 +1,69 @@
+import React, { PropTypes, Component } from 'react'
+
+import onClickOutsideAddon from 'react-onclickoutside'
+
+class Permission extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ selectingPermission: false
+ }
+ }
+
+ togglePermissionSelect = () => {
+ this.setState({selectingPermission: !this.state.selectingPermission})
+ }
+
+ openPermissionSelect = () => {
+ this.setState({selectingPermission: true})
+ }
+
+ closePermissionSelect = () => {
+ this.setState({selectingPermission: false})
+ }
+
+ handleClickOutside = instance => {
+ this.closePermissionSelect()
+ }
+
+ liClick = value => event => {
+ this.closePermissionSelect()
+ this.props.updateTopic({
+ permission: value,
+ defer_to_map_id: null
+ })
+ // prevents it from also firing the event listener on the parent
+ event.preventDefault()
+ }
+
+ render = () => {
+ const { permission, authorizedToEdit } = this.props
+ const { selectingPermission } = this.state
+
+ let classes = `linkItem mapPerm ${permission.substring(0, 2)}`
+ if (selectingPermission) classes += ' minimize'
+
+ return (
+
+
+ {permission !== 'commons' && }
+ {permission !== 'public' && }
+ {permission !== 'private' && }
+
+
+ )
+ }
+}
+
+Permission.propTypes = {
+ permission: PropTypes.string, // 'co', 'pu', or 'pr'
+ authorizedToEdit: PropTypes.bool,
+ updateTopic: PropTypes.func
+}
+
+export default onClickOutsideAddon(Permission)
diff --git a/frontend/src/components/TopicCard/Title.js b/frontend/src/components/TopicCard/Title.js
new file mode 100644
index 00000000..1eca527b
--- /dev/null
+++ b/frontend/src/components/TopicCard/Title.js
@@ -0,0 +1,62 @@
+import React, { Component, PropTypes } from 'react'
+import { RIETextArea } from 'riek'
+
+const maxTitleLength = 140
+
+class Title extends Component {
+ nameCounterText() {
+ // for some reason, there's an error if this isn't inside a function
+ return `${this.props.name.length}/${maxTitleLength.toString()}`
+ }
+
+ render() {
+ if (this.props.authorizedToEdit) {
+ return (
+
+ { this.textarea = textarea }}
+ propName="name"
+ change={this.props.onChange}
+ className="titleWrapper"
+ id="titleActivator"
+ classEditing="riek-editing"
+ editProps={{
+ maxLength: maxTitleLength,
+ onKeyPress: e => {
+ const ENTER = 13
+ if (e.which === ENTER) {
+ e.preventDefault()
+ this.props.onChange({ name: e.target.value })
+ }
+ },
+ onChange: e => {
+ if (!this.nameCounter) return
+ this.nameCounter.innerHTML = `${e.target.value.length}/140`
+ }
+ }}
+ />
+ { this.nameCounter = span }}>
+ {this.nameCounterText()}
+
+
+ )
+ } else {
+ return (
+
+
+ {this.props.name}
+
+
+ )
+ }
+ }
+}
+
+
+Title.propTypes = {
+ name: PropTypes.string,
+ onChange: PropTypes.func,
+ authorizedToEdit: PropTypes.bool
+}
+
+export default Title
diff --git a/frontend/src/components/TopicCard/index.js b/frontend/src/components/TopicCard/index.js
new file mode 100644
index 00000000..3ebe700a
--- /dev/null
+++ b/frontend/src/components/TopicCard/index.js
@@ -0,0 +1,65 @@
+import React, { PropTypes, Component } from 'react'
+
+import Title from './Title'
+import Links from './Links'
+import Desc from './Desc'
+import Attachments from './Attachments'
+
+class ReactTopicCard extends Component {
+ render = () => {
+ const { topic, ActiveMapper } = this.props
+ const authorizedToEdit = topic.authorizeToEdit(ActiveMapper)
+ const hasAttachment = topic.get('link') && topic.get('link') !== ''
+
+ let classname = 'permission'
+ if (authorizedToEdit) {
+ classname += ' canEdit'
+ } else {
+ classname += ' cannotEdit'
+ }
+ if (topic.authorizePermissionChange(ActiveMapper)) classname += ' yourTopic'
+
+ return (
+
+ )
+ }
+}
+
+ReactTopicCard.propTypes = {
+ topic: PropTypes.object,
+ ActiveMapper: PropTypes.object,
+ updateTopic: 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
+ }))
+ })),
+ redrawCanvas: PropTypes.func
+}
+
+export default ReactTopicCard
diff --git a/frontend/test/Metamaps.Util.spec.js b/frontend/test/Metamaps.Util.spec.js
index e0366bd9..80108ee2 100644
--- a/frontend/test/Metamaps.Util.spec.js
+++ b/frontend/test/Metamaps.Util.spec.js
@@ -113,9 +113,15 @@ describe('Metamaps.Util.js', function() {
expect(Util.mdToHTML(md).trim()).to.equal(html)
})
- it('links and images', function() {
- const md = '[Link](https://metamaps.cc) '
- const html = '
Link 
'
+ it('links', function() {
+ const md = '[Link](https://metamaps.cc)'
+ const html = '
Link
'
+ expect(Util.mdToHTML(md).trim()).to.equal(html)
+ })
+
+ it('images are not rendered', function() {
+ const md = ''
+ const html = '
'
expect(Util.mdToHTML(md).trim()).to.equal(html)
})
})
diff --git a/package.json b/package.json
index 104bcc5e..6db62390 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,9 @@
"react": "15.4.2",
"react-dom": "15.4.2",
"react-dropzone": "3.9.1",
+ "react-onclickoutside": "^5.9.0",
"redux": "3.6.0",
+ "riek": "^1.0.7",
"simplewebrtc": "2.2.2",
"socket.io": "1.3.7",
"webpack": "1.14.0"
-
<%= m.name %>- -
- <% end %>
-