feat: disabling instead of hiding N/A screens

software-mansion · Jun 11, 2024 · aada1aa · aada1aa
1 parent fabecad
commit aada1aa
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/apps/examples/App.tsx b/apps/examples/App.tsx
@@ -112,15 +112,15 @@ const SCREENS: Record<
   },
 };
 
-const isPlatformReady = (name: string) => {
+const isPlatformReady = (name: keyof typeof SCREENS) => {
   if (Platform.isTV) {
     return !!SCREENS[name].isTVOSReady;
   }
 
   return true;
 };
 
-const screens = Object.keys(SCREENS).filter(isPlatformReady);
+const screens = Object.keys(SCREENS);
 const examples = screens.filter(name => SCREENS[name].type === 'example');
 const playgrounds = screens.filter(name => SCREENS[name].type === 'playground');
 
@@ -147,26 +147,26 @@ const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => (
         RNRestart.Restart();
       }}
     />
-    {!!examples.length && (
-      <Text style={styles.label} testID="root-screen-examples-header">
-        Examples
-      </Text>
-    )}
+    <Text style={styles.label} testID="root-screen-examples-header">
+      Examples
+    </Text>
     {examples.map(name => (
       <ListItem
         key={name}
         testID={`root-screen-example-${name}`}
         title={SCREENS[name].title}
         onPress={() => navigation.navigate(name)}
+        disabled={!isPlatformReady(name)}
       />
     ))}
-    {!!playgrounds.length && <Text style={styles.label}>Playgrounds</Text>}
+    <Text style={styles.label}>Playgrounds</Text>
     {playgrounds.map(name => (
       <ListItem
         key={name}
         testID={`root-screen-playground-${name}`}
         title={SCREENS[name].title}
         onPress={() => navigation.navigate(name)}
+        disabled={!isPlatformReady(name)}
       />
     ))}
   </ScrollView>

diff --git a/apps/examples/src/shared/ListItem.tsx b/apps/examples/src/shared/ListItem.tsx
@@ -5,13 +5,19 @@ interface Props {
   title: string;
   onPress: () => void;
   testID?: string;
+  disabled?: boolean;
 }
 
-export const ListItem = ({ title, onPress, testID }: Props): React.JSX.Element => {
+export const ListItem = ({
+  title,
+  onPress,
+  testID,
+  disabled,
+}: Props): React.JSX.Element => {
   return (
-    <TouchableOpacity onPress={onPress} testID={testID}>
+    <TouchableOpacity onPress={onPress} testID={testID} disabled={disabled}>
       <View style={styles.container}>
-        <Text style={styles.title}>{title}</Text>
+        <Text style={[styles.title, disabled && styles.disabled]}>{disabled && '(N/A) '}{title}</Text>
       </View>
     </TouchableOpacity>
   );
@@ -27,6 +33,9 @@ const styles = StyleSheet.create({
     borderColor: '#ccc',
     borderWidth: 1,
   },
+  disabled: {
+    color: 'gray',
+  },
   title: {
     color: 'black',
   },