RNRF Header+Component.js

rnrflogic1.js

//
// Gif of the page: http://i.imgur.com/fGZGkKB.gifv
//


'use strict';
import React, {Component} from 'react';
import {ScrollView, StyleSheet, TextInput, Text, View} from 'react-native';


import cssConfig from '../styles/config';

import { connect } from 'react-redux';
import Header from '../components/Header';
import { Actions } from 'react-native-router-flux';
import * as typeActions from '../actions/builderTypeActions';


const storeName = 'builderType'; //The store both Header and this Component will connect
function mapStateToProps(state) {
  return {
    [storeName]: state.builderType,
  };
}

class URLView extends Component {
  constructor(props) {
    super(props);
    const builderType = this.props.builderType.toJS();
    this.state = {
      valid: false,
      title:builderType.url_title,
      url: builderType.url_link,
      focus:false,
      step:0,
    }
  }
  
  static renderNavigationBar(props) {
    return <Header title="URL" connectStore={storeName} url={true} navigationState={props.navigationState} />;
}


renderFirstStep() {
  return (
    <TextInput
    ref='myTitle'
    autoFocus={true}
    placeholder='Enter a title'
    clearButtonMode='always'
    returnKeyType='next'
    style={{backgroundColor:'white',fontSize:18,letterSpacing:3,textAlign:'center',lineHeight:60,height:60,padding:20,marginLeft:20,marginRight:20,borderRadius:6, borderWidth: 0,flex:1,color:'#666'}}
    onChangeText={(title) => {
      this.setState({title});
      if (this.timeout) clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.props.dispatch({
          type: typeActions.URL_TITLE_CHANGED,
          title,
        });
      },400);
      
    }}
    onSubmitEditing={()=>{
      this.props.dispatch({type:typeActions.URL_STEP_CHANGED,step:1});
    }}
    value={this.state.title}
    />
);
}




renderSecondStep() {
  return (
    <TextInput
    ref='myTitle'
    autoFocus={true}
    placeholder='Enter a link'
    clearButtonMode='always'
    returnKeyType='default'
    style={{backgroundColor:'white',fontSize:18,letterSpacing:3,textAlign:'center',lineHeight:60,height:60,padding:20,marginLeft:20,marginRight:20,borderRadius:6, borderWidth: 0,flex:1,color:'#666'}}
    onChangeText={(url) => {
      this.setState({url});
      if (this.timeout) clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        this.props.dispatch({
          type: typeActions.URL_LINK_CHANGED,
          link:url,
        });
      },400);
    }}
    onSubmitEditing={Header.validateURL.bind(this)}
    value={this.state.url}
    />
);
}

render() {
  const step = this.props.builderType.toJS().url_step;
  const textEdit = step ? this.renderSecondStep() : this.renderFirstStep();
  return (
    <View style={styles.container}>
    <View style={{
        flexDirection: 'column',
        backgroundColor: 'white',
        paddingTop:60,
      }}>
      { textEdit }
      </View>
      </View>
      
    );
  }
}

export default connect(mapStateToProps)(URLView);

const styles = StyleSheet.create({
  section: {
    //backgroundColor: ''
    borderWidth:0,
    height:40,
    alignItems:'center',
    flexDirection:'row',
    justifyContent: 'flex-start',
  },
  sectionText:{
    marginLeft:20,
    fontFamily: 'Bariol-bold',
    fontSize:15,
    color:'#a6a6a6',
  },
  builderTop: {
    height:cssConfig.header.height,
  },
  container: {
    flex: 1,
    position: 'relative',
    marginTop:cssConfig.header.height,
    backgroundColor: '#ffffff',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});