Last active
August 29, 2015 14:21
-
-
Save swarut/54fd9653e9428e8d06bf to your computer and use it in GitHub Desktop.
React mystery: When key is needed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var React = require('react/addons'); | |
var marked = require('marked'); | |
var EditableTextArea = React.createClass({ | |
propTypes: { | |
contentBody: React.PropTypes.string.isRequired, | |
onSave: React.PropTypes.func | |
}, | |
getDefaultProps: function () { | |
}, | |
getInitialState: function () { | |
return ({ | |
isEditing: false, | |
content: this.props.contentBody | |
}); | |
}, | |
componentDidMount: function () { | |
console.log('component did mount'); | |
this.showContent(); | |
}, | |
componentDidUpdate: function () { | |
if (!this.state.isEditing) { | |
console.log('component did update'); | |
this.showContent(); | |
} | |
}, | |
componentWillReceiveProps: function (newProps) { | |
console.log('component will receive props'); | |
var content = $(this.refs.content.getDOMNode()); | |
if (this.state.content) { | |
content.html(marked(newProps.content)); | |
} | |
}, | |
showContent: function() { | |
if (!this.state.isEditing) { | |
console.log('-+++++++++++++++show content+++'); | |
if (this.state.content) { | |
this.showContentText(); | |
} | |
else { | |
this.showContentPlaceholder(); | |
} | |
} | |
}, | |
showContentText: function() { | |
var content = $(this.refs.content.getDOMNode()); | |
console.log('--show content text', content); | |
var date = new Date(); | |
//content.html(marked(this.state.content)); | |
content.html('dsfsfdsfdss' + date); | |
content.removeClass('--placeholder'); | |
}, | |
showContentPlaceholder: function() { | |
var content = $(this.refs.content.getDOMNode()); | |
console.log('---show content placeholder'); | |
content.html('Add a description ..'); | |
content.addClass(' --placeholder'); | |
}, | |
editContent: function() { | |
console.log('----edit content---'); | |
var _t = this; | |
this.setState({ | |
isEditing: true | |
}, function() { | |
var contentTextArea = | |
$(this.refs.contentTextArea.getDOMNode()); | |
contentTextArea.val(this.state.content); | |
contentTextArea.focus(); | |
_t.focusContent(); | |
}); | |
}, | |
saveDescription: function(e) { | |
e.preventDefault(); | |
var _t = this; | |
var contentTextArea = | |
$(this.refs.contentTextArea.getDOMNode()); | |
var description = contentTextArea.val(); | |
this.setState({ | |
isEditing: false | |
}, function() { | |
console.log('---------save'); | |
if (this.state.onSave()) { | |
TaskStore.actions.setDescription(_t.props.task._id, description); | |
} | |
}); | |
}, | |
cancelDescriptionEdit: function() { | |
this.setState({isEditing: false}); | |
}, | |
focusContent: function() { | |
var contentAreaContainer = | |
$(this.refs.contentAreaContainer.getDOMNode()); | |
contentAreaContainer.addClass(' --focus'); | |
}, | |
render: function() { | |
console.log('----render---'); | |
var component; | |
if (this.state.isEditing) { | |
console.log('-------editing-------'); | |
component = ( | |
<div className='tw-task-description-textarea' | |
ref='contentTextAreaContainer' key='editing'> | |
<textarea className='form-control' | |
ref='contentTextArea' | |
onFocus={this.focusContent} | |
rows='6' /> | |
<div className='tw-task-description-controls'> | |
<div className='uk-button --weak' | |
onClick={this.cancelDescriptionEdit} > | |
Cancel | |
</div> | |
<div className='uk-button' | |
onClick={this.saveDescription}> | |
Save | |
</div> | |
</div> | |
</div> | |
); | |
} | |
else { | |
component = ( | |
<div className='tw-task-description' ref='content' | |
onClick={this.editContent} key='showing'> | |
</div> | |
); | |
} | |
return ( | |
<div className='tw-task-description-wrapper'> | |
{component} | |
</div> | |
); | |
} | |
}); | |
module.exports = EditableTextArea; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment