ota-components-module 1.3.0

package/src/feedback/ProgressBar.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Colors } from '../utils/BaseStyle';
+
+interface ProgressBarProps {
+  progress: number; // Value between 0 and 1
+  maxValue?: number; // Maximum value (default: 1)
+  minValue?: number; // Minimum value (default: 0)
+  height?: number; // Height of the progress bar
+  backgroundColor?: string; // Background color of the progress bar
+  progressColor?: string; // Color of the progress indicator
+  borderRadius?: number; // Border radius of the progress bar
+}
+
+/**
+ * A progress bar component that visualizes progress as a horizontal bar
+ */
+const ProgressBar: React.FC<ProgressBarProps> = ({
+  progress,
+  maxValue = 1,
+  minValue = 0,
+  height = 6,
+  backgroundColor = Colors.lightGrayColor,
+  progressColor = '#6CB7D8',
+  borderRadius = 3,
+}) => {
+  
+  // Calculate the width percentage based on progress, minValue, and maxValue
+  const normalizedProgress = Math.max(0, Math.min(1, (progress - minValue) / (maxValue - minValue)));
+  const width = `${normalizedProgress * 100}%`;
+  
+  return (
+    <View style={[styles.container, { height, backgroundColor, borderRadius }]}>
+      <View
+        style={[
+          styles.progressIndicator,
+          {
+            width,
+            backgroundColor: progressColor,
+            borderRadius,
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    overflow: 'hidden',
+  },
+  progressIndicator: {
+    height: '100%',
+  },
+});
+
+export default ProgressBar;

package/src/image/ImagePickerBottomSheet.tsx

@@ -0,0 +1,61 @@
+import React, { useRef } from 'react';
+import ImagePickerView from './ImagePickerView';
+import BottomSheetDialog from '../layout/BottomSheetDialog';
+
+interface ImagePickerBottomSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  onTakePhoto: () => void;
+  onUploadFile: () => void;
+  title?: string;
+}
+
+const ImagePickerBottomSheet: React.FC<ImagePickerBottomSheetProps> = ({
+  visible,
+  onClose,
+  onTakePhoto,
+  onUploadFile,
+  title,
+}) => {
+
+  const ref: any = useRef(null);
+
+  const TakePhoto = () => {
+    closeSheet();
+
+    setTimeout(() => {
+      onTakePhoto();
+    }, 1000);
+  }
+
+  const UploadFile = () => {
+    closeSheet();
+
+    setTimeout(() => {
+      onUploadFile();
+    }, 1000);
+  }
+
+  const closeSheet = () => {
+  if(ref.current){
+    ref.current.closeBottomSheet()
+  }
+  }
+  return (
+    <BottomSheetDialog
+      visible={visible}
+      onClose={onClose}
+      height={200} // Adjust height as needed
+      ref={ref}
+    >
+      <ImagePickerView
+        title={title}
+        onTakePhoto={TakePhoto}
+        onUploadFile={UploadFile}
+        onClose={closeSheet}
+      />
+    </BottomSheetDialog>
+  );
+};
+
+export default ImagePickerBottomSheet;

package/src/image/ImagePickerView.tsx

@@ -0,0 +1,103 @@
+import React, { useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ViewStyle,
+} from 'react-native';
+import CameraIcon from '../../assets/images/ic_camera.svg';
+import FolderIcon from '../../assets/images/ic_folder.svg';
+import CloseIcon from '../../assets/images/ic_close.svg';
+import Label from '../typography/Label';
+import { TextSize, TextWeight } from '../utils/TextConstants';
+import { Colors } from '../utils/BaseStyle';
+
+interface ImagePickerViewProps {
+  onTakePhoto: () => void;
+  onUploadFile: () => void;
+  onClose?: () => void;
+  containerStyle?: ViewStyle;
+  title?: string;
+}
+
+const ImagePickerView: React.FC<ImagePickerViewProps> = ({
+  onTakePhoto,
+  onUploadFile,
+  onClose,
+  containerStyle,
+  title = 'Add an Image',
+}) => {
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={styles.header}>
+        <Label 
+          text={title}
+          size={TextSize.LARGE}
+          weight={TextWeight.BOLD}
+          textColorType="primary"
+        />
+        {onClose && (
+          <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+            <CloseIcon width={24} height={24} />
+          </TouchableOpacity>
+        )}
+      </View>
+
+      <TouchableOpacity
+        style={styles.option}
+        onPress={onTakePhoto}
+        activeOpacity={0.7}
+      >
+        <CameraIcon width={24} height={24} style={styles.icon} />
+        <Label text="Take a photo" size={TextSize.NORMAL} weight={TextWeight.NORMAL} textColorType="primary" />
+      </TouchableOpacity>
+
+      <View style={styles.divider} />
+
+      <TouchableOpacity
+        style={styles.option}
+        onPress={onUploadFile}
+        activeOpacity={0.7}
+      >
+         <FolderIcon width={24} height={24} style={styles.icon} />
+         <Label text="Upload a file" size={TextSize.NORMAL} weight={TextWeight.NORMAL} textColorType="primary" />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: Colors.whiteColor,
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingStart: 16,
+    paddingBottom: 16
+  },
+  closeButton: {
+    padding: 4,
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+  },
+  icon: {
+    marginRight: 16,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: Colors.lightGrayColor,
+    marginHorizontal: 16,
+  },
+});
+
+export default ImagePickerView;

package/src/image/MultipleImagePreview.tsx

@@ -0,0 +1,424 @@
+import { Ionicons } from '@expo/vector-icons';
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Modal,
+  Dimensions,
+  FlatList,
+  SafeAreaView,
+  Platform,
+  Text,
+} from 'react-native';
+import { Image } from 'expo-image';
+import Checkbox from 'expo-checkbox';
+import { Colors } from '../utils/BaseStyle';
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { PropertyImage } from '../models/PropertyImage';
+import BottomSheetDialog, { BottomSheetDialogRef } from '../layout/BottomSheetDialog';
+import DeleteImageConfirmationDialog from '../feedback/DeleteImageConfirmationDialog';
+import { delete_image_confirmation_msg } from '../utils/Strings';
+
+// Get screen dimensions
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+// Check if we're running on web
+const isWeb = Platform.OS === 'web';
+
+type ImageSource = {
+  uri: PropertyImage;
+  isLocal?: boolean;
+};
+
+type MultipleImagePreviewProps = {
+  /**
+   * Array of image URIs to display. Can be local file paths or server URLs.
+   */
+  images: PropertyImage[];
+  /**
+   * Initial image index to display
+   */
+  initialIndex?: number;
+  /**
+   * Callback when the preview is closed
+   */
+  onClose?: () => void;
+  /**
+   * Callback when an image is deleted
+   */
+  onDelete?: (index: number) => void;
+  /**
+   * Callback when an image is set as default
+   */
+  OnMarkDefault?: (index: number, value: boolean) => void;
+  /**
+   * Whether to show the delete button
+   */
+  showDeleteButton?: boolean;
+};
+
+/**
+ * MultipleImagePreview component for displaying images
+ */
+const MultipleImagePreview: React.FC<MultipleImagePreviewProps> = ({
+  images,
+  initialIndex = 0,
+  onClose,
+  onDelete,
+  OnMarkDefault,
+  showDeleteButton = true,
+}) => {
+  const [activeIndex, setActiveIndex] = useState(initialIndex);
+  const [visible, setVisible] = useState(true);
+  const flatListRef = useRef<FlatList>(null);
+  const bottomSheetRef = useRef<BottomSheetDialogRef>(null);
+  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
+
+  const insets = useSafeAreaInsets();
+
+  // Calculate dimensions based on platform
+  const dimensions = useMemo(() => {
+    // For web, we need to ensure each item takes exactly one screen width
+    return {
+      itemWidth: SCREEN_WIDTH,
+      imageWidth: isWeb ? SCREEN_WIDTH - 40 : SCREEN_WIDTH - 40,
+      imageHeight: isWeb ? SCREEN_HEIGHT * 0.6 : SCREEN_HEIGHT * 0.4
+    };
+  }, []);
+
+  const closeSheet = () => {
+    if (bottomSheetRef.current) {
+      bottomSheetRef.current.closeBottomSheet();
+    }
+  };
+
+  // Close the bottom sheet
+  const closeBottomSheet = () => {
+    closeSheet();
+
+    setTimeout(() => {
+      setShowDeleteConfirmation(false);
+    }, 300);
+  };
+
+  // Create styles with the calculated dimensions
+  const styles = previewStyles(insets.top, dimensions);
+
+  // Process images to handle both local and remote URLs
+  const processedImages = useMemo(() => {
+    return images.map((image) => {
+      // Check if the image is a local file path or a server URL
+      const isLocalImage = image.imageBlobUrl.startsWith('data:') || image.imageBlobUrl.startsWith('/');
+      return { uri: image, isLocal: isLocalImage };
+    });
+  }, [images]);
+
+  // Scroll to initial index on mount
+  useEffect(() => {
+    if (flatListRef.current) {
+      setActiveIndex(initialIndex);
+      flatListRef.current.scrollToIndex({
+        index: initialIndex,
+        animated: false,
+      });
+    }
+  }, [initialIndex]);
+
+  const handleClose = () => {
+    setVisible(false);
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  const handleDelete = () => {
+    if (onDelete) {
+      onDelete(activeIndex);
+    }
+  };
+
+  // Handle scroll end to update active index
+  const handleScrollEnd = (event: any) => {
+    const contentOffsetX = event.nativeEvent.contentOffset.x;
+    const newIndex = Math.round(contentOffsetX / dimensions.itemWidth);
+    if (newIndex !== activeIndex && newIndex >= 0 && newIndex < images.length) {
+      setActiveIndex(newIndex);
+    }
+  };
+
+  // Function to handle manual navigation between images
+  const goToImage = (index: number) => {
+    if (flatListRef.current && index >= 0 && index < images.length) {
+      flatListRef.current.scrollToIndex({
+        index,
+        animated: true,
+      });
+      setActiveIndex(index);
+    }
+  };
+
+  // Render each image item
+  const renderItem = ({ item }: { item: ImageSource }) => {
+    return (
+      <View style={styles.itemContainer}>
+        {OnMarkDefault && (
+          <View style={styles.imageDefaultTextSection}>
+            <Checkbox style={{borderColor: 'white', width: 20, height: 20}} value={item.uri.isDefault} onValueChange={(value: boolean) => {
+              if(OnMarkDefault) {
+                OnMarkDefault(activeIndex, value);
+              }
+            }} />
+            <Text style={styles.imageDefaultText}>Mark as Default</Text>
+          </View>
+        )}
+
+        <Image
+          key={item.uri.imageBlobUrl}
+          source={item.uri.imageBlobUrl}
+          style={styles.image}
+          contentFit="cover"
+          placeholderContentFit='cover'
+          transition={500}
+          cachePolicy="disk"
+          placeholder={require("../../assets/images/placeholder.png")}
+        />
+
+        {/* Delete button overlay on the image */}
+        {showDeleteButton && onDelete && item.uri.isDefault !== true && (
+          <TouchableOpacity
+            style={styles.imageDeleteButton}
+            onPress={() => {
+              if(item.isLocal) {
+                handleDelete();
+              } else {
+                setShowDeleteConfirmation(true)
+              }
+            }}
+            activeOpacity={0.7}
+          >
+            <Ionicons name="trash-outline" size={20} color="red" />
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  };
+
+  // Render header with close button
+  const renderHeader = () => (
+    <View style={styles.headerContainer}>
+      <View style={{ flex: 1 }} />
+      <TouchableOpacity
+        style={styles.closeButton}
+        onPress={handleClose}
+        activeOpacity={0.7}
+      >
+        <Ionicons name="close-outline" size={30} color={Colors.whiteColor} />
+      </TouchableOpacity>
+    </View>
+  );
+
+  // Render footer with pagination dots
+  const renderFooter = () => (
+    <View style={styles.footerContainer}>
+      <View style={styles.dotsContainer}>
+        {images.map((_, index) => (
+          <TouchableOpacity
+            key={index}
+            style={[
+              styles.dot,
+              index === activeIndex && styles.activeDot
+            ]}
+            onPress={() => goToImage(index)}
+            activeOpacity={0.7}
+          />
+        ))}
+      </View>
+    </View>
+  );
+
+  // If not visible, don't render anything
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={true}
+      animationType="slide"
+      onRequestClose={handleClose}
+    >
+      <SafeAreaView style={styles.container}>
+        <View style={styles.galleryContainer}>
+          {/* Image gallery */}
+          <FlatList
+            ref={flatListRef}
+            data={processedImages}
+            renderItem={renderItem}
+            horizontal
+            pagingEnabled
+            showsHorizontalScrollIndicator={false}
+            initialNumToRender={processedImages.length}
+            maxToRenderPerBatch={3}
+            windowSize={5}
+            keyExtractor={(_, index) => `image-${index}`}
+            onMomentumScrollEnd={handleScrollEnd}
+            style={styles.flatList}
+            contentContainerStyle={styles.flatListContent}
+            snapToInterval={dimensions.itemWidth}
+            snapToAlignment="center"
+            decelerationRate="fast"
+            getItemLayout={(_, index) => ({
+              length: dimensions.itemWidth,
+              offset: dimensions.itemWidth * index,
+              index,
+            })}
+            removeClippedSubviews={!isWeb} // Disable on web for better performance
+            scrollEventThrottle={16}
+          />
+        </View>
+
+        {/* Header overlay */}
+        {renderHeader()}
+        {renderFooter()}
+
+        <BottomSheetDialog
+          ref={bottomSheetRef}
+          visible={showDeleteConfirmation}
+          onClose={closeBottomSheet}
+          height={200}
+        >
+          <DeleteImageConfirmationDialog
+            message={delete_image_confirmation_msg}
+            onConfirm={async () => {
+              closeBottomSheet();
+              handleDelete();
+            }}
+            onCancel={closeBottomSheet}
+          />
+        </BottomSheetDialog>
+      </SafeAreaView>
+    </Modal>
+  );
+};
+
+const previewStyles = (top: number, dimensions?: { itemWidth: number, imageWidth: number, imageHeight: number }) => StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000000CF',
+    justifyContent: 'center',
+  },
+  galleryContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  flatList: {
+    width: SCREEN_WIDTH,
+    ...(isWeb && {
+      scrollSnapType: 'x mandatory', // Web-specific for better snapping
+      WebkitOverflowScrolling: 'touch', // Better scrolling on iOS Safari
+    }),
+  },
+  flatListContent: {
+    alignItems: 'center',
+    ...(isWeb && {
+      display: 'flex',
+      flexDirection: 'row',
+    }),
+  },
+  itemContainer: {
+    width: dimensions?.itemWidth || SCREEN_WIDTH,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  image: {
+    width: dimensions?.imageWidth || SCREEN_WIDTH - 40,
+    height: dimensions?.imageHeight || SCREEN_HEIGHT * 0.4,
+    resizeMode: 'cover',
+    borderRadius: 20,
+    borderColor: Colors.whiteColor,
+    borderWidth: 1,
+    shadowColor: Colors.shadowColor,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: Platform.OS === 'android' ? 4 : 0,
+  },
+  headerContainer: {
+    position: 'absolute',
+    top: top,
+    right: 0,
+    left: 0,
+    height: 60,
+    paddingHorizontal: 15,
+    flexDirection: 'row',
+    justifyContent: 'flex-end', // Align to right side
+    alignItems: 'center',
+    zIndex: 100,
+    backgroundColor: "transparent",
+  },
+  closeButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  imageDefaultTextSection: {
+    flexDirection: 'row',
+    position: 'absolute',
+    top: 5,
+    left: 20,
+    borderRadius: 10,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 10,
+    margin: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 16
+  },
+  imageDefaultText: {
+    color: 'white',
+    alignSelf: 'center',
+    textAlign: 'center',
+    marginStart: 12
+  },
+  imageDeleteButton: {
+    position: 'absolute',
+    top: 15,
+    right: 30,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 10,
+  },
+  footerContainer: {
+    height: 60,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 100,
+  },
+  dotsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#FFFFFF',
+    marginHorizontal: 4,
+  },
+  activeDot: {
+    backgroundColor: '#007AC6',
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+  },
+});
+
+export default MultipleImagePreview;