Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
RocketChat
Rocket.Chat.ReactNative
Commits
d9709520
Unverified
Commit
d9709520
authored
Feb 17, 2020
by
Diego Mello
Committed by
GitHub
Feb 17, 2020
Browse files
[REVERT] Show emoji keyboard on Android (#1738)
parent
a62dfef3
Changes
47
Hide whitespace changes
Inline
Side-by-side
android/app/build.gradle
View file @
d9709520
...
...
@@ -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
...
...
android/app/src/main/java/chat/rocket/reactnative/MainApplication.java
View file @
d9709520
...
...
@@ -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
());
...
...
android/settings.gradle
View file @
d9709520
...
...
@@ -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
)
...
...
app/containers/MessageBox/EmojiKeyboard.js
0 → 100644
View file @
d9709520
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
));
app/containers/MessageBox/LeftButtons.android.js
0 → 100644
View file @
d9709520
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
;
app/containers/MessageBox/LeftButtons.js
→
app/containers/MessageBox/LeftButtons.
ios.
js
View file @
d9709520
File moved
app/containers/MessageBox/RightButtons.android.js
0 → 100644
View file @
d9709520
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
;
app/containers/MessageBox/RightButtons.js
→
app/containers/MessageBox/RightButtons.
ios.
js
View file @
d9709520
File moved
app/containers/MessageBox/buttons/ToggleEmojiButton.js
0 → 100644
View file @
d9709520
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
;
app/containers/MessageBox/buttons/index.js
View file @
d9709520
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
...
...
app/containers/MessageBox/index.js
View file @
d9709520
...
...
@@ -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
}
...
...
app/containers/MessageBox/styles.js
View file @
d9709520
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
}
})
}
});
app/containers/message/index.js
View file @
d9709520
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
();
Keyboard
Utils
.
dismiss
();
if
(((
item
.
tlm
||
item
.
tmid
)
&&
!
isThreadRoom
))
{
this
.
onThreadPress
();
...
...
ios/Podfile.lock
View file @
d9709520
...
...
@@ -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
...
...
ios/Pods/Headers/Private/react-native-keyboard-input/Color+Interpolation.h
0 → 120000
View file @
d9709520
..
/
..
/
..
/
..
/
..
/
node_modules
/
react
-
native
-
keyboard
-
input
/
lib
/
ios
/
LNInterpolation
/
Color
+
Interpolation
.
h
\ No newline at end of file
ios/Pods/Headers/Private/react-native-keyboard-input/LNAnimator.h
0 → 120000
View file @
d9709520
..
/
..
/
..
/
..
/
..
/
node_modules
/
react
-
native
-
keyboard
-
input
/
lib
/
ios
/
LNInterpolation
/
LNAnimator
.
h
\ No newline at end of file
ios/Pods/Headers/Private/react-native-keyboard-input/LNInterpolable.h
0 → 120000
View file @
d9709520
..
/
..
/
..
/
..
/
..
/
node_modules
/
react
-
native
-
keyboard
-
input
/
lib
/
ios
/
LNInterpolation
/
LNInterpolable
.
h
\ No newline at end of file
ios/Pods/Headers/Private/react-native-keyboard-input/LNInterpolation.h
0 → 120000
View file @
d9709520
..
/
..
/
..
/
..
/
..
/
node_modules
/
react
-
native
-
keyboard
-
input
/
lib
/
ios
/
LNInterpolation
/
LNInterpolation
.
h
\ No newline at end of file
ios/Pods/Headers/Private/react-native-keyboard-input/NSValue+Interpolation.h
0 → 120000
View file @
d9709520
..
/
..
/
..
/
..
/
..
/
node_modules
/
react
-
native
-
keyboard
-
input
/
lib
/
ios
/
LNInterpolation
/
NSValue
+
Interpolation
.
h
\ No newline at end of file
ios/Pods/Headers/Private/react-native-keyboard-input/RCTCustomInputController.h
0 → 120000
View file @
d9709520
..
/
..
/
..
/
..
/
..
/
node_modules
/
react
-
native
-
keyboard
-
input
/
lib
/
ios
/
RCTCustomInputController
/
RCTCustomInputController
.
h
\ No newline at end of file
Prev
1
2
3
Next
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment