Differential D8159 Diff 27968 native/roles/change-roles-header-left-button.react.js

Changeset View

Standalone View

native/roles/change-roles-header-left-button.react.js

	// @flow			// @flow

	import { HeaderBackButton as BaseHeaderBackButton } from '@react-navigation/elements';			import { HeaderBackButton as BaseHeaderBackButton } from '@react-navigation/elements';
				import invariant from 'invariant';
	import * as React from 'react';			import * as React from 'react';
	import { Text } from 'react-native';			import { Alert, Text } from 'react-native';
	import { TouchableOpacity } from 'react-native-gesture-handler';			import { TouchableOpacity } from 'react-native-gesture-handler';

				import type { NavigationRoute } from '../navigation/route-names';
	import { useColors } from '../themes/colors.js';			import { useColors } from '../themes/colors.js';

	type Props = React.ElementConfig<typeof BaseHeaderBackButton>;			type ChangeRolesHeaderLeftButtonProps = {
	function ChangeRolesHeaderLeftButton(props: Props): React.Node {			+route: NavigationRoute<'ChangeRolesScreen'>,
				...React.ElementConfig<typeof BaseHeaderBackButton>,
				};

				function ChangeRolesHeaderLeftButton(
				props: ChangeRolesHeaderLeftButtonProps,
				): React.Node {
				const { memberInfo, role: selectedRole } = props.route.params;
				const { role: memberRole } = memberInfo;

				const onCancel = React.useCallback(() => {
				const { onPress } = props;
				invariant(onPress, 'onPress must be defined');

				if (selectedRole === memberRole) {
				onPress();
				return;
				}

				Alert.alert(
				'Discard changes?',
				'You have unsaved changes which will be discarded if you navigate away',
				ashoatUnsubmitted Not Done Inline Actions Still missing a period at the end ashoat: Still missing a period at the end
				ashoatUnsubmitted Not Done Inline Actions Ah looks like it was addressed in D8277 ashoat: Ah looks like it was addressed in D8277
				[
				{ text: 'Leave', onPress },
				{ text: 'Stay', style: 'cancel' },
				],
				);
				}, [memberRole, props, selectedRole]);

	const { panelForegroundSecondaryLabel } = useColors();			const { panelForegroundSecondaryLabel } = useColors();
	const labelStyle = React.useMemo(			const labelStyle = React.useMemo(
	() => ({			() => ({
	color: panelForegroundSecondaryLabel,			color: panelForegroundSecondaryLabel,
	marginLeft: 10,			marginLeft: 10,
	}),			}),
	[panelForegroundSecondaryLabel],			[panelForegroundSecondaryLabel],
	);			);

	return (			return (
	<TouchableOpacity onPress={props.onPress}>			<TouchableOpacity onPress={onCancel}>
	<Text style={labelStyle}>Cancel</Text>			<Text style={labelStyle}>Cancel</Text>
	</TouchableOpacity>			</TouchableOpacity>
	);			);
	}			}

	export default ChangeRolesHeaderLeftButton;			export default ChangeRolesHeaderLeftButton;