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

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

@@ -0,0 +1,109 @@
+import { BloodGlucoseUnit } from "@hedia/types";
+import React from "react";
+import { Testing } from "../types/enum";
+export interface IProps {
+    /** The display label that describes the value to the user. */
+    label: string;
+    /** The value to display. */
+    value: string;
+    /** Unit label to print after the value. */
+    unit: BloodGlucoseUnit;
+    /** Forecasted time value to display. */
+    forecastedTime: string;
+    /**  optional object that contains as properties a valueID and a unitID */
+    testID?: {
+        valueID: Testing.Id.InfoBarTestIds.Value;
+        unitID: Testing.Id.InfoBarTestIds.Unit;
+    };
+}
+/** A standard panel to display some data that the user entered. */
+export default class ForecastInfoBar extends React.Component<IProps> {
+    /**
+     * Determine the unit string to be displayed in the infobar.
+     *
+     * @returns The string to display as the unit in the infobar
+     */
+    displayUnit: () => string;
+    /**
+     * @returns JSX element to display a card with the entered value.
+     */
+    render(): JSX.Element;
+}
+/** @internal */
+export declare const infoStyles: {
+    container: {
+        flex: number;
+        marginVertical: number;
+        marginHorizontal: number;
+        marginBottom: number;
+    };
+    gradient: {
+        padding: number;
+        borderRadius: number;
+    };
+    border: {
+        borderRadius: number;
+        backgroundColor: string;
+        paddingTop: string;
+        paddingBottom: number;
+        paddingHorizontal: string;
+    };
+    row: {
+        flexDirection: "row";
+    };
+    labelContainer: {
+        flex: number;
+        justifyContent: "center";
+    };
+    label: {
+        color: string;
+        fontSize: number;
+    };
+    valueUnitContainer: {
+        flex: number;
+        justifyContent: "flex-end";
+        flexDirection: "row";
+    };
+    valueContainer: {
+        flex: number;
+        justifyContent: "flex-end";
+    };
+    value: {
+        color: string;
+        fontSize: number;
+        textAlign: "right";
+    };
+    unitContainer: {
+        flex: number;
+        justifyContent: "flex-end";
+    };
+    units: {
+        color: string;
+        fontSize: number;
+        textAlign: "left";
+        paddingLeft: string;
+        marginBottom: number;
+    };
+    forecastDot: {
+        height: number;
+        width: number;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string;
+    };
+    forecastSubtitle: {
+        flexDirection: "row";
+        alignItems: "center";
+        paddingVertical: number;
+    };
+    forecastText: {
+        color: string;
+        marginLeft: number;
+    };
+    forecastTime: {
+        color: string;
+        fontSize: number;
+        lineHeight: number;
+        marginLeft: number;
+    };
+};

package/dist/src/components/ForecastInfoBar.js

@@ -0,0 +1,138 @@
+import { t } from "@lingui/macro";
+import React from "react";
+import { Dimensions, StyleSheet, View } from "react-native";
+import LinearGradient from "react-native-linear-gradient";
+import { i18n } from "../locale/i18nUtils";
+import { colors } 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 ForecastInfoBar extends React.Component {
+    /**
+     * Determine the unit string to be displayed in the infobar.
+     *
+     * @returns The string to display as the unit in the infobar
+     */
+    displayUnit = () => {
+        const { unit } = this.props;
+        return Utils.formatUnit(unit);
+    };
+    /**
+     * @returns JSX element to display a card with the entered value.
+     */
+    render() {
+        const { forecastedTime, testID, label } = this.props;
+        const { border, container, forecastDot, forecastSubtitle, forecastText, forecastTime, gradient, labelContainer, row, unitContainer, units, value, valueContainer, valueUnitContainer, } = infoStyles;
+        return (<View style={container}>
+				<LinearGradient style={gradient} colors={[`#8B38F5`, `#D593E5`]} useAngle={true} angle={170}>
+					<View style={border}>
+						<View style={row}>
+							<View style={labelContainer}>
+								<TextBold style={infoStyles.label}>{label}</TextBold>
+							</View>
+							<View style={valueUnitContainer}>
+								<View style={valueContainer}>
+									<TextBold style={value} testID={testID?.valueID}>
+										{this.props.value}
+									</TextBold>
+								</View>
+								<View style={unitContainer}>
+									<TextRegular style={units} testID={testID?.unitID}>
+										{this.displayUnit()}
+									</TextRegular>
+								</View>
+							</View>
+						</View>
+
+						<View style={row}>
+							<View style={forecastSubtitle}>
+								<LinearGradient colors={[`#8B38F5`, `#D593E5`]} useAngle={true} angle={135} style={forecastDot}/>
+								<TextRegular style={forecastText}>{i18n._(t `Forecasted time:`)}</TextRegular>
+								<TextRegular style={forecastTime}>{forecastedTime}</TextRegular>
+							</View>
+						</View>
+					</View>
+				</LinearGradient>
+			</View>);
+    }
+}
+const { width } = Dimensions.get(`screen`);
+/** @internal */
+export const infoStyles = StyleSheet.create({
+    container: {
+        flex: 1,
+        marginVertical: width / 35,
+        marginHorizontal: width / 17,
+        marginBottom: 0,
+    },
+    gradient: {
+        padding: 2,
+        borderRadius: 11,
+    },
+    border: {
+        borderRadius: 10,
+        backgroundColor: colors.darkBlue,
+        paddingTop: `2%`,
+        paddingBottom: 0,
+        paddingHorizontal: `3%`,
+    },
+    row: {
+        flexDirection: `row`,
+    },
+    labelContainer: {
+        flex: 7,
+        justifyContent: `center`,
+    },
+    label: {
+        color: `white`,
+        fontSize: width / 22,
+    },
+    valueUnitContainer: {
+        flex: 6.5,
+        justifyContent: `flex-end`,
+        flexDirection: `row`,
+    },
+    valueContainer: {
+        flex: 5,
+        justifyContent: `flex-end`,
+    },
+    value: {
+        color: `white`,
+        fontSize: width / 15,
+        textAlign: `right`,
+    },
+    unitContainer: {
+        flex: 3,
+        justifyContent: `flex-end`,
+    },
+    units: {
+        color: `white`,
+        fontSize: width / 30,
+        textAlign: `left`,
+        paddingLeft: `15%`,
+        marginBottom: 4,
+    },
+    forecastDot: {
+        height: (width / 100) * 3,
+        width: (width / 100) * 3,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: colors.lightBlue,
+    },
+    forecastSubtitle: {
+        flexDirection: `row`,
+        alignItems: `center`,
+        paddingVertical: 10,
+    },
+    forecastText: {
+        color: colors.lightBlue,
+        marginLeft: width / 40,
+    },
+    forecastTime: {
+        color: `white`,
+        fontSize: width / 32,
+        lineHeight: width / 28,
+        marginLeft: width / 100,
+    },
+});

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

@@ -0,0 +1,8 @@
+import React from "react";
+export interface IProps {
+    /** A callback that doesn’t take any arguments and doesn’t return a value to be called when the cancel-button is pressed. */
+    exitCallback(): void;
+}
+/** Component to display a header text along with a cancel-button that triggers a callback function. */
+declare const Header: React.FC<IProps>;
+export default Header;

package/dist/src/components/Header.js

@@ -0,0 +1,54 @@
+import { t } from "@lingui/macro";
+import React from "react";
+import { Dimensions, SafeAreaView, StyleSheet, TouchableOpacity, View } from "react-native";
+import XIcon from "../assets/icons/X";
+import { i18n } from "../locale/i18nUtils";
+import { Testing } from "../types/enum";
+import TextBold from "./text/TextBold";
+/** Component to display a header text along with a cancel-button that triggers a callback function. */
+const Header = ({ exitCallback }) => {
+    const { iconWrapper, container, emptyButton, text } = headerStyles;
+    return (<>
+			<SafeAreaView />
+			<View style={container}>
+				<TouchableOpacity testID={Testing.Id.HeaderTestIds.ExitCalculation} style={iconWrapper} onPress={exitCallback}>
+					<XIcon />
+				</TouchableOpacity>
+
+				<TextBold style={text} testID={Testing.Id.HeaderTestIds.HeaderText}>
+					{i18n._(t `INSULIN${`\n`}RECOMMENDATION`)}
+				</TextBold>
+
+				<View style={emptyButton}/>
+			</View>
+		</>);
+};
+const { width } = Dimensions.get(`screen`);
+const headerStyles = StyleSheet.create({
+    container: {
+        flexDirection: `row`,
+        flex: 1,
+        paddingHorizontal: width / 17,
+        paddingVertical: width / 43,
+        alignItems: `center`,
+        justifyContent: `space-between`,
+    },
+    iconWrapper: {
+        padding: width / 60,
+        borderWidth: 1,
+        borderColor: `#C8CCFA33`,
+        borderRadius: 10,
+    },
+    text: {
+        fontFamily: `Poppins-SemiBold`,
+        fontSize: width / 22,
+        lineHeight: width / 14,
+        textAlign: `center`,
+        color: `white`,
+    },
+    emptyButton: {
+        width: width / 11,
+        height: width / 11,
+    },
+});
+export default Header;

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+/** Mapping from react-native-vector-icons identifier to corresponding icon resource. */
+export declare const IconSets: Record<string, any>;
+export interface IProps {
+    /** The name of the react-native-vector-icons identifier */
+    iconIdentifier: string;
+    /** Style of the icon */
+    iconStyle: StyleSheet.NamedStyles<any>;
+}
+/** Component used to display a react-native-vector-icons */
+export default class Icon extends React.Component<IProps> {
+    static defaultProps: any;
+    _root: any;
+    setNativeProps(nativeProps: any): void;
+    /**
+     * @returns JSX Element containing the desired react-native-vector-icons
+     */
+    render(): JSX.Element;
+}

package/dist/src/components/Icon.js

@@ -0,0 +1,43 @@
+// @ts-nocheck
+/* tslint:disable */
+import React from "react";
+/** Mapping from react-native-vector-icons identifier to corresponding icon resource. */
+export const IconSets = {
+    AntDesign: require(`react-native-vector-icons/AntDesign`),
+    Feather: require(`react-native-vector-icons/Feather`),
+    EvilIcons: require(`react-native-vector-icons/EvilIcons`),
+    Ionicons: require(`react-native-vector-icons/Ionicons`),
+    FontAwesome: require(`react-native-vector-icons/FontAwesome`),
+    Entypo: require(`react-native-vector-icons/Entypo`),
+};
+/** 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);
+    }
+    /**
+     * @returns JSX Element containing the desired react-native-vector-icons
+     */
+    render() {
+        const iconParts = this.props.iconIdentifier.split(`/`);
+        let iconPackageName = iconParts[0];
+        let iconName = iconParts[1];
+        if (!IconSets[iconPackageName]) {
+            iconPackageName = `FontAwesome`;
+            iconName = `question`;
+        }
+        const clonedProps = {
+            ...this.props,
+            name: iconName,
+            iconIdentifier: undefined,
+            ref: (component) => (this._root = component),
+        };
+        const IconClass = IconSets[iconPackageName].default;
+        return <IconClass {...clonedProps}/>;
+    }
+}
+Icon.defaultProps = {
+    iconIdentifier: `FontAwesome/question`,
+};

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

@@ -1,5 +1,5 @@
-import React from "react";
 import { BloodGlucoseUnit, BloodKetonesUnit } from "@hedia/types";
+import React from "react";
 import { Testing } from "../types/enum";
 export interface IProps {
     /** The display label that describes the value to the user. */
@@ -47,42 +47,56 @@ export default class InfoBars extends React.Component<IProps> {
 export declare const infoStyles: {
     container: {
         flex: number;
-        flexDirection: "row";
+    };
+    margin: {
+        flex: number;
+        marginVertical: number;
+        marginHorizontal: number;
         marginBottom: number;
-        padding: number;
+    };
+    border: {
         borderWidth: number;
         borderColor: string;
         borderRadius: number;
-        alignItems: "center";
+        paddingVertical: string;
+    };
+    borderContainer: {
+        flex: number;
+        flexDirection: "row";
+        justifyContent: "space-between";
+        paddingHorizontal: string;
     };
     labelContainer: {
         flex: number;
-        justifyContent: "flex-start";
+        justifyContent: "center";
     };
     label: {
         color: string;
-        fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
-        lineHeight: number;
     };
     valueUnitContainer: {
         flex: number;
         justifyContent: "flex-end";
-        alignItems: "baseline";
         flexDirection: "row";
     };
+    valueContainer: {
+        flex: number;
+        justifyContent: "flex-end";
+    };
     value: {
         color: string;
-        fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
-        lineHeight: number;
+        textAlign: "right";
+    };
+    unitContainer: {
+        flex: number;
+        justifyContent: "flex-end";
     };
     units: {
         color: string;
-        paddingLeft: number;
-        fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
-        lineHeight: number;
+        textAlign: "left";
+        paddingLeft: string;
+        marginBottom: number;
     };
 };
-//# sourceMappingURL=InfoBars.d.ts.map

package/dist/src/components/InfoBars.js

@@ -0,0 +1,128 @@
+import { BloodGlucoseUnit, BloodKetonesUnit } from "@hedia/types";
+import { t } from "@lingui/macro";
+import React from "react";
+import { Dimensions, StyleSheet, View } from "react-native";
+import { i18n } from "../locale/i18nUtils";
+import { colors } 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 {
+    /**
+     * 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.
+     */
+    render() {
+        const { testID } = this.props;
+        return (<View style={infoStyles.container}>
+				<View style={infoStyles.margin}>
+					<View style={infoStyles.border}>
+						<View style={infoStyles.borderContainer}>
+							<View style={infoStyles.labelContainer}>
+								<TextBold style={infoStyles.label}>{this.props.label}</TextBold>
+							</View>
+							<View style={infoStyles.valueUnitContainer}>
+								<View style={infoStyles.valueContainer}>
+									<TextBold style={infoStyles.value} testID={testID?.valueID}>
+										{this.displayValue()}
+									</TextBold>
+								</View>
+								<View style={infoStyles.unitContainer}>
+									<TextRegular style={infoStyles.units} testID={testID?.unitID}>
+										{this.displayUnit()}
+									</TextRegular>
+								</View>
+							</View>
+						</View>
+					</View>
+				</View>
+			</View>);
+    }
+}
+const { width } = Dimensions.get(`screen`);
+/** @internal */
+export const infoStyles = StyleSheet.create({
+    container: { flex: 1 },
+    margin: {
+        flex: 1,
+        marginVertical: width / 35,
+        marginHorizontal: width / 17,
+        marginBottom: 0,
+    },
+    border: {
+        borderWidth: 2,
+        borderColor: colors.mistBlue,
+        borderRadius: 5,
+        paddingVertical: `1%`,
+    },
+    borderContainer: {
+        flex: 1,
+        flexDirection: `row`,
+        justifyContent: `space-between`,
+        paddingHorizontal: `3%`,
+    },
+    labelContainer: {
+        flex: 7,
+        justifyContent: `center`,
+    },
+    label: {
+        color: `white`,
+        fontSize: width / 22,
+    },
+    valueUnitContainer: {
+        flex: 6.5,
+        justifyContent: `flex-end`,
+        flexDirection: `row`,
+    },
+    valueContainer: {
+        flex: 5,
+        justifyContent: `flex-end`,
+    },
+    value: {
+        color: `white`,
+        fontSize: width / 16,
+        textAlign: `right`,
+    },
+    unitContainer: {
+        flex: 3,
+        justifyContent: `flex-end`,
+    },
+    units: {
+        color: `white`,
+        fontSize: width / 30,
+        textAlign: `left`,
+        paddingLeft: `15%`,
+        marginBottom: 4,
+    },
+});

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { EmitterSubscription, TextInput } from "react-native";
+import { TextInput } from "react-native";
 export interface IProps {
     /** The initial value to put in the input field. */
     startValue?: string;
@@ -32,9 +32,8 @@ export interface IState {
  * 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<IProps, IState> {
-    keyboardDidHideSubscription: EmitterSubscription | null;
-    inputRef: React.RefObject<TextInput> | null;
-    constructor(props: IProps);
+    /** For holding a reference to the TextInput component so it can be focused when the InvisibleNumberInput component has been mounted. */
+    textInput?: TextInput;
     /** Initialise the state value variable with `0` */
     state: IState;
     /**
@@ -46,10 +45,6 @@ export default class InvisibleNumberInput extends React.Component<IProps, IState
      * 	- Return the value from calling the focus() method on the input field.
      */
     componentDidMount(): void;
-    /**
-     * Call the blur method on the TextInput component.
-     */
-    callOnTextInputsBlur: () => void;
     /**
      * Sanitise a user-entered value by removing invalid characters
      *
@@ -92,4 +87,3 @@ export default class InvisibleNumberInput extends React.Component<IProps, IState
      */
     render(): JSX.Element;
 }
-//# sourceMappingURL=InvisibleNumberInput.d.ts.map