Differential D7952 Diff 26996 native/community-creation/community-configuration.react.js

Changeset View

Standalone View

native/community-creation/community-configuration.react.js

	// @flow			// @flow

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

	import type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js';			import type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js';
	import RegistrationContainer from '../account/registration/registration-container.react.js';			import RegistrationContainer from '../account/registration/registration-container.react.js';
	import RegistrationContentContainer from '../account/registration/registration-content-container.react.js';			import RegistrationContentContainer from '../account/registration/registration-content-container.react.js';
				import {
				ThreadSettingsCategoryFooter,
				ThreadSettingsCategoryHeader,
				} from '../chat/settings/thread-settings-category.react.js';
	import CommIcon from '../components/comm-icon.react.js';			import CommIcon from '../components/comm-icon.react.js';
	import Pill from '../components/pill.react.js';			import Pill from '../components/pill.react.js';
	import RegistrationContainer from '../account/registration/registration-container.react.js';			import TextInput from '../components/text-input.react.js';
	import RegistrationContentContainer from '../account/registration/registration-content-container.react.js';
	import CommIcon from '../components/comm-icon.react.js';
	import Pill from '../components/pill.react.js';
	import { type NavigationRoute } from '../navigation/route-names.js';			import { type NavigationRoute } from '../navigation/route-names.js';
	import { useColors, useStyles } from '../themes/colors.js';			import { useColors, useStyles } from '../themes/colors.js';
	import { useColors, useStyles } from '../themes/colors.js';

	type Props = {			type Props = {
	+navigation: CommunityCreationNavigationProp<'CommunityConfiguration'>,			+navigation: CommunityCreationNavigationProp<'CommunityConfiguration'>,
	+route: NavigationRoute<'CommunityConfiguration'>,			+route: NavigationRoute<'CommunityConfiguration'>,
	};			};
	// eslint-disable-next-line no-unused-vars			// eslint-disable-next-line no-unused-vars
	function CommunityConfiguration(props: Props): React.Node {			function CommunityConfiguration(props: Props): React.Node {
	const styles = useStyles(unboundStyles);			const styles = useStyles(unboundStyles);
	const colors = useColors();			const colors = useColors();

	const cloudIcon = (			const cloudIcon = (
	<CommIcon			<CommIcon
	name="cloud-filled"			name="cloud-filled"
	size={12}			size={12}
	color={colors.panelForegroundLabel}			color={colors.panelForegroundLabel}
	/>			/>
	);			);

				const [pendingCommunityName, setPendingCommunityName] = React.useState('');

	return (			return (
	<RegistrationContainer>			<RegistrationContainer>
	<RegistrationContentContainer style={styles.containerPaddingOverride}>			<RegistrationContentContainer style={styles.containerPaddingOverride}>
	<View style={styles.keyserverRowContainer}>			<View style={styles.keyserverRowContainer}>
	<Text style={styles.withinText}>within</Text>			<Text style={styles.withinText}>within</Text>
	<Pill			<Pill
	label="ashoat"			label="ashoat"
	backgroundColor={colors.codeBackground}			backgroundColor={colors.codeBackground}
	icon={cloudIcon}			icon={cloudIcon}
	/>			/>
	</View>			</View>
				<ThreadSettingsCategoryHeader type="full" title="COMMUNITY INFO" />
				<View style={styles.communityNameRow}>
				<Text style={styles.communityNameLabel}>Name</Text>
				<TextInput
				style={styles.communityNamePendingValue}
				placeholder="Community Name"
				placeholderTextColor={colors.panelSecondaryForegroundBorder}
				value={pendingCommunityName}
				onChangeText={setPendingCommunityName}
				editable={true}
				/>
				</View>
				<ThreadSettingsCategoryFooter type="full" />
	</RegistrationContentContainer>			</RegistrationContentContainer>
	</RegistrationContainer>			</RegistrationContainer>
	);			);
	}			}

	const unboundStyles = {			const unboundStyles = {
	keyserverRowContainer: {			keyserverRowContainer: {
	flexDirection: 'row',			flexDirection: 'row',
	justifyContent: 'center',			justifyContent: 'center',
	alignItems: 'center',			alignItems: 'center',
	backgroundColor: 'panelForeground',			backgroundColor: 'panelForeground',
	height: 48,			height: 48,
	borderColor: 'panelForegroundBorder',			borderColor: 'panelForegroundBorder',
	borderBottomWidth: 1,			borderBottomWidth: 1,
	},			},
	withinText: {			withinText: {
	color: 'panelForegroundLabel',			color: 'panelForegroundLabel',
	fontSize: 14,			fontSize: 14,
	marginRight: 6,			marginRight: 6,
	},			},
	containerPaddingOverride: {			containerPaddingOverride: {
	padding: 0,			padding: 0,
	},			},
				communityNameRow: {
				backgroundColor: 'panelForeground',
				flexDirection: 'row',
				paddingHorizontal: 24,
				paddingVertical: 8,
				},
				communityNameLabel: {
				color: 'panelForegroundTertiaryLabel',
				fontSize: 16,
				width: 96,
				},
				communityNamePendingValue: {
				color: 'panelForegroundSecondaryLabel',
				flex: 1,
				fontFamily: 'Arial',
				fontSize: 16,
				margin: 0,
				paddingLeft: 4,
				paddingRight: 0,
				paddingVertical: 0,
				borderBottomColor: 'transparent',
				},
	};			};

	export default CommunityConfiguration;			export default CommunityConfiguration;