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 {ScrollView, StyleSheet, Text, useColorScheme, View} from 'react-native';
|
||||||
import {Button, IconButton, Switch} from 'react-native-paper';
|
import {Button, IconButton, Switch} from 'react-native-paper';
|
||||||
import {DatabaseContext} from './App';
|
import {DatabaseContext} from './App';
|
||||||
|
import MassiveSwitch from './MassiveSwitch';
|
||||||
import {PlanPageParams} from './PlanPage';
|
import {PlanPageParams} from './PlanPage';
|
||||||
import {DAYS} from './time';
|
import {DAYS} from './time';
|
||||||
|
|
||||||
|
@ -92,12 +93,8 @@ export default function EditPlan() {
|
||||||
<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'}]}>
|
<View key={day} style={[styles.row, {alignItems: 'center'}]}>
|
||||||
<Switch
|
<MassiveSwitch
|
||||||
color={
|
|
||||||
dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary
|
|
||||||
}
|
|
||||||
value={days.includes(day)}
|
value={days.includes(day)}
|
||||||
style={{marginRight: 5}}
|
|
||||||
onValueChange={value => toggleDay(value, day)}
|
onValueChange={value => toggleDay(value, day)}
|
||||||
/>
|
/>
|
||||||
<Text onPress={() => toggleDay(!days.includes(day), day)}>
|
<Text onPress={() => toggleDay(!days.includes(day), day)}>
|
||||||
|
@ -114,12 +111,8 @@ export default function EditPlan() {
|
||||||
)}
|
)}
|
||||||
{names.map(name => (
|
{names.map(name => (
|
||||||
<View key={name} style={[styles.row, {alignItems: 'center'}]}>
|
<View key={name} style={[styles.row, {alignItems: 'center'}]}>
|
||||||
<Switch
|
<MassiveSwitch
|
||||||
color={
|
|
||||||
dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary
|
|
||||||
}
|
|
||||||
value={workouts.includes(name)}
|
value={workouts.includes(name)}
|
||||||
style={{marginRight: 5}}
|
|
||||||
onValueChange={value => toggleWorkout(value, name)}
|
onValueChange={value => toggleWorkout(value, name)}
|
||||||
/>
|
/>
|
||||||
<Text onPress={() => toggleWorkout(!workouts.includes(name), 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 Set from './set';
|
||||||
import DocumentPicker from 'react-native-document-picker';
|
import DocumentPicker from 'react-native-document-picker';
|
||||||
import ConfirmDialog from './ConfirmDialog';
|
import ConfirmDialog from './ConfirmDialog';
|
||||||
|
import MassiveSwitch from './MassiveSwitch';
|
||||||
|
|
||||||
const {getItem, setItem} = AsyncStorage;
|
const {getItem, setItem} = AsyncStorage;
|
||||||
|
|
||||||
|
@ -162,7 +163,7 @@ export default function SettingsPage() {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Text style={styles.text}>Rest timers</Text>
|
<Text style={styles.text}>Rest timers</Text>
|
||||||
<Switch
|
<MassiveSwitch
|
||||||
style={[styles.text, {alignSelf: 'flex-start'}]}
|
style={[styles.text, {alignSelf: 'flex-start'}]}
|
||||||
value={alarmEnabled}
|
value={alarmEnabled}
|
||||||
onValueChange={changeAlarmEnabled}
|
onValueChange={changeAlarmEnabled}
|
||||||
|
@ -180,7 +181,7 @@ export default function SettingsPage() {
|
||||||
</ConfirmDialog>
|
</ConfirmDialog>
|
||||||
|
|
||||||
<Text style={styles.text}>Predictive sets</Text>
|
<Text style={styles.text}>Predictive sets</Text>
|
||||||
<Switch
|
<MassiveSwitch
|
||||||
style={[styles.text, {alignSelf: 'flex-start'}]}
|
style={[styles.text, {alignSelf: 'flex-start'}]}
|
||||||
value={predictiveSets}
|
value={predictiveSets}
|
||||||
onValueChange={changePredictive}
|
onValueChange={changePredictive}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user