Differential D7069 Diff 23851 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 { useStyles } from '../themes/colors.js';		import { useStyles } from '../themes/colors.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 22 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} />
<Text style={styles.buttonLabel} numberOfLines={1}>		<Text style={styles.buttonLabel} numberOfLines={1}>
@{item.username}		@{item.username}
</Text>		</Text>
</Button>		</Button>
);		);
},		},
[		[
focusAndUpdateTextAndSelection,		focusAndUpdateTextAndSelection,
▲ Show 20 Lines • Show All 66 Lines • ▼ Show 20 Lines	container: {
borderTopWidth: 1,		borderTopWidth: 1,
borderColor: 'typeaheadTooltipBorder',		borderColor: 'typeaheadTooltipBorder',
borderStyle: 'solid',		borderStyle: 'solid',
},		},
contentContainer: {		contentContainer: {
padding: 8,		padding: 8,
},		},
button: {		button: {
		alignItems: 'center',
flexDirection: 'row',		flexDirection: 'row',
innerHeight: 24,		innerHeight: 24,
padding: 8,		padding: 8,
color: 'typeaheadTooltipText',		color: 'typeaheadTooltipText',
},		},
buttonLabel: {		buttonLabel: {
color: 'white',		color: 'white',
fontSize: 16,		fontSize: 16,
fontWeight: '400',		fontWeight: '400',
		marginLeft: 8,
},		},
};		};

export default TypeaheadTooltip;		export default TypeaheadTooltip;