import React, {PropTypes} from 'react'; import debounce from 'lodash/function/debounce'; import AbstractSubstep from './AbstractSubstep'; export default class Story extends AbstractSubstep { static propTypes = { contents: PropTypes.string, label: PropTypes.string, placeholder: PropTypes.string, setStory: PropTypes.func.isRequired, }; static defaultProps = { editing: false, placeholder: 'Write description...', }; /** * Set the story for this step */ setStory() { this.props.setStory( React.findDOMNode(this.refs.story).value ); } render() { const attributes = { className: 'story--content-editable', defaultValue: this.props.contents, onChange: debounce(this.setStory.bind(this), 250), placeholder: this.props.placeholder, ref: 'story', disabled: !this.state.editing, rows: 3, }; return ( <div className="form-group story"> <label className="control-label">{this.props.label}</label> <div className="col-ld-8"> {this.renderPencil()} <textarea {...attributes}></textarea> </div> </div> ); } }