Page Menu
Home
Phabricator
Search
Configure Global Search
Log In
Files
F3403262
D14019.id46123.diff
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
13 KB
Referenced Files
None
Subscribers
None
D14019.id46123.diff
View Options
diff --git a/native/chat/chat-input-bar.react.js b/native/chat/chat-input-bar.react.js
--- a/native/chat/chat-input-bar.react.js
+++ b/native/chat/chat-input-bar.react.js
@@ -268,7 +268,12 @@
+openCamera: () => mixed,
+navigation?: ChatNavigationProp<'MessageList'>,
};
-function ConnectedChatInputBarBase(props: ConnectedChatInputBarBaseProps) {
+function ConnectedChatInputBarBase({
+ threadInfo,
+ navigation,
+ openCamera,
+ onInputBarLayout,
+}: ConnectedChatInputBarBaseProps) {
const navContext = React.useContext(NavContext);
const keyboardState = React.useContext(KeyboardContext);
const inputState = React.useContext(InputStateContext);
@@ -278,8 +283,7 @@
state => state.currentUserInfo && state.currentUserInfo.id,
);
const draft = useSelector(
- state =>
- state.draftStore.drafts[draftKeyFromThreadID(props.threadInfo.id)] ?? '',
+ state => state.draftStore.drafts[draftKeyFromThreadID(threadInfo.id)] ?? '',
);
const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
const createThreadLoadingStatus = useSelector(
@@ -298,20 +302,20 @@
const colors = useColors();
const isActive = React.useMemo(
- () => props.threadInfo.id === activeThreadSelector(navContext),
- [props.threadInfo.id, navContext],
+ () => threadInfo.id === activeThreadSelector(navContext),
+ [threadInfo.id, navContext],
);
const dispatch = useDispatch();
const dispatchActionPromise = useDispatchActionPromise();
const rawThreadInfo = useSelector(
- state => state.threadStore.threadInfos[props.threadInfo.id],
+ state => state.threadStore.threadInfos[threadInfo.id],
);
const { getChatMentionSearchIndex } = useChatMentionContext();
- const chatMentionSearchIndex = getChatMentionSearchIndex(props.threadInfo);
+ const chatMentionSearchIndex = getChatMentionSearchIndex(threadInfo);
- const { parentThreadID, community } = props.threadInfo;
+ const { parentThreadID, community } = threadInfo;
const parentThreadInfo = useSelector(state =>
parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
);
@@ -320,30 +324,28 @@
);
const threadFrozen = useThreadFrozenDueToViewerBlock(
- props.threadInfo,
+ threadInfo,
communityThreadInfo,
viewerID,
userInfos,
);
const userMentionsCandidates = useUserMentionsCandidates(
- props.threadInfo,
+ threadInfo,
parentThreadInfo,
);
- const chatMentionCandidates = useThreadChatMentionCandidates(
- props.threadInfo,
- );
+ const chatMentionCandidates = useThreadChatMentionCandidates(threadInfo);
const messageEditingContext = React.useContext(MessageEditingContext);
const editedMessageInfo = messageEditingContext?.editState.editedMessage;
const editedMessagePreview = useMessagePreview(
editedMessageInfo,
- props.threadInfo,
+ threadInfo,
getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,
);
- const editMessage = useEditMessage(props.threadInfo);
+ const editMessage = useEditMessage(threadInfo);
const [selectionState, setSelectionState] =
React.useState<SyncedSelectionData>({
@@ -394,12 +396,12 @@
);
const currentUserIsVoiced = useThreadHasPermission(
- props.threadInfo,
+ threadInfo,
threadPermissions.VOICED,
);
const currentUserCanJoin = useThreadHasPermission(
- props.threadInfo,
+ threadInfo,
threadPermissions.JOIN_THREAD,
);
@@ -542,15 +544,14 @@
if (!threadCreationInProgress) {
return false;
}
- return checkIfDefaultMembersAreVoiced(props.threadInfo);
- }, [currentUserIsVoiced, props.threadInfo, threadCreationInProgress]);
+ return checkIfDefaultMembersAreVoiced(threadInfo);
+ }, [currentUserIsVoiced, threadInfo, threadCreationInProgress]);
const isEditMode = React.useCallback(() => {
const editState = messageEditingContext?.editState;
- const isThisThread =
- editState?.editedMessage?.threadID === props.threadInfo.id;
+ const isThisThread = editState?.editedMessage?.threadID === threadInfo.id;
return editState?.editedMessage !== null && isThisThread;
- }, [messageEditingContext?.editState, props.threadInfo.id]);
+ }, [messageEditingContext?.editState, threadInfo.id]);
const immediatelyShowSendButton = React.useCallback(() => {
sendButtonContainerOpen.setValue(1);
@@ -626,12 +627,12 @@
dispatch({
type: updateDraftActionType,
payload: {
- key: draftKeyFromThreadID(props.threadInfo.id),
+ key: draftKeyFromThreadID(threadInfo.id),
text: newText,
},
});
}, 400),
- [dispatch, props.threadInfo.id],
+ [dispatch, threadInfo.id],
);
const isMessageEdited = React.useCallback(
@@ -673,16 +674,11 @@
}, [immediatelyHideButtons, immediatelyShowSendButton]);
const unblockNavigation = React.useCallback(() => {
- const { navigation } = props;
- if (!navigation) {
- return;
- }
- navigation.setParams({ removeEditMode: null });
- }, [props]);
+ navigation?.setParams({ removeEditMode: null });
+ }, [navigation]);
const removeEditMode: RemoveEditMode = React.useCallback(
action => {
- const { navigation } = props;
if (!navigation || isExitingDuringEditModeRef.current) {
return 'ignore_action';
}
@@ -703,18 +699,17 @@
});
return 'ignore_action';
},
- [isMessageEdited, overlayContext, props, unblockNavigation],
+ [isMessageEdited, navigation, overlayContext, unblockNavigation],
);
const blockNavigation = React.useCallback(() => {
- const { navigation } = props;
if (!navigation || !navigation.isFocused()) {
return;
}
navigation.setParams({
removeEditMode: removeEditMode,
});
- }, [props, removeEditMode]);
+ }, [navigation, removeEditMode]);
const exitEditMode = React.useCallback(() => {
messageEditingContext?.setEditedMessage(null, () => {
@@ -842,12 +837,12 @@
{
type: messageTypes.TEXT,
localID,
- threadID: props.threadInfo.id,
+ threadID: threadInfo.id,
text: newText,
creatorID,
time: Date.now(),
},
- props.threadInfo,
+ threadInfo,
parentThreadInfo,
);
}, [
@@ -855,7 +850,7 @@
getEditedMessage,
inputState,
parentThreadInfo,
- props.threadInfo,
+ threadInfo,
text,
updateSendButton,
viewerID,
@@ -907,7 +902,7 @@
const saveExit = () => {
messageEditingContext?.setEditedMessage(null, () => {
isExitingDuringEditModeRef.current = true;
- props.navigation?.dispatch(action);
+ navigation?.dispatch(action);
});
};
if (!isMessageEdited()) {
@@ -918,7 +913,7 @@
onDiscard: saveExit,
});
},
- [isEditMode, isMessageEdited, messageEditingContext, props.navigation],
+ [isEditMode, isMessageEdited, messageEditingContext, navigation],
);
React.useEffect(() => {
@@ -934,8 +929,6 @@
}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);
React.useEffect(() => {
- const { navigation } = props;
-
const clearBeforeRemoveListener = navigation?.addListener(
'beforeRemove',
onNavigationBeforeRemove,
@@ -950,7 +943,12 @@
clearFocusListener?.();
clearBlurListener?.();
};
- }, [onNavigationBeforeRemove, onNavigationBlur, onNavigationFocus, props]);
+ }, [
+ navigation,
+ onNavigationBeforeRemove,
+ onNavigationBlur,
+ onNavigationFocus,
+ ]);
const callJoinThread = useJoinThread();
@@ -965,20 +963,20 @@
const query = calendarQuery();
joinThreadInput = {
thick: false,
- threadID: props.threadInfo.id,
+ threadID: threadInfo.id,
calendarQuery: {
startDate: query.startDate,
endDate: query.endDate,
filters: [
...query.filters,
- { type: 'threads', threadIDs: [props.threadInfo.id] },
+ { type: 'threads', threadIDs: [threadInfo.id] },
],
},
};
}
return await callJoinThread(joinThreadInput);
- }, [calendarQuery, callJoinThread, props.threadInfo.id, rawThreadInfo]);
+ }, [calendarQuery, callJoinThread, threadInfo.id, rawThreadInfo]);
const onPressJoin = React.useCallback(() => {
void dispatchActionPromise(joinThreadActionTypes, joinAction());
@@ -1001,8 +999,8 @@
const showMediaGallery = React.useCallback(() => {
invariant(keyboardState, 'keyboardState should be initialized');
- keyboardState.showMediaGallery(props.threadInfo);
- }, [keyboardState, props.threadInfo]);
+ keyboardState.showMediaGallery(threadInfo);
+ }, [keyboardState, threadInfo]);
const dismissKeyboard = React.useCallback(() => {
keyboardState?.dismissKeyboard();
@@ -1016,21 +1014,21 @@
textEdited &&
text &&
prevThreadInfoID.current &&
- props.threadInfo.id !== prevThreadInfoID.current
+ threadInfo.id !== prevThreadInfoID.current
) {
dispatch({
type: moveDraftActionType,
payload: {
oldKey: draftKeyFromThreadID(prevThreadInfoID.current),
- newKey: draftKeyFromThreadID(props.threadInfo.id),
+ newKey: draftKeyFromThreadID(threadInfo.id),
},
});
} else if (!textEdited && draft !== prevDraft.current) {
setText(draft);
}
- prevThreadInfoID.current = props.threadInfo.id;
+ prevThreadInfoID.current = threadInfo.id;
prevDraft.current = draft;
- }, [dispatch, draft, props.threadInfo.id, text, textEdited]);
+ }, [dispatch, draft, threadInfo.id, text, textEdited]);
const prevIsActiveRef = React.useRef(isActive);
React.useEffect(() => {
@@ -1104,12 +1102,12 @@
<SWMansionIcon
name="chevron-right"
size={22}
- color={`#${props.threadInfo.color}`}
+ color={`#${threadInfo.color}`}
/>
</AnimatedView>
</TouchableOpacity>
);
- const threadColor = `#${props.threadInfo.color}`;
+ const threadColor = `#${threadInfo.color}`;
const expandoButtonsViewStyle: Array<ViewStyle> = [
styles.innerExpandoButtons,
];
@@ -1127,12 +1125,12 @@
<SWMansionIcon
name="image-1"
size={28}
- color={`#${props.threadInfo.color}`}
+ color={`#${threadInfo.color}`}
/>
</AnimatedView>
</TouchableOpacity>
<TouchableOpacity
- onPress={props.openCamera}
+ onPress={openCamera}
activeOpacity={0.4}
disabled={!buttonsExpanded}
>
@@ -1140,7 +1138,7 @@
<SWMansionIcon
name="camera"
size={28}
- color={`#${props.threadInfo.color}`}
+ color={`#${threadInfo.color}`}
/>
</AnimatedView>
</TouchableOpacity>
@@ -1148,7 +1146,7 @@
</View>
</AnimatedView>
<SelectableTextInput
- allowImagePasteForThreadID={props.threadInfo.id}
+ allowImagePasteForThreadID={threadInfo.id}
value={text}
onChangeText={updateText}
selection={selectionState.selection}
@@ -1160,7 +1158,7 @@
textInputRef={setTextInputRef}
clearableTextInputRef={setClearableTextInputRef}
ref={selectableTextInputRef}
- selectionColor={`#${props.threadInfo.color}`}
+ selectionColor={`#${threadInfo.color}`}
/>
<AnimatedView style={sendButtonContainerStyle}>
<TouchableOpacity
@@ -1182,9 +1180,9 @@
);
};
- const isMember = viewerIsMember(props.threadInfo);
+ const isMember = viewerIsMember(threadInfo);
let joinButton = null;
- const threadColor = `#${props.threadInfo.color}`;
+ const threadColor = `#${threadInfo.color}`;
if (!isMember && currentUserCanJoin && !threadCreationInProgress) {
let buttonContent;
@@ -1197,7 +1195,7 @@
/>
);
} else {
- const textStyle = colorIsDark(props.threadInfo.color)
+ const textStyle = colorIsDark(threadInfo.color)
? styles.joinButtonTextLight
: styles.joinButtonTextDark;
buttonContent = (
@@ -1236,14 +1234,12 @@
}
let content;
- const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(
- props.threadInfo,
- );
+ const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(threadInfo);
if (shouldShowTextInput()) {
content = renderInput();
} else if (
threadFrozen &&
- threadActualMembers(props.threadInfo.members).length === 2
+ threadActualMembers(threadInfo.members).length === 2
) {
content = (
<Text style={styles.explanation}>
@@ -1302,7 +1298,7 @@
}
return (
- <AnimatedView style={styles.container} onLayout={props.onInputBarLayout}>
+ <AnimatedView style={styles.container} onLayout={onInputBarLayout}>
{typeaheadTooltip}
{joinButton}
{editedMessage}
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Wed, Dec 4, 2:40 AM (5 h, 30 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2603023
Default Alt Text
D14019.id46123.diff (13 KB)
Attached To
Mode
D14019: [native] Use destructuring syntax in ChatInputBar component
Attached
Detach File
Event Timeline
Log In to Comment