@umituz/react-native-design-system 2.3.8 → 2.3.10

package/src/molecules/bottom-sheet/hooks/useListFilters.ts

@@ -0,0 +1,95 @@
+/**
+ * useListFilters Hook
+ */
+
+import { useState, useCallback, useMemo } from 'react';
+import { FilterOption } from '../types/Filter';
+
+export interface FilterItem extends FilterOption {
+    active?: boolean;
+}
+
+export interface UseListFiltersReturn<T> {
+    filters: FilterItem[];
+    setFilters: (filters: FilterItem[]) => void;
+    activeFilters: FilterItem[];
+    selectedIds: string[];
+    applyFilters: (items: T[]) => T[];
+    toggleFilter: (id: string) => void;
+    handleFilterPress: (id: string) => void;
+    clearFilters: () => void;
+    handleClearFilters: () => void;
+}
+
+export interface UseListFiltersConfig<T> {
+    options: FilterOption[];
+    defaultFilterId?: string;
+    singleSelect?: boolean;
+    filterFn?: (item: T, activeFilters: FilterItem[]) => boolean;
+}
+
+// Overload 1: When config object is passed
+export function useListFilters<T>(config: UseListFiltersConfig<T>): UseListFiltersReturn<T>;
+// Overload 2: When initial filters array and optional filterFn are passed
+export function useListFilters<T>(initialFilters: FilterItem[], filterFn?: (item: T, activeFilters: FilterItem[]) => boolean): UseListFiltersReturn<T>;
+// Unified implementation
+export function useListFilters<T>(
+    configOrFilters: FilterItem[] | UseListFiltersConfig<T>,
+    filterFnParam?: (item: T, activeFilters: FilterItem[]) => boolean
+): UseListFiltersReturn<T> {
+    const isConfig = !Array.isArray(configOrFilters);
+
+    // Normalize initial state
+    const initialFilters = isConfig
+        ? (configOrFilters as UseListFiltersConfig<T>).options.map(opt => ({
+            ...opt,
+            active: (configOrFilters as UseListFiltersConfig<T>).defaultFilterId
+                ? opt.id === (configOrFilters as UseListFiltersConfig<T>).defaultFilterId
+                : false
+        }))
+        : (configOrFilters as FilterItem[]);
+
+    const filterFn = isConfig
+        ? (configOrFilters as UseListFiltersConfig<T>).filterFn
+        : filterFnParam;
+
+    const singleSelect = isConfig
+        ? (configOrFilters as UseListFiltersConfig<T>).singleSelect
+        : false;
+
+    const [filters, setFilters] = useState<FilterItem[]>(initialFilters);
+
+    const activeFilters = useMemo(() => filters.filter((f) => f.active), [filters]);
+
+    const toggleFilter = useCallback((id: string) => {
+        setFilters((current) => {
+            if (singleSelect) {
+                return current.map((f) => ({ ...f, active: f.id === id }));
+            }
+            return current.map((f) => (f.id === id ? { ...f, active: !f.active } : f));
+        });
+    }, [singleSelect]);
+
+    const clearFilters = useCallback(() => {
+        setFilters((current) => current.map((f) => ({ ...f, active: false })));
+    }, []);
+
+    const applyFilters = useCallback((items: T[]) => {
+        if (activeFilters.length === 0 || !filterFn) return items;
+        return items.filter((item) => filterFn(item, activeFilters));
+    }, [activeFilters, filterFn]);
+
+    const selectedIds = useMemo(() => activeFilters.map((f) => f.id), [activeFilters]);
+
+    return {
+        filters,
+        setFilters,
+        activeFilters,
+        selectedIds,
+        applyFilters,
+        toggleFilter,
+        handleFilterPress: toggleFilter,
+        clearFilters,
+        handleClearFilters: clearFilters,
+    };
+}

package/src/molecules/bottom-sheet/index.ts

@@ -0,0 +1,10 @@
+export * from './components/BottomSheet';
+export * from './components/BottomSheetModal';
+export * from './components/SafeBottomSheetModalProvider';
+export * from './components/filter/FilterBottomSheet';
+export * from './components/filter/FilterSheet';
+export * from './hooks/useBottomSheet';
+export * from './hooks/useBottomSheetModal';
+export * from './hooks/useListFilters';
+export * from './types/BottomSheet';
+export * from './types/Filter';

package/src/molecules/bottom-sheet/types/BottomSheet.ts

@@ -0,0 +1,122 @@
+import React from 'react';
+
+export type SnapPoint = string | number;
+export type BottomSheetPreset = 'small' | 'medium' | 'large' | 'full' | 'custom';
+export type KeyboardBehavior = 'interactive' | 'extend' | 'fillParent';
+
+export interface BottomSheetConfig {
+    snapPoints: SnapPoint[];
+    initialIndex?: number;
+    enableBackdrop?: boolean;
+    backdropAppearsOnIndex?: number;
+    backdropDisappearsOnIndex?: number;
+    keyboardBehavior?: KeyboardBehavior;
+    enableHandleIndicator?: boolean;
+    enablePanDownToClose?: boolean;
+    enableDynamicSizing?: boolean;
+}
+
+export interface BottomSheetRef {
+    snapToIndex: (index: number) => void;
+    snapToPosition: (position: string | number) => void;
+    expand: () => void;
+    collapse: () => void;
+    close: () => void;
+}
+
+export interface BottomSheetModalRef {
+    present: () => void;
+    dismiss: () => void;
+    snapToIndex: (index: number) => void;
+    snapToPosition: (position: string | number) => void;
+    expand: () => void;
+    collapse: () => void;
+}
+
+export interface BottomSheetProps {
+    children: React.ReactNode;
+    preset?: BottomSheetPreset;
+    snapPoints?: SnapPoint[];
+    initialIndex?: number;
+    enableBackdrop?: boolean;
+    backdropAppearsOnIndex?: number;
+    backdropDisappearsOnIndex?: number;
+    keyboardBehavior?: KeyboardBehavior;
+    enableHandleIndicator?: boolean;
+    enablePanDownToClose?: boolean;
+    enableDynamicSizing?: boolean;
+    onChange?: (index: number) => void;
+    onClose?: () => void;
+}
+
+export interface BottomSheetModalProps extends Omit<BottomSheetProps, 'onClose'> {
+    onDismiss?: () => void;
+    backgroundColor?: string;
+}
+
+export interface UseBottomSheetReturn {
+    sheetRef: React.RefObject<BottomSheetRef | null>;
+    open: () => void;
+    close: () => void;
+    expand: () => void;
+    collapse: () => void;
+    snapToIndex: (index: number) => void;
+    snapToPosition: (position: string | number) => void;
+}
+
+export interface UseBottomSheetModalReturn {
+    modalRef: React.RefObject<BottomSheetModalRef | null>;
+    present: () => void;
+    dismiss: () => void;
+    snapToIndex: (index: number) => void;
+    snapToPosition: (position: string | number) => void;
+    expand: () => void;
+    collapse: () => void;
+}
+
+
+export const BottomSheetUtils = {
+    getPreset: (preset: BottomSheetPreset): BottomSheetConfig => {
+        switch (preset) {
+            case 'small':
+                return {
+                    snapPoints: ['25%'],
+                    enableBackdrop: true,
+                    enablePanDownToClose: true,
+                };
+            case 'medium':
+                return {
+                    snapPoints: ['50%'],
+                    enableBackdrop: true,
+                    enablePanDownToClose: true,
+                };
+            case 'large':
+                return {
+                    snapPoints: ['90%'],
+                    enableBackdrop: true,
+                    enablePanDownToClose: true,
+                };
+            case 'full':
+                return {
+                    snapPoints: ['100%'],
+                    enableBackdrop: true,
+                    enablePanDownToClose: false,
+                };
+            default:
+                return {
+                    snapPoints: ['50%'],
+                    enableBackdrop: true,
+                    enablePanDownToClose: true,
+                };
+        }
+    },
+
+    createConfig: (config: Partial<BottomSheetConfig>): BottomSheetConfig => {
+        return {
+            snapPoints: ['50%'],
+            enableBackdrop: true,
+            enablePanDownToClose: true,
+            ...config,
+        };
+    },
+};

package/src/molecules/bottom-sheet/types/Filter.ts

@@ -0,0 +1,48 @@
+/**
+ * Domain - Filter Entities
+ */
+
+export interface FilterOption {
+    id: string;
+    label: string;
+    icon?: string;
+    type?: string;
+    count?: number;
+}
+
+export interface FilterCategory {
+    id: string;
+    title: string;
+    options: FilterOption[];
+    multiSelect?: boolean;
+}
+
+export class FilterUtils {
+    static hasActiveFilter(selectedIds: string[], defaultId: string = "all"): boolean {
+        if (selectedIds.length === 0) return false;
+        if (selectedIds.length === 1 && selectedIds[0] === defaultId) return false;
+        return true;
+    }
+
+    static toggleFilter(
+        selectedIds: string[],
+        filterId: string,
+        multiSelect: boolean = false,
+        defaultId: string = "all"
+    ): string[] {
+        if (filterId === defaultId) {
+            return [defaultId];
+        }
+
+        if (multiSelect) {
+            const newIds = selectedIds.filter((id) => id !== defaultId);
+            if (newIds.includes(filterId)) {
+                const filtered = newIds.filter((id) => id !== filterId);
+                return filtered.length === 0 ? [defaultId] : filtered;
+            }
+            return [...newIds, filterId];
+        }
+
+        return [filterId];
+    }
+}

package/src/molecules/index.ts

@@ -4,6 +4,8 @@
  */
 
 // Component exports
+export * from './avatar';
+export * from './bottom-sheet';
 export { FormField, type FormFieldProps } from './FormField';
 export { ListItem, type ListItemProps } from './ListItem';
 export { SearchBar, type SearchBarProps } from './SearchBar';