related-ui-components 1.2.3 → 1.2.4

package/src/components/Filters/Filters.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
   View,
   Text,
@@ -8,6 +8,7 @@ import {
   ViewStyle,
   ImageRequireSource,
   I18nManager,
+  TouchableWithoutFeedback,
 } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
@@ -82,6 +83,9 @@ interface FiltersProps {
   snapPoints?: string[];
   handleIndicatorStyle?: ViewStyle;
   applyButtonText?: string;
+  overlayColor?: string;
+  onClose?: () => void;
+  visible?: boolean;
 }
 
 const Filters: React.FC<FiltersProps> = ({
@@ -134,15 +138,31 @@ const Filters: React.FC<FiltersProps> = ({
   applyButtonText = "Apply Filter",
   headerResetText = "Reset All",
   headerTitleText = "Filter",
+  overlayColor = "rgba(0, 0, 0, 0.5)",
+  onClose,
+  visible = true,
 }) => {
   const {theme, isRTL : rtl} = useTheme();
-  isRTL = rtl
+  isRTL = rtl || isRTL;
   const bottomSheetRef = useRef<BottomSheet>(null);
   const styles = createStyles(theme, isRTL);
   const checkboxColor = checkboxColorProp ?? theme.primary;
+  const [isVisible, setIsVisible] = useState(visible);
+
+  // Sync the internal isVisible state with the visible prop
+  useEffect(() => {
+    setIsVisible(visible);
+    if (visible && bottomSheetRef.current) {
+      bottomSheetRef.current.snapToIndex(0);
+    }
+  }, [visible]);
 
   const handleSheetChanges = useCallback((index: number) => {
     console.log("handleSheetChanges", index);
+    // If the sheet is closed (index -1), handle visibility
+    if (index === -1) {
+      setIsVisible(false);
+    }
   }, []);
 
   const [resetCounter, setResetCounter] = useState(0);
@@ -195,6 +215,7 @@ const Filters: React.FC<FiltersProps> = ({
       };
 
       onActionButtonPress(filterResult);
+      closeBottomSheet(); // Close the filter after applying
     }
   };
 
@@ -215,16 +236,42 @@ const Filters: React.FC<FiltersProps> = ({
     setResetCounter((prev) => prev + 1);
   };
 
+  const closeBottomSheet = useCallback(() => {
+    if (bottomSheetRef.current) {
+      bottomSheetRef.current.close();
+    }
+    setIsVisible(false);
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+
+  // If not visible, don't render anything
+  if (!isVisible) {
+    return null;
+  }
+
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
+    <GestureHandlerRootView style={styles.overlayContainer}>
+      {/* Semi-transparent overlay */}
+      <TouchableWithoutFeedback onPress={closeBottomSheet}>
+        <View style={[styles.overlay, { backgroundColor: overlayColor }]} />
+      </TouchableWithoutFeedback>
+      
       <BottomSheet
         ref={bottomSheetRef}
         index={bottomSheetIndex}
         handleComponent={() => null}
         onChange={handleSheetChanges}
         style={bottomSheetStyle}
-        backgroundStyle={{ backgroundColor: theme.surface }} // Use surface for BS background
+        backgroundStyle={{ backgroundColor: theme.surface }}
         handleIndicatorStyle={[styles.handleIndicator, handleIndicatorStyle]}
+        // snapPoints={snapPoints}
+        enablePanDownToClose={true}
+        // onClose={() => {
+        //   setIsVisible(false);
+        //   if (onClose) onClose();
+        // }}
       >
         <View style={[styles.container, containerStyle]}>
           <View style={[styles.header, headerStyle]}>
@@ -321,7 +368,7 @@ const Filters: React.FC<FiltersProps> = ({
                         brandActiveIcon || (
                           <Ionicons
                             name="checkmark-outline"
-                            color={theme.onPrimary} // Use primary for checkmark color
+                            color={theme.onPrimary}
                           />
                         )
                       }
@@ -349,17 +396,30 @@ const Filters: React.FC<FiltersProps> = ({
 
 const createStyles = (theme: ThemeType, isRTL: boolean) =>
   StyleSheet.create({
+    overlayContainer: {
+      flex: 1,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 1000,
+    },
+    overlay: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
     container: {
       flex: 1,
       paddingHorizontal: 25,
-      backgroundColor: theme.surface, // Use surface for container inside BS
+      backgroundColor: theme.surface,
     },
     handleIndicator: {
       width: 40,
       height: 4,
       backgroundColor: theme.border,
       alignSelf: "center",
-      marginTop: 8, // Add some margin if handle is visible
+      marginTop: 8,
       borderRadius: 2,
     },
     header: {
@@ -402,7 +462,7 @@ const createStyles = (theme: ThemeType, isRTL: boolean) =>
       fontSize: 15,
       color: theme.text,
       textAlign: isRTL ? "right" : "left",
-      marginLeft: isRTL ? 0 : 8, // Add spacing between checkbox and text
+      marginLeft: isRTL ? 0 : 8,
       marginRight: isRTL ? 8 : 0,
     },
     brandsGrid: {
@@ -419,10 +479,10 @@ const createStyles = (theme: ThemeType, isRTL: boolean) =>
       marginTop: 30,
     },
     applyButtonText: {
-      color: theme.onPrimary, // Use onPrimary for text on primary button
+      color: theme.onPrimary,
       fontSize: 16,
       fontWeight: "bold",
     },
   });
 
-export default Filters;
+export default Filters;

package/src/components/Filters/PointsRangeSelector.tsx

@@ -71,7 +71,7 @@ const PointsRangeSelector: React.FC<PointsRangeSelectorProps> = ({
   multiSliderProps = {},
 }) => {
   const {theme, isRTL: rtl} = useTheme();
-  isRTL = rtl;
+  isRTL = rtl || isRTL;
   const styles = createStyles(theme, isRTL);
 
   const [values, setValues] = useState([initialMin, initialMax]);
@@ -236,7 +236,7 @@ const PointsRangeSelector: React.FC<PointsRangeSelectorProps> = ({
           sliderLength={containerWidth} // Use measured width for slider length
           customMarker={CustomMarker}
           // For RTL support with MultiSlider
-          enabledOne={true}
+          enabledsOne={true}
           enabledTwo={true}
           isRTL={isRTL}
           {...multiSliderProps}
@@ -268,7 +268,7 @@ const createStyles = (theme: ThemeType, isRTL: boolean) =>
       alignItems: "center",
       width: "100%",
       // Apply any RTL specific styling if needed
-      transform: isRTL ? [{ scaleX: -1 }] : [],
+      // transform: isRTL ? [{ scaleX: -1 }] : [], 
     },
     sliderContainerStyle: {
       height: 30,