@ramses-superapp/ramses-ui/lib/module/components/RsTextInput.js

Skinless UI primitives for Ramses Built Apps

"use strict";

import { StyleSheet, TextInput, TouchableWithoutFeedback, View, Platform } from 'react-native';
import React, { useRef, useState } from 'react';
import { useTheme } from "../hooks/ThemeProvider.js";
import { useMemo } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
const RsTextInput = ({
  value = '',
  placeholder = '',
  onChangeText = () => {},
  onFocus,
  onBlur,
  containerStyle = undefined,
  fontSize = 14,
  fontWeight = 'Regular',
  textAlign = 'left',
  textTransform = 'none',
  color,
  style,
  ...props
}) => {
  const [isFocused, setIsFocused] = useState(false);
  const [inputValue, setInputValue] = useState(value);
  const inputRef = useRef(null);
  const theme = useTheme();
  const styles = useMemo(() => generateStyles(theme, {
    fontSize,
    fontWeight,
    textAlign,
    textTransform,
    color
  }, isFocused), [theme, fontSize, fontWeight, textAlign, textTransform, color, isFocused]);
  return /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
    onPress: () => inputRef.current?.focus(),
    children: /*#__PURE__*/_jsx(View, {
      style: containerStyle ?? styles.container,
      children: /*#__PURE__*/_jsx(TextInput, {
        ref: inputRef,
        value: inputValue,
        placeholder: placeholder,
        placeholderTextColor: theme.Text.inputPlaceholder,
        onChangeText: text => {
          setInputValue(text);
          onChangeText(text);
        },
        style: style ?? styles.input,
        onFocus: e => {
          setIsFocused(true);
          onFocus && onFocus(e);
        },
        onBlur: e => {
          setIsFocused(false);
          onBlur && onBlur(e);
        },
        submitBehavior: "blurAndSubmit",
        selectionColor: theme.Borders.inputActive,
        ...props
      })
    })
  });
};
export default RsTextInput;
const generateStyles = (theme, style, isFocused) => StyleSheet.create({
  container: {
    width: '100%',
    minHeight: 44,
    paddingHorizontal: 12,
    paddingVertical: Platform.OS === 'android' ? 4 : 10,
    borderWidth: 1,
    borderRadius: 10,
    borderColor: isFocused ? theme.Borders.inputActive : theme.Borders.input,
    backgroundColor: theme.Background.input,
    flexDirection: 'row',
    alignItems: 'center'
  },
  input: {
    flex: 1,
    padding: 0,
    margin: 0,
    color: style.color || theme.Text.inputText || theme.Text.text,
    fontSize: style.fontSize,
    textAlign: style.textAlign,
    fontFamily: `Cairo-${style.fontWeight}-Tight`,
    textTransform: style.textTransform,
    includeFontPadding: false,
    textAlignVertical: 'center'
  }
});
//# sourceMappingURL=RsTextInput.js.map