Files
jrshikoku/components/ActionSheetComponents/EachTrainInfo/DataConnectedButton.tsx
harukin-expo-dev-env 5420531c64 feat: Samsung DeXレスポンシブ対応 - lib/responsive.ts追加、主要コンポーネントにスケーリング適用
- useResponsive()フックを作成(fontScale/verticalScale/moderateScale)
- ベースデザイン: iPhone 14 Pro (393x852)、スケールダウンのみ(最大1.0)
- DynamicHeaderScrollView: ヘッダー高さにverticalScale適用
- EachTrainInfoCore: maxHeight緩和(70→80%)、ハンドラーサイズスケーリング
- StateBox/PositionBox/ScrollStickyContent/HeaderText: fontScale適用
- DataConnectedButton/EachStopList: fontScale+moderateScale適用
- JRSTraInfo/StationDeteilView: ハンドラー+フォントスケーリング
- ReloadButton/MapsButton/NewMenu: ボタンサイズ+フォントスケーリング
- useDeviceOrientationChange: 全Android端末でisLandscape=false
2026-03-29 15:23:28 +00:00

69 lines
2.2 KiB
TypeScript

import React, { FC } from "react";
import { View, Text, TouchableWithoutFeedback, Alert } from "react-native";
import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
import { useThemeColors } from "@/lib/theme";
import { useResponsive } from "@/lib/responsive";
export const DataConnectedButton: FC<{
i: string;
openTrainInfo: (trainNum: string) => void;
}> = ({ i, openTrainInfo }) => {
const [station, se, time] = i.split(",");
const { keyList } = useAllTrainDiagram();
const { colors } = useThemeColors();
const { fontScale, moderateScale } = useResponsive();
// 列番が有効かどうかをチェックする関数
const isValidTrainNumber = (trainNum: string): boolean => {
return keyList.includes(trainNum);
};
return (
<TouchableWithoutFeedback
onPress={() => {
// timeの文字列が列番として有効かを検証する
if (!isValidTrainNumber(time)) {
Alert.alert(
"列番が見つかりません",
`列番「${time}」は時刻表に存在しません。`,
[{ text: "OK" }]
);
return;
}
openTrainInfo(time);
}}
key={station + time}
>
<View style={{ flexDirection: "row", backgroundColor: colors.backgroundTertiary }}>
<View
style={{
padding: 8,
flexDirection: "row",
borderBottomWidth: 1,
borderBottomColor: colors.borderLight,
flex: 1,
}}
>
<View
style={{
width: moderateScale(35),
position: "relative",
marginHorizontal: 15,
flexDirection: "row",
height: "10%",
}}
/>
<Text style={{ fontSize: fontScale(16), fontFamily: "DiaPro", color: colors.text }}>
{se === "増" ? "⬐" : "↳"}
</Text>
<Text style={{ fontSize: fontScale(20), color: colors.textLink }}>{time}</Text>
<View style={{ flex: 1 }} />
<Text style={{ fontSize: fontScale(18), width: moderateScale(50), color: colors.text }}>
{se === "増" ? "増結" : "解結"}
</Text>
</View>
</View>
</TouchableWithoutFeedback>
);
};