Factor out massive switch
This commit is contained in:
parent
a20a0a1832
commit
91c0430760
37
EditPlan.tsx
37
EditPlan.tsx
|
@ -10,10 +10,10 @@ import {ScrollView, StyleSheet, View} from 'react-native';
|
|||
import {Button, IconButton, Text} from 'react-native-paper';
|
||||
import {MARGIN, PADDING} from './constants';
|
||||
import {DrawerParamList} from './drawer-param-list';
|
||||
import MassiveSwitch from './MassiveSwitch';
|
||||
import {PlanPageParams} from './plan-page-params';
|
||||
import {addPlan, updatePlan} from './plan.service';
|
||||
import {getNames} from './set.service';
|
||||
import Switch from './Switch';
|
||||
import {DAYS} from './time';
|
||||
|
||||
export default function EditPlan() {
|
||||
|
@ -91,33 +91,28 @@ export default function EditPlan() {
|
|||
<ScrollView style={{height: '90%'}}>
|
||||
<Text style={styles.title}>Days</Text>
|
||||
{DAYS.map(day => (
|
||||
<View key={day} style={[styles.row, {alignItems: 'center'}]}>
|
||||
<MassiveSwitch
|
||||
value={days.includes(day)}
|
||||
<Switch
|
||||
onValueChange={value => toggleDay(value, day)}
|
||||
/>
|
||||
<Text onPress={() => toggleDay(!days.includes(day), day)}>
|
||||
onPress={() => toggleDay(!days.includes(day), day)}
|
||||
value={days.includes(day)}>
|
||||
{day}
|
||||
</Text>
|
||||
</View>
|
||||
</Switch>
|
||||
))}
|
||||
<Text style={[styles.title, {marginTop: MARGIN}]}>Workouts</Text>
|
||||
{names.length === 0 && (
|
||||
{names.length === 0 ? (
|
||||
<View>
|
||||
<Text>No workouts found.</Text>
|
||||
</View>
|
||||
)}
|
||||
{names.map(name => (
|
||||
<View key={name} style={[styles.row, {alignItems: 'center'}]}>
|
||||
<MassiveSwitch
|
||||
value={workouts.includes(name)}
|
||||
) : (
|
||||
names.map(name => (
|
||||
<Switch
|
||||
onValueChange={value => toggleWorkout(value, name)}
|
||||
/>
|
||||
<Text onPress={() => toggleWorkout(!workouts.includes(name), name)}>
|
||||
value={workouts.includes(name)}
|
||||
onPress={() => toggleWorkout(!workouts.includes(name), name)}>
|
||||
{name}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</Switch>
|
||||
))
|
||||
)}
|
||||
</ScrollView>
|
||||
{names.length === 0 ? (
|
||||
<Button
|
||||
|
@ -151,8 +146,4 @@ const styles = StyleSheet.create({
|
|||
fontSize: 20,
|
||||
marginBottom: MARGIN,
|
||||
},
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
});
|
||||
|
|
|
@ -1,12 +0,0 @@
|
|||
import React, {useContext} from 'react';
|
||||
import {Switch} from 'react-native-paper';
|
||||
import {CustomTheme} from './App';
|
||||
import {MARGIN} from './constants';
|
||||
|
||||
export default function MassiveSwitch(
|
||||
props: Partial<React.ComponentProps<typeof Switch>>,
|
||||
) {
|
||||
const {color} = useContext(CustomTheme);
|
||||
|
||||
return <Switch color={color} style={{marginRight: MARGIN}} {...props} />;
|
||||
}
|
|
@ -1,18 +1,18 @@
|
|||
import {Picker} from '@react-native-picker/picker';
|
||||
import {useFocusEffect} from '@react-navigation/native';
|
||||
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
||||
import {NativeModules, Pressable, ScrollView, StyleSheet} from 'react-native';
|
||||
import {NativeModules, ScrollView} from 'react-native';
|
||||
import DocumentPicker from 'react-native-document-picker';
|
||||
import {Button, Text} from 'react-native-paper';
|
||||
import {Button} from 'react-native-paper';
|
||||
import {CustomTheme} from './App';
|
||||
import {darkColors, lightColors} from './colors';
|
||||
import ConfirmDialog from './ConfirmDialog';
|
||||
import {MARGIN} from './constants';
|
||||
import Input from './input';
|
||||
import {SnackbarContext} from './MassiveSnack';
|
||||
import MassiveSwitch from './MassiveSwitch';
|
||||
import Page from './Page';
|
||||
import {getSettings, settings, updateSettings} from './settings.service';
|
||||
import Switch from './Switch';
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [battery, setBattery] = useState(false);
|
||||
|
@ -165,21 +165,13 @@ export default function SettingsPage() {
|
|||
input.name.toLowerCase().includes(search.toLowerCase()),
|
||||
)
|
||||
.map(input => (
|
||||
<Pressable
|
||||
<Switch
|
||||
onPress={() => input.onChange(!input.value)}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
key={input.name}>
|
||||
<Text style={styles.item}>{input.name}</Text>
|
||||
<MassiveSwitch
|
||||
style={styles.item}
|
||||
key={input.name}
|
||||
value={input.value}
|
||||
onValueChange={input.onChange}
|
||||
/>
|
||||
</Pressable>
|
||||
onValueChange={input.onChange}>
|
||||
{input.name}
|
||||
</Switch>
|
||||
))}
|
||||
{'theme'.includes(search.toLowerCase()) && (
|
||||
<Picker
|
||||
|
@ -219,11 +211,3 @@ export default function SettingsPage() {
|
|||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
item: {
|
||||
alignSelf: 'flex-start',
|
||||
marginBottom: MARGIN,
|
||||
marginLeft: MARGIN,
|
||||
},
|
||||
});
|
||||
|
|
37
Switch.tsx
Normal file
37
Switch.tsx
Normal file
|
@ -0,0 +1,37 @@
|
|||
import React, {useContext} from 'react';
|
||||
import {Pressable} from 'react-native';
|
||||
import {Switch as PaperSwitch, Text} from 'react-native-paper';
|
||||
import {CustomTheme} from './App';
|
||||
import {MARGIN} from './constants';
|
||||
|
||||
export default function Switch({
|
||||
value,
|
||||
onValueChange,
|
||||
onPress,
|
||||
children,
|
||||
}: {
|
||||
value?: boolean;
|
||||
onValueChange: (value: boolean) => void;
|
||||
onPress: () => void;
|
||||
children: string;
|
||||
}) {
|
||||
const {color} = useContext(CustomTheme);
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<PaperSwitch
|
||||
color={color}
|
||||
style={{marginRight: MARGIN}}
|
||||
value={value}
|
||||
onValueChange={onValueChange}
|
||||
/>
|
||||
<Text>{children}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
|
@ -75,15 +75,6 @@ export const getSets = async ({
|
|||
return result.rows.raw();
|
||||
};
|
||||
|
||||
export const getTodaysSets = async (): Promise<Set[]> => {
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
const [result] = await db.executeSql(
|
||||
`SELECT * FROM sets WHERE created LIKE ? ORDER BY created DESC`,
|
||||
[`${today}%`],
|
||||
);
|
||||
return result.rows.raw();
|
||||
};
|
||||
|
||||
export const defaultSet: Set = {
|
||||
name: '',
|
||||
reps: 10,
|
||||
|
|
Loading…
Reference in New Issue
Block a user