related-ui-components 1.1.6

package/src/components/Filters/PointsRangeSelector.tsx

@@ -0,0 +1,319 @@
+import React, { useState, useCallback, useEffect } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Dimensions,
+  LayoutChangeEvent,
+  ViewStyle,
+  TextStyle,
+  I18nManager,
+} from "react-native";
+import MultiSlider from "@ptomasroos/react-native-multi-slider";
+import CustomInput from "../Input/Input";
+import { ThemeType, useTheme } from "../../theme";
+
+// Get initial screen width (we'll refine this with onLayout)
+const { width: SCREEN_WIDTH } = Dimensions.get("window");
+const HORIZONTAL_PADDING = 40; // Adjust based on your container's padding
+
+interface PointsRangeSelectorProps {
+  minLimit?: number;
+  maxLimit?: number;
+  initialMin?: number;
+  initialMax?: number;
+  resetKey?: number;
+  isRTL?: boolean;
+  onChange?: (min: number, max: number) => void;
+
+  // Style props
+  containerStyle?: ViewStyle;
+  inputsContainerStyle?: ViewStyle;
+  customInputContainerStyle?: ViewStyle;
+  customInputFieldStyle?: ViewStyle;
+  sliderContainerStyle?: ViewStyle;
+  multiSliderContainerStyle?: ViewStyle;
+  trackStyle?: ViewStyle;
+  selectedTrackStyle?: ViewStyle;
+  unselectedTrackStyle?: ViewStyle;
+  markerStyle?: ViewStyle;
+  markerEnabledStyle?: ViewStyle;
+  markerDisabledStyle?: ViewStyle;
+  markerDotStyle?: ViewStyle;
+  inputProps?: any;
+  multiSliderProps?: any;
+}
+
+const PointsRangeSelector: React.FC<PointsRangeSelectorProps> = ({
+  minLimit = 0,
+  maxLimit = 1000,
+  initialMin = 50,
+  initialMax = 500,
+  resetKey,
+  isRTL = I18nManager.isRTL,
+  onChange,
+
+  // Style props
+  containerStyle,
+  inputsContainerStyle,
+  customInputContainerStyle,
+  customInputFieldStyle,
+  sliderContainerStyle,
+  multiSliderContainerStyle,
+  trackStyle,
+  selectedTrackStyle,
+  unselectedTrackStyle,
+  markerStyle,
+  markerEnabledStyle,
+  markerDisabledStyle,
+  markerDotStyle,
+  inputProps = {},
+  multiSliderProps = {},
+}) => {
+  const theme = useTheme();
+  const styles = createStyles(theme, isRTL);
+
+  const [values, setValues] = useState([initialMin, initialMax]);
+  const [minInputValue, setMinInputValue] = useState(initialMin.toString());
+  const [maxInputValue, setMaxInputValue] = useState(initialMax.toString());
+
+  // Track container width for responsive sizing
+  const [containerWidth, setContainerWidth] = useState(
+    SCREEN_WIDTH - HORIZONTAL_PADDING
+  );
+
+  // Handle container layout to get precise width
+  const onContainerLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setContainerWidth(width);
+  }, []);
+
+  useEffect(() => {
+    setValues([initialMin, initialMax]);
+    setMinInputValue(initialMin.toString());
+    setMaxInputValue(initialMax.toString());
+
+    if (onChange) {
+      onChange(initialMin, initialMax);
+    }
+  }, [resetKey, initialMin, initialMax]);
+
+  const handleValuesChange = (newValues: number[]) => {
+    setValues(newValues);
+    setMinInputValue(newValues[0].toString());
+    setMaxInputValue(newValues[1].toString());
+
+    if (onChange) {
+      onChange(newValues[0], newValues[1]);
+    }
+  };
+
+  const handleMinInputChange = (text: string) => {
+    setMinInputValue(text);
+
+    if (text && !isNaN(Number(text))) {
+      const newValue = Number(text);
+
+      if (newValue < minLimit || newValue >= values[1]) {
+        return;
+      }
+
+      const newValues = [newValue, values[1]];
+      setValues(newValues);
+      if (onChange) {
+        onChange(newValues[0], newValues[1]);
+      }
+    }
+  };
+
+  const handleMaxInputChange = (text: string) => {
+    setMaxInputValue(text);
+
+    if (text && !isNaN(Number(text))) {
+      const newValue = Number(text);
+
+      if (newValue > maxLimit || newValue <= values[0]) {
+        return;
+      }
+
+      const newValues = [values[0], newValue];
+      setValues(newValues);
+      if (onChange) {
+        onChange(newValues[0], newValues[1]);
+      }
+    }
+  };
+
+  // Custom marker component
+  const CustomMarker = ({ currentValue, enabled }: any) => (
+    <View
+      style={[
+        styles.marker,
+        enabled ? styles.markerEnabled : styles.markerDisabled,
+        markerStyle,
+        enabled ? markerEnabledStyle : markerDisabledStyle,
+      ]}
+      hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
+    >
+      {enabled && <View style={[styles.markerDot, markerDotStyle]} />}
+    </View>
+  );
+
+  // Prepare inputs in the correct order based on RTL setting
+  const renderInputs = () => {
+    const minInput = (
+      <CustomInput
+        value={minInputValue}
+        onChangeText={handleMinInputChange}
+        keyboardType="numeric"
+        placeholder="Min"
+        containerStyle={[
+          styles.customInputContainer,
+          customInputContainerStyle,
+        ]}
+        inputContainerStyle={[styles.customInputField, customInputFieldStyle]}
+        textAlign={isRTL ? "right" : "left"}
+        {...inputProps}
+      />
+    );
+
+    const maxInput = (
+      <CustomInput
+        value={maxInputValue}
+        onChangeText={handleMaxInputChange}
+        keyboardType="numeric"
+        placeholder="Max"
+        containerStyle={[
+          styles.customInputContainer,
+          customInputContainerStyle,
+        ]}
+        inputContainerStyle={[styles.customInputField, customInputFieldStyle]}
+        textAlign={isRTL ? "right" : "left"}
+        {...inputProps}
+      />
+    );
+
+    // If RTL, we swap the order of the inputs
+    return isRTL ? (
+      <>
+        {maxInput}
+        {minInput}
+      </>
+    ) : (
+      <>
+        {minInput}
+        {maxInput}
+      </>
+    );
+  };
+
+  return (
+    <View
+      style={[styles.container, containerStyle]}
+      onLayout={onContainerLayout}
+    >
+      <View style={[styles.inputsContainer, inputsContainerStyle]}>
+        {renderInputs()}
+      </View>
+
+      <View style={[styles.sliderContainer, sliderContainerStyle]}>
+        <MultiSlider
+          values={values}
+          min={minLimit}
+          max={maxLimit}
+          step={10}
+          allowOverlap={false}
+          snapped
+          onValuesChange={handleValuesChange}
+          selectedStyle={[styles.selectedTrack, selectedTrackStyle]}
+          unselectedStyle={[styles.unselectedTrack, unselectedTrackStyle]}
+          containerStyle={[
+            styles.sliderContainerStyle,
+            multiSliderContainerStyle,
+          ]}
+          trackStyle={[styles.track, trackStyle]}
+          sliderLength={containerWidth} // Use measured width for slider length
+          customMarker={CustomMarker}
+          // For RTL support with MultiSlider
+          enabledOne={true}
+          enabledTwo={true}
+          isRTL={isRTL}
+          {...multiSliderProps}
+        />
+      </View>
+    </View>
+  );
+};
+
+const createStyles = (theme: ThemeType, isRTL: boolean) =>
+  StyleSheet.create({
+    container: {
+      // Default container styling
+    },
+    inputsContainer: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      marginBottom: 20,
+    },
+    customInputContainer: {
+      width: "48%",
+    },
+    customInputField: {
+      minHeight: 40,
+      textAlign: isRTL ? "right" : "left",
+    },
+    sliderContainer: {
+      marginVertical: 10,
+      alignItems: "center",
+      width: "100%",
+      // Apply any RTL specific styling if needed
+      transform: isRTL ? [{ scaleX: -1 }] : [],
+    },
+    sliderContainerStyle: {
+      height: 30,
+      width: "100%",
+    },
+    track: {
+      height: 4,
+      borderRadius: 2,
+    },
+    selectedTrack: {
+      backgroundColor: theme.primary,
+    },
+    unselectedTrack: {
+      backgroundColor: theme.border,
+    },
+    marker: {
+      width: 20,
+      height: 20,
+      borderRadius: 12,
+      backgroundColor: theme.surface,
+      borderWidth: 2,
+      shadowColor: "#000",
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 2.84,
+      elevation: 3,
+      alignItems: "center",
+      justifyContent: "center",
+      // Flip the marker back when parent is flipped for RTL
+      transform: isRTL ? [{ scaleX: -1 }] : [],
+    },
+    markerEnabled: {
+      borderColor: theme.primary,
+    },
+    markerDisabled: {
+      borderColor: theme.disabled,
+    },
+    markerDot: {
+      width: 18,
+      height: 18,
+      borderRadius: 12,
+      backgroundColor: theme.primary,
+    },
+  });
+
+export default PointsRangeSelector;

package/src/components/Filters/README.md

@@ -0,0 +1,212 @@
+# Filters Component
+
+A flexible, customizable bottom sheet filter component for React Native applications with support for sorting options, points range selection, brand filtering, and extensive styling options.
+
+![Filters Example](../../assets/components/Filters.png)
+
+## Basic Usage
+
+```jsx
+import React from 'react';
+import { View } from 'react-native';
+import { Filters } from '@your-org/component-library';
+
+const ExampleScreen = () => {
+  const sortOptions = [
+    { id: 1, name: 'Price: Low to High', value: 'price_asc' },
+    { id: 2, name: 'Price: High to Low', value: 'price_desc' },
+  ];
+  
+  const brands = [
+    { id: '1', name: 'Brand A', logo: require('../assets/brandA.png') },
+    { id: '2', name: 'Brand B', logo: require('../assets/brandB.png') },
+  ];
+  
+  const handleFilterApply = (result) => {
+    console.log('Applied filters:', result);
+  };
+  
+  return (
+    <View style={{ flex: 1 }}>
+      <Filters 
+        sortOptions={sortOptions}
+        brands={brands}
+        onActionButtonPress={handleFilterApply}
+      />
+    </View>
+  );
+};
+
+export default ExampleScreen;
+```
+
+## Props
+
+The `Filters` component provides extensive customization options through its props.
+
+### Core Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `onActionButtonPress` | `(result: FilterResult) => void` | ❌ | - | Function called when Apply Filter button is pressed |
+| `sortOptions` | `SortOption[]` | ❌ | `[]` | Array of sorting options to display |
+| `brands` | `Brand[]` | ❌ | `[]` | Array of brand options to display |
+| `isRTL` | `boolean` | ❌ | `I18nManager.isRTL` | Whether to display in right-to-left mode |
+
+### Layout & Sections Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `sortSectionTitle` | `string` | ❌ | `"Sort"` | Title for the sorting section |
+| `pointsRangeSectionTitle` | `string` | ❌ | `"Points range"` | Title for the points range section |
+| `brandSectionTitle` | `string` | ❌ | `"Brands"` | Title for the brands section |
+| `showPointsRange` | `boolean` | ❌ | `true` | Whether to display the points range section |
+| `headerTitleText` | `string` | ❌ | `"Filter"` | Text for the header title |
+| `headerResetText` | `string` | ❌ | `"Reset All"` | Text for the reset button |
+| `applyButtonText` | `string` | ❌ | `"Apply Filter"` | Text for the apply button |
+
+### Points Range Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `rangeMinLimit` | `number` | ❌ | `0` | Minimum possible value for the range selector |
+| `rangeMaxLimit` | `number` | ❌ | `1000` | Maximum possible value for the range selector |
+| `rangeInitialMin` | `number` | ❌ | `0` | Initial minimum selected value |
+| `rangeInitialMax` | `number` | ❌ | `1000` | Initial maximum selected value |
+
+### Points Range Styling Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `pointsRangeContainerStyle` | `ViewStyle` | ❌ | - | Style for the main points range container |
+| `pointsRangeInputsContainerStyle` | `ViewStyle` | ❌ | - | Style for the inputs container in points range selector |
+| `pointsRangeCustomInputContainerStyle` | `ViewStyle` | ❌ | - | Style for the custom input containers |
+| `pointsRangeCustomInputFieldStyle` | `ViewStyle` | ❌ | - | Style for the input fields |
+| `pointsRangeSliderContainerStyle` | `ViewStyle` | ❌ | - | Style for the slider container |
+| `pointsRangeMultiSliderContainerStyle` | `ViewStyle` | ❌ | - | Style for the multi-slider container |
+| `pointsRangeTrackStyle` | `ViewStyle` | ❌ | - | Style for the slider track |
+| `pointsRangeSelectedTrackStyle` | `ViewStyle` | ❌ | - | Style for the selected portion of the track |
+| `pointsRangeUnselectedTrackStyle` | `ViewStyle` | ❌ | - | Style for the unselected portions of the track |
+| `pointsRangeMarkerStyle` | `ViewStyle` | ❌ | - | Style for slider markers |
+| `pointsRangeMarkerEnabledStyle` | `ViewStyle` | ❌ | - | Style for enabled slider markers |
+| `pointsRangeMarkerDisabledStyle` | `ViewStyle` | ❌ | - | Style for disabled slider markers |
+| `pointsRangeMarkerDotStyle` | `ViewStyle` | ❌ | - | Style for the marker dots |
+| `pointsRangeInputProps` | `Object` | ❌ | - | Additional props to pass to the range input fields |
+| `pointsRangeMultiSliderProps` | `Object` | ❌ | - | Additional props to pass to the MultiSlider component |
+
+### Brand Configuration Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `brandActiveIcon` | `React.ReactNode` | ❌ | `<Ionicons name="checkmark-outline" />` | Icon to show for selected brands |
+| `brandActiveIconStyle` | `ViewStyle` | ❌ | - | Style for the active brand icon |
+
+### Bottom Sheet Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `bottomSheetIndex` | `number` | ❌ | `0` | Initial index for the bottom sheet |
+| `snapPoints` | `string[]` | ❌ | `["50%", "90%"]` | Snap points for the bottom sheet |
+| `handleIndicatorStyle` | `ViewStyle` | ❌ | - | Style for the bottom sheet handle indicator |
+
+### Style Customization Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `containerStyle` | `ViewStyle` | ❌ | - | Style for the main container |
+| `headerStyle` | `ViewStyle` | ❌ | - | Style for the header |
+| `titleStyle` | `TextStyle` | ❌ | - | Style for the header title |
+| `resetTextStyle` | `TextStyle` | ❌ | - | Style for the reset text |
+| `sectionStyle` | `ViewStyle` | ❌ | - | Style for all filter sections |
+| `sortSectionStyle` | `ViewStyle` | ❌ | - | Style specifically for the sort section |
+| `sectionTitleStyle` | `TextStyle` | ❌ | - | Style for section titles |
+| `optionRowStyle` | `ViewStyle` | ❌ | - | Style for option rows in the sort section |
+| `optionTextStyle` | `TextStyle` | ❌ | - | Style for option text in the sort section |
+| `checkboxColor` | `string` | ❌ | `theme.secondary` | Color for checkboxes |
+| `brandContainerStyle` | `ViewStyle` | ❌ | - | Style for the brands grid container |
+| `applyButtonStyle` | `ViewStyle` | ❌ | - | Style for the apply button |
+| `applyButtonTextStyle` | `TextStyle` | ❌ | - | Style for the apply button text |
+| `bottomSheetStyle` | `ViewStyle` | ❌ | - | Style for the bottom sheet |
+
+## Types
+
+```typescript
+type SortOption = {
+  name: string;
+  value: string;
+  id: number;
+};
+
+type Brand = {
+  id: string;
+  name: string;
+  logo: ImageRequireSource;
+};
+
+type FilterResult = {
+  sort: SortOption[];
+  pointsRange: { min: number; max: number };
+  selectedBrands: Brand[];
+};
+```
+
+## Examples
+
+### Basic Filter with Sort Options Only
+
+```jsx
+<Filters 
+  sortOptions={[
+    { id: 1, name: 'Newest First', value: 'newest' },
+    { id: 2, name: 'Oldest First', value: 'oldest' },
+    { id: 3, name: 'Highest Rated', value: 'rated_desc' }
+  ]}
+  showPointsRange={false}
+  onActionButtonPress={(result) => handleSort(result.sort)}
+/>
+```
+
+### Points Range Filter with Custom Limits
+
+```jsx
+<Filters 
+  showPointsRange={true}
+  rangeMinLimit={0}
+  rangeMaxLimit={5000}
+  rangeInitialMin={100}
+  rangeInitialMax={2000}
+  pointsRangeSectionTitle="Price Range"
+  onActionButtonPress={(result) => handlePriceRange(result.pointsRange)}
+/>
+```
+
+### Brand Selection with Custom Styling
+
+```jsx
+<Filters 
+  brands={[
+    { id: 'nike', name: 'Nike', logo: require('../assets/nike.png') },
+    { id: 'adidas', name: 'Adidas', logo: require('../assets/adidas.png') },
+    { id: 'puma', name: 'Puma', logo: require('../assets/puma.png') }
+  ]}
+  brandSectionTitle="Select Brands"
+  brandContainerStyle={{ justifyContent: 'space-between' }}
+  brandActiveIconStyle={{ backgroundColor: '#E0F7FA' }}
+  onActionButtonPress={(result) => handleBrandFilter(result.selectedBrands)}
+/>
+```
+
+### RTL Support with Custom Headers
+
+```jsx
+<Filters 
+  isRTL={true}
+  headerTitleText="فلتر"
+  headerResetText="إعادة تعيين الكل"
+  applyButtonText="تطبيق الفلتر"
+  sortSectionTitle="ترتيب"
+  pointsRangeSectionTitle="نطاق النقاط"
+  brandSectionTitle="العلامات التجارية"
+  onActionButtonPress={handleArabicFilters}
+/>
+```

package/src/components/Filters/index.ts

@@ -0,0 +1,4 @@
+export { default } from "./Filters";
+export { default as PointsRangeSelector} from "./PointsRangeSelector";
+export * from "./Filters";
+export * from "./PointsRangeSelector";