@chem-po/react-native 0.0.39 → 0.0.40

package/src/contexts/root.tsx

@@ -3,13 +3,19 @@ import { ChempoProps, ChempoProvider, useTheme } from '@chem-po/react'
 import React, { FC, PropsWithChildren, useMemo } from 'react'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { NotifierWrapper } from 'react-native-notifier'
-import { configureFonts, PaperProvider, Props as PaperProviderProps } from 'react-native-paper'
+import {
+  configureFonts,
+  MD3TypescaleKey,
+  PaperProvider,
+  Props as PaperProviderProps,
+} from 'react-native-paper'
 import { en, registerTranslation } from 'react-native-paper-dates'
-import { MD3Type, MD3TypescaleKey } from 'react-native-paper/lib/typescript/types'
+import { MD3Type, MD3Typescale } from 'react-native-paper/lib/typescript/types'
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { nativeToast } from '../constants/toast'
 import { UseThemeProps, useThemeState } from '../hooks/useThemeState'
 import { initializeScreen } from '../store/useScreen'
+import { ChempoFontsProvider } from './fonts'
 
 registerTranslation('en', en)
 
@@ -25,13 +31,30 @@ export interface ChempoNativeProviderProps<BackendAdapter extends BackendAdapter
   insetNotifier?: boolean
 }
 const createPaperTheme = (
-  theme: Theme,
-  fonts: FontConfig | undefined,
+  themeConfig: Theme,
+  font: FontConfig | undefined,
   colorMode: ColorMode,
-): PaperProviderProps['theme'] => {
-  const { colors } = theme
-
-  return {
+): { theme: PaperProviderProps['theme']; fonts: MD3Typescale } => {
+  const { colors } = themeConfig
+
+  const fonts = configureFonts({
+    config: {
+      ...font,
+      bodyLarge: {
+        fontSize: 18,
+        ...font?.bodyLarge,
+      },
+      bodyMedium: {
+        fontSize: 17,
+        ...font?.bodyMedium,
+      },
+      bodySmall: {
+        fontSize: 16,
+        ...font?.bodySmall,
+      },
+    },
+  })
+  const theme = {
     dark: colorMode === 'dark',
     colors: {
       primary: colors.accent[300],
@@ -86,34 +109,26 @@ const createPaperTheme = (
     animation: {
       scale: 1.0,
     },
-    fonts: configureFonts({
-      config: {
-        ...fonts,
-        bodyLarge: {
-          fontSize: 18,
-          ...fonts?.bodyLarge,
-        },
-        bodyMedium: {
-          fontSize: 17,
-          ...fonts?.bodyMedium,
-        },
-        bodySmall: {
-          fontSize: 16,
-          ...fonts?.bodySmall,
-        },
-      },
-    }),
+    fonts,
   }
+  return { theme, fonts }
 }
 
-const ChempoPaperProvider = ({ children, fonts }: PropsWithChildren<{ fonts?: FontConfig }>) => {
+const ChempoPaperProvider = ({
+  children,
+  fonts: fontConfig,
+}: PropsWithChildren<{ fonts?: FontConfig }>) => {
   const { theme, colorMode } = useTheme()
 
-  const paperTheme = useMemo(
-    () => createPaperTheme(theme, fonts, colorMode),
-    [theme, fonts, colorMode],
+  const { theme: paperTheme, fonts } = useMemo(
+    () => createPaperTheme(theme, fontConfig, colorMode),
+    [theme, fontConfig, colorMode],
+  )
+  return (
+    <ChempoFontsProvider fonts={fonts}>
+      <PaperProvider theme={paperTheme}>{children}</PaperProvider>
+    </ChempoFontsProvider>
   )
-  return <PaperProvider theme={paperTheme}>{children}</PaperProvider>
 }
 
 const ProviderBody = ({

package/src/hooks/useFadeIn.ts

@@ -24,7 +24,7 @@ export const useFadeIn = (active: boolean, opts?: FadeInOptions) => {
     enterDelay = 0,
     exitDelay = 0,
   } = opts ?? defaultFadeInOptions
-  const opacity = useRef(new Animated.Value(0))
+  const opacity = useRef(new Animated.Value(active ? activeOpacity : inactiveOpacity))
 
   useEffect(() => {
     if (active) {

package/src/hooks/useFont.ts

@@ -0,0 +1,25 @@
+import { useChempoFonts } from '../contexts/fonts'
+
+export type FontFamilyType = 'display' | 'body' | 'label' | 'headline' | 'title'
+export type FontSize = 'lg' | 'md' | 'sm'
+export type FontSizeKey = 'Small' | 'Medium' | 'Large'
+export type FontKey = `${FontFamilyType}${FontSizeKey}`
+
+const getFontKeySize = (fontSize: FontSize): FontSizeKey => {
+  switch (fontSize) {
+    case 'lg':
+      return 'Large'
+    case 'md':
+      return 'Medium'
+    default:
+      return 'Small'
+  }
+}
+
+const getFontKey = (fontFamily: FontFamilyType, fontSize: FontSize): FontKey =>
+  `${fontFamily}${getFontKeySize(fontSize)}`
+
+export const useFont = (fontFamily: FontFamilyType, fontSize: FontSize) => {
+  const { fonts } = useChempoFonts()
+  return fonts[getFontKey(fontFamily, fontSize)]
+}