Differential D7259 Diff 24451 native/chat/typeahead-tooltip.react.js

Changeset View

Standalone View

native/chat/typeahead-tooltip.react.js

// @flow		// @flow

import * as React from 'react';		import * as React from 'react';
import { Platform, Text } from 'react-native';		import { Platform, Text } from 'react-native';
import { PanGestureHandler, FlatList } from 'react-native-gesture-handler';		import { PanGestureHandler, FlatList } from 'react-native-gesture-handler';

import { getAvatarForUser } from 'lib/shared/avatar-utils.js';
import {		import {
type TypeaheadMatchedStrings,		type TypeaheadMatchedStrings,
type Selection,		type Selection,
getNewTextAndSelection,		getNewTextAndSelection,
} from 'lib/shared/mention-utils.js';		} from 'lib/shared/mention-utils.js';
import type { RelativeMemberInfo } from 'lib/types/thread-types.js';		import type { RelativeMemberInfo } from 'lib/types/thread-types.js';

import Avatar from '../components/avatar.react.js';
import Button from '../components/button.react.js';		import Button from '../components/button.react.js';
		import UserAvatar from '../components/user-avatar.react.js';
import { useStyles } from '../themes/colors.js';		import { useStyles } from '../themes/colors.js';
import { useShouldRenderAvatars } from '../utils/avatar-utils.js';		import { useShouldRenderAvatars } from '../utils/avatar-utils.js';

export type TypeaheadTooltipProps = {		export type TypeaheadTooltipProps = {
+text: string,		+text: string,
+matchedStrings: TypeaheadMatchedStrings,		+matchedStrings: TypeaheadMatchedStrings,
+suggestedUsers: $ReadOnlyArray<RelativeMemberInfo>,		+suggestedUsers: $ReadOnlyArray<RelativeMemberInfo>,
+focusAndUpdateTextAndSelection: (text: string, selection: Selection) => void,		+focusAndUpdateTextAndSelection: (text: string, selection: Selection) => void,
Show All 31 Lines	({ item }: { item: RelativeMemberInfo, ... }) => {
);		);

focusAndUpdateTextAndSelection(newText, {		focusAndUpdateTextAndSelection(newText, {
start: newSelectionStart,		start: newSelectionStart,
end: newSelectionStart,		end: newSelectionStart,
});		});
};		};

const avatarInfo = getAvatarForUser(item);

return (		return (
<Button onPress={onPress} style={styles.button} iosActiveOpacity={0.85}>		<Button onPress={onPress} style={styles.button} iosActiveOpacity={0.85}>
<Avatar size="small" avatarInfo={avatarInfo} />		<UserAvatar size="small" userID={item.id} />
<Text style={[styles.buttonLabel, marginLeftStyle]} numberOfLines={1}>		<Text style={[styles.buttonLabel, marginLeftStyle]} numberOfLines={1}>
@{item.username}		@{item.username}
</Text>		</Text>
</Button>		</Button>
);		);
},		},
[		[
styles.button,		styles.button,
▲ Show 20 Lines • Show All 89 Lines • Show Last 20 Lines