metamaps--metamaps/frontend/src/components/TopicCard/Desc.js
Connor Turland 4deb3f5ab9 topic card in react (#1031)
* its coming along

* links bar

* scssify a bunch

* metacode image working a bit better

* metacode selector in react topic card

* riek editing for name field on topic card

* riek submit on enter

* factor out Title and Links from Topic Card component, but not the listeners

* create working Desc editor

* styling is much better now

* textarea min height for desc

* disallow images in topic card markdown

* shift enter is linebreak, enter is save

* attachments split out, but it's pretty buggy

* move listeners into Links.js

* slightly wider metacodeTitle

* fix positioning on metacode selector

* fix metacode selection

* move metacode and permissions into subcomponents

* fixes

* prevent editing on desc/title if not authorized to edit

* fix topic card draggability

* fix embedly

* fix md test

* remove the removed link card manually with jquery

* fix test syntax

* eslint

* more eslin

* reuse authorizedToEdit

* convert metacode sets to a json object for react

* add the html in react whoop

* fix metacode styling

* sort wasn't working

* finishing metacode select

* readd the above link input border

* fix syntax

* multiline title editable textarea

* more portable metacode selector component

* factor out #metacodeOptions into one react component with a callback :D:D:D

* render metacodeOptions in right click menu with react

* render metacodeOptions in right click menu with react

* fix up right click menu's metacode editing

* fix topic card title character counter

* ignore metamaps secret bundle in ag

* simplify Attachments props

* factor out embedly card into its own component; it seems to help

* link resetter

* fix edit icon on title in topic card

* move mapCount and synapseCount hover/click logic to react

* fix up the showMore control

* metacode selection tweaks

* tweak links bar spacing in topic card

* rubocop

* remove TODOs

* more badass permissions selector

* close permission selector when you click outside

* fix overeager metacode selector

* more modular attachments component

* fix bug in Desc.js

* fix right click styling

* permission changes are different than edit rights

* bad module ref

* ensure maxLength on topic titles
2017-02-26 11:42:47 -05:00

78 lines
1.9 KiB
JavaScript

import React, { PropTypes, Component } from 'react'
import { RIETextArea } from 'riek'
import Util from '../../Metamaps/Util'
class MdTextArea extends RIETextArea {
keyDown = (event) => {
// we'll handle Enter on our own, thanks
const ESC = 27
if (event.keyCode === ESC) {
this.cancelEditing()
}
}
renderNormalComponent = () => {
// defaultProps MUST use dangerouslySetInnerHTML
return <span tabIndex="0"
className={this.makeClassString()}
onFocus={this.startEditing}
onClick={this.startEditing}
{...this.props.defaultProps}
/>
}
}
class Desc extends Component {
render = () => {
const descHTML = (!this.props.desc && this.props.authorizedToEdit)
? '<p>Click to add description...</p>'
: Util.mdToHTML(this.props.desc)
if (this.props.authorizedToEdit) {
return (
<div className="scroll">
<div className="desc">
<MdTextArea value={this.props.desc}
propName="desc"
change={this.props.onChange}
className="riek_desc"
classEditing="riek-editing"
editProps={{
onKeyPress: e => {
const ENTER = 13
if (!e.shiftKey && e.which === ENTER) {
e.preventDefault()
this.props.onChange({ desc: e.target.value })
}
}
}}
defaultProps={{
dangerouslySetInnerHTML: { __html: descHTML }
}}
/>
<div className="clearfloat"></div>
</div>
</div>
)
} else {
return (
<div className="scroll">
<div className="desc">
<span className="riek_desc">
{this.props.desc}
</span>
</div>
</div>
)
}
}
}
Desc.propTypes = {
desc: PropTypes.string, // markdown
authorizedToEdit: PropTypes.bool,
onChange: PropTypes.func
}
export default Desc