ca57ebda85
The attach sheet's autopilot now offers "Until a time" with the native time picker from Expo UI: Android's clock dialog, an iOS wheel in a sheet with Start. The home list opens with the autopilots that run, wait or ended within a day, as Today does on web, and each row opens its thread. The attach and until menus move to the shared action sheet, so Android pages them instead of dropping buttons past three. Claude-Session: https://claude.ai/code/session_01UmSCnoCgXqBp2fU3vwz4o1 Co-authored-by: Claude <noreply@anthropic.com>
72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import { DateTimePicker } from "@expo/ui/community/datetime-picker";
|
|
import { useState } from "react";
|
|
import { Modal, Platform, Pressable, Text, View } from "react-native";
|
|
import { autopilotTimeOfDay } from "../lib/autopilot";
|
|
import { useI18n } from "../lib/i18n";
|
|
import { useMobileTokens, useResolvedAppearance } from "../lib/native";
|
|
|
|
/**
|
|
* The native time picker for "Until a time". Android opens its clock dialog; iOS shows the wheel in
|
|
* a sheet with Start. Either way the caller gets "HH:MM" and unmounts the picker.
|
|
*/
|
|
export function AutopilotTimePicker({
|
|
onPick,
|
|
onClose,
|
|
}: {
|
|
onPick: (time: string) => void;
|
|
onClose: () => void;
|
|
}) {
|
|
const tokens = useMobileTokens();
|
|
const colorScheme = useResolvedAppearance();
|
|
const { t } = useI18n();
|
|
const [value, setValue] = useState(() => {
|
|
const morning = new Date();
|
|
morning.setHours(8, 0, 0, 0);
|
|
return morning;
|
|
});
|
|
|
|
if (Platform.OS === "android") {
|
|
return (
|
|
<DateTimePicker
|
|
mode="time"
|
|
value={value}
|
|
onValueChange={(_event, date) => onPick(autopilotTimeOfDay(date))}
|
|
onDismiss={onClose}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Modal visible animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
|
|
<View style={{ flex: 1, backgroundColor: tokens.background, padding: 20, gap: 12 }}>
|
|
<View
|
|
style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}
|
|
>
|
|
<Pressable accessibilityRole="button" onPress={onClose} hitSlop={12}>
|
|
<Text style={{ color: tokens.mutedForeground, fontSize: 17 }}>{t("Cancel")}</Text>
|
|
</Pressable>
|
|
<Text style={{ color: tokens.foreground, fontSize: 17, fontWeight: "600" }}>
|
|
{t("Until when?")}
|
|
</Text>
|
|
<Pressable
|
|
accessibilityRole="button"
|
|
onPress={() => onPick(autopilotTimeOfDay(value))}
|
|
hitSlop={12}
|
|
>
|
|
<Text style={{ color: tokens.foreground, fontSize: 17, fontWeight: "600" }}>
|
|
{t("Start")}
|
|
</Text>
|
|
</Pressable>
|
|
</View>
|
|
<DateTimePicker
|
|
mode="time"
|
|
display="spinner"
|
|
value={value}
|
|
themeVariant={colorScheme}
|
|
onValueChange={(_event, date) => setValue(date)}
|
|
/>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
}
|