@olea-bps/components 1.0.0

package/Modal/index.js

@@ -0,0 +1,106 @@
+/**
+ * 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 {SafeAreaView, StyleSheet} from 'react-native';
+import {connect} from 'react-redux'
+import {withTheme} from 'react-native-paper';
+
+import merge from 'lodash/merge';
+
+import componentStyles from "./styles"
+
+
+/**
+ * Modal Component
+ *
+ * This component receives its content through a redux state. The origin component pushes
+ * the content to this state and triggers a navigation to "Modal". This will display the
+ * modal with the provided content.
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ *
+ *
+ *
+ *  Sample usage:
+ *
+    store.dispatch({
+        type: 'UPDATE_MODAL_CONTENT',
+            modalContent: (
+                <View style={this.styles.modalContainer}>
+                    <NewsDetailComponent news={news} {...this.props} />
+                </View>
+            )
+    });
+    this.props.navigation.navigate('Modal');
+ */
+class ModalComponent extends React.Component {
+
+    // Styles of this component
+    styles;
+
+    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);
+    }
+
+    render() {
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+
+        const {themeStyles} = this.props.theme;
+        const { modalContent } = this.props;
+
+        return (
+            <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
+                {modalContent}
+            </SafeAreaView>
+        );
+    }
+}
+
+
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.modal.component,
+        pluginStyles: state.pluginReducer.modal.styles,
+        modalContent: state.stateReducer.modalContent
+    };
+};
+
+export default connect(mapStateToProps, null)(withTheme(ModalComponent))

package/Modal/styles.js

@@ -0,0 +1,8 @@
+
+export default function(theme) {
+    return {
+        container: {
+            flex: 1,
+        }
+    }
+};

package/NewsDetail/index.js

@@ -0,0 +1,377 @@
+/**
+ * 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 PropTypes from 'prop-types';
+
+import {
+    StyleSheet,
+    Text,
+    View,
+    SafeAreaView,
+    Share,
+    Dimensions,
+    Animated,
+    Platform,
+    Linking,
+    PixelRatio
+} from 'react-native';
+import {Appbar, Headline, withTheme} from "react-native-paper";
+import { WebView } from 'react-native-webview';
+import {withTranslation} from "react-i18next";
+import { connect } from 'react-redux'
+import merge from 'lodash/merge';
+import moment from "moment";
+
+import WebViewAutoHeight from '@olea-bps/react-native-webview-autoheight';
+
+
+import componentStyles from "./styles"
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+import {selectFeedById} from "@olea-bps/core/redux/reducers/api";
+
+
+/**
+ * News Detail Component
+ *
+ * Shows the image and the text of a single news. Provides a share functionality.
+ *
+ * Parameters:
+ *  - news: News object with all informations of it (for use in modal)
+ *
+ * Navigation-Parameters:
+ *  - news: News object with all informations of it (for use as standalone view)
+ */
+class NewsDetailComponent extends React.Component {
+    static propTypes = {
+        news: PropTypes.object,
+    };
+
+    /**
+     * Constant to store news types. These types are used to change the view accordingly.
+     */
+    static newsTypes = Object.freeze({
+        topNews: 'TopNews',
+    })
+
+    // Styles of this component
+    styles;
+
+    news = null;
+
+    currentURL = null;
+
+    urlRegex = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/;
+
+    maxHeaderHeight;
+    minHeaderHeight = 120;
+    headerScrollDistance;
+    fontScaling;
+
+    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);
+
+        // ------------------------------------------------------------------------
+
+        // Initialize dimension-dependent properties
+        this.maxHeaderHeight = Dimensions.get('window').height / 3.8;
+        this.headerScrollDistance = this.maxHeaderHeight - this.minHeaderHeight;
+        this.fontScaling = PixelRatio.getFontScale();
+
+        this._onScroll = this._onScroll.bind(this);
+
+        this.state = {
+            imageHeight: Dimensions.get('window').height / 3.8,
+            scrollY: new Animated.Value(Platform.OS === 'ios' ? -this.maxHeaderHeight :0)
+        };
+    };
+
+    /**
+     * Share function for contact
+     *
+     * @returns {Promise<void>}
+     * @private
+     */
+    async _onShare() {
+        try {
+            let message = this.news.title + '\n\n' + this.news.link;
+            const result = await Share.share({
+                message: message
+            });
+
+            if (result.action === Share.sharedAction) {
+                if (result.activityType) {
+                    // shared with activity type of result.activityType
+                } else {
+                    // shared
+                }
+            } else if (result.action === Share.dismissedAction) {
+                // dismissed
+            }
+        } catch (error) {
+                alert(error.message);
+        }
+    };
+
+
+    _onScroll = event => {
+        let scrollPosY = event.nativeEvent.contentOffset.y;
+        let imageHeight =  Dimensions.get('window').height / 2.8;
+
+
+        let calculatedHeight = imageHeight - scrollPosY;
+        let limit = 80;
+        this.setState({imageHeight: calculatedHeight > limit ? calculatedHeight : limit});
+    };
+
+    /**
+     * get the news content
+     *
+     * @param news
+     * @param css
+     *
+     * @returns {{html: string}}
+     * @private
+     */
+    _getNewsContent = (news, css) => {
+        const newsContent =  {html: css + "<div class='content'><meta http-equiv='Content-Type' content='text/html; charset=utf-8' />" + news.desc + "</div>"};
+        if (Platform.OS === 'android') {
+            newsContent.baseUrl = '';
+        }
+        return newsContent;
+    };
+
+   /**
+    * checks if the url is a valid one -> if so, it will open the URL in the browser
+    * otherwise it stops the request
+    *
+    * @param url
+    * @returns {boolean}
+    */
+    startLoadingRequest = ({url}) => {
+        if (!url.match(this.urlRegex)) {
+            return true;
+        } else if (url.match(this.urlRegex) && Linking.canOpenURL(url)){
+            //Android does not support the stopLoading method
+            if (Platform.OS === 'android') {
+                this.webView && this.webView.goBack();
+                Linking.openURL(url);
+            } else {
+                this.webView.stopLoading();
+                Linking.openURL(url);
+            }
+        }
+    };
+
+    _renderTopNewsContent = (news) => {
+      const {customScript} = this.props.theme;
+      return (
+        <View style={this.styles.container}>
+          <WebView
+              injectedJavaScript={customScript}
+              source={{ uri: news.link }}
+          />
+        </View>
+      );
+    }
+
+
+    /**
+     * Render news contact details content
+     *
+     * @returns {*}
+     * @private
+     */
+    _renderContent = (news) => {
+        const {appSettings, css, themeStyles} = this.props.theme;
+        this.currentURL = news.link;
+
+
+
+        let imageSrc = null;
+        if(news?.contentImageUrl) {
+            imageSrc = {uri: news.contentImageUrl}
+        }
+        const scrollY = Animated.add(
+            this.state.scrollY,
+            Platform.OS === 'ios' ? this.maxHeaderHeight : 0,
+        );
+
+        const headerTranslate = scrollY.interpolate({
+            inputRange: [0, this.headerScrollDistance],
+            outputRange: [0, -this.headerScrollDistance],
+            extrapolate: 'clamp',
+        });
+        const imageTranslate = scrollY.interpolate({
+            inputRange: [0, this.headerScrollDistance],
+            outputRange: [0, 1],
+            extrapolate: 'clamp',
+        });
+
+        const titleOpacity = scrollY.interpolate({
+            inputRange: [0, this.headerScrollDistance / 2, this.headerScrollDistance],
+            outputRange: [0, 1, 1],
+            extrapolate: 'clamp',
+        });
+
+        const titleScale = scrollY.interpolate({
+            inputRange: [0, this.headerScrollDistance / 2, this.headerScrollDistance],
+            outputRange: [1, 1, 0.8],
+            extrapolate: 'clamp',
+        });
+        let titleTranslate = scrollY.interpolate({
+            inputRange: [0, this.headerScrollDistance / 2, this.headerScrollDistance],
+            outputRange: [0, 0, -8],
+            extrapolate: 'clamp',
+        });
+
+        // No image
+        if(imageSrc == null) {
+            imageSrc = appSettings.header;
+        }
+
+
+        let barTitle = news.title.replace(/<(?:.|\n)*?>/gm, '');
+        let barTitleFontSize = 22;
+        let barTitleLineHeight = 22;
+        let barTitleHeight = 120;
+        if(barTitle.length > 80)
+            barTitleFontSize = 18;
+
+        if(barTitle.length > 120)
+            barTitleFontSize = 16;
+
+        if(this.fontScaling > 2) {
+            barTitleFontSize = 15;
+            barTitleLineHeight = 14;
+            barTitleHeight = 140;
+        }
+        if(this.fontScaling > 2.3) {
+            barTitleFontSize = 12;
+            barTitleLineHeight = 14;
+            barTitleHeight = 160;
+            titleTranslate = scrollY.interpolate({
+                inputRange: [0, this.headerScrollDistance / 2, this.headerScrollDistance],
+                outputRange: [0, 0, -25],
+                extrapolate: 'clamp',
+            });
+        }
+        barTitleFontSize = Math.round(barTitleFontSize * 10000) / 10000;
+
+        let pubDate = news ? news.pubdate : null ;
+        let date = news ? moment(news.pubdate) : moment();
+        if(date)
+            pubDate = date.format('DD.MM.YYYY HH:mm');
+
+        return (
+          <View style={this.styles.container}>
+            <Animated.ScrollView style={[this.styles.containerInner]}>
+                <Animated.View
+                    pointerEvents="none"
+                    style={[this.styles.header, { height: this.maxHeaderHeight }]}>
+                    {imageSrc != null &&
+                        <Animated.Image
+                            source={imageSrc}
+                            style={[
+                                this.styles.image,
+                                {
+                                    height: this.maxHeaderHeight,
+
+                                }
+                            ]}/>}
+                </Animated.View>
+                {news.contentImageDesc ? (<Text style={this.styles.imageDesc}>{news.contentImageDesc}</Text>) : null}
+                <View style={[this.styles.containerContent, Platform.OS === 'android' && {paddingBottom: this.maxHeaderHeight + this.styles.containerContent.paddingVertical}]}>
+                    <Headline style={this.styles.title}>{news.title}</Headline>
+                    <WebViewAutoHeight source={this._getNewsContent(news, css)}
+                                       style={{...themeStyles.webview, ...this.styles.newsContent}}
+                                       scrollEnabled={false}
+                                       contentInset={{top: 0, left: 0, right: 0, bottom: 0}}
+                                       onNavigationStateChange={this.startLoadingRequest}
+                                       ref={el => {this.webView = el}}/>
+                   <Text style={[this.styles.newsContent, this.styles.newsContentText]}>{pubDate}</Text>
+                </View>
+            </Animated.ScrollView>
+          </View>
+        );
+    };
+
+    render() {
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+        const {themeStyles} = this.props.theme;
+        let { news, route, t, feed } = this.props;
+        let { newsType } = route.params;
+
+        if(!news){
+            return (
+                <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
+                    <AppbarComponent {...this.props}
+                                     title={t('news:title')}/>
+                    <View style={this.styles.container}>
+                        <Text>{t('news:couldNotLoad')}</Text>
+                    </View>
+                </SafeAreaView>
+            );
+        }
+
+        this.news = news;
+        const title = feed ? feed.title : t('news:feeds');
+
+        return (
+            <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
+                <AppbarComponent {...this.props}
+                                 title={title}
+                                 rightAction={newsType ? null : <Appbar.Action icon="share-variant" onPress={this._onShare.bind(this)}/>}/>
+                {newsType === NewsDetailComponent.newsTypes.topNews ? this._renderTopNewsContent(news) : this._renderContent(news)}
+            </SafeAreaView>
+        );
+    }
+}
+
+
+const mapStateToProps = (state, ownProps) => {
+    let {news, route} = ownProps;
+    if (!news) {
+        news = route.params && route.params.news || null;
+    }
+
+    return {
+        pluginComponent: state.pluginReducer.newsDetail.component,
+        pluginStyles: state.pluginReducer.newsDetail.styles,
+        feed: selectFeedById(state, news.feedId),
+        news: news
+    };
+};
+
+export default connect(mapStateToProps, null)(withTranslation()(withTheme(NewsDetailComponent)))

package/NewsDetail/styles.js

@@ -0,0 +1,77 @@
+import {Dimensions} from "react-native";
+
+export default function(theme) {
+    const height = Dimensions.get('window').height;
+    const width = Dimensions.get('window').width;
+    return {
+        overflow: {
+            backgroundColor: theme.colors.overlayColor,
+        },
+        image: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            width: null,
+            resizeMode: 'cover',
+        },
+        container: {
+            flex: 1,
+            overflow: 'hidden'
+        },
+        containerInner: {
+            flex: 1
+        },
+        containerContent: {
+            backgroundColor: theme.colors.contentBackground,
+            flex: 1,
+            paddingHorizontal: 5,
+            paddingVertical: 20,
+            minHeight: height * 1.25 // To make sure the animation won't break / stop
+        },
+        activity: {
+            marginTop: 20
+        },
+        badges: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            paddingHorizontal: 10
+        },
+        badge: {
+            marginRight: 5,
+            marginBottom: 5
+        },
+        title: {
+            paddingLeft: 10,
+            fontSize: theme.fontSizes.title,
+            lineHeight: theme.lineHeights.titleBig
+        },
+        bar: {
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            position: 'absolute',
+            top: 5,
+            left: 0,
+            right: 0,
+        },
+        barText: {
+            color: theme.colors.primaryText,
+            ...theme.fonts.bold,
+        },
+        newsContent : {
+            marginVertical: theme.paddings.default,
+            marginHorizontal: theme.paddings.small,
+            width: width - (2 * theme.paddings.small)
+        },
+        newsContentText: {
+            fontSize: theme.fontSizes.m
+        },
+        imageDesc: {
+            backgroundColor: theme.colors.overlayColor,
+            color: theme.colors.primaryText,
+            paddingVertical: 2,
+            paddingHorizontal: theme.paddings.small,
+            fontSize: theme.fontSizes.xs
+        }
+    };
+}

package/NewsList/index.js

@@ -0,0 +1,120 @@
+/**
+ * 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 { useEffect, useState, useMemo, useCallback } from 'react';
+import {
+    AppState,
+    ActivityIndicator,
+    Text,
+    StyleSheet,
+    View,
+    FlatList,
+} from 'react-native';
+import { useTheme } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+import { useFocusEffect } from '@react-navigation/native';
+
+import { NewsListItem } from '@olea-bps/components'
+import { useApiProvider } from '@olea-bps/context-news';
+
+import componentStyles from './styles';
+
+export default function NewsList(props) {
+    const theme = useTheme();
+    const { t } = useTranslation()
+    const apiProvider = useApiProvider();
+
+    const { navigation, active, newsChannelId } = props;
+    const { themeStyles, colors, paddings } = theme;
+
+    const [news, setNews] = useState(null);
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme, componentStyles]
+    );
+
+    const fetchNewsByNewsChannel = useCallback(
+        () => {
+            if (apiProvider && newsChannelId) {
+                // News von API abrufen
+                apiProvider.getNews(newsChannelId)
+                    // An jede News wird die originale NewsChannel-ID angefügt
+                    .then(newsItems => newsItems.map(news => ({ ...news, newsChannelId })))
+                    // Aktualisieren des States für News
+                    .then(setNews);
+            }
+        },
+        [newsChannelId, apiProvider]
+    )
+
+    // Aktualisieren der News, wenn das Modul gewechselt wurde und wieder zurück ins News-Modul gewechselt wird bzw. generell die Komponente im Fokus der App ist
+    useFocusEffect(
+        fetchNewsByNewsChannel
+    );
+
+    // Aktualisieren der News, wenn die NewsList in einer TabView ist und gerade als Tab aktiv ist
+    useEffect(
+        () => {
+            if (active) {
+                fetchNewsByNewsChannel();
+            }
+        },
+        [active, fetchNewsByNewsChannel]
+    )
+
+    // Aktualisieren der News, wenn App im Hintergrund war und wieder vorgeholt wird
+    useEffect(
+        () => {
+            const subscription = AppState.addEventListener(
+                'change',
+                nextAppState => {
+                    if (nextAppState === 'active') {
+                        fetchNewsByNewsChannel();
+                    }
+                });
+
+            return () => {
+                subscription.remove();
+            };
+        },
+        [fetchNewsByNewsChannel]
+    );
+
+    return (
+        <View style={themeStyles.container}>
+            {
+                Array.isArray(news)
+                    ? <FlatList
+                        data={news}
+                        keyExtractor={(news, index) => news?.guid ?? news?.title ?? index}
+                        renderItem={({ item }) => <NewsListItem news={item} navigation={navigation} />}
+                        ItemSeparatorComponent={(props) => {
+                            return (<View style={styles.listSeperator} />);
+                        }}
+                        initialNumToRender={6}
+                        contentContainerStyle={{ paddingBottom: paddings.default }}
+                        style={styles.innerContainer}
+                        ListEmptyComponent={
+                            <View style={themeStyles.noticeTextContainer}>
+                                <Text style={themeStyles.noticeText}>{t('news:noResult')}</Text>
+                            </View>
+                        }
+                    />
+                    : <ActivityIndicator style={styles.activity} size="large" color={colors.loadingIndicator} />
+
+            }
+        </View>
+    );
+}