@zezosoft/zezo-ott-react-native-ui-kit 1.1.2 → 1.1.5

package/src/components/BottomSheet/BottomSheetOne.tsx

@@ -0,0 +1,220 @@
+import React, { useCallback, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  ScrollView,
+  Dimensions,
+  ImageBackground,
+  Platform,
+} from 'react-native';
+import type { ViewStyle } from 'react-native';
+import Modal from 'react-native-modal';
+import { X } from 'lucide-react-native';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import Animated from 'react-native-reanimated';
+import type { ITheme } from '../../theme';
+import { Text } from '../Text';
+import FastImage from 'react-native-fast-image';
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+export interface BottomSheetOneProps {
+  theme: ITheme;
+  children: ReactNode;
+  backgroundImage?: string;
+  title?: string;
+  height?: string | number;
+  showCloseButton?: boolean;
+  visible?: boolean;
+  onClose?: () => void;
+  handleIndicatorStyle?: ViewStyle;
+  scrollable?: boolean;
+}
+
+const BottomSheetOne: React.FC<BottomSheetOneProps> = ({
+  theme,
+  children,
+  title,
+  height,
+  backgroundImage,
+  showCloseButton = true,
+  visible = false,
+  onClose,
+  handleIndicatorStyle,
+  scrollable = true,
+}) => {
+  const calculatedHeight = useMemo(() => {
+    if (!height) return SCREEN_HEIGHT * 0.75;
+
+    if (typeof height === 'number') return height;
+
+    if (typeof height === 'string' && height.includes('%')) {
+      const num = parseFloat(height);
+      if (!isNaN(num)) {
+        return (num / 100) * SCREEN_HEIGHT;
+      }
+    }
+
+    return SCREEN_HEIGHT * 0.75;
+  }, [height]);
+
+  const handleClosePress = useCallback(() => {
+    onClose?.();
+  }, [onClose]);
+
+  const renderHeader = useMemo(() => {
+    if (title) {
+      return (
+        <Text style={[styles.title, { color: theme.colors.textPrimary }]}>
+          {title}
+        </Text>
+      );
+    }
+    return null;
+  }, [title, theme.colors.textPrimary]);
+
+  const renderCloseButton = useMemo(() => {
+    if (!showCloseButton) return null;
+    return (
+      <TouchableOpacity
+        onPress={handleClosePress}
+        style={[
+          styles.closeButtonWrapper,
+          { backgroundColor: theme.colors.black },
+        ]}
+        activeOpacity={0.8}
+      >
+        <X size={moderateScale(22)} color={theme.colors.white} />
+      </TouchableOpacity>
+    );
+  }, [showCloseButton, handleClosePress, theme.colors]);
+
+  return (
+    <Modal
+      isVisible={visible}
+      onBackdropPress={handleClosePress}
+      onSwipeComplete={handleClosePress}
+      style={styles.modal}
+      backdropOpacity={0.45}
+      // swipeDirection="down"
+      animationIn="slideInUp"
+      animationOut="slideOutDown"
+      animationInTiming={260}
+      animationOutTiming={220}
+      useNativeDriver
+      useNativeDriverForBackdrop
+      propagateSwipe
+      avoidKeyboard
+      statusBarTranslucent={false}
+      hardwareAccelerated
+    >
+      <Animated.View
+        style={[
+          styles.bottomSheetContainer,
+          {
+            backgroundColor: theme.colors.background,
+            height: calculatedHeight,
+          },
+        ]}
+      >
+        {backgroundImage && (
+          <>
+            <ImageBackground
+              source={{ uri: backgroundImage }}
+              style={[
+                StyleSheet.absoluteFillObject,
+                { backgroundColor: theme.colors.background },
+              ]}
+              resizeMode={FastImage.resizeMode.cover}
+              blurRadius={Platform.OS === 'ios' ? 15 : 25}
+            />
+            <View style={styles.backgroundOverlay} />
+          </>
+        )}
+
+        {renderCloseButton}
+
+        <View
+          style={[
+            styles.handleIndicator,
+            { backgroundColor: theme.colors.textSecondary },
+            handleIndicatorStyle,
+          ]}
+        />
+
+        {scrollable ? (
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            bounces={false}
+            nestedScrollEnabled
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={styles.scrollContent}
+          >
+            {renderHeader}
+            {children}
+          </ScrollView>
+        ) : (
+          <View style={styles.viewContent}>
+            {renderHeader}
+            {children}
+          </View>
+        )}
+      </Animated.View>
+    </Modal>
+  );
+};
+
+export default BottomSheetOne;
+
+const styles = StyleSheet.create({
+  modal: {
+    justifyContent: 'flex-end',
+    margin: 0,
+  },
+  bottomSheetContainer: {
+    borderTopLeftRadius: moderateScale(22),
+    borderTopRightRadius: moderateScale(22),
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  backgroundOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.55)',
+  },
+
+  handleIndicator: {
+    width: moderateScale(60),
+    height: verticalScale(4),
+    borderRadius: moderateScale(30),
+    alignSelf: 'center',
+    marginVertical: verticalScale(10),
+  },
+  scrollContent: {
+    flex: 1,
+    paddingBottom: verticalScale(30),
+    paddingHorizontal: moderateScale(12),
+  },
+  viewContent: {
+    paddingBottom: verticalScale(10),
+    paddingHorizontal: moderateScale(12),
+    flex: 1,
+  },
+  closeButtonWrapper: {
+    position: 'absolute',
+    top: verticalScale(10),
+    right: moderateScale(14),
+    borderRadius: moderateScale(30),
+    padding: moderateScale(10),
+    zIndex: 1000,
+    elevation: 10,
+  },
+  title: {
+    fontSize: RFValue(16),
+    fontWeight: '700',
+    textAlign: 'center',
+    marginBottom: verticalScale(15),
+  },
+});

package/src/components/BottomSheet/index.ts

@@ -1,2 +1,4 @@
 export { default as BottomSheet } from './BottomSheet';
+export { default as BottomSheetOne } from './BottomSheetOne';
 export type { BottomSheetProps } from './BottomSheet';
+export type { BottomSheetOneProps } from './BottomSheetOne';

package/src/components/Button/PrimaryBtn.tsx

@@ -29,6 +29,7 @@ type PrimaryBtnProps = {
   containerStyle?: ViewStyle;
   titleStyle?: TextStyle;
   theme?: ThemeOverride;
+  leftIcon?: React.ReactNode;
 };
 
 export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
@@ -40,6 +41,7 @@ export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
   containerStyle,
   titleStyle,
   theme,
+  leftIcon,
 }) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
 
@@ -95,7 +97,12 @@ export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
           <Text style={loadingTextStyle}>{loadingText}</Text>
         </View>
       ) : (
-        <Text style={textStyle}>{title}</Text>
+        <View style={styles.row}>
+          {leftIcon && (
+            <View style={{ marginRight: scale(8) }}>{leftIcon}</View>
+          )}
+          <Text style={textStyle}>{title}</Text>
+        </View>
       )}
     </TouchableOpacity>
   );
@@ -105,13 +112,14 @@ export default React.memo(PrimaryBtn);
 
 const styles = StyleSheet.create({
   button: {
-    width: '100%',
     alignSelf: 'stretch',
     paddingVertical: verticalScale(12),
     paddingHorizontal: scale(16),
     borderRadius: scale(6),
     alignItems: 'center',
     justifyContent: 'center',
+    minHeight: verticalScale(44),
+    flexShrink: 1,
   },
   text: {
     textAlign: 'center',

package/src/components/Content/Card/Category/Category.tsx

@@ -6,6 +6,7 @@
 import React, {
   useRef,
   useLayoutEffect,
+  useEffect,
   useCallback,
   useMemo,
   useState,
@@ -17,6 +18,8 @@ import {
   StyleSheet,
   Dimensions,
   InteractionManager,
+  Platform,
+  Vibration,
   type LayoutChangeEvent,
   type ListRenderItemInfo,
 } from 'react-native';
@@ -47,11 +50,12 @@ type CategoryCardProps = {
 };
 
 const ITEM_WIDTH = scale(80);
-const CONTAINER_PADDING = scale(14);
+const CONTAINER_PADDING = scale(10);
 const { width: SCREEN_WIDTH } = Dimensions.get('window');
 
 import { usePrevious } from '../../../../hooks/usePrevious';
 import { useSkeletonItems } from '../../../../hooks/useSkeletonItems';
+import { debounce } from 'lodash';
 
 const CategoryCard = React.memo(
   ({
@@ -65,6 +69,8 @@ const CategoryCard = React.memo(
     const { theme: appliedTheme } = useInternalTheme(theme);
     const flatListRef = useRef<FlatList<ICategory>>(null);
     const [itemWidths, setItemWidths] = useState<number[]>([]);
+    const isScrollingRef = useRef(false);
+    const lastPressedIndexRef = useRef<number | null>(null);
 
     // Memoize theme colors
     const themeColors = useMemo(
@@ -106,11 +112,28 @@ const CategoryCard = React.memo(
       []
     );
 
+    // Haptic feedback utility
+    const triggerHapticFeedback = useCallback(() => {
+      if (Platform.OS === 'ios') {
+        // iOS haptic feedback (light impact)
+        Vibration.vibrate(1);
+      } else if (Platform.OS === 'android') {
+        // Android haptic feedback (short vibration)
+        Vibration.vibrate(10);
+      }
+    }, []);
+
     const scrollToCategory = useCallback(
       (index: number, animated: boolean) => {
-        if (!flatListRef.current || index < 0 || index >= category.length)
+        if (
+          !flatListRef.current ||
+          index < 0 ||
+          index >= category.length ||
+          isScrollingRef.current
+        )
           return;
 
+        isScrollingRef.current = true;
         const RIGHT_SCROLL_BIAS = scale(40);
         const offset = itemWidths.length
           ? itemWidths.slice(0, index).reduce((sum, w) => sum + w, 0) +
@@ -127,11 +150,35 @@ const CategoryCard = React.memo(
             offset: Math.max(0, offset),
             animated,
           });
+          // Reset scrolling flag after animation completes
+          if (animated) {
+            setTimeout(() => {
+              isScrollingRef.current = false;
+            }, 300);
+          } else {
+            isScrollingRef.current = false;
+          }
         });
       },
       [category, itemWidths]
     );
 
+    // Debounced scroll function to prevent rapid scrolling
+    const debouncedScrollToCategory = useMemo(
+      () =>
+        debounce((index: number, animated: boolean) => {
+          scrollToCategory(index, animated);
+        }, 100),
+      [scrollToCategory]
+    );
+
+    // Cleanup debounced function on unmount
+    useEffect(() => {
+      return () => {
+        debouncedScrollToCategory.cancel();
+      };
+    }, [debouncedScrollToCategory]);
+
     const onItemLayout = useCallback(
       (event: LayoutChangeEvent, index: number) => {
         const { width } = event.nativeEvent.layout;
@@ -153,19 +200,38 @@ const CategoryCard = React.memo(
         const index = category.findIndex(
           (cat) => cat._id === selectedCategory._id
         );
-        if (index >= 0) scrollToCategory(index, true);
+        if (index >= 0 && index !== lastPressedIndexRef.current) {
+          // Use debounced scroll for external category changes
+          debouncedScrollToCategory(index, true);
+        }
       }
-    }, [selectedCategory, category, scrollToCategory, prevCategoryId]);
+    }, [selectedCategory, category, debouncedScrollToCategory, prevCategoryId]);
 
     const handlePress = useCallback(
       (item: ICategory) => {
-        onPressCategory?.(item);
+        // Prevent rapid successive taps on the same item
         const index = category.findIndex((cat) => cat._id === item._id);
-        if (index >= 0) {
-          setTimeout(() => scrollToCategory(index, true), 10);
+        if (index < 0) return;
+
+        // Check if same item is being pressed rapidly
+        if (lastPressedIndexRef.current === index && isScrollingRef.current) {
+          return;
         }
+
+        lastPressedIndexRef.current = index;
+
+        // Trigger haptic feedback for better UX
+        triggerHapticFeedback();
+
+        // Call the callback
+        onPressCategory?.(item);
+
+        // Scroll to category with slight delay for smoother UX
+        requestAnimationFrame(() => {
+          scrollToCategory(index, true);
+        });
       },
-      [category, onPressCategory, scrollToCategory]
+      [category, onPressCategory, scrollToCategory, triggerHapticFeedback]
     );
 
     // Memoize filled mode selected style
@@ -219,11 +285,18 @@ const CategoryCard = React.memo(
 
         return (
           <TouchableOpacity
-            activeOpacity={0.9}
+            activeOpacity={0.7}
             onPress={() => handlePress(item)}
             style={containerStyle}
             onLayout={(event) => onItemLayout(event, index)}
             accessibilityLabel={`Select category ${item.name}`}
+            accessibilityRole="button"
+            accessibilityState={{ selected: isSelected }}
+            accessibilityHint={
+              isSelected
+                ? `${item.name} is currently selected`
+                : `Double tap to select ${item.name} category`
+            }
           >
             <Text style={textStyle}>{item.name}</Text>
             {mode === 'text' && isSelected && <View style={underlineStyle} />}
@@ -283,7 +356,14 @@ const CategoryCard = React.memo(
             keyExtractor={keyExtractor}
             horizontal
             showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.listContainer}
+            contentContainerStyle={[
+              styles.listContainer,
+              {
+                paddingLeft: mode === 'filled' ? CONTAINER_PADDING : 0,
+                paddingRight:
+                  mode === 'filled' ? CONTAINER_PADDING + scale(2) : 0,
+              },
+            ]}
             extraData={selectedCategory?._id}
             renderItem={renderItem}
             getItemLayout={getItemLayout}
@@ -294,6 +374,20 @@ const CategoryCard = React.memo(
             maxToRenderPerBatch={12}
             windowSize={5}
             removeClippedSubviews
+            onScrollBeginDrag={() => {
+              isScrollingRef.current = true;
+            }}
+            onScrollEndDrag={() => {
+              // Reset after a short delay to allow momentum scrolling
+              setTimeout(() => {
+                isScrollingRef.current = false;
+              }, 200);
+            }}
+            onMomentumScrollEnd={() => {
+              isScrollingRef.current = false;
+            }}
+            accessibilityLabel="Category selection list"
+            accessibilityRole="list"
           />
         )}
       </View>