IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

PLT-6282 Make post list stay visible when post textbox height changes (#6323)

Browse Source 
* PLT-6282 Changed post drafts to use an action when being stored

* PLT-6282 Triggered post list to update scroll position when post draft changes

* PLT-6282 Changed SuggestionBox to complete suggestions without an event
This commit is contained in:
Harrison Healey
2017-05-23 10:17:06 -04:00
committed by GitHub
parent 52f73c30ca
commit 69f3f2fdce
8 changed files with 87 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
webapp/actions/post_actions.jsx
View File

@@ -499,3 +499,11 @@ export function performSearch(terms, isMentionSearch, success, error) {
}
);
}
export function storePostDraft(channelId, draft) {
AppDispatcher.handleViewAction({
type: ActionTypes.POST_DRAFT_CHANGED,
channelId,
draft
});
}

33
webapp/components/create_post.jsx
View File

@@ -71,10 +71,11 @@ export default class CreatePost extends React.Component {
PostStore.clearDraftUploads();
const draft = PostStore.getCurrentDraft();
const channelId = ChannelStore.getCurrentId();
const draft = PostStore.getPostDraft(channelId);
this.state = {
channelId: ChannelStore.getCurrentId(),
channelId,
message: draft.message,
uploadsInProgress: draft.uploadsInProgress,
fileInfos: draft.fileInfos,
@@ -136,7 +137,7 @@ export default class CreatePost extends React.Component {
const isReaction = REACTION_PATTERN.exec(post.message);
if (post.message.indexOf('/') === 0) {
PostStore.storeDraft(this.state.channelId, null);
PostActions.storePostDraft(this.state.channelId, null);
this.setState({message: '', postError: null, fileInfos: [], enableSendButton: false});
const args = {};
@@ -241,7 +242,7 @@ export default class CreatePost extends React.Component {
PostActions.removeReaction(this.state.channelId, postId, emojiName);
}
PostStore.storeCurrentDraft(null);
PostActions.storePostDraft(this.state.channelId, null);
}
focusTextbox(keepFocus = false) {
@@ -271,9 +272,9 @@ export default class CreatePost extends React.Component {
enableSendButton
});
const draft = PostStore.getCurrentDraft();
const draft = PostStore.getPostDraft(this.state.channelId);
draft.message = message;
PostStore.storeCurrentDraft(draft);
PostActions.storePostDraft(this.state.channelId, draft);
}
handleFileUploadChange() {
@@ -281,10 +282,10 @@ export default class CreatePost extends React.Component {
}
handleUploadStart(clientIds, channelId) {
const draft = PostStore.getDraft(channelId);
const draft = PostStore.getPostDraft(channelId);
draft.uploadsInProgress = draft.uploadsInProgress.concat(clientIds);
PostStore.storeDraft(channelId, draft);
PostActions.storePostDraft(channelId, draft);
this.setState({uploadsInProgress: draft.uploadsInProgress});
@@ -294,7 +295,7 @@ export default class CreatePost extends React.Component {
}
handleFileUploadComplete(fileInfos, clientIds, channelId) {
const draft = PostStore.getDraft(channelId);
const draft = PostStore.getPostDraft(channelId);
// remove each finished file from uploads
for (let i = 0; i < clientIds.length; i++) {
@@ -306,7 +307,7 @@ export default class CreatePost extends React.Component {
}
draft.fileInfos = draft.fileInfos.concat(fileInfos);
PostStore.storeDraft(channelId, draft);
PostActions.storePostDraft(channelId, draft);
if (channelId === this.state.channelId) {
this.setState({
@@ -325,14 +326,14 @@ export default class CreatePost extends React.Component {
}
if (clientId !== -1) {
const draft = PostStore.getDraft(channelId);
const draft = PostStore.getPostDraft(channelId);
const index = draft.uploadsInProgress.indexOf(clientId);
if (index !== -1) {
draft.uploadsInProgress.splice(index, 1);
}
PostStore.storeDraft(channelId, draft);
PostActions.storePostDraft(channelId, draft);
if (channelId === this.state.channelId) {
this.setState({uploadsInProgress: draft.uploadsInProgress});
@@ -362,10 +363,10 @@ export default class CreatePost extends React.Component {
fileInfos.splice(index, 1);
}
const draft = PostStore.getCurrentDraft();
const draft = PostStore.getPostDraft(this.state.channelId);
draft.fileInfos = fileInfos;
draft.uploadsInProgress = uploadsInProgress;
PostStore.storeCurrentDraft(draft);
PostActions.storePostDraft(this.state.channelId, draft);
const enableSendButton = this.handleEnableSendButton(this.state.message, fileInfos);
this.setState({fileInfos, uploadsInProgress, enableSendButton});
@@ -432,7 +433,7 @@ export default class CreatePost extends React.Component {
onChange() {
const channelId = ChannelStore.getCurrentId();
if (this.state.channelId !== channelId) {
const draft = PostStore.getCurrentDraft();
const draft = PostStore.getPostDraft(channelId);
this.setState({channelId, message: draft.message, submitting: false, serverError: null, postError: null, fileInfos: draft.fileInfos, uploadsInProgress: draft.uploadsInProgress});
}
@@ -453,7 +454,7 @@ export default class CreatePost extends React.Component {
return this.state.fileInfos.length + this.state.uploadsInProgress.length;
}
const draft = PostStore.getDraft(channelId);
const draft = PostStore.getPostDraft(channelId);
return draft.fileInfos.length + draft.uploadsInProgress.length;
}

40
webapp/components/post_view/components/post_list.jsx
View File

@@ -21,6 +21,7 @@ import * as ChannelActions from 'actions/channel_actions.jsx';
import Constants from 'utils/constants.jsx';
const ScrollTypes = Constants.ScrollTypes;
import PostStore from 'stores/post_store.jsx';
import PreferenceStore from 'stores/preference_store.jsx';
import {FormattedDate, FormattedMessage} from 'react-intl';
@@ -96,6 +97,11 @@ export default class PostList extends React.Component {
}, 0);
}
this.setState({unViewedCount});
if (this.props.channelId !== nextProps.channelId) {
PostStore.removePostDraftChangeListener(this.props.channelId, this.handlePostDraftChange);
PostStore.addPostDraftChangeListener(nextProps.channelId, this.handlePostDraftChange);
}
}
handleKeyDown(e) {
@@ -527,6 +533,16 @@ export default class PostList extends React.Component {
window.addEventListener('resize', this.handleResize);
window.addEventListener('keydown', this.handleKeyDown);
PostStore.addPostDraftChangeListener(this.props.channelId, this.handlePostDraftChange);
}
handlePostDraftChange = (draft) => {
// this.state.draft isn't used anywhere, but this will cause an update to the scroll position
// without causing two updates to trigger when something else changes
this.setState({
draft
});
}
componentWillUnmount() {
@@ -534,6 +550,8 @@ export default class PostList extends React.Component {
window.removeEventListener('resize', this.handleResize);
window.removeEventListener('keydown', this.handleKeyDown);
this.scrollStopAction.cancel();
PostStore.removePostDraftChangeListener(this.handlePostDraftChange);
}
componentDidUpdate() {
@@ -545,13 +563,6 @@ export default class PostList extends React.Component {
}
render() {
if (this.props.postList == null) {
return <div/>;
}
const posts = this.props.postList.posts;
const order = this.props.postList.order;
// Create intro message or top loadmore link
let moreMessagesTop;
if (this.props.showMoreMessagesTop) {
@@ -588,11 +599,17 @@ export default class PostList extends React.Component {
}
// Create post elements
const postElements = this.createPosts(posts, order);
let postElements = null;
let topPostCreateAt = 0;
if (this.state.topPostId && this.props.postList.posts[this.state.topPostId]) {
topPostCreateAt = this.props.postList.posts[this.state.topPostId].create_at;
if (this.props.postList) {
const posts = this.props.postList.posts;
const order = this.props.postList.order;
postElements = this.createPosts(posts, order);
if (this.state.topPostId && this.props.postList.posts[this.state.topPostId]) {
topPostCreateAt = this.props.postList.posts[this.state.topPostId].create_at;
}
}
return (
@@ -642,6 +659,7 @@ PostList.propTypes = {
postList: PropTypes.object,
profiles: PropTypes.object,
channel: PropTypes.object,
channelId: PropTypes.string.isRequired,
currentUser: PropTypes.object,
scrollPostId: PropTypes.string,
scrollType: PropTypes.number,

1
webapp/components/post_view/post_view_controller.jsx
View File

@@ -363,6 +363,7 @@ export default class PostViewController extends React.Component {
<PostList
postList={this.state.postList}
profiles={this.state.profiles}
channelId={this.state.channel.id}
channel={this.state.channel}
currentUser={this.state.currentUser}
showMoreMessagesTop={!this.state.atTop}

8
webapp/components/suggestion/suggestion_box.jsx
View File

@@ -37,12 +37,10 @@ export default class SuggestionBox extends React.Component {
}
componentDidMount() {
SuggestionStore.addCompleteWordListener(this.suggestionId, this.handleCompleteWord);
SuggestionStore.addPretextChangedListener(this.suggestionId, this.handlePretextChanged);
}
componentWillUnmount() {
SuggestionStore.removeCompleteWordListener(this.suggestionId, this.handleCompleteWord);
SuggestionStore.removePretextChangedListener(this.suggestionId, this.handlePretextChanged);
SuggestionStore.unregisterSuggestionBox(this.suggestionId);
@@ -161,6 +159,8 @@ export default class SuggestionBox extends React.Component {
provider.handleCompleteWord(term, matchedPretext);
}
}
GlobalActions.emitCompleteWordSuggestion(this.suggestionId);
}
handleKeyDown(e) {
@@ -172,7 +172,7 @@ export default class SuggestionBox extends React.Component {
GlobalActions.emitSelectNextSuggestion(this.suggestionId);
e.preventDefault();
} else if (e.which === KeyCodes.ENTER || e.which === KeyCodes.TAB) {
GlobalActions.emitCompleteWordSuggestion(this.suggestionId);
this.handleCompleteWord(SuggestionStore.getSelection(this.suggestionId), SuggestionStore.getSelectedMatchedPretext(this.suggestionId));
this.props.onKeyDown(e);
e.preventDefault();
} else if (e.which === KeyCodes.ESCAPE) {
@@ -212,6 +212,7 @@ export default class SuggestionBox extends React.Component {
// Don't pass props used by SuggestionBox
Reflect.deleteProperty(props, 'providers');
Reflect.deleteProperty(props, 'onChange'); // We use onInput instead of onChange on the actual input
Reflect.deleteProperty(props, 'onItemSelected');
const childProps = {
@@ -260,6 +261,7 @@ export default class SuggestionBox extends React.Component {
suggestionId={this.suggestionId}
location={listStyle}
renderDividers={renderDividers}
onCompleteWord={this.handleCompleteWord}
/>
</div>
);

18
webapp/components/suggestion/suggestion_list.jsx
View File

@@ -2,20 +2,19 @@
// See License.txt for license information.
import $ from 'jquery';
import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
import * as GlobalActions from 'actions/global_actions.jsx';
import SuggestionStore from 'stores/suggestion_store.jsx';
import {FormattedMessage} from 'react-intl';
import PropTypes from 'prop-types';
import React from 'react';
import SuggestionStore from 'stores/suggestion_store.jsx';
export default class SuggestionList extends React.Component {
static propTypes = {
suggestionId: PropTypes.string.isRequired,
location: PropTypes.string,
renderDividers: PropTypes.bool
renderDividers: PropTypes.bool,
onCompleteWord: PropTypes.func.isRequired
};
static defaultProps = {
@@ -29,7 +28,6 @@ export default class SuggestionList extends React.Component {
this.getContent = this.getContent.bind(this);
this.handleItemClick = this.handleItemClick.bind(this);
this.handleSuggestionsChanged = this.handleSuggestionsChanged.bind(this);
this.scrollToItem = this.scrollToItem.bind(this);
@@ -67,10 +65,6 @@ export default class SuggestionList extends React.Component {
return $(ReactDOM.findDOMNode(this.refs.content));
}
handleItemClick(term, matchedPretext) {
GlobalActions.emitCompleteWordSuggestion(this.props.suggestionId, term, matchedPretext);
}
handleSuggestionsChanged() {
this.setState(this.getStateFromStores());
}
@@ -145,7 +139,7 @@ export default class SuggestionList extends React.Component {
term={term}
matchedPretext={this.state.matchedPretext[i]}
isSelection={isSelection}
onClick={this.handleItemClick}
onClick={this.props.onCompleteWord}
/>
);
}

34
webapp/stores/post_store.jsx
View File

@@ -4,7 +4,6 @@
import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
import EventEmitter from 'events';
import ChannelStore from 'stores/channel_store.jsx';
import BrowserStore from 'stores/browser_store.jsx';
import UserStore from 'stores/user_store.jsx';
@@ -17,6 +16,7 @@ const EDIT_POST_EVENT = 'edit_post';
const POSTS_VIEW_JUMP_EVENT = 'post_list_jump';
const SELECTED_POST_CHANGE_EVENT = 'selected_post_change';
const POST_PINNED_CHANGE_EVENT = 'post_pinned_change';
const POST_DRAFT_CHANGE_EVENT = 'post_draft_change';
class PostStoreClass extends EventEmitter {
constructor() {
@@ -75,6 +75,18 @@ class PostStoreClass extends EventEmitter {
this.removeListener(POSTS_VIEW_JUMP_EVENT, callback);
}
emitPostDraftChange(channelId) {
this.emit(POST_DRAFT_CHANGE_EVENT + channelId, this.getPostDraft(channelId));
}
addPostDraftChangeListener(channelId, callback) {
this.on(POST_DRAFT_CHANGE_EVENT + channelId, callback);
}
removePostDraftChangeListener(channelId, callback) {
this.removeListener(POST_DRAFT_CHANGE_EVENT + channelId, callback);
}
jumpPostsViewToBottom() {
this.emitPostsViewJump(Constants.PostsViewJumpTypes.BOTTOM, null);
}
@@ -585,21 +597,11 @@ class PostStoreClass extends EventEmitter {
return draft;
}
storeCurrentDraft(draft) {
var channelId = ChannelStore.getCurrentId();
storePostDraft(channelId, draft) {
BrowserStore.setGlobalItem('draft_' + channelId, draft);
}
getCurrentDraft() {
var channelId = ChannelStore.getCurrentId();
return this.getDraft(channelId);
}
storeDraft(channelId, draft) {
BrowserStore.setGlobalItem('draft_' + channelId, draft);
}
getDraft(channelId) {
getPostDraft(channelId) {
return this.normalizeDraft(BrowserStore.getGlobalItem('draft_' + channelId));
}
@@ -700,7 +702,7 @@ PostStore.dispatchToken = AppDispatcher.register((payload) => {
break;
case ActionTypes.CREATE_POST:
PostStore.storePendingPost(action.post);
PostStore.storeDraft(action.post.channel_id, null);
PostStore.storePostDraft(action.post.channel_id, null);
PostStore.jumpPostsViewToBottom();
break;
case ActionTypes.CREATE_COMMENT:
@@ -723,6 +725,10 @@ PostStore.dispatchToken = AppDispatcher.register((payload) => {
case ActionTypes.RECEIVED_POST_UNPINNED:
PostStore.emitPostPinnedChange();
break;
case ActionTypes.POST_DRAFT_CHANGED:
PostStore.storePostDraft(action.channelId, action.draft);
PostStore.emitPostDraftChange(action.channelId);
break;
default:
}
});

1
webapp/utils/constants.jsx
View File

@@ -92,6 +92,7 @@ export const ActionTypes = keyMirror({
RECEIVED_ADD_MENTION: null,
RECEIVED_POST_PINNED: null,
RECEIVED_POST_UNPINNED: null,
POST_DRAFT_CHANGED: null,
RECEIVED_PROFILES: null,
RECEIVED_PROFILES_IN_TEAM: null,