Differential D7137 Diff 24229 native/chat/settings/thread-settings-parent.react.js

Changeset View

Standalone View

native/chat/settings/thread-settings-parent.react.js

// @flow		// @flow

import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';
import { Text, View } from 'react-native';		import { Text, View } from 'react-native';

		import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
import { type ThreadInfo } from 'lib/types/thread-types.js';		import { type ThreadInfo } 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 ThreadPill from '../../components/thread-pill.react.js';		import ThreadPill from '../../components/thread-pill.react.js';
import { useStyles } from '../../themes/colors.js';		import { useStyles } from '../../themes/colors.js';
		import { useShouldRenderAvatars } from '../../utils/avatar-utils.js';
import { useNavigateToThread } from '../message-list-types.js';		import { useNavigateToThread } from '../message-list-types.js';

type Props = {		type ParentButtonProps = {
+threadInfo: ThreadInfo,		+parentThreadInfo: ThreadInfo,
+parentThreadInfo: ?ThreadInfo,
};		};
function ThreadSettingsParent(props: Props): React.Node {		function ParentButton(props: ParentButtonProps): React.Node {
const { threadInfo, parentThreadInfo } = props;
const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);

const navigateToThread = useNavigateToThread();		const navigateToThread = useNavigateToThread();

const onPressParentThread = React.useCallback(() => {		const onPressParentThread = React.useCallback(() => {
invariant(parentThreadInfo, 'should be set');		navigateToThread({ threadInfo: props.parentThreadInfo });
navigateToThread({ threadInfo: parentThreadInfo });		}, [props.parentThreadInfo, navigateToThread]);
}, [parentThreadInfo, navigateToThread]);

let parent;		const avatarInfo = useGetAvatarForThread(props.parentThreadInfo);
if (parentThreadInfo) {		const shouldRenderAvatars = useShouldRenderAvatars();
parent = (
<Button onPress={onPressParentThread}>		const avatar = React.useMemo(() => {
<ThreadPill threadInfo={parentThreadInfo} />		if (!shouldRenderAvatars) {
		return null;
		}

		return (
		<View style={styles.avatarContainer}>
		<Avatar size="small" avatarInfo={avatarInfo} />
		</View>
		);
		}, [avatarInfo, shouldRenderAvatars, styles.avatarContainer]);

		return (
		<Button onPress={onPressParentThread} style={styles.parentContainer}>
		{avatar}
		<ThreadPill threadInfo={props.parentThreadInfo} />
</Button>		</Button>
);		);
		}

		type ThreadSettingsParentProps = {
		+threadInfo: ThreadInfo,
		+parentThreadInfo: ?ThreadInfo,
		};
		function ThreadSettingsParent(props: ThreadSettingsParentProps): React.Node {
		const { threadInfo, parentThreadInfo } = props;
		const styles = useStyles(unboundStyles);

		let parent;
		if (parentThreadInfo) {
		parent = <ParentButton parentThreadInfo={parentThreadInfo} />;
} else if (threadInfo.parentThreadID) {		} else if (threadInfo.parentThreadID) {
parent = (		parent = (
<Text		<Text
style={[styles.currentValue, styles.currentValueText, styles.noParent]}		style={[styles.currentValue, styles.currentValueText, styles.noParent]}
numberOfLines={1}		numberOfLines={1}
>		>
Secret parent		Secret parent
</Text>		</Text>
Show All 15 Lines	<View style={styles.row}>
Parent		Parent
</Text>		</Text>
{parent}		{parent}
</View>		</View>
);		);
}		}

const unboundStyles = {		const unboundStyles = {
		avatarContainer: {
		marginRight: 8,
		},
currentValue: {		currentValue: {
flex: 1,		flex: 1,
},		},
currentValueText: {		currentValueText: {
color: 'panelForegroundSecondaryLabel',		color: 'panelForegroundSecondaryLabel',
fontFamily: 'Arial',		fontFamily: 'Arial',
fontSize: 16,		fontSize: 16,
margin: 0,		margin: 0,
paddingRight: 0,		paddingRight: 0,
},		},
label: {		label: {
color: 'panelForegroundTertiaryLabel',		color: 'panelForegroundTertiaryLabel',
fontSize: 16,		fontSize: 16,
width: 96,		width: 96,
},		},
noParent: {		noParent: {
fontStyle: 'italic',		fontStyle: 'italic',
paddingLeft: 2,		paddingLeft: 2,
},		},
		parentContainer: {
		flexDirection: 'row',
		},
row: {		row: {
backgroundColor: 'panelForeground',		backgroundColor: 'panelForeground',
flexDirection: 'row',		flexDirection: 'row',
paddingHorizontal: 24,		paddingHorizontal: 24,
paddingVertical: 4,		paddingVertical: 4,
alignItems: 'center',		alignItems: 'center',
},		},
};		};

const ConnectedThreadSettingsParent: React.ComponentType<Props> =		const ConnectedThreadSettingsParent: React.ComponentType<ThreadSettingsParentProps> =
React.memo<Props>(ThreadSettingsParent);		React.memo<ThreadSettingsParentProps>(ThreadSettingsParent);

export default ConnectedThreadSettingsParent;		export default ConnectedThreadSettingsParent;