Differential D6660 Diff 23117 native/chat/settings/thread-settings-category.react.js

Changeset View

Standalone View

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

// @flow		// @flow

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

import { useStyles } from '../../themes/colors.js';		import { useStyles } from '../../themes/colors.js';

export type CategoryType = 'full' \| 'outline' \| 'unpadded';		export type CategoryType = 'full' \| 'outline' \| 'unpadded';
type HeaderProps = {		type HeaderProps = {
+type: CategoryType,		+type: CategoryType,
+title: string,		+title: string,
};		};
Show All 15 Lines	<View>
<View style={[styles.header, contentStyle]}>		<View style={[styles.header, contentStyle]}>
<Text style={styles.title}>{props.title.toUpperCase()}</Text>		<Text style={styles.title}>{props.title.toUpperCase()}</Text>
</View>		</View>
<View style={paddingStyle} />		<View style={paddingStyle} />
</View>		</View>
);		);
}		}

		type ActionHeaderProps = {
		+title: string,
		+actionText: string,
		+onPress: () => mixed,
		};
		function ThreadSettingsCategoryActionHeader(
		props: ActionHeaderProps,
		): React.Node {
		const styles = useStyles(unboundStyles);
		return (
		<View style={styles.actionHeader}>
		<Text style={styles.title}>{props.title.toUpperCase()}</Text>
		<TouchableOpacity onPress={props.onPress}>
		<Text style={styles.actionText}>{props.actionText}</Text>
		</TouchableOpacity>
		</View>
		);
		}

type FooterProps = {		type FooterProps = {
+type: CategoryType,		+type: CategoryType,
};		};
function ThreadSettingsCategoryFooter(props: FooterProps): React.Node {		function ThreadSettingsCategoryFooter(props: FooterProps): React.Node {
const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
let contentStyle, paddingStyle;		let contentStyle, paddingStyle;
if (props.type === 'full') {		if (props.type === 'full') {
contentStyle = styles.fullFooter;		contentStyle = styles.fullFooter;
▲ Show 20 Lines • Show All 43 Lines • ▼ Show 20 Lines	const unboundStyles = {
},		},
title: {		title: {
color: 'panelBackgroundLabel',		color: 'panelBackgroundLabel',
fontSize: 12,		fontSize: 12,
fontWeight: '400',		fontWeight: '400',
paddingBottom: 3,		paddingBottom: 3,
paddingLeft: 24,		paddingLeft: 24,
},		},
		actionHeader: {
		marginTop: 16,
		flexDirection: 'row',
		justifyContent: 'space-between',
		},
		actionText: {
		color: 'link',
		fontSize: 12,
		fontWeight: '400',
		paddingBottom: 3,
		paddingRight: 12,
		},
};		};

export { ThreadSettingsCategoryHeader, ThreadSettingsCategoryFooter };		export {
		ThreadSettingsCategoryHeader,
		ThreadSettingsCategoryActionHeader,
		ThreadSettingsCategoryFooter,
		};