add app/pages/alert/Notification.js

Strides-SPAPP/app/pages/alert/Notification.js

@@ -0,0 +1,216 @@
+/**
+ * 通知功能页面适配器
+ * @邠心vbe on 2023/08/17
+ */
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import React, { Component } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { PageList } from '../Router';
+import ListAlerts from './ListAlerts';
+import ListNews from './ListNews';
+import ListCampaign from './ListCampaign';
+import app from '../../../app.json';
+import utils from '../../utils/utils';
+import apiNotification from '../../api/apiNotification';
+import TextView from '../../components/TextView';
+import AlertUtil from './AlertUtil';
+
+export default class Notification extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      refreshing: false,
+      countInfo: {},
+      pageAdapter: []
+    };
+    this.pageAdapterAll = [{
+      title: $t('notification.tabCampaign'),
+      name: "Campaigns",
+      component: ListCampaign
+    }, {
+      title: $t('notification.tabAlerts'),
+      name: "Alerts",
+      component: ListAlerts
+    }, {
+      title: AlertUtil.isPromotion ? $t('notification.tabPromotions') : $t("notification.tabArticles"),
+      name: "News",
+      component: ListNews
+    }]
+    this.pageAdapter = [{
+      title: $t('notification.tabAlerts'),
+      name: "Alerts",
+      component: ListAlerts
+    }, {
+      title: AlertUtil.isPromotion ? $t('notification.tabPromotions') : $t("notification.tabArticles"),
+      name: "News",
+      component: ListNews
+    }]
+    this.tabBarStyle = {
+      tabBarStyle: styles.tabStyle,
+      tabBarPressColor: rippleColor,
+      tabBarScrollEnabled: false,
+      tabBarIndicatorStyle: styles.indicator,
+      tabBarActiveTintColor: tabBarTextActive,
+      tabBarInactiveTintColor: tabBarTextInactive
+    }
+    this.isHide = false;
+  }
+
+  componentDidMount() {
+    if (app.notifications.showCampaigns && app.notifications.showArticle) {
+      this.setState({
+        pageAdapter: this.pageAdapterAll
+      }, () => {
+        setTimeout(() => {
+          this.init();
+        }, 300);
+      });
+    } else if (app.notifications.showArticle) {
+      this.setState({
+        pageAdapter: this.pageAdapter
+      }, () => {
+        setTimeout(() => {
+          this.init();
+        }, 300);
+      });
+    } else {
+      this.init();
+    }
+    
+    this.props.navigation.addListener('focus', () => {
+      if (this.isHide) {
+        this.isHide = false;
+        this.getTotalCount();
+      }
+    });
+    this.props.navigation.addListener('blur', () => {
+      this.isHide = true;
+    });
+  }
+
+  componentWillUnmount() {
+    AlertUtil.release();
+    //BackHandler.removeEventListener("hardwareBackPress", this.backPage)
+  }
+
+  init() {
+    utils.setBackClick([this.props?.route?.name, "Campaigns", "Alerts", "Promotions"], this.backPage)
+    this.getTotalCount();
+    //BackHandler.addEventListener('hardwareBackPress', this.backPage)
+    AlertUtil.setOnRefreshListener(() => {
+      this.getTotalCount();
+    })
+  }
+
+  backPage = () => {
+    //const params = this.props.route.params;
+    if (!this.isHide) {
+      startPage(PageList.home);
+      return true;
+    }
+  }
+
+  getTotalCount() {
+    apiNotification.getTabDotCount().then(res => {
+      if (res.data) {
+        this.setState({
+          countInfo: res.data
+        })
+        AlertUtil.setBadgeCount(res.data)
+      }
+    }).catch(err => {
+      if (res.data) {
+        this.setState({
+          countInfo: {}
+        })
+        AlertUtil.setBadgeCount()
+      }
+    })
+  }
+
+  getBadgeText(index) {
+    let count = 0;
+    switch (index) {
+      case 0:
+        if (app.notifications.showCampaigns) {
+          count = this.state.countInfo?.campaignUnreadCount;
+        } else {
+          count = this.state.countInfo?.alertUnreadCount;
+        }
+        break;
+      case 1:
+        if (app.notifications.showCampaigns) {
+          count = this.state.countInfo?.alertUnreadCount;
+        } else {
+          count = this.state.countInfo?.newsUnreadCount;
+        }
+        break
+      case 2:
+        count = this.state.countInfo?.newsUnreadCount;
+        break;
+    }
+    if (count > 0) {
+      return <TextView style={styles.badgeText}>{count}</TextView>
+    } else {
+      return <></>
+    }
+  }
+
+  render() {
+    const Tab = createMaterialTopTabNavigator();
+    if (this.state.pageAdapter.length > 0) {
+      return (
+        <Tab.Navigator
+          style={styles.container}
+          screenOptions={{
+            lazy: false,
+            lazyPreloadDistance: 1,
+            ...this.tabBarStyle
+          }}
+          backBehavior={() => this.backPage()}>
+          { this.state.pageAdapter.map((item, index) => 
+            <Tab.Screen
+              key={index}
+              name={item.name}
+              component={item.component}
+              options={{
+                title: item.title,
+                tabBarAllowFontScaling: false,
+                tabBarBadge: () => this.getBadgeText(index)
+              }}
+            />
+          )}
+        </Tab.Navigator>
+      );
+    } else {
+      return <ListAlerts {...this.props} showUnread={true}/>
+    }
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colorLight
+  },
+  tabStyle: {
+    backgroundColor: app.isWhitelabel ? colorLight : colorPrimary
+  },
+  indicator: {
+    backgroundColor: app.isWhitelabel ? colorPrimary : colorLight
+  },
+  badgeText: {
+    width: 20,
+    height: 20,
+    color: textLight,
+    fontSize: 10,
+    marginTop: 4,
+    marginRight: 8,
+    borderRadius: 30,
+    fontWeight: 'bold',
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    backgroundColor: "#FF3B30"
+  }
+})