From 8461f86e8893d5a2656dc53e3233a8b93ceb6b13 Mon Sep 17 00:00:00 2001 From: Brandon Presley Date: Fri, 14 Oct 2022 17:24:02 +1300 Subject: [PATCH] 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 --- App.tsx | 11 ++++------- Chart.tsx | 6 +++--- MassiveFab.tsx | 6 +++--- SettingsPage.tsx | 4 ++-- StartPlan.tsx | 4 ++-- Switch.tsx | 7 ++++--- color.ts | 11 +++++++++++ 7 files changed, 29 insertions(+), 20 deletions(-) create mode 100644 color.ts diff --git a/App.tsx b/App.tsx index 783db43..3e3292d 100644 --- a/App.tsx +++ b/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(); @@ -76,7 +73,7 @@ const App = () => { }, [color, isDark, settings]); return ( - + }}> @@ -90,7 +87,7 @@ const App = () => { - + ); }; diff --git a/Chart.tsx b/Chart.tsx index 0ee44ec..d30e621 100644 --- a/Chart.tsx +++ b/Chart.tsx @@ -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; diff --git a/MassiveFab.tsx b/MassiveFab.tsx index 207463b..191b75a 100644 --- a/MassiveFab.tsx +++ b/MassiveFab.tsx @@ -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>, ) { - const {color} = useContext(CustomTheme); + const {color} = useColor(); const fabColor = lightColors.map(lightColor => lightColor.hex).includes(color) ? 'black' : undefined; diff --git a/SettingsPage.tsx b/SettingsPage.tsx index e63732a..3f22a5e 100644 --- a/SettingsPage.tsx +++ b/SettingsPage.tsx @@ -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( diff --git a/StartPlan.tsx b/StartPlan.tsx index bd96913..d158156 100644 --- a/StartPlan.tsx +++ b/StartPlan.tsx @@ -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(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, diff --git a/Switch.tsx b/Switch.tsx index 543f930..7f940a4 100644 --- a/Switch.tsx +++ b/Switch.tsx @@ -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(() => { diff --git a/color.ts b/color.ts new file mode 100644 index 0000000..2f5f353 --- /dev/null +++ b/color.ts @@ -0,0 +1,11 @@ +import React, {useContext} from 'react'; + +export const Color = React.createContext({ + color: '', + setColor: (_value: string) => {}, +}); + +export const useColor = () => { + const context = useContext(Color); + return context; +};