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