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