@hedia/recommendation-screen 2.1.3-beta.6 → 2.1.3

package/src/components/RecommendationModal.js

@@ -1,37 +1,12 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.stylesModal = void 0;
-const macro_1 = require("@lingui/macro");
-const React = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const react_native_modal_1 = __importDefault(require("react-native-modal"));
-const i18nUtils_1 = require("../locale/i18nUtils");
-const enum_1 = require("../types/enum");
-const Constants_1 = require("../utils/Constants");
-const LimitationMessage_1 = __importDefault(require("./LimitationMessage"));
-class RecommendationModal extends React.Component {
+import { t } from "@lingui/macro";
+import * as React from "react";
+import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import ReactNativeModal from "react-native-modal";
+import { i18n } from "../locale/i18nUtils";
+import { RecommendationModalTestIds } from "../types/enum";
+import { BORDER_COLOUR_TEAL } from "../utils/Constants";
+import LimitationMessage from "./LimitationMessage";
+export default class RecommendationModal extends React.Component {
     constructor(props) {
         super(props);
         this.onPressNextButton = () => {
@@ -40,63 +15,63 @@ class RecommendationModal extends React.Component {
             return isPageVisible ? this.setState({ firstPageVisible: false }) : this.props.onClickOkButton();
         };
         this.recommendationButtons = () => {
-            return (<react_native_1.View style={exports.stylesModal.recommendationButtonsContainer}>
-				<react_native_1.TouchableOpacity testID={enum_1.RecommendationModalTestIds.AcceptCarbs} accessibilityLabel="yesButtonModal" style={exports.stylesModal.affirmativeCarbsButton} onPress={this.props.onAcceptCarbohydrates}>
-					<react_native_1.Text style={exports.stylesModal.affirmativeCarbsText}>{i18nUtils_1.i18n._(macro_1.t `OK`)}</react_native_1.Text>
-				</react_native_1.TouchableOpacity>
-				<react_native_1.TouchableOpacity testID={enum_1.RecommendationModalTestIds.DeclineCarbs} accessibilityLabel="noButtonModal" style={exports.stylesModal.negativeCarbsButton} onPress={this.props.onDeclineCarbohydrates}>
-					<react_native_1.Text style={exports.stylesModal.negativeCarbsText}>{i18nUtils_1.i18n._(macro_1.t `NO`)}</react_native_1.Text>
-				</react_native_1.TouchableOpacity>
-			</react_native_1.View>);
+            return (<View style={stylesModal.recommendationButtonsContainer}>
+				<TouchableOpacity testID={RecommendationModalTestIds.AcceptCarbs} accessibilityLabel="yesButtonModal" style={stylesModal.affirmativeCarbsButton} onPress={this.props.onAcceptCarbohydrates}>
+					<Text style={stylesModal.affirmativeCarbsText}>{i18n._(t `OK`)}</Text>
+				</TouchableOpacity>
+				<TouchableOpacity testID={RecommendationModalTestIds.DeclineCarbs} accessibilityLabel="noButtonModal" style={stylesModal.negativeCarbsButton} onPress={this.props.onDeclineCarbohydrates}>
+					<Text style={stylesModal.negativeCarbsText}>{i18n._(t `NO`)}</Text>
+				</TouchableOpacity>
+			</View>);
         };
         this.recommendCarbohydrates = (suggestedCarbohydrates) => {
             const displayCarbs = Math.round(suggestedCarbohydrates);
             return (<React.Fragment>
-				<react_native_1.View style={exports.stylesModal.innerView}>
-					<react_native_1.View style={exports.stylesModal.recommendationRow}>
-						<react_native_1.Text style={exports.stylesModal.recommendEatingText}>
-							{i18nUtils_1.i18n._(macro_1.t `We recommend eating an additional:`)}
-						</react_native_1.Text>
-					</react_native_1.View>
-					<react_native_1.View style={exports.stylesModal.suggestedContainer}>
-						<react_native_1.Text style={exports.stylesModal.textCenter}>
-							<react_native_1.Text style={exports.stylesModal.suggestedCarbs} testID={enum_1.RecommendationModalTestIds.SuggestedCarbs}>{`${displayCarbs} `}</react_native_1.Text>
-							<react_native_1.Text style={exports.stylesModal.carbohydrateText}>{i18nUtils_1.i18n._(macro_1.t `grams of carbohydrates`)}</react_native_1.Text>
-						</react_native_1.Text>
-					</react_native_1.View>
-					<react_native_1.View style={exports.stylesModal.recommendationRow}>
-						<react_native_1.Text style={exports.stylesModal.recommendEatingText}>{i18nUtils_1.i18n._(macro_1.t `Instead of taking insulin`)}</react_native_1.Text>
-					</react_native_1.View>
-				</react_native_1.View>
-				<react_native_1.View style={exports.stylesModal.addToCalculationContainer}>
-					<react_native_1.Text style={exports.stylesModal.addToCalculation}>
-						{i18nUtils_1.i18n._(macro_1.t `Would you like to add this to your current calculation?`)}
-					</react_native_1.Text>
+				<View style={stylesModal.innerView}>
+					<View style={stylesModal.recommendationRow}>
+						<Text style={stylesModal.recommendEatingText}>
+							{i18n._(t `We recommend eating an additional:`)}
+						</Text>
+					</View>
+					<View style={stylesModal.suggestedContainer}>
+						<Text style={stylesModal.textCenter}>
+							<Text style={stylesModal.suggestedCarbs} testID={RecommendationModalTestIds.SuggestedCarbs}>{`${displayCarbs} `}</Text>
+							<Text style={stylesModal.carbohydrateText}>{i18n._(t `grams of carbohydrates`)}</Text>
+						</Text>
+					</View>
+					<View style={stylesModal.recommendationRow}>
+						<Text style={stylesModal.recommendEatingText}>{i18n._(t `Instead of taking insulin`)}</Text>
+					</View>
+				</View>
+				<View style={stylesModal.addToCalculationContainer}>
+					<Text style={stylesModal.addToCalculation}>
+						{i18n._(t `Would you like to add this to your current calculation?`)}
+					</Text>
 					{this.recommendationButtons()}
-				</react_native_1.View>
+				</View>
 			</React.Fragment>);
         };
         this.secondPage = () => {
             const { attentionMessage, suggestedCarbohydrates } = this.props;
             const willRecommendCarbs = suggestedCarbohydrates !== null && suggestedCarbohydrates > 0;
             return (<React.Fragment>
-				<react_native_1.View style={exports.stylesModal.container}>
-					<react_native_1.View style={exports.stylesModal.titleContainer}>
-						<react_native_1.Text style={exports.stylesModal.textTittleMessage}>{i18nUtils_1.i18n._(macro_1.t `Attention`)}</react_native_1.Text>
-					</react_native_1.View>
-					<react_native_1.Text style={exports.stylesModal.textMessage}>{attentionMessage}</react_native_1.Text>
+				<View style={stylesModal.container}>
+					<View style={stylesModal.titleContainer}>
+						<Text style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</Text>
+					</View>
+					<Text style={stylesModal.textMessage}>{attentionMessage}</Text>
 					{willRecommendCarbs ? this.recommendCarbohydrates(suggestedCarbohydrates) : null}
-				</react_native_1.View>
-				{willRecommendCarbs ? null : (<react_native_1.View style={exports.stylesModal.containerAcceptButton}>
-						<react_native_1.TouchableOpacity testID={enum_1.RecommendationModalTestIds.OkButton} accessibilityLabel="okayButtonModal" style={exports.stylesModal.okButton} onPress={this.props.onClickOkButton}>
-							<react_native_1.Text style={exports.stylesModal.buttonText}>{i18nUtils_1.i18n._(macro_1.t `OK`)}</react_native_1.Text>
-						</react_native_1.TouchableOpacity>
-					</react_native_1.View>)}
+				</View>
+				{willRecommendCarbs ? null : (<View style={stylesModal.containerAcceptButton}>
+						<TouchableOpacity testID={RecommendationModalTestIds.OkButton} accessibilityLabel="okayButtonModal" style={stylesModal.okButton} onPress={this.props.onClickOkButton}>
+							<Text style={stylesModal.buttonText}>{i18n._(t `OK`)}</Text>
+						</TouchableOpacity>
+					</View>)}
 			</React.Fragment>);
         };
         this.firstPage = () => {
             const { limitationMessage } = this.props;
-            return <LimitationMessage_1.default limitationMessage={limitationMessage} onPressNextButton={this.onPressNextButton}/>;
+            return <LimitationMessage limitationMessage={limitationMessage} onPressNextButton={this.onPressNextButton}/>;
         };
         this.state = {
             firstPageVisible: !!this.props.limitationMessage,
@@ -105,13 +80,12 @@ class RecommendationModal extends React.Component {
     render() {
         const { isVisible } = this.props;
         const { firstPageVisible } = this.state;
-        return (<react_native_modal_1.default isVisible={isVisible} style={exports.stylesModal.modalStyle}>
+        return (<ReactNativeModal isVisible={isVisible} style={stylesModal.modalStyle}>
 				{firstPageVisible ? this.firstPage() : this.secondPage()}
-			</react_native_modal_1.default>);
+			</ReactNativeModal>);
     }
 }
-exports.default = RecommendationModal;
-const { height, width } = react_native_1.Dimensions.get(`screen`);
+const { height, width } = Dimensions.get(`screen`);
 const buttonHeight = height / 20;
 const buttonWidth = width / 2.5;
 const buttonFontSize = width / 22;
@@ -121,7 +95,7 @@ const sugestionFontSize = width / 19;
 const recommendEatingFontSize = height / 45;
 const textFontSize = width / 20;
 const titleFontSize = width / 13;
-exports.stylesModal = react_native_1.StyleSheet.create({
+export const stylesModal = StyleSheet.create({
     modalStyle: { margin: 0 },
     container: {
         flex: 4,
@@ -138,7 +112,7 @@ exports.stylesModal = react_native_1.StyleSheet.create({
     recommendationRow: { justifyContent: `center`, alignContent: `center`, marginBottom: `3%` },
     textTittleMessage: { color: `white`, fontSize: titleFontSize, textAlign: `center` },
     textMessage: { color: `white`, fontSize: textFontSize, textAlign: `center` },
-    buttonText: { color: Constants_1.BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
+    buttonText: { color: BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
     addToCalculationContainer: { justifyContent: `flex-start`, marginVertical: `5%` },
     innerView: {
         alignContent: `center`,
@@ -147,7 +121,7 @@ exports.stylesModal = react_native_1.StyleSheet.create({
         marginTop: `5%`,
         borderRadius: height / 80,
         borderWidth: height / 300,
-        borderColor: Constants_1.BORDER_COLOUR_TEAL,
+        borderColor: BORDER_COLOUR_TEAL,
     },
     suggestedContainer: { justifyContent: `center`, flexDirection: `row`, marginBottom: `3%` },
     suggestedCarbs: { color: `white`, fontSize: sugestionFontSize, fontWeight: `bold` },
@@ -156,13 +130,13 @@ exports.stylesModal = react_native_1.StyleSheet.create({
     carbohydrateText: { color: `white`, fontSize: sugestionFontSize },
     addToCalculation: { color: `white`, fontSize: textFontSize, textAlign: `center` },
     recommendationButtonsContainer: { justifyContent: `center`, flexDirection: `row`, margin: `3%` },
-    affirmativeCarbsText: { color: Constants_1.BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
+    affirmativeCarbsText: { color: BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
     negativeCarbsText: { color: `white`, fontSize: buttonFontSize, textAlign: `center` },
     affirmativeCarbsButton: {
         marginTop: `2%`,
         borderRadius: buttonBorderRadius,
         borderWidth: buttonBorderWidth,
-        borderColor: Constants_1.BORDER_COLOUR_TEAL,
+        borderColor: BORDER_COLOUR_TEAL,
         width: buttonWidth,
         height: buttonHeight,
         alignSelf: `center`,
@@ -184,7 +158,7 @@ exports.stylesModal = react_native_1.StyleSheet.create({
         marginTop: `6%`,
         borderRadius: buttonBorderRadius,
         borderWidth: buttonBorderWidth,
-        borderColor: Constants_1.BORDER_COLOUR_TEAL,
+        borderColor: BORDER_COLOUR_TEAL,
         width: buttonWidth,
         height: buttonHeight,
         alignSelf: `center`,

package/src/components/RecommendedCarbs.js

@@ -1,20 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const macro_1 = require("@lingui/macro");
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const i18nUtils_1 = require("../locale/i18nUtils");
-const enum_1 = require("../types/enum");
-const Constants_1 = require("../utils/Constants");
-const RecommendationError_1 = require("../utils/RecommendationError");
-const Icon_1 = __importDefault(require("./Icon"));
-const InfoBars_1 = require("./InfoBars");
-const InvisibleNumberInput_1 = __importDefault(require("./InvisibleNumberInput"));
-const LineSeparator_1 = __importDefault(require("./LineSeparator"));
-class RecommendedCarbs extends react_1.default.Component {
+import { t } from "@lingui/macro";
+import React from "react";
+import { Alert, Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { i18n } from "../locale/i18nUtils";
+import { RecommendedCarbsTestIds } from "../types/enum";
+import { BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
+import { CarbohydrateLimitError } from "../utils/RecommendationError";
+import Icon from "./Icon";
+import { infoStyles } from "./InfoBars";
+import InvisibleNumberInput from "./InvisibleNumberInput";
+import LineSeparator from "./LineSeparator";
+export default class RecommendedCarbs extends React.Component {
     constructor() {
         super(...arguments);
         this.state = {
@@ -32,9 +27,9 @@ class RecommendedCarbs extends react_1.default.Component {
             if (carbs >= 0) {
                 if (carbs > 300) {
                     this.setState({ partialInput: this.props.recommendedCarbs });
-                    return react_native_1.Alert.alert(i18nUtils_1.i18n._(macro_1.t `Attention`), RecommendationError_1.CarbohydrateLimitError().message, [
+                    return Alert.alert(i18n._(t `Attention`), CarbohydrateLimitError().message, [
                         {
-                            text: i18nUtils_1.i18n._(macro_1.t `OK`),
+                            text: i18n._(t `OK`),
                         },
                     ]);
                 }
@@ -44,96 +39,95 @@ class RecommendedCarbs extends react_1.default.Component {
         this.renderRecommendedCarbs = () => {
             const shownCarbs = this.state.partialInput ?? Math.round(Number(this.props.recommendedCarbs));
             const totalCarbs = Math.round(parseFloat(this.props.enteredCarbs) + Number(shownCarbs));
-            return (<react_1.default.Fragment>
-				<LineSeparator_1.default color={Constants_1.BORDER_COLOUR_GREY}/>
-				<react_native_1.View style={calculationStyles.borderContainer}>
-					<react_native_1.View style={calculationStyles.recommendedContainer}>
-						<react_native_1.TouchableOpacity testID={enum_1.RecommendedCarbsTestIds.RemoveRecommendation} accessibilityLabel="removeRecommendedCarbs" style={calculationStyles.removeRecommended} onPress={this.props.removeRecommendedCarbs}>
-							<Icon_1.default iconIdentifier={`Ionicons/ios-close-circle-outline`} style={calculationStyles.removeRecommendedIcon}/>
-						</react_native_1.TouchableOpacity>
-						<react_native_1.Text style={calculationStyles.recommendedLabel}>{i18nUtils_1.i18n._(macro_1.t `Recommended`)}</react_native_1.Text>
-					</react_native_1.View>
-				</react_native_1.View>
-				<react_native_1.View style={calculationStyles.borderContainer}>
-					<react_native_1.View style={calculationStyles.recommendedContainer}>
-						<react_native_1.Text style={calculationStyles.recommendedLabel}>{i18nUtils_1.i18n._(macro_1.t `Additional`)}</react_native_1.Text>
-					</react_native_1.View>
-					<react_native_1.View style={calculationStyles.valueUnitContainer}>
-						<react_native_1.TouchableOpacity testID={enum_1.RecommendedCarbsTestIds.EditRecommendedCarbs} accessibilityLabel="editRecommendedCarbsButton" onPress={this.showTextInput} style={[calculationStyles.valueUnitContainer]}>
-							<react_native_1.View style={calculationStyles.valueContainer}>
-								<react_native_1.Text testID={enum_1.RecommendedCarbsTestIds.RecommendedCarbs} style={[calculationStyles.value, { color: Constants_1.BORDER_COLOUR_TEAL }]}>
+            return (<React.Fragment>
+				<LineSeparator color={BORDER_COLOUR_GREY}/>
+				<View style={calculationStyles.borderContainer}>
+					<View style={calculationStyles.recommendedContainer}>
+						<TouchableOpacity testID={RecommendedCarbsTestIds.RemoveRecommendation} accessibilityLabel="removeRecommendedCarbs" style={calculationStyles.removeRecommended} onPress={this.props.removeRecommendedCarbs}>
+							<Icon iconIdentifier={`Ionicons/ios-close-circle-outline`} style={calculationStyles.removeRecommendedIcon}/>
+						</TouchableOpacity>
+						<Text style={calculationStyles.recommendedLabel}>{i18n._(t `Recommended`)}</Text>
+					</View>
+				</View>
+				<View style={calculationStyles.borderContainer}>
+					<View style={calculationStyles.recommendedContainer}>
+						<Text style={calculationStyles.recommendedLabel}>{i18n._(t `Additional`)}</Text>
+					</View>
+					<View style={calculationStyles.valueUnitContainer}>
+						<TouchableOpacity testID={RecommendedCarbsTestIds.EditRecommendedCarbs} accessibilityLabel="editRecommendedCarbsButton" onPress={this.showTextInput} style={[calculationStyles.valueUnitContainer]}>
+							<View style={calculationStyles.valueContainer}>
+								<Text testID={RecommendedCarbsTestIds.RecommendedCarbs} style={[calculationStyles.value, { color: BORDER_COLOUR_TEAL }]}>
 									{shownCarbs}
-								</react_native_1.Text>
-							</react_native_1.View>
-							<react_native_1.View style={[calculationStyles.unitContainer]}>
-								<react_native_1.View style={calculationStyles.editIconContainer}>
-									<Icon_1.default style={calculationStyles.editIcon} iconIdentifier={`Feather/edit`}/>
-								</react_native_1.View>
-								<react_native_1.Text style={[calculationStyles.units, { color: Constants_1.BORDER_COLOUR_TEAL }]}>
-									{i18nUtils_1.i18n._(macro_1.t `grams`)}
-								</react_native_1.Text>
-							</react_native_1.View>
-						</react_native_1.TouchableOpacity>
-					</react_native_1.View>
-				</react_native_1.View>
-				<LineSeparator_1.default color={Constants_1.BORDER_COLOUR_TEAL}/>
+								</Text>
+							</View>
+							<View style={[calculationStyles.unitContainer]}>
+								<View style={calculationStyles.editIconContainer}>
+									<Icon style={calculationStyles.editIcon} iconIdentifier={`Feather/edit`}/>
+								</View>
+								<Text style={[calculationStyles.units, { color: BORDER_COLOUR_TEAL }]}>
+									{i18n._(t `grams`)}
+								</Text>
+							</View>
+						</TouchableOpacity>
+					</View>
+				</View>
+				<LineSeparator color={BORDER_COLOUR_TEAL}/>
 				{this.renderRow({
-                label: i18nUtils_1.i18n._(macro_1.t `Total`),
+                label: i18n._(t `Total`),
                 value: totalCarbs.toString(),
-                units: i18nUtils_1.i18n._(macro_1.t `grams`),
-            }, enum_1.RecommendedCarbsTestIds.TotalCarbs)}
-				<InvisibleNumberInput_1.default testID={enum_1.RecommendedCarbsTestIds.InvisibleCarbInput} negativeAllowed={false} cleanPartialInput={true} decimalPlaces={0} visible={(callback) => (this.callbackInput = callback)} partialInput={this.handlePartialInput} onEnd={this.handleChangedCarbs} startValue={this.props.recommendedCarbs} maxLength={3}/>
-			</react_1.default.Fragment>);
+                units: i18n._(t `grams`),
+            }, RecommendedCarbsTestIds.TotalCarbs)}
+				<InvisibleNumberInput testID={RecommendedCarbsTestIds.InvisibleCarbInput} negativeAllowed={false} cleanPartialInput={true} decimalPlaces={0} visible={(callback) => (this.callbackInput = callback)} partialInput={this.handlePartialInput} onEnd={this.handleChangedCarbs} startValue={this.props.recommendedCarbs} maxLength={3}/>
+			</React.Fragment>);
         };
         this.renderRow = (row, testID) => {
-            return (<react_native_1.View style={[calculationStyles.borderContainer, { paddingVertical: `1%` }]}>
-				<react_native_1.View style={calculationStyles.rowContainer}>
-					<react_native_1.Text style={calculationStyles.rowLabel}>{row.label}</react_native_1.Text>
-				</react_native_1.View>
-				<react_native_1.View style={calculationStyles.valueUnitContainer}>
-					<react_native_1.View style={calculationStyles.valueContainer}>
-						<react_native_1.Text testID={testID} style={calculationStyles.value}>
+            return (<View style={[calculationStyles.borderContainer, { paddingVertical: `1%` }]}>
+				<View style={calculationStyles.rowContainer}>
+					<Text style={calculationStyles.rowLabel}>{row.label}</Text>
+				</View>
+				<View style={calculationStyles.valueUnitContainer}>
+					<View style={calculationStyles.valueContainer}>
+						<Text testID={testID} style={calculationStyles.value}>
 							{row.value}
-						</react_native_1.Text>
-					</react_native_1.View>
-					<react_native_1.View style={calculationStyles.unitContainer}>
-						<react_native_1.Text style={calculationStyles.units}>{row.units}</react_native_1.Text>
-					</react_native_1.View>
-				</react_native_1.View>
-			</react_native_1.View>);
+						</Text>
+					</View>
+					<View style={calculationStyles.unitContainer}>
+						<Text style={calculationStyles.units}>{row.units}</Text>
+					</View>
+				</View>
+			</View>);
         };
     }
     render() {
         const carbs = Number(this.props.recommendedCarbs);
-        return (<react_1.default.Fragment>
-				<react_native_1.View style={calculationStyles.foodTitleContainer}>
-					<react_native_1.Text style={InfoBars_1.infoStyles.label}>{i18nUtils_1.i18n._(macro_1.t `Food`)}</react_native_1.Text>
-					<react_native_1.Text style={calculationStyles.foodUnitsLabel}>{`(${i18nUtils_1.i18n._(macro_1.t `Carbohydrates`)})`}</react_native_1.Text>
-				</react_native_1.View>
+        return (<React.Fragment>
+				<View style={calculationStyles.foodTitleContainer}>
+					<Text style={infoStyles.label}>{i18n._(t `Food`)}</Text>
+					<Text style={calculationStyles.foodUnitsLabel}>{`(${i18n._(t `Carbohydrates`)})`}</Text>
+				</View>
 				{this.renderRow({
-            label: i18nUtils_1.i18n._(macro_1.t `Entered`),
+            label: i18n._(t `Entered`),
             value: this.props.enteredCarbs,
-            units: i18nUtils_1.i18n._(macro_1.t `grams`),
-        }, enum_1.RecommendedCarbsTestIds.EnteredCarbs)}
+            units: i18n._(t `grams`),
+        }, RecommendedCarbsTestIds.EnteredCarbs)}
 				{!isNaN(carbs) && carbs > 0 ? this.renderRecommendedCarbs() : null}
-			</react_1.default.Fragment>);
+			</React.Fragment>);
     }
 }
-exports.default = RecommendedCarbs;
-const calculationStyles = react_native_1.StyleSheet.create({
+const calculationStyles = StyleSheet.create({
     borderContainer: {
-        ...InfoBars_1.infoStyles.borderContainer,
+        ...infoStyles.borderContainer,
         alignItems: `center`,
     },
     foodTitleContainer: {
-        flex: InfoBars_1.infoStyles.borderContainer.flex,
-        flexDirection: InfoBars_1.infoStyles.borderContainer.flexDirection,
-        paddingHorizontal: InfoBars_1.infoStyles.borderContainer.paddingHorizontal,
+        flex: infoStyles.borderContainer.flex,
+        flexDirection: infoStyles.borderContainer.flexDirection,
+        paddingHorizontal: infoStyles.borderContainer.paddingHorizontal,
         alignItems: `center`,
         paddingVertical: `2%`,
     },
     foodUnitsLabel: {
-        ...InfoBars_1.infoStyles.units,
+        ...infoStyles.units,
         color: `rgba(160, 180, 240, 1)`,
         paddingLeft: `1%`,
     },
@@ -142,7 +136,7 @@ const calculationStyles = react_native_1.StyleSheet.create({
     },
     rowLabel: {
         color: `white`,
-        fontSize: react_native_1.Dimensions.get(`screen`).width / 25,
+        fontSize: Dimensions.get(`screen`).width / 25,
         fontWeight: `bold`,
     },
     enteredContainer: {
@@ -151,22 +145,22 @@ const calculationStyles = react_native_1.StyleSheet.create({
     },
     entered: {
         color: `white`,
-        fontSize: react_native_1.Dimensions.get(`screen`).width / 23,
+        fontSize: Dimensions.get(`screen`).width / 23,
     },
     valueUnitContainer: {
-        ...InfoBars_1.infoStyles.valueUnitContainer,
+        ...infoStyles.valueUnitContainer,
     },
     valueContainer: {
-        ...InfoBars_1.infoStyles.valueContainer,
+        ...infoStyles.valueContainer,
     },
     value: {
-        ...InfoBars_1.infoStyles.value,
+        ...infoStyles.value,
     },
     unitContainer: {
-        ...InfoBars_1.infoStyles.unitContainer,
+        ...infoStyles.unitContainer,
     },
     units: {
-        ...InfoBars_1.infoStyles.units,
+        ...infoStyles.units,
     },
     editIconContainer: {
         justifyContent: `flex-end`,
@@ -174,16 +168,16 @@ const calculationStyles = react_native_1.StyleSheet.create({
         flexDirection: `row`,
     },
     editIcon: {
-        color: Constants_1.BORDER_COLOUR_TEAL,
-        fontSize: react_native_1.Dimensions.get(`screen`).width / 30,
+        color: BORDER_COLOUR_TEAL,
+        fontSize: Dimensions.get(`screen`).width / 30,
     },
     recommendedContainer: {
         flex: 7,
         flexDirection: `row`,
     },
     recommendedLabel: {
-        color: Constants_1.BORDER_COLOUR_TEAL,
-        fontSize: react_native_1.Dimensions.get(`screen`).width / 25,
+        color: BORDER_COLOUR_TEAL,
+        fontSize: Dimensions.get(`screen`).width / 25,
         alignSelf: `center`,
         fontWeight: `bold`,
     },
@@ -193,8 +187,8 @@ const calculationStyles = react_native_1.StyleSheet.create({
         marginTop: `1%`,
     },
     removeRecommendedIcon: {
-        color: Constants_1.BORDER_COLOUR_TEAL,
-        fontSize: react_native_1.Dimensions.get(`screen`).width / 20,
+        color: BORDER_COLOUR_TEAL,
+        fontSize: Dimensions.get(`screen`).width / 20,
         paddingBottom: `0.5%`,
     },
 });