goal creation style fix
This commit is contained in:
parent
b1439f059a
commit
a5f761062e
Binary file not shown.
@ -1,426 +1,526 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
Modal,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
ScrollView,
|
||||
Platform,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import DateTimePicker from '@react-native-community/datetimepicker';
|
||||
import type { CreateGoalData } from '../services/fitnessGoals';
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
Modal,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
ScrollView,
|
||||
Platform,
|
||||
Alert,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import DateTimePicker from "@react-native-community/datetimepicker";
|
||||
import type { CreateGoalData } from "../services/fitnessGoals";
|
||||
import { useTheme } from "../contexts/ThemeContext";
|
||||
import { MinimalButton } from "./MinimalButton";
|
||||
|
||||
interface GoalCreationModalProps {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (goalData: CreateGoalData) => Promise<void>;
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (goalData: CreateGoalData) => Promise<void>;
|
||||
}
|
||||
|
||||
const GOAL_TYPES = [
|
||||
{ value: 'weight_target', label: 'Weight Target' },
|
||||
{ value: 'strength_milestone', label: 'Strength Milestone' },
|
||||
{ value: 'endurance_target', label: 'Endurance Target' },
|
||||
{ value: 'flexibility_goal', label: 'Flexibility Goal' },
|
||||
{ value: 'habit_building', label: 'Habit Building' },
|
||||
{ value: 'custom', label: 'Custom Goal' },
|
||||
{ value: "weight_target", label: "Weight Target" },
|
||||
{ value: "strength_milestone", label: "Strength Milestone" },
|
||||
{ value: "endurance_target", label: "Endurance Target" },
|
||||
{ value: "flexibility_goal", label: "Flexibility Goal" },
|
||||
{ value: "habit_building", label: "Habit Building" },
|
||||
{ value: "custom", label: "Custom Goal" },
|
||||
] as const;
|
||||
|
||||
const PRIORITIES = [
|
||||
{ value: 'low', label: 'Low', color: '#10b981' },
|
||||
{ value: 'medium', label: 'Medium', color: '#f59e0b' },
|
||||
{ value: 'high', label: 'High', color: '#ef4444' },
|
||||
{ value: "low", label: "Low" },
|
||||
{ value: "medium", label: "Medium" },
|
||||
{ value: "high", label: "High" },
|
||||
] as const;
|
||||
|
||||
export function GoalCreationModal({ visible, onClose, onSubmit }: GoalCreationModalProps) {
|
||||
const [goalType, setGoalType] = useState<CreateGoalData['goalType']>('weight_target');
|
||||
const [title, setTitle] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [targetValue, setTargetValue] = useState('');
|
||||
const [currentValue, setCurrentValue] = useState('');
|
||||
const [unit, setUnit] = useState('');
|
||||
const [priority, setPriority] = useState<'low' | 'medium' | 'high'>('medium');
|
||||
const [targetDate, setTargetDate] = useState<Date | undefined>();
|
||||
const [showDatePicker, setShowDatePicker] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
export function GoalCreationModal({
|
||||
visible,
|
||||
onClose,
|
||||
onSubmit,
|
||||
}: GoalCreationModalProps) {
|
||||
const { colors, typography } = useTheme();
|
||||
const [goalType, setGoalType] =
|
||||
useState<CreateGoalData["goalType"]>("weight_target");
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [targetValue, setTargetValue] = useState("");
|
||||
const [currentValue, setCurrentValue] = useState("");
|
||||
const [unit, setUnit] = useState("");
|
||||
const [priority, setPriority] = useState<"low" | "medium" | "high">("medium");
|
||||
const [targetDate, setTargetDate] = useState<Date | undefined>();
|
||||
const [showDatePicker, setShowDatePicker] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const resetForm = () => {
|
||||
setGoalType('weight_target');
|
||||
setTitle('');
|
||||
setDescription('');
|
||||
setTargetValue('');
|
||||
setCurrentValue('');
|
||||
setUnit('');
|
||||
setPriority('medium');
|
||||
setTargetDate(undefined);
|
||||
};
|
||||
const resetForm = () => {
|
||||
setGoalType("weight_target");
|
||||
setTitle("");
|
||||
setDescription("");
|
||||
setTargetValue("");
|
||||
setCurrentValue("");
|
||||
setUnit("");
|
||||
setPriority("medium");
|
||||
setTargetDate(undefined);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!title.trim()) {
|
||||
Alert.alert('Error', 'Please enter a goal title');
|
||||
return;
|
||||
}
|
||||
const handleSubmit = async () => {
|
||||
if (!title.trim()) {
|
||||
Alert.alert("Error", "Please enter a goal title");
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const goalData: CreateGoalData = {
|
||||
goalType,
|
||||
title: title.trim(),
|
||||
description: description.trim() || undefined,
|
||||
targetValue: targetValue ? parseFloat(targetValue) : undefined,
|
||||
currentValue: currentValue ? parseFloat(currentValue) : undefined,
|
||||
unit: unit.trim() || undefined,
|
||||
targetDate: targetDate?.toISOString(),
|
||||
priority,
|
||||
};
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const goalData: CreateGoalData = {
|
||||
goalType,
|
||||
title: title.trim(),
|
||||
description: description.trim() || undefined,
|
||||
targetValue: targetValue ? parseFloat(targetValue) : undefined,
|
||||
currentValue: currentValue ? parseFloat(currentValue) : undefined,
|
||||
unit: unit.trim() || undefined,
|
||||
targetDate: targetDate?.toISOString(),
|
||||
priority,
|
||||
};
|
||||
|
||||
await onSubmit(goalData);
|
||||
resetForm();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Error creating goal:', error);
|
||||
Alert.alert('Error', 'Failed to create goal. Please try again.');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
await onSubmit(goalData);
|
||||
resetForm();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error("Error creating goal:", error);
|
||||
Alert.alert("Error", "Failed to create goal. Please try again.");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
resetForm();
|
||||
onClose();
|
||||
};
|
||||
const handleClose = () => {
|
||||
resetForm();
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
animationType="slide"
|
||||
presentationStyle="pageSheet"
|
||||
onRequestClose={handleClose}
|
||||
const getPriorityColor = (p: "low" | "medium" | "high") => {
|
||||
switch (p) {
|
||||
case "high":
|
||||
return colors.danger;
|
||||
case "medium":
|
||||
return colors.warning;
|
||||
case "low":
|
||||
return colors.success;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={visible}
|
||||
animationType="slide"
|
||||
presentationStyle="pageSheet"
|
||||
onRequestClose={handleClose}
|
||||
>
|
||||
<View style={[styles.container, { backgroundColor: colors.background }]}>
|
||||
<View
|
||||
style={[
|
||||
styles.header,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderBottomColor: colors.border,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.headerTitle}>Create Fitness Goal</Text>
|
||||
<TouchableOpacity onPress={handleClose} style={styles.closeButton}>
|
||||
<Ionicons name="close" size={28} color="#111827" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<Text style={[typography.h2, { color: colors.textPrimary }]}>
|
||||
Create Fitness Goal
|
||||
</Text>
|
||||
<TouchableOpacity onPress={handleClose} style={styles.closeButton}>
|
||||
<Ionicons name="close" size={28} color={colors.textPrimary} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
|
||||
{/* Goal Type */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Goal Type *</Text>
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.typeScroll}>
|
||||
{GOAL_TYPES.map((type) => (
|
||||
<TouchableOpacity
|
||||
key={type.value}
|
||||
style={[
|
||||
styles.typeButton,
|
||||
goalType === type.value && styles.typeButtonActive,
|
||||
]}
|
||||
onPress={() => setGoalType(type.value)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.typeButtonText,
|
||||
goalType === type.value && styles.typeButtonTextActive,
|
||||
]}
|
||||
>
|
||||
{type.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
<ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
|
||||
{/* Goal Type */}
|
||||
<View style={styles.field}>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
Goal Type *
|
||||
</Text>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
style={styles.typeScroll}
|
||||
>
|
||||
{GOAL_TYPES.map((type) => (
|
||||
<TouchableOpacity
|
||||
key={type.value}
|
||||
style={[
|
||||
styles.typeButton,
|
||||
{
|
||||
borderColor: colors.border,
|
||||
backgroundColor: colors.surface,
|
||||
},
|
||||
goalType === type.value && {
|
||||
backgroundColor: colors.primary,
|
||||
borderColor: colors.primary,
|
||||
},
|
||||
]}
|
||||
onPress={() => setGoalType(type.value)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
typography.caption,
|
||||
{ color: colors.textSecondary },
|
||||
goalType === type.value && {
|
||||
color: colors.white,
|
||||
fontWeight: "600",
|
||||
},
|
||||
]}
|
||||
>
|
||||
{type.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{/* Title */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Title *</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={title}
|
||||
onChangeText={setTitle}
|
||||
placeholder="e.g., Lose 5kg"
|
||||
placeholderTextColor="#9ca3af"
|
||||
/>
|
||||
</View>
|
||||
{/* Title */}
|
||||
<View style={styles.field}>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
Title *
|
||||
</Text>
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderColor: colors.border,
|
||||
color: colors.textPrimary,
|
||||
},
|
||||
]}
|
||||
value={title}
|
||||
onChangeText={setTitle}
|
||||
placeholder="e.g., Lose 5kg"
|
||||
placeholderTextColor={colors.textTertiary}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Description */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Description</Text>
|
||||
<TextInput
|
||||
style={[styles.input, styles.textArea]}
|
||||
value={description}
|
||||
onChangeText={setDescription}
|
||||
placeholder="Optional description"
|
||||
placeholderTextColor="#9ca3af"
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
/>
|
||||
</View>
|
||||
{/* Description */}
|
||||
<View style={styles.field}>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
Description
|
||||
</Text>
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
styles.textArea,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderColor: colors.border,
|
||||
color: colors.textPrimary,
|
||||
},
|
||||
]}
|
||||
value={description}
|
||||
onChangeText={setDescription}
|
||||
placeholder="Optional description"
|
||||
placeholderTextColor={colors.textTertiary}
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Target Value & Unit */}
|
||||
<View style={styles.row}>
|
||||
<View style={[styles.field, styles.flex1]}>
|
||||
<Text style={styles.label}>Target Value</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={targetValue}
|
||||
onChangeText={setTargetValue}
|
||||
placeholder="e.g., 70"
|
||||
placeholderTextColor="#9ca3af"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
<View style={[styles.field, styles.flex1]}>
|
||||
<Text style={styles.label}>Unit</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={unit}
|
||||
onChangeText={setUnit}
|
||||
placeholder="e.g., kg"
|
||||
placeholderTextColor="#9ca3af"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Current Value */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Current Value</Text>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
value={currentValue}
|
||||
onChangeText={setCurrentValue}
|
||||
placeholder="Starting value (optional)"
|
||||
placeholderTextColor="#9ca3af"
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Target Date */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Target Date</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.dateButton}
|
||||
onPress={() => setShowDatePicker(!showDatePicker)}
|
||||
>
|
||||
<Text style={targetDate ? styles.dateText : styles.datePlaceholder}>
|
||||
{targetDate ? targetDate.toLocaleDateString() : 'Select target date'}
|
||||
</Text>
|
||||
<Ionicons name={showDatePicker ? "chevron-up" : "calendar-outline"} size={20} color="#6b7280" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{showDatePicker && (
|
||||
<View style={Platform.OS === 'ios' ? styles.datePickerContainer : undefined}>
|
||||
<DateTimePicker
|
||||
value={targetDate || new Date()}
|
||||
mode="date"
|
||||
display={Platform.OS === 'ios' ? 'inline' : 'default'}
|
||||
onChange={(event, selectedDate) => {
|
||||
setShowDatePicker(Platform.OS === 'ios');
|
||||
if (selectedDate) {
|
||||
setTargetDate(selectedDate);
|
||||
}
|
||||
}}
|
||||
minimumDate={new Date()}
|
||||
themeVariant="light"
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Priority */}
|
||||
<View style={styles.field}>
|
||||
<Text style={styles.label}>Priority</Text>
|
||||
<View style={styles.priorityContainer}>
|
||||
{PRIORITIES.map((p) => (
|
||||
<TouchableOpacity
|
||||
key={p.value}
|
||||
style={[
|
||||
styles.priorityButton,
|
||||
priority === p.value && { backgroundColor: p.color },
|
||||
]}
|
||||
onPress={() => setPriority(p.value)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.priorityButtonText,
|
||||
priority === p.value && styles.priorityButtonTextActive,
|
||||
]}
|
||||
>
|
||||
{p.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<TouchableOpacity
|
||||
style={[styles.submitButton, submitting && styles.submitButtonDisabled]}
|
||||
onPress={handleSubmit}
|
||||
disabled={submitting}
|
||||
>
|
||||
<Text style={styles.submitButtonText}>
|
||||
{submitting ? 'Creating...' : 'Create Goal'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{/* Target Value & Unit */}
|
||||
<View style={styles.row}>
|
||||
<View style={[styles.field, styles.flex1]}>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
Target Value
|
||||
</Text>
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderColor: colors.border,
|
||||
color: colors.textPrimary,
|
||||
},
|
||||
]}
|
||||
value={targetValue}
|
||||
onChangeText={setTargetValue}
|
||||
placeholder="e.g., 70"
|
||||
placeholderTextColor={colors.textTertiary}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
<View style={[styles.field, styles.flex1]}>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
Unit
|
||||
</Text>
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderColor: colors.border,
|
||||
color: colors.textPrimary,
|
||||
},
|
||||
]}
|
||||
value={unit}
|
||||
onChangeText={setUnit}
|
||||
placeholder="e.g., kg"
|
||||
placeholderTextColor={colors.textTertiary}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Current Value */}
|
||||
<View style={styles.field}>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
Current Value
|
||||
</Text>
|
||||
<TextInput
|
||||
style={[
|
||||
styles.input,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderColor: colors.border,
|
||||
color: colors.textPrimary,
|
||||
},
|
||||
]}
|
||||
value={currentValue}
|
||||
onChangeText={setCurrentValue}
|
||||
placeholder="Starting value (optional)"
|
||||
placeholderTextColor={colors.textTertiary}
|
||||
keyboardType="numeric"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Target Date */}
|
||||
<View style={styles.field}>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
Target Date
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.dateButton,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderColor: colors.border,
|
||||
},
|
||||
]}
|
||||
onPress={() => setShowDatePicker(!showDatePicker)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{
|
||||
color: targetDate
|
||||
? colors.textPrimary
|
||||
: colors.textTertiary,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{targetDate
|
||||
? targetDate.toLocaleDateString()
|
||||
: "Select target date"}
|
||||
</Text>
|
||||
<Ionicons
|
||||
name={showDatePicker ? "chevron-up" : "calendar-outline"}
|
||||
size={20}
|
||||
color={colors.textSecondary}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{showDatePicker && (
|
||||
<View
|
||||
style={
|
||||
Platform.OS === "ios"
|
||||
? [
|
||||
styles.datePickerContainer,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderColor: colors.border,
|
||||
},
|
||||
]
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<DateTimePicker
|
||||
value={targetDate || new Date()}
|
||||
mode="date"
|
||||
display={Platform.OS === "ios" ? "inline" : "default"}
|
||||
onChange={(event, selectedDate) => {
|
||||
setShowDatePicker(Platform.OS === "ios");
|
||||
if (selectedDate) {
|
||||
setTargetDate(selectedDate);
|
||||
}
|
||||
}}
|
||||
minimumDate={new Date()}
|
||||
themeVariant="light"
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Priority */}
|
||||
<View style={styles.field}>
|
||||
<Text
|
||||
style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
|
||||
>
|
||||
Priority
|
||||
</Text>
|
||||
<View style={styles.priorityContainer}>
|
||||
{PRIORITIES.map((p) => (
|
||||
<TouchableOpacity
|
||||
key={p.value}
|
||||
style={[
|
||||
styles.priorityButton,
|
||||
{
|
||||
borderColor: colors.border,
|
||||
backgroundColor: colors.surface,
|
||||
},
|
||||
priority === p.value && {
|
||||
backgroundColor: getPriorityColor(p.value),
|
||||
borderColor: getPriorityColor(p.value),
|
||||
},
|
||||
]}
|
||||
onPress={() => setPriority(p.value)}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
typography.body,
|
||||
{ color: colors.textSecondary },
|
||||
priority === p.value && {
|
||||
color: colors.white,
|
||||
fontWeight: "600",
|
||||
},
|
||||
]}
|
||||
>
|
||||
{p.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
<View
|
||||
style={[
|
||||
styles.footer,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderTopColor: colors.border,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<MinimalButton
|
||||
variant="primary"
|
||||
title={submitting ? "Creating..." : "Create Goal"}
|
||||
onPress={handleSubmit}
|
||||
disabled={submitting}
|
||||
loading={submitting}
|
||||
style={styles.submitButton}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f9fafb',
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 20,
|
||||
paddingTop: Platform.OS === 'ios' ? 60 : 20,
|
||||
backgroundColor: '#fff',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#e5e7eb',
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: '600',
|
||||
color: '#111827',
|
||||
},
|
||||
closeButton: {
|
||||
padding: 4,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
padding: 20,
|
||||
},
|
||||
field: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#374151',
|
||||
marginBottom: 8,
|
||||
},
|
||||
input: {
|
||||
backgroundColor: '#fff',
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
fontSize: 16,
|
||||
color: '#111827',
|
||||
},
|
||||
textArea: {
|
||||
height: 80,
|
||||
textAlignVertical: 'top',
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
},
|
||||
flex1: {
|
||||
flex: 1,
|
||||
},
|
||||
typeScroll: {
|
||||
flexGrow: 0,
|
||||
},
|
||||
typeButton: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
backgroundColor: '#fff',
|
||||
marginRight: 8,
|
||||
},
|
||||
typeButtonActive: {
|
||||
backgroundColor: '#2563eb',
|
||||
borderColor: '#2563eb',
|
||||
},
|
||||
typeButtonText: {
|
||||
fontSize: 14,
|
||||
color: '#374151',
|
||||
},
|
||||
typeButtonTextActive: {
|
||||
color: '#fff',
|
||||
fontWeight: '600',
|
||||
},
|
||||
dateButton: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#fff',
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
},
|
||||
dateText: {
|
||||
fontSize: 16,
|
||||
color: '#111827',
|
||||
},
|
||||
datePlaceholder: {
|
||||
fontSize: 16,
|
||||
color: '#9ca3af',
|
||||
},
|
||||
priorityContainer: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
},
|
||||
priorityButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
backgroundColor: '#fff',
|
||||
alignItems: 'center',
|
||||
},
|
||||
priorityButtonText: {
|
||||
fontSize: 14,
|
||||
color: '#374151',
|
||||
fontWeight: '500',
|
||||
},
|
||||
priorityButtonTextActive: {
|
||||
color: '#fff',
|
||||
fontWeight: '600',
|
||||
},
|
||||
footer: {
|
||||
padding: 20,
|
||||
paddingBottom: Platform.OS === 'ios' ? 40 : 20,
|
||||
backgroundColor: '#fff',
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#e5e7eb',
|
||||
},
|
||||
submitButton: {
|
||||
backgroundColor: '#2563eb',
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
},
|
||||
submitButtonDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
submitButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#fff',
|
||||
},
|
||||
datePickerContainer: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: '#d1d5db',
|
||||
marginTop: 8,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: 20,
|
||||
paddingTop: Platform.OS === "ios" ? 60 : 20,
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
closeButton: {
|
||||
padding: 4,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
padding: 20,
|
||||
},
|
||||
field: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
fontSize: 16,
|
||||
marginTop: 8,
|
||||
},
|
||||
textArea: {
|
||||
height: 80,
|
||||
textAlignVertical: "top",
|
||||
},
|
||||
row: {
|
||||
flexDirection: "row",
|
||||
gap: 12,
|
||||
},
|
||||
flex1: {
|
||||
flex: 1,
|
||||
},
|
||||
typeScroll: {
|
||||
flexGrow: 0,
|
||||
marginTop: 8,
|
||||
},
|
||||
typeButton: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
marginRight: 8,
|
||||
},
|
||||
dateButton: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
borderWidth: 1,
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
marginTop: 8,
|
||||
},
|
||||
priorityContainer: {
|
||||
flexDirection: "row",
|
||||
gap: 12,
|
||||
marginTop: 8,
|
||||
},
|
||||
priorityButton: {
|
||||
flex: 1,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
alignItems: "center",
|
||||
},
|
||||
footer: {
|
||||
padding: 20,
|
||||
paddingBottom: Platform.OS === "ios" ? 40 : 20,
|
||||
borderTopWidth: 1,
|
||||
},
|
||||
submitButton: {
|
||||
width: "100%",
|
||||
},
|
||||
datePickerContainer: {
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
marginTop: 8,
|
||||
overflow: "hidden",
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user