@hedia/recommendation-screen 1.0.0

package/src/components/RecentInsulin.tsx

@@ -0,0 +1,97 @@
+import { t } from "@lingui/macro";
+import React from "react";
+import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { i18n } from "../locale/i18nUtils";
+import { infoStyles } from "./InfoBars";
+
+interface IProps {
+	onRecentInsulinYes(): void;
+	onRecentInsulinNo(): void;
+}
+
+export default class RecentInsulin extends React.Component<IProps> {
+	public render = () => {
+		return (
+			<View style={recentInsulinStyles.container}>
+				<View style={recentInsulinStyles.titleContainer}>
+					<Text style={recentInsulinStyles.recommended}>{i18n._(t`Recommended amount of insulin`)}</Text>
+				</View>
+				<View style={recentInsulinStyles.takenInsulinContainer}>
+					<Text style={recentInsulinStyles.takenInsulin}>
+						{i18n._(t`Have you taken insulin within the last 4 hours?`)}
+					</Text>
+				</View>
+				<View style={recentInsulinStyles.buttonContainer}>
+					<View style={recentInsulinStyles.filler} />
+					<TouchableOpacity
+						onPress={this.props.onRecentInsulinYes}
+						style={[recentInsulinStyles.yesNoContainer, { marginRight: `2%` }]}
+					>
+						<Text style={recentInsulinStyles.yesNoText}>{i18n._(t`Yes`)}</Text>
+					</TouchableOpacity>
+					<TouchableOpacity
+						onPress={this.props.onRecentInsulinNo}
+						style={[recentInsulinStyles.yesNoContainer, { marginLeft: `2%` }]}
+					>
+						<Text style={recentInsulinStyles.yesNoText}>{i18n._(t`No`)}</Text>
+					</TouchableOpacity>
+					<View style={recentInsulinStyles.filler} />
+				</View>
+			</View>
+		);
+	};
+}
+
+const recentInsulinStyles = StyleSheet.create({
+	container: {
+		...infoStyles.margin,
+		backgroundColor: `rgba(118, 82, 255, 0.5)`,
+		borderRadius: 5,
+	},
+	titleContainer: {
+		flex: 1,
+		justifyContent: `center`,
+		alignItems: `center`,
+		marginTop: `4%`,
+		marginBottom: `4%`,
+	},
+	recommended: {
+		...infoStyles.label,
+	},
+	takenInsulinContainer: {
+		flex: 1,
+		justifyContent: `center`,
+		alignItems: `center`,
+		marginTop: `2%`,
+	},
+	takenInsulin: {
+		...infoStyles.label,
+		fontSize: Dimensions.get(`screen`).width / 27,
+	},
+	buttonContainer: {
+		flex: 1,
+		flexDirection: `row`,
+		justifyContent: `space-evenly`,
+		marginTop: `4%`,
+		marginBottom: `5%`,
+	},
+	yesNoContainer: {
+		flex: 1,
+		borderColor: `white`,
+		borderRadius: 100,
+		borderWidth: 2,
+		paddingHorizontal: `2%`,
+		paddingVertical: `1%`,
+	},
+	yesNoText: {
+		textAlign: `center`,
+		paddingTop: `1%`,
+		paddingBottom: `1%`,
+		color: `white`,
+		fontSize: Dimensions.get(`screen`).width / 25,
+		fontWeight: `bold`,
+	},
+	filler: {
+		flex: 1,
+	},
+});

package/src/components/RecommendedCarbs.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { RecommendationError } from "../utils/RecommendationError";
+interface ICalculationRow {
+    label: string;
+    info: string;
+    value: string;
+    units: string;
+}
+interface IProps {
+    recommendedCarbs?: string;
+    enteredCarbs: string;
+    removeRecommendedCarbs(): void;
+    changedRecommendedCarbs(value: number): void;
+    onError(error: RecommendationError): void;
+}
+interface IState {
+    remeasureTime: number;
+    partialInput: string;
+}
+export default class RecommendedCarbs extends React.Component<IProps, IState> {
+    state: IState;
+    callbackInput: () => void;
+    showTextInput: () => void;
+    handlePartialInput: (partialInput: string) => void;
+    handleChangedCarbs: (carbs: number) => void;
+    renderRecommendedCarbs: () => JSX.Element;
+    renderRow: (row: ICalculationRow) => JSX.Element;
+    render(): JSX.Element;
+}
+export {};

package/src/components/RecommendedCarbs.js

@@ -0,0 +1,193 @@
+"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 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"));
+class RecommendedCarbs extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            remeasureTime: 1.5,
+            partialInput: null,
+        };
+        this.showTextInput = () => {
+            this.callbackInput?.();
+        };
+        this.handlePartialInput = (partialInput) => {
+            this.setState({
+                partialInput,
+            });
+        };
+        this.handleChangedCarbs = (carbs) => {
+            if (carbs >= 0) {
+                if (carbs > 300) {
+                    return this.props.onError(RecommendationError_1.CarbohydrateLimitError);
+                }
+                this.props.changedRecommendedCarbs(carbs);
+            }
+        };
+        this.renderRecommendedCarbs = () => {
+            return (<react_1.default.Fragment>
+				<react_native_1.View style={calculationStyles.borderContainer}>
+					<react_native_1.View style={calculationStyles.recommendedContainer}>
+						<react_native_1.TouchableOpacity 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 style={calculationStyles.additionalContainer}>
+						<react_native_1.Text style={calculationStyles.additional}>{i18nUtils_1.i18n._(macro_1.t `Additional`)}</react_native_1.Text>
+					</react_native_1.View>
+					<react_native_1.View style={{ flex: calculationStyles.valueUnitContainer[`flex`] }}>
+						<react_native_1.TouchableOpacity accessibilityLabel="editRecommendedCarbsButton" onPress={this.showTextInput} style={[calculationStyles.valueUnitContainer, calculationStyles.recommendedBorder]}>
+							<react_native_1.View style={calculationStyles.valueContainer}>
+								<react_native_1.Text style={[calculationStyles.value, { color: Constants_1.BORDER_COLOUR_TEAL }]}>
+									+{this.state.partialInput ?? this.props.recommendedCarbs}
+								</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 `g carbs`)}
+								</react_native_1.Text>
+							</react_native_1.View>
+						</react_native_1.TouchableOpacity>
+					</react_native_1.View>
+				</react_native_1.View>
+				{this.renderRow({
+                label: ``,
+                info: i18nUtils_1.i18n._(macro_1.t `Total`),
+                value: `0`,
+                units: i18nUtils_1.i18n._(macro_1.t `g carbs`),
+            })}
+				<InvisibleNumberInput_1.default negativeAllowed={false} cleanPartialInput={true} decimalPlaces={0} visible={(callback) => (this.callbackInput = callback)} partialInput={this.handlePartialInput} onEnd={(val) => {
+                this.handleChangedCarbs(val);
+            }} startValue={this.props.recommendedCarbs}/>
+			</react_1.default.Fragment>);
+        };
+        this.renderRow = (row) => {
+            return (<react_native_1.View style={calculationStyles.borderContainer}>
+				<react_native_1.View style={calculationStyles.foodContainer}>
+					<react_native_1.Text style={calculationStyles.foodLabel}>{row.label}</react_native_1.Text>
+				</react_native_1.View>
+				<react_native_1.View style={calculationStyles.enteredContainer}>
+					<react_native_1.Text style={calculationStyles.entered}>{row.info}</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 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>);
+        };
+    }
+    render() {
+        const carbs = Number(this.props.recommendedCarbs);
+        return (<react_1.default.Fragment>
+				{this.renderRow({
+            label: i18nUtils_1.i18n._(macro_1.t `Food`),
+            info: i18nUtils_1.i18n._(macro_1.t `Entered`),
+            value: this.props.enteredCarbs,
+            units: i18nUtils_1.i18n._(macro_1.t `g carbs`),
+        })}
+				{!isNaN(carbs) && carbs > 0 ? this.renderRecommendedCarbs() : null}
+			</react_1.default.Fragment>);
+    }
+}
+exports.default = RecommendedCarbs;
+const calculationStyles = react_native_1.StyleSheet.create({
+    borderContainer: {
+        ...InfoBars_1.infoStyles.borderContainer,
+        alignItems: `center`,
+    },
+    foodContainer: {
+        flex: 4,
+    },
+    foodLabel: {
+        color: `white`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 22,
+        fontWeight: `bold`,
+    },
+    enteredContainer: {
+        flex: 3,
+        alignItems: `flex-end`,
+    },
+    entered: {
+        color: `white`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 23,
+    },
+    valueUnitContainer: {
+        ...InfoBars_1.infoStyles.valueUnitContainer,
+    },
+    valueContainer: {
+        ...InfoBars_1.infoStyles.valueContainer,
+    },
+    value: {
+        ...InfoBars_1.infoStyles.value,
+    },
+    unitContainer: {
+        ...InfoBars_1.infoStyles.unitContainer,
+    },
+    units: {
+        ...InfoBars_1.infoStyles.units,
+    },
+    editIconContainer: {
+        justifyContent: `flex-end`,
+        flexDirection: `row`,
+        paddingRight: `5%`,
+    },
+    editIcon: {
+        color: Constants_1.BORDER_COLOUR_TEAL,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 30,
+    },
+    recommendedContainer: {
+        flex: 4,
+        flexDirection: `row`,
+    },
+    recommendedLabel: {
+        color: Constants_1.BORDER_COLOUR_TEAL,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 27,
+        fontWeight: `bold`,
+    },
+    removeRecommended: {
+        justifyContent: `center`,
+        padding: `1%`,
+        marginRight: `2%`,
+        marginTop: `1%`,
+    },
+    removeRecommendedIcon: {
+        color: Constants_1.BORDER_COLOUR_TEAL,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 26,
+    },
+    additionalContainer: {
+        flex: 3,
+        alignItems: `flex-end`,
+    },
+    additional: {
+        color: Constants_1.BORDER_COLOUR_TEAL,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 27,
+    },
+    recommendedBorder: {
+        borderWidth: 2,
+        borderColor: Constants_1.BORDER_COLOUR_TEAL,
+        borderRadius: 5,
+        paddingBottom: `2%`,
+        marginLeft: `10%`,
+        paddingRight: `3%`,
+        marginRight: `7%`,
+    },
+});

package/src/components/RecommendedCarbs.tsx

@@ -0,0 +1,242 @@
+import { t } from "@lingui/macro";
+import React from "react";
+import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { i18n } from "../locale/i18nUtils";
+import { BORDER_COLOUR_TEAL } from "../utils/Constants";
+import { CarbohydrateLimitError, RecommendationError } from "../utils/RecommendationError";
+import Icon from "./Icon";
+import { infoStyles } from "./InfoBars";
+import InvisibleNumberInput from "./InvisibleNumberInput";
+
+interface ICalculationRow {
+	label: string;
+	info: string;
+	value: string;
+	units: string;
+}
+
+interface IProps {
+	// Values
+	recommendedCarbs?: string;
+	enteredCarbs: string;
+
+	// Callbacks
+	removeRecommendedCarbs(): void;
+	changedRecommendedCarbs(value: number): void;
+	onError(error: RecommendationError): void;
+}
+
+interface IState {
+	remeasureTime: number;
+	partialInput: string;
+}
+
+export default class RecommendedCarbs extends React.Component<IProps, IState> {
+	public state: IState = {
+		remeasureTime: 1.5,
+		partialInput: null,
+	};
+
+	public callbackInput: () => void;
+
+	public showTextInput = () => {
+		this.callbackInput?.();
+	};
+
+	public handlePartialInput = (partialInput: string) => {
+		this.setState({
+			partialInput,
+		});
+	};
+
+	public handleChangedCarbs = (carbs: number) => {
+		if (carbs >= 0) {
+			if (carbs > 300) {
+				return this.props.onError(CarbohydrateLimitError);
+			}
+			this.props.changedRecommendedCarbs(carbs);
+		}
+	};
+
+	public renderRecommendedCarbs = () => {
+		return (
+			<React.Fragment>
+				<View style={calculationStyles.borderContainer}>
+					<View style={calculationStyles.recommendedContainer}>
+						<TouchableOpacity
+							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 style={calculationStyles.additionalContainer}>
+						<Text style={calculationStyles.additional}>{i18n._(t`Additional`)}</Text>
+					</View>
+					<View style={{ flex: calculationStyles.valueUnitContainer[`flex`] }}>
+						<TouchableOpacity
+							accessibilityLabel="editRecommendedCarbsButton"
+							onPress={this.showTextInput}
+							style={[calculationStyles.valueUnitContainer, calculationStyles.recommendedBorder]}
+						>
+							<View style={calculationStyles.valueContainer}>
+								<Text style={[calculationStyles.value, { color: BORDER_COLOUR_TEAL }]}>
+									+{this.state.partialInput ?? this.props.recommendedCarbs}
+								</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`g carbs`)}
+								</Text>
+							</View>
+						</TouchableOpacity>
+					</View>
+				</View>
+				{this.renderRow({
+					label: ``,
+					info: i18n._(t`Total`),
+					value: `0`,
+					units: i18n._(t`g carbs`),
+				})}
+				<InvisibleNumberInput
+					negativeAllowed={false}
+					cleanPartialInput={true}
+					decimalPlaces={0}
+					visible={(callback) => (this.callbackInput = callback)}
+					partialInput={this.handlePartialInput}
+					onEnd={(val) => {
+						this.handleChangedCarbs(val);
+					}}
+					startValue={this.props.recommendedCarbs}
+				/>
+			</React.Fragment>
+		);
+	};
+
+	public renderRow = (row: ICalculationRow) => {
+		return (
+			<View style={calculationStyles.borderContainer}>
+				<View style={calculationStyles.foodContainer}>
+					<Text style={calculationStyles.foodLabel}>{row.label}</Text>
+				</View>
+				<View style={calculationStyles.enteredContainer}>
+					<Text style={calculationStyles.entered}>{row.info}</Text>
+				</View>
+				<View style={calculationStyles.valueUnitContainer}>
+					<View style={calculationStyles.valueContainer}>
+						<Text style={calculationStyles.value}>{row.value}</Text>
+					</View>
+					<View style={calculationStyles.unitContainer}>
+						<Text style={calculationStyles.units}>{row.units}</Text>
+					</View>
+				</View>
+			</View>
+		);
+	};
+
+	public render() {
+		const carbs = Number(this.props.recommendedCarbs);
+		return (
+			<React.Fragment>
+				{this.renderRow({
+					label: i18n._(t`Food`),
+					info: i18n._(t`Entered`),
+					value: this.props.enteredCarbs,
+					units: i18n._(t`g carbs`),
+				})}
+				{!isNaN(carbs) && carbs > 0 ? this.renderRecommendedCarbs() : null}
+			</React.Fragment>
+		);
+	}
+}
+
+const calculationStyles = StyleSheet.create({
+	borderContainer: {
+		...infoStyles.borderContainer,
+		alignItems: `center`,
+	},
+	foodContainer: {
+		flex: 4,
+	},
+	foodLabel: {
+		color: `white`,
+		fontSize: Dimensions.get(`screen`).width / 22,
+		fontWeight: `bold`,
+	},
+	enteredContainer: {
+		flex: 3,
+		alignItems: `flex-end`,
+	},
+	entered: {
+		color: `white`,
+		fontSize: Dimensions.get(`screen`).width / 23,
+	},
+	valueUnitContainer: {
+		...infoStyles.valueUnitContainer,
+	},
+	valueContainer: {
+		...infoStyles.valueContainer,
+	},
+	value: {
+		...infoStyles.value,
+	},
+	unitContainer: {
+		...infoStyles.unitContainer,
+	},
+	units: {
+		...infoStyles.units,
+	},
+	editIconContainer: {
+		justifyContent: `flex-end`,
+		flexDirection: `row`,
+		paddingRight: `5%`,
+	},
+	editIcon: {
+		color: BORDER_COLOUR_TEAL,
+		fontSize: Dimensions.get(`screen`).width / 30,
+	},
+	recommendedContainer: {
+		flex: 4,
+		flexDirection: `row`,
+	},
+	recommendedLabel: {
+		color: BORDER_COLOUR_TEAL,
+		fontSize: Dimensions.get(`screen`).width / 27,
+		fontWeight: `bold`,
+	},
+	removeRecommended: {
+		justifyContent: `center`,
+		padding: `1%`,
+		marginRight: `2%`,
+		marginTop: `1%`,
+	},
+	removeRecommendedIcon: {
+		color: BORDER_COLOUR_TEAL,
+		fontSize: Dimensions.get(`screen`).width / 26,
+	},
+	additionalContainer: {
+		flex: 3,
+		alignItems: `flex-end`,
+	},
+	additional: {
+		color: BORDER_COLOUR_TEAL,
+		fontSize: Dimensions.get(`screen`).width / 27,
+	},
+	recommendedBorder: {
+		borderWidth: 2,
+		borderColor: BORDER_COLOUR_TEAL,
+		borderRadius: 5,
+		paddingBottom: `2%`,
+		marginLeft: `10%`,
+		paddingRight: `3%`,
+		marginRight: `7%`,
+	},
+});

package/src/components/RecommendedInsulin.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { InjectionMethod } from "../types/enum";
+import { RecommendationError } from "../utils/RecommendationError";
+interface IProps {
+    insulinRecommendation?: number;
+    activityReduction?: number;
+    injectionMethod: InjectionMethod;
+    updateRecommendedInsulin(value: number): void;
+    onError(error: RecommendationError): void;
+}
+interface IState {
+    insulin: string;
+}
+export default class RecommendedInsulin extends React.Component<IProps, IState> {
+    callbackInput: () => void;
+    constructor(props: IProps);
+    handleOnPress: () => void;
+    updatePartially: (insulin: string) => string;
+    handleUpdatedInsulin: (value: number) => void;
+    render: () => JSX.Element;
+}
+export {};

package/src/components/RecommendedInsulin.js

@@ -0,0 +1,110 @@
+"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 react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
+const i18nUtils_1 = require("../locale/i18nUtils");
+const RecommendationError_1 = require("../utils/RecommendationError");
+const Utils_1 = require("../utils/Utils");
+const Icon_1 = __importDefault(require("./Icon"));
+const InfoBars_1 = require("./InfoBars");
+const InvisibleNumberInput_1 = __importDefault(require("./InvisibleNumberInput"));
+class RecommendedInsulin extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.handleOnPress = () => {
+            this.callbackInput?.();
+        };
+        this.updatePartially = (insulin) => {
+            const replacedZero = insulin.length > 1 && insulin.startsWith(`0`) && !insulin.startsWith(`0.`) ? insulin.substring(1) : insulin;
+            this.setState({
+                insulin: replacedZero,
+            });
+            return replacedZero;
+        };
+        this.handleUpdatedInsulin = (value) => {
+            const rounded = Utils_1.Utils.roundValue(value, this.props.injectionMethod);
+            // https://hedia.atlassian.net/browse/HDA-795
+            const limited = (1 - this.props.activityReduction) * 50;
+            if (rounded > limited) {
+                this.updatePartially(`${limited}`);
+                return this.props.onError(RecommendationError_1.InsulinLimitError);
+            }
+            this.updatePartially(`${rounded}`);
+            this.props.updateRecommendedInsulin(rounded);
+        };
+        this.render = () => {
+            return (<react_1.default.Fragment>
+				<react_native_1.TouchableOpacity accessibilityLabel="editRecommendedInsulin" onPress={this.handleOnPress}>
+					<react_native_linear_gradient_1.default style={recommendedInsulinStyles.container} colors={[`#a200ff`, `#578aff`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
+						<react_native_1.View style={recommendedInsulinStyles.recommendedTextContainer}>
+							<react_native_1.Text style={recommendedInsulinStyles.recommendedText}>
+								{i18nUtils_1.i18n._(macro_1.t `Recommended amount of insulin`)}
+							</react_native_1.Text>
+						</react_native_1.View>
+						<react_native_1.View style={recommendedInsulinStyles.recommendedContainer}>
+							<react_native_1.View style={recommendedInsulinStyles.valueContainer}>
+								<react_native_1.Text style={recommendedInsulinStyles.value}>{this.state.insulin}</react_native_1.Text>
+								<react_native_1.Text style={recommendedInsulinStyles.units}>{i18nUtils_1.i18n._(macro_1.t `Units`)}</react_native_1.Text>
+							</react_native_1.View>
+							<Icon_1.default style={recommendedInsulinStyles.editIcon} iconIdentifier={`Feather/edit`}/>
+						</react_native_1.View>
+					</react_native_linear_gradient_1.default>
+				</react_native_1.TouchableOpacity>
+				<InvisibleNumberInput_1.default decimalPlaces={3} negativeAllowed={false} cleanPartialInput={false} partialInput={this.updatePartially} onEnd={this.handleUpdatedInsulin} visible={(visible) => (this.callbackInput = visible)} startValue={`${this.state.insulin}`}/>
+			</react_1.default.Fragment>);
+        };
+        this.state = {
+            insulin: `${props.insulinRecommendation ?? 0}`,
+        };
+    }
+}
+exports.default = RecommendedInsulin;
+const recommendedInsulinStyles = react_native_1.StyleSheet.create({
+    container: {
+        marginHorizontal: InfoBars_1.infoStyles.margin.margin,
+        borderRadius: 5,
+    },
+    recommendedTextContainer: {
+        flex: 1,
+        alignItems: `center`,
+        marginTop: `3%`,
+    },
+    recommendedText: {
+        color: `white`,
+        fontWeight: `bold`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 24,
+    },
+    recommendedContainer: {
+        flex: 1,
+        flexDirection: `row`,
+        marginLeft: `10%`,
+    },
+    valueContainer: {
+        flex: 1,
+        flexDirection: `row`,
+        justifyContent: `center`,
+    },
+    value: {
+        color: `white`,
+        fontWeight: `bold`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 5,
+    },
+    units: {
+        color: `white`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 28,
+        textAlignVertical: `bottom`,
+        paddingBottom: `6%`,
+    },
+    editIcon: {
+        color: `white`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 28,
+        textAlignVertical: `center`,
+        paddingBottom: `10%`,
+        marginRight: `5%`,
+    },
+});