related-ui-components 2.0.2 → 2.0.3

package/src/components/LockOverlay/LockOverlay.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import {
   View,
   Text,
@@ -7,75 +7,126 @@ import {
   TextStyle,
   TouchableOpacity,
   TouchableOpacityProps,
-} from 'react-native';
+  StyleProp, // Import StyleProp for better type safety
+} from "react-native";
 
-import { Ionicons } from '@expo/vector-icons';
+import { Ionicons } from "@expo/vector-icons"; // Assuming you have this installed
 
 interface LockOverlayProps extends TouchableOpacityProps {
   visible?: boolean;
-  containerStyle?: ViewStyle;
-  iconStyle?: ViewStyle;
-  textStyle?: TextStyle;
-  text?: string;
+  containerStyle?: StyleProp<ViewStyle>; // Style for the main TouchableOpacity overlay
+  contentContainerStyle?: StyleProp<ViewStyle>; // Style for the inner View wrapping icon and text
+  iconStyle?: StyleProp<TextStyle>; // Ionicons style prop is TextStyle
+  textStyle?: StyleProp<TextStyle>;
+  text?: string | null; // Text is now optional, null explicitly hides it
+  iconName?: string; // Allow customizing the icon
   iconSize?: number;
   iconColor?: string;
   overlayOpacity?: number;
-  contentVerticalAlign? : 'center' | 'top'
+  contentPosition?: "center" | "top-center" | "top-left" | "top-right";
+  contentPadding?: number; // Padding from edges for top-left/top-right/top-center
 }
 
 const LockOverlay: React.FC<LockOverlayProps> = ({
   visible = true,
   containerStyle,
+  contentContainerStyle,
   iconStyle,
   textStyle,
-  text = 'Unlock',
+  text = "Unlock", // Default text, but can be null or empty
+  iconName = "lock-closed",
   iconSize = 50,
-  iconColor = 'white',
+  iconColor = "white",
   overlayOpacity = 0.7,
-  contentVerticalAlign = "center",
+  contentPosition = "center",
+  contentPadding = 20, // Default padding for edge positions
   ...touchableProps
 }) => {
   if (!visible) return null;
 
+  const overlayStyles: StyleProp<ViewStyle> = [
+    styles.overlayBase,
+    { backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})` },
+  ];
+
+  // Apply positioning styles to the main overlay container
+  switch (contentPosition) {
+    case "top-center":
+      overlayStyles.push({
+        justifyContent: "flex-start",
+        alignItems: "center",
+        paddingTop: contentPadding,
+      });
+      break;
+    case "top-left":
+      overlayStyles.push({
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        paddingTop: contentPadding,
+        paddingLeft: contentPadding,
+      });
+      break;
+    case "top-right":
+      overlayStyles.push({
+        justifyContent: "flex-start",
+        alignItems: "flex-end",
+        paddingTop: contentPadding,
+        paddingRight: contentPadding,
+      });
+      break;
+    case "center":
+    default:
+      overlayStyles.push({
+        justifyContent: "center",
+        alignItems: "center",
+      });
+      break;
+  }
+
+  overlayStyles.push(containerStyle); // Apply user-provided containerStyle last
+
   return (
     <TouchableOpacity
-      style={[
-        styles.overlay,
-        { backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})` },
-        contentVerticalAlign == "top" && {justifyContent:"flex-start", paddingTop: 50},
-        containerStyle,
-      ]}
+      style={overlayStyles}
       activeOpacity={0.8}
       {...touchableProps}
     >
-      <Ionicons
-        name="lock-closed"
-        size={iconSize}
-        color={iconColor}
-        // style={iconStyle}
-      />
-      <Text style={[styles.text, { color: iconColor }, textStyle]}>
-        {text}
-      </Text>
+      <View style={[styles.contentContainerBase, contentContainerStyle]}>
+        <Ionicons
+          name={iconName as any} // Cast to any if Ionicons types are too strict for dynamic names
+          size={iconSize}
+          color={iconColor}
+          style={iconStyle}
+        />
+        {/* Conditionally render text if it's a non-empty string */}
+        {text && text.trim() !== "" && (
+          <Text style={[styles.textBase, { color: iconColor }, textStyle]}>
+            {text}
+          </Text>
+        )}
+      </View>
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
-  overlay: {
-    position: 'absolute',
+  overlayBase: {
+    position: "absolute",
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 999,
+    zIndex: 999, // Ensure it's on top
+  },
+  contentContainerBase: {
+    // This container ensures icon and text (if present) are aligned relative to each other
+    alignItems: "center", // Center text under the icon by default
   },
-  text: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    marginTop: 12,
+  textBase: {
+    fontSize: 18, // Adjusted default size slightly
+    fontWeight: "bold",
+    marginTop: 10, // Adjusted default margin
+    textAlign: "center",
   },
 });