Page MenuHomePhabricator
Files F3574513

D12643.diff
No OneTemporary
Actions

D12643.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
@@ -149,6 +149,7 @@
description={enumSettingsOptionDescription}
enumValue={announcementSetting}
onEnumValuePress={onCheckBoxPress}
+ type="checkbox"
/>
<ThreadSettingsCategoryFooter type="full" />
<RegistrationButtonContainer>
diff --git a/native/components/enum-settings-option.react.js b/native/components/enum-settings-option.react.js
--- a/native/components/enum-settings-option.react.js
+++ b/native/components/enum-settings-option.react.js
@@ -6,18 +6,28 @@
import CommIcon from '../components/comm-icon.react.js';
import { useColors, useStyles } from '../themes/colors.js';
+type InputType = 'radio' | 'checkbox';
+
type EnumSettingsOptionProps = {
+icon?: string,
+name: string,
+description: string,
+enumValue: boolean,
+onEnumValuePress: () => mixed,
+ +type?: InputType,
};
function EnumSettingsOption(props: EnumSettingsOptionProps): React.Node {
const styles = useStyles(unboundStyles);
const colors = useColors();
- const { icon, name, description, enumValue, onEnumValuePress } = props;
+ const {
+ icon,
+ name,
+ description,
+ enumValue,
+ onEnumValuePress,
+ type = 'radio',
+ } = props;
const enumIcon = React.useMemo(() => {
if (!icon) {
@@ -31,10 +41,6 @@
);
}, [icon, styles.enumIcon, colors.purpleButton]);
- const checkBoxFill = enumValue ? (
- <View style={styles.enumCheckBoxFill} />
- ) : null;
-
const infoContainerStyle = React.useMemo(
() =>
props.icon
@@ -43,6 +49,35 @@
[props.icon, styles.enumInfoContainer],
);
+ const enumInputStyles = React.useMemo(() => {
+ const style = [styles.enumInput];
+
+ if (type === 'radio') {
+ style.push(styles.radio);
+ } else {
+ style.push(styles.checkBox);
+ }
+
+ return style;
+ }, [styles.checkBox, styles.enumInput, styles.radio, type]);
+
+ const enumInputFilledStyles = React.useMemo(() => {
+ const style = [styles.enumInputFill];
+
+ if (type === 'radio') {
+ style.push(styles.radioFill);
+ } else {
+ style.push(styles.checkBoxFill);
+ }
+
+ return style;
+ }, [styles.checkBoxFill, styles.enumInputFill, styles.radioFill, type]);
+
+ const enumInputFill = React.useMemo(
+ () => (enumValue ? <View style={enumInputFilledStyles} /> : null),
+ [enumValue, enumInputFilledStyles],
+ );
+
return (
<View style={styles.enumCell}>
{enumIcon}
@@ -52,10 +87,10 @@
</View>
<TouchableOpacity
onPress={onEnumValuePress}
- style={styles.enumCheckBoxContainer}
+ style={styles.enumInputContainer}
activeOpacity={0.4}
>
- <View style={styles.enumCheckBox}>{checkBoxFill}</View>
+ <View style={enumInputStyles}>{enumInputFill}</View>
</TouchableOpacity>
</View>
);
@@ -85,26 +120,36 @@
color: 'panelForegroundSecondaryLabel',
lineHeight: 18,
},
- enumCheckBoxContainer: {
+ enumInputContainer: {
padding: 22,
justifyContent: 'center',
alignItems: 'center',
},
- enumCheckBox: {
+ enumInput: {
height: 32,
width: 32,
- borderRadius: 3.5,
borderWidth: 1,
borderColor: 'panelSecondaryForegroundBorder',
justifyContent: 'center',
alignItems: 'center',
},
- enumCheckBoxFill: {
+ checkBox: {
+ borderRadius: 3.5,
+ },
+ radio: {
+ borderRadius: 16,
+ },
+ enumInputFill: {
height: 20,
width: 20,
- borderRadius: 2.1875,
backgroundColor: 'panelForegroundSecondaryLabel',
},
+ checkBoxFill: {
+ borderRadius: 2.1875,
+ },
+ radioFill: {
+ borderRadius: 10,
+ },
};
export default EnumSettingsOption;
diff --git a/native/roles/create-roles-screen.react.js b/native/roles/create-roles-screen.react.js
--- a/native/roles/create-roles-screen.react.js
+++ b/native/roles/create-roles-screen.react.js
@@ -148,6 +148,7 @@
description={permission.description}
enumValue={isUserSurfacedPermissionSelected(permission)}
onEnumValuePress={() => onEnumValuePress(permission)}
+ type="checkbox"
/>
)),
[isUserSurfacedPermissionSelected, onEnumValuePress],

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 29, 5:41 PM (5 h, 59 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2733498
Default Alt Text
D12643.diff (4 KB)

Event Timeline