Changeset View
Changeset View
Standalone 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; |