calchat/apps/client/src/components/CustomTextInput.tsx

import { TextInput, TextInputProps } from "react-native";
import { useThemeStore } from "../stores/ThemeStore";
import { useState } from "react";

export type CustomTextInputProps = {
  text?: string;
  focused?: boolean;
  className?: string;
  multiline?: boolean;
  onValueChange?: (text: string) => void;
  placeholder?: string;
  placeholderTextColor?: string;
  secureTextEntry?: boolean;
  autoCapitalize?: TextInputProps["autoCapitalize"];
  keyboardType?: TextInputProps["keyboardType"];
};

const CustomTextInput = (props: CustomTextInputProps) => {
  const { theme } = useThemeStore();
  const [focused, setFocused] = useState(props.focused ?? false);

  return (
    <TextInput
      className={`border border-solid rounded-2xl ${props.className}`}
      onChangeText={props.onValueChange}
      value={props.text}
      multiline={props.multiline}
      placeholder={props.placeholder}
      placeholderTextColor={props.placeholderTextColor}
      secureTextEntry={props.secureTextEntry}
      autoCapitalize={props.autoCapitalize}
      keyboardType={props.keyboardType}
      selection={!focused ? { start: 0 } : undefined}
      style={{
        backgroundColor: theme.messageBorderBg,
        color: theme.textPrimary,
        textAlignVertical: "top",
        borderColor: focused ? theme.chatBot : theme.borderPrimary,
      }}
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
    />
  );
};

export default CustomTextInput;