ref: change Chat to JitsiModal

This commit is contained in:
Bettenbuk Zoltan 2020-04-01 17:14:02 +02:00 committed by Zoltan Bettenbuk
parent 57d14d9517
commit 3a2081ffed
5 changed files with 44 additions and 81 deletions

View File

@ -1,18 +1,18 @@
// @flow
import React from 'react';
import { KeyboardAvoidingView, SafeAreaView } from 'react-native';
import { KeyboardAvoidingView } from 'react-native';
import { ColorSchemeRegistry } from '../../../base/color-scheme';
import { translate } from '../../../base/i18n';
import { HeaderWithNavigation, SlidingView } from '../../../base/react';
import { JitsiModal } from '../../../base/modal';
import { connect } from '../../../base/redux';
import { StyleType } from '../../../base/styles';
import { CHAT_VIEW_MODAL_ID } from '../../constants';
import AbstractChat, {
_mapDispatchToProps,
_mapStateToProps as _abstractMapStateToProps,
type Props as AbstractProps
_mapStateToProps,
type Props
} from '../AbstractChat';
import ChatInputBar from './ChatInputBar';
@ -20,88 +20,31 @@ import MessageContainer from './MessageContainer';
import MessageRecipient from './MessageRecipient';
import styles from './styles';
type Props = AbstractProps & {
/**
* The color-schemed stylesheet of the feature.
*/
_styles: StyleType
};
/**
* Implements a React native component that renders the chat window (modal) of
* the mobile client.
*/
class Chat extends AbstractChat<Props> {
/**
* Instantiates a new instance.
*
* @inheritdoc
*/
constructor(props: Props) {
super(props);
this._onClose = this._onClose.bind(this);
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
*/
render() {
const { _styles } = this.props;
return (
<SlidingView
onHide = { this._onClose }
position = 'bottom'
show = { this.props._isOpen } >
<JitsiModal
headerLabelKey = 'chat.title'
modalId = { CHAT_VIEW_MODAL_ID }>
<KeyboardAvoidingView
behavior = 'padding'
style = { styles.chatContainer }>
<HeaderWithNavigation
headerLabelKey = 'chat.title'
onPressBack = { this._onClose } />
<SafeAreaView style = { _styles.backdrop }>
<MessageContainer messages = { this.props._messages } />
<MessageRecipient />
<ChatInputBar onSend = { this.props._onSendMessage } />
</SafeAreaView>
</KeyboardAvoidingView>
</SlidingView>
</JitsiModal>
);
}
_onClose: () => boolean
/**
* Closes the chat window.
*
* @returns {boolean}
*/
_onClose() {
if (this.props._isOpen) {
this.props._onToggleChat();
return true;
}
return false;
}
}
/**
* Maps part of the redux state to the props of this component.
*
* @param {Object} state - The Redux state.
* @returns {Props}
*/
function _mapStateToProps(state) {
return {
..._abstractMapStateToProps(state),
_styles: ColorSchemeRegistry.get(state, 'Chat')
};
}
export default translate(connect(_mapStateToProps, _mapDispatchToProps)(Chat));

View File

@ -1,6 +1,7 @@
// @flow
import { IconChat, IconChatUnread } from '../../../base/icons';
import { setActiveModalId } from '../../../base/modal';
import { getLocalParticipant } from '../../../base/participants';
import { connect } from '../../../base/redux';
import {
@ -9,7 +10,7 @@ import {
} from '../../../base/toolbox';
import { openDisplayNamePrompt } from '../../../display-name';
import { toggleChat } from '../../actions';
import { CHAT_VIEW_MODAL_ID } from '../../constants';
import { getUnreadCount } from '../../functions';
type Props = AbstractButtonProps & {
@ -93,7 +94,7 @@ function _mapDispatchToProps(dispatch: Function) {
* @returns {void}
*/
_displayChat() {
dispatch(toggleChat());
dispatch(setActiveModalId(CHAT_VIEW_MODAL_ID));
},
/**

View File

@ -5,7 +5,6 @@ import { TextInput, TouchableOpacity, View } from 'react-native';
import { translate } from '../../../base/i18n';
import { Icon, IconChatSend } from '../../../base/icons';
import { Platform } from '../../../base/react';
import styles from './styles';
@ -136,7 +135,7 @@ class ChatInputBar extends Component<Props, State> {
*/
_onFocused(focused) {
return () => {
Platform.OS === 'android' && this.setState({
this.setState({
addPadding: focused
});
};

View File

@ -1,5 +1,7 @@
// @flow
export const CHAT_VIEW_MODAL_ID = 'chatView';
/**
* The audio ID of the audio element for which the {@link playAudio} action is
* triggered when new chat message is received.

View File

@ -1,5 +1,6 @@
// @flow
import { SET_ACTIVE_MODAL_ID } from '../base/modal';
import { ReducerRegistry } from '../base/redux';
import {
@ -8,6 +9,7 @@ import {
SET_PRIVATE_MESSAGE_RECIPIENT,
TOGGLE_CHAT
} from './actionTypes';
import { CHAT_VIEW_MODAL_ID } from './constants';
const DEFAULT_STATE = {
isOpen: false,
@ -56,6 +58,12 @@ ReducerRegistry.register('features/chat', (state = DEFAULT_STATE, action) => {
messages: []
};
case SET_ACTIVE_MODAL_ID:
if (action.activeModalId === CHAT_VIEW_MODAL_ID) {
return updateChatState(state);
}
break;
case SET_PRIVATE_MESSAGE_RECIPIENT:
return {
...state,
@ -64,6 +72,19 @@ ReducerRegistry.register('features/chat', (state = DEFAULT_STATE, action) => {
};
case TOGGLE_CHAT:
return updateChatState(state);
}
return state;
});
/**
* Updates the chat status on opening the chat view.
*
* @param {Object} state - The Redux state of the feature.
* @returns {Object}
*/
function updateChatState(state) {
return {
...state,
isOpen: !state.isOpen,
@ -72,6 +93,3 @@ ReducerRegistry.register('features/chat', (state = DEFAULT_STATE, action) => {
privateMessageRecipient: state.isOpen ? undefined : state.privateMessageRecipient
};
}
return state;
});