ota-components-module 1.3.0

package/src/layout/BottomSheetDialog.tsx

@@ -0,0 +1,208 @@
+import React, {
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {
+  View,
+  StyleSheet,
+  Modal,
+  TouchableWithoutFeedback,
+  Animated,
+  Dimensions,
+  PanResponder,
+  ViewStyle,
+  BackHandler,
+} from 'react-native';
+
+const screenHeight = Dimensions.get('window').height;
+
+type BottomSheetDialogProps = {
+  visible: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  height?: number | string;
+  containerStyle?: ViewStyle;
+  contentStyle?: ViewStyle;
+  closeOnBackdropPress?: boolean;
+  isTranslucent?: boolean;
+  closeOnBackButtonPress?: boolean;
+};
+
+export type BottomSheetDialogRef = {
+  closeBottomSheet: () => void;
+};
+
+const BottomSheetDialog = React.forwardRef<BottomSheetDialogRef, BottomSheetDialogProps>(
+  (
+    {
+      visible,
+      onClose,
+      children,
+      height = screenHeight * 0.6,
+      containerStyle,
+      contentStyle,
+      closeOnBackdropPress = true,
+      isTranslucent = true,
+      closeOnBackButtonPress = true,
+    },
+    ref
+  ) => {
+    const translateY = useRef(new Animated.Value(screenHeight)).current;
+    const opacity = useRef(new Animated.Value(0)).current;
+
+    const isAnimating = useRef(false);
+    const isVisibleRef = useRef(false);
+
+    useImperativeHandle(ref, () => ({
+      closeBottomSheet,
+    }));
+
+    useEffect(() => {
+      if (visible) {
+        openBottomSheet();
+      } else {
+        closeBottomSheet(); // Animate close
+      }
+    }, [visible]);
+
+    const openBottomSheet = () => {
+      if (isAnimating.current || isVisibleRef.current) return;
+      isAnimating.current = true;
+
+      Animated.parallel([
+        Animated.timing(translateY, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        isAnimating.current = false;
+        isVisibleRef.current = true;
+      });
+    };
+
+    const closeBottomSheet = () => {
+      if (isAnimating.current || !isVisibleRef.current) return;
+      isAnimating.current = true;
+
+      Animated.parallel([
+        Animated.timing(translateY, {
+          toValue: screenHeight,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        isAnimating.current = false;
+        isVisibleRef.current = false;
+        onClose?.();
+      });
+    };
+
+    const handleBackdropPress = () => {
+      if (closeOnBackdropPress) {
+        closeBottomSheet();
+      }
+    };
+
+    const panResponder = useRef(
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: (_, gestureState) => gestureState.dy > 0,
+        onPanResponderMove: (_, gestureState) => {
+          if (gestureState.dy > 0) {
+            translateY.setValue(gestureState.dy);
+          }
+        },
+        onPanResponderRelease: (_, gestureState) => {
+          if (gestureState.dy > 100) {
+            closeBottomSheet();
+          } else {
+            Animated.spring(translateY, {
+              toValue: 0,
+              useNativeDriver: true,
+            }).start();
+          }
+        },
+      })
+    ).current;
+
+    return (
+      <Modal transparent visible={visible} animationType="none" statusBarTranslucent={isTranslucent} 
+      onRequestClose={() => {
+        onClose?.(); 
+      }} >
+        <View style={styles.modalContainer}>
+          <TouchableWithoutFeedback onPress={handleBackdropPress}>
+            <Animated.View style={[styles.backdrop, { opacity }]} />
+          </TouchableWithoutFeedback>
+
+          <Animated.View
+            style={[
+              styles.bottomSheetContainer,
+              containerStyle,
+              {
+                maxHeight:"100%",
+                height,
+                transform: [{ translateY }],
+              },
+            ]}
+          >
+            <View style={styles.dragHandleContainer} {...panResponder.panHandlers}>
+              <View style={styles.dragHandle} />
+            </View>
+            <View style={[styles.contentContainer, contentStyle]}>
+              {children}
+            </View>
+          </Animated.View>
+        </View>
+      </Modal>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  bottomSheetContainer: {
+    backgroundColor: 'white',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    overflow: 'hidden',
+  },
+  dragHandleContainer: {
+    width: '100%',
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dragHandle: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#ccc',
+  },
+  contentContainer: {
+    flex: 1,
+    padding: 16,
+  },
+});
+
+export default BottomSheetDialog;

package/src/layout/BottomTwoButtonLayoutComponent.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { View, StyleSheet, ViewStyle, Platform } from 'react-native';
+import ThemedButton from '../button/ThemedButton';
+import ProgressBar from '../feedback/ProgressBar';
+import { Colors } from '../utils/BaseStyle';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { isAndroid15AndAbove, isIOS } from '../utils/Utils';
+
+interface BottomTwoButtonLayoutProps {
+  primaryButtonTestID?: string;
+  secondaryButtonTestID?: string;
+  primaryButtonText: string;
+  secondaryButtonText: string;
+  onPrimaryButtonPress: () => void;
+  onSecondaryButtonPress: () => void;
+  isPrimaryButtonDisabled?: boolean;
+  isSecondaryButtonDisabled?: boolean;
+  containerStyle?: ViewStyle;
+  // Progress bar props
+  showProgressBar?: boolean;
+  showButtons?: boolean;
+  progress?: number;
+  maxValue?: number;
+  minValue?: number;
+  primaryColor?: string;
+  backgroundColor?: string;
+  disabledButtonColor?: string;
+}
+
+/**
+ * A layout component with two buttons at the bottom and optional progress bar
+ */
+const BottomTwoButtonLayoutComponent: React.FC<BottomTwoButtonLayoutProps> = ({
+  primaryButtonTestID,
+  secondaryButtonTestID,
+  primaryButtonText,
+  secondaryButtonText,
+  onPrimaryButtonPress,
+  onSecondaryButtonPress,
+  isPrimaryButtonDisabled = false,
+  isSecondaryButtonDisabled = false,
+  containerStyle,
+  showButtons = true,
+  // Progress bar props
+  showProgressBar = false,
+  progress = 0,
+  maxValue = 1,
+  minValue = 0,
+  primaryColor = Colors.lightThemePrimaryColor,
+  backgroundColor = Colors.whiteColor,
+  disabledButtonColor = '#B8D8E8'
+}) => {
+
+  const insets = useSafeAreaInsets();
+  // const bottomPadding = ((isIOS || isAndroid15AndAbove) ? Math.max(insets.bottom, 20) : 0) + 20;
+  const styles = layoutStyles(showButtons, (isIOS) ? insets.bottom : insets.bottom + 20, backgroundColor);
+  
+  return (
+    <View style={[
+      styles.buttonContainer,
+      containerStyle
+    ]}>
+      {/* Progress Bar */}
+      {showProgressBar && (
+        <View style={styles.progressBarContainer}>
+          <ProgressBar
+            progress={progress}
+            maxValue={maxValue}
+            minValue={minValue}
+            height={6}
+            backgroundColor={Colors.lightGrayColor || '#E5E5E5'}
+            progressColor={primaryColor}
+            borderRadius={3}
+          />
+        </View>
+      )}
+
+      {/* Buttons */}
+      {showButtons && (
+        <View style={styles.buttonsRow}>
+          <ThemedButton
+            testID={secondaryButtonTestID}
+            style={styles.secondaryButton}
+            title={secondaryButtonText}
+            onPress={onSecondaryButtonPress}
+            disabled={isSecondaryButtonDisabled}
+            type="secondary"
+            primaryColor={primaryColor}
+            backgroundColor={backgroundColor}
+            disabledColor={disabledButtonColor}
+          />
+          <ThemedButton
+            testID={primaryButtonTestID}
+            style={styles.primaryButton}
+            title={primaryButtonText}
+            onPress={onPrimaryButtonPress}
+            disabled={isPrimaryButtonDisabled}
+            type="primary"
+            primaryColor={primaryColor}
+            backgroundColor={backgroundColor}
+            disabledColor={disabledButtonColor}
+          />
+        </View>
+      )}
+    </View>
+  );
+};
+
+const layoutStyles = (showButtons: boolean, paddingBottom: number, backgroundColor: string) => StyleSheet.create({
+  buttonContainer: {
+    flexDirection: 'column',
+    justifyContent: showButtons ? 'space-between' : 'center',
+    paddingHorizontal: 30,
+    paddingTop: 20,
+    paddingBottom: paddingBottom,
+    backgroundColor: backgroundColor,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderTopWidth: 1,
+    borderTopColor: '#eee',
+    elevation: 5,
+    shadowColor: Colors.shadowColor,
+    shadowOffset: { width: 0, height: -3 },
+    shadowOpacity: 0.07,
+    shadowRadius: 5,
+  },
+  progressBarContainer: {
+    width: '100%',
+    marginBottom: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignContent: 'center',
+  },
+  buttonsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  primaryButton: {
+    flex: 1,
+    marginLeft: 8,
+    height: 60
+  },
+  secondaryButton: {
+    flex: 1,
+    marginRight: 8,
+    height: 60
+  },
+});
+
+export default BottomTwoButtonLayoutComponent;

package/src/layout/CardView.tsx

@@ -0,0 +1,101 @@
+import React, { ReactNode } from 'react';
+import { View, StyleSheet, ViewStyle, Platform } from 'react-native';
+import { Colors } from '../utils/BaseStyle';
+
+interface CardViewProps {
+  children: ReactNode;
+  style?: ViewStyle;
+  cardPadding?: number;
+  borderRadius?: number;
+  backgroundColor?: string;
+  elevation?: number;
+  shadowOpacity?: number;
+}
+
+/**
+ * CardView - A reusable card component with shadow
+ * 
+ * @param children - The content to display inside the card
+ * @param style - Additional styles to apply to the card container
+ * @param cardPadding - Padding inside the card (default: 16)
+ * @param borderRadius - Border radius of the card (default: 20)
+ * @param backgroundColor - Background color of the card (default: white)
+ * @param elevation - Shadow elevation for Android (default: 4)
+ * @param shadowOpacity - Shadow opacity for iOS (default: 0.2)
+ */
+const CardView: React.FC<CardViewProps> = ({
+  children,
+  style,
+  cardPadding = 16,
+  borderRadius = 20,
+  backgroundColor = Colors.whiteColor,
+  elevation = 4,
+  shadowOpacity = 0.2,
+}) => {
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          padding: cardPadding,
+          borderRadius: borderRadius,
+          backgroundColor: backgroundColor,
+          shadowColor: Colors.shadowColor,
+          shadowOffset: { width: 0, height: 2 },
+          // Shadow for iOS
+          shadowOpacity: shadowOpacity,
+          // Shadow for Android
+          elevation: Platform.OS === 'android' ? elevation : 0,
+          // On Android, add a subtle border to enhance the shadow appearance
+          // Cross-platform shadow styling
+          ...Platform.select({
+            ios: {
+              shadowColor: Colors.shadowColor,
+              shadowOffset: { width: 0, height: 0 }, // Changed to 0,0 for all-around shadow
+              shadowOpacity: 0.1,
+              shadowRadius: 15, // Increased radius for better top shadow
+              borderTopWidth: 0,
+            },
+            android: {
+              elevation: 8,
+              shadowColor: Colors.shadowColor,
+              shadowOffset: { width: 0, height: 0 }, // All-around shadow
+              shadowOpacity: 0.1,
+              shadowRadius: 10,
+              borderWidth: 0.5,
+              borderColor: "rgba(0,0,0,0.1)",
+        
+            },
+            web: {
+              shadowColor: Colors.shadowColor,
+              shadowOffset: { width: 0, height: 0 },
+              shadowOpacity: 0.1,
+              shadowRadius: 15,
+              borderTopWidth: 0,
+              boxShadow: '0px 0px 20px rgba(0, 0, 0, 0.1)',
+            },
+          }),
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    // we don't need to set width 100% and align item to start
+    // width: '100%',
+    // alignItems: 'flex-start',
+    backgroundColor: Colors.whiteColor,
+    // Shadow properties for iOS
+    shadowColor: Colors.shadowColor,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 4,
+  },
+});
+
+export default CardView;
+

package/src/layout/PropertyHeaderComponent.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet, ImageSourcePropType } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import Label from '../typography/Label';
+import { TextSize, TextWeight } from '../utils/TextConstants';
+import { Colors } from '../utils/BaseStyle';
+
+interface PropertyHeaderComponentProps {
+  /**
+   * The logo to display in the header
+   */
+  logo?: ImageSourcePropType;
+  
+  /**
+   * The title text to display in the header
+   */
+  title: string;
+  
+  /**
+   * Function to call when the back button is pressed
+   */
+  onBackPress: () => void;
+  
+  /**
+   * Optional custom style for the header container
+   */
+  containerStyle?: object;
+  
+  /**
+   * Optional custom style for the logo container
+   */
+  logoContainerStyle?: object;
+  
+  /**
+   * Optional custom style for the title
+   */
+  titleStyle?: object;
+}
+
+/**
+ * A reusable header component for property screens
+ * Displays a back button, logo, and title
+ */
+const PropertyHeaderComponent: React.FC<PropertyHeaderComponentProps> = ({
+  title,
+  onBackPress,
+  containerStyle,
+  titleStyle,
+}) => {
+  
+  const styles = headerStyles();
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {/* Back Button */}
+      <TouchableOpacity style={styles.backButton} onPress={onBackPress}>
+        <Ionicons name="arrow-back" size={24} color={Colors.secondaryTextColor} />
+      </TouchableOpacity>
+
+      <View style={{ justifyContent: "center", alignContent: "center" }}>
+        {/* Title */}
+        <Label
+          text={title}
+          size={TextSize.XXXXLARGE}
+          weight={TextWeight.THIN}
+          textColorType="secondary"
+          customStyle={[styles.title, titleStyle]}
+        />
+      </View>
+    </View>
+  );
+};
+
+const headerStyles = () => StyleSheet.create({
+  container: {
+    paddingHorizontal: 24,
+    paddingVertical: 16
+  },
+  backButton: {
+    marginBottom: 10
+  },
+  subcontainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignContent: 'center',
+    marginTop: 16
+  },
+  logoContainer: {
+    width: 120,
+    height: 60,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  logo: {
+    width: '100%',
+    height: '100%',
+  },
+  placeholderText: {
+    textAlign: 'center',
+  },
+  title: {
+    textAlign: "right",
+    paddingVertical: 8
+  },
+});
+
+export default PropertyHeaderComponent;