Display numbers based on significant digits and format app menu

.gitignore

@@ -1,6 +1,6 @@
-# OSX
+# Editor
-#
+*.swp
-.DS_Store
+*.swo
 
 # Xcode
 #

src/components/calc.js

@@ -18,6 +18,18 @@ function getUnit(n) {
 	}
 }
 
+function significantDigits(num) {
+	// http://bateru.com/news/2011/04/code-of-the-day-javascript-significant-figures/
+	var n = String(num).trim(),
+		FIND_FRONT_ZEROS_SIGN_DOT_EXP = /^[\D0]+|\.|([e][^e]+)$/g,
+		FIND_RIGHT_ZEROS = /0+$/g;
+
+	if (!/\./.test(num)) {
+		n = n.replace(FIND_RIGHT_ZEROS, "");
+	}
+	return n.replace(FIND_FRONT_ZEROS_SIGN_DOT_EXP, "").length;
+};
+
 const styles = {
 	table: {
 		borderBottomColor: 'lightgrey',
@@ -40,20 +52,14 @@ export default class Calc extends Component {
 		const haveAllValid = state.have.every((x) => x.valid);
 		const haveNonEmpty = state.have.some((x) => x.value);
 
-		const precision = () => {
+		const sigDigs = targetValid && targetNonEmpty ?
-			if (targetValid && targetNonEmpty) {
+			significantDigits(state.target.value) : 0;
-				const pieces = state.target.value.split('.');
+
-				if (pieces[1]) {
+		let precision = 3;
-					if (pieces[1].length > 20) {
+		if (sigDigs > 3) {
-						return 20; // Max toFixed() allows
+			// toPrecision() has a max of 20
+			precision = sigDigs > 20 ? 20 : sigDigs;
 		}
-					if (pieces[1].length > 2) {
-						return pieces[1].length;
-					}
-				}
-			}
-			return 2;
-		};
 
 		const targetRes = state.target.value * state.target.mult;
 
@@ -71,7 +77,7 @@ export default class Calc extends Component {
 			if (haveAllValid && haveNonEmpty) {
 				const {unit, mult} = getUnit(sum);
 				const val = sum / mult;
-				return val.toFixed(precision()) + unit;
+				return val.toPrecision(precision) + unit;
 			} else {
 				return '---';
 			}
@@ -81,18 +87,17 @@ export default class Calc extends Component {
 			if (targetValid && targetNonEmpty && haveAllValid && haveNonEmpty) {
 				// Check if the 'overall resistor value' matches the target
 				const {unit, mult} = getUnit(targetRes);
-				console.log((targetRes / mult).toFixed(precision()) + unit);
+				if (printSum() === (targetRes / mult).toPrecision(precision) + unit) {
-				if (printSum() === (targetRes / mult).toFixed(precision()) + unit) {
+					return (0.0).toPrecision(precision);
-					return (0.0).toFixed(precision());
 				}
-				return percentError.toFixed(precision());
+				return percentError.toPrecision(precision);
 			} else {
 				return '---';
 			}
 		};
 
 		const printNextRes= () => {
-			if (targetValid && targetNonEmpty && haveAllValid && haveNonEmpty) {
+			if (targetValid && targetNonEmpty && haveAllValid) {
 				// Check if we are done because error is 0 or value's exact
 				if (nextRes == Infinity || printPercentError() == 0.0) {
 					return 'Done.';
@@ -101,7 +106,7 @@ export default class Calc extends Component {
 				}
 				const {unit, mult} = getUnit(nextRes);
 				const val = nextRes / mult;
-				return val.toFixed(precision()) + unit;
+				return val.toPrecision(precision) + unit;
 			} else {
 				return '---';
 			}

src/components/menu.js

@@ -1,14 +1,20 @@
 import React, {Component} from 'react';
-import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';
+import {Image, ScrollView, StyleSheet, View, TouchableOpacity} from 'react-native';
 
-const styles = StyleSheet.create({
+import MyText from './mytext.js';
+
+const styles = {
 	main: {
 		backgroundColor: '#ffffff',
 		flex: 1,
-		alignItems: 'center',
-		justifyContent: 'center',
 	},
-});
+	menutable: {
+		borderBottomColor: 'lightgrey',
+		borderBottomWidth: 1,
+		padding: 15,
+		fontSize: 16,
+	},
+};
 
 export default class Menu extends Component {
 	constructor(props) {
@@ -20,9 +26,13 @@ export default class Menu extends Component {
 
 		return (
 			<View style={styles.main}>
-				<Text onPress={main}>Calculator</Text>
+				<ScrollView>
-				<Text onPress={help}>Help</Text>
+					<Image style={{alignSelf: 'flex-start', height: 121.30401, width: 250}} source={require('../images/menulogo.png')} resizeMode={'contain'} />
-				<Text>Link 4</Text>
+					<MyText style={styles.menutable} onPress={main}>Calculator</MyText>
+					<MyText style={styles.menutable} onPress={help}>Help</MyText>
+					<MyText style={styles.menutable} onPress={null}>Tips</MyText>
+					<MyText style={[styles.menutable, {borderBottomWidth: 0}]} onPress={null}>About</MyText>
+				</ScrollView>
 			</View>
 		);
 	}

src/components/resistor.js

@@ -52,7 +52,7 @@ class Resistor extends Component {
 			updatemult('1');
 		}
 
-		return (
+		return data ? (
 			<View style={{flex: 1, flexDirection: 'row', justifyContent: 'center', margin: 3}}>
 				<TextInput
 					value={data.value || ''}
@@ -97,7 +97,7 @@ class Resistor extends Component {
 					<Text>Clear</Text>
 				</TouchableOpacity>
 			</View>
-		);
+		) : null;
 	}
 }
 

src/containers/nav.js

@@ -1,6 +1,6 @@
 'use strict'; 
 import React, {Component} from 'react';
-import {View, StyleSheet} from 'react-native';
+import {Navigator, View, StyleSheet} from 'react-native';
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -8,6 +8,8 @@ import Drawer from 'react-native-drawer';
 
 import * as menuActions from '../actions/menuActions';
 import MenuApp from '../containers/menuApp';
+import CalcApp from '../containers/calcApp';
+import HelpApp from '../containers/helpApp';
 
 class Nav extends Component {
 	constructor(props) {
@@ -52,7 +54,18 @@ class Nav extends Component {
 					title="Exact Resistor Calculator"
 				/>
 				<View style={{flex: 1}}>
-					{state.page}
+					<Navigator
+						renderScene={(route, navigator) => {
+							switch (state.page) {
+								case 'main':
+									return <CalcApp />;
+								case 'help':
+									return <HelpApp />;
+								default:
+									return <CalcApp />;
+							}
+						}}
+					/>
 				</View>
 			</Drawer>
 		);

src/reducers/menu.js

@@ -1,13 +1,10 @@
 import React, {Component} from 'react';
 import * as types from '../actions/actionTypes';
 
-import CalcApp from '../containers/calcApp';
-import HelpApp from '../containers/helpApp';
-
 const initialState = {
 	isOpen: false,
 	refdrawer: null,
-	page: <CalcApp />,
+	page: 'main',
 	subtitle: 'Calculator Page',
 };
 
@@ -27,14 +24,14 @@ export default function menu(state = initialState, action = {}) {
 			return {
 				...state,
 				isOpen: false,
-				page: <CalcApp />,
+				page: 'main',
 				subtitle: 'Calculator Page',
 			};
 		case types.HELP:
 			return {
 				...state,
 				isOpen: false,
-				page: <HelpApp />,
+				page: 'help',
 				subtitle: 'Help',
 			};
 		default: