Files
jrshikoku/components/AndroidWidget/InfoWidget.tsx

108 lines
2.8 KiB
TypeScript

import React from "react";
import {
FlexWidget,
TextWidget,
ListWidget,
} from "react-native-android-widget";
import dayjs from "dayjs";
import { WidgetColors, widgetLightColors } from "./widget-theme";
import { API_ENDPOINTS } from "@/constants";
import type { OperationInfoSnapshot } from "@/types";
export const getInfoString = async () => {
const time = dayjs().format("HH:mm");
const response = await fetch(API_ENDPOINTS.OPERATION_INFO, {
cache: "no-store",
});
if (!response.ok) {
throw new Error(
`Operation information request failed: ${response.status}`
);
}
const snapshot = (await response.json()) as OperationInfoSnapshot;
const operationInfoText = snapshot.compatibility?.operationInfoText ?? "";
const text = operationInfoText === "" ? null : operationInfoText.split("^");
return { time, text };
};
export function InfoWidget({ time, text, colors = widgetLightColors }: { time: string; text: string[] | string | null; colors?: WidgetColors }) {
return (
<FlexWidget
style={{
height: "match_parent",
width: "match_parent",
justifyContent: "center",
alignItems: "center",
backgroundColor: colors.background,
borderRadius: 16,
}}
clickAction="OPEN_URI"
clickActionData={{ uri: "jrshikoku://open/operation" }}
>
<FlexWidget
style={{
justifyContent: "center",
alignItems: "center",
backgroundColor: colors.headerBg,
width: "100%" as any,
flexDirection: "row",
paddingTop: 10,
paddingBottom: 10,
}}
>
<TextWidget
text={"列車運行情報"}
style={{
fontSize: 30,
fontWeight: "bold",
fontFamily: "Inter",
color: colors.headerText,
textAlign: "left",
marginLeft: 10,
}}
/>
<FlexWidget style={{ flex: 1 }} />
<TextWidget
text={time}
style={{
fontSize: 30,
fontFamily: "Inter",
color: colors.headerText,
textAlign: "right",
marginRight: 10,
}}
/>
</FlexWidget>
<ListWidget
style={{
flex: 1,
backgroundColor: colors.background,
width: "match_parent",
height: "match_parent",
padding: 10,
} as any}
>
{text ? (
<TextWidget
style={{
color: colors.text,
fontSize: 20,
}}
text={Array.isArray(text) ? text.join("\n") : text}
/>
) : (
<TextWidget
style={{
color: colors.text,
fontSize: 20,
}}
text="通常運行中です。"
/>
)}
</ListWidget>
</FlexWidget>
);
}