rn_tes

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Alert,
  TextInput
} from 'react-native';
import {List, ListItem, Button} from 'react-native-elements'

export default class element_login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: '',
      userPassword: '',
      userNameAutoFocus:true,
      userNameFocus: true,
      userPasswordFocus: false
    }
  }
  componentDidMount(){
    console.log(this.state);
  }
  loginButtonClicked() {
    //prevent annoying focus
    this.setState({userNameFocus: false, userPasswordFocus: false})
  }
  registerButtonClicked() {
    Alert.alert("aa", "this will be replace by navigator")
  }
  resetButtonClicked() {
    this.setState({userName: '', userNameFocus: true, userPassword: '', userPasswordFocus: false});
  }
  nextFormComponent(event) {
    switch (event) {
      case "password":
        // since ref cannot work so we bypass using props
        /** this.refs.passwordField.focus(); **/
        this.setState({userNameFocus: false, userPasswordFocus: true});
        break;
      case "submit":
        // do nothing ..
        break;
      default:
       // Alert.alert("system", "Unknown Request")
    }
  }
  /**
   * Bind Data . the reason using standard   textInputOnChangeText={(text) => this.setState({text})} not working
   * @param {string} id
   * @param {string} value
   */
  bindData(id, value) {
    // seem pretty odd here cannot work this.setState({idx: value});
    switch (id) {
      case "userName":
        this.setState({"userName": value});
        break;
      case "userPassword":
        this.setState({"userPassword": value});
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>This sample user login
        </Text>
        <Text></Text>
        <List>
          <ListItem
            title="Username"
            textInput={true}
            textInputValue={this.state.userName}
            textInputSecureTextEntry={false}
            textInputOnChangeText={this
            .bindData
            .bind(this, 'userName')}
            textInputAutoFocus={this.state.userNameAutoFocus}
            textInputFocus={this.state.userNameFocus}
            textInputKeyboardType="default"
            textInputPlaceHolder="Type your Username Here"
            textInputContainerStyle={styles.inputFormStyle}
            textInputOnSubmitEditing={this
            .nextFormComponent
            .bind(this, 'userPassword')}
            textInputReturnKeyType="next"></ListItem>
          <ListItem
            title="Password"
            textInputSecureTextEntry={true}
            textInput={true}
            textInputValue={this.state.userPassword}
            textInputOnChangeText={this
            .bindData
            .bind(this, 'userPassword')}
            textInputFocus={this.state.userPasswordFocus}
            textInputKeyboardType="default"
            textInputPlaceHolder="Type Your Password Here"
            textInputContainerStyle={styles.inputFormStyle}
            textInputOnSubmitEditing={this
            .nextFormComponent
            .bind(this, 'submit')}
            textInputReturnKeyType="done">></ListItem>
        </List>
        <Button
          title="login"
          onPress={this
          .loginButtonClicked
          .bind(this)}></Button>
        <Text></Text>
        <Button
          title="Register"
          onPress={this
          .registerButtonClicked
          .bind(this)}></Button>
        <Text></Text>
        <Button
          title="Reset"
          onPress={this
          .resetButtonClicked
          .bind(this)}></Button>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  inputFormStyle: {
    flex: 1
  }
});

AppRegistry.registerComponent('element_login', () => element_login);