ota-components-module 1.3.0

package/src/input/FormField.tsx

@@ -0,0 +1,358 @@
+import React, { useState, useEffect } from 'react';
+import { Text, StyleSheet, View, TextInput, KeyboardTypeOptions } from 'react-native';
+import CustomDropdown from './CustomDropdown';
+import { Colors } from '../utils/BaseStyle';
+
+
+// Define interfaces for our dropdown items
+export type DropdownItem = {
+  value: string;
+  id?: number | string;
+  code?: string;
+  countryCode?: string;
+}
+// Define the field types
+export type FieldType = 'text' | 'numeric' | 'date' | 'currency' | 'dropdown';
+
+interface FormFieldProps {
+  // Common props
+  labelTestID?: string;
+  label: string;
+  required?: boolean;
+  isInline?: boolean; // Flag to determine if the layout should be inline or stacked
+  disabled?: boolean; // Flag to disable user interaction with the field
+
+  // Field type
+  fieldType?: FieldType;
+
+  // TextInput props
+  textInputTestID?: string;
+  value?: string;
+  onChangeText?: (text: string) => void;
+  placeholder?: string;
+  keyboardType?: KeyboardTypeOptions;
+
+  // Dropdown props
+  dropdownTestID?: string;
+  dropdownItems?: DropdownItem[];
+  dropdownValue?: string;
+  dropdownPlaceholder?: string;
+  onDropdownChange?: (item: DropdownItem) => void;
+  zIndex?: number;
+
+  // Style props
+  labelWidth?: number; // Width of the label when inline
+}
+
+// Utility functions for formatting values
+const formatNumericValue = (text: string): string => {
+  // Only allow integer numbers
+  if (/^\d*$/.test(text)) {
+    return text;
+  }
+  return '';
+};
+
+const formatDateValue = (text: string): string => {
+  // Remove any non-digit characters
+  if (!text || text === '') {
+    return text;
+  }
+
+
+  const digitsOnly = text.replace(/\D/g, '');
+
+  // Format as dd/mm/yyyy
+  let formattedDate = '';
+
+  if (digitsOnly.length > 0) {
+    // Add day part (first 2 digits)
+    formattedDate = digitsOnly.substring(0, Math.min(2, digitsOnly.length));
+
+    // Add month part (next 2 digits)
+    if (digitsOnly.length > 2) {
+      formattedDate += '/' + digitsOnly.substring(2, Math.min(4, digitsOnly.length));
+
+      // Add year part (next 4 digits)
+      if (digitsOnly.length > 4) {
+        formattedDate += '/' + digitsOnly.substring(4, Math.min(8, digitsOnly.length));
+      }
+    }
+  }
+
+  return formattedDate;
+};
+
+const formatCurrencyValue = (text: string): string => {
+  // Handle empty input
+  if (!text || text === '') {
+    return '';
+  }
+
+  // Check if the input ends with a decimal point
+  const endsWithDecimal = text.endsWith('.');
+
+  // Remove all non-digit characters except decimal points
+  let processedText = text.replace(/[^\d.]/g, '');
+
+  // Handle case where input starts with a decimal point
+  if (processedText.startsWith('.')) {
+    processedText = '0' + processedText;
+  }
+
+  // Ensure only one decimal point
+  const decimalPointCount = (processedText.match(/\./g) || []).length;
+  if (decimalPointCount > 1) {
+    const parts = processedText.split('.');
+    processedText = parts[0] + '.' + parts.slice(1).join('');
+  }
+
+  // Ensure only two decimal places
+  if (processedText.includes('.')) {
+    const parts = processedText.split('.');
+    if (parts[1].length > 2) {
+      processedText = parts[0] + '.' + parts[1].substring(0, 2);
+    }
+  }
+
+  // Handle leading zeros in the whole number part
+  if (processedText.startsWith('0') && processedText.length > 1 && processedText[1] !== '.') {
+    processedText = processedText.replace(/^0+/, '');
+  }
+
+  // Convert to number and format with commas
+  let formattedValue = '';
+  if (processedText) {
+    // Handle the case with decimal point
+    if (processedText.includes('.')) {
+      const parts = processedText.split('.');
+      // Handle case where whole number part is empty
+      const wholeNumber = parts[0] === '' ? '0' : parts[0];
+      // Format the whole number part with commas
+      formattedValue = Number(wholeNumber).toLocaleString('en-US') + '.' + parts[1];
+    } else {
+      // Format without decimal point
+      formattedValue = Number(processedText).toLocaleString('en-US');
+
+      // If the original input ended with a decimal point, add it back
+      if (endsWithDecimal) {
+        formattedValue += '.';
+      }
+    }
+  }
+
+  return formattedValue;
+};
+
+const FormField: React.FC<FormFieldProps> = ({
+  // Common props
+  labelTestID,
+  label,
+  required = false,
+  isInline = false, // Default to stacked layout
+  disabled = false, // Default to enabled
+
+  // Field type
+  fieldType = 'text',
+
+  // TextInput props
+  textInputTestID,
+  value = '',
+  onChangeText,
+  placeholder = '',
+  keyboardType = 'default',
+
+  // Dropdown props
+  dropdownTestID,
+  dropdownItems = [],
+  dropdownValue = 'value',
+  dropdownPlaceholder = 'Select an option',
+  onDropdownChange,
+  zIndex = 1000,
+
+  // Style props
+  labelWidth = 120, // Default label width for inline layout
+}) => {
+  const isDropdown = fieldType === 'dropdown';
+
+  // State to hold the formatted value
+  const [formattedValue, setFormattedValue] = useState(value);
+
+  // Format the value when it changes from outside
+  useEffect(() => {
+    if (value !== formattedValue) {
+      let newFormattedValue = value;
+
+      // Apply formatting based on field type
+      if (fieldType === 'numeric') {
+        newFormattedValue = formatNumericValue(value);
+      } else if (fieldType === 'date') {
+        newFormattedValue = formatDateValue(value);
+      } else if (fieldType === 'currency') {
+        newFormattedValue = formatCurrencyValue(value);
+      }
+
+      setFormattedValue(newFormattedValue);
+
+      // If the formatted value is different from the original and we have an onChangeText handler,
+      // call it with the formatted value to update the parent component
+      if (newFormattedValue !== value && onChangeText) {
+        onChangeText(newFormattedValue);
+      }
+    }
+  }, [value, fieldType]);
+
+  // Handle numeric input
+  const handleNumericInput = (text: string) => {
+    if (onChangeText) {
+      const formattedText = formatNumericValue(text);
+      setFormattedValue(formattedText);
+      onChangeText(formattedText);
+    }
+  };
+
+  // Handle date input in dd/mm/yyyy format
+  const handleDateInput = (text: string) => {
+    if (onChangeText) {
+      const formattedText = formatDateValue(text);
+      setFormattedValue(formattedText);
+      onChangeText(formattedText);
+    }
+  };
+
+  // Handle currency input with automatic formatting
+  const handleCurrencyInput = (text: string) => {
+    if (onChangeText) {
+      const formattedText = formatCurrencyValue(text);
+      setFormattedValue(formattedText);
+      onChangeText(formattedText);
+    }
+  };
+
+  // Determine the layout style based on the isInline flag
+  const containerStyle = isInline ? styles.inlineContainer : styles.stackedContainer;
+  const labelContainerStyle = isInline ?
+    [styles.labelContainer, styles.inlineLabelContainer] :
+    styles.labelContainer;
+  const inputContainerStyle = isInline ?
+    [styles.inputContainer, { flex: 1 }] :
+    styles.inputContainer;
+
+  // Apply specific styles for the input field based on layout and disabled state
+  const inputFieldStyle = [
+    styles.inputField,
+    isInline && styles.inlineInputField,
+    disabled && styles.disabledField
+  ];
+
+  return (
+    <View style={[styles.formGroup, containerStyle]}>
+      {/* Label */}
+      <View style={labelContainerStyle}>
+        <Text testID={labelTestID} style={[styles.label, isDropdown && styles.dropdownLabel]}>
+          {label}
+          {required && <Text style={styles.requiredAsterisk}>*</Text>}
+        </Text>
+      </View>
+
+      {/* Input Field */}
+      <View style={inputContainerStyle}>
+        {fieldType === 'dropdown' ? (
+          <CustomDropdown
+            testID={dropdownTestID}
+            items={dropdownItems}
+            value={dropdownValue}
+            onChange={(val) => !disabled && onDropdownChange ? onDropdownChange(val) : null}
+            placeHolder={dropdownPlaceholder}
+            zIndex={zIndex}
+            disabled={disabled}
+          />
+        ) : (
+          <TextInput
+            testID={textInputTestID}
+            style={inputFieldStyle}
+            placeholder={placeholder}
+            placeholderTextColor={Colors.textMidnightColor}
+            value={formattedValue}
+            onChangeText={
+              !disabled ? (
+                fieldType === 'numeric' ? handleNumericInput :
+                fieldType === 'date' ? handleDateInput :
+                fieldType === 'currency' ? handleCurrencyInput :
+                (text) => {
+                  setFormattedValue(text);
+                  if (onChangeText) onChangeText(text);
+                }
+              ) : undefined
+            }
+            keyboardType={
+              fieldType === 'numeric' || fieldType === 'date' ? 'number-pad' :
+              fieldType === 'currency' ? 'decimal-pad' :
+              keyboardType
+            }
+            editable={!disabled}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  formGroup: {
+    marginBottom: 16,
+    borderBottomWidth: 0.5,
+    borderBottomColor: Colors.bottomDeviderColor,
+  },
+  // Layout styles
+  stackedContainer: {
+    // Default layout - stacked vertically
+  },
+  inlineContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingBottom: 8,
+  },
+  labelContainer: {
+    marginBottom: 8,
+  },
+  inlineLabelContainer: {
+    marginBottom: 0,
+    marginRight: 12,
+    justifyContent: 'center',
+  },
+  inputContainer: {
+    // Container for the input field or dropdown
+  },
+  // Text and input styles
+  label: {
+    fontSize: 16,
+    color: Colors.placeholderColor,
+    fontWeight: '500',
+  },
+  dropdownLabel: {
+    marginBottom: 0,
+  },
+  requiredAsterisk: {
+    color: '#FF6161',
+    marginLeft: 4,
+  },
+  inputField: {
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.bottomDeviderColor,
+    paddingVertical: 10,
+    fontSize: 16,
+    color: Colors.textMidnightColor,
+    fontWeight: '500',
+    outlineColor: 'transparent'
+  },
+  inlineInputField: {
+    borderBottomWidth: 0,
+    textAlign: 'right',
+  },
+  disabledField: {
+    opacity: 0.5,
+  },
+});
+
+export default FormField;

package/src/input/KeyboardScrollView.tsx

@@ -0,0 +1,131 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {View, Platform} from 'react-native';
+import {Keyboard, ScrollView, TextInput, StatusBar} from 'react-native';
+
+interface KeyboardScrollViewProps extends React.ComponentProps<typeof ScrollView> {
+  additionalScrollHeight?: number;
+}
+
+const KeyboardScrollView = ({
+  children,
+  additionalScrollHeight,
+  contentContainerStyle,
+  ...props
+}: KeyboardScrollViewProps) => {
+  const scrollViewRef = useRef<ScrollView>(null);
+  const scrollPositionRef = useRef<number>(0);
+  const scrollContentSizeRef = useRef<number>(0);
+  const scrollViewSizeRef = useRef<number>(0);
+  const currentYPosition = useRef<number>(0);
+
+  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
+  const [additionalPadding, setAdditionalPadding] = useState(0);
+
+  const scrollToPosition = useCallback(
+    (toPosition: number, animated?: boolean) => {
+      scrollViewRef.current?.scrollTo({y: toPosition, animated: !!animated});
+      scrollPositionRef.current = toPosition;
+    },
+    [],
+  );
+
+  const additionalScroll = useMemo(
+    () => additionalScrollHeight ?? 0,
+    [additionalScrollHeight],
+  );
+  const androidStatusBarOffset = useMemo(
+    () => StatusBar.currentHeight ?? 0,
+    [],
+  );
+
+  useEffect(() => {
+    const didShowListener = Keyboard.addListener('keyboardDidShow', frames => {
+      const keyboardY = frames.endCoordinates.screenY;
+      const keyboardHeight = frames.endCoordinates.height;
+      setAdditionalPadding(Math.ceil(keyboardHeight));
+  
+      setTimeout(() => {
+        setIsKeyboardVisible(true);
+      }, 100);
+
+      const currentlyFocusedInput = TextInput.State.currentlyFocusedInput();
+      const currentScrollY = scrollPositionRef.current;
+      currentYPosition.current = currentScrollY;
+
+      currentlyFocusedInput?.measureInWindow((_x, y, _width, height) => {
+        const endOfInputY = y + height + androidStatusBarOffset;
+        const deltaToScroll = endOfInputY - keyboardY;
+
+        if (deltaToScroll < 0) {
+          return;
+        }
+
+        const scrollPositionTarget =
+          currentScrollY + deltaToScroll + additionalScroll;
+        scrollToPosition(scrollPositionTarget, true);
+      });
+    });
+
+    const didHideListener = Keyboard.addListener('keyboardDidHide', () => {
+      setAdditionalPadding(0);
+      setIsKeyboardVisible(false);
+    });
+
+    const willHideListener = Keyboard.addListener(
+      'keyboardWillHide',
+      frames => {
+        // iOS only, scroll back to initial position to avoid flickering
+        const keyboardHeight = frames.endCoordinates.height;
+        const currentScrollY = scrollPositionRef.current;
+        if (currentScrollY <= 0) {
+          return;
+        }
+
+        const scrollPositionTarget = currentScrollY - keyboardHeight;
+        scrollToPosition(currentYPosition.current, true);
+      },
+    );
+
+    return () => {
+      didShowListener.remove();
+      didHideListener.remove();
+      willHideListener.remove();
+    };
+  }, [additionalScroll, androidStatusBarOffset, scrollToPosition]);
+
+  return (
+    <ScrollView
+      ref={scrollViewRef}
+      contentContainerStyle={[contentContainerStyle]}
+      contentInset={{bottom: additionalPadding}}
+      keyboardShouldPersistTaps="never"
+      bounces={false}
+      onMomentumScrollEnd={event => {
+        scrollPositionRef.current = event.nativeEvent.contentOffset.y;
+      }}
+      onScrollEndDrag={event => {
+        scrollPositionRef.current = event.nativeEvent.contentOffset.y;
+      }}
+      onLayout={event => {
+        scrollViewSizeRef.current = event.nativeEvent.layout.height;
+      }}
+      onContentSizeChange={(_width, height) => {
+        const currentContentHeight = scrollContentSizeRef.current;
+        const contentSizeDelta = height - currentContentHeight;
+        scrollContentSizeRef.current = height;
+        if (!isKeyboardVisible) {
+          return;
+        }
+        const currentScrollY = scrollPositionRef.current;
+        const scrollPositionTarget = currentScrollY + contentSizeDelta;
+        scrollToPosition(scrollPositionTarget, true);
+      }}
+      {...props}>
+      <View style={{paddingBottom: Platform.OS === 'ios' ? 0 : additionalPadding}}>
+        {children}
+      </View>
+    </ScrollView>
+  );
+};
+
+export default KeyboardScrollView;

package/src/input/SearchViewInput.tsx

@@ -0,0 +1,183 @@
+import React, { useState, useRef } from 'react';
+import {
+  View,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  NativeSyntheticEvent,
+  TextInputFocusEventData,
+  TextInputProps,
+} from 'react-native';
+import { Colors } from '../utils/BaseStyle';
+import { Ionicons } from '@expo/vector-icons';
+
+interface SearchViewInputProps extends Omit<TextInputProps, 'style'> {
+  /**
+   * Value of the search input
+   */
+  value: string;
+  
+  /**
+   * Callback when text changes
+   */
+  onChangeText: (text: string) => void;
+  
+  /**
+   * Placeholder text for the search input
+   */
+  placeholder?: string;
+  
+  /**
+   * Callback when the clear button is pressed
+   */
+  onClear?: () => void;
+  
+  /**
+   * Callback when the search input is submitted
+   */
+  onSubmit?: () => void;
+  
+  /**
+   * Custom style for the container
+   */
+  containerStyle?: ViewStyle;
+  
+  /**
+   * Custom style for the input
+   */
+  inputStyle?: TextStyle;
+  
+  /**
+   * Whether to show the clear button when there is text
+   * @default true
+   */
+  showClearButton?: boolean;
+  
+  /**
+   * Whether to auto focus the input when mounted
+   * @default false
+   */
+  autoFocus?: boolean;
+  
+  /**
+   * Callback when the input is focused
+   */
+  onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+  
+  /**
+   * Callback when the input is blurred
+   */
+  onBlur?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
+  
+  /**
+   * Test ID for the search input
+   */
+  testID?: string;
+}
+
+/**
+ * A reusable search input component with a clear button
+ */
+const SearchViewInput: React.FC<SearchViewInputProps> = ({
+  value,
+  onChangeText,
+  placeholder = 'Search',
+  onClear,
+  onSubmit,
+  containerStyle,
+  inputStyle,
+  showClearButton = true,
+  autoFocus = false,
+  onFocus,
+  onBlur,
+  testID,
+  ...restProps
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+
+  const handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setIsFocused(true);
+    if (onFocus) {
+      onFocus(e);
+    }
+  };
+
+  const handleBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setIsFocused(false);
+    if (onBlur) {
+      onBlur(e);
+    }
+  };
+
+  const handleClear = () => {
+    onChangeText('');
+    if (onClear) {
+      onClear();
+    }
+    // Focus the input after clearing
+    inputRef.current?.focus();
+  };
+
+  const handleSubmitEditing = () => {
+    if (onSubmit) {
+      onSubmit();
+    }
+  };
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <TextInput
+        ref={inputRef}
+        style={[styles.input, inputStyle]}
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor={Colors.placeholderColor}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onSubmitEditing={handleSubmitEditing}
+        returnKeyType="search"
+        autoFocus={autoFocus}
+        testID={testID}
+        {...restProps}
+      />
+      {showClearButton && value.length > 0 && (
+        <TouchableOpacity
+          style={styles.clearButton}
+          onPress={handleClear}
+          testID={`${testID}-clear-button`}
+        >
+          <Ionicons name="close-circle" size={24} color={Colors.darkGrayColor} />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: Colors.borderColor,
+    borderRadius: 10,
+    paddingStart: 16,
+    paddingEnd: 8,
+    height: 50,
+  },
+  input: {
+    flex: 1,
+    height: '100%',
+    fontSize: 16,
+    color: Colors.textMidnightColor,
+    padding: 0,
+  },
+  clearButton: {
+    padding: 4,
+  },
+});
+
+export default SearchViewInput;