Wrap color context with useColor custom hook
I find it easier to import hooks by useX instead of useContext(X). Like how the navigation library is just useNavigation
This commit is contained in:
parent
d80135d4ed
commit
8461f86e88
11
App.tsx
11
App.tsx
|
@ -11,6 +11,7 @@ import {
|
||||||
Provider,
|
Provider,
|
||||||
} from 'react-native-paper';
|
} from 'react-native-paper';
|
||||||
import Ionicon from 'react-native-vector-icons/MaterialIcons';
|
import Ionicon from 'react-native-vector-icons/MaterialIcons';
|
||||||
|
import {Color} from './color';
|
||||||
import {lightColors} from './colors';
|
import {lightColors} from './colors';
|
||||||
import {runMigrations} from './db';
|
import {runMigrations} from './db';
|
||||||
import MassiveSnack from './MassiveSnack';
|
import MassiveSnack from './MassiveSnack';
|
||||||
|
@ -27,6 +28,7 @@ export const CombinedDefaultTheme = {
|
||||||
...PaperDefaultTheme.colors,
|
...PaperDefaultTheme.colors,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const CombinedDarkTheme = {
|
export const CombinedDarkTheme = {
|
||||||
...NavigationDarkTheme,
|
...NavigationDarkTheme,
|
||||||
...PaperDarkTheme,
|
...PaperDarkTheme,
|
||||||
|
@ -38,11 +40,6 @@ export const CombinedDarkTheme = {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const CustomTheme = React.createContext({
|
|
||||||
color: '',
|
|
||||||
setColor: (_value: string) => {},
|
|
||||||
});
|
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const isDark = useColorScheme() === 'dark';
|
const isDark = useColorScheme() === 'dark';
|
||||||
const [settings, setSettings] = useState<Settings>();
|
const [settings, setSettings] = useState<Settings>();
|
||||||
|
@ -76,7 +73,7 @@ const App = () => {
|
||||||
}, [color, isDark, settings]);
|
}, [color, isDark, settings]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CustomTheme.Provider value={{color, setColor}}>
|
<Color.Provider value={{color, setColor}}>
|
||||||
<Provider
|
<Provider
|
||||||
theme={theme}
|
theme={theme}
|
||||||
settings={{icon: props => <Ionicon {...props} />}}>
|
settings={{icon: props => <Ionicon {...props} />}}>
|
||||||
|
@ -90,7 +87,7 @@ const App = () => {
|
||||||
</MassiveSnack>
|
</MassiveSnack>
|
||||||
</NavigationContainer>
|
</NavigationContainer>
|
||||||
</Provider>
|
</Provider>
|
||||||
</CustomTheme.Provider>
|
</Color.Provider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import * as shape from 'd3-shape';
|
import * as shape from 'd3-shape';
|
||||||
import React, {useContext} from 'react';
|
import React from 'react';
|
||||||
import {View} from 'react-native';
|
import {View} from 'react-native';
|
||||||
import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts';
|
import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts';
|
||||||
import {CustomTheme} from './App';
|
import {useColor} from './color';
|
||||||
import {MARGIN, PADDING} from './constants';
|
import {MARGIN, PADDING} from './constants';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
|
|
||||||
|
@ -17,7 +17,7 @@ export default function Chart({
|
||||||
xFormat: (value: any, index: number) => string;
|
xFormat: (value: any, index: number) => string;
|
||||||
yFormat: (value: any) => string;
|
yFormat: (value: any) => string;
|
||||||
}) {
|
}) {
|
||||||
const {color} = useContext(CustomTheme);
|
const {color} = useColor();
|
||||||
const axesSvg = {fontSize: 10, fill: 'grey'};
|
const axesSvg = {fontSize: 10, fill: 'grey'};
|
||||||
const verticalContentInset = {top: 10, bottom: 10};
|
const verticalContentInset = {top: 10, bottom: 10};
|
||||||
const xAxisHeight = 30;
|
const xAxisHeight = 30;
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
import React, {useContext} from 'react';
|
import React from 'react';
|
||||||
import {FAB} from 'react-native-paper';
|
import {FAB} from 'react-native-paper';
|
||||||
import {CustomTheme} from './App';
|
import {useColor} from './color';
|
||||||
import {lightColors} from './colors';
|
import {lightColors} from './colors';
|
||||||
|
|
||||||
export default function MassiveFab(
|
export default function MassiveFab(
|
||||||
props: Partial<React.ComponentProps<typeof FAB>>,
|
props: Partial<React.ComponentProps<typeof FAB>>,
|
||||||
) {
|
) {
|
||||||
const {color} = useContext(CustomTheme);
|
const {color} = useColor();
|
||||||
const fabColor = lightColors.map(lightColor => lightColor.hex).includes(color)
|
const fabColor = lightColors.map(lightColor => lightColor.hex).includes(color)
|
||||||
? 'black'
|
? 'black'
|
||||||
: undefined;
|
: undefined;
|
||||||
|
|
|
@ -4,7 +4,7 @@ import React, {useCallback, useContext, useEffect, useState} from 'react';
|
||||||
import {NativeModules, ScrollView} 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} from 'react-native-paper';
|
import {Button} from 'react-native-paper';
|
||||||
import {CustomTheme} from './App';
|
import {useColor} from './color';
|
||||||
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';
|
||||||
|
@ -30,7 +30,7 @@ export default function SettingsPage() {
|
||||||
const [date, setDate] = useState(settings.date || '%Y-%m-%d %H:%M');
|
const [date, setDate] = useState(settings.date || '%Y-%m-%d %H:%M');
|
||||||
const [theme, setTheme] = useState(settings.theme || 'system');
|
const [theme, setTheme] = useState(settings.theme || 'system');
|
||||||
const [showDate, setShowDate] = useState(!!settings.showDate);
|
const [showDate, setShowDate] = useState(!!settings.showDate);
|
||||||
const {color, setColor} = useContext(CustomTheme);
|
const {color, setColor} = useColor();
|
||||||
const {toast} = useContext(SnackbarContext);
|
const {toast} = useContext(SnackbarContext);
|
||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
|
|
|
@ -8,8 +8,8 @@ import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
|
||||||
import {NativeModules, TextInput, View} from 'react-native';
|
import {NativeModules, TextInput, View} from 'react-native';
|
||||||
import {FlatList} from 'react-native-gesture-handler';
|
import {FlatList} from 'react-native-gesture-handler';
|
||||||
import {Button, IconButton, List, RadioButton} from 'react-native-paper';
|
import {Button, IconButton, List, RadioButton} from 'react-native-paper';
|
||||||
import {CustomTheme} from './App';
|
|
||||||
import {getBestSet} from './best.service';
|
import {getBestSet} from './best.service';
|
||||||
|
import {useColor} from './color';
|
||||||
import {PADDING} from './constants';
|
import {PADDING} from './constants';
|
||||||
import CountMany from './count-many';
|
import CountMany from './count-many';
|
||||||
import MassiveInput from './MassiveInput';
|
import MassiveInput from './MassiveInput';
|
||||||
|
@ -37,7 +37,7 @@ export default function StartPlan() {
|
||||||
const unitRef = useRef<TextInput>(null);
|
const unitRef = useRef<TextInput>(null);
|
||||||
const navigation = useNavigation();
|
const navigation = useNavigation();
|
||||||
const workouts = useMemo(() => params.plan.workouts.split(','), [params]);
|
const workouts = useMemo(() => params.plan.workouts.split(','), [params]);
|
||||||
const {color} = useContext(CustomTheme);
|
const {color} = useColor();
|
||||||
|
|
||||||
const [selection, setSelection] = useState({
|
const [selection, setSelection] = useState({
|
||||||
start: 0,
|
start: 0,
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
import React, {useContext, useMemo} from 'react';
|
import React, {useMemo} from 'react';
|
||||||
import {Pressable} from 'react-native';
|
import {Pressable} from 'react-native';
|
||||||
import {Switch as PaperSwitch, Text} from 'react-native-paper';
|
import {Switch as PaperSwitch, Text} from 'react-native-paper';
|
||||||
import {CombinedDarkTheme, CombinedDefaultTheme, CustomTheme} from './App';
|
import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
|
||||||
|
import {useColor} from './color';
|
||||||
import {colorShade} from './colors';
|
import {colorShade} from './colors';
|
||||||
import {MARGIN} from './constants';
|
import {MARGIN} from './constants';
|
||||||
import useDark from './use-dark';
|
import useDark from './use-dark';
|
||||||
|
@ -17,7 +18,7 @@ export default function Switch({
|
||||||
onPress: () => void;
|
onPress: () => void;
|
||||||
children: string;
|
children: string;
|
||||||
}) {
|
}) {
|
||||||
const {color} = useContext(CustomTheme);
|
const {color} = useColor();
|
||||||
const dark = useDark();
|
const dark = useDark();
|
||||||
|
|
||||||
const track = useMemo(() => {
|
const track = useMemo(() => {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user