RNRF Header+Component Part2

rnrflogic2.js

'use strict';
import React, {Component} from 'react';
import {StyleSheet, Image, Text, TouchableWithoutFeedback, TouchableOpacity, View} from 'react-native';

import { Actions } from 'react-native-router-flux';
import { connect } from 'react-redux';
import LinearGradient from 'react-native-linear-gradient';
import Icon from 'react-native-vector-icons/FontAwesome';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import cssConfig from '../styles/config';
import config from '../config';
import * as typeActions from '../actions/builderTypeActions';

var dismissKeyboard = require('dismissKeyboard');

//Custom mapStateToProps that maps stores contained in props.connectStore
function mapStateToProps(state, ownProps) {
  if (!ownProps.connectStore) return {dummy:{}};
  let stores = {};
  if (Array.isArray(ownProps.connectStore)) {
    ownProps.connectStore.forEach((name) => { stores[name] = state[name]; });
  } else {
    stores = {
      [ownProps.connectStore]: state[ownProps.connectStore],
    };
  }
  
  return stores;
}

class Header extends Component {
  

  static validateURL() {
      const builderType = this.props.builderType.toJS();
      const link = builderType.url_link;
      const title = builderType.url_title;
      const enoughChars = link.length > 10 && title.length > 3 && link.toLowerCase().match(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/);

      const url = { text:builderType.url_link, title: builderType.url_title };
      if (!enoughChars) return;
      Actions.pop();
      //Pop URLView and refresh the page that called it with the data.
      setTimeout(()=>{
        Actions.refresh({ url });
        this.props.dispatch({type:'URL_STEP_CHANGED',step:0});
      },400);
  }
    
  shouldRenderURL() {
    if (this.props.url) {
      const builderType = this.props.builderType.toJS();
      const link = builderType.url_link;
      const title = builderType.url_title;
      const enoughTitle = title.length > 3;
      const enoughChars = link.length > 10 && link.toLowerCase().match(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/);
      const checkClasses = {
        0: enoughTitle ? '#6cda36' : '#ccc',
        1: enoughChars ? '#6cda36' : '#ccc'
      };
      const step = builderType.url_step;
      return (
        <View style={{position:'absolute',top:0,left:0,right:0,flexDirection:'row',alignSelf: 'stretch',flex:1}}>
        
        <TouchableOpacity style={[styles.headerIcon,{
            right:10,
          }]}
          onPress={() => {
            
            if (step) {
              this.validateURL();
            } else {
              this.props.dispatch({type:typeActions.URL_STEP_CHANGED,step:1});
            }
          }}>
          <MaterialIcon size={30} color={checkClasses[step]} name="done" />
        </TouchableOpacity>
        
        
        
        <TouchableOpacity style={[styles.headerIcon,{
            left:10,
          }]}
          
          onPress={() => {
            if (step) {
              //Back one step
              this.props.dispatch({type:typeActions.URL_STEP_CHANGED,step:0});
            } else {
              Actions.pop();
            }
          }}>
          <MaterialIcon size={30} color='#666' name="keyboard-backspace" />
        </TouchableOpacity>
        
        </View>
      );
    }
  }
    
  renderNormal() {
    let title = this.props.title;
    
    if (this.props.url) {
      const builderType = this.props.builderType.toJS();
      title = builderType.url_step ? 'Add a link' : 'Add a title';
    }
    
    
    
    const colors = this.props.lightStyle ? ['#fcfcfc','#fcfcfc'] : ['#3e3f40','#3e3f40'];
    return (
      <View style={{backgroundColor:'transparent'}}>
      <View start={[0,1]} end={[1,0]} style={[styles.container,{backgroundColor:'#3e3f40'},this.props.lightStyle && {backgroundColor:'#fcfcfc',borderTopWidth:0,borderLeftWidth:0,borderRightWidth:0,borderBottomWidth:1,borderColor: '#e0e0e0'}]} colors={colors}>
      <Text style={[styles.title,this.props.lightStyle && { color: '#666'}]}>{title || '...'}</Text>
    </View>
    {this.shouldRenderURL()}
    </View>
  );
}

render() {
  //debugger;
  return (
    <View  style={{
        position: 'absolute',
        top:0,
        left:0,
        right:0,
      }}>
      <TouchableWithoutFeedback onPress={() => dismissKeyboard() }>
      { this.renderNormal() }
      </TouchableWithoutFeedback>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  headerIcon: {
    position: 'absolute',
    top:cssConfig.header.gearTop - 5,
    padding:0,
    paddingLeft:15,
    paddingRight:15,
    borderWidth:0,
    height:31,
  },
  container: {
    height: cssConfig.header.height,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fcfcfc',
  },
  title: {
    color: 'white',
    fontWeight: 'normal',
    fontSize: 22,
    letterSpacing: 0.4,
    backgroundColor: 'transparent',
    textShadowRadius: 3,
    marginTop:14,
    fontFamily: 'Bariol',
  },
  time: {
    color: '#ffcccf',
    fontWeight: 'bold',
    fontSize: 15,
    letterSpacing: 0.4,
    backgroundColor: 'transparent',
    textShadowRadius: 3,
    paddingTop:0,
    fontFamily: 'Bariol',
  }
});
export default connect(mapStateToProps)(Header);