Upon exiting edit post modal, foucs is placed on the respective text input field

Этот коммит содержится в:
nickago
2015-08-21 09:45:48 -07:00
родитель ddcdcc3e2c
Коммит 794881ce24
3 изменённых файлов: 7 добавлений и 5 удалений

Просмотреть файл

@@ -34,6 +34,7 @@ module.exports = React.createClass({
); );
$("#edit_post").modal('hide'); $("#edit_post").modal('hide');
$(this.state.refocusId).focus();
}, },
handleEditInput: function(editText) { handleEditInput: function(editText) {
this.setState({ editText: editText }); this.setState({ editText: editText });
@@ -52,12 +53,12 @@ module.exports = React.createClass({
var self = this; var self = this;
$(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) { $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
self.setState({ editText: "", title: "", channel_id: "", post_id: "", comments: 0 }); self.setState({ editText: "", title: "", channel_id: "", post_id: "", comments: 0, refocusId: "" });
}); });
$(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
var button = e.relatedTarget; var button = e.relatedTarget;
self.setState({ editText: $(button).attr('data-message'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid'), post_id: $(button).attr('data-postid'), comments: $(button).attr('data-comments') }); self.setState({ editText: $(button).attr('data-message'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid'), post_id: $(button).attr('data-postid'), comments: $(button).attr('data-comments'), refocusId: $(button).attr('data-refoucsid') });
}); });
$(this.refs.modal.getDOMNode()).on('shown.bs.modal', function(e) { $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function(e) {
@@ -65,7 +66,7 @@ module.exports = React.createClass({
}); });
}, },
getInitialState: function() { getInitialState: function() {
return { editText: "", title: "", post_id: "", channel_id: "", comments: 0 }; return { editText: "", title: "", post_id: "", channel_id: "", comments: 0, refocusId: "" };
}, },
render: function() { render: function() {
var error = this.state.error ? <div className='form-group has-error'><label className='control-label'>{ this.state.error }</label></div> : null; var error = this.state.error ? <div className='form-group has-error'><label className='control-label'>{ this.state.error }</label></div> : null;

Просмотреть файл

@@ -49,6 +49,7 @@ export default class PostInfo extends React.Component {
role='menuitem' role='menuitem'
data-toggle='modal' data-toggle='modal'
data-target='#edit_post' data-target='#edit_post'
data-refoucsid="#post_textbox"
data-title={type} data-title={type}
data-message={post.message} data-message={post.message}
data-postid={post.id} data-postid={post.id}

Просмотреть файл

@@ -93,7 +93,7 @@ RootPost = React.createClass({
<div> <div>
<a href='#' className='dropdown-toggle theme' type='button' data-toggle='dropdown' aria-expanded='false' /> <a href='#' className='dropdown-toggle theme' type='button' data-toggle='dropdown' aria-expanded='false' />
<ul className='dropdown-menu' role='menu'> <ul className='dropdown-menu' role='menu'>
<li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#edit_post' data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id}>Edit</a></li> <li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#edit_post' data-refoucsid='#reply_textbox' data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id}>Edit</a></li>
<li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#delete_post' data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={this.props.commentCount}>Delete</a></li> <li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#delete_post' data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={this.props.commentCount}>Delete</a></li>
</ul> </ul>
</div> </div>
@@ -203,7 +203,7 @@ CommentPost = React.createClass({
<div className='dropdown' onClick={function(e){$('.post-list-holder-by-time').scrollTop($('.post-list-holder-by-time').scrollTop() + 50);}}> <div className='dropdown' onClick={function(e){$('.post-list-holder-by-time').scrollTop($('.post-list-holder-by-time').scrollTop() + 50);}}>
<a href='#' className='dropdown-toggle theme' type='button' data-toggle='dropdown' aria-expanded='false' /> <a href='#' className='dropdown-toggle theme' type='button' data-toggle='dropdown' aria-expanded='false' />
<ul className='dropdown-menu' role='menu'> <ul className='dropdown-menu' role='menu'>
<li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#edit_post' data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id}>Edit</a></li> <li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#edit_post' data-refoucsid='#reply_textbox' data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id}>Edit</a></li>
<li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#delete_post' data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={0}>Delete</a></li> <li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#delete_post' data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={0}>Delete</a></li>
</ul> </ul>
</div> </div>