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

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

@@ -3,18 +3,41 @@ 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 = ({
-  visible=false,
   messageList=[]
 }) => {
+  const [visible, showDialog] = useState(false);
+  useEffect(() => {
+    if (messageList.length > 0) {
+      showDialog(true)
+    }
+  }, [messageList])
   if (visible)
     return (
-      <View style={styles.pinMessageView}>
-        { messageList.map((item, index) =>
-          <Message key={index} item={item}/>
-        )}
-      </View>
+      <MyModal
+        style={styles.noticeDialog}
+        visible={visible}>
+        <Swiper
+          style={{height: $vw(100)}}
+          loop={true}
+          autoplay={true}
+          //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 <></>
@@ -48,6 +71,25 @@ const Message = ({item}) => {
   )
 }
 
+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({
@@ -91,5 +133,27 @@ const styles = StyleSheet.create({
     paddingRight: 16,
     paddingBottom: 16,
     fontSize: 14
+  },
+  noticeDialog: {
+    width: Dialog.dialogWidth,
+    height: $vw(100) + 48
+  },
+  closeIcon: {
+    top: 8,
+    right: 8,
+    position: "absolute"
+  },
+  notiveView: {
+    height: $vw(100),
+    marginLeft: 4,
+    marginRight: 4,
+    borderRadius: 12,
+    backgroundColor: colorLight
+  },
+  noticeTitle: {
+    color: textPrimary,
+    padding: 16,
+    fontSize: 16,
+    fontWeight: "bold",
   }
 })