@hedia/recommendation-screen 2.1.42 → 2.1.43-alpha.0

package/dist/src/components/Header.js

@@ -1,10 +1,11 @@
 import { t } from "@lingui/macro";
 import React from "react";
-import { Dimensions, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { Dimensions, SafeAreaView, StyleSheet, TouchableOpacity, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY } from "../utils/Constants";
 import Icon from "./Icon";
+import TextBold from "./text/TextBold";
 /** Component to display a header text along with a cancel-button that triggers a callback function. */
 export default class Header extends React.Component {
     /** JSX element to display the cancel button and header. When the cancel button in the header is tabbed, the exitCallback prop callback function should be called. */
@@ -22,9 +23,9 @@ export default class Header extends React.Component {
 							</View>
 						</View>
 						<View style={headerStyles.headerTextContainer}>
-							<Text style={headerStyles.headerText} testID={Testing.Id.HeaderTestIds.HeaderText}>
+							<TextBold style={headerStyles.headerText} testID={Testing.Id.HeaderTestIds.HeaderText}>
 								{i18n._(t `INSULIN${`\n`}RECOMMENDATION`)}
-							</Text>
+							</TextBold>
 						</View>
 						<View style={headerStyles.headerFiller}/>
 					</View>
@@ -65,7 +66,6 @@ const headerStyles = StyleSheet.create({
     },
     headerText: {
         fontSize: Dimensions.get(`screen`).width / 18,
-        fontWeight: `bold`,
         textAlign: `center`,
         color: `white`,
     },

package/dist/src/components/Icon.js

@@ -12,6 +12,8 @@ export const IconSets = {
 };
 /** Component used to display a react-native-vector-icons */
 export default class Icon extends React.Component {
+    static defaultProps;
+    _root;
     setNativeProps(nativeProps) {
         this._root.setNativeProps(nativeProps);
     }

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

@@ -72,7 +72,6 @@ export declare const infoStyles: {
     label: {
         color: string;
         fontSize: number;
-        fontWeight: "bold";
     };
     valueUnitContainer: {
         flex: number;
@@ -86,7 +85,6 @@ export declare const infoStyles: {
     value: {
         color: string;
         fontSize: number;
-        fontWeight: "bold";
         textAlign: "right";
     };
     unitContainer: {

package/dist/src/components/InfoBars.js

@@ -1,46 +1,45 @@
 import { BloodGlucoseUnit, BloodKetonesUnit } from "@hedia/types";
 import { t } from "@lingui/macro";
 import React from "react";
-import { Dimensions, StyleSheet, Text, View } from "react-native";
+import { Dimensions, StyleSheet, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
 import { BORDER_COLOUR_GREY } from "../utils/Constants";
 import { Utils } from "../utils/Utils";
+import TextBold from "./text/TextBold";
+import TextRegular from "./text/TextRegular";
 /** A standard panel to display some data that the user entered. */
 export default class InfoBars extends React.Component {
-    constructor() {
-        super(...arguments);
-        /**
-         * Determine the value to be displayed in the infobar.
-         *
-         * Steps:
-         * 1. Unpack showNullAsDash, unit, and value from props.
-         * 2. Set noDecimal to be true if unit is BloodGlucoseUnit.MG_DL or if unit is BloodKetonesUnit.MG_DL.
-         * 3. Set nullPlaceholder to be ‘-' if noDecimal is true and to '-.-’ otherwise.
-         * 4. Return value if it is not null or undefined. Otherwise, if showNullAsDash is true then return nullPlaceholder, otherwise return the string '0'.
-         * @returns The string to display as the value in the infobar.
-         */
-        this.displayValue = () => {
-            const { showNullAsDash, unit, value } = this.props;
-            const noDecimal = unit === BloodGlucoseUnit.MG_DL || unit === BloodKetonesUnit.MG_DL;
-            const nullPlaceholder = noDecimal || !unit ? `-` : `-.-`;
-            return value ?? (showNullAsDash ? nullPlaceholder : `0`);
-        };
-        /**
-         * Determine the unit string to be displayed in the infobar.
-         *
-         * Steps:
-         * 1. Unpack unit from props.
-         * 2. Return unit if unit is “units” or the result of calling formatUnit() with unit as argument otherwise.
-         * @returns The string to display as the unit in the infobar
-         */
-        this.displayUnit = () => {
-            const { unit } = this.props;
-            if (!unit) {
-                return null;
-            }
-            return unit === i18n._(t `units`) ? unit : Utils.formatUnit(unit);
-        };
-    }
+    /**
+     * Determine the value to be displayed in the infobar.
+     *
+     * Steps:
+     * 1. Unpack showNullAsDash, unit, and value from props.
+     * 2. Set noDecimal to be true if unit is BloodGlucoseUnit.MG_DL or if unit is BloodKetonesUnit.MG_DL.
+     * 3. Set nullPlaceholder to be ‘-' if noDecimal is true and to '-.-’ otherwise.
+     * 4. Return value if it is not null or undefined. Otherwise, if showNullAsDash is true then return nullPlaceholder, otherwise return the string '0'.
+     * @returns The string to display as the value in the infobar.
+     */
+    displayValue = () => {
+        const { showNullAsDash, unit, value } = this.props;
+        const noDecimal = unit === BloodGlucoseUnit.MG_DL || unit === BloodKetonesUnit.MG_DL;
+        const nullPlaceholder = noDecimal || !unit ? `-` : `-.-`;
+        return value ?? (showNullAsDash ? nullPlaceholder : `0`);
+    };
+    /**
+     * Determine the unit string to be displayed in the infobar.
+     *
+     * Steps:
+     * 1. Unpack unit from props.
+     * 2. Return unit if unit is “units” or the result of calling formatUnit() with unit as argument otherwise.
+     * @returns The string to display as the unit in the infobar
+     */
+    displayUnit = () => {
+        const { unit } = this.props;
+        if (!unit) {
+            return null;
+        }
+        return unit === i18n._(t `units`) ? unit : Utils.formatUnit(unit);
+    };
     /**
      * @returns JSX element to display a card with the entered value.
      */
@@ -51,18 +50,18 @@ export default class InfoBars extends React.Component {
 					<View style={infoStyles.border}>
 						<View style={infoStyles.borderContainer}>
 							<View style={infoStyles.labelContainer}>
-								<Text style={infoStyles.label}>{this.props.label}</Text>
+								<TextBold style={infoStyles.label}>{this.props.label}</TextBold>
 							</View>
 							<View style={infoStyles.valueUnitContainer}>
 								<View style={infoStyles.valueContainer}>
-									<Text style={infoStyles.value} testID={testID?.valueID}>
+									<TextBold style={infoStyles.value} testID={testID?.valueID}>
 										{this.displayValue()}
-									</Text>
+									</TextBold>
 								</View>
 								<View style={infoStyles.unitContainer}>
-									<Text style={infoStyles.units} testID={testID?.unitID}>
+									<TextRegular style={infoStyles.units} testID={testID?.unitID}>
 										{this.displayUnit()}
-									</Text>
+									</TextRegular>
 								</View>
 							</View>
 						</View>
@@ -98,7 +97,6 @@ export const infoStyles = StyleSheet.create({
     label: {
         color: `white`,
         fontSize: Dimensions.get(`screen`).width / 22,
-        fontWeight: `bold`,
     },
     valueUnitContainer: {
         flex: 6.5,
@@ -112,7 +110,6 @@ export const infoStyles = StyleSheet.create({
     value: {
         color: `white`,
         fontSize: Dimensions.get(`screen`).width / 15,
-        fontWeight: `bold`,
         textAlign: `right`,
     },
     unitContainer: {

package/dist/src/components/InvisibleNumberInput.js

@@ -8,73 +8,12 @@ import { Platform, StyleSheet, TextInput } from "react-native";
  * 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 {
-    constructor() {
-        super(...arguments);
-        /** Initialise the state value variable with `0` */
-        this.state = {
-            value: `0`,
-        };
-        /**
-         * 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.
-         */
-        this.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
-         */
-        this.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.
-         */
-        this.onEndEdit = () => {
-            const cleaned = this.cleanInput(this.state.value);
-            this.props.onEnd?.(Number(cleaned));
-        };
-    }
+    /** 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:
@@ -94,6 +33,66 @@ export default class InvisibleNumberInput extends React.Component {
             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.
@@ -101,10 +100,10 @@ export default class InvisibleNumberInput extends React.Component {
     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/>);
+                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({

package/dist/src/components/LimitationMessage.js

@@ -1,31 +1,30 @@
 import { t } from "@lingui/macro";
 import * as React from "react";
-import { Text, TouchableOpacity, View } from "react-native";
+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 {
-    constructor() {
-        super(...arguments);
-        /**
-         * @returns JSX element for displaying a dialog with the limitationMessage and an “OK” button that calls the onPressNextButton prop callback when tapped.
-         */
-        this.render = () => {
-            const { limitationMessage } = this.props;
-            return (<React.Fragment>
+    /**
+     * @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}>
-						<Text style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</Text>
+						<TextBold style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</TextBold>
 					</View>
-					<Text style={stylesModal.textMessage}>{limitationMessage}</Text>
+					<TextRegular style={stylesModal.textMessage}>{limitationMessage}</TextRegular>
 				</View>
 				<View style={stylesModal.containerAcceptButton}>
 					<TouchableOpacity testID={Testing.Id.LimitationMessageTestIds.OkButton} style={stylesModal.okButton} onPress={this.props.onPressNextButton}>
-						<Text style={stylesModal.buttonText}>{i18n._(t `OK`)}</Text>
+						<TextRegular style={stylesModal.buttonText}>{i18n._(t `OK`)}</TextRegular>
 					</TouchableOpacity>
 				</View>
 			</React.Fragment>);
-        };
-    }
+    };
 }

package/dist/src/components/RecentInsulin.js

@@ -1,42 +1,43 @@
 import { t } from "@lingui/macro";
 import React from "react";
-import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { infoStyles } from "./InfoBars";
+import TextBold from "./text/TextBold";
+import TextRegular from "./text/TextRegular";
 /** Display a card that prompts the user to recall if they injected insulin recently. */
 export default class RecentInsulin extends React.Component {
-    constructor() {
-        super(...arguments);
-        /**
-         *
-         * @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.
-         */
-        this.render = () => {
-            return (<View style={recentInsulinStyles.container}>
+    /**
+     *
+     * @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 = () => {
+        return (<View style={recentInsulinStyles.container}>
 				<View style={recentInsulinStyles.titleContainer}>
-					<Text style={recentInsulinStyles.recommended}>{i18n._(t `Recommended amount of insulin`)}</Text>
+					<TextRegular style={recentInsulinStyles.recommended}>
+						{i18n._(t `Recommended amount of insulin`)}
+					</TextRegular>
 				</View>
 				<View style={recentInsulinStyles.takenInsulinContainer}>
-					<Text style={recentInsulinStyles.takenInsulin}>
+					<TextRegular style={recentInsulinStyles.takenInsulin}>
 						{i18n._(t `Have you taken insulin within the last 4 hours?`)}
-					</Text>
+					</TextRegular>
 				</View>
 				<View style={recentInsulinStyles.buttonContainer}>
 					<View style={recentInsulinStyles.filler}/>
 					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.Yes} onPress={this.props.onRecentInsulinYes} style={[recentInsulinStyles.yesNoContainer, { marginRight: `2%` }]}>
-						<Text style={recentInsulinStyles.yesNoText}>{i18n._(t `Yes`)}</Text>
+						<TextBold style={recentInsulinStyles.yesNoText}>{i18n._(t `Yes`)}</TextBold>
 					</TouchableOpacity>
 					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.No} onPress={this.props.onRecentInsulinNo} style={[recentInsulinStyles.yesNoContainer, { marginLeft: `2%` }]}>
-						<Text style={recentInsulinStyles.yesNoText}>{i18n._(t `No`)}</Text>
+						<TextBold style={recentInsulinStyles.yesNoText}>{i18n._(t `No`)}</TextBold>
 					</TouchableOpacity>
 					<View style={recentInsulinStyles.filler}/>
 				</View>
 			</View>);
-        };
-    }
+    };
 }
 const recentInsulinStyles = StyleSheet.create({
     container: {
@@ -86,7 +87,6 @@ const recentInsulinStyles = StyleSheet.create({
         paddingBottom: `1%`,
         color: `white`,
         fontSize: Dimensions.get(`screen`).width / 25,
-        fontWeight: `bold`,
     },
     filler: {
         flex: 1,

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

@@ -138,7 +138,6 @@ export declare const stylesModal: {
     suggestedCarbs: {
         color: string;
         fontSize: number;
-        fontWeight: "bold";
     };
     textCenter: {
         textAlign: "center";