133 lines
4.3 KiB
TypeScript
133 lines
4.3 KiB
TypeScript
import React from "react";
|
|
import {
|
|
View,
|
|
Platform,
|
|
useWindowDimensions,
|
|
StatusBar,
|
|
useColorScheme,
|
|
} from "react-native";
|
|
import * as Updates from "expo-updates";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { LinearGradient } from "expo-linear-gradient";
|
|
|
|
import lineColorList from "../assets/originData/lineColorList";
|
|
import { lineList, stationIDPair } from "../lib/getStationList";
|
|
import { useCurrentTrain } from "../stateBox/useCurrentTrain";
|
|
import { useDeviceOrientationChange } from "../stateBox/useDeviceOrientationChange";
|
|
import { SheetManager } from "react-native-actions-sheet";
|
|
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import { useTrainMenu } from "../stateBox/useTrainMenu";
|
|
import { AppsWebView } from "./Apps/WebView";
|
|
import { NewMenu } from "./Apps/NewMenu";
|
|
import { MapsButton } from "./Apps/MapsButton";
|
|
import { ReloadButton } from "./Apps/ReloadButton";
|
|
import { useStationList } from "../stateBox/useStationList";
|
|
import { FixedPositionBox } from "./Apps/FixedPositionBox";
|
|
|
|
export default function Apps() {
|
|
const { webview, fixedPosition, setFixedPosition } = useCurrentTrain();
|
|
const { height, width } = useWindowDimensions();
|
|
const { navigate } = useNavigation<any>();
|
|
const { isLandscape } = useDeviceOrientationChange();
|
|
const { top } = useSafeAreaInsets();
|
|
const handleLayout = () => {};
|
|
const { originalStationList } = useStationList();
|
|
const { mapSwitch, trainInfo, setTrainInfo, selectedLine } = useTrainMenu();
|
|
const isDark = useColorScheme() === "dark";
|
|
|
|
const lineColor = selectedLine && stationIDPair[selectedLine]
|
|
? lineColorList[stationIDPair[selectedLine]]
|
|
: null;
|
|
|
|
// 路線色の両端を暗くしたグラデーション用カラー
|
|
const darkenHex = (hex: string, factor: number) => {
|
|
const h = hex.replace("#", "");
|
|
const r = Math.round(parseInt(h.slice(0, 2), 16) * factor);
|
|
const g = Math.round(parseInt(h.slice(2, 4), 16) * factor);
|
|
const b = Math.round(parseInt(h.slice(4, 6), 16) * factor);
|
|
return `#${[r, g, b].map((v) => Math.min(255, v).toString(16).padStart(2, "0")).join("")}`;
|
|
};
|
|
const lineColorDark = lineColor ? darkenHex(lineColor, 0.55) : null;
|
|
|
|
const openStationACFromEachTrainInfo = async (stationName) => {
|
|
await SheetManager.hide("EachTrainInfo");
|
|
const findStationEachLine = (selectLine) => {
|
|
let NearStation = selectLine.filter((d) => d.Station_JP == stationName);
|
|
return NearStation;
|
|
};
|
|
let returnDataBase = lineList
|
|
.map((d) => findStationEachLine(originalStationList[d]))
|
|
.filter((d) => d.length > 0)
|
|
.reduce((pre, current) => {
|
|
pre.push(...current);
|
|
return pre;
|
|
}, []);
|
|
if (returnDataBase.length) {
|
|
const payload = {
|
|
currentStation: returnDataBase,
|
|
navigate,
|
|
goTo: "Apps",
|
|
useShow: () => {
|
|
SheetManager.show("StationDetailView", { payload });
|
|
},
|
|
onExit: () => SheetManager.hide("StationDetailView"),
|
|
};
|
|
setTimeout(() => {
|
|
SheetManager.show("StationDetailView", { payload });
|
|
}, 50);
|
|
} else {
|
|
SheetManager.hide("StationDetailView");
|
|
}
|
|
};
|
|
const bgColor = isDark ? "#1c1c1e" : "#ffffff";
|
|
return (
|
|
<View style={{ flex: 1, backgroundColor: bgColor }}>
|
|
{lineColor && lineColorDark && (
|
|
<LinearGradient
|
|
colors={[lineColorDark, lineColor]}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 0, y: 1 }}
|
|
style={{ position: "absolute", top: 0, left: 0, right: 0, height: top }}
|
|
/>
|
|
)}
|
|
{lineColor && (
|
|
<StatusBar
|
|
barStyle="light-content"
|
|
/>
|
|
)}
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
paddingTop: top,
|
|
flexDirection: isLandscape ? "row" : "column",
|
|
}}
|
|
onLayout={handleLayout}
|
|
>
|
|
<AppsWebView
|
|
{...{
|
|
openStationACFromEachTrainInfo,
|
|
}}
|
|
/>
|
|
|
|
<MapsButton
|
|
onPress={() => {
|
|
navigate("trainMenu", { webview });
|
|
}}
|
|
/>
|
|
|
|
{fixedPosition.type && <FixedPositionBox />}
|
|
|
|
{mapSwitch == "true" ? (
|
|
<ReloadButton
|
|
onPress={() => Updates.reloadAsync()}
|
|
right={isLandscape && trainInfo.trainNum ? (width / 100) * 40 : 0}
|
|
/>
|
|
) : (
|
|
<NewMenu />
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|