Differential D6390 Diff 22250 native/chat/chat-input-bar.react.js

Changeset View

Standalone View

native/chat/chat-input-bar.react.js

Show All 37 Lines	import {
threadHasPermission,		threadHasPermission,
viewerIsMember,		viewerIsMember,
threadFrozenDueToViewerBlock,		threadFrozenDueToViewerBlock,
threadActualMembers,		threadActualMembers,
checkIfDefaultMembersAreVoiced,		checkIfDefaultMembersAreVoiced,
draftKeyFromThreadID,		draftKeyFromThreadID,
colorIsDark,		colorIsDark,
} from 'lib/shared/thread-utils';		} from 'lib/shared/thread-utils';
import type { Selection } from 'lib/shared/typeahead-utils';		import {
		getTypeaheadUserSuggestions,
		getTypeaheadRegexMatches,
		type Selection,
		} from 'lib/shared/typeahead-utils';
import type { CalendarQuery } from 'lib/types/entry-types';		import type { CalendarQuery } from 'lib/types/entry-types';
import type { LoadingStatus } from 'lib/types/loading-types';		import type { LoadingStatus } from 'lib/types/loading-types';
import type { PhotoPaste } from 'lib/types/media-types';		import type { PhotoPaste } from 'lib/types/media-types';
import { messageTypes } from 'lib/types/message-types';		import { messageTypes } from 'lib/types/message-types';
import type { Dispatch } from 'lib/types/redux-types';		import type { Dispatch } from 'lib/types/redux-types';
import {		import {
type ThreadInfo,		type ThreadInfo,
threadPermissions,		threadPermissions,
Show All 28 Lines	import {
CameraModalRouteName,		CameraModalRouteName,
ImagePasteModalRouteName,		ImagePasteModalRouteName,
} from '../navigation/route-names';		} from '../navigation/route-names';
import { useSelector } from '../redux/redux-utils';		import { useSelector } from '../redux/redux-utils';
import { type Colors, useStyles, useColors } from '../themes/colors';		import { type Colors, useStyles, useColors } from '../themes/colors';
import type { LayoutEvent, SelectionChangeEvent } from '../types/react-native';		import type { LayoutEvent, SelectionChangeEvent } from '../types/react-native';
import { type AnimatedViewStyle, AnimatedView } from '../types/styles';		import { type AnimatedViewStyle, AnimatedView } from '../types/styles';
import { runTiming } from '../utils/animation-utils';		import { runTiming } from '../utils/animation-utils';
		import { nativeTypeaheadRegex } from '../utils/typeahead-utils';
import { ChatContext } from './chat-context';		import { ChatContext } from './chat-context';
import type { ChatNavigationProp } from './chat.react';		import type { ChatNavigationProp } from './chat.react';
		import TypeaheadTooltip from './typeahead-tooltip.react';

/* eslint-disable import/no-named-as-default-member */		/* eslint-disable import/no-named-as-default-member */
const {		const {
Value,		Value,
Clock,		Clock,
block,		block,
set,		set,
cond,		cond,
▲ Show 20 Lines • Show All 358 Lines • ▼ Show 20 Lines	if (!isMember && canJoin && !this.props.threadCreationInProgress) {
]}		]}
>		>
{buttonContent}		{buttonContent}
</Button>		</Button>
</View>		</View>
);		);
}		}

		const typeaheadRegexMatches = getTypeaheadRegexMatches(
		this.state.text,
		this.state.selection,
		nativeTypeaheadRegex,
		);

		let typeaheadTooltip = null;

		if (typeaheadRegexMatches) {
		const typeaheadMatchedStrings = {
		textBeforeAtSymbol: typeaheadRegexMatches[1] ?? '',
		usernamePrefix: typeaheadRegexMatches[4] ?? '',
		};

		const suggestedUsers = getTypeaheadUserSuggestions(
		this.props.userSearchIndex,
		this.props.threadMembers,
		this.props.viewerID,
		typeaheadMatchedStrings.usernamePrefix,
		);

		if (suggestedUsers.length > 0) {
		typeaheadTooltip = (
		<TypeaheadTooltip
		text={this.state.text}
		matchedStrings={typeaheadMatchedStrings}
		suggestedUsers={suggestedUsers}
		focusAndUpdateTextAndSelection={this.focusAndUpdateTextAndSelection}
		/>
		);
		}
		}

let content;		let content;
const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(		const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(
this.props.threadInfo,		this.props.threadInfo,
);		);
if (this.shouldShowTextInput) {		if (this.shouldShowTextInput) {
content = this.renderInput();		content = this.renderInput();
} else if (		} else if (
threadFrozenDueToViewerBlock(		threadFrozenDueToViewerBlock(
Show All 29 Lines	const keyboardInputHost =
<KeyboardInputHost textInputRef={this.textInput} />		<KeyboardInputHost textInputRef={this.textInput} />
);		);

return (		return (
<View		<View
style={this.props.styles.container}		style={this.props.styles.container}
onLayout={this.props.onInputBarLayout}		onLayout={this.props.onInputBarLayout}
>		>
		{typeaheadTooltip}
{joinButton}		{joinButton}
{content}		{content}
{keyboardInputHost}		{keyboardInputHost}
</View>		</View>
);		);
}		}

renderInput() {		renderInput() {
▲ Show 20 Lines • Show All 522 Lines • Show Last 20 Lines