@hedia/recommendation-screen 2.1.75 → 2.2.0-alpha.0

package/dist/src/components/InvisibleNumberInput.js

@@ -0,0 +1,121 @@
+import React from "react";
+import { Platform, StyleSheet, TextInput } from "react-native";
+/**
+ * InvisibleNumberInput is used to enable numerical input by the user without displaying a traditional input field on the screen.
+ * Since the input field is made invisible and thus can’t be tapped directly by the user we need to be able to call
+ * its focus() method from the parent component in order to activate the input field and show the keyboard.
+ * We do this by defining a function that calls the input field’s focus() method inside the InvisibleNumberInput component when it has been mounted.
+ * This function is then passed to the parent by giving it as the argument for a callback function named visible.
+ */
+export default class InvisibleNumberInput extends React.Component {
+    /** For holding a reference to the TextInput component so it can be focused when the InvisibleNumberInput component has been mounted. */
+    textInput;
+    /** Initialise the state value variable with `0` */
+    state = {
+        value: `0`,
+    };
+    /**
+     * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
+     * Perform various initialisation steps:
+     * 1. Set the value state of the component to the startValue prop (or to '0' if it is undefined)
+     * 2. Call the visible callback function using an anonymous function as argument. The anonymous function shall do the following:
+     * 	- Set the value state of the InvisibleNumberInput component to the startValue prop (or to '0' if it is undefined)
+     * 	- Return the value from calling the focus() method on the input field.
+     */
+    componentDidMount() {
+        this.setState({
+            value: this.props.startValue ?? `0`,
+        });
+        this.props.visible(() => {
+            this.setState({
+                value: this.props.startValue ?? `0`,
+            });
+            return this.textInput?.focus();
+        });
+    }
+    /**
+     * Sanitise a user-entered value by removing invalid characters
+     *
+     * Steps:
+     * 1. Use regular expressions to make the following manipulations to the text argument in the defined order and save the result to a local string variable named replaced.
+     * 	- Replace any commas with periods
+     * 	- Remove any characters that comes after two groups of zero or more digits separated by a period.
+     * 2. Define a function named round that rounds a given string that contains a number to have the amount of decimals given by the decimalPlaces prop. Return the result as a string.
+     * 3. If the value of the replaced variable from step 1 is not a NaN (not a number) when converted to a Number type then use the round function defined in step 2 on replaced and return the result
+     * 4. (If the NaN-check from step 2 didn’t fail) return the string '0'.
+
+     * @param text The string input to clean up
+     * @returns A string with the cleaned text.
+     */
+    cleanInput = (text) => {
+        const replaced = text.replace(/\,/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
+        const round = (value) => {
+            const temp = Number(value) * Math.pow(10, this.props.decimalPlaces);
+            const rounded = Math.round(temp) / Math.pow(10, this.props.decimalPlaces);
+            return rounded.toFixed(this.props.decimalPlaces);
+        };
+        if (!isNaN(Number(replaced))) {
+            return round(replaced);
+        }
+        return `0`;
+    };
+    /**
+     * Handle what happens when the text in the input field is being changed.
+     * That includes cleaning the text a little and then saving the value and potentially calling a callback function.
+     *
+     * Steps:
+     * 1. If the cleanPartialInput prop is true, use the cleanInput() method to to clean the content of the text argument and save it to a variable named cleaned.
+     *    Otherwise just replace any commas in the text argument with periods and save the result to the same variable.
+     * 2. Remove repeated periods from the text in the cleaned variable and save the the result in a new variable named replacedSeparator.
+     * 3. Set the value state of the component to replacedSeparator.
+     * 4. If the partialInput callback function prop is defined, call it with replacedSeparator as argument.
+     * @param text The updated text in the input field
+     */
+    handleOnChangeText = (text) => {
+        const cleaned = this.props.cleanPartialInput ? this.cleanInput(text) : text.replace(/\,/g, `.`);
+        let replacedSeparator = cleaned.replace(/\.+/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
+        if (!this.props.negativeAllowed) {
+            replacedSeparator = replacedSeparator.replace(/[^0-9.]/g, ``);
+        }
+        this.setState({
+            value: `${replacedSeparator}`,
+        });
+        this.props.partialInput?.(`${replacedSeparator}`);
+    };
+    /**
+     * Handle what should happen when the user finish editing the input field.
+     *
+     * Steps:
+     * 1. Use the cleanInput() method on the value state and store the result in a variable named cleaned.
+     * 2. If the onEnd prop is not null, then convert the value of cleaned to a number and use it as an argument to call the onEnd prop function.
+     */
+    onEndEdit = () => {
+        const cleaned = this.cleanInput(this.state.value);
+        this.props.onEnd?.(Number(cleaned));
+    };
+    /**
+     * @returns JSX element to display a TextInput field with the component’s value state as its value
+     * and the handleOnChangeText() and onEndEdit() methods as the textInput’s onChangeText and onEndEditing respectively.
+     */
+    render() {
+        const { testID } = this.props;
+        return (<TextInput testID={testID} value={`${this.state.value}`} ref={(textInput) => {
+                if (textInput !== null) {
+                    this.textInput = textInput;
+                }
+            }} style={inputStyles.input} keyboardType={`numeric`} returnKeyType={`done`} onChangeText={this.handleOnChangeText} onEndEditing={this.onEndEdit} maxLength={this.props.maxLength} selectTextOnFocus/>);
+    }
+}
+const inputStyles = StyleSheet.create({
+    input: {
+        ...Platform.select({
+            ios: {
+                width: 0,
+                height: 0,
+            },
+            android: {
+                opacity: 0,
+            },
+        }),
+    },
+});

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface ILimitationMessageProps {
+    /** The message to display to the user. */
+    limitationMessage: string | null;
+    /** Callback function taking no arguments and giving no return value - To be called when the user presses the “OK” button. */
+    onPressNextButton(): void;
+}
+/** Display a message on the screen to inform the user that their insulin recommendation was limited. */
+export default class LimitationMessage extends React.Component<ILimitationMessageProps> {
+    /**
+     * @returns JSX element for displaying a dialog with the limitationMessage and an “OK” button that calls the onPressNextButton prop callback when tapped.
+     */
+    render: () => JSX.Element;
+}

package/dist/src/components/LimitationMessage.js

@@ -0,0 +1,30 @@
+import { t } from "@lingui/macro";
+import * as React from "react";
+import { TouchableOpacity, View } from "react-native";
+import { i18n } from "../locale/i18nUtils";
+import { Testing } from "../types/enum";
+import { stylesModal } from "./RecommendationModal";
+import TextBold from "./text/TextBold";
+import TextRegular from "./text/TextRegular";
+/** Display a message on the screen to inform the user that their insulin recommendation was limited. */
+export default class LimitationMessage extends React.Component {
+    /**
+     * @returns JSX element for displaying a dialog with the limitationMessage and an “OK” button that calls the onPressNextButton prop callback when tapped.
+     */
+    render = () => {
+        const { limitationMessage } = this.props;
+        return (<React.Fragment>
+				<View style={stylesModal.container}>
+					<View style={stylesModal.titleContainer}>
+						<TextBold style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</TextBold>
+					</View>
+					<TextRegular style={stylesModal.textMessage}>{limitationMessage}</TextRegular>
+				</View>
+				<View style={stylesModal.containerAcceptButton}>
+					<TouchableOpacity testID={Testing.Id.LimitationMessageTestIds.OkButton} style={stylesModal.okButton} onPress={this.props.onPressNextButton}>
+						<TextRegular style={stylesModal.buttonText}>{i18n._(t `OK`)}</TextRegular>
+					</TouchableOpacity>
+				</View>
+			</React.Fragment>);
+    };
+}

package/{lib/typescript → dist/src}/components/LineSeparator.d.ts

@@ -1,15 +1,10 @@
 import React from "react";
 export interface IProps {
     /** The color that the line should have. */
-    borderBottomColor: string;
-    /** The marginTop of the line. */
-    marginTop?: number;
-    /** The marginBottom of the line. */
-    marginBottom?: number;
+    color: string;
 }
 /** Display a horizontal line for visually separating elements in the user interface. */
 export default class LineSeparator extends React.Component<IProps> {
     /** @return JSX element for displaying a thin horizontal line in the given color. */
     render(): JSX.Element;
 }
-//# sourceMappingURL=LineSeparator.d.ts.map

package/dist/src/components/LineSeparator.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+/** Display a horizontal line for visually separating elements in the user interface. */
+export default class LineSeparator extends React.Component {
+    /** @return JSX element for displaying a thin horizontal line in the given color. */
+    render() {
+        return (<React.Fragment>
+				<View style={[lineSeparatorStyles.lineStyle, { borderBottomColor: this.props.color }]}/>
+			</React.Fragment>);
+    }
+}
+const lineSeparatorStyles = StyleSheet.create({
+    lineStyle: {
+        marginHorizontal: `3%`,
+        marginVertical: `2%`,
+        borderBottomWidth: 1,
+    },
+});

package/{lib/typescript → dist/src}/components/RecentInsulin.d.ts

@@ -9,11 +9,9 @@ export interface IProps {
 export default class RecentInsulin extends React.Component<IProps> {
     /**
      *
-     * @returns JSX element that displays a card with the question “Have you taken insulin within the last 4 hours?
-     * Along with two buttons labeled “Yes” and “No” respectively.
+     * @returns JSX element that displays a card with the question “Have you taken insulin within the last 4 hours? Along with two buttons labeled “Yes” and “No” respectively.
      * If the user taps the “Yes” button, the onRecentInsulinYes prop callback function should be called.
      * If the user taps the “No” button, the onRecentInsulinNo prop callback function should be called.
      */
     render: () => JSX.Element;
 }
-//# sourceMappingURL=RecentInsulin.d.ts.map

package/dist/src/components/RecentInsulin.js

@@ -0,0 +1,73 @@
+import { t } from "@lingui/macro";
+import React from "react";
+import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
+import LinearGradient from "react-native-linear-gradient";
+import { i18n } from "../locale/i18nUtils";
+import { Testing } from "../types/enum";
+import { colors } from "../utils/Constants";
+import { infoStyles } from "./InfoBars";
+import TextBold from "./text/TextBold";
+/** Display a card that prompts the user to recall if they injected insulin recently. */
+export default class RecentInsulin extends React.Component {
+    /**
+     *
+     * @returns JSX element that displays a card with the question “Have you taken insulin within the last 4 hours? Along with two buttons labeled “Yes” and “No” respectively.
+     * If the user taps the “Yes” button, the onRecentInsulinYes prop callback function should be called.
+     * If the user taps the “No” button, the onRecentInsulinNo prop callback function should be called.
+     */
+    render = () => {
+        const { container, title, buttonContainer, yesNoContainer, yesNoText } = styles;
+        return (<LinearGradient style={container} colors={[`rgba(87, 138, 255, 0.3)`, `rgba(162, 0, 255, 0.3)`]} useAngle={true} angle={170}>
+				<TextBold style={title}>
+					{i18n._(t `Have you taken rapid-acting insulin within the last 4 hours?`)}
+				</TextBold>
+
+				<View style={buttonContainer}>
+					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.Yes} onPress={this.props.onRecentInsulinYes} style={[yesNoContainer, { marginRight: `2%` }]}>
+						<TextBold style={yesNoText}>{i18n._(t `Yes`)}</TextBold>
+					</TouchableOpacity>
+					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.No} onPress={this.props.onRecentInsulinNo} style={[yesNoContainer, { marginLeft: `2%` }]}>
+						<TextBold style={yesNoText}>{i18n._(t `No`)}</TextBold>
+					</TouchableOpacity>
+				</View>
+			</LinearGradient>);
+    };
+}
+const { width } = Dimensions.get(`screen`);
+const styles = StyleSheet.create({
+    container: {
+        ...infoStyles.margin,
+        borderRadius: 5,
+    },
+    title: {
+        fontFamily: `Poppins-Bold`,
+        ...infoStyles.label,
+        fontSize: width / 24,
+        lineHeight: width / 16,
+        textAlign: `center`,
+        paddingHorizontal: width / 13,
+        marginTop: width / 32,
+    },
+    buttonContainer: {
+        flex: 1,
+        flexDirection: `row`,
+        justifyContent: `center`,
+        marginVertical: width / 26,
+    },
+    yesNoContainer: {
+        flex: 1,
+        maxWidth: width / 4,
+        backgroundColor: colors.teal,
+        borderColor: colors.teal,
+        borderRadius: 50,
+        borderWidth: 2,
+    },
+    yesNoText: {
+        textAlign: `center`,
+        paddingVertical: width / 43,
+        color: colors.darkBlue,
+        fontSize: width / 25,
+        lineHeight: width / 16,
+        fontFamily: `Poppins-Bold`,
+    },
+});

package/{lib/typescript → dist/src}/components/RecommendationModal.d.ts

@@ -8,20 +8,16 @@ export interface IModalProps {
     attentionMessage: string | null;
     /** A message to display to the user to inform them if their insulin recommendation was limited by the maximum threshold. */
     limitationMessage: string | null;
-    /**
-     * If true then the modal will only display the limitation message and not the attention message.
-     */
-    onlyShowLimitationMessage: boolean;
     /** Callback function taking no arguments and returning no value - Should be called if the user taps the “OK” button on the modal. */
     onClickOkButton(): void;
     /**
-     * Callback function taking no arguments and returning no value.
+     *  Callback function taking no arguments and returning no value.
      * Should be called if the user taps the “accept” button when they are recommended to eat additional carbohydrates.
      */
     onAcceptCarbohydrates(): void;
     /**
      * Callback function taking no arguments and returning no value.
-     * Should be called if the user taps the “decline” button when they are recommended to eat additional carbohydrates.
+     *  Should be called if the user taps the “decline” button when they are recommended to eat additional carbohydrates.
      */
     onDeclineCarbohydrates(): void;
 }
@@ -45,7 +41,6 @@ export default class RecommendationModal extends React.Component<IModalProps, IM
      * @param props The class props
      */
     constructor(props: IModalProps);
-    componentDidUpdate(prevProps: Readonly<IModalProps>): void;
     /**
      * Handle what happens when the “next” button is pressed.
      *
@@ -85,121 +80,126 @@ export default class RecommendationModal extends React.Component<IModalProps, IM
 }
 /** @internal */
 export declare const stylesModal: {
-    safe: {
-        backgroundColor: string;
-    };
     modalStyle: {
         margin: number;
+        backgroundColor: string;
     };
-    scrollViewContainer: {
-        flexGrow: number;
+    container: {
+        flex: number;
         justifyContent: "center";
+        paddingHorizontal: string;
     };
-    container: {
+    containerAcceptButton: {
+        flex: number;
+        justifyContent: "flex-start";
+    };
+    titleContainer: {
+        marginBottom: string;
+    };
+    recommendationRow: {
         justifyContent: "center";
+        alignContent: "center";
+        marginBottom: string;
     };
     textTittleMessage: {
         color: string;
-        textAlign: "center";
-        fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
-        /** A message to display to the user to inform them if their insulin recommendation was limited by the maximum threshold. */
-        lineHeight: number;
+        textAlign: "center";
     };
     textMessage: {
         color: string;
-        textAlign: "center";
-        marginHorizontal: number;
-        marginTop: number;
-        fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
-        lineHeight: number;
+        textAlign: "center";
     };
     buttonText: {
         color: string;
-        textAlign: "center";
-        paddingHorizontal: number;
-        paddingVertical: number;
-        fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
-        lineHeight: number;
+        textAlign: "center";
+    };
+    addToCalculationContainer: {
+        justifyContent: "flex-start";
+        marginVertical: string;
     };
     innerView: {
         alignContent: "center";
+        paddingVertical: string;
+        paddingHorizontal: string;
+        marginTop: string;
         borderRadius: number;
-        backgroundColor: string;
-        paddingVertical: number;
-        marginHorizontal: number;
-        marginTop: number;
-        marginBottom: number;
+        borderWidth: number;
+        borderColor: string;
+    };
+    suggestedContainer: {
+        justifyContent: "center";
+        flexDirection: "row";
+        marginBottom: string;
     };
     suggestedCarbs: {
         color: string;
-        fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
-        lineHeight: number;
     };
     textCenter: {
         textAlign: "center";
-        paddingHorizontal: number;
-        fontFamily: import("./styles/fonts").FontFamily;
-        fontSize: number;
-        lineHeight: number;
     };
     recommendEatingText: {
         color: string;
-        textAlign: "center";
-        paddingHorizontal: number;
-        marginBottom: number;
-        fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
-        lineHeight: number;
+        textAlign: "center";
     };
     carbohydrateText: {
         color: string;
-        fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
-        lineHeight: number;
     };
     addToCalculation: {
         color: string;
-        textAlign: "center";
-        marginBottom: number;
-        marginHorizontal: number;
-        fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
-        lineHeight: number;
+        textAlign: "center";
     };
     recommendationButtonsContainer: {
         justifyContent: "center";
         flexDirection: "row";
-        paddingHorizontal: number;
+        margin: string;
     };
-    carbsButtonText: {
+    affirmativeCarbsText: {
         color: string;
+        fontSize: number;
         textAlign: "center";
-        paddingHorizontal: number;
-        paddingVertical: number;
-        fontFamily: import("./styles/fonts").FontFamily;
+    };
+    negativeCarbsText: {
+        color: string;
         fontSize: number;
-        lineHeight: number;
+        textAlign: "center";
     };
-    button: {
+    affirmativeCarbsButton: {
+        marginTop: string;
         borderRadius: number;
         borderWidth: number;
         borderColor: string;
+        width: number;
+        height: number;
         alignSelf: "center";
-        minWidth: number;
+        justifyContent: "center";
+        marginRight: string;
+    };
+    negativeCarbsButton: {
+        marginTop: string;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string;
+        width: number;
+        height: number;
+        alignSelf: "center";
+        justifyContent: "center";
+        marginLeft: string;
     };
     okButton: {
-        backgroundColor: string;
-        justifyContent: "flex-start";
-        marginTop: number;
+        marginTop: string;
         borderRadius: number;
         borderWidth: number;
         borderColor: string;
+        width: number;
+        height: number;
         alignSelf: "center";
-        minWidth: number;
+        justifyContent: "center";
     };
 };
-//# sourceMappingURL=RecommendationModal.d.ts.map