Differential D7063 Diff 24408 native/chat/inline-engagement.react.js

Changeset View

Standalone View

native/chat/inline-engagement.react.js

Show All 11 Lines
import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';		import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
import { stringForReactionList } from 'lib/shared/reaction-utils.js';		import { stringForReactionList } from 'lib/shared/reaction-utils.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';		import type { ThreadInfo } from 'lib/types/thread-types.js';

import {		import {
inlineEngagementStyle,		inlineEngagementStyle,
inlineEngagementCenterStyle,		inlineEngagementCenterStyle,
inlineEngagementRightStyle,		inlineEngagementRightStyle,
		inlineEngagementLeftStyle,
composedMessageStyle,		composedMessageStyle,
		avatarOffset,
} from './chat-constants.js';		} from './chat-constants.js';
import { useNavigateToThread } from './message-list-types.js';		import { useNavigateToThread } from './message-list-types.js';
import CommIcon from '../components/comm-icon.react.js';		import CommIcon from '../components/comm-icon.react.js';
import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react.js';		import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react.js';
import { MessageReactionsModalRouteName } from '../navigation/route-names.js';		import { MessageReactionsModalRouteName } from '../navigation/route-names.js';
import { useStyles } from '../themes/colors.js';		import { useStyles } from '../themes/colors.js';
import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';		import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';

type Props = {		type Props = {
+threadInfo: ?ThreadInfo,		+threadInfo: ?ThreadInfo,
+reactions?: ReactionInfo,		+reactions?: ReactionInfo,
+disabled?: boolean,		+disabled?: boolean,
		+positioning?: 'left' \| 'right',
		+shouldRenderAvatars?: boolean,
};		};
function InlineEngagement(props: Props): React.Node {		function InlineEngagement(props: Props): React.Node {
const { disabled = false, reactions, threadInfo } = props;		const {
		disabled = false,
		reactions,
		threadInfo,
		positioning,
		shouldRenderAvatars,
		} = props;
const repliesText = useInlineEngagementText(threadInfo);		const repliesText = useInlineEngagementText(threadInfo);

const navigateToThread = useNavigateToThread();		const navigateToThread = useNavigateToThread();
const { navigate } = useNavigation();		const { navigate } = useNavigation();

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

const unreadStyle = threadInfo?.currentUser.unread ? styles.unread : null;		const unreadStyle = threadInfo?.currentUser.unread ? styles.unread : null;
▲ Show 20 Lines • Show All 63 Lines • ▼ Show 20 Lines	function InlineEngagement(props: Props): React.Node {
}, [		}, [
marginLeft,		marginLeft,
onPressReactions,		onPressReactions,
reactions,		reactions,
styles.reaction,		styles.reaction,
styles.reactionsContainer,		styles.reactionsContainer,
]);		]);

		const container = React.useMemo(() => {
return (		return (
<View style={styles.container}>		<View style={styles.container}>
{sidebarItem}		{sidebarItem}
{reactionList}		{reactionList}
</View>		</View>
);		);
		}, [reactionList, sidebarItem, styles.container]);

		const inlineEngagementPositionStyle = [];
		if (positioning === 'left') {
		inlineEngagementPositionStyle.push(styles.leftInlineEngagement);
		} else {
		inlineEngagementPositionStyle.push(styles.rightInlineEngagement);
		}
		if (shouldRenderAvatars) {
		inlineEngagementPositionStyle.push({ marginLeft: avatarOffset });
		}

		return (
		<View style={[styles.inlineEngagement, inlineEngagementPositionStyle]}>
		{container}
		</View>
		);
}		}

const unboundStyles = {		const unboundStyles = {
container: {		container: {
flexDirection: 'row',		flexDirection: 'row',
height: inlineEngagementStyle.height,		height: inlineEngagementStyle.height,
borderRadius: 16,		borderRadius: 16,
backgroundColor: 'inlineEngagementBackground',		backgroundColor: 'inlineEngagementBackground',
alignSelf: 'baseline',		alignSelf: 'baseline',
alignItems: 'center',		alignItems: 'center',
padding: 8,		padding: 8,
},		},
unread: {		unread: {
color: 'listForegroundLabel',		color: 'listForegroundLabel',
fontWeight: 'bold',		fontWeight: 'bold',
},		},
		rightInlineEngagement: {
		alignSelf: 'flex-end',
		position: 'relative',
		right: inlineEngagementRightStyle.marginRight,
		top: inlineEngagementRightStyle.topOffset,
		},
		leftInlineEngagement: {
		justifyContent: 'flex-start',
		position: 'relative',
		top: inlineEngagementLeftStyle.topOffset,
		},
sidebar: {		sidebar: {
flexDirection: 'row',		flexDirection: 'row',
alignItems: 'center',		alignItems: 'center',
},		},
		inlineEngagement: {
		flexDirection: 'row',
		marginBottom: inlineEngagementStyle.marginBottom,
		marginTop: inlineEngagementStyle.marginTop,
		alignItems: 'center',
		},
icon: {		icon: {
color: 'inlineEngagementLabel',		color: 'inlineEngagementLabel',
marginRight: 4,		marginRight: 4,
},		},
repliesText: {		repliesText: {
color: 'inlineEngagementLabel',		color: 'inlineEngagementLabel',
fontSize: 14,		fontSize: 14,
lineHeight: 22,		lineHeight: 22,
},		},
reaction: {		reaction: {
color: 'inlineEngagementLabel',		color: 'inlineEngagementLabel',
fontSize: 14,		fontSize: 14,
lineHeight: 22,		lineHeight: 22,
},		},
reactionMarginLeft: {		reactionMarginLeft: {
marginLeft: 12,		marginLeft: 12,
},		},
reactionsContainer: {		reactionsContainer: {
display: 'flex',		display: 'flex',
flexDirection: 'row',		flexDirection: 'row',
alignItems: 'center',		alignItems: 'center',
},		},
		avatarOffset: {
		width: avatarOffset,
		},
};		};

type TooltipInlineEngagementProps = {		type TooltipInlineEngagementProps = {
+item: ChatMessageInfoItemWithHeight,		+item: ChatMessageInfoItemWithHeight,
+isOpeningSidebar: boolean,		+isOpeningSidebar: boolean,
+progress: Animated.Node,		+progress: Animated.Node,
+windowWidth: number,		+windowWidth: number,
+positioning: 'left' \| 'right' \| 'center',		+positioning: 'left' \| 'right' \| 'center',
Show All 16 Lines	const {
initialCoordinates,		initialCoordinates,
positioning,		positioning,
} = props;		} = props;
const inlineEngagementStyles = React.useMemo(() => {		const inlineEngagementStyles = React.useMemo(() => {
if (positioning === 'left') {		if (positioning === 'left') {
return {		return {
position: 'absolute',		position: 'absolute',
top:		top:
inlineEngagementStyle.marginTop +		inlineEngagementStyle.marginTop + inlineEngagementLeftStyle.topOffset,
inlineEngagementRightStyle.topOffset,
left: composedMessageStyle.marginLeft,		left: composedMessageStyle.marginLeft,
};		};
} else if (positioning === 'right') {		} else if (positioning === 'right') {
return {		return {
position: 'absolute',		position: 'absolute',
right:		right:
inlineEngagementRightStyle.marginRight +		inlineEngagementRightStyle.marginRight +
composedMessageStyle.marginRight,		composedMessageStyle.marginRight,
▲ Show 20 Lines • Show All 43 Lines • Show Last 20 Lines