|
|
@@ -0,0 +1,59 @@
|
|
|
+import React, { useState } from 'react';
|
|
|
+import { 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
|
|
|
+}) => {
|
|
|
+ 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>
|
|
|
+ );
|
|
|
+ else
|
|
|
+ return <></>
|
|
|
+}
|
|
|
+
|
|
|
+export default PinMessage;
|
|
|
+
|
|
|
+const styles = StyleSheet.create({
|
|
|
+ pinMessageCard: {
|
|
|
+ top: 180,
|
|
|
+ left: 16,
|
|
|
+ right: 16,
|
|
|
+ zIndex: 10,
|
|
|
+ overflow: "hidden",
|
|
|
+ borderRadius: 6,
|
|
|
+ alignItems: "center",
|
|
|
+ position: 'absolute',
|
|
|
+ backgroundColor: colorLight,
|
|
|
+ ...ElevationObject(3)
|
|
|
+ },
|
|
|
+ textTitle: {
|
|
|
+ color: textPrimary,
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: "bold"
|
|
|
+ },
|
|
|
+ textMessage: {
|
|
|
+ color: textSecondary,
|
|
|
+ padding: 8,
|
|
|
+ fontSize: 14,
|
|
|
+ marginBottom: -20
|
|
|
+ }
|
|
|
+})
|
wudebin