SquareOffsetView.js

import React, {Component, PropTypes} from 'react';
import {TouchableWithoutFeedback,View,Dimensions,
  StyleSheet, Image, Text, TouchableOpacity} from 'react-native';
import Overlay from 'react-native-overlay';
import FloatLabelTextInput from 'react-native-floating-label-text-input';
import {Button, Icon, Item, Input} from 'native-base';
import AwesomeAlert from 'react-native-awesome-alerts';
import DismissKeyboard from 'react-native-dismiss-keyboard';
import SettingMenuContainer from '../settings/SettingMenuContainer';
import AppStrings from '../../localization/appStrings';
import {cleanNumericString} from '../../utils/stringUtils';
import {SOP_BLUE} from './../../styles/commonStyles';
import DeckSwiperComponent from './../../components/DeckSwiperComponent';

const ScreenWidth = Dimensions.get('window').width;

class SquareOffsetView extends Component {

  static propTypes = {
    set: PropTypes.number,
    travel: PropTypes.number,
    run: PropTypes.number,
    loading: PropTypes.bool.isRequired,
    isVisible: PropTypes.bool.isRequired,
    isCalcEnabled: PropTypes.bool.isRequired,
    squareOffsetStateActions: PropTypes.shape({
      increment: PropTypes.func.isRequired,
      calculate: PropTypes.func.isRequired,
      reset: PropTypes.func.isRequired,
      toggleVisibility: PropTypes.func.isRequired
    }).isRequired,
    navigationStateActions: PropTypes.shape({
      pushRoute: PropTypes.func.isRequired
    }).isRequired
  };

  constructor(props) {
    super(props);
    this.state = {
      setflag: false,
      travelflag: false,
      runflag: false,
      showAlert: false,
      cards: []
    };
  }

  componentWillMount() {
    const that = this;
    that.setState({cards: [
      {
        title: AppStrings.diagramOneTitle,
        details: AppStrings.diagramOneDetails,
        image: require('../../images/diagram-1@2x.png')
      },
      {
        title: AppStrings.diagramFourTitle,
        details: AppStrings.diagramFourDetails,
        image: require('../../images/diagram-4@2x.png')
      }
    ]});
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.travel !== this.state.travelValue && nextProps.travel) {
      this.onChangeTravelValue(nextProps.travel.toString());
    }
    if (nextProps.set !== this.state.setValue && nextProps.set) {
      this.onChangeSetValue(nextProps.set.toString());
    }
    if (nextProps.run !== this.state.runValue && nextProps.run) {
      this.onChangeRunValue(nextProps.run.toString());
    }
  }

  increment = () => {
    this.props.squareOffsetStateActions.increment();
  };

  toggleVisibility = () => {
    DismissKeyboard();
    this.props.squareOffsetStateActions.toggleVisibility();
  };

  /**
   * calculate if two numbers provided
   */
  calculate = () => {

    if (this.state.setValue && (this.state.runValue !== 0 && this.state.runValue))
    {

      this.setState({setflag: true, travelflag: true, runflag: true,showAlert: false});
      if (!parseInt(this.state.setValue).isNaN && !parseInt(this.state.travelValue).isNaN && !parseInt(this.state.runValue).isNaN) {
        this.props.squareOffsetStateActions.calculate(
        parseFloat(cleanNumericString(this.state.setValue)),
        parseFloat(this.state.travelValue),
        parseFloat(cleanNumericString(this.state.runValue)));
      }
    } else {
      this.setState({showAlert: true});
    }
  };

  reset = () => {
    this.props.squareOffsetStateActions.reset();
    this.setState({setflag: false, travelflag: false, runflag: false});
    this.setState({setValue: '', travelValue: '', runValue: ''});
  };

  hideAlert = () => {
    this.setState({
      showAlert: false
    });
  };

  onChangeSetValue = (text) => {

    this.setState({setflag: false});
    this.setState({setValue: text});

  }

  onChangeTravelValue = (text) => {

    this.setState({travelflag: true});
    this.setState({travelValue: text});

  }

  onChangeRunValue = (text) => {

    this.setState({runflag: false});
    this.setState({runValue: text});

  }

  render() {
    return (
      <TouchableWithoutFeedback onPress={ () => { DismissKeyboard(); } }>
      <View style={styles.viewContainer}>
          
          <View style={styles.itemContainer}>
            <View style={styles.columnA}>
              <Item style={styles.item}>
                <FloatLabelTextInput
                placeholder={AppStrings.runTextString}
                keyboardType= 'numeric'
                value={this.state.runflag && this.props.run ? this.props.run.toString() : this.state.runValue}
                style={styles.textInput}
                onChangeTextValue={this.onChangeRunValue}
                />
              </Item>
              <Item style={styles.item} >
                <Icon active name='home' />
                <Input placeholder='A' disabled/>
              </Item>
            </View>
            <View style={styles.columnB}>
              <Item style={styles.item}>
                <FloatLabelTextInput
                placeholder={AppStrings.runTextString}
                keyboardType= 'numeric'
                value={this.state.runflag && this.props.run ? this.props.run.toString() : this.state.runValue}
                style={styles.textInput}
                onChangeTextValue={this.onChangeRunValue}
                />
              </Item>
              <Item style={styles.item}>
                <Icon active name='home' />
                <Input placeholder='B' disabled/>
              </Item>
            </View>
            <View style={styles.columnC}>
            <Item style={styles.item}>
              <FloatLabelTextInput
              placeholder={AppStrings.runTextString}
              keyboardType= 'numeric'
              value={this.state.runflag && this.props.run ? this.props.run.toString() : this.state.runValue}
              style={styles.textInput}
              onChangeTextValue={this.onChangeRunValue}
              />
            </Item>
            <Item style={styles.item}>
              <Icon active name='home' />
              <Input placeholder='C' disabled/>
            </Item>
            </View>
          </View>
      
        </View>
     </TouchableWithoutFeedback>
    );
  }
  }
const styles = StyleSheet.create({
  viewContainer: {
    flex: 1,
    backgroundColor: '#ecf0f1',
    marginBottom: 5
  },
  imageContainer: {
    flex: .5,
    flexDirection: 'column',
    justifyContent: 'space-between',
    backgroundColor: '#ecf0f1',
    padding: 5,
    margin: 5
  },
  itemContainer: {
    flex: 3,
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    marginBottom: 4
  },
  columnA: {
    paddingRight: 5
  },
  columnB: {
    paddingRight: 5
  },
  columnC: {
    paddingRight: 5
  },
  item: {
    alignSelf: 'stretch',
    margin: 2
  },
  overlayContainer: {
    backgroundColor: SOP_BLUE,
    flex: 1
  },
  awesomeAlertButton: {
    minHeight: '10%'
  },
  awesomeAlertText: {
    maxWidth: '90%',
    flexWrap: 'wrap'
  },
  buttonTextStlye:
  {
    color: 'white'
  },
  imageOpacity: {
    flex: 2.5,
    minWidth: ScreenWidth,
    maxWidth: ScreenWidth,
    marginBottom: 5
  },
  image: {
    resizeMode: 'stretch',
    flex: 3,
    minWidth: ScreenWidth,
    maxWidth: ScreenWidth,
    borderColor: '#888',
    marginBottom: 5
  },
  textInput: {
    alignSelf: 'stretch'
  },
  buttonView: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 15,
    marginBottom: 4
  }
});
export default SquareOffsetView;