Differential D7067 Diff 23794 native/chat/inner-text-message.react.js

Changeset View

Standalone View

native/chat/inner-text-message.react.js

// @flow		// @flow

import * as React from 'react';		import * as React from 'react';
import { View, StyleSheet, TouchableWithoutFeedback } from 'react-native';		import { View, StyleSheet, TouchableWithoutFeedback } from 'react-native';
import Animated from 'react-native-reanimated';		import Animated from 'react-native-reanimated';

import { colorIsDark } from 'lib/shared/thread-utils.js';		import { colorIsDark } from 'lib/shared/thread-utils.js';

		import { avatarOffset } from './chat-constants.js';
import { useComposedMessageMaxWidth } from './composed-message-width.js';		import { useComposedMessageMaxWidth } from './composed-message-width.js';
import { useTextMessageMarkdownRules } from './message-list-types.js';		import { useTextMessageMarkdownRules } from './message-list-types.js';
import {		import {
allCorners,		allCorners,
filterCorners,		filterCorners,
getRoundedContainerStyle,		getRoundedContainerStyle,
} from './rounded-corners.js';		} from './rounded-corners.js';
import {		import {
TextMessageMarkdownContext,		TextMessageMarkdownContext,
useTextMessageMarkdown,		useTextMessageMarkdown,
} from './text-message-markdown-context.js';		} from './text-message-markdown-context.js';
import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react.js';		import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react.js';
import Markdown from '../markdown/markdown.react.js';		import Markdown from '../markdown/markdown.react.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';
import { useColors, colors } from '../themes/colors.js';		import { useColors, colors } from '../themes/colors.js';
import type { ChatTextMessageInfoItemWithHeight } from '../types/chat-types.js';		import type { ChatTextMessageInfoItemWithHeight } from '../types/chat-types.js';

/* eslint-disable import/no-named-as-default-member */		/* eslint-disable import/no-named-as-default-member */
const { Node } = Animated;		const { Node } = Animated;
/* eslint-enable import/no-named-as-default-member */		/* eslint-enable import/no-named-as-default-member */

function dummyNodeForTextMessageHeightMeasurement(		function dummyNodeForTextMessageHeightMeasurement(
text: string,		text: string,
		isViewer: boolean,
): React.Element<typeof DummyTextNode> {		): React.Element<typeof DummyTextNode> {
return <DummyTextNode>{text}</DummyTextNode>;		return <DummyTextNode isViewer={isViewer}>{text}</DummyTextNode>;
}		}

type DummyTextNodeProps = {		type DummyTextNodeProps = {
...React.ElementConfig<typeof View>,		...React.ElementConfig<typeof View>,
+children: string,		+children: string,
		+isViewer: boolean,
};		};
function DummyTextNode(props: DummyTextNodeProps): React.Node {		function DummyTextNode(props: DummyTextNodeProps): React.Node {
const { children, style, ...rest } = props;		const { children, isViewer, style, ...rest } = props;
const maxWidth = useComposedMessageMaxWidth();
		let maxWidth = useComposedMessageMaxWidth();
		if (!isViewer) {
		maxWidth = maxWidth - avatarOffset;
		}

const viewStyle = [props.style, styles.dummyMessage, { maxWidth }];		const viewStyle = [props.style, styles.dummyMessage, { maxWidth }];
const rules = useTextMessageMarkdownRules(false);		const rules = useTextMessageMarkdownRules(false);
return (		return (
<View {...rest} style={viewStyle}>		<View {...rest} style={viewStyle}>
<Markdown style={styles.text} rules={rules}>		<Markdown style={styles.text} rules={rules}>
{children}		{children}
</Markdown>		</Markdown>
</View>		</View>
▲ Show 20 Lines • Show All 43 Lines • ▼ Show 20 Lines	const textStyle = {
color: darkColor		color: darkColor
? colors.dark.listForegroundLabel		? colors.dark.listForegroundLabel
: colors.light.listForegroundLabel,		: colors.light.listForegroundLabel,
};		};

return [styles.text, textStyle];		return [styles.text, textStyle];
}, [darkColor]);		}, [darkColor]);

		let maxWidth = useComposedMessageMaxWidth();
		if (!isViewer) {
		maxWidth = maxWidth - avatarOffset;
		}
		const maxWidthStyle = React.useMemo(() => ({ maxWidth }), [maxWidth]);

// If we need to render a Text with an onPress prop inside, we're going to		// If we need to render a Text with an onPress prop inside, we're going to
// have an issue: the GestureTouchableOpacity below will trigger too when the		// have an issue: the GestureTouchableOpacity below will trigger too when the
// the onPress is pressed. We have to use a GestureTouchableOpacity in order		// the onPress is pressed. We have to use a GestureTouchableOpacity in order
// for the message touch gesture to play nice with the message swipe gesture,		// for the message touch gesture to play nice with the message swipe gesture,
// so we need to find a way to disable the GestureTouchableOpacity.		// so we need to find a way to disable the GestureTouchableOpacity.
//		//
// Our solution is to keep using the GestureTouchableOpacity for the padding		// Our solution is to keep using the GestureTouchableOpacity for the padding
// around the text, and to have the Texts inside ALL implement an onPress prop		// around the text, and to have the Texts inside ALL implement an onPress prop
Show All 16 Lines	function InnerTextMessage(props: Props): React.Node {
const message = (		const message = (
<TextMessageMarkdownContext.Provider value={textMessageMarkdown}>		<TextMessageMarkdownContext.Provider value={textMessageMarkdown}>
<TouchableWithoutFeedback>		<TouchableWithoutFeedback>
<View>		<View>
<GestureTouchableOpacity		<GestureTouchableOpacity
onPress={props.onPress}		onPress={props.onPress}
onLongPress={props.onPress}		onLongPress={props.onPress}
activeOpacity={0.6}		activeOpacity={0.6}
style={[styles.message, cornerStyle]}		style={[styles.message, cornerStyle, maxWidthStyle]}
animatedStyle={messageStyle}		animatedStyle={messageStyle}
>		>
<Markdown style={markdownStyles} rules={rules}>		<Markdown style={markdownStyles} rules={rules}>
{text}		{text}
</Markdown>		</Markdown>
</GestureTouchableOpacity>		</GestureTouchableOpacity>
{secondMessage}		{secondMessage}
</View>		</View>
Show All 36 Lines