@olea-bps/components 1.0.0

package/EventCodeInput/styles.js

@@ -0,0 +1,108 @@
+export default function(theme) {
+    return {
+        selectOption: {
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between'
+        },
+        listItemTitle: {
+            fontSize: theme.fontSizes.l
+        },
+        listItemDescription: {
+            fontSize: theme.fontSizes.m,
+            color: theme.colors.textLighter
+        },
+        buttonLabel: {
+            fontSize: theme.fontSizes.m,
+            color: theme.colors.text,
+        },
+        dialogTitle: {
+            fontSize: theme.fontSizes.l,
+            lineHeight: theme.lineHeights.xxl
+        },
+        dialogContent: {
+            fontSize: theme.fontSizes.m,
+            color: theme.colors.text,
+        },
+        listItems: {
+            flex: 1,
+
+        },
+        container: {
+            flex: 1,
+            backgroundColor: theme.colors.contentBackground,
+          },
+        paragraph: {
+            paddingTop: theme.paddings.default,
+            paddingLeft: theme.paddings.default,
+            paddingRight: theme.paddings.default
+          },
+          paragraphText: {
+              fontSize: theme.fontSizes.l,
+              lineHeight: theme.lineHeights.l
+          },
+          linkText: {
+              fontSize: theme.fontSizes.l,
+              lineHeight: theme.lineHeights.l,
+              textDecorationLine: 'underline',
+              color: 'blue'
+          },
+          importButtonLabel: {
+            color: theme.colors.messages.noticeText,
+            ...theme.fonts.medium,
+            fontSize: theme.fontSizes.xl,
+            lineHeight: theme.lineHeights.l,
+            marginLeft: theme.paddings.small
+          },
+          continueWithoutCodeButtonLabel:{
+            color: theme.colors.primary,
+            ...theme.fonts.medium,
+            fontSize: theme.fontSizes.xl,
+            lineHeight: theme.lineHeights.l,
+            marginLeft: theme.paddings.small
+          },
+          importTextInput:{
+            paddingLeft: theme.paddings.default,
+            paddingRight: theme.paddings.default
+          },
+          orText:{
+            fontSize: theme.fontSizes.l,
+            lineHeight: theme.lineHeights.xxl,
+            textAlign: "center"
+          },
+          importButton:{
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginTop: 10,
+            marginLeft: 20,
+            marginRight: 20,
+            padding: theme.paddings.small,
+            flex: 1,
+            backgroundColor: theme.colors.primary,
+            borderBottomRightRadius: 10,
+            borderBottomLeftRadius: 10,
+            borderTopRightRadius: 10,
+            borderTopLeftRadius: 10
+          },
+          continueWithoutCodeButton:{
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginTop: 10,
+            marginLeft: 20,
+            marginRight: 20,
+            padding: theme.paddings.small,
+            flex: 1,
+            borderColor: theme.colors.primary,
+            borderWidth: 1,
+            borderBottomRightRadius: 10,
+            borderBottomLeftRadius: 10,
+            borderTopRightRadius: 10,
+            borderTopLeftRadius: 10
+          }
+
+    }
+}

package/FlexMenuEntry/index.js

@@ -0,0 +1,84 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    Image,
+    GestureResponderEvent,
+} from 'react-native';
+
+import { useTheme } from 'react-native-paper';
+
+import IconsOpenasist from '@olea-bps/icons-openasist';
+
+import componentStyles from './styles';
+
+/**
+ * Menüeintrag für das FlexMenü-Modul.
+ * Zeigt einen Entrag mit einem Titel, einer optionalen Beshreibung, ein optionales linksbündiges Icon und ein rechtsbündiges Icon.
+ *
+ * Wird kein rechtsbündiges Icon(rightIcon) festgelegt, wird automatisch das Icon für "forward" verwendet.
+ *
+ * @param {object} props
+ * @param {string} props.title Titel des Eintrages
+ * @param {string} [props.description] Beschreibung des Eintrages
+ * @param {string} [props.leftIconImage] URL oder URI der linksbündigen Icons
+ * @param {string} [props.rightIcon] Bezeichner des rechtsbündigen Icons
+ * @param {(event: GestureResponderEvent) => void} [props.onPress] Callback-Funktion die beim drücken des Eintrages ausgeführt wird. (Siehe: {@link https://reactnative.dev/docs/pressable#onpress})
+ */
+export default function FlexMenuEntry({ title, description, leftIconImage, rightIcon, onPress }) {
+    const theme = useTheme();
+    const { themeStyles, colors } = theme;
+
+    const styles = componentStyles(theme);
+
+    return (
+        <TouchableOpacity
+            role='button'
+            style={themeStyles.card}
+            onPress={onPress}
+            aria-label={
+                // Wen eine Beschreibung vorhanden ist, bilde aus Titel und Beschreibung einen Vorlesetext, ansonsten verwende nur den Titel
+                description
+                    // Title und Beschreibung wird mit einer newline(\n) verbunden, damit eine Pause beim Vorlesen gelassen wird
+                    ? `${title} \n ${description}`
+                    : title
+            }
+        >
+            {
+                leftIconImage
+                    ? <View style={styles.leftIconImage} >
+                        <Image
+                            style={{ resizeMode: 'contain', width: 30, height: 30 }}
+                            source={{ uri: leftIconImage }}
+                        />
+                    </View>
+                    : null
+            }
+            <View style={[themeStyles.cardContent, styles.cardContent]}>
+                <Text style={styles.title}>{title}</Text>
+                {
+                    description
+                        ? <Text style={styles.description}>{description}</Text>
+                        : null
+                }
+            </View>
+            <View style={[themeStyles.cardRightIcon]}>
+                <IconsOpenasist icon={rightIcon ?? 'forward'} size={25} color={colors.icon} />
+            </View>
+        </TouchableOpacity>
+    )
+}

package/FlexMenuEntry/styles.js

@@ -0,0 +1,27 @@
+export default function (theme) {
+    return {
+        cardContent: {
+            justifyContent: 'center',
+            alignItems: 'flex-start'
+        },
+        title: {
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            fontSize: theme.fontSizes.l,
+            ...theme.fonts.light,
+        },
+        leftIconImage: {
+            justifyContent: 'center',
+            alignContent: 'center',
+            paddingRight: theme.paddings.default,
+        },
+        description: {
+            width: 250,
+            fontSize: theme.fontSizes.s,
+            ...theme.fonts.regular,
+            lineHeight: theme.lineHeights.xxs,
+            color: theme.colors.subtitle,
+            marginTop: theme.paddings.xsmall
+        },
+    }
+};

package/MainMenuEntry/index.js

@@ -0,0 +1,88 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+import { View, TouchableOpacity, Text, StyleSheet, TouchableNativeFeedback } from 'react-native'
+
+import { useTheme } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+import { useNavigation } from '@react-navigation/native';
+
+import IconsOpenasist from '@olea-bps/icons-openasist';
+
+import componentStyles from './styles';
+
+/**
+ * Ein einzelner Eintrag im Hauptmenü, welcher beim draufdrücken eine View oder URL öffnet.
+ * Ein Eintrag wird mit einem Icon und einem Titel dargestellt.
+ *
+ * Soll eine View geöffnet werden, muss die `view`-Eigenschaft mit dem Namen der View gesetzt werden.
+ * Ist URL in einer Webview zu öffnen, ist die `url`-Eigenschaft mit der zu öffnenden URL oder einem Übersetzungsschlüssel zu setzen.
+ * Wird ein Übersetzungsschlüssel in die `url`-Eigenschaft hinterlegt, muss die `isLocalized`Eigenschaft auf true gesetzt werden.
+ * Die Webview wird mit dem Titel des Eintrags initialisert.
+ *
+ * Für die Eigenschaften icon, iconSVG und iconSize siehe {@link IconsOpenasist}.
+ *
+ * @param {object}  props
+ * @param {string}  props.title Titel des Menüeintrages. Dies kann der direkte Titel oder ein Übersetungsschlüssel sein
+ * @param {string}  [props.view] Name der View, zu der gewechselt werden soll
+ * @param {string}  [props.url] URL, welche in einer Webview geöffnet werde soll
+ * @param {boolean} [props.isLocalized] Soll der URL-String durch die Übersetzung gegeben werden, um die entgültige URL zu bekommen
+ * @param {string}  [props.icon] Schlüssel des Icons (siehe {@link IconsOpenasist})
+ * @param {string}  [props.iconSVG] siehe {@link IconsOpenasist}
+ * @param {number}  [props.iconSize] Größe des Icons (siehe {@link IconsOpenasist})
+ */
+export default function MainMenuEntry({ title, icon, iconSVG, iconSize, view, url, isLocalized }) {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const { colors } = theme;
+    const navigation = useNavigation();
+    const styles = StyleSheet.create(componentStyles(theme));
+
+    const translatedTitle = t(title);
+
+    return (
+        <TouchableOpacity
+            style={styles.entry}
+            background={TouchableNativeFeedback.Ripple(colors.background, false)}
+            onPress={
+                () => {
+                    if (view) {
+                        navigation.navigate(view);
+                    } else if (url) {
+                        navigation.navigate(
+                            'Web',
+                            {
+                                title: translatedTitle,
+
+                                // Is isLocalized is true url is localized via i18n files, use the given key to get the correct url
+                                url: (isLocalized ?? false)
+                                    ? t(url)
+                                    : url,
+                            }
+                        );
+                    }
+                }
+            }>
+            <View style={styles.textContainer} accessiblity={true} accessibilityLabel={translatedTitle}>
+                <View style={styles.iconContainer}>
+                    <IconsOpenasist icon={icon} iconSVG={iconSVG} color={colors.iconDefault} size={iconSize ?? 34} />
+                </View>
+                <Text style={styles.titleText}>
+                    {translatedTitle}
+                </Text>
+            </View>
+        </TouchableOpacity>
+    )
+}

package/MainMenuEntry/styles.js

@@ -0,0 +1,28 @@
+export default function (theme) {
+    return {
+        textContainer: {
+            flex: 1,
+            flexDirection: 'row',
+            paddingVertical: 20,
+            paddingHorizontal: 20,
+            alignContent: 'center'
+        },
+        iconContainer: {
+            flex: 0.2
+        },
+        entry: {
+            backgroundColor: theme.colors.background,
+            paddingHorizontal: 0,
+            paddingVertical: 5,
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.accent
+        },
+        titleText: {
+            flex: 1,
+            lineHeight: theme.fontSizes.subtitle * 1.4,
+            fontSize: theme.fontSizes.subtitle,
+            marginTop: 1,
+            alignSelf: 'center'
+        },
+    }
+};

package/MealItem/index.js

@@ -0,0 +1,87 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useMemo } from 'react';
+import {PixelRatio, StyleSheet, Text, TouchableOpacity} from 'react-native';
+import { connect } from 'react-redux'
+import { useTheme } from 'react-native-paper';
+import { useNavigation } from '@react-navigation/native';
+
+import componentStyles from "./styles"
+
+
+/**
+ * Meal Item Component
+ *
+ * Shows a single meal of a mensa. Used for the mensa slider component.
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+
+export function MealItemComponent({ meal, canteenId, menuDate, settings }) {
+    const theme = useTheme();
+    const navigation = useNavigation();
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    );
+
+    const isBigFont = settings?.settingsAccessibility?.increaseFontSize ?? PixelRatio.getFontScale() > 2.8;
+
+    // Remove all additional inforamtions like ingredients from title
+    const regex = /(\(\d((\W)?(\d)?)+\))/gm;
+
+    let title = meal.title.replace(regex, '');
+    let isShorted = false;
+    if(title.length > 63 && !isBigFont) {
+        isShorted = true;
+        title = title.slice(0, 60);
+    } else if (title.length > 38 && isBigFont) {
+        isShorted = true;
+        title = title.slice(0, 35);
+    }
+
+    return (
+        <TouchableOpacity
+            style={[styles.mensaItem, isBigFont ? {width: 250} : '']}
+            onPress={
+                () => navigation.navigate(
+                    'canteensTab',
+                    {
+                        screen: 'Canteens',
+                        params: {
+                            'canteenId': canteenId,
+                            'menuDate': menuDate,
+                        }
+                    }
+                )
+            }
+        >
+            <Text style={styles.mensaItemText}>{title} {isShorted ? '...' : ''}</Text>
+        </TouchableOpacity>
+    );
+}
+
+const mapStateToProps = state => {
+    return {
+        settings: state.settingReducer,
+    };
+};
+
+export default connect(mapStateToProps)(MealItemComponent)

package/MealItem/styles.js

@@ -0,0 +1,73 @@
+import color from "color";
+
+export default function(theme) {
+    return {
+        mensaItem: {
+            width: 190,
+            height: '75%',
+            paddingHorizontal: theme.paddings.default,
+            borderRightWidth: 1,
+            borderRightColor: color(theme.colors.mensaSliderTextColor).alpha(0.5).rgb().string()
+        },
+        mensaItemText: {
+            fontSize: theme.fontSizes.itemText,
+            lineHeight: theme.lineHeights.s,
+            color: theme.colors.mensaSliderTextColor
+        },
+        modalContainer: {
+            flex: 1
+        },
+        modalContainerInner: {
+            flex: 1,
+            paddingTop: 20,
+            paddingHorizontal: 20
+        },
+        modalMenuTitle: {
+            fontSize: theme.fontSizes.xl,
+            lineHeight: theme.lineHeights.xl,
+            textAlign: 'left'
+        },
+        modalMenuDescription: {
+            fontSize: theme.fontSizes.l,
+            lineHeight: theme.lineHeights.l,
+        },
+        modalMenuImage: {
+            height: 240,
+            width: 'auto',
+            marginBottom: 40
+        },
+        modalMenuTable: {
+            flex: 1,
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingVertical: 5
+        },
+        modalMenuTableCol: {
+            flex: 1,
+            alignItems: 'center',
+            paddingVertical: 20
+        },
+        modalMenuCol1: {
+            backgroundColor: theme.colors.primary,
+        },
+        modalMenuCol1Text: {
+            color: theme.colors.primaryText,
+        },
+        modalMenuCol2: {
+            backgroundColor: theme.colors.secondary,
+        },
+        modalMenuCol2Text: {
+            color: theme.colors.secondaryText,
+        },
+        modalMenuCol3: {
+            backgroundColor: theme.colors.tertiary,
+        },
+        modalMenuCol3Text: {
+            color: theme.colors.tertiaryText,
+        },
+        modalMenuPriceType: {
+            marginBottom: 10,
+            fontWeight: '700'
+        }
+}
+};