ota-components-module 1.3.0

package/src/image/StackedImage.tsx

@@ -0,0 +1,155 @@
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import React, {ReactElement} from 'react';
+import { Colors } from '../utils/BaseStyle';
+import { PropertyImage } from '../models/PropertyImage';
+import { Image } from 'expo-image';
+
+type StackedImageProps = {
+  photos: PropertyImage[];
+  onPress?: (photos: any) => void;
+};
+
+type Size = {
+  width: number;
+  height: number;
+};
+
+const MAX_COUNT = 3;
+
+// Spacing constants
+const Spacing = {
+  mini: 4,
+  sm: 8,
+  smd: 12,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 40,
+  xxxl: 80,
+};
+
+// Border constants
+const Border = {
+  br_mini: 15,
+  br_mini2: 5,
+  border_10: 10,
+  border_20: 20,
+  border_25: 25,
+  border_40: 40,
+};
+
+/**
+ * A component for displaying stacked images
+ */
+const StackedImage: React.FC<StackedImageProps> = ({
+  photos,
+  onPress,
+}): ReactElement => {
+  const photoCount = photos?.length > MAX_COUNT ? MAX_COUNT : photos.length;
+  const style = StackPhotoStyle(photoCount);
+
+  const getHeight = (index: number) => {
+    if ((photoCount - 1) == index) {
+      return {width: 120, height: 120};
+    } else {
+      return {width: 100 + (index * 8), height: 100 + (index * 8)};
+    }
+  };
+
+  const getRight = (index: number) => {
+    if (photoCount == 1) {
+      return undefined;
+    } else {
+      return index * Spacing.smd;
+    }
+  };
+
+  const getLeft = (index: number) => {
+    if (photoCount == 1) {
+      return 0;
+    } else {
+      return undefined;
+    }
+  };
+
+  const onPressStack = () => {
+    if (onPress) {
+      onPress(photos);
+    }
+  };
+
+  return (
+    <TouchableOpacity onPress={onPressStack}>
+      <View style={style.imageStack}>
+        {photos
+          .slice(0, photoCount)
+          .reverse()
+          .map((image: PropertyImage, index: number) => (
+            <Image
+              key={index}
+              source={image.imageBlobUrl}
+              contentFit="cover"
+              placeholderContentFit='cover'
+              transition={500}
+              cachePolicy="disk"
+              placeholder={require("../../assets/images/placeholder.png")}
+              style={[
+                style.image,
+                {
+                  width: getHeight(index).width,
+                  height: getHeight(index).height,
+                  borderColor: Colors.whiteColor,
+                  borderWidth: 1,
+                  shadowColor: Colors.shadowColor,
+                  shadowOffset: { width: 0, height: 2 },
+                  shadowOpacity: 0.1,
+                  shadowRadius: 4,
+                  bottom: 0,
+                  left: getLeft(index),
+                  right: getRight(index),
+                },
+              ]}
+            />
+          ))}
+      </View>
+
+      {photos.length >= 1 && (
+        <View style={style.countOverlay}>
+          <Text style={style.countText}>{photos.length}</Text>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const StackPhotoStyle = (photoCount: number) =>
+  StyleSheet.create({
+    imageStack: {
+      position: 'relative',
+      width: Spacing.xxxl + 60,
+      height: Spacing.xxxl + 60,
+    },
+    image: {
+      position: 'absolute',
+      borderRadius: Border.border_10,
+    },
+    countOverlay: {
+      position: 'absolute',
+      borderColor: Colors.whiteColor,
+      borderWidth: 1,
+      backgroundColor: Colors.lightThemePrimaryColor,
+      borderRadius: Border.br_mini,
+      width: Spacing.lg,
+      height: Spacing.lg,
+      alignItems: 'center',
+      bottom: 10,
+      left: (photoCount > 0 && photoCount % 2 == 0) ? 18 : 8,
+    },
+    countText: {
+      color: Colors.whiteColor,
+      fontFamily: 'OpenSans-Regular',
+      includeFontPadding: false,
+    },
+  });
+
+export default StackedImage;

package/src/index.ts

@@ -0,0 +1,68 @@
+// import all components from their respective folders
+
+// Button Components
+import ThemedButton from "./button/ThemedButton";
+
+// Image Components
+import MultipleImagePreview from "./image/MultipleImagePreview";
+import ImagePickerView from "./image/ImagePickerView";
+import ImagePickerBottomSheet from "./image/ImagePickerBottomSheet";
+import StackedImage from "./image/StackedImage";
+
+// Input Components
+import CustomInput from "./input/CustomInput";
+import FormField from "./input/FormField";
+import CustomDropdown from "./input/CustomDropdown";
+import SearchViewInput from "./input/SearchViewInput";
+import KeyboardScrollView from "./input/KeyboardScrollView";
+
+// Layout Components
+import BottomTwoButtonLayoutComponent from "./layout/BottomTwoButtonLayoutComponent";
+import PropertyHeaderComponent from "./layout/PropertyHeaderComponent";
+import BottomSheetDialog from "./layout/BottomSheetDialog";
+import { BottomSheetDialogRef } from "./layout/BottomSheetDialog";
+import CardView from "./layout/CardView";
+
+
+// Feedback Components
+import ActivityLoader from "./feedback/ActivityLoader";
+import ProgressBar from "./feedback/ProgressBar";
+import CustomAlert from "./feedback/CustomAlert";
+import DeleteImageConfirmationDialog from "./feedback/DeleteImageConfirmationDialog";
+
+// Typography Components
+import Label from "./typography/Label";
+
+// List Components
+import SearchableList from "./list/SearchableList";
+
+// Common utilities and types
+import * as BaseStyle from "./utils/BaseStyle";
+import * as TextConstants from "./utils/TextConstants";
+
+export {
+  ThemedButton,
+  MultipleImagePreview,
+  ImagePickerView,
+  ImagePickerBottomSheet,
+  StackedImage,
+  CustomInput,
+  FormField,
+  CustomDropdown,
+  SearchViewInput,
+  KeyboardScrollView,
+  BottomTwoButtonLayoutComponent,
+  PropertyHeaderComponent,
+  BottomSheetDialog,
+  ActivityLoader,
+  ProgressBar,
+  CustomAlert,
+  DeleteImageConfirmationDialog,
+  Label,
+  SearchableList,
+  BaseStyle,
+  TextConstants,
+  CardView,
+};
+
+export type { BottomSheetDialogRef };

package/src/input/CustomDropdown.tsx

@@ -0,0 +1,142 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Dropdown } from 'react-native-element-dropdown';
+import { Colors } from '../utils/BaseStyle';
+
+type DropdownItem = {
+  label?: string;
+  value: string;
+};
+
+interface CustomDropdownProps {
+  /**
+   * Test ID for the component
+   */
+  testID?: string;
+  
+  /**
+   * Array of items to display in the dropdown
+   */
+  items: DropdownItem[];
+  
+  /**
+   * Currently selected value
+   */
+  value: string;
+  
+  /**
+   * Z-index for the dropdown (important for positioning)
+   */
+  zIndex: number;
+  
+  /**
+   * Function to call when selection changes
+   */
+  onChange: (item: DropdownItem) => void;
+  
+  /**
+   * Placeholder text to display when no item is selected
+   */
+  placeHolder: string;
+  
+  /**
+   * Whether the dropdown is disabled
+   */
+  disabled?: boolean;
+}
+
+/**
+ * A customizable dropdown component
+ */
+const CustomDropdown: React.FC<CustomDropdownProps> = ({
+  testID, 
+  items, 
+  value, 
+  onChange, 
+  zIndex, 
+  placeHolder, 
+  disabled = false
+}) => {
+  // Find the selected item in the items array
+  const findSelectedItem = () => {
+    if (!value || !items || items.length === 0) return null;
+
+    // Try to find an item where the 'value' property matches the provided value
+    return items.find(item => item.value === value) || null;
+  };
+
+  const selectedItem = findSelectedItem();
+
+  // Create styles for disabled state
+  const dropdownStyle = [
+    styles.dropdown,
+    disabled && styles.disabledDropdown
+  ];
+
+  return (
+    <View style={[styles.container, { zIndex }]}>
+      <Dropdown
+        testID={testID}
+        style={dropdownStyle}
+        containerStyle={styles.dropdownContainer}
+        data={items}
+        labelField="value"
+        valueField="value"
+        value={selectedItem?.value || ''}
+        onChange={(item: DropdownItem) => !disabled ? onChange(item) : null}
+        placeholder={placeHolder}
+        autoScroll={true}
+        dropdownPosition='auto'
+        itemTextStyle={styles.itemText}
+        disable={disabled}
+        placeholderStyle={styles.placeholder}
+        selectedTextStyle={styles.selectedText}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    overflow: 'visible',
+  },
+  dropdown: {
+    paddingHorizontal: 0,
+    paddingVertical: 10,
+    paddingBottom: 10,
+    borderBottomWidth: 1.0,
+    borderBottomColor: Colors.borderColor,
+  },
+  disabledDropdown: {
+    opacity: 0.5,
+  },
+  dropdownContainer: {
+    zIndex: 100,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: Colors.borderColor,
+    shadowColor: Colors.shadowColor,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  itemText: {
+    padding: 0,
+    fontSize: 16,
+    fontWeight: '500',
+    color: Colors.primaryTextColor,
+  },
+  placeholder: {
+    color: Colors.secondaryTextColor,
+    fontSize: 16,
+  },
+  selectedText: {
+    color: Colors.primaryTextColor,
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});
+
+export default CustomDropdown;

package/src/input/CustomInput.tsx

@@ -0,0 +1,101 @@
+import {
+  TextInput,
+  KeyboardType,
+  StyleSheet,
+  StyleProp,
+  TextStyle,
+  View,
+  Text,
+  ViewStyle,
+} from "react-native";
+import React, { useState } from "react";
+import { Colors } from "../utils/BaseStyle";
+
+const CustomInput = ({
+  onChangeText,
+  placeholder,
+  keyBoardType = "default",
+  textStyle,
+  customStyle,
+  placeholderTextColor,
+  text,
+  isEditable,
+  inputType,
+  validationPattern,
+  errorMessage,
+  onSubmitEditing,
+  returnKeyType
+}: {
+  onChangeText: (text: string) => void;
+  placeholder: string;
+  keyBoardType?: KeyboardType;
+  customStyle?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  placeholderTextColor?: string;
+  text?: string;
+  isEditable?: boolean;
+  inputType?: 'email' | 'text' | 'number';
+  validationPattern?: RegExp;
+  errorMessage?: string;
+  onSubmitEditing?: () => void;
+  returnKeyType?: 'default' | 'done' | 'go' | 'next' | 'search' | 'send';
+}) => {
+  const [isValid, setIsValid] = useState(true);
+
+  const validateInput = (text: string) => {
+    if (inputType === 'email') {
+      const emailRegex = validationPattern || /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      setIsValid(emailRegex.test(text));
+    } else if (validationPattern) {
+      setIsValid(validationPattern.test(text));
+    } else {
+      setIsValid(true);
+    }
+  };
+
+  const onChange = (text: string) => {
+    onChangeText(text);
+    validateInput(text);
+  };
+
+  const styles = inputStyles(isEditable!!, !isValid);
+
+  return (
+    <View style={[styles.inputcontainer, customStyle]}>
+      <TextInput
+        placeholder={placeholder}
+        placeholderTextColor={placeholderTextColor}
+        style={[styles.input, textStyle]}
+        value={text}
+        onChangeText={onChange}
+        keyboardType={keyBoardType}
+        editable={isEditable}
+        onSubmitEditing={onSubmitEditing}
+        returnKeyType={returnKeyType}
+      />
+      {!isValid && isEditable && errorMessage && (
+        <Text style={styles.errorText}>{errorMessage}</Text>
+      )}
+    </View>
+  );
+};
+
+const inputStyles = (isEditable: boolean, isError: boolean) =>
+  StyleSheet.create({
+    inputcontainer: {
+
+    },
+    input: {
+      borderBottomWidth: isEditable ? 1 : 0,
+      borderBottomColor: isError ? "red" : Colors.darkGrayColor,
+      outlineColor: "transparent",
+      paddingVertical: 10
+    },
+    errorText: {
+      color: 'red',
+      fontSize: 12,
+      marginTop: 5,
+    },
+  });
+
+export default CustomInput;