parent
512c0d0467
commit
e516cdfdc0
28
App.tsx
28
App.tsx
|
@ -4,7 +4,7 @@ import {
|
|||
DefaultTheme as NavigationDefaultTheme,
|
||||
NavigationContainer,
|
||||
} from '@react-navigation/native';
|
||||
import React from 'react';
|
||||
import React, {useState} from 'react';
|
||||
import {useColorScheme} from 'react-native';
|
||||
import {
|
||||
DarkTheme as PaperDarkTheme,
|
||||
|
@ -44,20 +44,40 @@ export const CombinedDarkTheme = {
|
|||
},
|
||||
};
|
||||
|
||||
export const CustomTheme = React.createContext({
|
||||
color: '',
|
||||
setColor: (_value: string) => {},
|
||||
});
|
||||
|
||||
const App = () => {
|
||||
const dark = useColorScheme() === 'dark';
|
||||
const [color, setColor] = useState(
|
||||
dark
|
||||
? CombinedDarkTheme.colors.primary
|
||||
: CombinedDefaultTheme.colors.primary,
|
||||
);
|
||||
const theme = dark
|
||||
? {
|
||||
...CombinedDarkTheme,
|
||||
colors: {...CombinedDarkTheme.colors, primary: color},
|
||||
}
|
||||
: {
|
||||
...CombinedDefaultTheme,
|
||||
colors: {...CombinedDefaultTheme.colors, primary: color},
|
||||
};
|
||||
|
||||
return (
|
||||
<CustomTheme.Provider value={{color, setColor}}>
|
||||
<Provider
|
||||
theme={dark ? CombinedDarkTheme : CombinedDefaultTheme}
|
||||
theme={theme}
|
||||
settings={{icon: props => <Ionicon {...props} />}}>
|
||||
<NavigationContainer
|
||||
theme={dark ? CombinedDarkTheme : CombinedDefaultTheme}>
|
||||
<NavigationContainer theme={theme}>
|
||||
<MassiveSnack>
|
||||
<Routes />
|
||||
</MassiveSnack>
|
||||
</NavigationContainer>
|
||||
</Provider>
|
||||
</CustomTheme.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
12
Chart.tsx
12
Chart.tsx
|
@ -1,8 +1,8 @@
|
|||
import * as shape from 'd3-shape';
|
||||
import React from 'react';
|
||||
import {useColorScheme, View} from 'react-native';
|
||||
import React, {useContext} from 'react';
|
||||
import {View} from 'react-native';
|
||||
import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts';
|
||||
import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
|
||||
import {CustomTheme} from './App';
|
||||
import {MARGIN, PADDING} from './constants';
|
||||
import Set from './set';
|
||||
|
||||
|
@ -17,7 +17,7 @@ export default function Chart({
|
|||
xFormat: (value: any, index: number) => string;
|
||||
yFormat: (value: any) => string;
|
||||
}) {
|
||||
const dark = useColorScheme() === 'dark';
|
||||
const {color} = useContext(CustomTheme);
|
||||
const axesSvg = {fontSize: 10, fill: 'grey'};
|
||||
const verticalContentInset = {top: 10, bottom: 10};
|
||||
const xAxisHeight = 30;
|
||||
|
@ -39,9 +39,7 @@ export default function Chart({
|
|||
contentInset={verticalContentInset}
|
||||
curve={shape.curveBasis}
|
||||
svg={{
|
||||
stroke: dark
|
||||
? CombinedDarkTheme.colors.primary
|
||||
: CombinedDefaultTheme.colors.primary,
|
||||
stroke: color,
|
||||
}}>
|
||||
<Grid />
|
||||
</LineChart>
|
||||
|
|
|
@ -1,12 +1,13 @@
|
|||
import React from 'react';
|
||||
import React, {useContext} from 'react';
|
||||
import {useColorScheme} from 'react-native';
|
||||
import {FAB} from 'react-native-paper';
|
||||
import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
|
||||
import {CombinedDarkTheme, CustomTheme} from './App';
|
||||
|
||||
export default function MassiveFab(
|
||||
props: Partial<React.ComponentProps<typeof FAB>>,
|
||||
) {
|
||||
const dark = useColorScheme() === 'dark';
|
||||
const {color} = useContext(CustomTheme);
|
||||
|
||||
return (
|
||||
<FAB
|
||||
|
@ -17,9 +18,7 @@ export default function MassiveFab(
|
|||
position: 'absolute',
|
||||
right: 10,
|
||||
bottom: 60,
|
||||
backgroundColor: dark
|
||||
? CombinedDarkTheme.colors.primary
|
||||
: CombinedDefaultTheme.colors.primary,
|
||||
backgroundColor: color,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, {useState} from 'react';
|
||||
import React, {useContext, useState} from 'react';
|
||||
import {useColorScheme} from 'react-native';
|
||||
import {Snackbar} from 'react-native-paper';
|
||||
import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
|
||||
import {CombinedDarkTheme, CustomTheme} from './App';
|
||||
|
||||
export const SnackbarContext = React.createContext<{
|
||||
toast: (value: string, timeout: number) => void;
|
||||
|
@ -11,6 +11,7 @@ const MassiveSnack = ({children}: {children: JSX.Element[] | JSX.Element}) => {
|
|||
const [snackbar, setSnackbar] = useState('');
|
||||
const [timeoutId, setTimeoutId] = useState(0);
|
||||
const dark = useColorScheme() === 'dark';
|
||||
const {color} = useContext(CustomTheme);
|
||||
|
||||
const toast = (value: string, timeout: number) => {
|
||||
setSnackbar(value);
|
||||
|
@ -30,9 +31,7 @@ const MassiveSnack = ({children}: {children: JSX.Element[] | JSX.Element}) => {
|
|||
action={{
|
||||
label: 'Close',
|
||||
onPress: () => setSnackbar(''),
|
||||
color: dark
|
||||
? CombinedDarkTheme.colors.background
|
||||
: CombinedDefaultTheme.colors.primary,
|
||||
color: dark ? CombinedDarkTheme.colors.background : color,
|
||||
}}>
|
||||
{snackbar}
|
||||
</Snackbar>
|
||||
|
|
|
@ -1,23 +1,12 @@
|
|||
import React from 'react';
|
||||
import {useColorScheme} from 'react-native';
|
||||
import React, {useContext} from 'react';
|
||||
import {Switch} from 'react-native-paper';
|
||||
import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
|
||||
import {CustomTheme} from './App';
|
||||
import {MARGIN} from './constants';
|
||||
|
||||
export default function MassiveSwitch(
|
||||
props: Partial<React.ComponentProps<typeof Switch>>,
|
||||
) {
|
||||
const dark = useColorScheme() === 'dark';
|
||||
const {color} = useContext(CustomTheme);
|
||||
|
||||
return (
|
||||
<Switch
|
||||
color={
|
||||
dark
|
||||
? CombinedDarkTheme.colors.primary
|
||||
: CombinedDefaultTheme.colors.primary
|
||||
}
|
||||
style={{marginRight: MARGIN}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
return <Switch color={color} style={{marginRight: MARGIN}} {...props} />;
|
||||
}
|
||||
|
|
14
Routes.tsx
14
Routes.tsx
|
@ -1,12 +1,12 @@
|
|||
import React, {useEffect, useState} from 'react';
|
||||
import React, {useContext, useEffect, useState} from 'react';
|
||||
import {useColorScheme} from 'react-native';
|
||||
import {IconButton} from 'react-native-paper';
|
||||
import {Drawer, DrawerParamList} from './App';
|
||||
import {CustomTheme, Drawer, DrawerParamList} from './App';
|
||||
import BestPage from './BestPage';
|
||||
import {runMigrations} from './db';
|
||||
import HomePage from './HomePage';
|
||||
import PlanPage from './PlanPage';
|
||||
import {getSettings} from './settings.service';
|
||||
import {getSettings, settings} from './settings.service';
|
||||
import SettingsPage from './SettingsPage';
|
||||
import WorkoutsPage from './WorkoutsPage';
|
||||
|
||||
|
@ -19,12 +19,16 @@ interface Route {
|
|||
export default function Routes() {
|
||||
const [migrated, setMigrated] = useState(false);
|
||||
const dark = useColorScheme() === 'dark';
|
||||
const {setColor} = useContext(CustomTheme);
|
||||
|
||||
useEffect(() => {
|
||||
runMigrations()
|
||||
.then(getSettings)
|
||||
.then(() => setMigrated(true));
|
||||
}, []);
|
||||
.then(() => setMigrated(true))
|
||||
.then(() => {
|
||||
if (settings.color) setColor(settings.color);
|
||||
});
|
||||
}, [setColor]);
|
||||
|
||||
if (!migrated) return null;
|
||||
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
import {Picker} from '@react-native-picker/picker';
|
||||
import {useFocusEffect} from '@react-navigation/native';
|
||||
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
||||
import {NativeModules, ScrollView} from 'react-native';
|
||||
import {NativeModules, ScrollView, StyleSheet} from 'react-native';
|
||||
import DocumentPicker from 'react-native-document-picker';
|
||||
import {Button, Text} from 'react-native-paper';
|
||||
import {CustomTheme} from './App';
|
||||
import ConfirmDialog from './ConfirmDialog';
|
||||
import {MARGIN} from './constants';
|
||||
import {SnackbarContext} from './MassiveSnack';
|
||||
|
@ -27,6 +29,7 @@ export default function SettingsPage() {
|
|||
const [ignoring, setIgnoring] = useState(false);
|
||||
const [search, setSearch] = useState('');
|
||||
const [showUnit, setShowUnit] = useState(true);
|
||||
const {color, setColor} = useContext(CustomTheme);
|
||||
const {toast} = useContext(SnackbarContext);
|
||||
|
||||
useFocusEffect(
|
||||
|
@ -35,7 +38,7 @@ export default function SettingsPage() {
|
|||
setAlarm(!!settings.alarm);
|
||||
setPredict(!!settings.predict);
|
||||
setVibrate(!!settings.vibrate);
|
||||
setSound(settings.sound);
|
||||
setSound(settings.sound ?? '');
|
||||
setNotify(!!settings.notify);
|
||||
setImages(!!settings.images);
|
||||
NativeModules.AlarmModule.ignoringBattery(setIgnoring);
|
||||
|
@ -51,9 +54,10 @@ export default function SettingsPage() {
|
|||
notify: +notify,
|
||||
images: +images,
|
||||
showUnit: +showUnit,
|
||||
color,
|
||||
});
|
||||
getSettings();
|
||||
}, [vibrate, alarm, predict, sound, notify, images, showUnit]);
|
||||
}, [vibrate, alarm, predict, sound, notify, images, showUnit, color]);
|
||||
|
||||
const changeAlarmEnabled = useCallback(
|
||||
(enabled: boolean) => {
|
||||
|
@ -131,16 +135,16 @@ export default function SettingsPage() {
|
|||
|
||||
return (
|
||||
<Page search={search} setSearch={setSearch}>
|
||||
<ScrollView style={{margin: MARGIN}}>
|
||||
<ScrollView style={{marginTop: MARGIN}}>
|
||||
{switches
|
||||
.filter(input =>
|
||||
input.name.toLowerCase().includes(search.toLowerCase()),
|
||||
)
|
||||
.map(input => (
|
||||
<React.Fragment key={input.name}>
|
||||
<Text style={{marginBottom: MARGIN}}>{input.name}</Text>
|
||||
<Text style={styles.item}>{input.name}</Text>
|
||||
<MassiveSwitch
|
||||
style={{alignSelf: 'flex-start', marginBottom: MARGIN}}
|
||||
style={styles.item}
|
||||
value={input.value}
|
||||
onValueChange={input.onChange}
|
||||
/>
|
||||
|
@ -154,6 +158,18 @@ export default function SettingsPage() {
|
|||
: null}
|
||||
</Button>
|
||||
)}
|
||||
{'color'.includes(search.toLowerCase()) && (
|
||||
<Picker
|
||||
style={{color}}
|
||||
dropdownIconColor={color}
|
||||
selectedValue={color}
|
||||
onValueChange={value => setColor(value)}>
|
||||
<Picker.Item value="#B3E5fC" label="Cyan theme" color="#B3E5fC" />
|
||||
<Picker.Item value="#8156a7" label="Purple theme" color="#8156a7" />
|
||||
<Picker.Item value="#007AFF" label="Blue theme" color="#007AFF" />
|
||||
<Picker.Item value="#ffc0cb" label="Pink theme" color="#ffc0cb" />
|
||||
</Picker>
|
||||
)}
|
||||
</ScrollView>
|
||||
<ConfirmDialog
|
||||
title="Battery optimizations"
|
||||
|
@ -168,3 +184,11 @@ export default function SettingsPage() {
|
|||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
item: {
|
||||
alignSelf: 'flex-start',
|
||||
marginBottom: MARGIN,
|
||||
marginLeft: MARGIN,
|
||||
},
|
||||
});
|
||||
|
|
3
db.ts
3
db.ts
|
@ -88,6 +88,9 @@ const migrations = [
|
|||
`
|
||||
DROP TABLE workouts
|
||||
`,
|
||||
`
|
||||
ALTER TABLE settings ADD COLUMN color TEXT NULL
|
||||
`,
|
||||
];
|
||||
|
||||
export let db: SQLiteDatabase;
|
||||
|
|
|
@ -2,8 +2,9 @@ export default interface Settings {
|
|||
alarm: number;
|
||||
vibrate: number;
|
||||
predict: number;
|
||||
sound: string;
|
||||
notify: number;
|
||||
images: number;
|
||||
showUnit: number;
|
||||
sound?: string;
|
||||
notify?: number;
|
||||
images?: number;
|
||||
showUnit?: number;
|
||||
color?: string;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue