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 {Button, IconButton, Text} from 'react-native-paper';
|
||||||
import {MARGIN, PADDING} from './constants';
|
import {MARGIN, PADDING} from './constants';
|
||||||
import {DrawerParamList} from './drawer-param-list';
|
import {DrawerParamList} from './drawer-param-list';
|
||||||
import MassiveSwitch from './MassiveSwitch';
|
|
||||||
import {PlanPageParams} from './plan-page-params';
|
import {PlanPageParams} from './plan-page-params';
|
||||||
import {addPlan, updatePlan} from './plan.service';
|
import {addPlan, updatePlan} from './plan.service';
|
||||||
import {getNames} from './set.service';
|
import {getNames} from './set.service';
|
||||||
|
import Switch from './Switch';
|
||||||
import {DAYS} from './time';
|
import {DAYS} from './time';
|
||||||
|
|
||||||
export default function EditPlan() {
|
export default function EditPlan() {
|
||||||
|
@ -91,33 +91,28 @@ export default function EditPlan() {
|
||||||
<ScrollView style={{height: '90%'}}>
|
<ScrollView style={{height: '90%'}}>
|
||||||
<Text style={styles.title}>Days</Text>
|
<Text style={styles.title}>Days</Text>
|
||||||
{DAYS.map(day => (
|
{DAYS.map(day => (
|
||||||
<View key={day} style={[styles.row, {alignItems: 'center'}]}>
|
<Switch
|
||||||
<MassiveSwitch
|
|
||||||
value={days.includes(day)}
|
|
||||||
onValueChange={value => toggleDay(value, day)}
|
onValueChange={value => toggleDay(value, day)}
|
||||||
/>
|
onPress={() => toggleDay(!days.includes(day), day)}
|
||||||
<Text onPress={() => toggleDay(!days.includes(day), day)}>
|
value={days.includes(day)}>
|
||||||
{day}
|
{day}
|
||||||
</Text>
|
</Switch>
|
||||||
</View>
|
|
||||||
))}
|
))}
|
||||||
<Text style={[styles.title, {marginTop: MARGIN}]}>Workouts</Text>
|
<Text style={[styles.title, {marginTop: MARGIN}]}>Workouts</Text>
|
||||||
{names.length === 0 && (
|
{names.length === 0 ? (
|
||||||
<View>
|
<View>
|
||||||
<Text>No workouts found.</Text>
|
<Text>No workouts found.</Text>
|
||||||
</View>
|
</View>
|
||||||
)}
|
) : (
|
||||||
{names.map(name => (
|
names.map(name => (
|
||||||
<View key={name} style={[styles.row, {alignItems: 'center'}]}>
|
<Switch
|
||||||
<MassiveSwitch
|
|
||||||
value={workouts.includes(name)}
|
|
||||||
onValueChange={value => toggleWorkout(value, name)}
|
onValueChange={value => toggleWorkout(value, name)}
|
||||||
/>
|
value={workouts.includes(name)}
|
||||||
<Text onPress={() => toggleWorkout(!workouts.includes(name), name)}>
|
onPress={() => toggleWorkout(!workouts.includes(name), name)}>
|
||||||
{name}
|
{name}
|
||||||
</Text>
|
</Switch>
|
||||||
</View>
|
))
|
||||||
))}
|
)}
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
{names.length === 0 ? (
|
{names.length === 0 ? (
|
||||||
<Button
|
<Button
|
||||||
|
@ -151,8 +146,4 @@ const styles = StyleSheet.create({
|
||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
marginBottom: MARGIN,
|
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 {Picker} from '@react-native-picker/picker';
|
||||||
import {useFocusEffect} from '@react-navigation/native';
|
import {useFocusEffect} from '@react-navigation/native';
|
||||||
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
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 DocumentPicker from 'react-native-document-picker';
|
||||||
import {Button, Text} from 'react-native-paper';
|
import {Button} from 'react-native-paper';
|
||||||
import {CustomTheme} from './App';
|
import {CustomTheme} from './App';
|
||||||
import {darkColors, lightColors} from './colors';
|
import {darkColors, lightColors} from './colors';
|
||||||
import ConfirmDialog from './ConfirmDialog';
|
import ConfirmDialog from './ConfirmDialog';
|
||||||
import {MARGIN} from './constants';
|
import {MARGIN} from './constants';
|
||||||
import Input from './input';
|
import Input from './input';
|
||||||
import {SnackbarContext} from './MassiveSnack';
|
import {SnackbarContext} from './MassiveSnack';
|
||||||
import MassiveSwitch from './MassiveSwitch';
|
|
||||||
import Page from './Page';
|
import Page from './Page';
|
||||||
import {getSettings, settings, updateSettings} from './settings.service';
|
import {getSettings, settings, updateSettings} from './settings.service';
|
||||||
|
import Switch from './Switch';
|
||||||
|
|
||||||
export default function SettingsPage() {
|
export default function SettingsPage() {
|
||||||
const [battery, setBattery] = useState(false);
|
const [battery, setBattery] = useState(false);
|
||||||
|
@ -165,21 +165,13 @@ export default function SettingsPage() {
|
||||||
input.name.toLowerCase().includes(search.toLowerCase()),
|
input.name.toLowerCase().includes(search.toLowerCase()),
|
||||||
)
|
)
|
||||||
.map(input => (
|
.map(input => (
|
||||||
<Pressable
|
<Switch
|
||||||
onPress={() => input.onChange(!input.value)}
|
onPress={() => input.onChange(!input.value)}
|
||||||
style={{
|
key={input.name}
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
}}
|
|
||||||
key={input.name}>
|
|
||||||
<Text style={styles.item}>{input.name}</Text>
|
|
||||||
<MassiveSwitch
|
|
||||||
style={styles.item}
|
|
||||||
value={input.value}
|
value={input.value}
|
||||||
onValueChange={input.onChange}
|
onValueChange={input.onChange}>
|
||||||
/>
|
{input.name}
|
||||||
</Pressable>
|
</Switch>
|
||||||
))}
|
))}
|
||||||
{'theme'.includes(search.toLowerCase()) && (
|
{'theme'.includes(search.toLowerCase()) && (
|
||||||
<Picker
|
<Picker
|
||||||
|
@ -219,11 +211,3 @@ export default function SettingsPage() {
|
||||||
</Page>
|
</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();
|
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 = {
|
export const defaultSet: Set = {
|
||||||
name: '',
|
name: '',
|
||||||
reps: 10,
|
reps: 10,
|
||||||
|
|
Loading…
Reference in New Issue
Block a user