update app/pages/home/maps/PinMessage.js

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

@@ -1,59 +1,93 @@
-import React, { useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+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';
 
 const PinMessage = ({
   visible=false,
-  title,
-  message
+  messageList=[]
 }) => {
-  const [expand, setExpand] = useState(false)
   if (visible)
     return (
-      <View style={styles.pinMessageCard}>
-        <Marquee style={$padding(12, 16, 4)} spacing={$vw(80)} speed={0.8}>
-          <Text style={styles.textTitle}>{title}</Text>
-        </Marquee>
-        { expand &&
-          <TextView style={styles.textMessage}>{message}</TextView>
-        }
-        <MaterialIcons
-          name={expand ? "keyboard-arrow-up" : "keyboard-arrow-down"}
-          size={26}
-          color={colorCancel}
-          onPress={() => setExpand(!expand)}/>
+      <View style={styles.pinMessageView}>
+        { messageList.map((item, index) =>
+          <Message key={index} item={item}/>
+        )}
       </View>
     );
   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 &&
+        <TextView style={styles.textMessage} numberOfLines={15}>{item.pinContent}</TextView>
+      }
+    </View>
+  )
+}
+
 export default PinMessage;
 
 const styles = StyleSheet.create({
-  pinMessageCard: {
+  pinMessageView: {
     top: 180,
     left: 16,
     right: 16,
     zIndex: 10,
+    maxHeight: $vh(60),
     overflow: "hidden",
-    borderRadius: 6,
-    alignItems: "center",
     position: 'absolute',
+  },
+  messageCard: {
+    marginBottom: 16,
+    maxHeight: $vw(60),
+    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,
-    padding: 8,
-    fontSize: 14,
-    marginBottom: -20
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingBottom: 16,
+    fontSize: 14
   }
 })