@olea-bps/base 1.0.0

package/components/TopNews/index.js

@@ -0,0 +1,282 @@
+/**
+ * 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 React                from 'react';
+import {
+    Animated,
+    Dimensions,
+    StyleSheet,
+    Text,
+    TouchableOpacity,
+    View
+} from 'react-native';
+
+import {connect}            from 'react-redux';
+import {withTheme}          from "react-native-paper";
+
+import merge                from 'lodash/merge';
+import NetInfo              from '@react-native-community/netinfo';
+
+import componentStyles      from "./styles";
+import PropTypes            from "prop-types";
+import {withTranslation}     from "react-i18next";
+import { handleHtmlEntities } from '../../libraries/core/helper/format.helper';
+
+
+
+/**
+ * Top News Component
+ *
+ * Shows a single news item with the name and the logo of the university.
+ *
+ * Parameters:
+ *  - animationRange: Animation Range for animation of the dashboard view
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+class TopNewsComponent extends React.Component {
+
+    static propTypes = {
+        animationRange: PropTypes.any
+    };
+
+    // Styles of this component
+    styles;
+
+    animateHeader = null;
+    animateBackground = null;
+    topNews = null;
+    hasConnection = true;
+    netInfoUnsubscribe = null;
+
+    constructor(props) {
+        super(props);
+
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+
+        const { pluginStyles,theme } = this.props;
+        this.styles = componentStyles(theme);
+
+        if(pluginStyles) {
+            this.styles = merge(this.styles, pluginStyles);
+        }
+
+        this.styles = StyleSheet.create(this.styles);
+        // ------------------------------------------------------------------------
+
+        const height = Dimensions.get('window').height;
+
+        this.animateHeader = {
+            transform: [{
+                translateY: this.props.animationRange.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, height / 8],
+                })
+            }]
+        };
+
+        this.animateLogo = {
+            transform: [{
+                translateY: this.props.animationRange.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [30, (height / 50)],
+                })
+            },
+            {
+                scale: this.props.animationRange.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [1, .4],
+                })
+            }]
+        };
+
+        this.animateBackground = {
+            transform: [{
+                translateY: this.props.animationRange.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, height / 7],
+                    extrapolate: 'clamp'
+                })
+            }]
+        };
+
+        this.netInfoUnsubscribe = NetInfo.addEventListener(state => {
+             this.hasConnection = state.isInternetReachable && state.isConnected;
+        });
+    }
+
+    componentWillUnmount() {
+        if(this.netInfoUnsubscribe) {
+            this.netInfoUnsubscribe();
+        }
+    }
+
+    render() {
+
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+
+        const {feeds, t} = this.props;
+        const {colors, appSettings} = this.props.theme;
+        let topNews = this.props.topNews;
+
+        if(!Array.isArray(topNews)) {
+            topNews = [];
+        }
+
+        let topItem = null;
+        let imageSrc = null;
+        let feedTitle = null;
+        if(topNews[0]) {
+            topItem = topNews[0];
+            if(topItem.imageUrl) {
+                imageSrc = {uri: topItem.imageUrl};
+            }
+        }
+
+        if(feeds && topItem && topItem.originFeedId) {
+            const feed = feeds.filter(feed => feed.feedid === topItem.originFeedId)[0];
+
+            if(feed && feed.title) {
+                feedTitle = feed.title.toUpperCase();
+            }
+        }
+
+        if(!imageSrc)
+            imageSrc = appSettings.header;
+
+
+        // Top News available
+        this.topNews = topItem;
+
+        // Notice about "." in accessibilityLabels: This will set a short break in the sound output, like in a normal sentence.
+
+        return (
+            <View style={{overflow:'hidden'}}>
+                <View stlyle={this.styles.backgroundImageWrapper}>
+                    <TouchableOpacity
+                        onPress={
+                            topItem?.link ?? null
+                                ? () => { this._handlePressNews(topItem) }
+                                : null
+                        }
+                    >
+                        <Animated.Image
+                            source={imageSrc}
+                            resizeMode="cover"
+                            fadeDuration={0}
+                            style={[this.styles.newsImage, this.animateBackground]}
+                            accessible={true}
+                            accessibilityLabel={
+                                !topItem && !this.hasConnection
+                                    ? t('home:noConnectionTitle')
+                                    : (!topItem ? t('home:noItemTitle') : handleHtmlEntities(topItem.title))
+                            }
+                            accessibilityHint={!topItem ? '' : t('accessibility:topNewsHint')}
+                        />
+                    </TouchableOpacity>
+                </View>
+
+                {
+                    (!topItem && !this.hasConnection) ? (
+                        <Animated.View style={[this.styles.newsItem]}
+                                       accessible={true}
+                                       accessibilityLabel={t('home:noConnectionTitle')}>
+                            <Text
+                                style={this.styles.newsItemCategory}>{t('home:noConnectionSubtitle').toUpperCase()}</Text>
+                            <Text style={this.styles.newsItemTitle}>{t('home:noConnectionTitle')}</Text>
+                            <Text style={this.styles.newsItemText}>{t('home:noConnectionText')}</Text>
+                            <View style={this.styles.newsItemActionbar}>
+                                <Text style={this.styles.newsItemDate}></Text>
+                            </View>
+                        </Animated.View>
+                    ) : ((!topItem) ? (
+                        <Animated.View style={[this.styles.newsItem]}
+                                       accessible={true}
+                                       accessibilityLabel={t('home:noItemTitle')}>
+                            <Text style={this.styles.newsItemCategory}>{t('home:noItemSubtitle').toUpperCase()}</Text>
+                            <Text style={this.styles.newsItemTitle}>{t('home:noItemTitle')}</Text>
+                            <Text style={this.styles.newsItemText}>{t('home:noItemText')}</Text>
+                            <View style={this.styles.newsItemActionbar}>
+                                <Text style={this.styles.newsItemDate}/>
+                            </View>
+                        </Animated.View>
+                    ) : (topItem?.shortDesc
+                            ? <TouchableOpacity
+                                style={this.styles.newsItem}
+                                onPress={() => {this._handlePressNews(topItem)}}
+                                accessible={true}
+                                accessibilityLabel={handleHtmlEntities(topItem.title)}
+                                accessibilityHint={t('accessibility:topNewsHint')}>
+                                <View>
+                                    {feedTitle && <Text style={this.styles.newsItemCategory}>{feedTitle}</Text>}
+                                    <Text style={this.styles.newsItemTitle}>{handleHtmlEntities(topItem.title)}</Text>
+                                    <Text style={this.styles.newsItemText}>{handleHtmlEntities(topItem.shortDesc)} ... <Text style={this.styles.newsItemReadMore}>{t('home:readMore')}</Text></Text>
+                                    <View style={this.styles.newsItemActionbar}>
+                                        {topItem?.author != null
+                                            ? <Text style={this.styles.newsItemAuthor}>{handleHtmlEntities(topItem.author)}</Text>
+                                            : null
+                                        }
+                                    </View>
+                                </View>
+                              </TouchableOpacity>
+                            : null
+                    ))
+                }
+            </View>
+        );
+    }
+
+
+    /**
+     * User has pressed the news item card.
+     * Shows the news details in a modal window.
+     *
+     * @param news
+     *
+     * @private
+     */
+    _handlePressNews = (news) => {
+        if (news) {
+            this.props.navigation.navigate(
+                'TopNewsDetail',
+                {
+                    news: {...news, 'feedId': 0},
+                    newsType: "Default"
+                });
+        }
+    }
+}
+
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.topNews.component,
+        pluginStyles: state.pluginReducer.topNews.styles,
+        topNews: state.apiReducer.topNews,
+        feeds: state.apiReducer.feeds
+    };
+};
+
+export default connect(mapStateToProps, null)(withTranslation()(withTheme(TopNewsComponent)))

package/components/TopNews/styles.js

@@ -0,0 +1,125 @@
+import {Platform, Dimensions} from "react-native";
+
+export default function(theme) {
+    const width = Dimensions.get('window').width;
+    const height = Dimensions.get('window').height;
+    const headerImageHeight = height / 2;
+    return {
+        appHeader: {
+            flex: 1,
+            flexDirection: 'row',
+            alignItems: 'baseline',
+        },
+        appHeaderSearchButton: {
+            position: 'absolute',
+            top: Platform.OS === 'ios' ? theme.paddings.default : theme.paddings.xlarge,
+            right: theme.paddings.default
+
+        },
+        appHeaderSearch: {},
+        appHeaderContainer: {
+            flex: 1,
+            justifyContent: 'center',
+            alignContent: 'center',
+            alignItems: 'center',
+            height: headerImageHeight,
+        },
+        universityTitle: {
+            marginTop: theme.paddings.large,
+            marginLeft: theme.paddings.default,
+            color: theme.colors.primaryText,
+            fontSize: theme.fontSizes.universityTitle,
+            ...theme.fonts.bold,
+            lineHeight: theme.lineHeights.xxl,
+            textAlign: 'left',
+            alignSelf: 'flex-start',
+            marginBottom: theme.paddings.small
+        },
+        newsImage: {
+            aspectRatio: 16/9,
+            width: width
+        },
+        backgroundImageWrapper: {
+            height: headerImageHeight,
+            width: width,
+            marginTop: 0,
+            backgroundColor: theme.colors.primary,
+            position:'relative',
+            overflow: 'hidden'
+        },
+        backgroundImage: {
+            position:'absolute',
+            top: -10,
+            left: 0,
+            right: 0,
+            bottom: 0
+        },
+        imageOverlay: {
+            height: headerImageHeight,
+            width: width,
+            flex: 1
+        },
+        newsItem: {
+            backgroundColor: theme.colors.background,
+            paddingHorizontal: theme.paddings.default,
+            paddingTop: theme.paddings.default
+        },
+        newsItemCategory: {
+            marginBottom: 5,
+            fontSize: theme.fontSizes.s
+        },
+        newsItemTitle: {
+            ...theme.fonts.bold,
+            fontSize: theme.fontSizes.xxl,
+            lineHeight: theme.lineHeights.titleBigger,
+            marginBottom: theme.paddings.small,
+        },
+        newsItemText: {
+            ...theme.fonts.regular,
+            fontSize: theme.fontSizes.m,
+            lineHeight: theme.lineHeights.s
+        },
+        newsItemReadMore: {
+            textDecorationLine: 'underline'
+        },
+        newsItemActionbar: {
+            borderBottomColor: theme.colors.accent,
+            borderBottomWidth: 1,
+            //borderStyle: 'dotted', // TODO Not available on iOS at the moment (also dashed)
+            borderStyle: 'solid',
+            paddingBottom: theme.paddings.small,
+            marginTop: theme.paddings.small,
+            flex: 1,
+            flexDirection: 'row'
+        },
+        newsItemDate: {
+            fontSize: theme.fontSizes.s,
+            ...theme.fonts.bold,
+            color: theme.colors.subtitle,
+            flex: 1,
+            alignItems: 'center',
+            alignSelf: 'center',
+            flexDirection: 'row',
+        },
+        newsItemAuthor: {
+            fontSize: theme.fontSizes.s,
+            ...theme.fonts.bold,
+            color: theme.colors.subtitle,
+            flex: 1,
+            alignItems: 'center',
+            alignSelf: 'center',
+            flexDirection: 'row',
+        },
+        newsItemActions: {
+            flex: 1,
+            alignItems: 'flex-end',
+            justifyContent: 'flex-end'
+        },
+        newsItemAction: {
+            marginRight: -4
+        },
+        modalContainer: {
+            flex: 1
+        },
+    }
+};

package/components/TopNewsHtwk/index.js

@@ -0,0 +1,279 @@
+/**
+ * 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 React                from 'react';
+import {
+    Animated,
+    Dimensions,
+    StyleSheet,
+    Text,
+    TouchableOpacity,
+    View
+} from 'react-native';
+
+import {connect}            from 'react-redux';
+import {withTheme}          from "react-native-paper";
+
+import merge                from 'lodash/merge';
+import NetInfo              from '@react-native-community/netinfo';
+
+import componentStyles      from "./styles";
+import PropTypes            from "prop-types";
+import {withTranslation}     from "react-i18next";
+import { handleHtmlEntities } from '../../libraries/core/helper/format.helper';
+
+
+
+/**
+ * Top News Component
+ *
+ * Shows a single news item with the name and the logo of the university.
+ *
+ * Parameters:
+ *  - animationRange: Animation Range for animation of the dashboard view
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+class TopNewsComponent extends React.Component {
+
+    static propTypes = {
+        animationRange: PropTypes.any
+    };
+
+    // Styles of this component
+    styles;
+
+    animateHeader = null;
+    animateBackground = null;
+    topNews = null;
+    hasConnection = true;
+    netInfoUnsubscribe = null;
+
+    constructor(props) {
+        super(props);
+
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+
+        const { pluginStyles,theme } = this.props;
+        this.styles = componentStyles(theme);
+
+        if(pluginStyles) {
+            this.styles = merge(this.styles, pluginStyles);
+        }
+
+        this.styles = StyleSheet.create(this.styles);
+        // ------------------------------------------------------------------------
+
+        const height = Dimensions.get('window').height;
+
+        this.animateHeader = {
+            transform: [{
+                translateY: this.props.animationRange.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, height / 8],
+                })
+            }]
+        };
+
+        this.animateLogo = {
+            transform: [{
+                translateY: this.props.animationRange.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [30, (height / 50)],
+                })
+            },
+            {
+                scale: this.props.animationRange.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [1, .4],
+                })
+            }]
+        };
+
+        this.animateBackground = {
+            transform: [{
+                translateY: this.props.animationRange.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, height / 7],
+                    extrapolate: 'clamp'
+                })
+            }]
+        };
+
+        this.netInfoUnsubscribe = NetInfo.addEventListener(state => {
+             this.hasConnection = state.isInternetReachable && state.isConnected;
+        });
+    }
+
+    componentWillUnmount() {
+        if(this.netInfoUnsubscribe) {
+            this.netInfoUnsubscribe();
+        }
+    }
+
+    render() {
+
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+
+        const {feeds, t} = this.props;
+        const {appSettings} = this.props.theme;
+        let topNews = this.props.topNews;
+
+        if(!Array.isArray(topNews)) {
+            topNews = [];
+        }
+
+        let topItem = null;
+        let imageSrc = null;
+        let feedTitle = null;
+        if(topNews[0]) {
+            topItem = topNews[0];
+            if(topItem.imageUrl) {
+                imageSrc = {uri: topItem.imageUrl};
+            }
+        }
+
+        if(feeds && topItem && topItem.originFeedId) {
+            const feed = feeds.filter(feed => feed.feedid === topItem.originFeedId)[0];
+
+            if(feed && feed.title) {
+                feedTitle = feed.title.toUpperCase();
+            }
+        }
+
+        if(!imageSrc)
+            imageSrc = appSettings.header;
+
+
+        // Top News available
+        this.topNews = topItem;
+
+        // Notice about "." in accessibilityLabels: This will set a short break in the sound output, like in a normal sentence.
+
+        return (
+            <View style={{overflow: 'hidden'}}>
+                <Animated.View
+                    style={[this.styles.universityIconWrapper, this.animateBackground]}>
+                    <Animated.Image
+                        source={appSettings.logo}
+                        resizeMode="contain"
+                        fadeDuration={1000}
+                        style={[this.styles.universityIcon]}/>
+                </Animated.View>
+                <TouchableOpacity
+                    onPress={() => this._handlePressNews(topItem)}
+                >
+                    <Animated.View stlyle={[this.styles.backgroundImageWrapper, this.animateBackground]}>
+                        <Animated.Image
+                            source={imageSrc}
+                            resizeMode="cover"
+                            fadeDuration={10}
+                            style={[this.styles.newsImage]}
+                            accessible={true}
+                            accessibilityLabel={
+                                !topItem && !this.hasConnection ?
+                                    t('home:noConnectionTitle')
+                                    : (!topItem ? t('home:noItemTitle') : handleHtmlEntities(topItem.title))}
+                            accessibilityHint={!topItem ? '' : t('accessibility:topNewsHint')}
+                        />
+                    </Animated.View>
+
+                    {
+                        (!topItem && !this.hasConnection) ? (
+                            <Animated.View style={[this.styles.newsItem]}
+                                           accessible={true}
+                                           accessibilityLabel={t('home:noConnectionTitle')}>
+                                <Text style={this.styles.newsItemTitle}>{t('home:noConnectionTitle')}</Text>
+                                <Text style={this.styles.newsItemText}>{t('home:noConnectionText')}</Text>
+                                <View style={this.styles.newsItemActionbar}>
+                                    <Text style={this.styles.newsItemDate}/>
+                                </View>
+                            </Animated.View>
+                        ) : ((!topItem) ? (
+                            <Animated.View style={[this.styles.newsItem]}
+                                           accessible={true}
+                                           accessibilityLabel={t('home:noItemTitle')}>
+                                <Text style={this.styles.newsItemTitle}>{t('home:noItemTitle')}</Text>
+                                <Text style={this.styles.newsItemText}>{t('home:noItemText')}</Text>
+                                <View style={this.styles.newsItemActionbar}>
+                                    <Text style={this.styles.newsItemDate}/>
+                                </View>
+                            </Animated.View>
+                        ) : (
+                            <View
+                                style={this.styles.newsItem}
+                                accessible={true}
+                                accessibilityLabel={handleHtmlEntities(topItem.title)}
+                                accessibilityHint={t('accessibility:topNewsHint')}
+                            >
+                                {feedTitle && <Text style={this.styles.newsItemCategory}>{feedTitle}</Text>}
+                                <Text style={this.styles.newsItemTitle}>{handleHtmlEntities(topItem.title)}</Text>
+                                {topItem.shortDesc &&
+                                    <Text style={this.styles.newsItemText}>{handleHtmlEntities(topItem.shortDesc)}</Text>
+                                }
+                                {topItem.author &&
+                                    <Text style={this.styles.newsItemAuthor}>{handleHtmlEntities(topItem.author)}</Text>
+                                }
+                                <View style={this.styles.newsItemActionbar} />
+                            </View>
+                        ))
+                    }
+                </TouchableOpacity>
+            </View>
+        );
+    }
+
+
+    /**
+     * User has pressed the news item card.
+     * Shows the news details in a modal window.
+     *
+     * @param news
+     *
+     * @private
+     */
+    _handlePressNews = (news) => {
+        if (news) {
+            this.props.navigation.navigate(
+            'TopNewsDetail',
+                {
+                    news: {...news, 'feedId': 0},
+                    newsType: "Default"
+                });
+        }
+    }
+}
+
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.topNews.component,
+        pluginStyles: state.pluginReducer.topNews.styles,
+        topNews: state.apiReducer.topNews,
+        feeds: state.apiReducer.feeds
+    };
+};
+
+export default connect(mapStateToProps, null)(withTranslation()(withTheme(TopNewsComponent)))