SW/mattermost-mobile
2
0
Fork 0
forked from Ivasoft/mattermost-mobile
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make so Autocomplete opens when we use the at quick action (#6613)

Browse Source 
* Make so Autocomplete opens when we use the at quick action

* Open keyboard when the quick action is pressed
This commit is contained in:
Daniel Espino García
2022-10-31 18:02:44 +01:00
committed by GitHub
parent b58b425909
commit f033a28eb2
6 changed files with 45 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/post_draft/draft_handler/draft_handler.tsx
View File

@@ -20,9 +20,9 @@ type Props = {
maxFileSize: number;
maxFileCount: number;
canUploadFiles: boolean;
updateCursorPosition: (cursorPosition: number) => void;
updateCursorPosition: React.Dispatch<React.SetStateAction<number>>;
updatePostInputTop: (top: number) => void;
updateValue: (value: string) => void;
updateValue: React.Dispatch<React.SetStateAction<string>>;
value: string;
setIsFocused: (isFocused: boolean) => void;
}

14
app/components/post_draft/draft_input/index.tsx
View File

@@ -1,7 +1,8 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useCallback} from 'react';
import {PasteInputRef} from '@mattermost/react-native-paste-input';
import React, {useCallback, useRef} from 'react';
import {LayoutChangeEvent, Platform, ScrollView, View} from 'react-native';
import {Edge, SafeAreaView} from 'react-native-safe-area-context';
@@ -21,7 +22,7 @@ type Props = {
currentUserId: string;
// Cursor Position Handler
updateCursorPosition: (pos: number) => void;
updateCursorPosition: React.Dispatch<React.SetStateAction<number>>;
cursorPosition: number;
// Send Handler
@@ -33,7 +34,7 @@ type Props = {
files: FileInfo[];
value: string;
uploadFileError: React.ReactNode;
updateValue: (value: string) => void;
updateValue: React.Dispatch<React.SetStateAction<string>>;
addFiles: (files: FileInfo[]) => void;
updatePostInputTop: (top: number) => void;
setIsFocused: (isFocused: boolean) => void;
@@ -103,6 +104,11 @@ export default function DraftInput({
updatePostInputTop(e.nativeEvent.layout.height);
}, []);
const inputRef = useRef<PasteInputRef>();
const focus = useCallback(() => {
inputRef.current?.focus();
}, []);
// Render
const postInputTestID = `${testID}.post.input`;
const quickActionsTestID = `${testID}.quick_actions`;
@@ -144,6 +150,7 @@ export default function DraftInput({
value={value}
addFiles={addFiles}
sendMessage={sendMessage}
inputRef={inputRef}
setIsFocused={setIsFocused}
/>
<Uploads
@@ -160,6 +167,7 @@ export default function DraftInput({
addFiles={addFiles}
updateValue={updateValue}
value={value}
focus={focus}
/>
<SendAction
testID={sendActionTestID}

22
app/components/post_draft/post_input/post_input.tsx
View File

@@ -34,11 +34,12 @@ type Props = {
enableUserTypingMessage: boolean;
membersInChannel: number;
value: string;
updateValue: (value: string) => void;
updateValue: React.Dispatch<React.SetStateAction<string>>;
addFiles: (files: ExtractedFileInfo[]) => void;
cursorPosition: number;
updateCursorPosition: (pos: number) => void;
updateCursorPosition: React.Dispatch<React.SetStateAction<number>>;
sendMessage: () => void;
inputRef: React.MutableRefObject<PasteInputRef | undefined>;
setIsFocused: (isFocused: boolean) => void;
}
@@ -109,6 +110,7 @@ export default function PostInput({
cursorPosition,
updateCursorPosition,
sendMessage,
inputRef,
setIsFocused,
}: Props) {
const intl = useIntl();
@@ -119,7 +121,7 @@ export default function PostInput({
const managedConfig = useManagedConfig<ManagedConfig>();
const lastTypingEventSent = useRef(0);
const input = useRef<PasteInputRef>();
const lastNativeValue = useRef('');
const previousAppState = useRef(AppState.currentState);
@@ -133,7 +135,7 @@ export default function PostInput({
}, [maxHeight, style.input]);
const blur = () => {
input.current?.blur();
inputRef.current?.blur();
};
const handleAndroidKeyboard = () => {
@@ -238,12 +240,12 @@ export default function PostInput({
sendMessage();
break;
case 'shift-enter':
updateValue(value.substring(0, cursorPosition) + '\n' + value.substring(cursorPosition));
updateCursorPosition(cursorPosition + 1);
updateValue((v) => v.substring(0, cursorPosition) + '\n' + v.substring(cursorPosition));
updateCursorPosition((pos) => pos + 1);
break;
}
}
}, [sendMessage, updateValue, value, cursorPosition, isTablet]);
}, [sendMessage, updateValue, cursorPosition, isTablet]);
const onAppStateChange = useCallback((appState: AppStateStatus) => {
if (appState !== 'active' && previousAppState.current === 'active') {
@@ -279,7 +281,7 @@ export default function PostInput({
const draft = value ? `${value} ${text} ` : `${text} `;
updateValue(draft);
updateCursorPosition(draft.length);
input.current?.focus();
inputRef.current?.focus();
}
});
return () => listener.remove();
@@ -288,7 +290,7 @@ export default function PostInput({
useEffect(() => {
if (value !== lastNativeValue.current) {
// May change when we implement Fabric
input.current?.setNativeProps({
inputRef.current?.setNativeProps({
text: value,
});
lastNativeValue.current = value;
@@ -306,7 +308,7 @@ export default function PostInput({
<PasteableTextInput
allowFontScaling={true}
testID={testID}
ref={input}
ref={inputRef}
disableCopyPaste={disableCopyAndPaste}
style={pasteInputStyle}
onChangeText={handleTextChange}

23
app/components/post_draft/quick_actions/input_quick_action/index.tsx
View File

@@ -13,8 +13,8 @@ type Props = {
testID?: string;
disabled?: boolean;
inputType: 'at' | 'slash';
onTextChange: (value: string) => void;
value: string;
updateValue: React.Dispatch<React.SetStateAction<string>>;
focus: () => void;
}
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
@@ -34,18 +34,19 @@ export default function InputQuickAction({
testID,
disabled,
inputType,
onTextChange,
value,
updateValue,
focus,
}: Props) {
const theme = useTheme();
const onPress = useCallback(() => {
let newValue = '/';
if (inputType === 'at') {
newValue = `${value}@`;
}
onTextChange(newValue);
}, [value, inputType]);
updateValue((v) => {
if (inputType === 'at') {
return `${v}@`;
}
return '/';
});
focus();
}, [inputType]);
const actionTestID = disabled ?
`${testID}.disabled` :

10
app/components/post_draft/quick_actions/quick_actions.tsx
View File

@@ -19,6 +19,7 @@ type Props = {
value: string;
updateValue: (value: string) => void;
addFiles: (file: FileInfo[]) => void;
focus: () => void;
}
const style = StyleSheet.create({
@@ -47,6 +48,7 @@ export default function QuickActions({
maxFileCount,
updateValue,
addFiles,
focus,
}: Props) {
const atDisabled = value[value.length - 1] === '@';
const slashDisabled = value.length > 0;
@@ -74,15 +76,15 @@ export default function QuickActions({
testID={atInputActionTestID}
disabled={atDisabled}
inputType='at'
onTextChange={updateValue}
value={value}
updateValue={updateValue}
focus={focus}
/>
<InputAction
testID={slashInputActionTestID}
disabled={slashDisabled}
inputType='slash'
onTextChange={updateValue}
value={''} // Only enabled when value == ''
updateValue={updateValue}
focus={focus}
/>
<FileAction
testID={fileActionTestID}

4
app/components/post_draft/send_handler/send_handler.tsx
View File

@@ -46,8 +46,8 @@ type Props = {
value: string;
files: FileInfo[];
clearDraft: () => void;
updateValue: (message: string) => void;
updateCursorPosition: (cursorPosition: number) => void;
updateValue: React.Dispatch<React.SetStateAction<string>>;
updateCursorPosition: React.Dispatch<React.SetStateAction<number>>;
updatePostInputTop: (top: number) => void;
addFiles: (file: FileInfo[]) => void;
uploadFileError: React.ReactNode;