Skip to content

Instantly share code, notes, and snippets.

@BrianJVarley

BrianJVarley/SquareOffsetView.js

Created September 19, 2018 21:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save BrianJVarley/495d94849d1f684f8d3a84ce76b4511b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save BrianJVarley/495d94849d1f684f8d3a84ce76b4511b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. BrianJVarley created this gist Sep 19, 2018.
    270 changes: 270 additions & 0 deletions SquareOffsetView.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,270 @@
    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/[email protected]')
    },
    {
    title: AppStrings.diagramFourTitle,
    details: AppStrings.diagramFourDetails,
    image: require('../../images/[email protected]')
    }
    ]});
    }

    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;