Page MenuHomePhabricator
Files F3402369

D8295.diff
No OneTemporary
Actions

D8295.diff
View Options

diff --git a/native/community-creation/community-configuration.react.js b/native/community-creation/community-configuration.react.js
--- a/native/community-creation/community-configuration.react.js
+++ b/native/community-creation/community-configuration.react.js
@@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import { Text, View } from 'react-native';
import { newThread, newThreadActionTypes } from 'lib/actions/thread-actions.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
@@ -23,7 +23,7 @@
ThreadSettingsCategoryFooter,
ThreadSettingsCategoryHeader,
} from '../chat/settings/thread-settings-category.react.js';
-import CommIcon from '../components/comm-icon.react.js';
+import EnumSettingsOption from '../components/enum-settings-option.react.js';
import TextInput from '../components/text-input.react.js';
import { useCalendarQuery } from '../navigation/nav-selectors.js';
import {
@@ -113,11 +113,6 @@
setAnnouncementSetting(!announcementSetting);
}, [announcementSetting]);
- let checkBoxFill;
- if (announcementSetting) {
- checkBoxFill = <View style={styles.enumCheckBoxFill} />;
- }
-
return (
<RegistrationContainer>
<RegistrationContentContainer style={styles.containerPaddingOverride}>
@@ -143,25 +138,13 @@
</View>
<ThreadSettingsCategoryHeader type="full" title="OPTIONAL SETTINGS" />
- <View style={styles.enumCell}>
- <View style={styles.enumIcon}>
- <CommIcon name="megaphone" size={24} color={colors.purpleButton} />
- </View>
- <View style={styles.enumInfoContainer}>
- <Text style={styles.enumInfoName}>Announcement root</Text>
- <Text style={styles.enumInfoDescription}>
- Make it so that only admins can post to the root channel of the
- community.
- </Text>
- </View>
- <TouchableOpacity
- onPress={onCheckBoxPress}
- style={styles.enumCheckBoxContainer}
- activeOpacity={0.4}
- >
- <View style={styles.enumCheckBox}>{checkBoxFill}</View>
- </TouchableOpacity>
- </View>
+ <EnumSettingsOption
+ icon="megaphone"
+ name="Announcement root"
+ description="Make it so that only admins can post to the root channel of the community."
+ enumValue={announcementSetting}
+ onEnumValuePress={onCheckBoxPress}
+ />
<ThreadSettingsCategoryFooter type="full" />
<RegistrationButtonContainer>
<RegistrationButton
@@ -216,49 +199,6 @@
communityNameNoticeText: {
color: 'panelForegroundTertiaryLabel',
},
- enumCell: {
- flexDirection: 'row',
- height: 96,
- backgroundColor: 'panelForeground',
- },
- enumIcon: {
- padding: 16,
- },
- enumInfoContainer: {
- flex: 1,
- flexDirection: 'column',
- justifyContent: 'space-evenly',
- padding: 8,
- },
- enumInfoName: {
- color: 'panelForegroundLabel',
- fontSize: 18,
- lineHeight: 24,
- },
- enumInfoDescription: {
- color: 'panelForegroundSecondaryLabel',
- lineHeight: 18,
- },
- enumCheckBoxContainer: {
- padding: 22,
- justifyContent: 'center',
- alignItems: 'center',
- },
- enumCheckBox: {
- height: 32,
- width: 32,
- borderRadius: 3.5,
- borderWidth: 1,
- borderColor: 'panelSecondaryForegroundBorder',
- justifyContent: 'center',
- alignItems: 'center',
- },
- enumCheckBoxFill: {
- height: 20,
- width: 20,
- borderRadius: 2.1875,
- backgroundColor: 'panelForegroundSecondaryLabel',
- },
errorMessageContainer: {
alignItems: 'center',
},
diff --git a/native/components/enum-settings-option.react.js b/native/components/enum-settings-option.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/enum-settings-option.react.js
@@ -0,0 +1,110 @@
+// @flow
+
+import * as React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import CommIcon from '../components/comm-icon.react.js';
+import { useColors, useStyles } from '../themes/colors.js';
+
+type EnumSettingsOptionProps = {
+ +icon?: string,
+ +name: string,
+ +description: string,
+ +enumValue: boolean,
+ +onEnumValuePress: () => mixed,
+};
+
+function EnumSettingsOption(props: EnumSettingsOptionProps): React.Node {
+ const styles = useStyles(unboundStyles);
+ const colors = useColors();
+ const { icon, name, description, enumValue, onEnumValuePress } = props;
+
+ const enumIcon = React.useMemo(() => {
+ if (icon) {
+ return null;
+ }
+
+ return (
+ <View style={styles.enumIcon}>
+ <CommIcon name="megaphone" size={24} color={colors.purpleButton} />
+ </View>
+ );
+ }, [icon, styles.enumIcon, colors.purpleButton]);
+
+ const checkBoxFill = enumValue ? (
+ <View style={styles.enumCheckBoxFill} />
+ ) : null;
+
+ const infoContainerStyle = React.useMemo(
+ () =>
+ props.icon
+ ? styles.enumInfoContainer
+ : { ...styles.enumInfoContainer, marginLeft: 10 },
+ [props.icon, styles.enumInfoContainer],
+ );
+
+ return (
+ <View style={styles.enumCell}>
+ {enumIcon}
+ <View style={infoContainerStyle}>
+ <Text style={styles.enumInfoName}>{name}</Text>
+ <Text style={styles.enumInfoDescription}>{description}</Text>
+ </View>
+ <TouchableOpacity
+ onPress={onEnumValuePress}
+ style={styles.enumCheckBoxContainer}
+ activeOpacity={0.4}
+ >
+ <View style={styles.enumCheckBox}>{checkBoxFill}</View>
+ </TouchableOpacity>
+ </View>
+ );
+}
+
+const unboundStyles = {
+ enumCell: {
+ flexDirection: 'row',
+ height: 96,
+ backgroundColor: 'panelForeground',
+ },
+ enumIcon: {
+ padding: 16,
+ },
+ enumInfoContainer: {
+ flex: 1,
+ flexDirection: 'column',
+ justifyContent: 'space-evenly',
+ padding: 8,
+ },
+ enumInfoName: {
+ color: 'panelForegroundLabel',
+ fontSize: 18,
+ lineHeight: 24,
+ },
+ enumInfoDescription: {
+ color: 'panelForegroundSecondaryLabel',
+ lineHeight: 18,
+ },
+ enumCheckBoxContainer: {
+ padding: 22,
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ enumCheckBox: {
+ height: 32,
+ width: 32,
+ borderRadius: 3.5,
+ borderWidth: 1,
+ borderColor: 'panelSecondaryForegroundBorder',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ enumCheckBoxFill: {
+ height: 20,
+ width: 20,
+ borderRadius: 2.1875,
+ backgroundColor: 'panelForegroundSecondaryLabel',
+ },
+};
+
+export default EnumSettingsOption;

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 3, 4:25 PM (3 h, 37 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2612359
Default Alt Text
D8295.diff (6 KB)

Event Timeline