jrshikoku/components/AllTrainDiagramView.js

import React, { useState, useEffect } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  FlatList,
  KeyboardAvoidingView,
  TextInput,
  Platform,
  Keyboard,
} from "react-native";
import { useAllTrainDiagram } from "../stateBox/useAllTrainDiagram";

import { customTrainDataDetector } from "./custom-train-data";
import { getStationList } from "../lib/getStationList";
import { getTrainType } from "../lib/getTrainType";
import { SheetManager } from "react-native-actions-sheet";
import { useNavigation } from "@react-navigation/native";
export default function AllTrainDiagramView() {
  const { navigate } = useNavigation();
  const { allTrainDiagram } = useAllTrainDiagram();
  const [originalStationList, setOriginalStationList] = useState(); // 第一要素
  const [keyList, setKeyList] = useState(); // 第二要素
  useEffect(() => getStationList().then(setOriginalStationList), []);
  useEffect(
    () => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)),
    []
  );
  const [input, setInput] = useState(""); // 文字入力
  const [keyBoardVisible, setKeyBoardVisible] = useState(false);

  useEffect(() => {
    const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
      setKeyBoardVisible(true);
    });
    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
      setKeyBoardVisible(false);
    });

    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, []);

  const openTrainInfo = (d) => {
    const train = customTrainDataDetector(d);
    let TrainNumber = "";
    if (train.trainNumDistance != undefined) {
      const timeInfo =
        parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance;
      TrainNumber = timeInfo + "号";
    }
    const payload = {
      data: {
        trainNum: d,
        limited: `${getTrainType(train.type).data}:${
          train.trainName
        }${TrainNumber}`,
      },
      navigate,
      originalStationList,
      from: "AllTrainDiagramView",
    };
    SheetManager.show("EachTrainInfo", {
      payload,
    });
  };
  return (
    <View style={{ backgroundColor: "#0099CC", height: "100%" }}>
      <FlatList
        style={{ flex: 1 }}
        data={keyList?.filter((d) => d.includes(input))}
        renderItem={({ item }) => (
          <Item openTrainInfo={openTrainInfo} id={item} />
        )}
        keyExtractor={(item) => item}
        initialNumToRender={100}
      />
      <KeyboardAvoidingView
        behavior="padding"
        keyboardVerticalOffset={80}
        enabled={Platform.OS === "ios"}
      >
        <View
          style={{
            height: 35,
            margin: 5,
            alignItems: "center",
            backgroundColor: "#F4F4F4",
            flexDirection: "row",
            paddingLeft: 10,
            paddingRight: 10,
            borderRadius: 25,
            borderColor: "#F4F4F4",
          }}
        >
          <TextInput
            placeholder="列番を入力してフィルタリングします。"
            onFocus={() => {
              setKeyBoardVisible(true);
            }}
            onEndEditing={() => {}}
            onChange={(ret) => {
              setInput(ret.nativeEvent.text);
            }}
            value={input}
            style={{ flex: 1 }}
          />
        </View>
      </KeyboardAvoidingView>

      <TouchableOpacity
        style={{
          padding: 10,
          flexDirection: "row",
          borderColor: "white",
          borderWidth: 1,
          margin: 10,
          borderRadius: 5,
          alignItems: "center",
          display:
            Platform.OS === "ios" ? "flex" : keyBoardVisible ? "none" : "flex",
        }}
        onPress={() => navigate("menu")}
      >
        <View style={{ flex: 1 }} />
        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
          閉じる
        </Text>
        <View style={{ flex: 1 }} />
      </TouchableOpacity>
    </View>
  );
}
const Item = ({ id, openTrainInfo }) => {
  return (
    <TouchableOpacity
      style={{
        padding: 5,
        flexDirection: "row",
        borderColor: "white",
        borderWidth: 1,
        margin: 5,
        borderRadius: 5,
        alignItems: "center",
      }}
      onPress={() => openTrainInfo(id)}
    >
      <View style={{ flex: 1 }} />
      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
        {id}
      </Text>
      <View style={{ flex: 1 }} />
    </TouchableOpacity>
  );
};