Factor out MassiveSwitch
This commit is contained in:
parent
3d6a51cf57
commit
3322289c17
13
EditPlan.tsx
13
EditPlan.tsx
|
@ -10,6 +10,7 @@ import React, {useCallback, useContext, useEffect, useState} from 'react';
|
|||
import {ScrollView, StyleSheet, Text, useColorScheme, View} from 'react-native';
|
||||
import {Button, IconButton, Switch} from 'react-native-paper';
|
||||
import {DatabaseContext} from './App';
|
||||
import MassiveSwitch from './MassiveSwitch';
|
||||
import {PlanPageParams} from './PlanPage';
|
||||
import {DAYS} from './time';
|
||||
|
||||
|
@ -92,12 +93,8 @@ export default function EditPlan() {
|
|||
<Text style={styles.title}>Days</Text>
|
||||
{DAYS.map(day => (
|
||||
<View key={day} style={[styles.row, {alignItems: 'center'}]}>
|
||||
<Switch
|
||||
color={
|
||||
dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary
|
||||
}
|
||||
<MassiveSwitch
|
||||
value={days.includes(day)}
|
||||
style={{marginRight: 5}}
|
||||
onValueChange={value => toggleDay(value, day)}
|
||||
/>
|
||||
<Text onPress={() => toggleDay(!days.includes(day), day)}>
|
||||
|
@ -114,12 +111,8 @@ export default function EditPlan() {
|
|||
)}
|
||||
{names.map(name => (
|
||||
<View key={name} style={[styles.row, {alignItems: 'center'}]}>
|
||||
<Switch
|
||||
color={
|
||||
dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary
|
||||
}
|
||||
<MassiveSwitch
|
||||
value={workouts.includes(name)}
|
||||
style={{marginRight: 5}}
|
||||
onValueChange={value => toggleWorkout(value, name)}
|
||||
/>
|
||||
<Text onPress={() => toggleWorkout(!workouts.includes(name), name)}>
|
||||
|
|
18
MassiveSwitch.tsx
Normal file
18
MassiveSwitch.tsx
Normal file
|
@ -0,0 +1,18 @@
|
|||
import React from 'react';
|
||||
import {DarkTheme, DefaultTheme} from '@react-navigation/native';
|
||||
import {useColorScheme} from 'react-native';
|
||||
import {Switch} from 'react-native-paper';
|
||||
|
||||
export default function MassiveSwitch(
|
||||
props: Partial<React.ComponentProps<typeof Switch>>,
|
||||
) {
|
||||
const dark = useColorScheme() === 'dark';
|
||||
|
||||
return (
|
||||
<Switch
|
||||
color={dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary}
|
||||
style={{marginRight: 5}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
|
@ -13,6 +13,7 @@ import {DatabaseContext} from './App';
|
|||
import Set from './set';
|
||||
import DocumentPicker from 'react-native-document-picker';
|
||||
import ConfirmDialog from './ConfirmDialog';
|
||||
import MassiveSwitch from './MassiveSwitch';
|
||||
|
||||
const {getItem, setItem} = AsyncStorage;
|
||||
|
||||
|
@ -162,7 +163,7 @@ export default function SettingsPage() {
|
|||
/>
|
||||
|
||||
<Text style={styles.text}>Rest timers</Text>
|
||||
<Switch
|
||||
<MassiveSwitch
|
||||
style={[styles.text, {alignSelf: 'flex-start'}]}
|
||||
value={alarmEnabled}
|
||||
onValueChange={changeAlarmEnabled}
|
||||
|
@ -180,7 +181,7 @@ export default function SettingsPage() {
|
|||
</ConfirmDialog>
|
||||
|
||||
<Text style={styles.text}>Predictive sets</Text>
|
||||
<Switch
|
||||
<MassiveSwitch
|
||||
style={[styles.text, {alignSelf: 'flex-start'}]}
|
||||
value={predictiveSets}
|
||||
onValueChange={changePredictive}
|
||||
|
|
Loading…
Reference in New Issue
Block a user