Changeset View
Changeset View
Standalone 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 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 TextInput from '../components/text-input.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'; | ||||
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; |