hcmobile-sdk/components/textInput/index.js

mobile-sdk

//import liraries
import React, { Component } from 'react';
import { 
    View, 
    TextInput, 
    StyleSheet 
} from 'react-native';
import PropTypes from 'prop-types';

// create a component
class HCTextInput extends Component {

    static propTypes = {
        style : PropTypes.object,
        mulitline : PropTypes.bool,
        placeholder : PropTypes.string,
        value : PropTypes.string,
        defalutValue : PropTypes.string,
        keyboardType : PropTypes.string,
        editable : PropTypes.bool,
        maxLength : PropTypes.number,
        onEndEditing : PropTypes.func,
        placeholderTextColor : PropTypes.string,
        secureTextEntry : PropTypes.bool,
        onChangeText : PropTypes.func,
        underlineColor : PropTypes.string,
        underlineWidth : PropTypes.number,
    }

    constructor(props) {
        super(props);

        this.state = {
            value:this.props.value ? this.props.value : '',
        };
        this.getValue = this.getValue.bind(this);
    }

    componentWillReceiveProps(nextProps, nextState) {
        let value = nextProps.value;
        this.setState({
            value,
        })
    }

    getValue(){
        return this.state.value;
    }
    
    render() {
        const {
            style,
            mulitline,
            placeholder,
            value,
            defalutValue,
            keyboardType,
            editable,
            maxLength,
            onEndEditing,
            placeholderTextColor,
            secureTextEntry,
            onChangeText,
            getText,
            underlineColor,
            underlineWidth,
        } = this.props;
        let containerStyle = [
                    styles.container,
                    {   
                        borderBottomColor: underlineColor ? underlineColor : '#999',
                        borderBottomWidth:underlineWidth ? underlineWidth : 0.5
                    },
                    style
                ];
        return (
                <TextInput
                    style = {containerStyle}
                    placeholder= {placeholder}
                    underlineColorAndroid = {'transparent'}
                    multiline = {mulitline} 
                    value = {this.state.value}
                    defalutValue = {defalutValue}
                    keyboardType = {keyboardType ? keyboardType : null}
                    editable = {editable == undefined ? true : editable}
                    maxLength = {maxLength? maxLength : null}
                    placeholderTextColor = {placeholderTextColor ? placeholderTextColor : null}
                    secureTextEntry = {secureTextEntry}
                    onEndEditing = {() => {
                        if(onEndEditing){
                            onEndEditing();
                        }
                    }}
                    onChangeText = {(text) => {
                        if(onChangeText){
                            onChangeText(text);
                        }
                        this.setState({
                            value : text,
                        });
                    }}

                />
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    container: {
        margin:0,
        padding:0,
        paddingLeft:5,
        paddingRight:5,
    },
});

//make this component available to the app
export default HCTextInput;