toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

PLT-5600 RN: Mention and Channel autocomplete in the thread scene (#299)

Browse source
This commit is contained in:
Chris Duarte 2017-02-24 16:24:21 -08:00 committed by enahum
parent d33c2712ed
commit 4be1e9af3a
6 changed files with 46 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/components/autocomplete/at_mention/at_mention.js
View file

@ -102,8 +102,8 @@ export default class AtMention extends Component {
postDraft: PropTypes.string,
requestStatus: PropTypes.string.isRequired,
theme: PropTypes.object.isRequired,
onChangeText: PropTypes.func.isRequired,
actions: PropTypes.shape({
changePostDraft: PropTypes.func.isRequired,
autocompleteUsersInChannel: PropTypes.func.isRequired
})
}
@ -206,7 +206,7 @@ export default class AtMention extends Component {
completedDraft += this.props.postDraft.substring(this.props.cursorPosition);
}
this.props.actions.changePostDraft(this.props.currentChannelId, completedDraft);
this.props.onChangeText(completedDraft);
this.setState({
active: false,
mentionComplete: true

14
app/components/autocomplete/at_mention/index.js
View file

@ -4,7 +4,6 @@
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {handlePostDraftChanged} from 'app/actions/views/channel';
import {autocompleteUsersInChannel} from 'service/actions/users';
import {getTheme} from 'service/selectors/entities/preferences';
import {getDefaultChannel} from 'service/selectors/entities/channels';
@ -12,10 +11,18 @@ import {getAutocompleteUsersInCurrentChannel} from 'service/selectors/entities/u
import AtMention from './at_mention';
function mapStateToProps(state) {
function mapStateToProps(state, ownProps) {
const currentChannelId = state.entities.channels.currentId;
const postDraft = state.views.channel.drafts[currentChannelId];
let postDraft;
if (ownProps.rootId.length) {
postDraft = state.views.thread.draft[ownProps.rootId];
} else {
postDraft = state.views.channel.drafts[currentChannelId];
}
return {
...ownProps,
currentUserId: state.entities.users.currentId,
currentChannelId,
currentTeamId: state.entities.teams.currentId,
@ -30,7 +37,6 @@ function mapStateToProps(state) {
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({
changePostDraft: handlePostDraftChanged,
autocompleteUsersInChannel
}, dispatch)
};

4
app/components/autocomplete/channel_mention/channel_mention.js
View file

@ -83,8 +83,8 @@ export default class ChannelMention extends Component {
postDraft: PropTypes.string,
requestStatus: PropTypes.string.isRequired,
theme: PropTypes.object.isRequired,
onChangeText: PropTypes.func.isRequired,
actions: PropTypes.shape({
changePostDraft: PropTypes.func.isRequired,
autocompleteChannels: PropTypes.func.isRequired
})
}
@ -182,7 +182,7 @@ export default class ChannelMention extends Component {
completedDraft += this.props.postDraft.substring(this.props.cursorPosition);
}
this.props.actions.changePostDraft(this.props.currentChannelId, completedDraft);
this.props.onChangeText(completedDraft);
this.setState({
active: false,
mentionComplete: true,

14
app/components/autocomplete/channel_mention/index.js
View file

@ -4,17 +4,24 @@
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {handlePostDraftChanged} from 'app/actions/views/channel';
import {autocompleteChannels} from 'service/actions/channels';
import {getTheme} from 'service/selectors/entities/preferences';
import {getAutocompleteChannelWithSections} from 'service/selectors/entities/channels';
import ChannelMention from './channel_mention';
function mapStateToProps(state) {
function mapStateToProps(state, ownProps) {
const currentChannelId = state.entities.channels.currentId;
const postDraft = state.views.channel.drafts[currentChannelId];
let postDraft;
if (ownProps.rootId.length) {
postDraft = state.views.thread.draft[ownProps.rootId];
} else {
postDraft = state.views.channel.drafts[currentChannelId];
}
return {
...ownProps,
currentChannelId,
currentTeamId: state.entities.teams.currentId,
postDraft,
@ -27,7 +34,6 @@ function mapStateToProps(state) {
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({
changePostDraft: handlePostDraftChanged,
autocompleteChannels
}, dispatch)
};

21
app/components/autocomplete/index.js
View file

@ -1,7 +1,7 @@
// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import React, {Component} from 'react';
import React, {PropTypes, Component} from 'react';
import {
StyleSheet,
View
@ -22,9 +22,14 @@ const style = StyleSheet.create({
});
export default class Autocomplete extends Component {
static propTypes = {
onChangeText: PropTypes.func.isRequired,
rootId: PropTypes.string
};
state = {
cursorPosition: 0
}
};
handleSelectionChange = (event) => {
this.setState({
@ -36,8 +41,16 @@ export default class Autocomplete extends Component {
return (
<View>
<View style={style.container}>
<AtMention cursorPosition={this.state.cursorPosition}/>
<ChannelMention cursorPosition={this.state.cursorPosition}/>
<AtMention
cursorPosition={this.state.cursorPosition}
onChangeText={this.props.onChangeText}
rootId={this.props.rootId}
/>
<ChannelMention
cursorPosition={this.state.cursorPosition}
onChangeText={this.props.onChangeText}
rootId={this.props.rootId}
/>
</View>
</View>
);

6
app/components/post_textbox/post_textbox.js
View file

@ -155,7 +155,11 @@ export default class PostTextbox extends PureComponent {
{this.renderTyping()}
</Text>
</View>
<Autocomplete ref={this.attachAutocomplete}/>
<Autocomplete
ref={this.attachAutocomplete}
onChangeText={this.props.onChangeText}
rootId={this.props.rootId}
/>
<View
style={{
alignItems: 'flex-end',