Add date editing to Massive input
This commit is contained in:
parent
6c0b869377
commit
ef2b877b49
|
@ -14,7 +14,7 @@ export default function MassiveInput(
|
||||||
<TextInput
|
<TextInput
|
||||||
selectionColor={dark ? '#2A2A2A' : CombinedDefaultTheme.colors.border}
|
selectionColor={dark ? '#2A2A2A' : CombinedDefaultTheme.colors.border}
|
||||||
mode="outlined"
|
mode="outlined"
|
||||||
style={{marginBottom: 10}}
|
style={{marginBottom: 10, minWidth: 100}}
|
||||||
selectTextOnFocus
|
selectTextOnFocus
|
||||||
ref={props.innerRef}
|
ref={props.innerRef}
|
||||||
{...props}
|
{...props}
|
||||||
|
|
75
SetForm.tsx
75
SetForm.tsx
|
@ -1,6 +1,6 @@
|
||||||
import React, {useContext, useEffect, useRef, useState} from 'react';
|
import React, {useContext, useEffect, useRef, useState} from 'react';
|
||||||
import {ScrollView, Text, useColorScheme} from 'react-native';
|
import {ScrollView, Text, View} from 'react-native';
|
||||||
import {Button, TextInput} from 'react-native-paper';
|
import {Button} from 'react-native-paper';
|
||||||
import {SnackbarContext} from './App';
|
import {SnackbarContext} from './App';
|
||||||
import MassiveInput from './MassiveInput';
|
import MassiveInput from './MassiveInput';
|
||||||
import {DatabaseContext} from './Routes';
|
import {DatabaseContext} from './Routes';
|
||||||
|
@ -20,16 +20,29 @@ export default function SetForm({
|
||||||
const [weight, setWeight] = useState(set.weight.toString());
|
const [weight, setWeight] = useState(set.weight.toString());
|
||||||
const [unit, setUnit] = useState(set.unit);
|
const [unit, setUnit] = useState(set.unit);
|
||||||
const [uri, setUri] = useState(set.image);
|
const [uri, setUri] = useState(set.image);
|
||||||
const [created, setCreated] = useState(set.created);
|
const [year, setYear] = useState('');
|
||||||
|
const [month, setMonth] = useState('');
|
||||||
|
const [day, setDay] = useState('');
|
||||||
|
const [hour, setHour] = useState('');
|
||||||
|
const [minute, setMinute] = useState('');
|
||||||
const [selection, setSelection] = useState({
|
const [selection, setSelection] = useState({
|
||||||
start: 0,
|
start: 0,
|
||||||
end: set.reps.toString().length,
|
end: set.reps.toString().length,
|
||||||
});
|
});
|
||||||
const weightRef = useRef<any>(null);
|
const weightRef = useRef<any>(null);
|
||||||
const repsRef = useRef<any>(null);
|
const repsRef = useRef<any>(null);
|
||||||
const dark = useColorScheme() === 'dark';
|
|
||||||
const db = useContext(DatabaseContext);
|
const db = useContext(DatabaseContext);
|
||||||
const {toast} = useContext(SnackbarContext);
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!set.created) return;
|
||||||
|
const matches = set.created.match(/\d+/g);
|
||||||
|
if (!matches) return;
|
||||||
|
setYear(matches[0]);
|
||||||
|
setMonth(matches[1]);
|
||||||
|
setDay(matches[2]);
|
||||||
|
setHour(matches[3]);
|
||||||
|
setMinute(matches[4]);
|
||||||
|
}, [set.created]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('SetForm.useEffect:', {uri, name: set.name});
|
console.log('SetForm.useEffect:', {uri, name: set.name});
|
||||||
|
@ -41,15 +54,10 @@ export default function SetForm({
|
||||||
|
|
||||||
const handleSubmit = () => {
|
const handleSubmit = () => {
|
||||||
if (!name) return;
|
if (!name) return;
|
||||||
if (created && !created.match(/^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d$/))
|
|
||||||
return toast(
|
|
||||||
'Created must be of the format YYYY-mm-ddTHH:mm:ss. E.g. 1996-12-24T12:59:40',
|
|
||||||
7000,
|
|
||||||
);
|
|
||||||
save({
|
save({
|
||||||
name,
|
name,
|
||||||
reps: Number(reps),
|
reps: Number(reps),
|
||||||
created,
|
created: `${year}-${month}-${day}T${hour}:${minute}`,
|
||||||
weight: Number(weight),
|
weight: Number(weight),
|
||||||
id: set.id,
|
id: set.id,
|
||||||
unit,
|
unit,
|
||||||
|
@ -95,14 +103,43 @@ export default function SetForm({
|
||||||
onSubmitEditing={handleSubmit}
|
onSubmitEditing={handleSubmit}
|
||||||
/>
|
/>
|
||||||
{set.created && (
|
{set.created && (
|
||||||
<TextInput
|
<View
|
||||||
label="Created"
|
style={{
|
||||||
value={created}
|
flexDirection: 'row',
|
||||||
onChangeText={setCreated}
|
flexWrap: 'wrap',
|
||||||
selectionColor={dark ? '#2A2A2A' : ''}
|
justifyContent: 'space-between',
|
||||||
mode="outlined"
|
}}>
|
||||||
style={{marginBottom: 10}}
|
<MassiveInput
|
||||||
/>
|
label="Year"
|
||||||
|
value={year}
|
||||||
|
onChangeText={setYear}
|
||||||
|
keyboardType="numeric"
|
||||||
|
/>
|
||||||
|
<MassiveInput
|
||||||
|
label="Month"
|
||||||
|
value={month}
|
||||||
|
onChangeText={setMonth}
|
||||||
|
keyboardType="numeric"
|
||||||
|
/>
|
||||||
|
<MassiveInput
|
||||||
|
label="Day"
|
||||||
|
value={day}
|
||||||
|
onChangeText={setDay}
|
||||||
|
keyboardType="numeric"
|
||||||
|
/>
|
||||||
|
<MassiveInput
|
||||||
|
label="Hour"
|
||||||
|
value={hour}
|
||||||
|
onChangeText={setHour}
|
||||||
|
keyboardType="numeric"
|
||||||
|
/>
|
||||||
|
<MassiveInput
|
||||||
|
label="Minute"
|
||||||
|
value={minute}
|
||||||
|
onChangeText={setMinute}
|
||||||
|
keyboardType="numeric"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
)}
|
)}
|
||||||
<Text style={{marginBottom: 10}}>
|
<Text style={{marginBottom: 10}}>
|
||||||
{workouts?.map((workout, index) => (
|
{workouts?.map((workout, index) => (
|
||||||
|
|
Loading…
Reference in New Issue
Block a user