ChargEco/Strides-APP/app/pages/alert/ViewArticle.js

/**
 * 文章详情
 * @邠心vbe on 2023/10/24
 */
import React, { Component } from 'react';
import { View,  StyleSheet, Image, ScrollView, Linking } from 'react-native';
import Swiper from 'react-native-swiper';
import apiArticle from '../../api/apiArticle';
import { ElevationObject } from '../../components/Button';
import HeaderTitle from '../../components/HeaderTitle';
import TextView from '../../components/TextView';
import utils from '../../utils/utils';

export default class ViewArticle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: "",
      messageInfo: {
        articleTypeName: "",
        articleTitle: "",
        articleContent: ""
      }
    };
  }

  componentDidMount() {
    if (this.props.route?.params?.id) {
      this.setState({
        id: this.props.route?.params?.id
      }, () => {
        this.readMessage();
      })
    }
  }

  readMessage() {
    Dialog.showProgressDialog();
    apiArticle.readMessage(this.state.id).then(res => {
      if (res.data) {
        this.setState({
          messageInfo: res.data
        });
        this.setPageTitle();
      }
    }).catch(err => {
      toastShort(err);
    }).finally(() => {
      Dialog.dismissLoading();
    })
  }

  setPageTitle() {
    if (this.state.messageInfo.articleTitle) {
      this.props.navigation.setOptions({
        headerTitle: () => (<HeaderTitle title={this.state.messageInfo.articleTitle}/>)
      })
    }
  }

  accessLink(url) {
    Linking.openURL(utils.getImageUrl(url))
  }


  render() {
    return (
      <ScrollView
        style={styles.container}
        contentContainerStyle={$padding(0,0,32)}
        stickyHeaderIndices={[utils.isNotEmpty(this.state.messageInfo.articleImages) ? 1 : 0]}>
        { utils.isNotEmpty(this.state.messageInfo.articleImages) &&
          <Swiper
            style={{height: $width}}
            autoplay={true}
            autoplayTimeout={5}
            renderPagination={() => <></>}
            removeClippedSubviews={false}>
            { this.state.messageInfo.articleImages.map((item, index) => {
              return (
                <Image
                  key={index}
                  style={{width: $width, height: $width}}
                  source={{uri: utils.getImageUrl(item.articleImagePath)}}/>
              );
            })}
          </Swiper>
        }
        <View style={styles.header}>
          <TextView
            style={styles.textTitle}>
            {this.state.messageInfo.articleTitle}
          </TextView>
          <View style={ui.flexc}>
            <MaterialCommunityIcons
              name="clock-time-four-outline"
              color={textSecondary}
              size={12}/>
            <TextView
              style={styles.textDate}
              numberOfLines={1}>
              {this.state.messageInfo.createTime}
            </TextView>
            <MaterialCommunityIcons
              name="eye-check-outline"
              size={12}
              color={textPrimary}/>
            <TextView
              style={styles.textView}
              numberOfLines={1}>
              {this.state.messageInfo.articleViews}
            </TextView>
          </View>
          <View style={ui.flex}>
            <TextView 
              style={styles.labelTypeText}
              numberOfLines={1}>
              {this.state.messageInfo.articleTypeName}
            </TextView>
          </View>
        </View>
        <TextView
          style={styles.textMessage}
          selectable={true}>
          {this.state.messageInfo.articleContent}
        </TextView>
        { utils.isNotEmpty(this.state.messageInfo.articleLinks) &&
          <>
            <TextView style={styles.textLinkTitle}>{$t("notification.labelLinks")}</TextView>
            { this.state.messageInfo.articleLinks.map((item, index) =>
              <View style={styles.itemLink} key={index}>
                <TextView style={styles.linkIndex}>{index + 1}.</TextView>
                <TextView 
                  style={styles.linkHyper}
                  onPress={() => this.accessLink(item.articleLink)}>{item.articleLinkName}</TextView>
              </View>
            )}
          </>
        }
        <EndView/>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: pageBackground
  },
  textTitle: {
    color: textPrimary,
    fontSize: 18,
    fontWeight: 'bold',
    paddingBottom: 2
  },
  textDate: {
    flex: 1,
    color: textSecondary,
    fontSize: 10,
    paddingLeft: 2
  },
  textView: {
    color: textSecondary,
    fontSize: 10,
    paddingLeft: 4
  },
  header: {
    padding: 16,
    ...ElevationObject(1),
    backgroundColor: pageBackground
  },
  textMessage: {
    color: textPrimary,
    fontSize: 14,
    padding: 16
  },
  labelTypeText: {
    fontSize: 11,
    borderWidth: 1,
    borderRadius: 4,
    borderColor: colorPrimary,
    marginTop: 8,
    ...$padding(2, 6)
  },
  textLinkTitle: {
    color: textPrimary,
    fontSize: 16,
    fontWeight: 'bold',
    padding: 16
  },
  itemLink: {
    ...$padding(0, 16, 8),
    flexDirection: 'row'
  },
  linkIndex: {
    fontSize: 14,
    paddingRight: 2
  },
  linkHyper: {
    ...ui.link,
    fontSize: 14,
    textDecorationLine: 'underline'
  },
  linkActive: {
    color: "#FF3B30"
  }
})