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, TouchableOpacity, 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 { | import { | ||||
ThreadSettingsCategoryFooter, | ThreadSettingsCategoryFooter, | ||||
ThreadSettingsCategoryHeader, | ThreadSettingsCategoryHeader, | ||||
} from '../chat/settings/thread-settings-category.react.js'; | } from '../chat/settings/thread-settings-category.react.js'; | ||||
Show All 16 Lines | 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(''); | const [pendingCommunityName, setPendingCommunityName] = React.useState(''); | ||||
const [announcementSetting, setAnnouncementSetting] = React.useState(false); | |||||
const onCheckBoxPress = React.useCallback(() => { | |||||
setAnnouncementSetting(!announcementSetting); | |||||
}, [announcementSetting]); | |||||
let checkBoxFill; | |||||
if (announcementSetting) { | |||||
checkBoxFill = <View style={styles.enumCheckBoxFill} />; | |||||
} | |||||
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" | ||||
Show All 29 Lines | <RegistrationContainer> | ||||
</View> | </View> | ||||
<View style={styles.enumInfoContainer}> | <View style={styles.enumInfoContainer}> | ||||
<Text style={styles.enumInfoName}>Announcement root</Text> | <Text style={styles.enumInfoName}>Announcement root</Text> | ||||
<Text style={styles.enumInfoDescription}> | <Text style={styles.enumInfoDescription}> | ||||
Make it so that only admins can post to the root channel of the | Make it so that only admins can post to the root channel of the | ||||
community. | community. | ||||
</Text> | </Text> | ||||
</View> | </View> | ||||
<View style={styles.enumCheckBoxContainer}> | <TouchableOpacity | ||||
<View style={styles.enumCheckBox}></View> | onPress={onCheckBoxPress} | ||||
</View> | style={styles.enumCheckBoxContainer} | ||||
activeOpacity={0.4} | |||||
> | |||||
<View style={styles.enumCheckBox}>{checkBoxFill}</View> | |||||
</TouchableOpacity> | |||||
</View> | </View> | ||||
<ThreadSettingsCategoryFooter type="full" /> | <ThreadSettingsCategoryFooter type="full" /> | ||||
</RegistrationContentContainer> | </RegistrationContentContainer> | ||||
</RegistrationContainer> | </RegistrationContainer> | ||||
); | ); | ||||
} | } | ||||
const unboundStyles = { | const unboundStyles = { | ||||
▲ Show 20 Lines • Show All 73 Lines • ▼ Show 20 Lines | enumCheckBoxContainer: { | ||||
alignItems: 'center', | alignItems: 'center', | ||||
}, | }, | ||||
enumCheckBox: { | enumCheckBox: { | ||||
height: 32, | height: 32, | ||||
width: 32, | width: 32, | ||||
borderRadius: 3.5, | borderRadius: 3.5, | ||||
borderWidth: 1, | borderWidth: 1, | ||||
borderColor: 'panelSecondaryForegroundBorder', | borderColor: 'panelSecondaryForegroundBorder', | ||||
justifyContent: 'center', | |||||
alignItems: 'center', | |||||
}, | |||||
enumCheckBoxFill: { | |||||
height: 20, | |||||
width: 20, | |||||
borderRadius: 2.1875, | |||||
backgroundColor: 'panelForegroundSecondaryLabel', | |||||
}, | }, | ||||
}; | }; | ||||
export default CommunityConfiguration; | export default CommunityConfiguration; |