Unverified Commit d9709520 authored by Diego Mello's avatar Diego Mello Committed by GitHub
Browse files

[REVERT] Show emoji keyboard on Android (#1738)

parent a62dfef3
......@@ -199,6 +199,7 @@ dependencies {
addUnimodulesDependencies()
implementation project(':watermelondb')
implementation project(':reactnativenotifications')
implementation project(":reactnativekeyboardinput")
implementation project(':@react-native-community_viewpager')
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.facebook.react:react-native:+" // From node_modules
......
......@@ -25,6 +25,7 @@ import com.wix.reactnativenotifications.core.AppLifecycleFacade;
import com.wix.reactnativenotifications.core.JsIOHelper;
import com.wix.reactnativenotifications.core.notification.INotificationsApplication;
import com.wix.reactnativenotifications.core.notification.IPushNotification;
import com.wix.reactnativekeyboardinput.KeyboardInputPackage;
import io.invertase.firebase.fabric.crashlytics.RNFirebaseCrashlyticsPackage;
import io.invertase.firebase.analytics.RNFirebaseAnalyticsPackage;
......@@ -53,6 +54,7 @@ public class MainApplication extends Application implements ReactApplication, IN
packages.add(new RNFirebaseCrashlyticsPackage());
packages.add(new RNFirebaseAnalyticsPackage());
packages.add(new RNFirebasePerformancePackage());
packages.add(new KeyboardInputPackage(MainApplication.this));
packages.add(new RNNotificationsPackage(MainApplication.this));
packages.add(new WatermelonDBPackage());
packages.add(new RNCViewPagerPackage());
......
......@@ -6,6 +6,8 @@ include ':watermelondb'
project(':watermelondb').projectDir = new File(rootProject.projectDir, '../node_modules/@nozbe/watermelondb/native/android')
include ':reactnativenotifications'
project(':reactnativenotifications').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-notifications/android/app')
include ':reactnativekeyboardinput'
project(':reactnativekeyboardinput').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keyboard-input/lib/android')
include ':@react-native-community_viewpager'
project(':@react-native-community_viewpager').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/viewpager/android')
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
......
import React from 'react';
import { View } from 'react-native';
import { KeyboardRegistry } from 'react-native-keyboard-input';
import PropTypes from 'prop-types';
import store from '../../lib/createStore';
import EmojiPicker from '../EmojiPicker';
import styles from './styles';
import { themes } from '../../constants/colors';
import { withTheme } from '../../theme';
export default class EmojiKeyboard extends React.PureComponent {
static propTypes = {
theme: PropTypes.string
};
constructor(props) {
super(props);
const state = store.getState();
this.baseUrl = state.server.server;
}
onEmojiSelected = (emoji) => {
KeyboardRegistry.onItemSelected('EmojiKeyboard', { emoji });
}
render() {
const { theme } = this.props;
return (
<View style={[styles.emojiKeyboardContainer, { borderTopColor: themes[theme].borderColor }]} testID='messagebox-keyboard-emoji'>
<EmojiPicker onEmojiSelected={this.onEmojiSelected} baseUrl={this.baseUrl} />
</View>
);
}
}
KeyboardRegistry.registerKeyboard('EmojiKeyboard', () => withTheme(EmojiKeyboard));
import React from 'react';
import PropTypes from 'prop-types';
import { CancelEditingButton, ToggleEmojiButton } from './buttons';
const LeftButtons = React.memo(({
theme, showEmojiKeyboard, editing, editCancel, openEmoji, closeEmoji
}) => {
if (editing) {
return <CancelEditingButton onPress={editCancel} theme={theme} />;
}
return (
<ToggleEmojiButton
show={showEmojiKeyboard}
open={openEmoji}
close={closeEmoji}
theme={theme}
/>
);
});
LeftButtons.propTypes = {
theme: PropTypes.string,
showEmojiKeyboard: PropTypes.bool,
openEmoji: PropTypes.func.isRequired,
closeEmoji: PropTypes.func.isRequired,
editing: PropTypes.bool,
editCancel: PropTypes.func.isRequired
};
export default LeftButtons;
import React from 'react';
import PropTypes from 'prop-types';
import { SendButton, AudioButton, FileButton } from './buttons';
const RightButtons = React.memo(({
theme, showSend, submit, recordAudioMessage, showFileActions
}) => {
if (showSend) {
return <SendButton onPress={submit} theme={theme} />;
}
return (
<>
<AudioButton onPress={recordAudioMessage} theme={theme} />
<FileButton onPress={showFileActions} theme={theme} />
</>
);
});
RightButtons.propTypes = {
theme: PropTypes.string,
showSend: PropTypes.bool,
submit: PropTypes.func.isRequired,
recordAudioMessage: PropTypes.func.isRequired,
showFileActions: PropTypes.func.isRequired
};
export default RightButtons;
import React from 'react';
import PropTypes from 'prop-types';
import BaseButton from './BaseButton';
const ToggleEmojiButton = React.memo(({
theme, show, open, close
}) => {
if (show) {
return (
<BaseButton
onPress={close}
testID='messagebox-close-emoji'
accessibilityLabel='Close_emoji_selector'
icon='keyboard'
theme={theme}
/>
);
}
return (
<BaseButton
onPress={open}
testID='messagebox-open-emoji'
accessibilityLabel='Open_emoji_selector'
icon='emoji'
theme={theme}
/>
);
});
ToggleEmojiButton.propTypes = {
theme: PropTypes.string,
show: PropTypes.bool,
open: PropTypes.func.isRequired,
close: PropTypes.func.isRequired
};
export default ToggleEmojiButton;
import CancelEditingButton from './CancelEditingButton';
import ToggleEmojiButton from './ToggleEmojiButton';
import SendButton from './SendButton';
import AudioButton from './AudioButton';
import FileButton from './FileButton';
export {
CancelEditingButton,
ToggleEmojiButton,
SendButton,
AudioButton,
FileButton
......
......@@ -2,12 +2,12 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, Alert, Keyboard } from 'react-native';
import { connect } from 'react-redux';
import { KeyboardAccessoryView } from 'react-native-keyboard-input';
import ImagePicker from 'react-native-image-crop-picker';
import equal from 'deep-equal';
import DocumentPicker from 'react-native-document-picker';
import ActionSheet from 'react-native-action-sheet';
import { Q } from '@nozbe/watermelondb';
import { KeyboardTrackingView } from 'react-native-keyboard-tracking-view';
import { generateTriggerId } from '../../lib/methods/actions';
import TextInput from '../../presentation/TextInput';
......@@ -98,6 +98,7 @@ class MessageBox extends Component {
super(props);
this.state = {
mentions: [],
showEmojiKeyboard: false,
showSend: false,
recording: false,
trackingType: '',
......@@ -169,6 +170,10 @@ class MessageBox extends Component {
this.setShowSend(true);
}
if (isAndroid) {
require('./EmojiKeyboard');
}
if (isTablet) {
EventEmiter.addEventListener(KEY_COMMAND, this.handleCommands);
}
......@@ -193,7 +198,7 @@ class MessageBox extends Component {
shouldComponentUpdate(nextProps, nextState) {
const {
showSend, recording, mentions, file, commandPreview
showEmojiKeyboard, showSend, recording, mentions, file, commandPreview
} = this.state;
const {
......@@ -214,6 +219,9 @@ class MessageBox extends Component {
if (nextProps.editing !== editing) {
return true;
}
if (nextState.showEmojiKeyboard !== showEmojiKeyboard) {
return true;
}
if (nextState.showSend !== showSend) {
return true;
}
......@@ -307,6 +315,10 @@ class MessageBox extends Component {
}
}, 100)
onKeyboardResigned = () => {
this.closeEmoji();
}
onPressMention = (item) => {
if (!this.component) {
return;
......@@ -351,6 +363,24 @@ class MessageBox extends Component {
}
}
onEmojiSelected = (keyboardId, params) => {
const { text } = this;
const { emoji } = params;
let newText = '';
// if messagebox has an active cursor
if (this.component && this.component._lastNativeSelection) {
const { start, end } = this.component._lastNativeSelection;
const cursor = Math.max(start, end);
newText = `${ text.substr(0, cursor) }${ emoji }${ text.substr(cursor) }`;
} else {
// if messagebox doesn't have a cursor, just append selected emoji
newText = `${ text }${ emoji }`;
}
this.setInput(newText);
this.setShowSend(true);
}
getPermalink = async(message) => {
try {
return await RocketChat.getPermalinkMessage(message);
......@@ -585,6 +615,12 @@ class MessageBox extends Component {
this.clearInput();
}
openEmoji = async() => {
await this.setState({
showEmojiKeyboard: true
});
}
recordAudioMessage = async() => {
const recording = await Recording.permission();
this.setState({ recording });
......@@ -609,6 +645,10 @@ class MessageBox extends Component {
}
}
closeEmoji = () => {
this.setState({ showEmojiKeyboard: false });
}
submit = async() => {
const {
onSubmit, rid: roomId, tmid
......@@ -617,6 +657,7 @@ class MessageBox extends Component {
this.clearInput();
this.debouncedOnChangeText.stop();
this.closeEmoji();
this.stopTrackingMention();
this.handleTyping(false);
if (message.trim() === '') {
......@@ -700,7 +741,10 @@ class MessageBox extends Component {
}
identifyMentionKeyword = (keyword, type) => {
this.setState({ trackingType: type });
this.setState({
showEmojiKeyboard: false,
trackingType: type
});
this.updateMentions(keyword, type);
}
......@@ -734,7 +778,7 @@ class MessageBox extends Component {
renderContent = () => {
const {
recording, showSend, mentions, trackingType, commandPreview, showCommandPreview
recording, showEmojiKeyboard, showSend, mentions, trackingType, commandPreview, showCommandPreview
} = this.state;
const {
editing, message, replying, replyCancel, user, getCustomEmoji, theme
......@@ -771,9 +815,12 @@ class MessageBox extends Component {
>
<LeftButtons
theme={theme}
showEmojiKeyboard={showEmojiKeyboard}
editing={editing}
showFileActions={this.showFileActions}
editCancel={this.editCancel}
openEmoji={this.openEmoji}
closeEmoji={this.closeEmoji}
/>
<TextInput
ref={component => this.component = component}
......@@ -795,6 +842,7 @@ class MessageBox extends Component {
showSend={showSend}
submit={this.submit}
recordAudioMessage={this.recordAudioMessage}
showFileActions={this.showFileActions}
/>
</View>
</View>
......@@ -804,7 +852,7 @@ class MessageBox extends Component {
render() {
console.count(`${ this.constructor.name }.render calls`);
const { file } = this.state;
const { showEmojiKeyboard, file } = this.state;
const { user, baseUrl, theme } = this.props;
return (
<MessageboxContext.Provider
......@@ -815,16 +863,18 @@ class MessageBox extends Component {
onPressCommandPreview: this.onPressCommandPreview
}}
>
<KeyboardTrackingView
addBottomView
manageScrollView
scrollBehavior={2} // KeyboardTrackingScrollBehaviorFixedOffset
style={styles.trackingView}
<KeyboardAccessoryView
renderContent={this.renderContent}
kbInputRef={this.component}
kbComponent={showEmojiKeyboard ? 'EmojiKeyboard' : null}
onKeyboardResigned={this.onKeyboardResigned}
onItemSelected={this.onEmojiSelected}
trackInteractive
// revealKeyboardInteractive
requiresSameParentToManageScrollView
addBottomView
bottomViewColor={themes[theme].messageboxBackground}
>
{this.renderContent()}
</KeyboardTrackingView>
/>
<UploadModal
isVisible={(file && file.isVisible)}
file={file}
......
import { StyleSheet, Platform } from 'react-native';
import { StyleSheet } from 'react-native';
import { isIOS } from '../../utils/deviceInfo';
import sharedStyles from '../../views/Styles';
......@@ -73,6 +73,10 @@ export default StyleSheet.create({
fontSize: 14,
...sharedStyles.textRegular
},
emojiKeyboardContainer: {
flex: 1,
borderTopWidth: StyleSheet.hairlineWidth
},
slash: {
height: 30,
width: 30,
......@@ -99,15 +103,5 @@ export default StyleSheet.create({
},
scrollViewMention: {
maxHeight: SCROLLVIEW_MENTION_HEIGHT
},
trackingView: {
...Platform.select({
ios: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0
}
})
}
});
import React from 'react';
import { Keyboard } from 'react-native';
import PropTypes from 'prop-types';
import { KeyboardUtils } from 'react-native-keyboard-input';
import Message from './Message';
import debounce from '../../utils/debounce';
......@@ -82,7 +82,7 @@ class MessageContainer extends React.Component {
onPress = debounce(() => {
const { item, isThreadRoom } = this.props;
Keyboard.dismiss();
KeyboardUtils.dismiss();
if (((item.tlm || item.tmid) && !isThreadRoom)) {
this.onThreadPress();
......
......@@ -292,6 +292,8 @@ PODS:
- react-native-jitsi-meet (2.0.4):
- JitsiMeetSDK
- React
- react-native-keyboard-input (5.3.1):
- React
- react-native-keyboard-tracking-view (5.6.1):
- React
- react-native-notifications (2.0.6):
......@@ -448,6 +450,7 @@ DEPENDENCIES:
- "react-native-cameraroll (from `../node_modules/@react-native-community/cameraroll`)"
- react-native-document-picker (from `../node_modules/react-native-document-picker`)
- react-native-jitsi-meet (from `../node_modules/react-native-jitsi-meet`)
- react-native-keyboard-input (from `../node_modules/react-native-keyboard-input`)
- react-native-keyboard-tracking-view (from `../node_modules/react-native-keyboard-tracking-view`)
- react-native-notifications (from `../node_modules/react-native-notifications`)
- react-native-orientation-locker (from `../node_modules/react-native-orientation-locker`)
......@@ -583,6 +586,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native-document-picker"
react-native-jitsi-meet:
:path: "../node_modules/react-native-jitsi-meet"
react-native-keyboard-input:
:path: "../node_modules/react-native-keyboard-input"
react-native-keyboard-tracking-view:
:path: "../node_modules/react-native-keyboard-tracking-view"
react-native-notifications:
......@@ -738,6 +743,7 @@ SPEC CHECKSUMS:
react-native-cameraroll: 463aff54e37cff27ea76eb792e6f1fa43b876320
react-native-document-picker: c36bf5f067a581657ecaf7124dcd921a8be19061
react-native-jitsi-meet: 5bc06e8b65a7d04fd3705d5720f3b2ec66e49a29
react-native-keyboard-input: 2a01e0aceac330592bbe9b3101761bb9d8e6d1fb
react-native-keyboard-tracking-view: 4bb67b89ccd327c7d9eab87f722880d2103a25a8
react-native-notifications: 163ddedac6fcc8d850ea15b06abdadcacdff00f1
react-native-orientation-locker: 23918c400376a7043e752c639c122fcf6bce8f1c
......
../../../../../node_modules/react-native-keyboard-input/lib/ios/LNInterpolation/Color+Interpolation.h
\ No newline at end of file
../../../../../node_modules/react-native-keyboard-input/lib/ios/LNInterpolation/LNAnimator.h
\ No newline at end of file
../../../../../node_modules/react-native-keyboard-input/lib/ios/LNInterpolation/LNInterpolable.h
\ No newline at end of file
../../../../../node_modules/react-native-keyboard-input/lib/ios/LNInterpolation/LNInterpolation.h
\ No newline at end of file
../../../../../node_modules/react-native-keyboard-input/lib/ios/LNInterpolation/NSValue+Interpolation.h
\ No newline at end of file
../../../../../node_modules/react-native-keyboard-input/lib/ios/RCTCustomInputController/RCTCustomInputController.h
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment