ChargEco/Strides-APP/app/pages/home/maps/PinMessage.js

import React, { useEffect, useState } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
//import { Marquee } from '@animatereactnative/marquee';
import { ElevationObject } from '../../../components/Button';
import TextView from '../../../components/TextView';
import MyModal from '../../../components/MyModal';
import Swiper from 'react-native-swiper';
import Dialog from '../../../components/Dialog';

const PinMessage = ({
  messageList=[]
}) => {
  const [visible, showDialog] = useState(false);
  useEffect(() => {
    if (messageList.length > 0) {
      showDialog(true)
    }
  }, [messageList])
  if (visible)
    return (
      <MyModal
        style={styles.noticeDialog}
        visible={visible}>
        <Swiper
          style={{height: $vh(50)}}
          loop={false}
          autoplay={false}
          //dotColor={"#ccc"}
          activeDotColor={colorAccent}
          removeClippedSubviews={false}
          decelerationRate={"fast"}
          automaticallyAdjustContentInsets={true}>
          { messageList.map((item, index) =>
            <NoticeView
              key={index}
              item={item}
              onClose={() => showDialog(false)}/>
          )}
        </Swiper>
      </MyModal>
    );
  else
    return <></>
}

const Message = ({item}) => {
  const [expand, setExpand] = useState(false)
  const max = ($width-32)/8;
  return (
    <View style={styles.messageCard}>
      <View style={ui.flexc}>
        { item.pinTitle?.length>max
        ? <Marquee style={styles.marquee} spacing={$vw(80)} speed={0.8}>
            <Text style={styles.textTitle} numberOfLines={1}>{item.pinTitle}</Text>
          </Marquee>
        : <Text style={styles.fixedTitle} numberOfLines={expand ? 5 : 1}>{item.pinTitle}</Text>
        }
        <FontAwesome6
          style={$padding(12, 16, 12, 0)}
          name={expand == true ? "chevron-up" : "chevron-down"}
          size={16}
          color={colorCancel}
          onPress={() => setExpand(!expand)}/>
      </View>
      { expand &&
        <ScrollView>
          <TextView style={styles.textMessage}>{item.pinContent}</TextView>
        </ScrollView>
      }
    </View>
  )
}

const NoticeView = ({item, onClose}) => {
  return (
    <View style={styles.notiveView}>
      <TextView style={styles.noticeTitle}>{item.pinTitle}</TextView>
      <View style={styles.closeIcon}>
        <MaterialIcons
          onPress={onClose}
          name="close"
          color="#ccc"
          size={24}/>
      </View>
      <ScrollView
        style={ui.flex1}>
        <TextView style={styles.textMessage}>{item.pinContent}</TextView>
      </ScrollView>
    </View>
  )
}

export default PinMessage;

const styles = StyleSheet.create({
  pinMessageView: {
    top: 180,
    left: 16,
    right: 16,
    zIndex: 10,
    maxHeight: $vh(60),
    overflow: "hidden",
    position: 'absolute',
  },
  messageCard: {
    marginBottom: 16,
    maxHeight: $vh(50),
    overflow: "hidden",
    borderRadius: 6,
    backgroundColor: colorLight,
    ...ElevationObject(3)
  },
  marquee: {
    flex: 1,
    overflow: "hidden",
    ...$padding(12, 16)
  },
  textTitle: {
    color: textPrimary,
    fontSize: 16,
    fontWeight: "bold"
  },
  fixedTitle: {
    flex: 1,
    color: textPrimary,
    fontSize: 16,
    fontWeight: "bold",
    ...$padding(12, 16)
  },
  textMessage: {
    color: textSecondary,
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 16,
    fontSize: 14
  },
  noticeDialog: {
    width: Dialog.dialogWidth,
    height: $vw(100) + 48
  },
  closeIcon: {
    top: 8,
    right: 8,
    position: "absolute"
  },
  notiveView: {
    height: $vh(50) - 48,
    marginLeft: 4,
    marginRight: 4,
    borderRadius: 12,
    backgroundColor: colorLight
  },
  noticeTitle: {
    color: textPrimary,
    padding: 16,
    fontSize: 16,
    fontWeight: "bold",
    marginRight: 16
  }
})