184 lines
3.9 KiB
TypeScript
184 lines
3.9 KiB
TypeScript
import { FC, useRef, useState, useCallback, useEffect } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
ScrollView,
|
|
useWindowDimensions,
|
|
Vibration,
|
|
} from "react-native";
|
|
import { ExGridViewItem } from "./ExGridViewItem";
|
|
import Animated, {
|
|
useAnimatedStyle,
|
|
useSharedValue,
|
|
runOnJS,
|
|
useAnimatedScrollHandler,
|
|
withTiming,
|
|
Easing,
|
|
FadeIn,
|
|
FadeOut,
|
|
BounceInUp,
|
|
FadeInUp,
|
|
FadeOutUp,
|
|
} from "react-native-reanimated";
|
|
import { Gesture, GestureDetector } from "react-native-gesture-handler";
|
|
import { ExGridViewTimePositionItem } from "./ExGridViewTimePositionItem";
|
|
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
|
|
import { logger } from "@/utils/logger";
|
|
import dayjs from "dayjs";
|
|
import { ExGridSimpleViewItem } from "./ExGridSimpleViewItem";
|
|
type hoge = {
|
|
trainNumber: string;
|
|
array: string;
|
|
name: string;
|
|
timeType: string;
|
|
time: string;
|
|
}[];
|
|
export const ExGridSimpleView: FC<{
|
|
data: hoge;
|
|
showLastStop: boolean;
|
|
}> = ({ data, showLastStop }) => {
|
|
const groupedData: {
|
|
[d: number]: {
|
|
trainNumber: string;
|
|
array: string;
|
|
name: string;
|
|
timeType: string;
|
|
time: string;
|
|
isOperating: boolean;
|
|
}[];
|
|
} = {
|
|
"4": [],
|
|
"5": [],
|
|
"6": [],
|
|
"7": [],
|
|
"8": [],
|
|
"9": [],
|
|
"10": [],
|
|
"11": [],
|
|
"12": [],
|
|
"13": [],
|
|
"14": [],
|
|
"15": [],
|
|
"16": [],
|
|
"17": [],
|
|
"18": [],
|
|
"19": [],
|
|
"20": [],
|
|
"21": [],
|
|
"22": [],
|
|
"23": [],
|
|
"0": [],
|
|
"1": [],
|
|
"2": [],
|
|
"3": [],
|
|
};
|
|
const groupKeys = [
|
|
"4",
|
|
"5",
|
|
"6",
|
|
"7",
|
|
"8",
|
|
"9",
|
|
"10",
|
|
"11",
|
|
"12",
|
|
"13",
|
|
"14",
|
|
"15",
|
|
"16",
|
|
"17",
|
|
"18",
|
|
"19",
|
|
"20",
|
|
"21",
|
|
"22",
|
|
"23",
|
|
"0",
|
|
"1",
|
|
"2",
|
|
"3",
|
|
];
|
|
|
|
const { currentTrain } = useCurrentTrain();
|
|
data.forEach((item) => {
|
|
let isOperating = false;
|
|
let [hour, minute] = dayjs()
|
|
.hour(parseInt(item.time.split(":")[0]))
|
|
.minute(parseInt(item.time.split(":")[1]))
|
|
.format("H:m")
|
|
.split(":");
|
|
if (currentTrain.findIndex((x) => x.num == item.trainNumber) != -1) {
|
|
const currentTrainTime = currentTrain.find(
|
|
(x) => x.num == item.trainNumber
|
|
)?.delay;
|
|
if (currentTrainTime != "入線") {
|
|
[hour, minute] = dayjs()
|
|
.hour(parseInt(hour))
|
|
.minute(parseInt(minute))
|
|
.add(currentTrainTime, "minute")
|
|
.format("H:m")
|
|
.split(":");
|
|
}
|
|
isOperating = true;
|
|
}
|
|
groupedData[hour].push({ ...item, time: `${hour}:${minute}`, isOperating });
|
|
});
|
|
|
|
// 時ヘッダーを横にスクロールしたときの処理
|
|
const scrollX = useSharedValue(0);
|
|
const stickyTextStyle = useAnimatedStyle(() => ({
|
|
transform: [{ translateX: scrollX.value }],
|
|
}));
|
|
return (
|
|
<ScrollView
|
|
stickyHeaderIndices={
|
|
groupKeys.at(0) ? groupKeys.map((_, i) => i * 2) : []
|
|
}
|
|
style={{ backgroundColor: "#fff" }}
|
|
>
|
|
{groupKeys.map((hour) => [
|
|
<View
|
|
style={{
|
|
padding: 5,
|
|
borderBottomWidth: 0.5,
|
|
borderTopWidth: 0.5,
|
|
borderBottomColor: "#ccc",
|
|
backgroundColor: "#f0f0f0",
|
|
}}
|
|
key={hour}
|
|
>
|
|
<Animated.Text
|
|
style={[
|
|
{
|
|
fontSize: 15,
|
|
zIndex: 1,
|
|
marginLeft: 0,
|
|
},
|
|
stickyTextStyle,
|
|
]}
|
|
>
|
|
{hour}時台
|
|
</Animated.Text>
|
|
</View>,
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
position: "relative",
|
|
flexWrap: "wrap",
|
|
}}
|
|
>
|
|
{groupedData[hour].map((d, i, array) => (
|
|
<ExGridSimpleViewItem
|
|
key={d.trainNumber + i}
|
|
d={d}
|
|
index={i}
|
|
array={array}
|
|
showLastStop={showLastStop}
|
|
/>
|
|
))}
|
|
</View>,
|
|
])}
|
|
</ScrollView>
|
|
);
|
|
};
|