From e5c80d713ec607dccab1ceda4f6b1b55599f9b88 Mon Sep 17 00:00:00 2001
From: harukin-expo-dev-env <harukin@haruk.in>
Date: Tue, 2 Apr 2024 11:51:39 +0000
Subject: [PATCH] =?UTF-8?q?favoriteListItem=E3=81=AE=E3=81=8A=E6=B0=97?=
 =?UTF-8?q?=E3=81=AB=E5=85=A5=E3=82=8A=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/FavoriteList.js          | 20 +++-----
 components/atom/FavoriteListItem.js | 72 +++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+), 13 deletions(-)
 create mode 100644 components/atom/FavoriteListItem.js

diff --git a/components/FavoriteList.js b/components/FavoriteList.js
index b355dbc..1d1a054 100644
--- a/components/FavoriteList.js
+++ b/components/FavoriteList.js
@@ -1,10 +1,11 @@
 import React from "react";
 import { View, Text, TouchableOpacity, ScrollView } from "react-native";
-import { ListItem } from "native-base";
+
 import Icon from "react-native-vector-icons/Entypo";
 import { useFavoriteStation } from "../stateBox/useFavoriteStation";
 import { useCurrentTrain } from "../stateBox/useCurrentTrain";
 import { useNavigation } from "@react-navigation/native";
+import { FavoriteListItem } from "./atom/FavoriteListItem";
 export default function FavoriteList({ stationData }) {
   const { favoriteStation } = useFavoriteStation();
   const { webview } = useCurrentTrain();
@@ -15,7 +16,7 @@ export default function FavoriteList({ stationData }) {
       <Text
         style={{
           textAlign: "center",
-          fontSize: 25,
+          fontSize: 20,
           color: "white",
           fontWeight: "bold",
           paddingVertical: 10,
@@ -28,7 +29,8 @@ export default function FavoriteList({ stationData }) {
           .filter((d) => d[0].StationMap)
           .map((currentStation) => {
             return (
-              <ListItem
+              <FavoriteListItem
+                currentStation={currentStation}
                 onPress={() => {
                   const getStationLine = (now) => {
                     const returnData = Object.keys(stationData).filter((d) => {
@@ -48,28 +50,20 @@ export default function FavoriteList({ stationData }) {
                   navigate("Apps");
                 }}
               >
-                <Text style={{ fontSize: 20, flex: 2 }}>
-                  {currentStation
-                    .map((d) => d.StationNumber)
-                    .filter((d) => d !== null)
-                    .join("/")}
-                </Text>
-                <Text style={{ fontSize: 20, flex: 3 }}>
-                  {currentStation[0].Station_JP}
-                </Text>
                 <View
                   style={{
                     flex: 2,
                     flexDirection: "row",
                     alignContent: "center",
                     alignItems: "center",
+                    marginVertical: 4,
                   }}
                 >
                   <View style={{ flex: 1 }} />
                   <Text style={{ fontSize: 20 }}>移動する</Text>
                   <Icon name="chevron-right" size={20} />
                 </View>
-              </ListItem>
+              </FavoriteListItem>
             );
           })}
       </ScrollView>
diff --git a/components/atom/FavoriteListItem.js b/components/atom/FavoriteListItem.js
new file mode 100644
index 0000000..2d9aaa9
--- /dev/null
+++ b/components/atom/FavoriteListItem.js
@@ -0,0 +1,72 @@
+import React from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import lineColorList from "../../assets/originData/lineColorList";
+
+export const FavoriteListItem = ({ currentStation, children, onPress }) => {
+  const lineIDs = [];
+  const EachIDs = [];
+  currentStation.forEach((d) => {
+    if (!d.StationNumber) return;
+    const textArray = d.StationNumber.split("");
+    lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join(""));
+    EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join(""));
+  });
+
+  return (
+    <TouchableOpacity
+      style={{ flexDirection: "row", backgroundColor: "white" }}
+      onPress={onPress}
+    >
+      <View
+        style={{
+          width: 35,
+          position: "relative",
+          marginHorizontal: 15,
+          flexDirection: "row",
+          height: "101%",
+        }}
+      >
+        {lineIDs.map((lineID, index) => (
+          <View
+            style={{
+              backgroundColor: lineColorList[lineID],
+              flex: 1,
+            }}
+            key={lineID}
+          >
+            <View style={{ flex: 1 }} />
+            <Text
+              style={{
+                color: "white",
+                textAlign: "center",
+                fontSize: 12,
+                fontWeight: "bold",
+              }}
+            >
+              {lineIDs[index]}
+              {"\n"}
+              {EachIDs[index]}
+            </Text>
+            <View style={{ flex: 1 }} />
+          </View>
+        ))}
+      </View>
+
+      <View
+        style={{
+          padding: 8,
+          flexDirection: "row",
+          borderBottomWidth: 1,
+          borderBottomColor: "#f0f0f0",
+          flex: 1,
+          alignContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Text style={{ fontSize: 20 }}>{currentStation[0].Station_JP}</Text>
+        <View style={{ flex: 1 }} />
+        {children}
+      </View>
+    </TouchableOpacity>
+  );
+};