Diff 47359

.buildkite/android.yml

Show First 20 Lines • Show All 262 Lines • ▼ Show 20 Lines	const createThreadLoadingStatusSelector =
createLoadingStatusSelector(newThreadActionTypes);		createLoadingStatusSelector(newThreadActionTypes);

type ConnectedChatInputBarBaseProps = {		type ConnectedChatInputBarBaseProps = {
...BaseProps,		...BaseProps,
+onInputBarLayout?: (event: LayoutEvent) => mixed,		+onInputBarLayout?: (event: LayoutEvent) => mixed,
+openCamera: () => mixed,		+openCamera: () => mixed,
+navigation?: ChatNavigationProp<'MessageList'>,		+navigation?: ChatNavigationProp<'MessageList'>,
};		};
function ConnectedChatInputBarBase(props: ConnectedChatInputBarBaseProps) {		function ConnectedChatInputBarBase({
		threadInfo,
		navigation,
		openCamera,
		onInputBarLayout,
		}: ConnectedChatInputBarBaseProps) {
const navContext = React.useContext(NavContext);		const navContext = React.useContext(NavContext);
const keyboardState = React.useContext(KeyboardContext);		const keyboardState = React.useContext(KeyboardContext);
const inputState = React.useContext(InputStateContext);		const inputState = React.useContext(InputStateContext);
const overlayContext = React.useContext(OverlayContext);		const overlayContext = React.useContext(OverlayContext);

const viewerID = useSelector(		const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,		state => state.currentUserInfo && state.currentUserInfo.id,
);		);
const draft = useSelector(		const draft = useSelector(
state =>		state => state.draftStore.drafts[draftKeyFromThreadID(threadInfo.id)] ?? '',
state.draftStore.drafts[draftKeyFromThreadID(props.threadInfo.id)] ?? '',
);		);
const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);		const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
const createThreadLoadingStatus = useSelector(		const createThreadLoadingStatus = useSelector(
createThreadLoadingStatusSelector,		createThreadLoadingStatusSelector,
);		);
const threadCreationInProgress = createThreadLoadingStatus === 'loading';		const threadCreationInProgress = createThreadLoadingStatus === 'loading';
const calendarQuery = useSelector(state =>		const calendarQuery = useSelector(state =>
nonThreadCalendarQuery({		nonThreadCalendarQuery({
redux: state,		redux: state,
navContext,		navContext,
}),		}),
);		);
const userInfos = useSelector(state => state.userStore.userInfos);		const userInfos = useSelector(state => state.userStore.userInfos);

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
const colors = useColors();		const colors = useColors();

const isActive = React.useMemo(		const isActive = React.useMemo(
() => props.threadInfo.id === activeThreadSelector(navContext),		() => threadInfo.id === activeThreadSelector(navContext),
[props.threadInfo.id, navContext],		[threadInfo.id, navContext],
);		);

const dispatch = useDispatch();		const dispatch = useDispatch();
const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const rawThreadInfo = useSelector(		const rawThreadInfo = useSelector(
state => state.threadStore.threadInfos[props.threadInfo.id],		state => state.threadStore.threadInfos[threadInfo.id],
);		);

const { getChatMentionSearchIndex } = useChatMentionContext();		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 =>		const parentThreadInfo = useSelector(state =>
parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,		parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
);		);
const communityThreadInfo = useSelector(state =>		const communityThreadInfo = useSelector(state =>
community ? threadInfoSelector(state)[community] : null,		community ? threadInfoSelector(state)[community] : null,
);		);

const threadFrozen = useThreadFrozenDueToViewerBlock(		const threadFrozen = useThreadFrozenDueToViewerBlock(
props.threadInfo,		threadInfo,
communityThreadInfo,		communityThreadInfo,
viewerID,		viewerID,
userInfos,		userInfos,
);		);

const userMentionsCandidates = useUserMentionsCandidates(		const userMentionsCandidates = useUserMentionsCandidates(
props.threadInfo,		threadInfo,
parentThreadInfo,		parentThreadInfo,
);		);

const chatMentionCandidates = useThreadChatMentionCandidates(		const chatMentionCandidates = useThreadChatMentionCandidates(threadInfo);
props.threadInfo,
);

const messageEditingContext = React.useContext(MessageEditingContext);		const messageEditingContext = React.useContext(MessageEditingContext);

const editedMessageInfo = messageEditingContext?.editState.editedMessage;		const editedMessageInfo = messageEditingContext?.editState.editedMessage;
const editedMessagePreview = useMessagePreview(		const editedMessagePreview = useMessagePreview(
editedMessageInfo,		editedMessageInfo,
props.threadInfo,		threadInfo,
getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,		getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,
);		);
const editMessage = useEditMessage(props.threadInfo);		const editMessage = useEditMessage(threadInfo);

const [selectionState, setSelectionState] =		const [selectionState, setSelectionState] =
React.useState<SyncedSelectionData>({		React.useState<SyncedSelectionData>({
text: draft,		text: draft,
selection: { start: 0, end: 0 },		selection: { start: 0, end: 0 },
});		});

const [text, setText] = React.useState(draft);		const [text, setText] = React.useState(draft);
Show All 34 Lines	function ConnectedChatInputBarBase({

const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =		const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =
React.useMemo(		React.useMemo(
() => [...suggestedUsers, ...suggestedChats],		() => [...suggestedUsers, ...suggestedChats],
[suggestedUsers, suggestedChats],		[suggestedUsers, suggestedChats],
);		);

const currentUserIsVoiced = useThreadHasPermission(		const currentUserIsVoiced = useThreadHasPermission(
props.threadInfo,		threadInfo,
threadPermissions.VOICED,		threadPermissions.VOICED,
);		);

const currentUserCanJoin = useThreadHasPermission(		const currentUserCanJoin = useThreadHasPermission(
props.threadInfo,		threadInfo,
threadPermissions.JOIN_THREAD,		threadPermissions.JOIN_THREAD,
);		);

const isExitingDuringEditModeRef = React.useRef(false);		const isExitingDuringEditModeRef = React.useRef(false);

const expandoButtonsOpen = useValue(1);		const expandoButtonsOpen = useValue(1);
const targetExpandoButtonsOpen = useValue(1);		const targetExpandoButtonsOpen = useValue(1);

▲ Show 20 Lines • Show All 126 Lines • ▼ Show 20 Lines	const shouldShowTextInput = React.useCallback(() => {
// and won't list the viewer as a member,		// and won't list the viewer as a member,
// which will end up hiding the input.		// which will end up hiding the input.
// In this case, we will assume that our creation action		// In this case, we will assume that our creation action
// will get translated into a join, and as long		// will get translated into a join, and as long
// as members are voiced, we can show the input.		// as members are voiced, we can show the input.
if (!threadCreationInProgress) {		if (!threadCreationInProgress) {
return false;		return false;
}		}
return checkIfDefaultMembersAreVoiced(props.threadInfo);		return checkIfDefaultMembersAreVoiced(threadInfo);
}, [currentUserIsVoiced, props.threadInfo, threadCreationInProgress]);		}, [currentUserIsVoiced, threadInfo, threadCreationInProgress]);

const isEditMode = React.useCallback(() => {		const isEditMode = React.useCallback(() => {
const editState = messageEditingContext?.editState;		const editState = messageEditingContext?.editState;
const isThisThread =		const isThisThread = editState?.editedMessage?.threadID === threadInfo.id;
editState?.editedMessage?.threadID === props.threadInfo.id;
return editState?.editedMessage !== null && isThisThread;		return editState?.editedMessage !== null && isThisThread;
}, [messageEditingContext?.editState, props.threadInfo.id]);		}, [messageEditingContext?.editState, threadInfo.id]);

const immediatelyShowSendButton = React.useCallback(() => {		const immediatelyShowSendButton = React.useCallback(() => {
sendButtonContainerOpen.setValue(1);		sendButtonContainerOpen.setValue(1);
targetSendButtonContainerOpen.setValue(1);		targetSendButtonContainerOpen.setValue(1);
}, [sendButtonContainerOpen, targetSendButtonContainerOpen]);		}, [sendButtonContainerOpen, targetSendButtonContainerOpen]);

const updateSendButton = React.useCallback(		const updateSendButton = React.useCallback(
(currentText: string) => {		(currentText: string) => {
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines	function ConnectedChatInputBarBase({
);		);

const saveDraft = React.useMemo(		const saveDraft = React.useMemo(
() =>		() =>
_throttle(newText => {		_throttle(newText => {
dispatch({		dispatch({
type: updateDraftActionType,		type: updateDraftActionType,
payload: {		payload: {
key: draftKeyFromThreadID(props.threadInfo.id),		key: draftKeyFromThreadID(threadInfo.id),
text: newText,		text: newText,
},		},
});		});
}, 400),		}, 400),
[dispatch, props.threadInfo.id],		[dispatch, threadInfo.id],
);		);

const isMessageEdited = React.useCallback(		const isMessageEdited = React.useCallback(
(newText?: string): boolean => {		(newText?: string): boolean => {
let updatedText = newText ?? text;		let updatedText = newText ?? text;
updatedText = trimMessage(updatedText);		updatedText = trimMessage(updatedText);
const originalText = editedMessageInfo?.text;		const originalText = editedMessageInfo?.text;
return updatedText !== originalText;		return updatedText !== originalText;
Show All 25 Lines	const focusAndUpdateButtonsVisibility = React.useCallback(() => {
}		}

immediatelyShowSendButton();		immediatelyShowSendButton();
immediatelyHideButtons();		immediatelyHideButtons();
textInput.focus();		textInput.focus();
}, [immediatelyHideButtons, immediatelyShowSendButton]);		}, [immediatelyHideButtons, immediatelyShowSendButton]);

const blockNavigation = React.useCallback(() => {		const blockNavigation = React.useCallback(() => {
const { navigation } = props;
if (!navigation \|\| !navigation.isFocused()) {		if (!navigation \|\| !navigation.isFocused()) {
return;		return;
}		}
navigation.setParams({		navigation.setParams({
removeEditMode: removeEditMode,		removeEditMode: removeEditMode,
});		});
}, [props, removeEditMode]);		}, [navigation, removeEditMode]);

const unblockNavigation = React.useCallback(() => {		const unblockNavigation = React.useCallback(() => {
const { navigation } = props;		navigation?.setParams({ removeEditMode: null });
if (!navigation) {		}, [navigation]);
return;
}
navigation.setParams({ removeEditMode: null });
}, [props]);

const exitEditMode = React.useCallback(() => {		const exitEditMode = React.useCallback(() => {
messageEditingContext?.setEditedMessage(null, () => {		messageEditingContext?.setEditedMessage(null, () => {
unblockNavigation();		unblockNavigation();
updateText(draft);		updateText(draft);
focusAndUpdateButtonsVisibility();		focusAndUpdateButtonsVisibility();
updateSendButton(draft);		updateSendButton(draft);
});		});
▲ Show 20 Lines • Show All 111 Lines • ▼ Show 20 Lines	const onSend = React.useCallback(async () => {
const creatorID = viewerID;		const creatorID = viewerID;
invariant(creatorID, 'should have viewer ID in order to send a message');		invariant(creatorID, 'should have viewer ID in order to send a message');
invariant(inputState, 'inputState should be set in ChatInputBar.onSend');		invariant(inputState, 'inputState should be set in ChatInputBar.onSend');

await inputState.sendTextMessage(		await inputState.sendTextMessage(
{		{
type: messageTypes.TEXT,		type: messageTypes.TEXT,
localID,		localID,
threadID: props.threadInfo.id,		threadID: threadInfo.id,
text: newText,		text: newText,
creatorID,		creatorID,
time: Date.now(),		time: Date.now(),
},		},
props.threadInfo,		threadInfo,
parentThreadInfo,		parentThreadInfo,
);		);
}, [		}, [
editMessageInner,		editMessageInner,
getEditedMessage,		getEditedMessage,
inputState,		inputState,
parentThreadInfo,		parentThreadInfo,
props.threadInfo,		threadInfo,
text,		text,
updateSendButton,		updateSendButton,
viewerID,		viewerID,
]);		]);

const removeEditMode: RemoveEditMode = React.useCallback(		const removeEditMode: RemoveEditMode = React.useCallback(
action => {		action => {
const { navigation } = props;
if (!navigation \|\| isExitingDuringEditModeRef.current) {		if (!navigation \|\| isExitingDuringEditModeRef.current) {
return 'ignore_action';		return 'ignore_action';
}		}
if (!isMessageEdited()) {		if (!isMessageEdited()) {
unblockNavigation();		unblockNavigation();
return 'reduce_action';		return 'reduce_action';
}		}
const unblockAndDispatch = () => {		const unblockAndDispatch = () => {
unblockNavigation();		unblockNavigation();
navigation.dispatch(action);		navigation.dispatch(action);
};		};
const onContinueEditing = () => {		const onContinueEditing = () => {
overlayContext?.resetScrollBlockingModalStatus();		overlayContext?.resetScrollBlockingModalStatus();
};		};
exitEditAlert({		exitEditAlert({
onDiscard: unblockAndDispatch,		onDiscard: unblockAndDispatch,
onContinueEditing,		onContinueEditing,
});		});
return 'ignore_action';		return 'ignore_action';
},		},
[isMessageEdited, overlayContext, props, unblockNavigation],		[isMessageEdited, navigation, overlayContext, unblockNavigation],
);		);

const onPressExitEditMode = React.useCallback(() => {		const onPressExitEditMode = React.useCallback(() => {
if (!isMessageEdited()) {		if (!isMessageEdited()) {
exitEditMode();		exitEditMode();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
Show All 32 Lines	(e: {
if (!isEditMode()) {		if (!isEditMode()) {
return;		return;
}		}
const { action } = e.data;		const { action } = e.data;
e.preventDefault();		e.preventDefault();
const saveExit = () => {		const saveExit = () => {
messageEditingContext?.setEditedMessage(null, () => {		messageEditingContext?.setEditedMessage(null, () => {
isExitingDuringEditModeRef.current = true;		isExitingDuringEditModeRef.current = true;
props.navigation?.dispatch(action);		navigation?.dispatch(action);
});		});
};		};
if (!isMessageEdited()) {		if (!isMessageEdited()) {
saveExit();		saveExit();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
onDiscard: saveExit,		onDiscard: saveExit,
});		});
},		},
[isEditMode, isMessageEdited, messageEditingContext, props.navigation],		[isEditMode, isMessageEdited, messageEditingContext, navigation],
);		);

React.useEffect(() => {		React.useEffect(() => {
if (isActive) {		if (isActive) {
addEditInputMessageListener();		addEditInputMessageListener();
}		}

return () => {		return () => {
if (isActive) {		if (isActive) {
removeEditInputMessageListener();		removeEditInputMessageListener();
}		}
};		};
}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);		}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);

React.useEffect(() => {		React.useEffect(() => {
const { navigation } = props;

const clearBeforeRemoveListener = navigation?.addListener(		const clearBeforeRemoveListener = navigation?.addListener(
'beforeRemove',		'beforeRemove',
onNavigationBeforeRemove,		onNavigationBeforeRemove,
);		);
const clearFocusListener = navigation?.addListener(		const clearFocusListener = navigation?.addListener(
'focus',		'focus',
onNavigationFocus,		onNavigationFocus,
);		);
const clearBlurListener = navigation?.addListener('blur', onNavigationBlur);		const clearBlurListener = navigation?.addListener('blur', onNavigationBlur);
return () => {		return () => {
clearBeforeRemoveListener?.();		clearBeforeRemoveListener?.();
clearFocusListener?.();		clearFocusListener?.();
clearBlurListener?.();		clearBlurListener?.();
};		};
}, [onNavigationBeforeRemove, onNavigationBlur, onNavigationFocus, props]);		}, [
		navigation,
		onNavigationBeforeRemove,
		onNavigationBlur,
		onNavigationFocus,
		]);

const callJoinThread = useJoinThread();		const callJoinThread = useJoinThread();

const joinAction = React.useCallback(async (): Promise<ThreadJoinPayload> => {		const joinAction = React.useCallback(async (): Promise<ThreadJoinPayload> => {
let joinThreadInput;		let joinThreadInput;
if (rawThreadInfo.thick) {		if (rawThreadInfo.thick) {
joinThreadInput = {		joinThreadInput = {
thick: true,		thick: true,
rawThreadInfo: rawThreadInfo,		rawThreadInfo: rawThreadInfo,
};		};
} else {		} else {
const query = calendarQuery();		const query = calendarQuery();
joinThreadInput = {		joinThreadInput = {
thick: false,		thick: false,
threadID: props.threadInfo.id,		threadID: threadInfo.id,
calendarQuery: {		calendarQuery: {
startDate: query.startDate,		startDate: query.startDate,
endDate: query.endDate,		endDate: query.endDate,
filters: [		filters: [
...query.filters,		...query.filters,
{ type: 'threads', threadIDs: [props.threadInfo.id] },		{ type: 'threads', threadIDs: [threadInfo.id] },
],		],
},		},
};		};
}		}

return await callJoinThread(joinThreadInput);		return await callJoinThread(joinThreadInput);
}, [calendarQuery, callJoinThread, props.threadInfo.id, rawThreadInfo]);		}, [calendarQuery, callJoinThread, threadInfo.id, rawThreadInfo]);

const onPressJoin = React.useCallback(() => {		const onPressJoin = React.useCallback(() => {
void dispatchActionPromise(joinThreadActionTypes, joinAction());		void dispatchActionPromise(joinThreadActionTypes, joinAction());
}, [dispatchActionPromise, joinAction]);		}, [dispatchActionPromise, joinAction]);

const setIOSKeyboardHeight = React.useCallback(() => {		const setIOSKeyboardHeight = React.useCallback(() => {
if (Platform.OS !== 'ios') {		if (Platform.OS !== 'ios') {
return;		return;
}		}
const textInput = textInputRef.current;		const textInput = textInputRef.current;
if (!textInput) {		if (!textInput) {
return;		return;
}		}
const keyboardHeight = getKeyboardHeight();		const keyboardHeight = getKeyboardHeight();
if (keyboardHeight === null \|\| keyboardHeight === undefined) {		if (keyboardHeight === null \|\| keyboardHeight === undefined) {
return;		return;
}		}
TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);		TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);
}, []);		}, []);

const showMediaGallery = React.useCallback(() => {		const showMediaGallery = React.useCallback(() => {
invariant(keyboardState, 'keyboardState should be initialized');		invariant(keyboardState, 'keyboardState should be initialized');
keyboardState.showMediaGallery(props.threadInfo);		keyboardState.showMediaGallery(threadInfo);
}, [keyboardState, props.threadInfo]);		}, [keyboardState, threadInfo]);

const dismissKeyboard = React.useCallback(() => {		const dismissKeyboard = React.useCallback(() => {
keyboardState?.dismissKeyboard();		keyboardState?.dismissKeyboard();
}, [keyboardState]);		}, [keyboardState]);

const prevThreadInfoID = React.useRef<?string>();		const prevThreadInfoID = React.useRef<?string>();
const prevDraft = React.useRef<?string>();		const prevDraft = React.useRef<?string>();

React.useEffect(() => {		React.useEffect(() => {
if (		if (
textEdited &&		textEdited &&
text &&		text &&
prevThreadInfoID.current &&		prevThreadInfoID.current &&
props.threadInfo.id !== prevThreadInfoID.current		threadInfo.id !== prevThreadInfoID.current
) {		) {
dispatch({		dispatch({
type: moveDraftActionType,		type: moveDraftActionType,
payload: {		payload: {
oldKey: draftKeyFromThreadID(prevThreadInfoID.current),		oldKey: draftKeyFromThreadID(prevThreadInfoID.current),
newKey: draftKeyFromThreadID(props.threadInfo.id),		newKey: draftKeyFromThreadID(threadInfo.id),
},		},
});		});
} else if (!textEdited && draft !== prevDraft.current) {		} else if (!textEdited && draft !== prevDraft.current) {
setText(draft);		setText(draft);
}		}
prevThreadInfoID.current = props.threadInfo.id;		prevThreadInfoID.current = threadInfo.id;
prevDraft.current = draft;		prevDraft.current = draft;
}, [dispatch, draft, props.threadInfo.id, text, textEdited]);		}, [dispatch, draft, threadInfo.id, text, textEdited]);

const prevIsActiveRef = React.useRef(isActive);		const prevIsActiveRef = React.useRef(isActive);
React.useEffect(() => {		React.useEffect(() => {
if (isActive && !prevIsActiveRef.current) {		if (isActive && !prevIsActiveRef.current) {
addEditInputMessageListener();		addEditInputMessageListener();
} else if (!isActive && prevIsActiveRef) {		} else if (!isActive && prevIsActiveRef) {
removeEditInputMessageListener();		removeEditInputMessageListener();
}		}
▲ Show 20 Lines • Show All 57 Lines • ▼ Show 20 Lines	const expandoButton = (
onPress={expandButtons}		onPress={expandButtons}
activeOpacity={0.4}		activeOpacity={0.4}
style={styles.expandButton}		style={styles.expandButton}
>		>
<AnimatedView style={expandIconStyle}>		<AnimatedView style={expandIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="chevron-right"		name="chevron-right"
size={22}		size={22}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
);		);
const threadColor = `#${props.threadInfo.color}`;		const threadColor = `#${threadInfo.color}`;
const expandoButtonsViewStyle: Array<ViewStyle> = [		const expandoButtonsViewStyle: Array<ViewStyle> = [
styles.innerExpandoButtons,		styles.innerExpandoButtons,
];		];
if (isEditMode()) {		if (isEditMode()) {
expandoButtonsViewStyle.push({ display: 'none' });		expandoButtonsViewStyle.push({ display: 'none' });
}		}
return (		return (
<TouchableWithoutFeedback onPress={dismissKeyboard}>		<TouchableWithoutFeedback onPress={dismissKeyboard}>
<View style={styles.inputContainer}>		<View style={styles.inputContainer}>
<AnimatedView style={expandoButtonsStyle}>		<AnimatedView style={expandoButtonsStyle}>
<View style={expandoButtonsViewStyle}>		<View style={expandoButtonsViewStyle}>
{buttonsExpanded ? expandoButton : null}		{buttonsExpanded ? expandoButton : null}
<TouchableOpacity onPress={showMediaGallery} activeOpacity={0.4}>		<TouchableOpacity onPress={showMediaGallery} activeOpacity={0.4}>
<AnimatedView style={cameraRollIconStyle}>		<AnimatedView style={cameraRollIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="image-1"		name="image-1"
size={28}		size={28}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
<TouchableOpacity		<TouchableOpacity
onPress={props.openCamera}		onPress={openCamera}
activeOpacity={0.4}		activeOpacity={0.4}
disabled={!buttonsExpanded}		disabled={!buttonsExpanded}
>		>
<AnimatedView style={cameraIconStyle}>		<AnimatedView style={cameraIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="camera"		name="camera"
size={28}		size={28}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
{buttonsExpanded ? null : expandoButton}		{buttonsExpanded ? null : expandoButton}
</View>		</View>
</AnimatedView>		</AnimatedView>
<SelectableTextInput		<SelectableTextInput
allowImagePasteForThreadID={props.threadInfo.id}		allowImagePasteForThreadID={threadInfo.id}
value={text}		value={text}
onChangeText={updateText}		onChangeText={updateText}
selection={selectionState.selection}		selection={selectionState.selection}
onUpdateSyncedSelectionData={setSelectionState}		onUpdateSyncedSelectionData={setSelectionState}
placeholder="Send a message..."		placeholder="Send a message..."
placeholderTextColor={colors.listInputButton}		placeholderTextColor={colors.listInputButton}
multiline={true}		multiline={true}
style={styles.textInput}		style={styles.textInput}
textInputRef={setTextInputRef}		textInputRef={setTextInputRef}
clearableTextInputRef={setClearableTextInputRef}		clearableTextInputRef={setClearableTextInputRef}
ref={selectableTextInputRef}		ref={selectableTextInputRef}
selectionColor={`#${props.threadInfo.color}`}		selectionColor={`#${threadInfo.color}`}
/>		/>
<AnimatedView style={sendButtonContainerStyle}>		<AnimatedView style={sendButtonContainerStyle}>
<TouchableOpacity		<TouchableOpacity
onPress={onSend}		onPress={onSend}
activeOpacity={0.4}		activeOpacity={0.4}
style={styles.sendButton}		style={styles.sendButton}
disabled={trimMessage(text) === ''}		disabled={trimMessage(text) === ''}
>		>
<Icon		<Icon
name="md-send"		name="md-send"
size={25}		size={25}
style={styles.sendIcon}		style={styles.sendIcon}
color={threadColor}		color={threadColor}
/>		/>
</TouchableOpacity>		</TouchableOpacity>
</AnimatedView>		</AnimatedView>
</View>		</View>
</TouchableWithoutFeedback>		</TouchableWithoutFeedback>
);		);
};		};

const isMember = viewerIsMember(props.threadInfo);		const isMember = viewerIsMember(threadInfo);
let joinButton = null;		let joinButton = null;
const threadColor = `#${props.threadInfo.color}`;		const threadColor = `#${threadInfo.color}`;

if (!isMember && currentUserCanJoin && !threadCreationInProgress) {		if (!isMember && currentUserCanJoin && !threadCreationInProgress) {
let buttonContent;		let buttonContent;
if (joinThreadLoadingStatus === 'loading') {		if (joinThreadLoadingStatus === 'loading') {
buttonContent = (		buttonContent = (
<ActivityIndicator		<ActivityIndicator
size="small"		size="small"
color="white"		color="white"
style={styles.joinThreadLoadingIndicator}		style={styles.joinThreadLoadingIndicator}
/>		/>
);		);
} else {		} else {
const textStyle = colorIsDark(props.threadInfo.color)		const textStyle = colorIsDark(threadInfo.color)
? styles.joinButtonTextLight		? styles.joinButtonTextLight
: styles.joinButtonTextDark;		: styles.joinButtonTextDark;
buttonContent = (		buttonContent = (
<View style={styles.joinButtonContent}>		<View style={styles.joinButtonContent}>
<SWMansionIcon name="plus" style={textStyle} />		<SWMansionIcon name="plus" style={textStyle} />
<Text style={textStyle}>Join Chat</Text>		<Text style={textStyle}>Join Chat</Text>
</View>		</View>
);		);
Show All 22 Lines	typeaheadTooltip = (
focusAndUpdateTextAndSelection={focusAndUpdateTextAndSelection}		focusAndUpdateTextAndSelection={focusAndUpdateTextAndSelection}
typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}		typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}
TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}		TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}
/>		/>
);		);
}		}

let content;		let content;
const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(		const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(threadInfo);
props.threadInfo,
);
if (shouldShowTextInput()) {		if (shouldShowTextInput()) {
content = renderInput();		content = renderInput();
} else if (		} else if (
threadFrozen &&		threadFrozen &&
threadActualMembers(props.threadInfo.members).length === 2		threadActualMembers(threadInfo.members).length === 2
) {		) {
content = (		content = (
<Text style={styles.explanation}>		<Text style={styles.explanation}>
You can’t send messages to a user that you’ve blocked.		You can’t send messages to a user that you’ve blocked.
</Text>		</Text>
);		);
} else if (isMember) {		} else if (isMember) {
content = (		content = (
▲ Show 20 Lines • Show All 42 Lines • ▼ Show 20 Lines	editedMessage = (
color={threadColor}		color={threadColor}
onPress={onPressExitEditMode}		onPress={onPressExitEditMode}
/>		/>
</AnimatedView>		</AnimatedView>
);		);
}		}

return (		return (
<AnimatedView style={styles.container} onLayout={props.onInputBarLayout}>		<AnimatedView style={styles.container} onLayout={onInputBarLayout}>
{typeaheadTooltip}		{typeaheadTooltip}
{joinButton}		{joinButton}
{editedMessage}		{editedMessage}
{content}		{content}
{keyboardInputHost}		{keyboardInputHost}
</AnimatedView>		</AnimatedView>
);		);
}		}
▲ Show 20 Lines • Show All 114 Lines • Show Last 20 Lines

View Options

.buildkite/eslint_flow_jest.yml

Show First 20 Lines • Show All 262 Lines • ▼ Show 20 Lines	const createThreadLoadingStatusSelector =
createLoadingStatusSelector(newThreadActionTypes);		createLoadingStatusSelector(newThreadActionTypes);

type ConnectedChatInputBarBaseProps = {		type ConnectedChatInputBarBaseProps = {
...BaseProps,		...BaseProps,
+onInputBarLayout?: (event: LayoutEvent) => mixed,		+onInputBarLayout?: (event: LayoutEvent) => mixed,
+openCamera: () => mixed,		+openCamera: () => mixed,
+navigation?: ChatNavigationProp<'MessageList'>,		+navigation?: ChatNavigationProp<'MessageList'>,
};		};
function ConnectedChatInputBarBase(props: ConnectedChatInputBarBaseProps) {		function ConnectedChatInputBarBase({
		threadInfo,
		navigation,
		openCamera,
		onInputBarLayout,
		}: ConnectedChatInputBarBaseProps) {
const navContext = React.useContext(NavContext);		const navContext = React.useContext(NavContext);
const keyboardState = React.useContext(KeyboardContext);		const keyboardState = React.useContext(KeyboardContext);
const inputState = React.useContext(InputStateContext);		const inputState = React.useContext(InputStateContext);
const overlayContext = React.useContext(OverlayContext);		const overlayContext = React.useContext(OverlayContext);

const viewerID = useSelector(		const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,		state => state.currentUserInfo && state.currentUserInfo.id,
);		);
const draft = useSelector(		const draft = useSelector(
state =>		state => state.draftStore.drafts[draftKeyFromThreadID(threadInfo.id)] ?? '',
state.draftStore.drafts[draftKeyFromThreadID(props.threadInfo.id)] ?? '',
);		);
const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);		const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
const createThreadLoadingStatus = useSelector(		const createThreadLoadingStatus = useSelector(
createThreadLoadingStatusSelector,		createThreadLoadingStatusSelector,
);		);
const threadCreationInProgress = createThreadLoadingStatus === 'loading';		const threadCreationInProgress = createThreadLoadingStatus === 'loading';
const calendarQuery = useSelector(state =>		const calendarQuery = useSelector(state =>
nonThreadCalendarQuery({		nonThreadCalendarQuery({
redux: state,		redux: state,
navContext,		navContext,
}),		}),
);		);
const userInfos = useSelector(state => state.userStore.userInfos);		const userInfos = useSelector(state => state.userStore.userInfos);

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
const colors = useColors();		const colors = useColors();

const isActive = React.useMemo(		const isActive = React.useMemo(
() => props.threadInfo.id === activeThreadSelector(navContext),		() => threadInfo.id === activeThreadSelector(navContext),
[props.threadInfo.id, navContext],		[threadInfo.id, navContext],
);		);

const dispatch = useDispatch();		const dispatch = useDispatch();
const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const rawThreadInfo = useSelector(		const rawThreadInfo = useSelector(
state => state.threadStore.threadInfos[props.threadInfo.id],		state => state.threadStore.threadInfos[threadInfo.id],
);		);

const { getChatMentionSearchIndex } = useChatMentionContext();		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 =>		const parentThreadInfo = useSelector(state =>
parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,		parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
);		);
const communityThreadInfo = useSelector(state =>		const communityThreadInfo = useSelector(state =>
community ? threadInfoSelector(state)[community] : null,		community ? threadInfoSelector(state)[community] : null,
);		);

const threadFrozen = useThreadFrozenDueToViewerBlock(		const threadFrozen = useThreadFrozenDueToViewerBlock(
props.threadInfo,		threadInfo,
communityThreadInfo,		communityThreadInfo,
viewerID,		viewerID,
userInfos,		userInfos,
);		);

const userMentionsCandidates = useUserMentionsCandidates(		const userMentionsCandidates = useUserMentionsCandidates(
props.threadInfo,		threadInfo,
parentThreadInfo,		parentThreadInfo,
);		);

const chatMentionCandidates = useThreadChatMentionCandidates(		const chatMentionCandidates = useThreadChatMentionCandidates(threadInfo);
props.threadInfo,
);

const messageEditingContext = React.useContext(MessageEditingContext);		const messageEditingContext = React.useContext(MessageEditingContext);

const editedMessageInfo = messageEditingContext?.editState.editedMessage;		const editedMessageInfo = messageEditingContext?.editState.editedMessage;
const editedMessagePreview = useMessagePreview(		const editedMessagePreview = useMessagePreview(
editedMessageInfo,		editedMessageInfo,
props.threadInfo,		threadInfo,
getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,		getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,
);		);
const editMessage = useEditMessage(props.threadInfo);		const editMessage = useEditMessage(threadInfo);

const [selectionState, setSelectionState] =		const [selectionState, setSelectionState] =
React.useState<SyncedSelectionData>({		React.useState<SyncedSelectionData>({
text: draft,		text: draft,
selection: { start: 0, end: 0 },		selection: { start: 0, end: 0 },
});		});

const [text, setText] = React.useState(draft);		const [text, setText] = React.useState(draft);
Show All 34 Lines	function ConnectedChatInputBarBase({

const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =		const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =
React.useMemo(		React.useMemo(
() => [...suggestedUsers, ...suggestedChats],		() => [...suggestedUsers, ...suggestedChats],
[suggestedUsers, suggestedChats],		[suggestedUsers, suggestedChats],
);		);

const currentUserIsVoiced = useThreadHasPermission(		const currentUserIsVoiced = useThreadHasPermission(
props.threadInfo,		threadInfo,
threadPermissions.VOICED,		threadPermissions.VOICED,
);		);

const currentUserCanJoin = useThreadHasPermission(		const currentUserCanJoin = useThreadHasPermission(
props.threadInfo,		threadInfo,
threadPermissions.JOIN_THREAD,		threadPermissions.JOIN_THREAD,
);		);

const isExitingDuringEditModeRef = React.useRef(false);		const isExitingDuringEditModeRef = React.useRef(false);

const expandoButtonsOpen = useValue(1);		const expandoButtonsOpen = useValue(1);
const targetExpandoButtonsOpen = useValue(1);		const targetExpandoButtonsOpen = useValue(1);

▲ Show 20 Lines • Show All 126 Lines • ▼ Show 20 Lines	const shouldShowTextInput = React.useCallback(() => {
// and won't list the viewer as a member,		// and won't list the viewer as a member,
// which will end up hiding the input.		// which will end up hiding the input.
// In this case, we will assume that our creation action		// In this case, we will assume that our creation action
// will get translated into a join, and as long		// will get translated into a join, and as long
// as members are voiced, we can show the input.		// as members are voiced, we can show the input.
if (!threadCreationInProgress) {		if (!threadCreationInProgress) {
return false;		return false;
}		}
return checkIfDefaultMembersAreVoiced(props.threadInfo);		return checkIfDefaultMembersAreVoiced(threadInfo);
}, [currentUserIsVoiced, props.threadInfo, threadCreationInProgress]);		}, [currentUserIsVoiced, threadInfo, threadCreationInProgress]);

const isEditMode = React.useCallback(() => {		const isEditMode = React.useCallback(() => {
const editState = messageEditingContext?.editState;		const editState = messageEditingContext?.editState;
const isThisThread =		const isThisThread = editState?.editedMessage?.threadID === threadInfo.id;
editState?.editedMessage?.threadID === props.threadInfo.id;
return editState?.editedMessage !== null && isThisThread;		return editState?.editedMessage !== null && isThisThread;
}, [messageEditingContext?.editState, props.threadInfo.id]);		}, [messageEditingContext?.editState, threadInfo.id]);

const immediatelyShowSendButton = React.useCallback(() => {		const immediatelyShowSendButton = React.useCallback(() => {
sendButtonContainerOpen.setValue(1);		sendButtonContainerOpen.setValue(1);
targetSendButtonContainerOpen.setValue(1);		targetSendButtonContainerOpen.setValue(1);
}, [sendButtonContainerOpen, targetSendButtonContainerOpen]);		}, [sendButtonContainerOpen, targetSendButtonContainerOpen]);

const updateSendButton = React.useCallback(		const updateSendButton = React.useCallback(
(currentText: string) => {		(currentText: string) => {
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines	function ConnectedChatInputBarBase({
);		);

const saveDraft = React.useMemo(		const saveDraft = React.useMemo(
() =>		() =>
_throttle(newText => {		_throttle(newText => {
dispatch({		dispatch({
type: updateDraftActionType,		type: updateDraftActionType,
payload: {		payload: {
key: draftKeyFromThreadID(props.threadInfo.id),		key: draftKeyFromThreadID(threadInfo.id),
text: newText,		text: newText,
},		},
});		});
}, 400),		}, 400),
[dispatch, props.threadInfo.id],		[dispatch, threadInfo.id],
);		);

const isMessageEdited = React.useCallback(		const isMessageEdited = React.useCallback(
(newText?: string): boolean => {		(newText?: string): boolean => {
let updatedText = newText ?? text;		let updatedText = newText ?? text;
updatedText = trimMessage(updatedText);		updatedText = trimMessage(updatedText);
const originalText = editedMessageInfo?.text;		const originalText = editedMessageInfo?.text;
return updatedText !== originalText;		return updatedText !== originalText;
Show All 25 Lines	const focusAndUpdateButtonsVisibility = React.useCallback(() => {
}		}

immediatelyShowSendButton();		immediatelyShowSendButton();
immediatelyHideButtons();		immediatelyHideButtons();
textInput.focus();		textInput.focus();
}, [immediatelyHideButtons, immediatelyShowSendButton]);		}, [immediatelyHideButtons, immediatelyShowSendButton]);

const blockNavigation = React.useCallback(() => {		const blockNavigation = React.useCallback(() => {
const { navigation } = props;
if (!navigation \|\| !navigation.isFocused()) {		if (!navigation \|\| !navigation.isFocused()) {
return;		return;
}		}
navigation.setParams({		navigation.setParams({
removeEditMode: removeEditMode,		removeEditMode: removeEditMode,
});		});
}, [props, removeEditMode]);		}, [navigation, removeEditMode]);

const unblockNavigation = React.useCallback(() => {		const unblockNavigation = React.useCallback(() => {
const { navigation } = props;		navigation?.setParams({ removeEditMode: null });
if (!navigation) {		}, [navigation]);
return;
}
navigation.setParams({ removeEditMode: null });
}, [props]);

const exitEditMode = React.useCallback(() => {		const exitEditMode = React.useCallback(() => {
messageEditingContext?.setEditedMessage(null, () => {		messageEditingContext?.setEditedMessage(null, () => {
unblockNavigation();		unblockNavigation();
updateText(draft);		updateText(draft);
focusAndUpdateButtonsVisibility();		focusAndUpdateButtonsVisibility();
updateSendButton(draft);		updateSendButton(draft);
});		});
▲ Show 20 Lines • Show All 111 Lines • ▼ Show 20 Lines	const onSend = React.useCallback(async () => {
const creatorID = viewerID;		const creatorID = viewerID;
invariant(creatorID, 'should have viewer ID in order to send a message');		invariant(creatorID, 'should have viewer ID in order to send a message');
invariant(inputState, 'inputState should be set in ChatInputBar.onSend');		invariant(inputState, 'inputState should be set in ChatInputBar.onSend');

await inputState.sendTextMessage(		await inputState.sendTextMessage(
{		{
type: messageTypes.TEXT,		type: messageTypes.TEXT,
localID,		localID,
threadID: props.threadInfo.id,		threadID: threadInfo.id,
text: newText,		text: newText,
creatorID,		creatorID,
time: Date.now(),		time: Date.now(),
},		},
props.threadInfo,		threadInfo,
parentThreadInfo,		parentThreadInfo,
);		);
}, [		}, [
editMessageInner,		editMessageInner,
getEditedMessage,		getEditedMessage,
inputState,		inputState,
parentThreadInfo,		parentThreadInfo,
props.threadInfo,		threadInfo,
text,		text,
updateSendButton,		updateSendButton,
viewerID,		viewerID,
]);		]);

const removeEditMode: RemoveEditMode = React.useCallback(		const removeEditMode: RemoveEditMode = React.useCallback(
action => {		action => {
const { navigation } = props;
if (!navigation \|\| isExitingDuringEditModeRef.current) {		if (!navigation \|\| isExitingDuringEditModeRef.current) {
return 'ignore_action';		return 'ignore_action';
}		}
if (!isMessageEdited()) {		if (!isMessageEdited()) {
unblockNavigation();		unblockNavigation();
return 'reduce_action';		return 'reduce_action';
}		}
const unblockAndDispatch = () => {		const unblockAndDispatch = () => {
unblockNavigation();		unblockNavigation();
navigation.dispatch(action);		navigation.dispatch(action);
};		};
const onContinueEditing = () => {		const onContinueEditing = () => {
overlayContext?.resetScrollBlockingModalStatus();		overlayContext?.resetScrollBlockingModalStatus();
};		};
exitEditAlert({		exitEditAlert({
onDiscard: unblockAndDispatch,		onDiscard: unblockAndDispatch,
onContinueEditing,		onContinueEditing,
});		});
return 'ignore_action';		return 'ignore_action';
},		},
[isMessageEdited, overlayContext, props, unblockNavigation],		[isMessageEdited, navigation, overlayContext, unblockNavigation],
);		);

const onPressExitEditMode = React.useCallback(() => {		const onPressExitEditMode = React.useCallback(() => {
if (!isMessageEdited()) {		if (!isMessageEdited()) {
exitEditMode();		exitEditMode();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
Show All 32 Lines	(e: {
if (!isEditMode()) {		if (!isEditMode()) {
return;		return;
}		}
const { action } = e.data;		const { action } = e.data;
e.preventDefault();		e.preventDefault();
const saveExit = () => {		const saveExit = () => {
messageEditingContext?.setEditedMessage(null, () => {		messageEditingContext?.setEditedMessage(null, () => {
isExitingDuringEditModeRef.current = true;		isExitingDuringEditModeRef.current = true;
props.navigation?.dispatch(action);		navigation?.dispatch(action);
});		});
};		};
if (!isMessageEdited()) {		if (!isMessageEdited()) {
saveExit();		saveExit();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
onDiscard: saveExit,		onDiscard: saveExit,
});		});
},		},
[isEditMode, isMessageEdited, messageEditingContext, props.navigation],		[isEditMode, isMessageEdited, messageEditingContext, navigation],
);		);

React.useEffect(() => {		React.useEffect(() => {
if (isActive) {		if (isActive) {
addEditInputMessageListener();		addEditInputMessageListener();
}		}

return () => {		return () => {
if (isActive) {		if (isActive) {
removeEditInputMessageListener();		removeEditInputMessageListener();
}		}
};		};
}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);		}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);

React.useEffect(() => {		React.useEffect(() => {
const { navigation } = props;

const clearBeforeRemoveListener = navigation?.addListener(		const clearBeforeRemoveListener = navigation?.addListener(
'beforeRemove',		'beforeRemove',
onNavigationBeforeRemove,		onNavigationBeforeRemove,
);		);
const clearFocusListener = navigation?.addListener(		const clearFocusListener = navigation?.addListener(
'focus',		'focus',
onNavigationFocus,		onNavigationFocus,
);		);
const clearBlurListener = navigation?.addListener('blur', onNavigationBlur);		const clearBlurListener = navigation?.addListener('blur', onNavigationBlur);
return () => {		return () => {
clearBeforeRemoveListener?.();		clearBeforeRemoveListener?.();
clearFocusListener?.();		clearFocusListener?.();
clearBlurListener?.();		clearBlurListener?.();
};		};
}, [onNavigationBeforeRemove, onNavigationBlur, onNavigationFocus, props]);		}, [
		navigation,
		onNavigationBeforeRemove,
		onNavigationBlur,
		onNavigationFocus,
		]);

const callJoinThread = useJoinThread();		const callJoinThread = useJoinThread();

const joinAction = React.useCallback(async (): Promise<ThreadJoinPayload> => {		const joinAction = React.useCallback(async (): Promise<ThreadJoinPayload> => {
let joinThreadInput;		let joinThreadInput;
if (rawThreadInfo.thick) {		if (rawThreadInfo.thick) {
joinThreadInput = {		joinThreadInput = {
thick: true,		thick: true,
rawThreadInfo: rawThreadInfo,		rawThreadInfo: rawThreadInfo,
};		};
} else {		} else {
const query = calendarQuery();		const query = calendarQuery();
joinThreadInput = {		joinThreadInput = {
thick: false,		thick: false,
threadID: props.threadInfo.id,		threadID: threadInfo.id,
calendarQuery: {		calendarQuery: {
startDate: query.startDate,		startDate: query.startDate,
endDate: query.endDate,		endDate: query.endDate,
filters: [		filters: [
...query.filters,		...query.filters,
{ type: 'threads', threadIDs: [props.threadInfo.id] },		{ type: 'threads', threadIDs: [threadInfo.id] },
],		],
},		},
};		};
}		}

return await callJoinThread(joinThreadInput);		return await callJoinThread(joinThreadInput);
}, [calendarQuery, callJoinThread, props.threadInfo.id, rawThreadInfo]);		}, [calendarQuery, callJoinThread, threadInfo.id, rawThreadInfo]);

const onPressJoin = React.useCallback(() => {		const onPressJoin = React.useCallback(() => {
void dispatchActionPromise(joinThreadActionTypes, joinAction());		void dispatchActionPromise(joinThreadActionTypes, joinAction());
}, [dispatchActionPromise, joinAction]);		}, [dispatchActionPromise, joinAction]);

const setIOSKeyboardHeight = React.useCallback(() => {		const setIOSKeyboardHeight = React.useCallback(() => {
if (Platform.OS !== 'ios') {		if (Platform.OS !== 'ios') {
return;		return;
}		}
const textInput = textInputRef.current;		const textInput = textInputRef.current;
if (!textInput) {		if (!textInput) {
return;		return;
}		}
const keyboardHeight = getKeyboardHeight();		const keyboardHeight = getKeyboardHeight();
if (keyboardHeight === null \|\| keyboardHeight === undefined) {		if (keyboardHeight === null \|\| keyboardHeight === undefined) {
return;		return;
}		}
TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);		TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);
}, []);		}, []);

const showMediaGallery = React.useCallback(() => {		const showMediaGallery = React.useCallback(() => {
invariant(keyboardState, 'keyboardState should be initialized');		invariant(keyboardState, 'keyboardState should be initialized');
keyboardState.showMediaGallery(props.threadInfo);		keyboardState.showMediaGallery(threadInfo);
}, [keyboardState, props.threadInfo]);		}, [keyboardState, threadInfo]);

const dismissKeyboard = React.useCallback(() => {		const dismissKeyboard = React.useCallback(() => {
keyboardState?.dismissKeyboard();		keyboardState?.dismissKeyboard();
}, [keyboardState]);		}, [keyboardState]);

const prevThreadInfoID = React.useRef<?string>();		const prevThreadInfoID = React.useRef<?string>();
const prevDraft = React.useRef<?string>();		const prevDraft = React.useRef<?string>();

React.useEffect(() => {		React.useEffect(() => {
if (		if (
textEdited &&		textEdited &&
text &&		text &&
prevThreadInfoID.current &&		prevThreadInfoID.current &&
props.threadInfo.id !== prevThreadInfoID.current		threadInfo.id !== prevThreadInfoID.current
) {		) {
dispatch({		dispatch({
type: moveDraftActionType,		type: moveDraftActionType,
payload: {		payload: {
oldKey: draftKeyFromThreadID(prevThreadInfoID.current),		oldKey: draftKeyFromThreadID(prevThreadInfoID.current),
newKey: draftKeyFromThreadID(props.threadInfo.id),		newKey: draftKeyFromThreadID(threadInfo.id),
},		},
});		});
} else if (!textEdited && draft !== prevDraft.current) {		} else if (!textEdited && draft !== prevDraft.current) {
setText(draft);		setText(draft);
}		}
prevThreadInfoID.current = props.threadInfo.id;		prevThreadInfoID.current = threadInfo.id;
prevDraft.current = draft;		prevDraft.current = draft;
}, [dispatch, draft, props.threadInfo.id, text, textEdited]);		}, [dispatch, draft, threadInfo.id, text, textEdited]);

const prevIsActiveRef = React.useRef(isActive);		const prevIsActiveRef = React.useRef(isActive);
React.useEffect(() => {		React.useEffect(() => {
if (isActive && !prevIsActiveRef.current) {		if (isActive && !prevIsActiveRef.current) {
addEditInputMessageListener();		addEditInputMessageListener();
} else if (!isActive && prevIsActiveRef) {		} else if (!isActive && prevIsActiveRef) {
removeEditInputMessageListener();		removeEditInputMessageListener();
}		}
▲ Show 20 Lines • Show All 57 Lines • ▼ Show 20 Lines	const expandoButton = (
onPress={expandButtons}		onPress={expandButtons}
activeOpacity={0.4}		activeOpacity={0.4}
style={styles.expandButton}		style={styles.expandButton}
>		>
<AnimatedView style={expandIconStyle}>		<AnimatedView style={expandIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="chevron-right"		name="chevron-right"
size={22}		size={22}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
);		);
const threadColor = `#${props.threadInfo.color}`;		const threadColor = `#${threadInfo.color}`;
const expandoButtonsViewStyle: Array<ViewStyle> = [		const expandoButtonsViewStyle: Array<ViewStyle> = [
styles.innerExpandoButtons,		styles.innerExpandoButtons,
];		];
if (isEditMode()) {		if (isEditMode()) {
expandoButtonsViewStyle.push({ display: 'none' });		expandoButtonsViewStyle.push({ display: 'none' });
}		}
return (		return (
<TouchableWithoutFeedback onPress={dismissKeyboard}>		<TouchableWithoutFeedback onPress={dismissKeyboard}>
<View style={styles.inputContainer}>		<View style={styles.inputContainer}>
<AnimatedView style={expandoButtonsStyle}>		<AnimatedView style={expandoButtonsStyle}>
<View style={expandoButtonsViewStyle}>		<View style={expandoButtonsViewStyle}>
{buttonsExpanded ? expandoButton : null}		{buttonsExpanded ? expandoButton : null}
<TouchableOpacity onPress={showMediaGallery} activeOpacity={0.4}>		<TouchableOpacity onPress={showMediaGallery} activeOpacity={0.4}>
<AnimatedView style={cameraRollIconStyle}>		<AnimatedView style={cameraRollIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="image-1"		name="image-1"
size={28}		size={28}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
<TouchableOpacity		<TouchableOpacity
onPress={props.openCamera}		onPress={openCamera}
activeOpacity={0.4}		activeOpacity={0.4}
disabled={!buttonsExpanded}		disabled={!buttonsExpanded}
>		>
<AnimatedView style={cameraIconStyle}>		<AnimatedView style={cameraIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="camera"		name="camera"
size={28}		size={28}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
{buttonsExpanded ? null : expandoButton}		{buttonsExpanded ? null : expandoButton}
</View>		</View>
</AnimatedView>		</AnimatedView>
<SelectableTextInput		<SelectableTextInput
allowImagePasteForThreadID={props.threadInfo.id}		allowImagePasteForThreadID={threadInfo.id}
value={text}		value={text}
onChangeText={updateText}		onChangeText={updateText}
selection={selectionState.selection}		selection={selectionState.selection}
onUpdateSyncedSelectionData={setSelectionState}		onUpdateSyncedSelectionData={setSelectionState}
placeholder="Send a message..."		placeholder="Send a message..."
placeholderTextColor={colors.listInputButton}		placeholderTextColor={colors.listInputButton}
multiline={true}		multiline={true}
style={styles.textInput}		style={styles.textInput}
textInputRef={setTextInputRef}		textInputRef={setTextInputRef}
clearableTextInputRef={setClearableTextInputRef}		clearableTextInputRef={setClearableTextInputRef}
ref={selectableTextInputRef}		ref={selectableTextInputRef}
selectionColor={`#${props.threadInfo.color}`}		selectionColor={`#${threadInfo.color}`}
/>		/>
<AnimatedView style={sendButtonContainerStyle}>		<AnimatedView style={sendButtonContainerStyle}>
<TouchableOpacity		<TouchableOpacity
onPress={onSend}		onPress={onSend}
activeOpacity={0.4}		activeOpacity={0.4}
style={styles.sendButton}		style={styles.sendButton}
disabled={trimMessage(text) === ''}		disabled={trimMessage(text) === ''}
>		>
<Icon		<Icon
name="md-send"		name="md-send"
size={25}		size={25}
style={styles.sendIcon}		style={styles.sendIcon}
color={threadColor}		color={threadColor}
/>		/>
</TouchableOpacity>		</TouchableOpacity>
</AnimatedView>		</AnimatedView>
</View>		</View>
</TouchableWithoutFeedback>		</TouchableWithoutFeedback>
);		);
};		};

const isMember = viewerIsMember(props.threadInfo);		const isMember = viewerIsMember(threadInfo);
let joinButton = null;		let joinButton = null;
const threadColor = `#${props.threadInfo.color}`;		const threadColor = `#${threadInfo.color}`;

if (!isMember && currentUserCanJoin && !threadCreationInProgress) {		if (!isMember && currentUserCanJoin && !threadCreationInProgress) {
let buttonContent;		let buttonContent;
if (joinThreadLoadingStatus === 'loading') {		if (joinThreadLoadingStatus === 'loading') {
buttonContent = (		buttonContent = (
<ActivityIndicator		<ActivityIndicator
size="small"		size="small"
color="white"		color="white"
style={styles.joinThreadLoadingIndicator}		style={styles.joinThreadLoadingIndicator}
/>		/>
);		);
} else {		} else {
const textStyle = colorIsDark(props.threadInfo.color)		const textStyle = colorIsDark(threadInfo.color)
? styles.joinButtonTextLight		? styles.joinButtonTextLight
: styles.joinButtonTextDark;		: styles.joinButtonTextDark;
buttonContent = (		buttonContent = (
<View style={styles.joinButtonContent}>		<View style={styles.joinButtonContent}>
<SWMansionIcon name="plus" style={textStyle} />		<SWMansionIcon name="plus" style={textStyle} />
<Text style={textStyle}>Join Chat</Text>		<Text style={textStyle}>Join Chat</Text>
</View>		</View>
);		);
Show All 22 Lines	typeaheadTooltip = (
focusAndUpdateTextAndSelection={focusAndUpdateTextAndSelection}		focusAndUpdateTextAndSelection={focusAndUpdateTextAndSelection}
typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}		typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}
TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}		TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}
/>		/>
);		);
}		}

let content;		let content;
const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(		const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(threadInfo);
props.threadInfo,
);
if (shouldShowTextInput()) {		if (shouldShowTextInput()) {
content = renderInput();		content = renderInput();
} else if (		} else if (
threadFrozen &&		threadFrozen &&
threadActualMembers(props.threadInfo.members).length === 2		threadActualMembers(threadInfo.members).length === 2
) {		) {
content = (		content = (
<Text style={styles.explanation}>		<Text style={styles.explanation}>
You can’t send messages to a user that you’ve blocked.		You can’t send messages to a user that you’ve blocked.
</Text>		</Text>
);		);
} else if (isMember) {		} else if (isMember) {
content = (		content = (
▲ Show 20 Lines • Show All 42 Lines • ▼ Show 20 Lines	editedMessage = (
color={threadColor}		color={threadColor}
onPress={onPressExitEditMode}		onPress={onPressExitEditMode}
/>		/>
</AnimatedView>		</AnimatedView>
);		);
}		}

return (		return (
<AnimatedView style={styles.container} onLayout={props.onInputBarLayout}>		<AnimatedView style={styles.container} onLayout={onInputBarLayout}>
{typeaheadTooltip}		{typeaheadTooltip}
{joinButton}		{joinButton}
{editedMessage}		{editedMessage}
{content}		{content}
{keyboardInputHost}		{keyboardInputHost}
</AnimatedView>		</AnimatedView>
);		);
}		}
▲ Show 20 Lines • Show All 114 Lines • Show Last 20 Lines

View Options

.buildkite/ios.yml

Show First 20 Lines • Show All 262 Lines • ▼ Show 20 Lines	const createThreadLoadingStatusSelector =
createLoadingStatusSelector(newThreadActionTypes);		createLoadingStatusSelector(newThreadActionTypes);

type ConnectedChatInputBarBaseProps = {		type ConnectedChatInputBarBaseProps = {
...BaseProps,		...BaseProps,
+onInputBarLayout?: (event: LayoutEvent) => mixed,		+onInputBarLayout?: (event: LayoutEvent) => mixed,
+openCamera: () => mixed,		+openCamera: () => mixed,
+navigation?: ChatNavigationProp<'MessageList'>,		+navigation?: ChatNavigationProp<'MessageList'>,
};		};
function ConnectedChatInputBarBase(props: ConnectedChatInputBarBaseProps) {		function ConnectedChatInputBarBase({
		threadInfo,
		navigation,
		openCamera,
		onInputBarLayout,
		}: ConnectedChatInputBarBaseProps) {
const navContext = React.useContext(NavContext);		const navContext = React.useContext(NavContext);
const keyboardState = React.useContext(KeyboardContext);		const keyboardState = React.useContext(KeyboardContext);
const inputState = React.useContext(InputStateContext);		const inputState = React.useContext(InputStateContext);
const overlayContext = React.useContext(OverlayContext);		const overlayContext = React.useContext(OverlayContext);

const viewerID = useSelector(		const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,		state => state.currentUserInfo && state.currentUserInfo.id,
);		);
const draft = useSelector(		const draft = useSelector(
state =>		state => state.draftStore.drafts[draftKeyFromThreadID(threadInfo.id)] ?? '',
state.draftStore.drafts[draftKeyFromThreadID(props.threadInfo.id)] ?? '',
);		);
const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);		const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
const createThreadLoadingStatus = useSelector(		const createThreadLoadingStatus = useSelector(
createThreadLoadingStatusSelector,		createThreadLoadingStatusSelector,
);		);
const threadCreationInProgress = createThreadLoadingStatus === 'loading';		const threadCreationInProgress = createThreadLoadingStatus === 'loading';
const calendarQuery = useSelector(state =>		const calendarQuery = useSelector(state =>
nonThreadCalendarQuery({		nonThreadCalendarQuery({
redux: state,		redux: state,
navContext,		navContext,
}),		}),
);		);
const userInfos = useSelector(state => state.userStore.userInfos);		const userInfos = useSelector(state => state.userStore.userInfos);

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
const colors = useColors();		const colors = useColors();

const isActive = React.useMemo(		const isActive = React.useMemo(
() => props.threadInfo.id === activeThreadSelector(navContext),		() => threadInfo.id === activeThreadSelector(navContext),
[props.threadInfo.id, navContext],		[threadInfo.id, navContext],
);		);

const dispatch = useDispatch();		const dispatch = useDispatch();
const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const rawThreadInfo = useSelector(		const rawThreadInfo = useSelector(
state => state.threadStore.threadInfos[props.threadInfo.id],		state => state.threadStore.threadInfos[threadInfo.id],
);		);

const { getChatMentionSearchIndex } = useChatMentionContext();		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 =>		const parentThreadInfo = useSelector(state =>
parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,		parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
);		);
const communityThreadInfo = useSelector(state =>		const communityThreadInfo = useSelector(state =>
community ? threadInfoSelector(state)[community] : null,		community ? threadInfoSelector(state)[community] : null,
);		);

const threadFrozen = useThreadFrozenDueToViewerBlock(		const threadFrozen = useThreadFrozenDueToViewerBlock(
props.threadInfo,		threadInfo,
communityThreadInfo,		communityThreadInfo,
viewerID,		viewerID,
userInfos,		userInfos,
);		);

const userMentionsCandidates = useUserMentionsCandidates(		const userMentionsCandidates = useUserMentionsCandidates(
props.threadInfo,		threadInfo,
parentThreadInfo,		parentThreadInfo,
);		);

const chatMentionCandidates = useThreadChatMentionCandidates(		const chatMentionCandidates = useThreadChatMentionCandidates(threadInfo);
props.threadInfo,
);

const messageEditingContext = React.useContext(MessageEditingContext);		const messageEditingContext = React.useContext(MessageEditingContext);

const editedMessageInfo = messageEditingContext?.editState.editedMessage;		const editedMessageInfo = messageEditingContext?.editState.editedMessage;
const editedMessagePreview = useMessagePreview(		const editedMessagePreview = useMessagePreview(
editedMessageInfo,		editedMessageInfo,
props.threadInfo,		threadInfo,
getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,		getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,
);		);
const editMessage = useEditMessage(props.threadInfo);		const editMessage = useEditMessage(threadInfo);

const [selectionState, setSelectionState] =		const [selectionState, setSelectionState] =
React.useState<SyncedSelectionData>({		React.useState<SyncedSelectionData>({
text: draft,		text: draft,
selection: { start: 0, end: 0 },		selection: { start: 0, end: 0 },
});		});

const [text, setText] = React.useState(draft);		const [text, setText] = React.useState(draft);
Show All 34 Lines	function ConnectedChatInputBarBase({

const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =		const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =
React.useMemo(		React.useMemo(
() => [...suggestedUsers, ...suggestedChats],		() => [...suggestedUsers, ...suggestedChats],
[suggestedUsers, suggestedChats],		[suggestedUsers, suggestedChats],
);		);

const currentUserIsVoiced = useThreadHasPermission(		const currentUserIsVoiced = useThreadHasPermission(
props.threadInfo,		threadInfo,
threadPermissions.VOICED,		threadPermissions.VOICED,
);		);

const currentUserCanJoin = useThreadHasPermission(		const currentUserCanJoin = useThreadHasPermission(
props.threadInfo,		threadInfo,
threadPermissions.JOIN_THREAD,		threadPermissions.JOIN_THREAD,
);		);

const isExitingDuringEditModeRef = React.useRef(false);		const isExitingDuringEditModeRef = React.useRef(false);

const expandoButtonsOpen = useValue(1);		const expandoButtonsOpen = useValue(1);
const targetExpandoButtonsOpen = useValue(1);		const targetExpandoButtonsOpen = useValue(1);

▲ Show 20 Lines • Show All 126 Lines • ▼ Show 20 Lines	const shouldShowTextInput = React.useCallback(() => {
// and won't list the viewer as a member,		// and won't list the viewer as a member,
// which will end up hiding the input.		// which will end up hiding the input.
// In this case, we will assume that our creation action		// In this case, we will assume that our creation action
// will get translated into a join, and as long		// will get translated into a join, and as long
// as members are voiced, we can show the input.		// as members are voiced, we can show the input.
if (!threadCreationInProgress) {		if (!threadCreationInProgress) {
return false;		return false;
}		}
return checkIfDefaultMembersAreVoiced(props.threadInfo);		return checkIfDefaultMembersAreVoiced(threadInfo);
}, [currentUserIsVoiced, props.threadInfo, threadCreationInProgress]);		}, [currentUserIsVoiced, threadInfo, threadCreationInProgress]);

const isEditMode = React.useCallback(() => {		const isEditMode = React.useCallback(() => {
const editState = messageEditingContext?.editState;		const editState = messageEditingContext?.editState;
const isThisThread =		const isThisThread = editState?.editedMessage?.threadID === threadInfo.id;
editState?.editedMessage?.threadID === props.threadInfo.id;
return editState?.editedMessage !== null && isThisThread;		return editState?.editedMessage !== null && isThisThread;
}, [messageEditingContext?.editState, props.threadInfo.id]);		}, [messageEditingContext?.editState, threadInfo.id]);

const immediatelyShowSendButton = React.useCallback(() => {		const immediatelyShowSendButton = React.useCallback(() => {
sendButtonContainerOpen.setValue(1);		sendButtonContainerOpen.setValue(1);
targetSendButtonContainerOpen.setValue(1);		targetSendButtonContainerOpen.setValue(1);
}, [sendButtonContainerOpen, targetSendButtonContainerOpen]);		}, [sendButtonContainerOpen, targetSendButtonContainerOpen]);

const updateSendButton = React.useCallback(		const updateSendButton = React.useCallback(
(currentText: string) => {		(currentText: string) => {
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines	function ConnectedChatInputBarBase({
);		);

const saveDraft = React.useMemo(		const saveDraft = React.useMemo(
() =>		() =>
_throttle(newText => {		_throttle(newText => {
dispatch({		dispatch({
type: updateDraftActionType,		type: updateDraftActionType,
payload: {		payload: {
key: draftKeyFromThreadID(props.threadInfo.id),		key: draftKeyFromThreadID(threadInfo.id),
text: newText,		text: newText,
},		},
});		});
}, 400),		}, 400),
[dispatch, props.threadInfo.id],		[dispatch, threadInfo.id],
);		);

const isMessageEdited = React.useCallback(		const isMessageEdited = React.useCallback(
(newText?: string): boolean => {		(newText?: string): boolean => {
let updatedText = newText ?? text;		let updatedText = newText ?? text;
updatedText = trimMessage(updatedText);		updatedText = trimMessage(updatedText);
const originalText = editedMessageInfo?.text;		const originalText = editedMessageInfo?.text;
return updatedText !== originalText;		return updatedText !== originalText;
Show All 25 Lines	const focusAndUpdateButtonsVisibility = React.useCallback(() => {
}		}

immediatelyShowSendButton();		immediatelyShowSendButton();
immediatelyHideButtons();		immediatelyHideButtons();
textInput.focus();		textInput.focus();
}, [immediatelyHideButtons, immediatelyShowSendButton]);		}, [immediatelyHideButtons, immediatelyShowSendButton]);

const blockNavigation = React.useCallback(() => {		const blockNavigation = React.useCallback(() => {
const { navigation } = props;
if (!navigation \|\| !navigation.isFocused()) {		if (!navigation \|\| !navigation.isFocused()) {
return;		return;
}		}
navigation.setParams({		navigation.setParams({
removeEditMode: removeEditMode,		removeEditMode: removeEditMode,
});		});
}, [props, removeEditMode]);		}, [navigation, removeEditMode]);

const unblockNavigation = React.useCallback(() => {		const unblockNavigation = React.useCallback(() => {
const { navigation } = props;		navigation?.setParams({ removeEditMode: null });
if (!navigation) {		}, [navigation]);
return;
}
navigation.setParams({ removeEditMode: null });
}, [props]);

const exitEditMode = React.useCallback(() => {		const exitEditMode = React.useCallback(() => {
messageEditingContext?.setEditedMessage(null, () => {		messageEditingContext?.setEditedMessage(null, () => {
unblockNavigation();		unblockNavigation();
updateText(draft);		updateText(draft);
focusAndUpdateButtonsVisibility();		focusAndUpdateButtonsVisibility();
updateSendButton(draft);		updateSendButton(draft);
});		});
▲ Show 20 Lines • Show All 111 Lines • ▼ Show 20 Lines	const onSend = React.useCallback(async () => {
const creatorID = viewerID;		const creatorID = viewerID;
invariant(creatorID, 'should have viewer ID in order to send a message');		invariant(creatorID, 'should have viewer ID in order to send a message');
invariant(inputState, 'inputState should be set in ChatInputBar.onSend');		invariant(inputState, 'inputState should be set in ChatInputBar.onSend');

await inputState.sendTextMessage(		await inputState.sendTextMessage(
{		{
type: messageTypes.TEXT,		type: messageTypes.TEXT,
localID,		localID,
threadID: props.threadInfo.id,		threadID: threadInfo.id,
text: newText,		text: newText,
creatorID,		creatorID,
time: Date.now(),		time: Date.now(),
},		},
props.threadInfo,		threadInfo,
parentThreadInfo,		parentThreadInfo,
);		);
}, [		}, [
editMessageInner,		editMessageInner,
getEditedMessage,		getEditedMessage,
inputState,		inputState,
parentThreadInfo,		parentThreadInfo,
props.threadInfo,		threadInfo,
text,		text,
updateSendButton,		updateSendButton,
viewerID,		viewerID,
]);		]);

const removeEditMode: RemoveEditMode = React.useCallback(		const removeEditMode: RemoveEditMode = React.useCallback(
action => {		action => {
const { navigation } = props;
if (!navigation \|\| isExitingDuringEditModeRef.current) {		if (!navigation \|\| isExitingDuringEditModeRef.current) {
return 'ignore_action';		return 'ignore_action';
}		}
if (!isMessageEdited()) {		if (!isMessageEdited()) {
unblockNavigation();		unblockNavigation();
return 'reduce_action';		return 'reduce_action';
}		}
const unblockAndDispatch = () => {		const unblockAndDispatch = () => {
unblockNavigation();		unblockNavigation();
navigation.dispatch(action);		navigation.dispatch(action);
};		};
const onContinueEditing = () => {		const onContinueEditing = () => {
overlayContext?.resetScrollBlockingModalStatus();		overlayContext?.resetScrollBlockingModalStatus();
};		};
exitEditAlert({		exitEditAlert({
onDiscard: unblockAndDispatch,		onDiscard: unblockAndDispatch,
onContinueEditing,		onContinueEditing,
});		});
return 'ignore_action';		return 'ignore_action';
},		},
[isMessageEdited, overlayContext, props, unblockNavigation],		[isMessageEdited, navigation, overlayContext, unblockNavigation],
);		);

const onPressExitEditMode = React.useCallback(() => {		const onPressExitEditMode = React.useCallback(() => {
if (!isMessageEdited()) {		if (!isMessageEdited()) {
exitEditMode();		exitEditMode();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
Show All 32 Lines	(e: {
if (!isEditMode()) {		if (!isEditMode()) {
return;		return;
}		}
const { action } = e.data;		const { action } = e.data;
e.preventDefault();		e.preventDefault();
const saveExit = () => {		const saveExit = () => {
messageEditingContext?.setEditedMessage(null, () => {		messageEditingContext?.setEditedMessage(null, () => {
isExitingDuringEditModeRef.current = true;		isExitingDuringEditModeRef.current = true;
props.navigation?.dispatch(action);		navigation?.dispatch(action);
});		});
};		};
if (!isMessageEdited()) {		if (!isMessageEdited()) {
saveExit();		saveExit();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
onDiscard: saveExit,		onDiscard: saveExit,
});		});
},		},
[isEditMode, isMessageEdited, messageEditingContext, props.navigation],		[isEditMode, isMessageEdited, messageEditingContext, navigation],
);		);

React.useEffect(() => {		React.useEffect(() => {
if (isActive) {		if (isActive) {
addEditInputMessageListener();		addEditInputMessageListener();
}		}

return () => {		return () => {
if (isActive) {		if (isActive) {
removeEditInputMessageListener();		removeEditInputMessageListener();
}		}
};		};
}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);		}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);

React.useEffect(() => {		React.useEffect(() => {
const { navigation } = props;

const clearBeforeRemoveListener = navigation?.addListener(		const clearBeforeRemoveListener = navigation?.addListener(
'beforeRemove',		'beforeRemove',
onNavigationBeforeRemove,		onNavigationBeforeRemove,
);		);
const clearFocusListener = navigation?.addListener(		const clearFocusListener = navigation?.addListener(
'focus',		'focus',
onNavigationFocus,		onNavigationFocus,
);		);
const clearBlurListener = navigation?.addListener('blur', onNavigationBlur);		const clearBlurListener = navigation?.addListener('blur', onNavigationBlur);
return () => {		return () => {
clearBeforeRemoveListener?.();		clearBeforeRemoveListener?.();
clearFocusListener?.();		clearFocusListener?.();
clearBlurListener?.();		clearBlurListener?.();
};		};
}, [onNavigationBeforeRemove, onNavigationBlur, onNavigationFocus, props]);		}, [
		navigation,
		onNavigationBeforeRemove,
		onNavigationBlur,
		onNavigationFocus,
		]);

const callJoinThread = useJoinThread();		const callJoinThread = useJoinThread();

const joinAction = React.useCallback(async (): Promise<ThreadJoinPayload> => {		const joinAction = React.useCallback(async (): Promise<ThreadJoinPayload> => {
let joinThreadInput;		let joinThreadInput;
if (rawThreadInfo.thick) {		if (rawThreadInfo.thick) {
joinThreadInput = {		joinThreadInput = {
thick: true,		thick: true,
rawThreadInfo: rawThreadInfo,		rawThreadInfo: rawThreadInfo,
};		};
} else {		} else {
const query = calendarQuery();		const query = calendarQuery();
joinThreadInput = {		joinThreadInput = {
thick: false,		thick: false,
threadID: props.threadInfo.id,		threadID: threadInfo.id,
calendarQuery: {		calendarQuery: {
startDate: query.startDate,		startDate: query.startDate,
endDate: query.endDate,		endDate: query.endDate,
filters: [		filters: [
...query.filters,		...query.filters,
{ type: 'threads', threadIDs: [props.threadInfo.id] },		{ type: 'threads', threadIDs: [threadInfo.id] },
],		],
},		},
};		};
}		}

return await callJoinThread(joinThreadInput);		return await callJoinThread(joinThreadInput);
}, [calendarQuery, callJoinThread, props.threadInfo.id, rawThreadInfo]);		}, [calendarQuery, callJoinThread, threadInfo.id, rawThreadInfo]);

const onPressJoin = React.useCallback(() => {		const onPressJoin = React.useCallback(() => {
void dispatchActionPromise(joinThreadActionTypes, joinAction());		void dispatchActionPromise(joinThreadActionTypes, joinAction());
}, [dispatchActionPromise, joinAction]);		}, [dispatchActionPromise, joinAction]);

const setIOSKeyboardHeight = React.useCallback(() => {		const setIOSKeyboardHeight = React.useCallback(() => {
if (Platform.OS !== 'ios') {		if (Platform.OS !== 'ios') {
return;		return;
}		}
const textInput = textInputRef.current;		const textInput = textInputRef.current;
if (!textInput) {		if (!textInput) {
return;		return;
}		}
const keyboardHeight = getKeyboardHeight();		const keyboardHeight = getKeyboardHeight();
if (keyboardHeight === null \|\| keyboardHeight === undefined) {		if (keyboardHeight === null \|\| keyboardHeight === undefined) {
return;		return;
}		}
TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);		TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);
}, []);		}, []);

const showMediaGallery = React.useCallback(() => {		const showMediaGallery = React.useCallback(() => {
invariant(keyboardState, 'keyboardState should be initialized');		invariant(keyboardState, 'keyboardState should be initialized');
keyboardState.showMediaGallery(props.threadInfo);		keyboardState.showMediaGallery(threadInfo);
}, [keyboardState, props.threadInfo]);		}, [keyboardState, threadInfo]);

const dismissKeyboard = React.useCallback(() => {		const dismissKeyboard = React.useCallback(() => {
keyboardState?.dismissKeyboard();		keyboardState?.dismissKeyboard();
}, [keyboardState]);		}, [keyboardState]);

const prevThreadInfoID = React.useRef<?string>();		const prevThreadInfoID = React.useRef<?string>();
const prevDraft = React.useRef<?string>();		const prevDraft = React.useRef<?string>();

React.useEffect(() => {		React.useEffect(() => {
if (		if (
textEdited &&		textEdited &&
text &&		text &&
prevThreadInfoID.current &&		prevThreadInfoID.current &&
props.threadInfo.id !== prevThreadInfoID.current		threadInfo.id !== prevThreadInfoID.current
) {		) {
dispatch({		dispatch({
type: moveDraftActionType,		type: moveDraftActionType,
payload: {		payload: {
oldKey: draftKeyFromThreadID(prevThreadInfoID.current),		oldKey: draftKeyFromThreadID(prevThreadInfoID.current),
newKey: draftKeyFromThreadID(props.threadInfo.id),		newKey: draftKeyFromThreadID(threadInfo.id),
},		},
});		});
} else if (!textEdited && draft !== prevDraft.current) {		} else if (!textEdited && draft !== prevDraft.current) {
setText(draft);		setText(draft);
}		}
prevThreadInfoID.current = props.threadInfo.id;		prevThreadInfoID.current = threadInfo.id;
prevDraft.current = draft;		prevDraft.current = draft;
}, [dispatch, draft, props.threadInfo.id, text, textEdited]);		}, [dispatch, draft, threadInfo.id, text, textEdited]);

const prevIsActiveRef = React.useRef(isActive);		const prevIsActiveRef = React.useRef(isActive);
React.useEffect(() => {		React.useEffect(() => {
if (isActive && !prevIsActiveRef.current) {		if (isActive && !prevIsActiveRef.current) {
addEditInputMessageListener();		addEditInputMessageListener();
} else if (!isActive && prevIsActiveRef) {		} else if (!isActive && prevIsActiveRef) {
removeEditInputMessageListener();		removeEditInputMessageListener();
}		}
▲ Show 20 Lines • Show All 57 Lines • ▼ Show 20 Lines	const expandoButton = (
onPress={expandButtons}		onPress={expandButtons}
activeOpacity={0.4}		activeOpacity={0.4}
style={styles.expandButton}		style={styles.expandButton}
>		>
<AnimatedView style={expandIconStyle}>		<AnimatedView style={expandIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="chevron-right"		name="chevron-right"
size={22}		size={22}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
);		);
const threadColor = `#${props.threadInfo.color}`;		const threadColor = `#${threadInfo.color}`;
const expandoButtonsViewStyle: Array<ViewStyle> = [		const expandoButtonsViewStyle: Array<ViewStyle> = [
styles.innerExpandoButtons,		styles.innerExpandoButtons,
];		];
if (isEditMode()) {		if (isEditMode()) {
expandoButtonsViewStyle.push({ display: 'none' });		expandoButtonsViewStyle.push({ display: 'none' });
}		}
return (		return (
<TouchableWithoutFeedback onPress={dismissKeyboard}>		<TouchableWithoutFeedback onPress={dismissKeyboard}>
<View style={styles.inputContainer}>		<View style={styles.inputContainer}>
<AnimatedView style={expandoButtonsStyle}>		<AnimatedView style={expandoButtonsStyle}>
<View style={expandoButtonsViewStyle}>		<View style={expandoButtonsViewStyle}>
{buttonsExpanded ? expandoButton : null}		{buttonsExpanded ? expandoButton : null}
<TouchableOpacity onPress={showMediaGallery} activeOpacity={0.4}>		<TouchableOpacity onPress={showMediaGallery} activeOpacity={0.4}>
<AnimatedView style={cameraRollIconStyle}>		<AnimatedView style={cameraRollIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="image-1"		name="image-1"
size={28}		size={28}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
<TouchableOpacity		<TouchableOpacity
onPress={props.openCamera}		onPress={openCamera}
activeOpacity={0.4}		activeOpacity={0.4}
disabled={!buttonsExpanded}		disabled={!buttonsExpanded}
>		>
<AnimatedView style={cameraIconStyle}>		<AnimatedView style={cameraIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="camera"		name="camera"
size={28}		size={28}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
{buttonsExpanded ? null : expandoButton}		{buttonsExpanded ? null : expandoButton}
</View>		</View>
</AnimatedView>		</AnimatedView>
<SelectableTextInput		<SelectableTextInput
allowImagePasteForThreadID={props.threadInfo.id}		allowImagePasteForThreadID={threadInfo.id}
value={text}		value={text}
onChangeText={updateText}		onChangeText={updateText}
selection={selectionState.selection}		selection={selectionState.selection}
onUpdateSyncedSelectionData={setSelectionState}		onUpdateSyncedSelectionData={setSelectionState}
placeholder="Send a message..."		placeholder="Send a message..."
placeholderTextColor={colors.listInputButton}		placeholderTextColor={colors.listInputButton}
multiline={true}		multiline={true}
style={styles.textInput}		style={styles.textInput}
textInputRef={setTextInputRef}		textInputRef={setTextInputRef}
clearableTextInputRef={setClearableTextInputRef}		clearableTextInputRef={setClearableTextInputRef}
ref={selectableTextInputRef}		ref={selectableTextInputRef}
selectionColor={`#${props.threadInfo.color}`}		selectionColor={`#${threadInfo.color}`}
/>		/>
<AnimatedView style={sendButtonContainerStyle}>		<AnimatedView style={sendButtonContainerStyle}>
<TouchableOpacity		<TouchableOpacity
onPress={onSend}		onPress={onSend}
activeOpacity={0.4}		activeOpacity={0.4}
style={styles.sendButton}		style={styles.sendButton}
disabled={trimMessage(text) === ''}		disabled={trimMessage(text) === ''}
>		>
<Icon		<Icon
name="md-send"		name="md-send"
size={25}		size={25}
style={styles.sendIcon}		style={styles.sendIcon}
color={threadColor}		color={threadColor}
/>		/>
</TouchableOpacity>		</TouchableOpacity>
</AnimatedView>		</AnimatedView>
</View>		</View>
</TouchableWithoutFeedback>		</TouchableWithoutFeedback>
);		);
};		};

const isMember = viewerIsMember(props.threadInfo);		const isMember = viewerIsMember(threadInfo);
let joinButton = null;		let joinButton = null;
const threadColor = `#${props.threadInfo.color}`;		const threadColor = `#${threadInfo.color}`;

if (!isMember && currentUserCanJoin && !threadCreationInProgress) {		if (!isMember && currentUserCanJoin && !threadCreationInProgress) {
let buttonContent;		let buttonContent;
if (joinThreadLoadingStatus === 'loading') {		if (joinThreadLoadingStatus === 'loading') {
buttonContent = (		buttonContent = (
<ActivityIndicator		<ActivityIndicator
size="small"		size="small"
color="white"		color="white"
style={styles.joinThreadLoadingIndicator}		style={styles.joinThreadLoadingIndicator}
/>		/>
);		);
} else {		} else {
const textStyle = colorIsDark(props.threadInfo.color)		const textStyle = colorIsDark(threadInfo.color)
? styles.joinButtonTextLight		? styles.joinButtonTextLight
: styles.joinButtonTextDark;		: styles.joinButtonTextDark;
buttonContent = (		buttonContent = (
<View style={styles.joinButtonContent}>		<View style={styles.joinButtonContent}>
<SWMansionIcon name="plus" style={textStyle} />		<SWMansionIcon name="plus" style={textStyle} />
<Text style={textStyle}>Join Chat</Text>		<Text style={textStyle}>Join Chat</Text>
</View>		</View>
);		);
Show All 22 Lines	typeaheadTooltip = (
focusAndUpdateTextAndSelection={focusAndUpdateTextAndSelection}		focusAndUpdateTextAndSelection={focusAndUpdateTextAndSelection}
typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}		typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}
TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}		TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}
/>		/>
);		);
}		}

let content;		let content;
const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(		const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(threadInfo);
props.threadInfo,
);
if (shouldShowTextInput()) {		if (shouldShowTextInput()) {
content = renderInput();		content = renderInput();
} else if (		} else if (
threadFrozen &&		threadFrozen &&
threadActualMembers(props.threadInfo.members).length === 2		threadActualMembers(threadInfo.members).length === 2
) {		) {
content = (		content = (
<Text style={styles.explanation}>		<Text style={styles.explanation}>
You can’t send messages to a user that you’ve blocked.		You can’t send messages to a user that you’ve blocked.
</Text>		</Text>
);		);
} else if (isMember) {		} else if (isMember) {
content = (		content = (
▲ Show 20 Lines • Show All 42 Lines • ▼ Show 20 Lines	editedMessage = (
color={threadColor}		color={threadColor}
onPress={onPressExitEditMode}		onPress={onPressExitEditMode}
/>		/>
</AnimatedView>		</AnimatedView>
);		);
}		}

return (		return (
<AnimatedView style={styles.container} onLayout={props.onInputBarLayout}>		<AnimatedView style={styles.container} onLayout={onInputBarLayout}>
{typeaheadTooltip}		{typeaheadTooltip}
{joinButton}		{joinButton}
{editedMessage}		{editedMessage}
{content}		{content}
{keyboardInputHost}		{keyboardInputHost}
</AnimatedView>		</AnimatedView>
);		);
}		}
▲ Show 20 Lines • Show All 114 Lines • Show Last 20 Lines

View Options

.buildkite/jsi_codegen.yml

Show First 20 Lines • Show All 262 Lines • ▼ Show 20 Lines	const createThreadLoadingStatusSelector =
createLoadingStatusSelector(newThreadActionTypes);		createLoadingStatusSelector(newThreadActionTypes);

type ConnectedChatInputBarBaseProps = {		type ConnectedChatInputBarBaseProps = {
...BaseProps,		...BaseProps,
+onInputBarLayout?: (event: LayoutEvent) => mixed,		+onInputBarLayout?: (event: LayoutEvent) => mixed,
+openCamera: () => mixed,		+openCamera: () => mixed,
+navigation?: ChatNavigationProp<'MessageList'>,		+navigation?: ChatNavigationProp<'MessageList'>,
};		};
function ConnectedChatInputBarBase(props: ConnectedChatInputBarBaseProps) {		function ConnectedChatInputBarBase({
		threadInfo,
		navigation,
		openCamera,
		onInputBarLayout,
		}: ConnectedChatInputBarBaseProps) {
const navContext = React.useContext(NavContext);		const navContext = React.useContext(NavContext);
const keyboardState = React.useContext(KeyboardContext);		const keyboardState = React.useContext(KeyboardContext);
const inputState = React.useContext(InputStateContext);		const inputState = React.useContext(InputStateContext);
const overlayContext = React.useContext(OverlayContext);		const overlayContext = React.useContext(OverlayContext);

const viewerID = useSelector(		const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,		state => state.currentUserInfo && state.currentUserInfo.id,
);		);
const draft = useSelector(		const draft = useSelector(
state =>		state => state.draftStore.drafts[draftKeyFromThreadID(threadInfo.id)] ?? '',
state.draftStore.drafts[draftKeyFromThreadID(props.threadInfo.id)] ?? '',
);		);
const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);		const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
const createThreadLoadingStatus = useSelector(		const createThreadLoadingStatus = useSelector(
createThreadLoadingStatusSelector,		createThreadLoadingStatusSelector,
);		);
const threadCreationInProgress = createThreadLoadingStatus === 'loading';		const threadCreationInProgress = createThreadLoadingStatus === 'loading';
const calendarQuery = useSelector(state =>		const calendarQuery = useSelector(state =>
nonThreadCalendarQuery({		nonThreadCalendarQuery({
redux: state,		redux: state,
navContext,		navContext,
}),		}),
);		);
const userInfos = useSelector(state => state.userStore.userInfos);		const userInfos = useSelector(state => state.userStore.userInfos);

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
const colors = useColors();		const colors = useColors();

const isActive = React.useMemo(		const isActive = React.useMemo(
() => props.threadInfo.id === activeThreadSelector(navContext),		() => threadInfo.id === activeThreadSelector(navContext),
[props.threadInfo.id, navContext],		[threadInfo.id, navContext],
);		);

const dispatch = useDispatch();		const dispatch = useDispatch();
const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const rawThreadInfo = useSelector(		const rawThreadInfo = useSelector(
state => state.threadStore.threadInfos[props.threadInfo.id],		state => state.threadStore.threadInfos[threadInfo.id],
);		);

const { getChatMentionSearchIndex } = useChatMentionContext();		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 =>		const parentThreadInfo = useSelector(state =>
parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,		parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
);		);
const communityThreadInfo = useSelector(state =>		const communityThreadInfo = useSelector(state =>
community ? threadInfoSelector(state)[community] : null,		community ? threadInfoSelector(state)[community] : null,
);		);

const threadFrozen = useThreadFrozenDueToViewerBlock(		const threadFrozen = useThreadFrozenDueToViewerBlock(
props.threadInfo,		threadInfo,
communityThreadInfo,		communityThreadInfo,
viewerID,		viewerID,
userInfos,		userInfos,
);		);

const userMentionsCandidates = useUserMentionsCandidates(		const userMentionsCandidates = useUserMentionsCandidates(
props.threadInfo,		threadInfo,
parentThreadInfo,		parentThreadInfo,
);		);

const chatMentionCandidates = useThreadChatMentionCandidates(		const chatMentionCandidates = useThreadChatMentionCandidates(threadInfo);
props.threadInfo,
);

const messageEditingContext = React.useContext(MessageEditingContext);		const messageEditingContext = React.useContext(MessageEditingContext);

const editedMessageInfo = messageEditingContext?.editState.editedMessage;		const editedMessageInfo = messageEditingContext?.editState.editedMessage;
const editedMessagePreview = useMessagePreview(		const editedMessagePreview = useMessagePreview(
editedMessageInfo,		editedMessageInfo,
props.threadInfo,		threadInfo,
getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,		getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,
);		);
const editMessage = useEditMessage(props.threadInfo);		const editMessage = useEditMessage(threadInfo);

const [selectionState, setSelectionState] =		const [selectionState, setSelectionState] =
React.useState<SyncedSelectionData>({		React.useState<SyncedSelectionData>({
text: draft,		text: draft,
selection: { start: 0, end: 0 },		selection: { start: 0, end: 0 },
});		});

const [text, setText] = React.useState(draft);		const [text, setText] = React.useState(draft);
Show All 34 Lines	function ConnectedChatInputBarBase({

const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =		const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =
React.useMemo(		React.useMemo(
() => [...suggestedUsers, ...suggestedChats],		() => [...suggestedUsers, ...suggestedChats],
[suggestedUsers, suggestedChats],		[suggestedUsers, suggestedChats],
);		);

const currentUserIsVoiced = useThreadHasPermission(		const currentUserIsVoiced = useThreadHasPermission(
props.threadInfo,		threadInfo,
threadPermissions.VOICED,		threadPermissions.VOICED,
);		);

const currentUserCanJoin = useThreadHasPermission(		const currentUserCanJoin = useThreadHasPermission(
props.threadInfo,		threadInfo,
threadPermissions.JOIN_THREAD,		threadPermissions.JOIN_THREAD,
);		);

const isExitingDuringEditModeRef = React.useRef(false);		const isExitingDuringEditModeRef = React.useRef(false);

const expandoButtonsOpen = useValue(1);		const expandoButtonsOpen = useValue(1);
const targetExpandoButtonsOpen = useValue(1);		const targetExpandoButtonsOpen = useValue(1);

▲ Show 20 Lines • Show All 126 Lines • ▼ Show 20 Lines	const shouldShowTextInput = React.useCallback(() => {
// and won't list the viewer as a member,		// and won't list the viewer as a member,
// which will end up hiding the input.		// which will end up hiding the input.
// In this case, we will assume that our creation action		// In this case, we will assume that our creation action
// will get translated into a join, and as long		// will get translated into a join, and as long
// as members are voiced, we can show the input.		// as members are voiced, we can show the input.
if (!threadCreationInProgress) {		if (!threadCreationInProgress) {
return false;		return false;
}		}
return checkIfDefaultMembersAreVoiced(props.threadInfo);		return checkIfDefaultMembersAreVoiced(threadInfo);
}, [currentUserIsVoiced, props.threadInfo, threadCreationInProgress]);		}, [currentUserIsVoiced, threadInfo, threadCreationInProgress]);

const isEditMode = React.useCallback(() => {		const isEditMode = React.useCallback(() => {
const editState = messageEditingContext?.editState;		const editState = messageEditingContext?.editState;
const isThisThread =		const isThisThread = editState?.editedMessage?.threadID === threadInfo.id;
editState?.editedMessage?.threadID === props.threadInfo.id;
return editState?.editedMessage !== null && isThisThread;		return editState?.editedMessage !== null && isThisThread;
}, [messageEditingContext?.editState, props.threadInfo.id]);		}, [messageEditingContext?.editState, threadInfo.id]);

const immediatelyShowSendButton = React.useCallback(() => {		const immediatelyShowSendButton = React.useCallback(() => {
sendButtonContainerOpen.setValue(1);		sendButtonContainerOpen.setValue(1);
targetSendButtonContainerOpen.setValue(1);		targetSendButtonContainerOpen.setValue(1);
}, [sendButtonContainerOpen, targetSendButtonContainerOpen]);		}, [sendButtonContainerOpen, targetSendButtonContainerOpen]);

const updateSendButton = React.useCallback(		const updateSendButton = React.useCallback(
(currentText: string) => {		(currentText: string) => {
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines	function ConnectedChatInputBarBase({
);		);

const saveDraft = React.useMemo(		const saveDraft = React.useMemo(
() =>		() =>
_throttle(newText => {		_throttle(newText => {
dispatch({		dispatch({
type: updateDraftActionType,		type: updateDraftActionType,
payload: {		payload: {
key: draftKeyFromThreadID(props.threadInfo.id),		key: draftKeyFromThreadID(threadInfo.id),
text: newText,		text: newText,
},		},
});		});
}, 400),		}, 400),
[dispatch, props.threadInfo.id],		[dispatch, threadInfo.id],
);		);

const isMessageEdited = React.useCallback(		const isMessageEdited = React.useCallback(
(newText?: string): boolean => {		(newText?: string): boolean => {
let updatedText = newText ?? text;		let updatedText = newText ?? text;
updatedText = trimMessage(updatedText);		updatedText = trimMessage(updatedText);
const originalText = editedMessageInfo?.text;		const originalText = editedMessageInfo?.text;
return updatedText !== originalText;		return updatedText !== originalText;
Show All 25 Lines	const focusAndUpdateButtonsVisibility = React.useCallback(() => {
}		}

immediatelyShowSendButton();		immediatelyShowSendButton();
immediatelyHideButtons();		immediatelyHideButtons();
textInput.focus();		textInput.focus();
}, [immediatelyHideButtons, immediatelyShowSendButton]);		}, [immediatelyHideButtons, immediatelyShowSendButton]);

const blockNavigation = React.useCallback(() => {		const blockNavigation = React.useCallback(() => {
const { navigation } = props;
if (!navigation \|\| !navigation.isFocused()) {		if (!navigation \|\| !navigation.isFocused()) {
return;		return;
}		}
navigation.setParams({		navigation.setParams({
removeEditMode: removeEditMode,		removeEditMode: removeEditMode,
});		});
}, [props, removeEditMode]);		}, [navigation, removeEditMode]);

const unblockNavigation = React.useCallback(() => {		const unblockNavigation = React.useCallback(() => {
const { navigation } = props;		navigation?.setParams({ removeEditMode: null });
if (!navigation) {		}, [navigation]);
return;
}
navigation.setParams({ removeEditMode: null });
}, [props]);

const exitEditMode = React.useCallback(() => {		const exitEditMode = React.useCallback(() => {
messageEditingContext?.setEditedMessage(null, () => {		messageEditingContext?.setEditedMessage(null, () => {
unblockNavigation();		unblockNavigation();
updateText(draft);		updateText(draft);
focusAndUpdateButtonsVisibility();		focusAndUpdateButtonsVisibility();
updateSendButton(draft);		updateSendButton(draft);
});		});
▲ Show 20 Lines • Show All 111 Lines • ▼ Show 20 Lines	const onSend = React.useCallback(async () => {
const creatorID = viewerID;		const creatorID = viewerID;
invariant(creatorID, 'should have viewer ID in order to send a message');		invariant(creatorID, 'should have viewer ID in order to send a message');
invariant(inputState, 'inputState should be set in ChatInputBar.onSend');		invariant(inputState, 'inputState should be set in ChatInputBar.onSend');

await inputState.sendTextMessage(		await inputState.sendTextMessage(
{		{
type: messageTypes.TEXT,		type: messageTypes.TEXT,
localID,		localID,
threadID: props.threadInfo.id,		threadID: threadInfo.id,
text: newText,		text: newText,
creatorID,		creatorID,
time: Date.now(),		time: Date.now(),
},		},
props.threadInfo,		threadInfo,
parentThreadInfo,		parentThreadInfo,
);		);
}, [		}, [
editMessageInner,		editMessageInner,
getEditedMessage,		getEditedMessage,
inputState,		inputState,
parentThreadInfo,		parentThreadInfo,
props.threadInfo,		threadInfo,
text,		text,
updateSendButton,		updateSendButton,
viewerID,		viewerID,
]);		]);

const removeEditMode: RemoveEditMode = React.useCallback(		const removeEditMode: RemoveEditMode = React.useCallback(
action => {		action => {
const { navigation } = props;
if (!navigation \|\| isExitingDuringEditModeRef.current) {		if (!navigation \|\| isExitingDuringEditModeRef.current) {
return 'ignore_action';		return 'ignore_action';
}		}
if (!isMessageEdited()) {		if (!isMessageEdited()) {
unblockNavigation();		unblockNavigation();
return 'reduce_action';		return 'reduce_action';
}		}
const unblockAndDispatch = () => {		const unblockAndDispatch = () => {
unblockNavigation();		unblockNavigation();
navigation.dispatch(action);		navigation.dispatch(action);
};		};
const onContinueEditing = () => {		const onContinueEditing = () => {
overlayContext?.resetScrollBlockingModalStatus();		overlayContext?.resetScrollBlockingModalStatus();
};		};
exitEditAlert({		exitEditAlert({
onDiscard: unblockAndDispatch,		onDiscard: unblockAndDispatch,
onContinueEditing,		onContinueEditing,
});		});
return 'ignore_action';		return 'ignore_action';
},		},
[isMessageEdited, overlayContext, props, unblockNavigation],		[isMessageEdited, navigation, overlayContext, unblockNavigation],
);		);

const onPressExitEditMode = React.useCallback(() => {		const onPressExitEditMode = React.useCallback(() => {
if (!isMessageEdited()) {		if (!isMessageEdited()) {
exitEditMode();		exitEditMode();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
Show All 32 Lines	(e: {
if (!isEditMode()) {		if (!isEditMode()) {
return;		return;
}		}
const { action } = e.data;		const { action } = e.data;
e.preventDefault();		e.preventDefault();
const saveExit = () => {		const saveExit = () => {
messageEditingContext?.setEditedMessage(null, () => {		messageEditingContext?.setEditedMessage(null, () => {
isExitingDuringEditModeRef.current = true;		isExitingDuringEditModeRef.current = true;
props.navigation?.dispatch(action);		navigation?.dispatch(action);
});		});
};		};
if (!isMessageEdited()) {		if (!isMessageEdited()) {
saveExit();		saveExit();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
onDiscard: saveExit,		onDiscard: saveExit,
});		});
},		},
[isEditMode, isMessageEdited, messageEditingContext, props.navigation],		[isEditMode, isMessageEdited, messageEditingContext, navigation],
);		);

React.useEffect(() => {		React.useEffect(() => {
if (isActive) {		if (isActive) {
addEditInputMessageListener();		addEditInputMessageListener();
}		}

return () => {		return () => {
if (isActive) {		if (isActive) {
removeEditInputMessageListener();		removeEditInputMessageListener();
}		}
};		};
}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);		}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);

React.useEffect(() => {		React.useEffect(() => {
const { navigation } = props;

const clearBeforeRemoveListener = navigation?.addListener(		const clearBeforeRemoveListener = navigation?.addListener(
'beforeRemove',		'beforeRemove',
onNavigationBeforeRemove,		onNavigationBeforeRemove,
);		);
const clearFocusListener = navigation?.addListener(		const clearFocusListener = navigation?.addListener(
'focus',		'focus',
onNavigationFocus,		onNavigationFocus,
);		);
const clearBlurListener = navigation?.addListener('blur', onNavigationBlur);		const clearBlurListener = navigation?.addListener('blur', onNavigationBlur);
return () => {		return () => {
clearBeforeRemoveListener?.();		clearBeforeRemoveListener?.();
clearFocusListener?.();		clearFocusListener?.();
clearBlurListener?.();		clearBlurListener?.();
};		};
}, [onNavigationBeforeRemove, onNavigationBlur, onNavigationFocus, props]);		}, [
		navigation,
		onNavigationBeforeRemove,
		onNavigationBlur,
		onNavigationFocus,
		]);

const callJoinThread = useJoinThread();		const callJoinThread = useJoinThread();

const joinAction = React.useCallback(async (): Promise<ThreadJoinPayload> => {		const joinAction = React.useCallback(async (): Promise<ThreadJoinPayload> => {
let joinThreadInput;		let joinThreadInput;
if (rawThreadInfo.thick) {		if (rawThreadInfo.thick) {
joinThreadInput = {		joinThreadInput = {
thick: true,		thick: true,
rawThreadInfo: rawThreadInfo,		rawThreadInfo: rawThreadInfo,
};		};
} else {		} else {
const query = calendarQuery();		const query = calendarQuery();
joinThreadInput = {		joinThreadInput = {
thick: false,		thick: false,
threadID: props.threadInfo.id,		threadID: threadInfo.id,
calendarQuery: {		calendarQuery: {
startDate: query.startDate,		startDate: query.startDate,
endDate: query.endDate,		endDate: query.endDate,
filters: [		filters: [
...query.filters,		...query.filters,
{ type: 'threads', threadIDs: [props.threadInfo.id] },		{ type: 'threads', threadIDs: [threadInfo.id] },
],		],
},		},
};		};
}		}

return await callJoinThread(joinThreadInput);		return await callJoinThread(joinThreadInput);
}, [calendarQuery, callJoinThread, props.threadInfo.id, rawThreadInfo]);		}, [calendarQuery, callJoinThread, threadInfo.id, rawThreadInfo]);

const onPressJoin = React.useCallback(() => {		const onPressJoin = React.useCallback(() => {
void dispatchActionPromise(joinThreadActionTypes, joinAction());		void dispatchActionPromise(joinThreadActionTypes, joinAction());
}, [dispatchActionPromise, joinAction]);		}, [dispatchActionPromise, joinAction]);

const setIOSKeyboardHeight = React.useCallback(() => {		const setIOSKeyboardHeight = React.useCallback(() => {
if (Platform.OS !== 'ios') {		if (Platform.OS !== 'ios') {
return;		return;
}		}
const textInput = textInputRef.current;		const textInput = textInputRef.current;
if (!textInput) {		if (!textInput) {
return;		return;
}		}
const keyboardHeight = getKeyboardHeight();		const keyboardHeight = getKeyboardHeight();
if (keyboardHeight === null \|\| keyboardHeight === undefined) {		if (keyboardHeight === null \|\| keyboardHeight === undefined) {
return;		return;
}		}
TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);		TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);
}, []);		}, []);

const showMediaGallery = React.useCallback(() => {		const showMediaGallery = React.useCallback(() => {
invariant(keyboardState, 'keyboardState should be initialized');		invariant(keyboardState, 'keyboardState should be initialized');
keyboardState.showMediaGallery(props.threadInfo);		keyboardState.showMediaGallery(threadInfo);
}, [keyboardState, props.threadInfo]);		}, [keyboardState, threadInfo]);

const dismissKeyboard = React.useCallback(() => {		const dismissKeyboard = React.useCallback(() => {
keyboardState?.dismissKeyboard();		keyboardState?.dismissKeyboard();
}, [keyboardState]);		}, [keyboardState]);

const prevThreadInfoID = React.useRef<?string>();		const prevThreadInfoID = React.useRef<?string>();
const prevDraft = React.useRef<?string>();		const prevDraft = React.useRef<?string>();

React.useEffect(() => {		React.useEffect(() => {
if (		if (
textEdited &&		textEdited &&
text &&		text &&
prevThreadInfoID.current &&		prevThreadInfoID.current &&
props.threadInfo.id !== prevThreadInfoID.current		threadInfo.id !== prevThreadInfoID.current
) {		) {
dispatch({		dispatch({
type: moveDraftActionType,		type: moveDraftActionType,
payload: {		payload: {
oldKey: draftKeyFromThreadID(prevThreadInfoID.current),		oldKey: draftKeyFromThreadID(prevThreadInfoID.current),
newKey: draftKeyFromThreadID(props.threadInfo.id),		newKey: draftKeyFromThreadID(threadInfo.id),
},		},
});		});
} else if (!textEdited && draft !== prevDraft.current) {		} else if (!textEdited && draft !== prevDraft.current) {
setText(draft);		setText(draft);
}		}
prevThreadInfoID.current = props.threadInfo.id;		prevThreadInfoID.current = threadInfo.id;
prevDraft.current = draft;		prevDraft.current = draft;
}, [dispatch, draft, props.threadInfo.id, text, textEdited]);		}, [dispatch, draft, threadInfo.id, text, textEdited]);

const prevIsActiveRef = React.useRef(isActive);		const prevIsActiveRef = React.useRef(isActive);
React.useEffect(() => {		React.useEffect(() => {
if (isActive && !prevIsActiveRef.current) {		if (isActive && !prevIsActiveRef.current) {
addEditInputMessageListener();		addEditInputMessageListener();
} else if (!isActive && prevIsActiveRef) {		} else if (!isActive && prevIsActiveRef) {
removeEditInputMessageListener();		removeEditInputMessageListener();
}		}
▲ Show 20 Lines • Show All 57 Lines • ▼ Show 20 Lines	const expandoButton = (
onPress={expandButtons}		onPress={expandButtons}
activeOpacity={0.4}		activeOpacity={0.4}
style={styles.expandButton}		style={styles.expandButton}
>		>
<AnimatedView style={expandIconStyle}>		<AnimatedView style={expandIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="chevron-right"		name="chevron-right"
size={22}		size={22}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
);		);
const threadColor = `#${props.threadInfo.color}`;		const threadColor = `#${threadInfo.color}`;
const expandoButtonsViewStyle: Array<ViewStyle> = [		const expandoButtonsViewStyle: Array<ViewStyle> = [
styles.innerExpandoButtons,		styles.innerExpandoButtons,
];		];
if (isEditMode()) {		if (isEditMode()) {
expandoButtonsViewStyle.push({ display: 'none' });		expandoButtonsViewStyle.push({ display: 'none' });
}		}
return (		return (
<TouchableWithoutFeedback onPress={dismissKeyboard}>		<TouchableWithoutFeedback onPress={dismissKeyboard}>
<View style={styles.inputContainer}>		<View style={styles.inputContainer}>
<AnimatedView style={expandoButtonsStyle}>		<AnimatedView style={expandoButtonsStyle}>
<View style={expandoButtonsViewStyle}>		<View style={expandoButtonsViewStyle}>
{buttonsExpanded ? expandoButton : null}		{buttonsExpanded ? expandoButton : null}
<TouchableOpacity onPress={showMediaGallery} activeOpacity={0.4}>		<TouchableOpacity onPress={showMediaGallery} activeOpacity={0.4}>
<AnimatedView style={cameraRollIconStyle}>		<AnimatedView style={cameraRollIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="image-1"		name="image-1"
size={28}		size={28}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
<TouchableOpacity		<TouchableOpacity
onPress={props.openCamera}		onPress={openCamera}
activeOpacity={0.4}		activeOpacity={0.4}
disabled={!buttonsExpanded}		disabled={!buttonsExpanded}
>		>
<AnimatedView style={cameraIconStyle}>		<AnimatedView style={cameraIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="camera"		name="camera"
size={28}		size={28}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
{buttonsExpanded ? null : expandoButton}		{buttonsExpanded ? null : expandoButton}
</View>		</View>
</AnimatedView>		</AnimatedView>
<SelectableTextInput		<SelectableTextInput
allowImagePasteForThreadID={props.threadInfo.id}		allowImagePasteForThreadID={threadInfo.id}
value={text}		value={text}
onChangeText={updateText}		onChangeText={updateText}
selection={selectionState.selection}		selection={selectionState.selection}
onUpdateSyncedSelectionData={setSelectionState}		onUpdateSyncedSelectionData={setSelectionState}
placeholder="Send a message..."		placeholder="Send a message..."
placeholderTextColor={colors.listInputButton}		placeholderTextColor={colors.listInputButton}
multiline={true}		multiline={true}
style={styles.textInput}		style={styles.textInput}
textInputRef={setTextInputRef}		textInputRef={setTextInputRef}
clearableTextInputRef={setClearableTextInputRef}		clearableTextInputRef={setClearableTextInputRef}
ref={selectableTextInputRef}		ref={selectableTextInputRef}
selectionColor={`#${props.threadInfo.color}`}		selectionColor={`#${threadInfo.color}`}
/>		/>
<AnimatedView style={sendButtonContainerStyle}>		<AnimatedView style={sendButtonContainerStyle}>
<TouchableOpacity		<TouchableOpacity
onPress={onSend}		onPress={onSend}
activeOpacity={0.4}		activeOpacity={0.4}
style={styles.sendButton}		style={styles.sendButton}
disabled={trimMessage(text) === ''}		disabled={trimMessage(text) === ''}
>		>
<Icon		<Icon
name="md-send"		name="md-send"
size={25}		size={25}
style={styles.sendIcon}		style={styles.sendIcon}
color={threadColor}		color={threadColor}
/>		/>
</TouchableOpacity>		</TouchableOpacity>
</AnimatedView>		</AnimatedView>
</View>		</View>
</TouchableWithoutFeedback>		</TouchableWithoutFeedback>
);		);
};		};

const isMember = viewerIsMember(props.threadInfo);		const isMember = viewerIsMember(threadInfo);
let joinButton = null;		let joinButton = null;
const threadColor = `#${props.threadInfo.color}`;		const threadColor = `#${threadInfo.color}`;

if (!isMember && currentUserCanJoin && !threadCreationInProgress) {		if (!isMember && currentUserCanJoin && !threadCreationInProgress) {
let buttonContent;		let buttonContent;
if (joinThreadLoadingStatus === 'loading') {		if (joinThreadLoadingStatus === 'loading') {
buttonContent = (		buttonContent = (
<ActivityIndicator		<ActivityIndicator
size="small"		size="small"
color="white"		color="white"
style={styles.joinThreadLoadingIndicator}		style={styles.joinThreadLoadingIndicator}
/>		/>
);		);
} else {		} else {
const textStyle = colorIsDark(props.threadInfo.color)		const textStyle = colorIsDark(threadInfo.color)
? styles.joinButtonTextLight		? styles.joinButtonTextLight
: styles.joinButtonTextDark;		: styles.joinButtonTextDark;
buttonContent = (		buttonContent = (
<View style={styles.joinButtonContent}>		<View style={styles.joinButtonContent}>
<SWMansionIcon name="plus" style={textStyle} />		<SWMansionIcon name="plus" style={textStyle} />
<Text style={textStyle}>Join Chat</Text>		<Text style={textStyle}>Join Chat</Text>
</View>		</View>
);		);
Show All 22 Lines	typeaheadTooltip = (
focusAndUpdateTextAndSelection={focusAndUpdateTextAndSelection}		focusAndUpdateTextAndSelection={focusAndUpdateTextAndSelection}
typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}		typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}
TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}		TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}
/>		/>
);		);
}		}

let content;		let content;
const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(		const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(threadInfo);
props.threadInfo,
);
if (shouldShowTextInput()) {		if (shouldShowTextInput()) {
content = renderInput();		content = renderInput();
} else if (		} else if (
threadFrozen &&		threadFrozen &&
threadActualMembers(props.threadInfo.members).length === 2		threadActualMembers(threadInfo.members).length === 2
) {		) {
content = (		content = (
<Text style={styles.explanation}>		<Text style={styles.explanation}>
You can’t send messages to a user that you’ve blocked.		You can’t send messages to a user that you’ve blocked.
</Text>		</Text>
);		);
} else if (isMember) {		} else if (isMember) {
content = (		content = (
▲ Show 20 Lines • Show All 42 Lines • ▼ Show 20 Lines	editedMessage = (
color={threadColor}		color={threadColor}
onPress={onPressExitEditMode}		onPress={onPressExitEditMode}
/>		/>
</AnimatedView>		</AnimatedView>
);		);
}		}

return (		return (
<AnimatedView style={styles.container} onLayout={props.onInputBarLayout}>		<AnimatedView style={styles.container} onLayout={onInputBarLayout}>
{typeaheadTooltip}		{typeaheadTooltip}
{joinButton}		{joinButton}
{editedMessage}		{editedMessage}
{content}		{content}
{keyboardInputHost}		{keyboardInputHost}
</AnimatedView>		</AnimatedView>
);		);
}		}
▲ Show 20 Lines • Show All 114 Lines • Show Last 20 Lines

View Options

.buildkite/macos.yml

Show First 20 Lines • Show All 262 Lines • ▼ Show 20 Lines	const createThreadLoadingStatusSelector =
createLoadingStatusSelector(newThreadActionTypes);		createLoadingStatusSelector(newThreadActionTypes);

type ConnectedChatInputBarBaseProps = {		type ConnectedChatInputBarBaseProps = {
...BaseProps,		...BaseProps,
+onInputBarLayout?: (event: LayoutEvent) => mixed,		+onInputBarLayout?: (event: LayoutEvent) => mixed,
+openCamera: () => mixed,		+openCamera: () => mixed,
+navigation?: ChatNavigationProp<'MessageList'>,		+navigation?: ChatNavigationProp<'MessageList'>,
};		};
function ConnectedChatInputBarBase(props: ConnectedChatInputBarBaseProps) {		function ConnectedChatInputBarBase({
		threadInfo,
		navigation,
		openCamera,
		onInputBarLayout,
		}: ConnectedChatInputBarBaseProps) {
const navContext = React.useContext(NavContext);		const navContext = React.useContext(NavContext);
const keyboardState = React.useContext(KeyboardContext);		const keyboardState = React.useContext(KeyboardContext);
const inputState = React.useContext(InputStateContext);		const inputState = React.useContext(InputStateContext);
const overlayContext = React.useContext(OverlayContext);		const overlayContext = React.useContext(OverlayContext);

const viewerID = useSelector(		const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,		state => state.currentUserInfo && state.currentUserInfo.id,
);		);
const draft = useSelector(		const draft = useSelector(
state =>		state => state.draftStore.drafts[draftKeyFromThreadID(threadInfo.id)] ?? '',
state.draftStore.drafts[draftKeyFromThreadID(props.threadInfo.id)] ?? '',
);		);
const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);		const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
const createThreadLoadingStatus = useSelector(		const createThreadLoadingStatus = useSelector(
createThreadLoadingStatusSelector,		createThreadLoadingStatusSelector,
);		);
const threadCreationInProgress = createThreadLoadingStatus === 'loading';		const threadCreationInProgress = createThreadLoadingStatus === 'loading';
const calendarQuery = useSelector(state =>		const calendarQuery = useSelector(state =>
nonThreadCalendarQuery({		nonThreadCalendarQuery({
redux: state,		redux: state,
navContext,		navContext,
}),		}),
);		);
const userInfos = useSelector(state => state.userStore.userInfos);		const userInfos = useSelector(state => state.userStore.userInfos);

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
const colors = useColors();		const colors = useColors();

const isActive = React.useMemo(		const isActive = React.useMemo(
() => props.threadInfo.id === activeThreadSelector(navContext),		() => threadInfo.id === activeThreadSelector(navContext),
[props.threadInfo.id, navContext],		[threadInfo.id, navContext],
);		);

const dispatch = useDispatch();		const dispatch = useDispatch();
const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const rawThreadInfo = useSelector(		const rawThreadInfo = useSelector(
state => state.threadStore.threadInfos[props.threadInfo.id],		state => state.threadStore.threadInfos[threadInfo.id],
);		);

const { getChatMentionSearchIndex } = useChatMentionContext();		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 =>		const parentThreadInfo = useSelector(state =>
parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,		parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
);		);
const communityThreadInfo = useSelector(state =>		const communityThreadInfo = useSelector(state =>
community ? threadInfoSelector(state)[community] : null,		community ? threadInfoSelector(state)[community] : null,
);		);

const threadFrozen = useThreadFrozenDueToViewerBlock(		const threadFrozen = useThreadFrozenDueToViewerBlock(
props.threadInfo,		threadInfo,
communityThreadInfo,		communityThreadInfo,
viewerID,		viewerID,
userInfos,		userInfos,
);		);

const userMentionsCandidates = useUserMentionsCandidates(		const userMentionsCandidates = useUserMentionsCandidates(
props.threadInfo,		threadInfo,
parentThreadInfo,		parentThreadInfo,
);		);

const chatMentionCandidates = useThreadChatMentionCandidates(		const chatMentionCandidates = useThreadChatMentionCandidates(threadInfo);
props.threadInfo,
);

const messageEditingContext = React.useContext(MessageEditingContext);		const messageEditingContext = React.useContext(MessageEditingContext);

const editedMessageInfo = messageEditingContext?.editState.editedMessage;		const editedMessageInfo = messageEditingContext?.editState.editedMessage;
const editedMessagePreview = useMessagePreview(		const editedMessagePreview = useMessagePreview(
editedMessageInfo,		editedMessageInfo,
props.threadInfo,		threadInfo,
getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,		getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,
);		);
const editMessage = useEditMessage(props.threadInfo);		const editMessage = useEditMessage(threadInfo);

const [selectionState, setSelectionState] =		const [selectionState, setSelectionState] =
React.useState<SyncedSelectionData>({		React.useState<SyncedSelectionData>({
text: draft,		text: draft,
selection: { start: 0, end: 0 },		selection: { start: 0, end: 0 },
});		});

const [text, setText] = React.useState(draft);		const [text, setText] = React.useState(draft);
Show All 34 Lines	function ConnectedChatInputBarBase({

const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =		const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =
React.useMemo(		React.useMemo(
() => [...suggestedUsers, ...suggestedChats],		() => [...suggestedUsers, ...suggestedChats],
[suggestedUsers, suggestedChats],		[suggestedUsers, suggestedChats],
);		);

const currentUserIsVoiced = useThreadHasPermission(		const currentUserIsVoiced = useThreadHasPermission(
props.threadInfo,		threadInfo,
threadPermissions.VOICED,		threadPermissions.VOICED,
);		);

const currentUserCanJoin = useThreadHasPermission(		const currentUserCanJoin = useThreadHasPermission(
props.threadInfo,		threadInfo,
threadPermissions.JOIN_THREAD,		threadPermissions.JOIN_THREAD,
);		);

const isExitingDuringEditModeRef = React.useRef(false);		const isExitingDuringEditModeRef = React.useRef(false);

const expandoButtonsOpen = useValue(1);		const expandoButtonsOpen = useValue(1);
const targetExpandoButtonsOpen = useValue(1);		const targetExpandoButtonsOpen = useValue(1);

▲ Show 20 Lines • Show All 126 Lines • ▼ Show 20 Lines	const shouldShowTextInput = React.useCallback(() => {
// and won't list the viewer as a member,		// and won't list the viewer as a member,
// which will end up hiding the input.		// which will end up hiding the input.
// In this case, we will assume that our creation action		// In this case, we will assume that our creation action
// will get translated into a join, and as long		// will get translated into a join, and as long
// as members are voiced, we can show the input.		// as members are voiced, we can show the input.
if (!threadCreationInProgress) {		if (!threadCreationInProgress) {
return false;		return false;
}		}
return checkIfDefaultMembersAreVoiced(props.threadInfo);		return checkIfDefaultMembersAreVoiced(threadInfo);
}, [currentUserIsVoiced, props.threadInfo, threadCreationInProgress]);		}, [currentUserIsVoiced, threadInfo, threadCreationInProgress]);

const isEditMode = React.useCallback(() => {		const isEditMode = React.useCallback(() => {
const editState = messageEditingContext?.editState;		const editState = messageEditingContext?.editState;
const isThisThread =		const isThisThread = editState?.editedMessage?.threadID === threadInfo.id;
editState?.editedMessage?.threadID === props.threadInfo.id;
return editState?.editedMessage !== null && isThisThread;		return editState?.editedMessage !== null && isThisThread;
}, [messageEditingContext?.editState, props.threadInfo.id]);		}, [messageEditingContext?.editState, threadInfo.id]);

const immediatelyShowSendButton = React.useCallback(() => {		const immediatelyShowSendButton = React.useCallback(() => {
sendButtonContainerOpen.setValue(1);		sendButtonContainerOpen.setValue(1);
targetSendButtonContainerOpen.setValue(1);		targetSendButtonContainerOpen.setValue(1);
}, [sendButtonContainerOpen, targetSendButtonContainerOpen]);		}, [sendButtonContainerOpen, targetSendButtonContainerOpen]);

const updateSendButton = React.useCallback(		const updateSendButton = React.useCallback(
(currentText: string) => {		(currentText: string) => {
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines	function ConnectedChatInputBarBase({
);		);

const saveDraft = React.useMemo(		const saveDraft = React.useMemo(
() =>		() =>
_throttle(newText => {		_throttle(newText => {
dispatch({		dispatch({
type: updateDraftActionType,		type: updateDraftActionType,
payload: {		payload: {
key: draftKeyFromThreadID(props.threadInfo.id),		key: draftKeyFromThreadID(threadInfo.id),
text: newText,		text: newText,
},		},
});		});
}, 400),		}, 400),
[dispatch, props.threadInfo.id],		[dispatch, threadInfo.id],
);		);

const isMessageEdited = React.useCallback(		const isMessageEdited = React.useCallback(
(newText?: string): boolean => {		(newText?: string): boolean => {
let updatedText = newText ?? text;		let updatedText = newText ?? text;
updatedText = trimMessage(updatedText);		updatedText = trimMessage(updatedText);
const originalText = editedMessageInfo?.text;		const originalText = editedMessageInfo?.text;
return updatedText !== originalText;		return updatedText !== originalText;
Show All 25 Lines	const focusAndUpdateButtonsVisibility = React.useCallback(() => {
}		}

immediatelyShowSendButton();		immediatelyShowSendButton();
immediatelyHideButtons();		immediatelyHideButtons();
textInput.focus();		textInput.focus();
}, [immediatelyHideButtons, immediatelyShowSendButton]);		}, [immediatelyHideButtons, immediatelyShowSendButton]);

const blockNavigation = React.useCallback(() => {		const blockNavigation = React.useCallback(() => {
const { navigation } = props;
if (!navigation \|\| !navigation.isFocused()) {		if (!navigation \|\| !navigation.isFocused()) {
return;		return;
}		}
navigation.setParams({		navigation.setParams({
removeEditMode: removeEditMode,		removeEditMode: removeEditMode,
});		});
}, [props, removeEditMode]);		}, [navigation, removeEditMode]);

const unblockNavigation = React.useCallback(() => {		const unblockNavigation = React.useCallback(() => {
const { navigation } = props;		navigation?.setParams({ removeEditMode: null });
if (!navigation) {		}, [navigation]);
return;
}
navigation.setParams({ removeEditMode: null });
}, [props]);

const exitEditMode = React.useCallback(() => {		const exitEditMode = React.useCallback(() => {
messageEditingContext?.setEditedMessage(null, () => {		messageEditingContext?.setEditedMessage(null, () => {
unblockNavigation();		unblockNavigation();
updateText(draft);		updateText(draft);
focusAndUpdateButtonsVisibility();		focusAndUpdateButtonsVisibility();
updateSendButton(draft);		updateSendButton(draft);
});		});
▲ Show 20 Lines • Show All 111 Lines • ▼ Show 20 Lines	const onSend = React.useCallback(async () => {
const creatorID = viewerID;		const creatorID = viewerID;
invariant(creatorID, 'should have viewer ID in order to send a message');		invariant(creatorID, 'should have viewer ID in order to send a message');
invariant(inputState, 'inputState should be set in ChatInputBar.onSend');		invariant(inputState, 'inputState should be set in ChatInputBar.onSend');

await inputState.sendTextMessage(		await inputState.sendTextMessage(
{		{
type: messageTypes.TEXT,		type: messageTypes.TEXT,
localID,		localID,
threadID: props.threadInfo.id,		threadID: threadInfo.id,
text: newText,		text: newText,
creatorID,		creatorID,
time: Date.now(),		time: Date.now(),
},		},
props.threadInfo,		threadInfo,
parentThreadInfo,		parentThreadInfo,
);		);
}, [		}, [
editMessageInner,		editMessageInner,
getEditedMessage,		getEditedMessage,
inputState,		inputState,
parentThreadInfo,		parentThreadInfo,
props.threadInfo,		threadInfo,
text,		text,
updateSendButton,		updateSendButton,
viewerID,		viewerID,
]);		]);

const removeEditMode: RemoveEditMode = React.useCallback(		const removeEditMode: RemoveEditMode = React.useCallback(
action => {		action => {
const { navigation } = props;
if (!navigation \|\| isExitingDuringEditModeRef.current) {		if (!navigation \|\| isExitingDuringEditModeRef.current) {
return 'ignore_action';		return 'ignore_action';
}		}
if (!isMessageEdited()) {		if (!isMessageEdited()) {
unblockNavigation();		unblockNavigation();
return 'reduce_action';		return 'reduce_action';
}		}
const unblockAndDispatch = () => {		const unblockAndDispatch = () => {
unblockNavigation();		unblockNavigation();
navigation.dispatch(action);		navigation.dispatch(action);
};		};
const onContinueEditing = () => {		const onContinueEditing = () => {
overlayContext?.resetScrollBlockingModalStatus();		overlayContext?.resetScrollBlockingModalStatus();
};		};
exitEditAlert({		exitEditAlert({
onDiscard: unblockAndDispatch,		onDiscard: unblockAndDispatch,
onContinueEditing,		onContinueEditing,
});		});
return 'ignore_action';		return 'ignore_action';
},		},
[isMessageEdited, overlayContext, props, unblockNavigation],		[isMessageEdited, navigation, overlayContext, unblockNavigation],
);		);

const onPressExitEditMode = React.useCallback(() => {		const onPressExitEditMode = React.useCallback(() => {
if (!isMessageEdited()) {		if (!isMessageEdited()) {
exitEditMode();		exitEditMode();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
Show All 32 Lines	(e: {
if (!isEditMode()) {		if (!isEditMode()) {
return;		return;
}		}
const { action } = e.data;		const { action } = e.data;
e.preventDefault();		e.preventDefault();
const saveExit = () => {		const saveExit = () => {
messageEditingContext?.setEditedMessage(null, () => {		messageEditingContext?.setEditedMessage(null, () => {
isExitingDuringEditModeRef.current = true;		isExitingDuringEditModeRef.current = true;
props.navigation?.dispatch(action);		navigation?.dispatch(action);
});		});
};		};
if (!isMessageEdited()) {		if (!isMessageEdited()) {
saveExit();		saveExit();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
onDiscard: saveExit,		onDiscard: saveExit,
});		});
},		},
[isEditMode, isMessageEdited, messageEditingContext, props.navigation],		[isEditMode, isMessageEdited, messageEditingContext, navigation],
);		);

React.useEffect(() => {		React.useEffect(() => {
if (isActive) {		if (isActive) {
addEditInputMessageListener();		addEditInputMessageListener();
}		}

return () => {		return () => {
if (isActive) {		if (isActive) {
removeEditInputMessageListener();		removeEditInputMessageListener();
}		}
};		};
}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);		}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);

React.useEffect(() => {		React.useEffect(() => {
const { navigation } = props;

const clearBeforeRemoveListener = navigation?.addListener(		const clearBeforeRemoveListener = navigation?.addListener(
'beforeRemove',		'beforeRemove',
onNavigationBeforeRemove,		onNavigationBeforeRemove,
);		);
const clearFocusListener = navigation?.addListener(		const clearFocusListener = navigation?.addListener(
'focus',		'focus',
onNavigationFocus,		onNavigationFocus,
);		);
const clearBlurListener = navigation?.addListener('blur', onNavigationBlur);		const clearBlurListener = navigation?.addListener('blur', onNavigationBlur);
return () => {		return () => {
clearBeforeRemoveListener?.();		clearBeforeRemoveListener?.();
clearFocusListener?.();		clearFocusListener?.();
clearBlurListener?.();		clearBlurListener?.();
};		};
}, [onNavigationBeforeRemove, onNavigationBlur, onNavigationFocus, props]);		}, [
		navigation,
		onNavigationBeforeRemove,
		onNavigationBlur,
		onNavigationFocus,
		]);

const callJoinThread = useJoinThread();		const callJoinThread = useJoinThread();

const joinAction = React.useCallback(async (): Promise<ThreadJoinPayload> => {		const joinAction = React.useCallback(async (): Promise<ThreadJoinPayload> => {
let joinThreadInput;		let joinThreadInput;
if (rawThreadInfo.thick) {		if (rawThreadInfo.thick) {
joinThreadInput = {		joinThreadInput = {
thick: true,		thick: true,
rawThreadInfo: rawThreadInfo,		rawThreadInfo: rawThreadInfo,
};		};
} else {		} else {
const query = calendarQuery();		const query = calendarQuery();
joinThreadInput = {		joinThreadInput = {
thick: false,		thick: false,
threadID: props.threadInfo.id,		threadID: threadInfo.id,
calendarQuery: {		calendarQuery: {
startDate: query.startDate,		startDate: query.startDate,
endDate: query.endDate,		endDate: query.endDate,
filters: [		filters: [
...query.filters,		...query.filters,
{ type: 'threads', threadIDs: [props.threadInfo.id] },		{ type: 'threads', threadIDs: [threadInfo.id] },
],		],
},		},
};		};
}		}

return await callJoinThread(joinThreadInput);		return await callJoinThread(joinThreadInput);
}, [calendarQuery, callJoinThread, props.threadInfo.id, rawThreadInfo]);		}, [calendarQuery, callJoinThread, threadInfo.id, rawThreadInfo]);

const onPressJoin = React.useCallback(() => {		const onPressJoin = React.useCallback(() => {
void dispatchActionPromise(joinThreadActionTypes, joinAction());		void dispatchActionPromise(joinThreadActionTypes, joinAction());
}, [dispatchActionPromise, joinAction]);		}, [dispatchActionPromise, joinAction]);

const setIOSKeyboardHeight = React.useCallback(() => {		const setIOSKeyboardHeight = React.useCallback(() => {
if (Platform.OS !== 'ios') {		if (Platform.OS !== 'ios') {
return;		return;
}		}
const textInput = textInputRef.current;		const textInput = textInputRef.current;
if (!textInput) {		if (!textInput) {
return;		return;
}		}
const keyboardHeight = getKeyboardHeight();		const keyboardHeight = getKeyboardHeight();
if (keyboardHeight === null \|\| keyboardHeight === undefined) {		if (keyboardHeight === null \|\| keyboardHeight === undefined) {
return;		return;
}		}
TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);		TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);
}, []);		}, []);

const showMediaGallery = React.useCallback(() => {		const showMediaGallery = React.useCallback(() => {
invariant(keyboardState, 'keyboardState should be initialized');		invariant(keyboardState, 'keyboardState should be initialized');
keyboardState.showMediaGallery(props.threadInfo);		keyboardState.showMediaGallery(threadInfo);
}, [keyboardState, props.threadInfo]);		}, [keyboardState, threadInfo]);

const dismissKeyboard = React.useCallback(() => {		const dismissKeyboard = React.useCallback(() => {
keyboardState?.dismissKeyboard();		keyboardState?.dismissKeyboard();
}, [keyboardState]);		}, [keyboardState]);

const prevThreadInfoID = React.useRef<?string>();		const prevThreadInfoID = React.useRef<?string>();
const prevDraft = React.useRef<?string>();		const prevDraft = React.useRef<?string>();

React.useEffect(() => {		React.useEffect(() => {
if (		if (
textEdited &&		textEdited &&
text &&		text &&
prevThreadInfoID.current &&		prevThreadInfoID.current &&
props.threadInfo.id !== prevThreadInfoID.current		threadInfo.id !== prevThreadInfoID.current
) {		) {
dispatch({		dispatch({
type: moveDraftActionType,		type: moveDraftActionType,
payload: {		payload: {
oldKey: draftKeyFromThreadID(prevThreadInfoID.current),		oldKey: draftKeyFromThreadID(prevThreadInfoID.current),
newKey: draftKeyFromThreadID(props.threadInfo.id),		newKey: draftKeyFromThreadID(threadInfo.id),
},		},
});		});
} else if (!textEdited && draft !== prevDraft.current) {		} else if (!textEdited && draft !== prevDraft.current) {
setText(draft);		setText(draft);
}		}
prevThreadInfoID.current = props.threadInfo.id;		prevThreadInfoID.current = threadInfo.id;
prevDraft.current = draft;		prevDraft.current = draft;
}, [dispatch, draft, props.threadInfo.id, text, textEdited]);		}, [dispatch, draft, threadInfo.id, text, textEdited]);

const prevIsActiveRef = React.useRef(isActive);		const prevIsActiveRef = React.useRef(isActive);
React.useEffect(() => {		React.useEffect(() => {
if (isActive && !prevIsActiveRef.current) {		if (isActive && !prevIsActiveRef.current) {
addEditInputMessageListener();		addEditInputMessageListener();
} else if (!isActive && prevIsActiveRef) {		} else if (!isActive && prevIsActiveRef) {
removeEditInputMessageListener();		removeEditInputMessageListener();
}		}
▲ Show 20 Lines • Show All 57 Lines • ▼ Show 20 Lines	const expandoButton = (
onPress={expandButtons}		onPress={expandButtons}
activeOpacity={0.4}		activeOpacity={0.4}
style={styles.expandButton}		style={styles.expandButton}
>		>
<AnimatedView style={expandIconStyle}>		<AnimatedView style={expandIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="chevron-right"		name="chevron-right"
size={22}		size={22}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
);		);
const threadColor = `#${props.threadInfo.color}`;		const threadColor = `#${threadInfo.color}`;
const expandoButtonsViewStyle: Array<ViewStyle> = [		const expandoButtonsViewStyle: Array<ViewStyle> = [
styles.innerExpandoButtons,		styles.innerExpandoButtons,
];		];
if (isEditMode()) {		if (isEditMode()) {
expandoButtonsViewStyle.push({ display: 'none' });		expandoButtonsViewStyle.push({ display: 'none' });
}		}
return (		return (
<TouchableWithoutFeedback onPress={dismissKeyboard}>		<TouchableWithoutFeedback onPress={dismissKeyboard}>
<View style={styles.inputContainer}>		<View style={styles.inputContainer}>
<AnimatedView style={expandoButtonsStyle}>		<AnimatedView style={expandoButtonsStyle}>
<View style={expandoButtonsViewStyle}>		<View style={expandoButtonsViewStyle}>
{buttonsExpanded ? expandoButton : null}		{buttonsExpanded ? expandoButton : null}
<TouchableOpacity onPress={showMediaGallery} activeOpacity={0.4}>		<TouchableOpacity onPress={showMediaGallery} activeOpacity={0.4}>
<AnimatedView style={cameraRollIconStyle}>		<AnimatedView style={cameraRollIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="image-1"		name="image-1"
size={28}		size={28}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
<TouchableOpacity		<TouchableOpacity
onPress={props.openCamera}		onPress={openCamera}
activeOpacity={0.4}		activeOpacity={0.4}
disabled={!buttonsExpanded}		disabled={!buttonsExpanded}
>		>
<AnimatedView style={cameraIconStyle}>		<AnimatedView style={cameraIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="camera"		name="camera"
size={28}		size={28}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
{buttonsExpanded ? null : expandoButton}		{buttonsExpanded ? null : expandoButton}
</View>		</View>
</AnimatedView>		</AnimatedView>
<SelectableTextInput		<SelectableTextInput
allowImagePasteForThreadID={props.threadInfo.id}		allowImagePasteForThreadID={threadInfo.id}
value={text}		value={text}
onChangeText={updateText}		onChangeText={updateText}
selection={selectionState.selection}		selection={selectionState.selection}
onUpdateSyncedSelectionData={setSelectionState}		onUpdateSyncedSelectionData={setSelectionState}
placeholder="Send a message..."		placeholder="Send a message..."
placeholderTextColor={colors.listInputButton}		placeholderTextColor={colors.listInputButton}
multiline={true}		multiline={true}
style={styles.textInput}		style={styles.textInput}
textInputRef={setTextInputRef}		textInputRef={setTextInputRef}
clearableTextInputRef={setClearableTextInputRef}		clearableTextInputRef={setClearableTextInputRef}
ref={selectableTextInputRef}		ref={selectableTextInputRef}
selectionColor={`#${props.threadInfo.color}`}		selectionColor={`#${threadInfo.color}`}
/>		/>
<AnimatedView style={sendButtonContainerStyle}>		<AnimatedView style={sendButtonContainerStyle}>
<TouchableOpacity		<TouchableOpacity
onPress={onSend}		onPress={onSend}
activeOpacity={0.4}		activeOpacity={0.4}
style={styles.sendButton}		style={styles.sendButton}
disabled={trimMessage(text) === ''}		disabled={trimMessage(text) === ''}
>		>
<Icon		<Icon
name="md-send"		name="md-send"
size={25}		size={25}
style={styles.sendIcon}		style={styles.sendIcon}
color={threadColor}		color={threadColor}
/>		/>
</TouchableOpacity>		</TouchableOpacity>
</AnimatedView>		</AnimatedView>
</View>		</View>
</TouchableWithoutFeedback>		</TouchableWithoutFeedback>
);		);
};		};

const isMember = viewerIsMember(props.threadInfo);		const isMember = viewerIsMember(threadInfo);
let joinButton = null;		let joinButton = null;
const threadColor = `#${props.threadInfo.color}`;		const threadColor = `#${threadInfo.color}`;

if (!isMember && currentUserCanJoin && !threadCreationInProgress) {		if (!isMember && currentUserCanJoin && !threadCreationInProgress) {
let buttonContent;		let buttonContent;
if (joinThreadLoadingStatus === 'loading') {		if (joinThreadLoadingStatus === 'loading') {
buttonContent = (		buttonContent = (
<ActivityIndicator		<ActivityIndicator
size="small"		size="small"
color="white"		color="white"
style={styles.joinThreadLoadingIndicator}		style={styles.joinThreadLoadingIndicator}
/>		/>
);		);
} else {		} else {
const textStyle = colorIsDark(props.threadInfo.color)		const textStyle = colorIsDark(threadInfo.color)
? styles.joinButtonTextLight		? styles.joinButtonTextLight
: styles.joinButtonTextDark;		: styles.joinButtonTextDark;
buttonContent = (		buttonContent = (
<View style={styles.joinButtonContent}>		<View style={styles.joinButtonContent}>
<SWMansionIcon name="plus" style={textStyle} />		<SWMansionIcon name="plus" style={textStyle} />
<Text style={textStyle}>Join Chat</Text>		<Text style={textStyle}>Join Chat</Text>
</View>		</View>
);		);
Show All 22 Lines	typeaheadTooltip = (
focusAndUpdateTextAndSelection={focusAndUpdateTextAndSelection}		focusAndUpdateTextAndSelection={focusAndUpdateTextAndSelection}
typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}		typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}
TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}		TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}
/>		/>
);		);
}		}

let content;		let content;
const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(		const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(threadInfo);
props.threadInfo,
);
if (shouldShowTextInput()) {		if (shouldShowTextInput()) {
content = renderInput();		content = renderInput();
} else if (		} else if (
threadFrozen &&		threadFrozen &&
threadActualMembers(props.threadInfo.members).length === 2		threadActualMembers(threadInfo.members).length === 2
) {		) {
content = (		content = (
<Text style={styles.explanation}>		<Text style={styles.explanation}>
You can’t send messages to a user that you’ve blocked.		You can’t send messages to a user that you’ve blocked.
</Text>		</Text>
);		);
} else if (isMember) {		} else if (isMember) {
content = (		content = (
▲ Show 20 Lines • Show All 42 Lines • ▼ Show 20 Lines	editedMessage = (
color={threadColor}		color={threadColor}
onPress={onPressExitEditMode}		onPress={onPressExitEditMode}
/>		/>
</AnimatedView>		</AnimatedView>
);		);
}		}

return (		return (
<AnimatedView style={styles.container} onLayout={props.onInputBarLayout}>		<AnimatedView style={styles.container} onLayout={onInputBarLayout}>
{typeaheadTooltip}		{typeaheadTooltip}
{joinButton}		{joinButton}
{editedMessage}		{editedMessage}
{content}		{content}
{keyboardInputHost}		{keyboardInputHost}
</AnimatedView>		</AnimatedView>
);		);
}		}
▲ Show 20 Lines • Show All 114 Lines • Show Last 20 Lines

View Options

native/android/app/CMakeLists.txt

Show First 20 Lines • Show All 262 Lines • ▼ Show 20 Lines	const createThreadLoadingStatusSelector =
createLoadingStatusSelector(newThreadActionTypes);		createLoadingStatusSelector(newThreadActionTypes);

type ConnectedChatInputBarBaseProps = {		type ConnectedChatInputBarBaseProps = {
...BaseProps,		...BaseProps,
+onInputBarLayout?: (event: LayoutEvent) => mixed,		+onInputBarLayout?: (event: LayoutEvent) => mixed,
+openCamera: () => mixed,		+openCamera: () => mixed,
+navigation?: ChatNavigationProp<'MessageList'>,		+navigation?: ChatNavigationProp<'MessageList'>,
};		};
function ConnectedChatInputBarBase(props: ConnectedChatInputBarBaseProps) {		function ConnectedChatInputBarBase({
		threadInfo,
		navigation,
		openCamera,
		onInputBarLayout,
		}: ConnectedChatInputBarBaseProps) {
const navContext = React.useContext(NavContext);		const navContext = React.useContext(NavContext);
const keyboardState = React.useContext(KeyboardContext);		const keyboardState = React.useContext(KeyboardContext);
const inputState = React.useContext(InputStateContext);		const inputState = React.useContext(InputStateContext);
const overlayContext = React.useContext(OverlayContext);		const overlayContext = React.useContext(OverlayContext);

const viewerID = useSelector(		const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,		state => state.currentUserInfo && state.currentUserInfo.id,
);		);
const draft = useSelector(		const draft = useSelector(
state =>		state => state.draftStore.drafts[draftKeyFromThreadID(threadInfo.id)] ?? '',
state.draftStore.drafts[draftKeyFromThreadID(props.threadInfo.id)] ?? '',
);		);
const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);		const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
const createThreadLoadingStatus = useSelector(		const createThreadLoadingStatus = useSelector(
createThreadLoadingStatusSelector,		createThreadLoadingStatusSelector,
);		);
const threadCreationInProgress = createThreadLoadingStatus === 'loading';		const threadCreationInProgress = createThreadLoadingStatus === 'loading';
const calendarQuery = useSelector(state =>		const calendarQuery = useSelector(state =>
nonThreadCalendarQuery({		nonThreadCalendarQuery({
redux: state,		redux: state,
navContext,		navContext,
}),		}),
);		);
const userInfos = useSelector(state => state.userStore.userInfos);		const userInfos = useSelector(state => state.userStore.userInfos);

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
const colors = useColors();		const colors = useColors();

const isActive = React.useMemo(		const isActive = React.useMemo(
() => props.threadInfo.id === activeThreadSelector(navContext),		() => threadInfo.id === activeThreadSelector(navContext),
[props.threadInfo.id, navContext],		[threadInfo.id, navContext],
);		);

const dispatch = useDispatch();		const dispatch = useDispatch();
const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const rawThreadInfo = useSelector(		const rawThreadInfo = useSelector(
state => state.threadStore.threadInfos[props.threadInfo.id],		state => state.threadStore.threadInfos[threadInfo.id],
);		);

const { getChatMentionSearchIndex } = useChatMentionContext();		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 =>		const parentThreadInfo = useSelector(state =>
parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,		parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
);		);
const communityThreadInfo = useSelector(state =>		const communityThreadInfo = useSelector(state =>
community ? threadInfoSelector(state)[community] : null,		community ? threadInfoSelector(state)[community] : null,
);		);

const threadFrozen = useThreadFrozenDueToViewerBlock(		const threadFrozen = useThreadFrozenDueToViewerBlock(
props.threadInfo,		threadInfo,
communityThreadInfo,		communityThreadInfo,
viewerID,		viewerID,
userInfos,		userInfos,
);		);

const userMentionsCandidates = useUserMentionsCandidates(		const userMentionsCandidates = useUserMentionsCandidates(
props.threadInfo,		threadInfo,
parentThreadInfo,		parentThreadInfo,
);		);

const chatMentionCandidates = useThreadChatMentionCandidates(		const chatMentionCandidates = useThreadChatMentionCandidates(threadInfo);
props.threadInfo,
);

const messageEditingContext = React.useContext(MessageEditingContext);		const messageEditingContext = React.useContext(MessageEditingContext);

const editedMessageInfo = messageEditingContext?.editState.editedMessage;		const editedMessageInfo = messageEditingContext?.editState.editedMessage;
const editedMessagePreview = useMessagePreview(		const editedMessagePreview = useMessagePreview(
editedMessageInfo,		editedMessageInfo,
props.threadInfo,		threadInfo,
getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,		getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,
);		);
const editMessage = useEditMessage(props.threadInfo);		const editMessage = useEditMessage(threadInfo);

const [selectionState, setSelectionState] =		const [selectionState, setSelectionState] =
React.useState<SyncedSelectionData>({		React.useState<SyncedSelectionData>({
text: draft,		text: draft,
selection: { start: 0, end: 0 },		selection: { start: 0, end: 0 },
});		});

const [text, setText] = React.useState(draft);		const [text, setText] = React.useState(draft);
Show All 34 Lines	function ConnectedChatInputBarBase({

const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =		const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =
React.useMemo(		React.useMemo(
() => [...suggestedUsers, ...suggestedChats],		() => [...suggestedUsers, ...suggestedChats],
[suggestedUsers, suggestedChats],		[suggestedUsers, suggestedChats],
);		);

const currentUserIsVoiced = useThreadHasPermission(		const currentUserIsVoiced = useThreadHasPermission(
props.threadInfo,		threadInfo,
threadPermissions.VOICED,		threadPermissions.VOICED,
);		);

const currentUserCanJoin = useThreadHasPermission(		const currentUserCanJoin = useThreadHasPermission(
props.threadInfo,		threadInfo,
threadPermissions.JOIN_THREAD,		threadPermissions.JOIN_THREAD,
);		);

const isExitingDuringEditModeRef = React.useRef(false);		const isExitingDuringEditModeRef = React.useRef(false);

const expandoButtonsOpen = useValue(1);		const expandoButtonsOpen = useValue(1);
const targetExpandoButtonsOpen = useValue(1);		const targetExpandoButtonsOpen = useValue(1);

▲ Show 20 Lines • Show All 126 Lines • ▼ Show 20 Lines	const shouldShowTextInput = React.useCallback(() => {
// and won't list the viewer as a member,		// and won't list the viewer as a member,
// which will end up hiding the input.		// which will end up hiding the input.
// In this case, we will assume that our creation action		// In this case, we will assume that our creation action
// will get translated into a join, and as long		// will get translated into a join, and as long
// as members are voiced, we can show the input.		// as members are voiced, we can show the input.
if (!threadCreationInProgress) {		if (!threadCreationInProgress) {
return false;		return false;
}		}
return checkIfDefaultMembersAreVoiced(props.threadInfo);		return checkIfDefaultMembersAreVoiced(threadInfo);
}, [currentUserIsVoiced, props.threadInfo, threadCreationInProgress]);		}, [currentUserIsVoiced, threadInfo, threadCreationInProgress]);

const isEditMode = React.useCallback(() => {		const isEditMode = React.useCallback(() => {
const editState = messageEditingContext?.editState;		const editState = messageEditingContext?.editState;
const isThisThread =		const isThisThread = editState?.editedMessage?.threadID === threadInfo.id;
editState?.editedMessage?.threadID === props.threadInfo.id;
return editState?.editedMessage !== null && isThisThread;		return editState?.editedMessage !== null && isThisThread;
}, [messageEditingContext?.editState, props.threadInfo.id]);		}, [messageEditingContext?.editState, threadInfo.id]);

const immediatelyShowSendButton = React.useCallback(() => {		const immediatelyShowSendButton = React.useCallback(() => {
sendButtonContainerOpen.setValue(1);		sendButtonContainerOpen.setValue(1);
targetSendButtonContainerOpen.setValue(1);		targetSendButtonContainerOpen.setValue(1);
}, [sendButtonContainerOpen, targetSendButtonContainerOpen]);		}, [sendButtonContainerOpen, targetSendButtonContainerOpen]);

const updateSendButton = React.useCallback(		const updateSendButton = React.useCallback(
(currentText: string) => {		(currentText: string) => {
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines	function ConnectedChatInputBarBase({
);		);

const saveDraft = React.useMemo(		const saveDraft = React.useMemo(
() =>		() =>
_throttle(newText => {		_throttle(newText => {
dispatch({		dispatch({
type: updateDraftActionType,		type: updateDraftActionType,
payload: {		payload: {
key: draftKeyFromThreadID(props.threadInfo.id),		key: draftKeyFromThreadID(threadInfo.id),
text: newText,		text: newText,
},		},
});		});
}, 400),		}, 400),
[dispatch, props.threadInfo.id],		[dispatch, threadInfo.id],
);		);

const isMessageEdited = React.useCallback(		const isMessageEdited = React.useCallback(
(newText?: string): boolean => {		(newText?: string): boolean => {
let updatedText = newText ?? text;		let updatedText = newText ?? text;
updatedText = trimMessage(updatedText);		updatedText = trimMessage(updatedText);
const originalText = editedMessageInfo?.text;		const originalText = editedMessageInfo?.text;
return updatedText !== originalText;		return updatedText !== originalText;
Show All 25 Lines	const focusAndUpdateButtonsVisibility = React.useCallback(() => {
}		}

immediatelyShowSendButton();		immediatelyShowSendButton();
immediatelyHideButtons();		immediatelyHideButtons();
textInput.focus();		textInput.focus();
}, [immediatelyHideButtons, immediatelyShowSendButton]);		}, [immediatelyHideButtons, immediatelyShowSendButton]);

const blockNavigation = React.useCallback(() => {		const blockNavigation = React.useCallback(() => {
const { navigation } = props;
if (!navigation \|\| !navigation.isFocused()) {		if (!navigation \|\| !navigation.isFocused()) {
return;		return;
}		}
navigation.setParams({		navigation.setParams({
removeEditMode: removeEditMode,		removeEditMode: removeEditMode,
});		});
}, [props, removeEditMode]);		}, [navigation, removeEditMode]);

const unblockNavigation = React.useCallback(() => {		const unblockNavigation = React.useCallback(() => {
const { navigation } = props;		navigation?.setParams({ removeEditMode: null });
if (!navigation) {		}, [navigation]);
return;
}
navigation.setParams({ removeEditMode: null });
}, [props]);

const exitEditMode = React.useCallback(() => {		const exitEditMode = React.useCallback(() => {
messageEditingContext?.setEditedMessage(null, () => {		messageEditingContext?.setEditedMessage(null, () => {
unblockNavigation();		unblockNavigation();
updateText(draft);		updateText(draft);
focusAndUpdateButtonsVisibility();		focusAndUpdateButtonsVisibility();
updateSendButton(draft);		updateSendButton(draft);
});		});
▲ Show 20 Lines • Show All 111 Lines • ▼ Show 20 Lines	const onSend = React.useCallback(async () => {
const creatorID = viewerID;		const creatorID = viewerID;
invariant(creatorID, 'should have viewer ID in order to send a message');		invariant(creatorID, 'should have viewer ID in order to send a message');
invariant(inputState, 'inputState should be set in ChatInputBar.onSend');		invariant(inputState, 'inputState should be set in ChatInputBar.onSend');

await inputState.sendTextMessage(		await inputState.sendTextMessage(
{		{
type: messageTypes.TEXT,		type: messageTypes.TEXT,
localID,		localID,
threadID: props.threadInfo.id,		threadID: threadInfo.id,
text: newText,		text: newText,
creatorID,		creatorID,
time: Date.now(),		time: Date.now(),
},		},
props.threadInfo,		threadInfo,
parentThreadInfo,		parentThreadInfo,
);		);
}, [		}, [
editMessageInner,		editMessageInner,
getEditedMessage,		getEditedMessage,
inputState,		inputState,
parentThreadInfo,		parentThreadInfo,
props.threadInfo,		threadInfo,
text,		text,
updateSendButton,		updateSendButton,
viewerID,		viewerID,
]);		]);

const removeEditMode: RemoveEditMode = React.useCallback(		const removeEditMode: RemoveEditMode = React.useCallback(
action => {		action => {
const { navigation } = props;
if (!navigation \|\| isExitingDuringEditModeRef.current) {		if (!navigation \|\| isExitingDuringEditModeRef.current) {
return 'ignore_action';		return 'ignore_action';
}		}
if (!isMessageEdited()) {		if (!isMessageEdited()) {
unblockNavigation();		unblockNavigation();
return 'reduce_action';		return 'reduce_action';
}		}
const unblockAndDispatch = () => {		const unblockAndDispatch = () => {
unblockNavigation();		unblockNavigation();
navigation.dispatch(action);		navigation.dispatch(action);
};		};
const onContinueEditing = () => {		const onContinueEditing = () => {
overlayContext?.resetScrollBlockingModalStatus();		overlayContext?.resetScrollBlockingModalStatus();
};		};
exitEditAlert({		exitEditAlert({
onDiscard: unblockAndDispatch,		onDiscard: unblockAndDispatch,
onContinueEditing,		onContinueEditing,
});		});
return 'ignore_action';		return 'ignore_action';
},		},
[isMessageEdited, overlayContext, props, unblockNavigation],		[isMessageEdited, navigation, overlayContext, unblockNavigation],
);		);

const onPressExitEditMode = React.useCallback(() => {		const onPressExitEditMode = React.useCallback(() => {
if (!isMessageEdited()) {		if (!isMessageEdited()) {
exitEditMode();		exitEditMode();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
Show All 32 Lines	(e: {
if (!isEditMode()) {		if (!isEditMode()) {
return;		return;
}		}
const { action } = e.data;		const { action } = e.data;
e.preventDefault();		e.preventDefault();
const saveExit = () => {		const saveExit = () => {
messageEditingContext?.setEditedMessage(null, () => {		messageEditingContext?.setEditedMessage(null, () => {
isExitingDuringEditModeRef.current = true;		isExitingDuringEditModeRef.current = true;
props.navigation?.dispatch(action);		navigation?.dispatch(action);
});		});
};		};
if (!isMessageEdited()) {		if (!isMessageEdited()) {
saveExit();		saveExit();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
onDiscard: saveExit,		onDiscard: saveExit,
});		});
},		},
[isEditMode, isMessageEdited, messageEditingContext, props.navigation],		[isEditMode, isMessageEdited, messageEditingContext, navigation],
);		);

React.useEffect(() => {		React.useEffect(() => {
if (isActive) {		if (isActive) {
addEditInputMessageListener();		addEditInputMessageListener();
}		}

return () => {		return () => {
if (isActive) {		if (isActive) {
removeEditInputMessageListener();		removeEditInputMessageListener();
}		}
};		};
}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);		}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);

React.useEffect(() => {		React.useEffect(() => {
const { navigation } = props;

const clearBeforeRemoveListener = navigation?.addListener(		const clearBeforeRemoveListener = navigation?.addListener(
'beforeRemove',		'beforeRemove',
onNavigationBeforeRemove,		onNavigationBeforeRemove,
);		);
const clearFocusListener = navigation?.addListener(		const clearFocusListener = navigation?.addListener(
'focus',		'focus',
onNavigationFocus,		onNavigationFocus,
);		);
const clearBlurListener = navigation?.addListener('blur', onNavigationBlur);		const clearBlurListener = navigation?.addListener('blur', onNavigationBlur);
return () => {		return () => {
clearBeforeRemoveListener?.();		clearBeforeRemoveListener?.();
clearFocusListener?.();		clearFocusListener?.();
clearBlurListener?.();		clearBlurListener?.();
};		};
}, [onNavigationBeforeRemove, onNavigationBlur, onNavigationFocus, props]);		}, [
		navigation,
		onNavigationBeforeRemove,
		onNavigationBlur,
		onNavigationFocus,
		]);

const callJoinThread = useJoinThread();		const callJoinThread = useJoinThread();

const joinAction = React.useCallback(async (): Promise<ThreadJoinPayload> => {		const joinAction = React.useCallback(async (): Promise<ThreadJoinPayload> => {
let joinThreadInput;		let joinThreadInput;
if (rawThreadInfo.thick) {		if (rawThreadInfo.thick) {
joinThreadInput = {		joinThreadInput = {
thick: true,		thick: true,
rawThreadInfo: rawThreadInfo,		rawThreadInfo: rawThreadInfo,
};		};
} else {		} else {
const query = calendarQuery();		const query = calendarQuery();
joinThreadInput = {		joinThreadInput = {
thick: false,		thick: false,
threadID: props.threadInfo.id,		threadID: threadInfo.id,
calendarQuery: {		calendarQuery: {
startDate: query.startDate,		startDate: query.startDate,
endDate: query.endDate,		endDate: query.endDate,
filters: [		filters: [
...query.filters,		...query.filters,
{ type: 'threads', threadIDs: [props.threadInfo.id] },		{ type: 'threads', threadIDs: [threadInfo.id] },
],		],
},		},
};		};
}		}

return await callJoinThread(joinThreadInput);		return await callJoinThread(joinThreadInput);
}, [calendarQuery, callJoinThread, props.threadInfo.id, rawThreadInfo]);		}, [calendarQuery, callJoinThread, threadInfo.id, rawThreadInfo]);

const onPressJoin = React.useCallback(() => {		const onPressJoin = React.useCallback(() => {
void dispatchActionPromise(joinThreadActionTypes, joinAction());		void dispatchActionPromise(joinThreadActionTypes, joinAction());
}, [dispatchActionPromise, joinAction]);		}, [dispatchActionPromise, joinAction]);

const setIOSKeyboardHeight = React.useCallback(() => {		const setIOSKeyboardHeight = React.useCallback(() => {
if (Platform.OS !== 'ios') {		if (Platform.OS !== 'ios') {
return;		return;
}		}
const textInput = textInputRef.current;		const textInput = textInputRef.current;
if (!textInput) {		if (!textInput) {
return;		return;
}		}
const keyboardHeight = getKeyboardHeight();		const keyboardHeight = getKeyboardHeight();
if (keyboardHeight === null \|\| keyboardHeight === undefined) {		if (keyboardHeight === null \|\| keyboardHeight === undefined) {
return;		return;
}		}
TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);		TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);
}, []);		}, []);

const showMediaGallery = React.useCallback(() => {		const showMediaGallery = React.useCallback(() => {
invariant(keyboardState, 'keyboardState should be initialized');		invariant(keyboardState, 'keyboardState should be initialized');
keyboardState.showMediaGallery(props.threadInfo);		keyboardState.showMediaGallery(threadInfo);
}, [keyboardState, props.threadInfo]);		}, [keyboardState, threadInfo]);

const dismissKeyboard = React.useCallback(() => {		const dismissKeyboard = React.useCallback(() => {
keyboardState?.dismissKeyboard();		keyboardState?.dismissKeyboard();
}, [keyboardState]);		}, [keyboardState]);

const prevThreadInfoID = React.useRef<?string>();		const prevThreadInfoID = React.useRef<?string>();
const prevDraft = React.useRef<?string>();		const prevDraft = React.useRef<?string>();

React.useEffect(() => {		React.useEffect(() => {
if (		if (
textEdited &&		textEdited &&
text &&		text &&
prevThreadInfoID.current &&		prevThreadInfoID.current &&
props.threadInfo.id !== prevThreadInfoID.current		threadInfo.id !== prevThreadInfoID.current
) {		) {
dispatch({		dispatch({
type: moveDraftActionType,		type: moveDraftActionType,
payload: {		payload: {
oldKey: draftKeyFromThreadID(prevThreadInfoID.current),		oldKey: draftKeyFromThreadID(prevThreadInfoID.current),
newKey: draftKeyFromThreadID(props.threadInfo.id),		newKey: draftKeyFromThreadID(threadInfo.id),
},		},
});		});
} else if (!textEdited && draft !== prevDraft.current) {		} else if (!textEdited && draft !== prevDraft.current) {
setText(draft);		setText(draft);
}		}
prevThreadInfoID.current = props.threadInfo.id;		prevThreadInfoID.current = threadInfo.id;
prevDraft.current = draft;		prevDraft.current = draft;
}, [dispatch, draft, props.threadInfo.id, text, textEdited]);		}, [dispatch, draft, threadInfo.id, text, textEdited]);

const prevIsActiveRef = React.useRef(isActive);		const prevIsActiveRef = React.useRef(isActive);
React.useEffect(() => {		React.useEffect(() => {
if (isActive && !prevIsActiveRef.current) {		if (isActive && !prevIsActiveRef.current) {
addEditInputMessageListener();		addEditInputMessageListener();
} else if (!isActive && prevIsActiveRef) {		} else if (!isActive && prevIsActiveRef) {
removeEditInputMessageListener();		removeEditInputMessageListener();
}		}
▲ Show 20 Lines • Show All 57 Lines • ▼ Show 20 Lines	const expandoButton = (
onPress={expandButtons}		onPress={expandButtons}
activeOpacity={0.4}		activeOpacity={0.4}
style={styles.expandButton}		style={styles.expandButton}
>		>
<AnimatedView style={expandIconStyle}>		<AnimatedView style={expandIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="chevron-right"		name="chevron-right"
size={22}		size={22}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
);		);
const threadColor = `#${props.threadInfo.color}`;		const threadColor = `#${threadInfo.color}`;
const expandoButtonsViewStyle: Array<ViewStyle> = [		const expandoButtonsViewStyle: Array<ViewStyle> = [
styles.innerExpandoButtons,		styles.innerExpandoButtons,
];		];
if (isEditMode()) {		if (isEditMode()) {
expandoButtonsViewStyle.push({ display: 'none' });		expandoButtonsViewStyle.push({ display: 'none' });
}		}
return (		return (
<TouchableWithoutFeedback onPress={dismissKeyboard}>		<TouchableWithoutFeedback onPress={dismissKeyboard}>
<View style={styles.inputContainer}>		<View style={styles.inputContainer}>
<AnimatedView style={expandoButtonsStyle}>		<AnimatedView style={expandoButtonsStyle}>
<View style={expandoButtonsViewStyle}>		<View style={expandoButtonsViewStyle}>
{buttonsExpanded ? expandoButton : null}		{buttonsExpanded ? expandoButton : null}
<TouchableOpacity onPress={showMediaGallery} activeOpacity={0.4}>		<TouchableOpacity onPress={showMediaGallery} activeOpacity={0.4}>
<AnimatedView style={cameraRollIconStyle}>		<AnimatedView style={cameraRollIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="image-1"		name="image-1"
size={28}		size={28}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
<TouchableOpacity		<TouchableOpacity
onPress={props.openCamera}		onPress={openCamera}
activeOpacity={0.4}		activeOpacity={0.4}
disabled={!buttonsExpanded}		disabled={!buttonsExpanded}
>		>
<AnimatedView style={cameraIconStyle}>		<AnimatedView style={cameraIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="camera"		name="camera"
size={28}		size={28}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
{buttonsExpanded ? null : expandoButton}		{buttonsExpanded ? null : expandoButton}
</View>		</View>
</AnimatedView>		</AnimatedView>
<SelectableTextInput		<SelectableTextInput
allowImagePasteForThreadID={props.threadInfo.id}		allowImagePasteForThreadID={threadInfo.id}
value={text}		value={text}
onChangeText={updateText}		onChangeText={updateText}
selection={selectionState.selection}		selection={selectionState.selection}
onUpdateSyncedSelectionData={setSelectionState}		onUpdateSyncedSelectionData={setSelectionState}
placeholder="Send a message..."		placeholder="Send a message..."
placeholderTextColor={colors.listInputButton}		placeholderTextColor={colors.listInputButton}
multiline={true}		multiline={true}
style={styles.textInput}		style={styles.textInput}
textInputRef={setTextInputRef}		textInputRef={setTextInputRef}
clearableTextInputRef={setClearableTextInputRef}		clearableTextInputRef={setClearableTextInputRef}
ref={selectableTextInputRef}		ref={selectableTextInputRef}
selectionColor={`#${props.threadInfo.color}`}		selectionColor={`#${threadInfo.color}`}
/>		/>
<AnimatedView style={sendButtonContainerStyle}>		<AnimatedView style={sendButtonContainerStyle}>
<TouchableOpacity		<TouchableOpacity
onPress={onSend}		onPress={onSend}
activeOpacity={0.4}		activeOpacity={0.4}
style={styles.sendButton}		style={styles.sendButton}
disabled={trimMessage(text) === ''}		disabled={trimMessage(text) === ''}
>		>
<Icon		<Icon
name="md-send"		name="md-send"
size={25}		size={25}
style={styles.sendIcon}		style={styles.sendIcon}
color={threadColor}		color={threadColor}
/>		/>
</TouchableOpacity>		</TouchableOpacity>
</AnimatedView>		</AnimatedView>
</View>		</View>
</TouchableWithoutFeedback>		</TouchableWithoutFeedback>
);		);
};		};

const isMember = viewerIsMember(props.threadInfo);		const isMember = viewerIsMember(threadInfo);
let joinButton = null;		let joinButton = null;
const threadColor = `#${props.threadInfo.color}`;		const threadColor = `#${threadInfo.color}`;

if (!isMember && currentUserCanJoin && !threadCreationInProgress) {		if (!isMember && currentUserCanJoin && !threadCreationInProgress) {
let buttonContent;		let buttonContent;
if (joinThreadLoadingStatus === 'loading') {		if (joinThreadLoadingStatus === 'loading') {
buttonContent = (		buttonContent = (
<ActivityIndicator		<ActivityIndicator
size="small"		size="small"
color="white"		color="white"
style={styles.joinThreadLoadingIndicator}		style={styles.joinThreadLoadingIndicator}
/>		/>
);		);
} else {		} else {
const textStyle = colorIsDark(props.threadInfo.color)		const textStyle = colorIsDark(threadInfo.color)
? styles.joinButtonTextLight		? styles.joinButtonTextLight
: styles.joinButtonTextDark;		: styles.joinButtonTextDark;
buttonContent = (		buttonContent = (
<View style={styles.joinButtonContent}>		<View style={styles.joinButtonContent}>
<SWMansionIcon name="plus" style={textStyle} />		<SWMansionIcon name="plus" style={textStyle} />
<Text style={textStyle}>Join Chat</Text>		<Text style={textStyle}>Join Chat</Text>
</View>		</View>
);		);
Show All 22 Lines	typeaheadTooltip = (
focusAndUpdateTextAndSelection={focusAndUpdateTextAndSelection}		focusAndUpdateTextAndSelection={focusAndUpdateTextAndSelection}
typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}		typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}
TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}		TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}
/>		/>
);		);
}		}

let content;		let content;
const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(		const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(threadInfo);
props.threadInfo,
);
if (shouldShowTextInput()) {		if (shouldShowTextInput()) {
content = renderInput();		content = renderInput();
} else if (		} else if (
threadFrozen &&		threadFrozen &&
threadActualMembers(props.threadInfo.members).length === 2		threadActualMembers(threadInfo.members).length === 2
) {		) {
content = (		content = (
<Text style={styles.explanation}>		<Text style={styles.explanation}>
You can’t send messages to a user that you’ve blocked.		You can’t send messages to a user that you’ve blocked.
</Text>		</Text>
);		);
} else if (isMember) {		} else if (isMember) {
content = (		content = (
▲ Show 20 Lines • Show All 42 Lines • ▼ Show 20 Lines	editedMessage = (
color={threadColor}		color={threadColor}
onPress={onPressExitEditMode}		onPress={onPressExitEditMode}
/>		/>
</AnimatedView>		</AnimatedView>
);		);
}		}

return (		return (
<AnimatedView style={styles.container} onLayout={props.onInputBarLayout}>		<AnimatedView style={styles.container} onLayout={onInputBarLayout}>
{typeaheadTooltip}		{typeaheadTooltip}
{joinButton}		{joinButton}
{editedMessage}		{editedMessage}
{content}		{content}
{keyboardInputHost}		{keyboardInputHost}
</AnimatedView>		</AnimatedView>
);		);
}		}
▲ Show 20 Lines • Show All 114 Lines • Show Last 20 Lines

View Options

native/android/app/build.gradle

Show First 20 Lines • Show All 262 Lines • ▼ Show 20 Lines	const createThreadLoadingStatusSelector =
createLoadingStatusSelector(newThreadActionTypes);		createLoadingStatusSelector(newThreadActionTypes);

type ConnectedChatInputBarBaseProps = {		type ConnectedChatInputBarBaseProps = {
...BaseProps,		...BaseProps,
+onInputBarLayout?: (event: LayoutEvent) => mixed,		+onInputBarLayout?: (event: LayoutEvent) => mixed,
+openCamera: () => mixed,		+openCamera: () => mixed,
+navigation?: ChatNavigationProp<'MessageList'>,		+navigation?: ChatNavigationProp<'MessageList'>,
};		};
function ConnectedChatInputBarBase(props: ConnectedChatInputBarBaseProps) {		function ConnectedChatInputBarBase({
		threadInfo,
		navigation,
		openCamera,
		onInputBarLayout,
		}: ConnectedChatInputBarBaseProps) {
const navContext = React.useContext(NavContext);		const navContext = React.useContext(NavContext);
const keyboardState = React.useContext(KeyboardContext);		const keyboardState = React.useContext(KeyboardContext);
const inputState = React.useContext(InputStateContext);		const inputState = React.useContext(InputStateContext);
const overlayContext = React.useContext(OverlayContext);		const overlayContext = React.useContext(OverlayContext);

const viewerID = useSelector(		const viewerID = useSelector(
state => state.currentUserInfo && state.currentUserInfo.id,		state => state.currentUserInfo && state.currentUserInfo.id,
);		);
const draft = useSelector(		const draft = useSelector(
state =>		state => state.draftStore.drafts[draftKeyFromThreadID(threadInfo.id)] ?? '',
state.draftStore.drafts[draftKeyFromThreadID(props.threadInfo.id)] ?? '',
);		);
const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);		const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
const createThreadLoadingStatus = useSelector(		const createThreadLoadingStatus = useSelector(
createThreadLoadingStatusSelector,		createThreadLoadingStatusSelector,
);		);
const threadCreationInProgress = createThreadLoadingStatus === 'loading';		const threadCreationInProgress = createThreadLoadingStatus === 'loading';
const calendarQuery = useSelector(state =>		const calendarQuery = useSelector(state =>
nonThreadCalendarQuery({		nonThreadCalendarQuery({
redux: state,		redux: state,
navContext,		navContext,
}),		}),
);		);
const userInfos = useSelector(state => state.userStore.userInfos);		const userInfos = useSelector(state => state.userStore.userInfos);

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
const colors = useColors();		const colors = useColors();

const isActive = React.useMemo(		const isActive = React.useMemo(
() => props.threadInfo.id === activeThreadSelector(navContext),		() => threadInfo.id === activeThreadSelector(navContext),
[props.threadInfo.id, navContext],		[threadInfo.id, navContext],
);		);

const dispatch = useDispatch();		const dispatch = useDispatch();
const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const rawThreadInfo = useSelector(		const rawThreadInfo = useSelector(
state => state.threadStore.threadInfos[props.threadInfo.id],		state => state.threadStore.threadInfos[threadInfo.id],
);		);

const { getChatMentionSearchIndex } = useChatMentionContext();		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 =>		const parentThreadInfo = useSelector(state =>
parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,		parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
);		);
const communityThreadInfo = useSelector(state =>		const communityThreadInfo = useSelector(state =>
community ? threadInfoSelector(state)[community] : null,		community ? threadInfoSelector(state)[community] : null,
);		);

const threadFrozen = useThreadFrozenDueToViewerBlock(		const threadFrozen = useThreadFrozenDueToViewerBlock(
props.threadInfo,		threadInfo,
communityThreadInfo,		communityThreadInfo,
viewerID,		viewerID,
userInfos,		userInfos,
);		);

const userMentionsCandidates = useUserMentionsCandidates(		const userMentionsCandidates = useUserMentionsCandidates(
props.threadInfo,		threadInfo,
parentThreadInfo,		parentThreadInfo,
);		);

const chatMentionCandidates = useThreadChatMentionCandidates(		const chatMentionCandidates = useThreadChatMentionCandidates(threadInfo);
props.threadInfo,
);

const messageEditingContext = React.useContext(MessageEditingContext);		const messageEditingContext = React.useContext(MessageEditingContext);

const editedMessageInfo = messageEditingContext?.editState.editedMessage;		const editedMessageInfo = messageEditingContext?.editState.editedMessage;
const editedMessagePreview = useMessagePreview(		const editedMessagePreview = useMessagePreview(
editedMessageInfo,		editedMessageInfo,
props.threadInfo,		threadInfo,
getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,		getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,
);		);
const editMessage = useEditMessage(props.threadInfo);		const editMessage = useEditMessage(threadInfo);

const [selectionState, setSelectionState] =		const [selectionState, setSelectionState] =
React.useState<SyncedSelectionData>({		React.useState<SyncedSelectionData>({
text: draft,		text: draft,
selection: { start: 0, end: 0 },		selection: { start: 0, end: 0 },
});		});

const [text, setText] = React.useState(draft);		const [text, setText] = React.useState(draft);
Show All 34 Lines	function ConnectedChatInputBarBase({

const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =		const suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem> =
React.useMemo(		React.useMemo(
() => [...suggestedUsers, ...suggestedChats],		() => [...suggestedUsers, ...suggestedChats],
[suggestedUsers, suggestedChats],		[suggestedUsers, suggestedChats],
);		);

const currentUserIsVoiced = useThreadHasPermission(		const currentUserIsVoiced = useThreadHasPermission(
props.threadInfo,		threadInfo,
threadPermissions.VOICED,		threadPermissions.VOICED,
);		);

const currentUserCanJoin = useThreadHasPermission(		const currentUserCanJoin = useThreadHasPermission(
props.threadInfo,		threadInfo,
threadPermissions.JOIN_THREAD,		threadPermissions.JOIN_THREAD,
);		);

const isExitingDuringEditModeRef = React.useRef(false);		const isExitingDuringEditModeRef = React.useRef(false);

const expandoButtonsOpen = useValue(1);		const expandoButtonsOpen = useValue(1);
const targetExpandoButtonsOpen = useValue(1);		const targetExpandoButtonsOpen = useValue(1);

▲ Show 20 Lines • Show All 126 Lines • ▼ Show 20 Lines	const shouldShowTextInput = React.useCallback(() => {
// and won't list the viewer as a member,		// and won't list the viewer as a member,
// which will end up hiding the input.		// which will end up hiding the input.
// In this case, we will assume that our creation action		// In this case, we will assume that our creation action
// will get translated into a join, and as long		// will get translated into a join, and as long
// as members are voiced, we can show the input.		// as members are voiced, we can show the input.
if (!threadCreationInProgress) {		if (!threadCreationInProgress) {
return false;		return false;
}		}
return checkIfDefaultMembersAreVoiced(props.threadInfo);		return checkIfDefaultMembersAreVoiced(threadInfo);
}, [currentUserIsVoiced, props.threadInfo, threadCreationInProgress]);		}, [currentUserIsVoiced, threadInfo, threadCreationInProgress]);

const isEditMode = React.useCallback(() => {		const isEditMode = React.useCallback(() => {
const editState = messageEditingContext?.editState;		const editState = messageEditingContext?.editState;
const isThisThread =		const isThisThread = editState?.editedMessage?.threadID === threadInfo.id;
editState?.editedMessage?.threadID === props.threadInfo.id;
return editState?.editedMessage !== null && isThisThread;		return editState?.editedMessage !== null && isThisThread;
}, [messageEditingContext?.editState, props.threadInfo.id]);		}, [messageEditingContext?.editState, threadInfo.id]);

const immediatelyShowSendButton = React.useCallback(() => {		const immediatelyShowSendButton = React.useCallback(() => {
sendButtonContainerOpen.setValue(1);		sendButtonContainerOpen.setValue(1);
targetSendButtonContainerOpen.setValue(1);		targetSendButtonContainerOpen.setValue(1);
}, [sendButtonContainerOpen, targetSendButtonContainerOpen]);		}, [sendButtonContainerOpen, targetSendButtonContainerOpen]);

const updateSendButton = React.useCallback(		const updateSendButton = React.useCallback(
(currentText: string) => {		(currentText: string) => {
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines	function ConnectedChatInputBarBase({
);		);

const saveDraft = React.useMemo(		const saveDraft = React.useMemo(
() =>		() =>
_throttle(newText => {		_throttle(newText => {
dispatch({		dispatch({
type: updateDraftActionType,		type: updateDraftActionType,
payload: {		payload: {
key: draftKeyFromThreadID(props.threadInfo.id),		key: draftKeyFromThreadID(threadInfo.id),
text: newText,		text: newText,
},		},
});		});
}, 400),		}, 400),
[dispatch, props.threadInfo.id],		[dispatch, threadInfo.id],
);		);

const isMessageEdited = React.useCallback(		const isMessageEdited = React.useCallback(
(newText?: string): boolean => {		(newText?: string): boolean => {
let updatedText = newText ?? text;		let updatedText = newText ?? text;
updatedText = trimMessage(updatedText);		updatedText = trimMessage(updatedText);
const originalText = editedMessageInfo?.text;		const originalText = editedMessageInfo?.text;
return updatedText !== originalText;		return updatedText !== originalText;
Show All 25 Lines	const focusAndUpdateButtonsVisibility = React.useCallback(() => {
}		}

immediatelyShowSendButton();		immediatelyShowSendButton();
immediatelyHideButtons();		immediatelyHideButtons();
textInput.focus();		textInput.focus();
}, [immediatelyHideButtons, immediatelyShowSendButton]);		}, [immediatelyHideButtons, immediatelyShowSendButton]);

const blockNavigation = React.useCallback(() => {		const blockNavigation = React.useCallback(() => {
const { navigation } = props;
if (!navigation \|\| !navigation.isFocused()) {		if (!navigation \|\| !navigation.isFocused()) {
return;		return;
}		}
navigation.setParams({		navigation.setParams({
removeEditMode: removeEditMode,		removeEditMode: removeEditMode,
});		});
}, [props, removeEditMode]);		}, [navigation, removeEditMode]);

const unblockNavigation = React.useCallback(() => {		const unblockNavigation = React.useCallback(() => {
const { navigation } = props;		navigation?.setParams({ removeEditMode: null });
if (!navigation) {		}, [navigation]);
return;
}
navigation.setParams({ removeEditMode: null });
}, [props]);

const exitEditMode = React.useCallback(() => {		const exitEditMode = React.useCallback(() => {
messageEditingContext?.setEditedMessage(null, () => {		messageEditingContext?.setEditedMessage(null, () => {
unblockNavigation();		unblockNavigation();
updateText(draft);		updateText(draft);
focusAndUpdateButtonsVisibility();		focusAndUpdateButtonsVisibility();
updateSendButton(draft);		updateSendButton(draft);
});		});
▲ Show 20 Lines • Show All 111 Lines • ▼ Show 20 Lines	const onSend = React.useCallback(async () => {
const creatorID = viewerID;		const creatorID = viewerID;
invariant(creatorID, 'should have viewer ID in order to send a message');		invariant(creatorID, 'should have viewer ID in order to send a message');
invariant(inputState, 'inputState should be set in ChatInputBar.onSend');		invariant(inputState, 'inputState should be set in ChatInputBar.onSend');

await inputState.sendTextMessage(		await inputState.sendTextMessage(
{		{
type: messageTypes.TEXT,		type: messageTypes.TEXT,
localID,		localID,
threadID: props.threadInfo.id,		threadID: threadInfo.id,
text: newText,		text: newText,
creatorID,		creatorID,
time: Date.now(),		time: Date.now(),
},		},
props.threadInfo,		threadInfo,
parentThreadInfo,		parentThreadInfo,
);		);
}, [		}, [
editMessageInner,		editMessageInner,
getEditedMessage,		getEditedMessage,
inputState,		inputState,
parentThreadInfo,		parentThreadInfo,
props.threadInfo,		threadInfo,
text,		text,
updateSendButton,		updateSendButton,
viewerID,		viewerID,
]);		]);

const removeEditMode: RemoveEditMode = React.useCallback(		const removeEditMode: RemoveEditMode = React.useCallback(
action => {		action => {
const { navigation } = props;
if (!navigation \|\| isExitingDuringEditModeRef.current) {		if (!navigation \|\| isExitingDuringEditModeRef.current) {
return 'ignore_action';		return 'ignore_action';
}		}
if (!isMessageEdited()) {		if (!isMessageEdited()) {
unblockNavigation();		unblockNavigation();
return 'reduce_action';		return 'reduce_action';
}		}
const unblockAndDispatch = () => {		const unblockAndDispatch = () => {
unblockNavigation();		unblockNavigation();
navigation.dispatch(action);		navigation.dispatch(action);
};		};
const onContinueEditing = () => {		const onContinueEditing = () => {
overlayContext?.resetScrollBlockingModalStatus();		overlayContext?.resetScrollBlockingModalStatus();
};		};
exitEditAlert({		exitEditAlert({
onDiscard: unblockAndDispatch,		onDiscard: unblockAndDispatch,
onContinueEditing,		onContinueEditing,
});		});
return 'ignore_action';		return 'ignore_action';
},		},
[isMessageEdited, overlayContext, props, unblockNavigation],		[isMessageEdited, navigation, overlayContext, unblockNavigation],
);		);

const onPressExitEditMode = React.useCallback(() => {		const onPressExitEditMode = React.useCallback(() => {
if (!isMessageEdited()) {		if (!isMessageEdited()) {
exitEditMode();		exitEditMode();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
Show All 32 Lines	(e: {
if (!isEditMode()) {		if (!isEditMode()) {
return;		return;
}		}
const { action } = e.data;		const { action } = e.data;
e.preventDefault();		e.preventDefault();
const saveExit = () => {		const saveExit = () => {
messageEditingContext?.setEditedMessage(null, () => {		messageEditingContext?.setEditedMessage(null, () => {
isExitingDuringEditModeRef.current = true;		isExitingDuringEditModeRef.current = true;
props.navigation?.dispatch(action);		navigation?.dispatch(action);
});		});
};		};
if (!isMessageEdited()) {		if (!isMessageEdited()) {
saveExit();		saveExit();
return;		return;
}		}
exitEditAlert({		exitEditAlert({
onDiscard: saveExit,		onDiscard: saveExit,
});		});
},		},
[isEditMode, isMessageEdited, messageEditingContext, props.navigation],		[isEditMode, isMessageEdited, messageEditingContext, navigation],
);		);

React.useEffect(() => {		React.useEffect(() => {
if (isActive) {		if (isActive) {
addEditInputMessageListener();		addEditInputMessageListener();
}		}

return () => {		return () => {
if (isActive) {		if (isActive) {
removeEditInputMessageListener();		removeEditInputMessageListener();
}		}
};		};
}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);		}, [addEditInputMessageListener, isActive, removeEditInputMessageListener]);

React.useEffect(() => {		React.useEffect(() => {
const { navigation } = props;

const clearBeforeRemoveListener = navigation?.addListener(		const clearBeforeRemoveListener = navigation?.addListener(
'beforeRemove',		'beforeRemove',
onNavigationBeforeRemove,		onNavigationBeforeRemove,
);		);
const clearFocusListener = navigation?.addListener(		const clearFocusListener = navigation?.addListener(
'focus',		'focus',
onNavigationFocus,		onNavigationFocus,
);		);
const clearBlurListener = navigation?.addListener('blur', onNavigationBlur);		const clearBlurListener = navigation?.addListener('blur', onNavigationBlur);
return () => {		return () => {
clearBeforeRemoveListener?.();		clearBeforeRemoveListener?.();
clearFocusListener?.();		clearFocusListener?.();
clearBlurListener?.();		clearBlurListener?.();
};		};
}, [onNavigationBeforeRemove, onNavigationBlur, onNavigationFocus, props]);		}, [
		navigation,
		onNavigationBeforeRemove,
		onNavigationBlur,
		onNavigationFocus,
		]);

const callJoinThread = useJoinThread();		const callJoinThread = useJoinThread();

const joinAction = React.useCallback(async (): Promise<ThreadJoinPayload> => {		const joinAction = React.useCallback(async (): Promise<ThreadJoinPayload> => {
let joinThreadInput;		let joinThreadInput;
if (rawThreadInfo.thick) {		if (rawThreadInfo.thick) {
joinThreadInput = {		joinThreadInput = {
thick: true,		thick: true,
rawThreadInfo: rawThreadInfo,		rawThreadInfo: rawThreadInfo,
};		};
} else {		} else {
const query = calendarQuery();		const query = calendarQuery();
joinThreadInput = {		joinThreadInput = {
thick: false,		thick: false,
threadID: props.threadInfo.id,		threadID: threadInfo.id,
calendarQuery: {		calendarQuery: {
startDate: query.startDate,		startDate: query.startDate,
endDate: query.endDate,		endDate: query.endDate,
filters: [		filters: [
...query.filters,		...query.filters,
{ type: 'threads', threadIDs: [props.threadInfo.id] },		{ type: 'threads', threadIDs: [threadInfo.id] },
],		],
},		},
};		};
}		}

return await callJoinThread(joinThreadInput);		return await callJoinThread(joinThreadInput);
}, [calendarQuery, callJoinThread, props.threadInfo.id, rawThreadInfo]);		}, [calendarQuery, callJoinThread, threadInfo.id, rawThreadInfo]);

const onPressJoin = React.useCallback(() => {		const onPressJoin = React.useCallback(() => {
void dispatchActionPromise(joinThreadActionTypes, joinAction());		void dispatchActionPromise(joinThreadActionTypes, joinAction());
}, [dispatchActionPromise, joinAction]);		}, [dispatchActionPromise, joinAction]);

const setIOSKeyboardHeight = React.useCallback(() => {		const setIOSKeyboardHeight = React.useCallback(() => {
if (Platform.OS !== 'ios') {		if (Platform.OS !== 'ios') {
return;		return;
}		}
const textInput = textInputRef.current;		const textInput = textInputRef.current;
if (!textInput) {		if (!textInput) {
return;		return;
}		}
const keyboardHeight = getKeyboardHeight();		const keyboardHeight = getKeyboardHeight();
if (keyboardHeight === null \|\| keyboardHeight === undefined) {		if (keyboardHeight === null \|\| keyboardHeight === undefined) {
return;		return;
}		}
TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);		TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);
}, []);		}, []);

const showMediaGallery = React.useCallback(() => {		const showMediaGallery = React.useCallback(() => {
invariant(keyboardState, 'keyboardState should be initialized');		invariant(keyboardState, 'keyboardState should be initialized');
keyboardState.showMediaGallery(props.threadInfo);		keyboardState.showMediaGallery(threadInfo);
}, [keyboardState, props.threadInfo]);		}, [keyboardState, threadInfo]);

const dismissKeyboard = React.useCallback(() => {		const dismissKeyboard = React.useCallback(() => {
keyboardState?.dismissKeyboard();		keyboardState?.dismissKeyboard();
}, [keyboardState]);		}, [keyboardState]);

const prevThreadInfoID = React.useRef<?string>();		const prevThreadInfoID = React.useRef<?string>();
const prevDraft = React.useRef<?string>();		const prevDraft = React.useRef<?string>();

React.useEffect(() => {		React.useEffect(() => {
if (		if (
textEdited &&		textEdited &&
text &&		text &&
prevThreadInfoID.current &&		prevThreadInfoID.current &&
props.threadInfo.id !== prevThreadInfoID.current		threadInfo.id !== prevThreadInfoID.current
) {		) {
dispatch({		dispatch({
type: moveDraftActionType,		type: moveDraftActionType,
payload: {		payload: {
oldKey: draftKeyFromThreadID(prevThreadInfoID.current),		oldKey: draftKeyFromThreadID(prevThreadInfoID.current),
newKey: draftKeyFromThreadID(props.threadInfo.id),		newKey: draftKeyFromThreadID(threadInfo.id),
},		},
});		});
} else if (!textEdited && draft !== prevDraft.current) {		} else if (!textEdited && draft !== prevDraft.current) {
setText(draft);		setText(draft);
}		}
prevThreadInfoID.current = props.threadInfo.id;		prevThreadInfoID.current = threadInfo.id;
prevDraft.current = draft;		prevDraft.current = draft;
}, [dispatch, draft, props.threadInfo.id, text, textEdited]);		}, [dispatch, draft, threadInfo.id, text, textEdited]);

const prevIsActiveRef = React.useRef(isActive);		const prevIsActiveRef = React.useRef(isActive);
React.useEffect(() => {		React.useEffect(() => {
if (isActive && !prevIsActiveRef.current) {		if (isActive && !prevIsActiveRef.current) {
addEditInputMessageListener();		addEditInputMessageListener();
} else if (!isActive && prevIsActiveRef) {		} else if (!isActive && prevIsActiveRef) {
removeEditInputMessageListener();		removeEditInputMessageListener();
}		}
▲ Show 20 Lines • Show All 57 Lines • ▼ Show 20 Lines	const expandoButton = (
onPress={expandButtons}		onPress={expandButtons}
activeOpacity={0.4}		activeOpacity={0.4}
style={styles.expandButton}		style={styles.expandButton}
>		>
<AnimatedView style={expandIconStyle}>		<AnimatedView style={expandIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="chevron-right"		name="chevron-right"
size={22}		size={22}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
);		);
const threadColor = `#${props.threadInfo.color}`;		const threadColor = `#${threadInfo.color}`;
const expandoButtonsViewStyle: Array<ViewStyle> = [		const expandoButtonsViewStyle: Array<ViewStyle> = [
styles.innerExpandoButtons,		styles.innerExpandoButtons,
];		];
if (isEditMode()) {		if (isEditMode()) {
expandoButtonsViewStyle.push({ display: 'none' });		expandoButtonsViewStyle.push({ display: 'none' });
}		}
return (		return (
<TouchableWithoutFeedback onPress={dismissKeyboard}>		<TouchableWithoutFeedback onPress={dismissKeyboard}>
<View style={styles.inputContainer}>		<View style={styles.inputContainer}>
<AnimatedView style={expandoButtonsStyle}>		<AnimatedView style={expandoButtonsStyle}>
<View style={expandoButtonsViewStyle}>		<View style={expandoButtonsViewStyle}>
{buttonsExpanded ? expandoButton : null}		{buttonsExpanded ? expandoButton : null}
<TouchableOpacity onPress={showMediaGallery} activeOpacity={0.4}>		<TouchableOpacity onPress={showMediaGallery} activeOpacity={0.4}>
<AnimatedView style={cameraRollIconStyle}>		<AnimatedView style={cameraRollIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="image-1"		name="image-1"
size={28}		size={28}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
<TouchableOpacity		<TouchableOpacity
onPress={props.openCamera}		onPress={openCamera}
activeOpacity={0.4}		activeOpacity={0.4}
disabled={!buttonsExpanded}		disabled={!buttonsExpanded}
>		>
<AnimatedView style={cameraIconStyle}>		<AnimatedView style={cameraIconStyle}>
<SWMansionIcon		<SWMansionIcon
name="camera"		name="camera"
size={28}		size={28}
color={`#${props.threadInfo.color}`}		color={`#${threadInfo.color}`}
/>		/>
</AnimatedView>		</AnimatedView>
</TouchableOpacity>		</TouchableOpacity>
{buttonsExpanded ? null : expandoButton}		{buttonsExpanded ? null : expandoButton}
</View>		</View>
</AnimatedView>		</AnimatedView>
<SelectableTextInput		<SelectableTextInput
allowImagePasteForThreadID={props.threadInfo.id}		allowImagePasteForThreadID={threadInfo.id}
value={text}		value={text}
onChangeText={updateText}		onChangeText={updateText}
selection={selectionState.selection}		selection={selectionState.selection}
onUpdateSyncedSelectionData={setSelectionState}		onUpdateSyncedSelectionData={setSelectionState}
placeholder="Send a message..."		placeholder="Send a message..."
placeholderTextColor={colors.listInputButton}		placeholderTextColor={colors.listInputButton}
multiline={true}		multiline={true}
style={styles.textInput}		style={styles.textInput}
textInputRef={setTextInputRef}		textInputRef={setTextInputRef}
clearableTextInputRef={setClearableTextInputRef}		clearableTextInputRef={setClearableTextInputRef}
ref={selectableTextInputRef}		ref={selectableTextInputRef}
selectionColor={`#${props.threadInfo.color}`}		selectionColor={`#${threadInfo.color}`}
/>		/>
<AnimatedView style={sendButtonContainerStyle}>		<AnimatedView style={sendButtonContainerStyle}>
<TouchableOpacity		<TouchableOpacity
onPress={onSend}		onPress={onSend}
activeOpacity={0.4}		activeOpacity={0.4}
style={styles.sendButton}		style={styles.sendButton}
disabled={trimMessage(text) === ''}		disabled={trimMessage(text) === ''}
>		>
<Icon		<Icon
name="md-send"		name="md-send"
size={25}		size={25}
style={styles.sendIcon}		style={styles.sendIcon}
color={threadColor}		color={threadColor}
/>		/>
</TouchableOpacity>		</TouchableOpacity>
</AnimatedView>		</AnimatedView>
</View>		</View>
</TouchableWithoutFeedback>		</TouchableWithoutFeedback>
);		);
};		};

const isMember = viewerIsMember(props.threadInfo);		const isMember = viewerIsMember(threadInfo);
let joinButton = null;		let joinButton = null;
const threadColor = `#${props.threadInfo.color}`;		const threadColor = `#${threadInfo.color}`;

if (!isMember && currentUserCanJoin && !threadCreationInProgress) {		if (!isMember && currentUserCanJoin && !threadCreationInProgress) {
let buttonContent;		let buttonContent;
if (joinThreadLoadingStatus === 'loading') {		if (joinThreadLoadingStatus === 'loading') {
buttonContent = (		buttonContent = (
<ActivityIndicator		<ActivityIndicator
size="small"		size="small"
color="white"		color="white"
style={styles.joinThreadLoadingIndicator}		style={styles.joinThreadLoadingIndicator}
/>		/>
);		);
} else {		} else {
const textStyle = colorIsDark(props.threadInfo.color)		const textStyle = colorIsDark(threadInfo.color)
? styles.joinButtonTextLight		? styles.joinButtonTextLight
: styles.joinButtonTextDark;		: styles.joinButtonTextDark;
buttonContent = (		buttonContent = (
<View style={styles.joinButtonContent}>		<View style={styles.joinButtonContent}>
<SWMansionIcon name="plus" style={textStyle} />		<SWMansionIcon name="plus" style={textStyle} />
<Text style={textStyle}>Join Chat</Text>		<Text style={textStyle}>Join Chat</Text>
</View>		</View>
);		);
Show All 22 Lines	typeaheadTooltip = (
focusAndUpdateTextAndSelection={focusAndUpdateTextAndSelection}		focusAndUpdateTextAndSelection={focusAndUpdateTextAndSelection}
typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}		typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}
TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}		TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}
/>		/>
);		);
}		}

let content;		let content;
const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(		const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(threadInfo);
props.threadInfo,
);
if (shouldShowTextInput()) {		if (shouldShowTextInput()) {
content = renderInput();		content = renderInput();
} else if (		} else if (
threadFrozen &&		threadFrozen &&
threadActualMembers(props.threadInfo.members).length === 2		threadActualMembers(threadInfo.members).length === 2
) {		) {
content = (		content = (
<Text style={styles.explanation}>		<Text style={styles.explanation}>
You can’t send messages to a user that you’ve blocked.		You can’t send messages to a user that you’ve blocked.
</Text>		</Text>
);		);
} else if (isMember) {		} else if (isMember) {
content = (		content = (
▲ Show 20 Lines • Show All 42 Lines • ▼ Show 20 Lines	editedMessage = (
color={threadColor}		color={threadColor}
onPress={onPressExitEditMode}		onPress={onPressExitEditMode}
/>		/>
</AnimatedView>		</AnimatedView>
);		);
}		}

return (		return (
<AnimatedView style={styles.container} onLayout={props.onInputBarLayout}>		<AnimatedView style={styles.container} onLayout={onInputBarLayout}>
{typeaheadTooltip}		{typeaheadTooltip}
{joinButton}		{joinButton}
{editedMessage}		{editedMessage}
{content}		{content}
{keyboardInputHost}		{keyboardInputHost}
</AnimatedView>		</AnimatedView>
);		);
}		}
▲ Show 20 Lines • Show All 114 Lines • Show Last 20 Lines

View Options

native/root.react.js

View Options

scripts/ensure_rustup_setup.sh

View Options

services/commtest/Dockerfile

[ignore] test CI
AbandonedPublicDraft
Actions

Details

Diff Detail

Event Timeline

Revision Contents
Changeset List

Diff 47359

.buildkite/android.yml

.buildkite/eslint_flow_jest.yml

.buildkite/ios.yml

.buildkite/jsi_codegen.yml

.buildkite/macos.yml

native/android/app/CMakeLists.txt

native/android/app/build.gradle

native/root.react.js

scripts/ensure_rustup_setup.sh

services/commtest/Dockerfile

[ignore] test CIAbandonedPublicDraftActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 47359

.buildkite/android.yml

.buildkite/eslint_flow_jest.yml

.buildkite/ios.yml

.buildkite/jsi_codegen.yml

.buildkite/macos.yml

native/android/app/CMakeLists.txt

native/android/app/build.gradle

native/root.react.js

scripts/ensure_rustup_setup.sh

services/commtest/Dockerfile

[ignore] test CI
AbandonedPublicDraft
Actions

Revision Contents
Changeset List