swimtracker-app/views/LastSessionsView.js

import React from "react";
import {
  StyleSheet,
  View,
  StatusBar,
  Text,
  TouchableOpacity,
} from "react-native";
import themeColors from './themeColors';
import EntypoIcon from "react-native-vector-icons/Entypo";
import AntDesignIcon from "react-native-vector-icons/AntDesign";
import FaIcon from "react-native-vector-icons/FontAwesome5";
import ImageHeader from "./ImageHeader";
import { SwipeListView } from 'react-native-swipe-list-view';

function SessionCard(props) {
  return (
    <View style={sessionCardStyles.card}>
      <View>
        <Text style={sessionCardStyles.firstLineText}>{props.textFirstLine}</Text>
      </View>

      <View style={sessionCardStyles.secondLine}>
        <View style={sessionCardStyles.iconTextPair}>
          <FaIcon name="stopwatch" style={sessionCardStyles.icon} />
          <Text style={sessionCardStyles.secondLineText}>{props.activeTime}</Text>
        </View>
        <View style={sessionCardStyles.iconTextPair}>
          <EntypoIcon name="ruler" style={sessionCardStyles.icon} />
          <Text style={sessionCardStyles.secondLineText}>{props.momentum}</Text>
        </View>
        <View style={sessionCardStyles.iconTextPair}>
          <AntDesignIcon name="retweet" style={sessionCardStyles.icon} />
          <Text style={sessionCardStyles.secondLineText}>{props.laps}</Text>
        </View>
      </View>
    </View>
  )
}

function SessionCardBehindSwipe(props) {
  return (
    <View style={sessionCardStyles.rowBack}>
      <TouchableOpacity
        style={sessionCardStyles.deleteButton}
        onPress={() => deleteRow(rowMap, data.item.key)}
      >
        <Text style={{ fontSize: 18, color: "white" }}>Löschen</Text>
      </TouchableOpacity>
    </View>
  );
}

const sessionCardStyles = StyleSheet.create({
  card: {
    backgroundColor: "#559ac8",
    borderRadius: 12,
    height: 100,
    maxHeight: 100,
    flex: 1,
    flexDirection: "column",
    justifyContent: "space-around",
    padding: 10,
    margin: 10,
    paddingLeft: 20,
  },
  firstLineText: {
    color: "white",
    fontSize: 22
  },
  iconTextPair: {
    maxWidth: 100,
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
  },
  secondLine: {
    flex: 1,
    justifyContent: "space-between",
    alignContent: "center",
    flexDirection: "row",
    maxHeight: 30,
    marginTop: 14,
  },
  icon: {
    fontSize: 30,
    color: "white",
    paddingRight: 10,
  },
  secondLineText: {
    color: "white",
    fontSize: 18,
  },
  spacerHidden: {
    flex: 1,
    color: "black",
  },
  rowBack: {
    alignItems: 'center',
    backgroundColor: themeColors['ALIZARIN'],
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: 100,
    padding: 10,
    margin: 10,
    paddingLeft: 20,
    borderRadius: 12,
  },
  deleteButton: {
    alignItems: 'center',
    bottom: 0,
    justifyContent: 'center',
    position: 'absolute',
    backgroundColor: themeColors['ALIZARIN'],
    top: 0,
    width: 150,
    right: 0,
    borderTopRightRadius: 12,
    borderBottomRightRadius: 12,
  },
})

// ---------------------------------------------------------------------------------------------


function LastSessionsView(props) {
  const data = [
    {
      textFirstLine: "Gestern 19:12 Uhr",
      laps: "31",
      activeTime: "26:13",
      laps: "35",
      momentum: "120",
    },
    {
      textFirstLine: "Montag 18:10 Uhr",
      laps: "27",
      activeTime: "26:13",
      laps: "35",
      momentum: "120",
    },
  ]

  const renderHiddenItem = (data, rowMap) => (
    <SessionCardBehindSwipe />
  );

  return (
    <View style={{ flex: 1 }}>
      <StatusBar hidden={true} />
      <View style={{ flex: 1 }}>
        <ImageHeader
          text="LETZTE SESSIONS"
          navigation={props.navigation}
          image={require("../assets/swimmer.jpg")}
        />
        <View style={{ flex: 1, backgroundColor: themeColors["BELIZE HOLE"] }}>
          <SwipeListView
            style={{ width: "100%" }}
            disableRightSwipe="true"
            data={data}
            renderItem={(data, rowMap) => (
              <SessionCard
                textFirstLine={data.item.textFirstLine}
                laps={data.item.laps}
                momentum={data.item.momentum}
                activeTime={data.item.activeTime}
                laps={data.item.laps} />
            )}
            renderHiddenItem={renderHiddenItem}
            leftOpenValue={0}
            rightOpenValue={-120}
            stopRightSwipe={-145}
          />
        </View>
      </View>
    </View>
  )
}

export default LastSessionsView;