@chem-po/react-native 0.0.39 → 0.0.41

package/src/contexts/root.tsx

@@ -1,15 +1,21 @@
 import { BackendAdapterInterface, ColorMode, Theme } from '@chem-po/core'
-import { ChempoProps, ChempoProvider, useTheme } from '@chem-po/react'
+import { ChempoProps, ChempoProvider, defaultTheme } 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, ThemeProp } 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,45 +109,30 @@ 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 { theme, colorMode } = useTheme()
-
-  const paperTheme = useMemo(
-    () => createPaperTheme(theme, fonts, colorMode),
-    [theme, fonts, colorMode],
-  )
+const ChempoPaperProvider = ({
+  children,
+  paperTheme,
+}: PropsWithChildren<{ paperTheme: ThemeProp | undefined }>) => {
   return <PaperProvider theme={paperTheme}>{children}</PaperProvider>
 }
 
 const ProviderBody = ({
   children,
-  fonts,
   insetNotifier,
-}: PropsWithChildren<{ fonts?: FontConfig; insetNotifier?: boolean }>) => {
+  paperTheme,
+}: PropsWithChildren<{
+  insetNotifier?: boolean
+  paperTheme: ThemeProp | undefined
+}>) => {
   const { top } = useSafeAreaInsets()
 
   return (
-    <ChempoPaperProvider fonts={fonts}>
+    <ChempoPaperProvider paperTheme={paperTheme}>
       <NotifierWrapper containerStyle={{ paddingTop: insetNotifier ? top : 0 }}>
         {children}
       </NotifierWrapper>
@@ -136,7 +144,7 @@ export const ChempoNativeProvider = <BackendAdapter extends BackendAdapterInterf
   theme: themeProp,
   initialColorMode,
   children,
-  fonts,
+  fonts: fontConfig,
   colorModeProp,
   middlewareProvider: Middleware,
   insetNotifier,
@@ -148,23 +156,30 @@ export const ChempoNativeProvider = <BackendAdapter extends BackendAdapterInterf
   )
   const theme = useThemeState(useThemeProps)
 
+  const { theme: paperTheme, fonts } = useMemo(
+    () => createPaperTheme(theme.theme ?? defaultTheme, fontConfig, theme.colorMode),
+    [theme, fontConfig],
+  )
+
   const body = (
-    <ProviderBody insetNotifier={insetNotifier} fonts={fonts}>
+    <ProviderBody insetNotifier={insetNotifier} paperTheme={paperTheme}>
       {children}
     </ProviderBody>
   )
 
   return (
-    <ChempoProvider
-      toast={nativeToast}
-      theme={theme}
-      initializeScreen={initializeScreen}
-      {...props}>
-      <SafeAreaProvider>
-        <GestureHandlerRootView>
-          {Middleware ? <Middleware>{body}</Middleware> : body}
-        </GestureHandlerRootView>
-      </SafeAreaProvider>
-    </ChempoProvider>
+    <ChempoFontsProvider fonts={fonts}>
+      <ChempoProvider
+        toast={nativeToast}
+        theme={theme}
+        initializeScreen={initializeScreen}
+        {...props}>
+        <SafeAreaProvider>
+          <GestureHandlerRootView>
+            {Middleware ? <Middleware>{body}</Middleware> : body}
+          </GestureHandlerRootView>
+        </SafeAreaProvider>
+      </ChempoProvider>
+    </ChempoFontsProvider>
   )
 }

package/src/hooks/index.ts

@@ -1 +1,3 @@
+export * from './useFadeIn'
+export * from './useFont'
 export * from './useThemeState'

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)]
+}