related-ui-components 1.1.6

package/src/components/Filters/Filters.tsx

@@ -0,0 +1,427 @@
+import React, { useCallback, useRef, useState } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  TextStyle,
+  ViewStyle,
+  ImageRequireSource,
+  I18nManager,
+} from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet";
+import PointsRangeSelector from "./PointsRangeSelector";
+import { BrandIcon } from "../BrandIcon";
+import { Ionicons } from "@expo/vector-icons";
+import Checkbox from "expo-checkbox";
+import { useTheme, ThemeType } from "../../theme"; // Import ThemeType
+
+type SortOption = {
+  name: string;
+  value: string;
+  id: number;
+};
+type Brand = {
+  id: string;
+  name: string;
+  logo: ImageRequireSource;
+};
+export type FilterResult = {
+  sort: SortOption[];
+  pointsRange: { min: number; max: number };
+  selectedBrands: Brand[];
+};
+interface FiltersProps {
+  isRTL?: boolean;
+  sortOptions?: SortOption[];
+  sortSectionTitle?: string;
+  sectionTitleStyle?: TextStyle;
+  sortSectionStyle?: ViewStyle;
+  rangeMinLimit?: number;
+  rangeMaxLimit?: number;
+  rangeInitialMin?: number;
+  rangeInitialMax?: number;
+  showPointsRange?: boolean;
+  pointsRangeSectionTitle?: string;
+  pointsRangeContainerStyle?: ViewStyle;
+  pointsRangeInputsContainerStyle?: ViewStyle;
+  pointsRangeCustomInputContainerStyle?: ViewStyle;
+  pointsRangeCustomInputFieldStyle?: ViewStyle;
+  pointsRangeSliderContainerStyle?: ViewStyle;
+  pointsRangeMultiSliderContainerStyle?: ViewStyle;
+  pointsRangeTrackStyle?: ViewStyle;
+  pointsRangeSelectedTrackStyle?: ViewStyle;
+  pointsRangeUnselectedTrackStyle?: ViewStyle;
+  pointsRangeMarkerStyle?: ViewStyle;
+  pointsRangeMarkerEnabledStyle?: ViewStyle;
+  pointsRangeMarkerDisabledStyle?: ViewStyle;
+  pointsRangeMarkerDotStyle?: ViewStyle;
+  pointsRangeInputProps?: any;
+  pointsRangeMultiSliderProps?: any;
+  brands?: Brand[];
+  brandContainerStyle?: ViewStyle;
+  brandActiveIcon?: React.ReactNode;
+  brandActiveIconStyle?: ViewStyle;
+  brandSectionTile?: string;
+  onActionButtonPress?: (result: FilterResult) => void;
+  containerStyle?: ViewStyle;
+  headerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  resetTextStyle?: TextStyle;
+  sectionStyle?: ViewStyle;
+  optionRowStyle?: ViewStyle;
+  optionTextStyle?: TextStyle;
+  checkboxColor?: string;
+  applyButtonStyle?: ViewStyle;
+  applyButtonTextStyle?: TextStyle;
+  bottomSheetStyle?: ViewStyle;
+  headerTitleText?: string;
+  headerResetText?: string;
+  bottomSheetIndex?: number;
+  snapPoints?: string[];
+  handleIndicatorStyle?: ViewStyle;
+  applyButtonText?: string;
+}
+
+const Filters: React.FC<FiltersProps> = ({
+  isRTL = I18nManager.isRTL,
+  sortOptions = [],
+  sortSectionTitle = "Sort",
+  sectionTitleStyle,
+  sortSectionStyle,
+  onActionButtonPress,
+  rangeInitialMax = 1000,
+  rangeInitialMin = 0,
+  rangeMaxLimit = 1000,
+  rangeMinLimit = 0,
+  pointsRangeContainerStyle,
+  pointsRangeInputsContainerStyle,
+  pointsRangeCustomInputContainerStyle,
+  pointsRangeCustomInputFieldStyle,
+  pointsRangeSliderContainerStyle,
+  pointsRangeMultiSliderContainerStyle,
+  pointsRangeTrackStyle,
+  pointsRangeSelectedTrackStyle,
+  pointsRangeUnselectedTrackStyle,
+  pointsRangeMarkerStyle,
+  pointsRangeMarkerEnabledStyle,
+  pointsRangeMarkerDisabledStyle,
+  pointsRangeMarkerDotStyle,
+  pointsRangeInputProps,
+  pointsRangeMultiSliderProps,
+  containerStyle,
+  headerStyle,
+  titleStyle,
+  resetTextStyle,
+  sectionStyle,
+  optionRowStyle,
+  optionTextStyle,
+  checkboxColor: checkboxColorProp,
+  applyButtonStyle,
+  applyButtonTextStyle,
+  bottomSheetStyle,
+  bottomSheetIndex = 0,
+  snapPoints = ["50%", "90%"],
+  handleIndicatorStyle,
+  brands = [],
+  brandContainerStyle,
+  brandActiveIcon,
+  showPointsRange = true,
+  pointsRangeSectionTitle = "Points range",
+  brandActiveIconStyle,
+  brandSectionTile = "Brands",
+  applyButtonText = "Apply Filter",
+  headerResetText = "Reset All",
+  headerTitleText = "Filter",
+}) => {
+  const theme = useTheme();
+  const bottomSheetRef = useRef<BottomSheet>(null);
+  const styles = createStyles(theme, isRTL);
+  const checkboxColor = checkboxColorProp ?? theme.primary;
+
+  const handleSheetChanges = useCallback((index: number) => {
+    console.log("handleSheetChanges", index);
+  }, []);
+
+  const [resetCounter, setResetCounter] = useState(0);
+
+  const [checkedItems, setCheckedItems] = useState<Record<string, boolean>>(
+    sortOptions.reduce((acc, option) => {
+      acc[option.id] = false;
+      return acc;
+    }, {} as Record<string, boolean>)
+  );
+  const [selectedBrands, setSelectedBrands] = useState<Record<string, boolean>>(
+    brands.reduce((acc, option) => {
+      acc[option.id] = false;
+      return acc;
+    }, {} as Record<string, boolean>)
+  );
+  const [pointsRange, setPointsRange] = useState<{ min: number; max: number }>({
+    min: rangeInitialMin,
+    max: rangeInitialMax,
+  });
+
+  const handleCheckboxChange = (id: string) => {
+    setCheckedItems((prevState) => ({
+      ...prevState,
+      [id]: !prevState[id],
+    }));
+  };
+
+  const handleBrandSelect = (id: string) => {
+    setSelectedBrands((prevState) => ({
+      ...prevState,
+      [id]: !prevState[id],
+    }));
+  };
+
+  const handleApplyFilter = () => {
+    if (onActionButtonPress) {
+      const selectedSortOptions = sortOptions.filter(
+        (option) => checkedItems[option.id]
+      );
+
+      const selectedBrandsList = brands.filter(
+        (brand) => selectedBrands[brand.id]
+      );
+
+      const filterResult: FilterResult = {
+        sort: selectedSortOptions,
+        pointsRange: pointsRange,
+        selectedBrands: selectedBrandsList,
+      };
+
+      onActionButtonPress(filterResult);
+    }
+  };
+
+  const handleResetAll = () => {
+    const resetState = sortOptions.reduce((acc, option) => {
+      acc[option.id] = false;
+      return acc;
+    }, {} as Record<string, boolean>);
+
+    const resetBrands = brands.reduce((acc, option) => {
+      acc[option.id] = false;
+      return acc;
+    }, {} as Record<string, boolean>);
+
+    setCheckedItems(resetState);
+    setSelectedBrands(resetBrands);
+    setPointsRange({ min: rangeInitialMin, max: rangeInitialMax });
+    setResetCounter((prev) => prev + 1);
+  };
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <BottomSheet
+        ref={bottomSheetRef}
+        index={bottomSheetIndex}
+        handleComponent={() => null}
+        onChange={handleSheetChanges}
+        style={bottomSheetStyle}
+        backgroundStyle={{ backgroundColor: theme.surface }} // Use surface for BS background
+        handleIndicatorStyle={[styles.handleIndicator, handleIndicatorStyle]}
+      >
+        <View style={[styles.container, containerStyle]}>
+          <View style={[styles.header, headerStyle]}>
+            <Text style={[styles.title, titleStyle]}>{headerTitleText}</Text>
+            <TouchableOpacity onPress={handleResetAll}>
+              <Text style={[styles.resetText, resetTextStyle]}>
+                {headerResetText}
+              </Text>
+            </TouchableOpacity>
+          </View>
+          <BottomSheetView style={{ paddingBottom: 75 }}>
+            {sortOptions && sortOptions.length > 0 && (
+              <View style={[styles.section, sectionStyle, sortSectionStyle]}>
+                <Text style={[styles.sectionTitle, sectionTitleStyle]}>
+                  {sortSectionTitle}
+                </Text>
+                {sortOptions.map((option) => (
+                  <View
+                    style={[styles.optionRow, optionRowStyle]}
+                    key={option.id}
+                  >
+                    <Checkbox
+                      value={checkedItems[option.id]}
+                      color={checkboxColor}
+                      hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
+                      onValueChange={() =>
+                        handleCheckboxChange(option.id.toString())
+                      }
+                    />
+                    <Text style={[styles.optionText, optionTextStyle]}>
+                      {option.name}
+                    </Text>
+                  </View>
+                ))}
+              </View>
+            )}
+
+            {showPointsRange && (
+              <View style={[styles.section, sectionStyle]}>
+                <Text style={[styles.sectionTitle, sectionTitleStyle]}>
+                  {pointsRangeSectionTitle}
+                </Text>
+                <PointsRangeSelector
+                  resetKey={resetCounter}
+                  initialMax={rangeInitialMax}
+                  initialMin={rangeInitialMin}
+                  minLimit={rangeMinLimit}
+                  maxLimit={rangeMaxLimit}
+                  isRTL={isRTL}
+                  containerStyle={pointsRangeContainerStyle}
+                  inputsContainerStyle={pointsRangeInputsContainerStyle}
+                  customInputContainerStyle={
+                    pointsRangeCustomInputContainerStyle
+                  }
+                  customInputFieldStyle={pointsRangeCustomInputFieldStyle}
+                  sliderContainerStyle={pointsRangeSliderContainerStyle}
+                  multiSliderContainerStyle={
+                    pointsRangeMultiSliderContainerStyle
+                  }
+                  trackStyle={pointsRangeTrackStyle}
+                  selectedTrackStyle={pointsRangeSelectedTrackStyle}
+                  unselectedTrackStyle={pointsRangeUnselectedTrackStyle}
+                  markerStyle={pointsRangeMarkerStyle}
+                  markerEnabledStyle={pointsRangeMarkerEnabledStyle}
+                  markerDisabledStyle={pointsRangeMarkerDisabledStyle}
+                  markerDotStyle={pointsRangeMarkerDotStyle}
+                  inputProps={pointsRangeInputProps}
+                  multiSliderProps={pointsRangeMultiSliderProps}
+                  onChange={(min: number, max: number) => {
+                    setPointsRange({ min, max });
+                  }}
+                />
+              </View>
+            )}
+
+            {brands && brands.length > 0 && (
+              <View style={[styles.section, sectionStyle]}>
+                <Text style={[styles.sectionTitle, sectionTitleStyle]}>
+                  {brandSectionTile}
+                </Text>
+                <View style={[styles.brandsGrid, brandContainerStyle]}>
+                  {brands.map((brand) => (
+                    <BrandIcon
+                      key={brand.id}
+                      size={50}
+                      selected={selectedBrands[brand.id]}
+                      onPress={() => handleBrandSelect(brand.id.toString())}
+                      brand={{
+                        id: brand.id,
+                        name: brand.name,
+                        logo: brand.logo,
+                      }}
+                      selectionIndicatorIcon={
+                        brandActiveIcon || (
+                          <Ionicons
+                            name="checkmark-outline"
+                            color={theme.onPrimary} // Use primary for checkmark color
+                          />
+                        )
+                      }
+                      selectionIndicatorStyle={brandActiveIconStyle}
+                    />
+                  ))}
+                </View>
+              </View>
+            )}
+
+            <TouchableOpacity
+              style={[styles.applyButton, applyButtonStyle]}
+              onPress={handleApplyFilter}
+            >
+              <Text style={[styles.applyButtonText, applyButtonTextStyle]}>
+                {applyButtonText}
+              </Text>
+            </TouchableOpacity>
+          </BottomSheetView>
+        </View>
+      </BottomSheet>
+    </GestureHandlerRootView>
+  );
+};
+
+const createStyles = (theme: ThemeType, isRTL: boolean) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      paddingHorizontal: 25,
+      backgroundColor: theme.surface, // Use surface for container inside BS
+    },
+    handleIndicator: {
+      width: 40,
+      height: 4,
+      backgroundColor: theme.border,
+      alignSelf: "center",
+      marginTop: 8, // Add some margin if handle is visible
+      borderRadius: 2,
+    },
+    header: {
+      flexDirection: isRTL ? "row-reverse" : "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingVertical: 15,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.border,
+    },
+    title: {
+      fontSize: 18,
+      fontWeight: "bold",
+      color: theme.text,
+      textAlign: isRTL ? "right" : "left",
+    },
+    resetText: {
+      fontSize: 14,
+      color: theme.primary,
+      fontWeight: "500",
+      textAlign: isRTL ? "left" : "right",
+    },
+    section: {
+      marginTop: 20,
+    },
+    sectionTitle: {
+      fontSize: 16,
+      fontWeight: "500",
+      color: theme.helper,
+      marginBottom: 15,
+      textAlign: isRTL ? "right" : "left",
+    },
+    optionRow: {
+      flexDirection: isRTL ? "row-reverse" : "row",
+      alignItems: "center",
+      marginBottom: 15,
+      gap: 5,
+    },
+    optionText: {
+      fontSize: 15,
+      color: theme.text,
+      textAlign: isRTL ? "right" : "left",
+      marginLeft: isRTL ? 0 : 8, // Add spacing between checkbox and text
+      marginRight: isRTL ? 8 : 0,
+    },
+    brandsGrid: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: 10,
+      justifyContent: isRTL ? "flex-end" : "flex-start",
+    },
+    applyButton: {
+      backgroundColor: theme.primary,
+      borderRadius: 30,
+      paddingVertical: 15,
+      alignItems: "center",
+      marginTop: 30,
+    },
+    applyButtonText: {
+      color: theme.onPrimary, // Use onPrimary for text on primary button
+      fontSize: 16,
+      fontWeight: "bold",
+    },
+  });
+
+export default Filters;