44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import { FC } from "react";
|
|
import { ListViewItem } from "@/components/StationDiagram/ListViewItem";
|
|
import { View, Text, ScrollView } from "react-native";
|
|
type hoge = {
|
|
trainNumber: string;
|
|
array: string;
|
|
name: string;
|
|
timeType: string;
|
|
time: string;
|
|
};
|
|
export const ListView: FC<{
|
|
data: hoge[];
|
|
}> = ({ data }) => {
|
|
const groupedData: Record<string, hoge[]> = {};
|
|
const groupKeys = [];
|
|
data.forEach((item) => {
|
|
const hour = item.time.split(":")[0];
|
|
if (!groupedData[hour]) {
|
|
groupedData[hour] = [];
|
|
groupKeys.push(hour);
|
|
}
|
|
groupedData[hour].push(item);
|
|
});
|
|
return (
|
|
<ScrollView
|
|
style={{ backgroundColor: "white" }}
|
|
stickyHeaderIndices={
|
|
groupKeys.at(0) ? groupKeys.map((_, i) => i * 2) : []
|
|
}
|
|
>
|
|
{groupKeys.map((hour) => [
|
|
<View style={{ backgroundColor: "white", padding: 5, borderBottomWidth: 0.5, borderTopWidth: 0.5, borderBottomColor: "#ccc" }} key={hour}>
|
|
<Text style={{ fontSize: 15 }}>{hour}時台</Text>
|
|
</View>,
|
|
<View>
|
|
{groupedData[hour].map((d, i) => (
|
|
<ListViewItem key={d.trainNumber + i} d={d} />
|
|
))}
|
|
</View>,
|
|
])}
|
|
</ScrollView>
|
|
);
|
|
};
|