@hedia/recommendation-screen 2.2.0-alpha.45 → 2.2.0-alpha.6

package/dist/src/components/RecommendedInsulin.js

@@ -1,15 +1,17 @@
-import React from "react";
-import { Alert, StyleSheet, TouchableOpacity, View } from "react-native";
 import { BolusCalculator } from "@hedia/types";
-import Edit from "../assets/IconsSVG/Edit";
-import { t } from "../locales/translate";
+import { t } from "@lingui/macro";
+import React from "react";
+import { Alert, Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
+import LinearGradient from "react-native-linear-gradient";
+import EditIcon from "../assets/icons/Edit";
+import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { Messages } from "../utils/AttentionMessages";
 import { colors } from "../utils/Constants";
 import { Utils } from "../utils/Utils";
 import InvisibleNumberInput from "./InvisibleNumberInput";
-import { FONTS } from "./styles/fonts";
-import Text from "./Text";
+import TextBold from "./text/TextBold";
+import TextRegular from "./text/TextRegular";
 const { RecommendedInsulinTestIds } = Testing.Id;
 const SAFETY_INSULIN_LIMIT = BolusCalculator.Constants.SAFETY_INSULIN_LIMIT;
 /** Input field for displaying the entered amount of insulin (which defaults to HDA’s recommendation) and allowing the user to edit it. */
@@ -86,8 +88,10 @@ export default class RecommendedInsulin extends React.Component {
         if (rounded > limited) {
             this.setState({ partialInput: this.props.insulinRecommendation?.toString() ?? null });
             this.props.updateRecommendedInsulin(this.props.insulinRecommendation);
-            return Alert.alert(t(`Attention`), Messages.InsulinInputWasLimited(this.props.activityReduction), [
-                { text: t(`OK`) },
+            return Alert.alert(i18n._(t `Attention`), Messages.InsulinInputWasLimited(this.props.activityReduction), [
+                {
+                    text: i18n._(t `OK`),
+                },
             ]);
         }
         this.updatePartially(`${rounded}`);
@@ -99,68 +103,80 @@ export default class RecommendedInsulin extends React.Component {
      */
     render = () => {
         const shownInsulin = this.state.partialInput ?? this.props.insulinRecommendation ?? `0`;
-        const { EditRecommendedInsulin, EditRecommendedInsulinIcon, ShownInsulinText, InvisibleInsulinInput } = RecommendedInsulinTestIds;
-        return (<React.Fragment>
-				<TouchableOpacity testID={EditRecommendedInsulin} onPress={this.handleOnPress} style={style.container}>
-					<Text style={style.titleText}>{t(`Recommended amount of insulin`)}</Text>
-					<Text style={style.insulinText} testID={ShownInsulinText}>
-						{shownInsulin}
-					</Text>
-					<Text style={style.unitsText}>{t(`Units`)}</Text>
-					<View style={style.enterManually}>
-						{Edit({ color: colors.teal, style: style.editIcon, testID: EditRecommendedInsulinIcon })}
-						<Text style={style.editText}>{t(`Enter Manually`)}</Text>
-					</View>
+        const { container, editText, title, recommendedContainer, valueContainer, value, units, editButton } = styles;
+        return (<>
+				<TouchableOpacity testID={RecommendedInsulinTestIds.EditRecommendedInsulin} onPress={this.handleOnPress}>
+					<LinearGradient style={container} colors={[colors.purple, colors.blue]} useAngle={true} angle={315}>
+						<TextBold style={title}>
+							{i18n._(t `Recommended amount of rapid-acting insulin for immidiate injection based on forecasted glucose`)}
+						</TextBold>
+						<View style={recommendedContainer}>
+							<View style={valueContainer}>
+								<TextBold style={value} testID={RecommendedInsulinTestIds.ShownInsulinText}>
+									{shownInsulin}
+								</TextBold>
+								<TextRegular style={units}>{i18n._(t `Units`)}</TextRegular>
+							</View>
+							<View testID={RecommendedInsulinTestIds.EditRecommendedInsulinIcon} style={editButton}>
+								<EditIcon />
+								<TextRegular style={editText}>{i18n._(t `Edit`)}</TextRegular>
+							</View>
+						</View>
+					</LinearGradient>
 				</TouchableOpacity>
 
-				<InvisibleNumberInput testID={InvisibleInsulinInput} decimalPlaces={1} maxLength={4} negativeAllowed={false} cleanPartialInput={false} partialInput={this.updatePartially} onEnd={this.handleUpdatedInsulin} visible={(visible) => (this.callbackInput = visible)} startValue={`${shownInsulin}`}/>
-			</React.Fragment>);
+				<InvisibleNumberInput testID={RecommendedInsulinTestIds.InvisibleInsulinInput} decimalPlaces={3} negativeAllowed={false} cleanPartialInput={false} partialInput={this.updatePartially} onEnd={this.handleUpdatedInsulin} visible={(visible) => (this.callbackInput = visible)} startValue={`${shownInsulin}`}/>
+			</>);
     };
 }
-const style = StyleSheet.create({
+const { width } = Dimensions.get(`screen`);
+const styles = StyleSheet.create({
     container: {
+        marginHorizontal: width / 17,
+        marginTop: width / 35,
         borderRadius: 5,
-        padding: 16,
-        backgroundColor: colors.deepPurple,
-        marginBottom: 32,
-        minHeight: 200,
+        paddingTop: width / 30,
     },
-    editText: {
-        ...FONTS.Poppins.regular_SM,
-        color: colors.teal,
+    title: {
+        fontFamily: `Poppins-Bold`,
+        fontSize: width / 28,
+        lineHeight: width / 19,
+        color: `white`,
         textAlign: `center`,
+        paddingHorizontal: width / 12,
     },
-    unitsText: {
-        ...FONTS.Poppins.medium_XS,
-        color: colors.white,
-        textAlign: `center`,
-        marginTop: -16,
-        marginBottom: 16,
+    recommendedContainer: {
+        marginHorizontal: width / 12,
+        alignContent: `center`,
     },
-    insulinText: {
-        ...FONTS.Oswald.bold_7XL,
-        color: colors.white,
-        textAlign: `center`,
-        minHeight: 110,
-        lineHeight: 90,
-        letterSpacing: 6,
+    valueContainer: {
+        flexDirection: `row`,
         justifyContent: `center`,
     },
-    titleText: {
-        ...FONTS.Poppins.medium_Base,
-        color: colors.white,
-        textAlign: `center`,
-        marginBottom: 16,
+    value: {
+        fontFamily: `Poppins-Bold`,
+        color: `white`,
+        fontSize: width / 6,
+        lineHeight: width / 4,
+        marginLeft: width / 15,
     },
-    editIcon: {
-        height: 16,
-        width: 16,
-        marginRight: 4,
-        alignSelf: `center`,
+    units: {
+        alignSelf: `flex-end`,
+        color: `white`,
+        fontSize: width / 28,
+        paddingBottom: `8%`,
+        marginLeft: width / 100,
     },
-    enterManually: {
+    editButton: {
+        position: `absolute`,
         flexDirection: `row`,
-        justifyContent: `center`,
+        right: width / 20,
+        top: width / 16,
+    },
+    editText: {
+        fontSize: width / 28,
+        color: `white`,
+        opacity: 0.8,
+        marginLeft: width / 80,
     },
 });
-//# sourceMappingURL=RecommendedInsulin.js.map

package/dist/src/components/Remeasure.d.ts

@@ -8,15 +8,25 @@ export interface IProps {
      */
     onSliderChange(value: number): void;
 }
-export interface IState {
-    remeasureTime: number;
-}
 /**
  * The Remeasure component has a slider child component that the user can drag to change
  * when they will get a reminder notification about measuring their BGL again.
  */
-export default class Remeasure extends React.Component<IProps, IState> {
-    constructor(props: IProps);
+export default class Remeasure extends React.Component<IProps> {
+    /** For holding a reference to the slider component so its initial value can be set (only one time) when the Remeasure component has been mounted. */
+    private slider?;
+    /**
+     * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
+     *
+     * If the value of a slider component in React Native is set to track an outside state,
+     * the slider indicator may jump back and forth while updates to the value are propagated through the affected objects and components.
+     * Since we don’t need to change the value of the slider from the outside after initialising it to the default value,
+     * we simply set the default value (using setNativeProp) upon initialisation instead of using the slider’s normal value prop to set it.
+     *
+     * Steps:
+     * 1. Call the setNativeProps() method on the slider to set its value to the remeasureTime prop.
+     */
+    componentDidMount(): void;
     /**
      * Steps:
      * 1. Use limitTime() to limit/clamp the value of remeasureTime in the range 0 to 6.

package/dist/src/components/Remeasure.js

@@ -1,19 +1,35 @@
+import { t } from "@lingui/macro";
 import Slider from "@react-native-community/slider";
 import React from "react";
-import { StyleSheet, View } from "react-native";
-import { t } from "../locales/translate";
+import { Dimensions, Platform, StyleSheet, View } from "react-native";
+import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { colors } from "../utils/Constants";
-import { FONTS } from "./styles/fonts";
-import Text from "./Text";
+import { infoStyles } from "./InfoBars";
+import TextBold from "./text/TextBold";
+import TextRegular from "./text/TextRegular";
 /**
  * The Remeasure component has a slider child component that the user can drag to change
  * when they will get a reminder notification about measuring their BGL again.
  */
 export default class Remeasure extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { remeasureTime: props.remeasureTime };
+    /** For holding a reference to the slider component so its initial value can be set (only one time) when the Remeasure component has been mounted. */
+    slider;
+    /**
+     * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
+     *
+     * If the value of a slider component in React Native is set to track an outside state,
+     * the slider indicator may jump back and forth while updates to the value are propagated through the affected objects and components.
+     * Since we don’t need to change the value of the slider from the outside after initialising it to the default value,
+     * we simply set the default value (using setNativeProp) upon initialisation instead of using the slider’s normal value prop to set it.
+     *
+     * Steps:
+     * 1. Call the setNativeProps() method on the slider to set its value to the remeasureTime prop.
+     */
+    componentDidMount() {
+        this.slider?.setNativeProps({
+            value: this.props.remeasureTime,
+        });
     }
     /**
      * Steps:
@@ -22,7 +38,6 @@ export default class Remeasure extends React.Component {
      * @param remeasureTime The value of the remeasurement slider.
      */
     handleSliderChange = (remeasureTime) => {
-        this.setState({ remeasureTime });
         const limited = this.limitTime(remeasureTime);
         this.props.onSliderChange(limited);
     };
@@ -40,64 +55,76 @@ export default class Remeasure extends React.Component {
      * with a horizontal slider for changing it in increments of 0.5 hours in the range 0 to 6.
      */
     render() {
-        const measure = this.state.remeasureTime > 0;
-        const limited = this.limitTime(this.state.remeasureTime);
-        const { RemeasureHours, RemeasureSlider } = Testing.Id.RemeasureTestIds;
-        return (<View style={styles.container}>
-				<View style={styles.textContainer}>
-					<Text style={styles.remeasureLabel} maxFontSizeMultiplier={1}>
-						{t(`Remind me to remeasure in`)}
-					</Text>
-					<View style={styles.valueUnitContainer}>
-						<Text style={styles.value} testID={RemeasureHours} maxFontSizeMultiplier={1}>
-							{measure ? limited : t(`OFF`)}
-						</Text>
-						{measure && (<Text style={styles.units} maxFontSizeMultiplier={1}>
-								{t(`hours`)}
-							</Text>)}
+        const measure = this.props.remeasureTime > 0;
+        const limited = this.limitTime(this.props.remeasureTime);
+        const marginHorizontal = Platform.OS === `ios` ? `3%` : `0%`;
+        const valueContainer = measure ? remeasureStyles.valueContainer : variantStyles.centeredValueContainer;
+        return (<View style={remeasureStyles.container}>
+				<View style={remeasureStyles.borderContainer}>
+					<View style={remeasureStyles.remeasureContainer}>
+						<TextBold style={remeasureStyles.remeasureLabel}>
+							{i18n._(t `Remind me to remeasure in`)}
+						</TextBold>
+					</View>
+					<View style={remeasureStyles.valueUnitContainer}>
+						<View style={valueContainer}>
+							<TextBold style={remeasureStyles.value} testID={Testing.Id.RemeasureTestIds.RemeasureHours}>
+								{measure ? limited : i18n._(t `OFF`)}
+							</TextBold>
+						</View>
+						{measure ? (<View style={remeasureStyles.unitContainer}>
+								<TextRegular style={remeasureStyles.units}>{i18n._(t `hours`)}</TextRegular>
+							</View>) : null}
 					</View>
 				</View>
-
-				<Slider testID={RemeasureSlider} maximumTrackTintColor={colors.mistBlue} minimumTrackTintColor={colors.blue} thumbTintColor={colors.white} maximumValue={6} minimumValue={0} step={0.5} onValueChange={this.handleSliderChange} value={limited}/>
+				<Slider ref={(slider) => {
+                if (slider !== null) {
+                    this.slider = slider;
+                }
+            }} testID={Testing.Id.RemeasureTestIds.RemeasureSlider} maximumTrackTintColor={colors.mistBlue} minimumTrackTintColor={colors.teal} thumbTintColor={colors.teal} maximumValue={6} minimumValue={0} step={0.5} style={[remeasureStyles.sliderStyle, { marginHorizontal }]} onValueChange={this.handleSliderChange}/>
 			</View>);
     }
 }
-const styles = StyleSheet.create({
+const remeasureStyles = StyleSheet.create({
     container: {
         flexDirection: `column`,
-        marginVertical: 32,
+        padding: `3%`,
     },
-    textContainer: {
-        flexDirection: `row`,
-        marginBottom: 18,
+    borderContainer: {
+        ...infoStyles.borderContainer,
+        alignItems: `center`,
     },
-    remeasureLabel: {
-        ...FONTS.Poppins.regular_Base,
-        color: colors.white,
+    remeasureContainer: {
         flex: 7,
-        alignSelf: `center`,
     },
-    offText: {
-        ...FONTS.Poppins.bold_Base,
-        color: colors.white,
+    remeasureLabel: {
+        color: `white`,
+        fontSize: Dimensions.get(`screen`).width / 28,
     },
     valueUnitContainer: {
-        flex: 3,
-        justifyContent: `center`,
-        alignItems: `baseline`,
-        flexDirection: `row`,
-        alignSelf: `center`,
+        ...infoStyles.valueUnitContainer,
+    },
+    valueContainer: {
+        ...infoStyles.valueContainer,
     },
     value: {
-        ...FONTS.Poppins.medium_2XL,
-        textAlign: `right`,
-        color: colors.white,
+        ...infoStyles.value,
+    },
+    unitContainer: {
+        ...infoStyles.unitContainer,
+        marginRight: `7%`,
     },
     units: {
-        ...FONTS.Poppins.regular_XS,
-        textAlign: `left`,
-        paddingLeft: 4,
-        color: colors.white,
+        ...infoStyles.units,
+    },
+    sliderStyle: {
+        marginTop: `3%`,
+        marginBottom: `2%`,
+    },
+});
+const variantStyles = StyleSheet.create({
+    centeredValueContainer: {
+        ...remeasureStyles.valueContainer,
+        alignItems: `center`,
     },
 });
-//# sourceMappingURL=Remeasure.js.map

package/dist/src/components/{TransferToLogbook.d.ts → SaveButton.d.ts}

@@ -13,7 +13,7 @@ export interface IState {
  * Render a button for transferring the recommendation to a logbook entry.
  * The button has a visually distinct pressed state to signal to the user that the button was actually activated before returning to the dashboard screen.
  */
-export default class TransferToLogbook extends React.Component<IProps, IState> {
+export default class SaveButton extends React.Component<IProps, IState> {
     /** Initialise the state pressed variable with false */
     state: IState;
     /**
@@ -30,5 +30,5 @@ export default class TransferToLogbook extends React.Component<IProps, IState> {
      * 2. Return a JSX element to display a touchable button (that is disabled when the pressed state is true)
      * @returns JSX element for displaying the transfer button
      */
-    render(): JSX.Element | undefined;
+    render(): JSX.Element;
 }

package/dist/src/components/{TransferToLogbook.js → SaveButton.js}

@@ -1,15 +1,15 @@
 import React from "react";
-import { StyleSheet, TouchableOpacity, View } from "react-native";
-import { t } from "../locales/translate";
+import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
+import { t } from "@lingui/macro";
+import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { colors } from "../utils/Constants";
-import { FONTS } from "./styles/fonts";
-import Text from "./Text";
+import TextBold from "./text/TextBold";
 /**
  * Render a button for transferring the recommendation to a logbook entry.
  * The button has a visually distinct pressed state to signal to the user that the button was actually activated before returning to the dashboard screen.
  */
-export default class TransferToLogbook extends React.Component {
+export default class SaveButton extends React.Component {
     /** Initialise the state pressed variable with false */
     state = {
         pressed: false,
@@ -35,34 +35,37 @@ export default class TransferToLogbook extends React.Component {
      */
     render() {
         if (!this.props.visible) {
-            return;
+            return <View style={styles.marginContainer}/>;
         }
-        return (<TouchableOpacity testID={Testing.Id.TransferToLogbookTestIds.TransferButton} onPress={this.handlePress} disabled={this.state.pressed} style={addToLogbookStyles.container}>
-				<View style={addToLogbookStyles.textContainer}>
-					<Text style={addToLogbookStyles.transferText}>{t(`Transfer to logbook`)}</Text>
-				</View>
-			</TouchableOpacity>);
+        return (<View style={styles.wrapper}>
+				<TouchableOpacity testID={Testing.Id.TransferToLogbookTestIds.TransferButton} onPress={this.handlePress} disabled={this.state.pressed} style={styles.button}>
+					<TextBold style={styles.text}>{i18n._(t `Save to logbook`)}</TextBold>
+				</TouchableOpacity>
+			</View>);
     }
 }
-const addToLogbookStyles = StyleSheet.create({
-    container: {
-        minWidth: 230,
-        borderRadius: 50,
-        backgroundColor: colors.teal,
-        marginBottom: 32,
-        justifyContent: `center`,
-        alignSelf: `center`,
+const { width } = Dimensions.get(`screen`);
+const styles = StyleSheet.create({
+    marginContainer: {
+        marginVertical: `3%`,
     },
-    textContainer: {
+    wrapper: {
         flexDirection: `row`,
-        justifyContent: `center`,
+        alignSelf: `center`,
+    },
+    button: {
+        backgroundColor: colors.teal,
+        borderRadius: 40,
+        marginTop: width / 5,
+        marginBottom: width / 18,
     },
-    transferText: {
-        ...FONTS.Poppins.bold_Base,
-        color: colors.black,
-        paddingVertical: 12,
-        paddingHorizontal: 16,
+    text: {
+        fontFamily: `Poppins-Bold`,
+        paddingVertical: width / 26,
+        paddingHorizontal: width / 10,
         textAlign: `center`,
+        color: colors.semiDarkBlue,
+        fontSize: width / 22,
+        lineHeight: width / 16,
     },
 });
-//# sourceMappingURL=TransferToLogbook.js.map

package/dist/src/components/TwoOptionModal.d.ts

@@ -0,0 +1,136 @@
+import * as React from "react";
+export interface ITwoOptionModalProps {
+    /** The title of the modal. */
+    title: string;
+    /** The message to show in the modal. */
+    message: string;
+    /** The label of the first option. */
+    textFirstOption: string;
+    /**  The label of the second option. */
+    textSecondOption: string;
+    /** Whether or not the modal shall have a cancel button in the corner to close the modal. */
+    isCancelable?: boolean;
+    /**  If true the buttons will be displayed side-by-side. If false the buttons will be displayed on top of each other. */
+    rowAsButtonLayout: boolean;
+    /** To be called if the user taps the first option button. */
+    firstOption(): void;
+    /** To be called if the user taps the second option button. */
+    secondOption(): void;
+    /** To be called if the user taps the optionally shown close button. */
+    onClose?(): void;
+}
+/** Display a modal with two buttons for the user to choose between. */
+export default class TwoOptionModal extends React.Component<ITwoOptionModalProps> {
+    /** Compose a JSX element for displaying the modal. */
+    render(): JSX.Element;
+}
+/** @internal */
+export declare const modalStyle: {
+    container: {
+        justifyContent: "center";
+        backgroundColor: string;
+        height: number;
+        position: "absolute";
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    };
+    modalContainer: {
+        margin: string;
+        backgroundColor: string;
+        borderRadius: number;
+    };
+    iconWrapper: {
+        alignSelf: "flex-end";
+        marginRight: string;
+        marginTop: string;
+    };
+    icon: {
+        color: string;
+        fontSize: number;
+    };
+    textContainer: {
+        marginHorizontal: string;
+        marginBottom: string;
+        marginTop: string;
+        alignSelf: "flex-start";
+    };
+    textContainerNotCancelable: {
+        marginHorizontal: string;
+        marginVertical: string;
+        alignSelf: "flex-start";
+    };
+    titleRowLayout: {
+        color: string;
+        fontSize: number;
+        textAlign: "center";
+        marginBottom: string;
+    };
+    titleColumnLayout: {
+        color: string;
+        fontSize: number;
+        textAlign: "center";
+        marginBottom: string;
+    };
+    message: {
+        color: string;
+        fontSize: number;
+        textAlign: "center";
+    };
+    buttonContainerRow: {
+        flexDirection: "row";
+        justifyContent: "space-around";
+        marginHorizontal: string;
+        marginVertical: string;
+    };
+    buttonContainerColumn: {
+        flexDirection: "column";
+        justifyContent: "space-around";
+        margin: string;
+    };
+    buttonRow: {
+        height: number;
+        marginTop: number;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string;
+        width: number;
+        alignSelf: "center";
+        justifyContent: "center";
+    };
+    firstButtonColumn: {
+        height: number;
+        width: number;
+        marginTop: number;
+        backgroundColor: string;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string;
+        alignSelf: "center";
+        justifyContent: "center";
+    };
+    secondButtonColumn: {
+        alignSelf: "center";
+        justifyContent: "center";
+        height: number;
+        width: number;
+        marginTop: string;
+    };
+    textButtonRow: {
+        textAlign: "center";
+        fontSize: number;
+        color: string;
+    };
+    textFirstButtonColumn: {
+        textAlign: "center";
+        fontSize: number;
+        paddingHorizontal: number;
+        color: string;
+    };
+    textSecondButtonColumn: {
+        textAlign: "center";
+        fontSize: number;
+        color: string;
+    };
+};