@onairos/react-native 3.1.15 → 3.1.17

package/src/components/PlatformToggle.tsx

@@ -1,226 +1,226 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  Image,
-  StyleSheet,
-  Switch,
-  Platform,
-} from 'react-native';
-import { COLORS, SPACING } from '../theme';
-
-interface PlatformToggleProps {
-  platform: {
-    id: string;
-    name: string;
-    icon: any; // require() image
-    description: string;
-  };
-  isEnabled: boolean;
-  onToggle: (platformId: string, enabled: boolean) => void;
-  compact?: boolean;
-  isLast?: boolean;
-  fullWidth?: boolean;
-  customIconSize?: number;
-  onLongPress?: () => void;
-  onPressOut?: () => void;
-}
-
-const PlatformToggle: React.FC<PlatformToggleProps> = ({
-  platform,
-  isEnabled,
-  onToggle,
-  compact = false,
-  isLast = false,
-  fullWidth = false,
-  customIconSize,
-  onLongPress,
-  onPressOut,
-}) => {
-  const handleToggle = () => {
-    onToggle(platform.id, !isEnabled);
-  };
-
-  const containerStyle = fullWidth ? styles.fullWidthContainer : 
-                        compact ? styles.compactContainer : styles.container;
-
-  return (
-    <TouchableOpacity
-      style={[
-        containerStyle,
-        !isLast && compact && styles.borderBottom,
-      ]}
-      onLongPress={onLongPress}
-      onPressOut={onPressOut}
-      activeOpacity={onLongPress ? 0.7 : 1.0}
-      disabled={!onLongPress}
-    >
-      {/* Top row: Icon + Name + Toggle */}
-      <View style={styles.topRow}>
-        <View style={styles.leftContent}>
-          <Image 
-            source={platform.icon} 
-            style={customIconSize ? 
-              { 
-                width: customIconSize, 
-                height: customIconSize, 
-                marginRight: 12 - (customIconSize - 28) // Reduce margin more to align text properly
-              } :
-              (fullWidth ? styles.compactIcon : (compact ? styles.compactIcon : styles.icon))
-            } 
-            resizeMode="contain" 
-          />
-          <View style={styles.textContent}>
-            <Text style={fullWidth ? styles.compactPlatformName : (compact ? styles.compactPlatformName : styles.platformName)}>{platform.name}</Text>
-          </View>
-        </View>
-        
-        <Switch
-          value={isEnabled}
-          onValueChange={handleToggle}
-          trackColor={{ 
-            false: '#E5E5E5', 
-            true: '#4CD964' // Green when enabled
-          }}
-          thumbColor={Platform.OS === 'ios' ? undefined : (isEnabled ? '#FFFFFF' : '#FFFFFF')}
-          ios_backgroundColor="#E5E5E5"
-          style={compact ? styles.compactSwitch : undefined}
-        />
-      </View>
-      
-      {/* Bottom row: Description in rounded box */}
-      {fullWidth && (
-        <View style={styles.descriptionBox}>
-          <Text style={styles.fullWidthDescription}>{platform.description}</Text>
-        </View>
-      )}
-      
-      {/* Show description inline for non-fullWidth modes */}
-      {!fullWidth && (
-        <Text style={compact ? styles.compactDescription : styles.description}>{platform.description}</Text>
-      )}
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-    backgroundColor: COLORS.surface,
-    borderRadius: 12,
-    marginBottom: 12,
-    borderWidth: 1,
-    borderColor: '#E5E5E5',
-  },
-  
-  compactContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 16,
-    paddingHorizontal: 16,
-    backgroundColor: COLORS.surface,
-  },
-  
-  fullWidthContainer: {
-    flexDirection: 'column', // Changed to column to stack rows
-    paddingVertical: 8,   // Reduced from 16 to bring platforms closer
-    paddingHorizontal: 2,  // Much closer to edges
-    backgroundColor: COLORS.surface,
-    marginBottom: 4,      // Reduced from 12 to bring platforms closer
-    marginHorizontal: 0, // Ensure it spans full width
-  },
-  
-  topRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 4, // Reduced space between icon row and description box
-  },
-  
-  descriptionBox: {
-    backgroundColor: '#F5F5F5',
-    borderRadius: 8,
-    paddingVertical: 8,   // Reduced from 10 to make description box smaller
-    paddingHorizontal: 4,  // Much closer to edges
-    marginTop: 2,         // Reduced from 4 to bring closer to icon row
-  },
-  
-  borderBottom: {
-    borderBottomWidth: 1,
-    borderBottomColor: '#E5E5E5',
-  },
-  
-  leftContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-  },
-  
-  icon: {
-    width: 32,
-    height: 32,
-    marginRight: 12,
-  },
-  
-  compactIcon: {
-    width: 28,
-    height: 28,
-    marginRight: 12,
-  },
-  
-  textContent: {
-    flex: 1,
-  },
-  
-  platformName: {
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '600',
-    color: COLORS.grey800,
-    marginBottom: 2,
-  },
-  
-  compactPlatformName: {
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '600',
-    color: COLORS.grey800,
-    marginBottom: 2,
-  },
-  
-  description: {
-    fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    color: COLORS.grey600,
-    lineHeight: 20,
-  },
-  
-  compactDescription: {
-    fontSize: 12,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    color: COLORS.grey600,
-    lineHeight: 16,
-  },
-  
-  fullWidthDescription: {
-    fontSize: 13,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    color: COLORS.grey600,
-    lineHeight: 18,
-  },
-  
-  compactSwitch: {
-    transform: [{ scaleX: 0.9 }, { scaleY: 0.9 }],
-  },
-});
-
-export default PlatformToggle;
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+  Switch,
+  Platform,
+} from 'react-native';
+import { COLORS, SPACING } from '../theme';
+
+interface PlatformToggleProps {
+  platform: {
+    id: string;
+    name: string;
+    icon: any; // require() image
+    description: string;
+  };
+  isEnabled: boolean;
+  onToggle: (platformId: string, enabled: boolean) => void;
+  compact?: boolean;
+  isLast?: boolean;
+  fullWidth?: boolean;
+  customIconSize?: number;
+  onLongPress?: () => void;
+  onPressOut?: () => void;
+}
+
+const PlatformToggle: React.FC<PlatformToggleProps> = ({
+  platform,
+  isEnabled,
+  onToggle,
+  compact = false,
+  isLast = false,
+  fullWidth = false,
+  customIconSize,
+  onLongPress,
+  onPressOut,
+}) => {
+  const handleToggle = () => {
+    onToggle(platform.id, !isEnabled);
+  };
+
+  const containerStyle = fullWidth ? styles.fullWidthContainer : 
+                        compact ? styles.compactContainer : styles.container;
+
+  return (
+    <TouchableOpacity
+      style={[
+        containerStyle,
+        !isLast && compact && styles.borderBottom,
+      ]}
+      onLongPress={onLongPress}
+      onPressOut={onPressOut}
+      activeOpacity={onLongPress ? 0.7 : 1.0}
+      disabled={!onLongPress}
+    >
+      {/* Top row: Icon + Name + Toggle */}
+      <View style={styles.topRow}>
+        <View style={styles.leftContent}>
+          <Image 
+            source={platform.icon} 
+            style={customIconSize ? 
+              { 
+                width: customIconSize, 
+                height: customIconSize, 
+                marginRight: 12 - (customIconSize - 28) // Reduce margin more to align text properly
+              } :
+              (fullWidth ? styles.compactIcon : (compact ? styles.compactIcon : styles.icon))
+            } 
+            resizeMode="contain" 
+          />
+          <View style={styles.textContent}>
+            <Text style={fullWidth ? styles.compactPlatformName : (compact ? styles.compactPlatformName : styles.platformName)}>{platform.name}</Text>
+          </View>
+        </View>
+        
+        <Switch
+          value={isEnabled}
+          onValueChange={handleToggle}
+          trackColor={{ 
+            false: '#E5E5E5', 
+            true: '#4CD964' // Green when enabled
+          }}
+          thumbColor={Platform.OS === 'ios' ? undefined : (isEnabled ? '#FFFFFF' : '#FFFFFF')}
+          ios_backgroundColor="#E5E5E5"
+          style={compact ? styles.compactSwitch : undefined}
+        />
+      </View>
+      
+      {/* Bottom row: Description in rounded box */}
+      {fullWidth && (
+        <View style={styles.descriptionBox}>
+          <Text style={styles.fullWidthDescription}>{platform.description}</Text>
+        </View>
+      )}
+      
+      {/* Show description inline for non-fullWidth modes */}
+      {!fullWidth && (
+        <Text style={compact ? styles.compactDescription : styles.description}>{platform.description}</Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    backgroundColor: COLORS.surface,
+    borderRadius: 12,
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: '#E5E5E5',
+  },
+  
+  compactContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    backgroundColor: COLORS.surface,
+  },
+  
+  fullWidthContainer: {
+    flexDirection: 'column', // Changed to column to stack rows
+    paddingVertical: 8,   // Reduced from 16 to bring platforms closer
+    paddingHorizontal: 2,  // Much closer to edges
+    backgroundColor: COLORS.surface,
+    marginBottom: 4,      // Reduced from 12 to bring platforms closer
+    marginHorizontal: 0, // Ensure it spans full width
+  },
+  
+  topRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 4, // Reduced space between icon row and description box
+  },
+  
+  descriptionBox: {
+    backgroundColor: '#F5F5F5',
+    borderRadius: 8,
+    paddingVertical: 8,   // Reduced from 10 to make description box smaller
+    paddingHorizontal: 4,  // Much closer to edges
+    marginTop: 2,         // Reduced from 4 to bring closer to icon row
+  },
+  
+  borderBottom: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E5E5',
+  },
+  
+  leftContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  
+  icon: {
+    width: 32,
+    height: 32,
+    marginRight: 12,
+  },
+  
+  compactIcon: {
+    width: 28,
+    height: 28,
+    marginRight: 12,
+  },
+  
+  textContent: {
+    flex: 1,
+  },
+  
+  platformName: {
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    color: COLORS.grey800,
+    marginBottom: 2,
+  },
+  
+  compactPlatformName: {
+    fontSize: 16,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    color: COLORS.grey800,
+    marginBottom: 2,
+  },
+  
+  description: {
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    color: COLORS.grey600,
+    lineHeight: 20,
+  },
+  
+  compactDescription: {
+    fontSize: 12,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    color: COLORS.grey600,
+    lineHeight: 16,
+  },
+  
+  fullWidthDescription: {
+    fontSize: 13,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    color: COLORS.grey600,
+    lineHeight: 18,
+  },
+  
+  compactSwitch: {
+    transform: [{ scaleX: 0.9 }, { scaleY: 0.9 }],
+  },
+});
+
+export default PlatformToggle;