react-native-starter-provider/components/TextInput/index.js

smart log for react-native

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactNative, { View } from 'react-native';
import Text from '../Text';
import styles from './styles';

class TextInput extends Component {
  constructor(props) {
    super(props);

    this.state = { text: '' };
    this.placeholder = this.props.placeholder ? this.props.placeholder : '';

    this.inlineStyle = { ...styles.input };

    this.inlineStyle.color = '#000000';

    this.onChangeText = this.onChangeText.bind(this);
    this.getText = this.getText.bind(this);
  }
  onChangeText(text) {
    /*
      /^[a-zA-Z\s]*$/   karakter ve bosluk
      /^\d+$/           number
      /^\d{0,2}$/       number sadece 2 hane girisi
    */
    if (this.props.allowRegex) {
      if (this.props.allowRegex.test(text)) {
        this.setState({ text });
      }
    } else {
      this.setState({ text });
    }
    this.props.onChangeText(text);
  }

  getText() {
    if (this.state.text) {
      return this.state.text.trim();
    } else {
      return this.state.text;
    }
  }

  setText(text) {
    this.setState({ text });
  }

  focus() {
    this.TextInput.focus();
  }

  clear() {
    this.text = '';
    this.props.onChangeText(this.text);
    this.TextInput.clear();
  }

  renderTitle() {
    return (
      <View>
        <Text
          style={styles.title}
          fontWeight="semibold"
          translation={this.props.title}
        />
      </View>
    );
  }

  render() {
    return (
      <View style={[styles.container, this.props.containerStyle]}>
        {this.props.title ? this.renderTitle() : null}
        <ReactNative.TextInput
          {...this.props}
          ref={(inputRef) => { this.TextInput = inputRef; }}
          underlineColorAndroid="transparent"
          returnKeyType="done"
          autoCapitalize={this.props.autoCapitalize ? this.props.autoCapitalize : 'none'}
          accessible
          focusable // accesiblity, only android
          accessibilityLabel={this.placeholder}
          value={this.state.text}
          placeholder={this.placeholder}
          onChangeText={this.onChangeText}
          style={[this.inlineStyle, this.props.style]}
        />
      </View>
    );
  }
}

TextInput.propTypes = {
  onChangeText: PropTypes.func,
  placeholder: PropTypes.string,
  title: PropTypes.string,
  containerStyle: PropTypes.any,
  style: PropTypes.any,
  allowRegex: PropTypes.any,
};
TextInput.defaultProps = {
  onChangeText: () => {},
  placeholder: '',
  title: null,
  containerStyle: null,
  style: null,
  allowRegex: null,
};

export default TextInput;