@chem-po/react-native 0.0.47 → 0.0.49

package/src/components/form/input/Editable.tsx

@@ -12,6 +12,7 @@ import { Ionicons } from '@expo/vector-icons'
 import React, { ForwardedRef, useCallback, useEffect } from 'react'
 import { StyleSheet, TextStyle, View, ViewStyle } from 'react-native'
 import { Pressable } from 'react-native-gesture-handler'
+import { useFontScale } from '../../../store/useFontScale'
 import { CustomInputProps } from '../../../types/forms'
 import { LoadingOverlay } from '../../loading/LoadingOverlay'
 import { UploadProgress } from '../UploadProgress'
@@ -29,6 +30,7 @@ export const Editable = <T extends Field>({
   containerStyle,
   size,
   CustomInput,
+  ref,
   CustomView,
   inputStyle,
 }: EditableProps<ViewStyle, TextStyle, T>) => {
@@ -39,12 +41,12 @@ export const Editable = <T extends Field>({
     uploads,
     editHovered,
     handleEditOpen,
-    handleEditClose,
     isEditing,
     shouldSubmitOnChange,
+    handleEditClose,
+    submit,
     value,
     setEditHovered,
-    submit,
   } = useEditable({
     value: initValue,
     field,
@@ -52,7 +54,9 @@ export const Editable = <T extends Field>({
     storagePath,
     onEditOpen,
     onEditClose,
+    ref,
   })
+  const fontScale = useFontScale(s => s.fontScale)
 
   useEffect(() => {
     if (isEditing) {
@@ -61,8 +65,8 @@ export const Editable = <T extends Field>({
   }, [isEditing, inputRef])
 
   const iconColor = useIconColor()
+  const submitBackgroundColor = useThemeValue('colors.accent.600')
   const editingBorderColor = useColorModeValue('#00000055', '#ffffff55')
-  const submitColor = useThemeValue('colors.accent.600')
 
   const RenderInput = useCallback(
     (props: CustomInputProps<T['defaultValue']>, ref?: ForwardedRef<InputRef | null>) => {
@@ -110,21 +114,57 @@ export const Editable = <T extends Field>({
             <RenderView inEditable noLabel size={size} value={value} />
           )}
         </View>
-        {!shouldSubmitOnChange && (
+        {!shouldSubmitOnChange ? (
           <View style={styles.buttonsContainer}>
-            {isEditing ? null : (
+            {isEditing ? (
+              <>
+                <Pressable
+                  onPress={() => {
+                    handleEditClose()
+                  }}
+                  style={[
+                    styles.submitButton,
+                    {
+                      borderColor: iconColor,
+                      borderWidth: 1,
+                      width: 28 * fontScale,
+                      height: 28 * fontScale,
+                    },
+                  ]}
+                  onPressIn={() => setEditHovered(true)}
+                  onPressOut={() => setEditHovered(false)}>
+                  <Ionicons name="close-outline" size={20 * fontScale} color={iconColor} />
+                </Pressable>
+                <Pressable
+                  onPress={() => {
+                    submit()
+                  }}
+                  style={[
+                    styles.submitButton,
+                    {
+                      backgroundColor: submitBackgroundColor,
+                      width: 28 * fontScale,
+                      height: 28 * fontScale,
+                    },
+                  ]}
+                  onPressIn={() => setEditHovered(true)}
+                  onPressOut={() => setEditHovered(false)}>
+                  <Ionicons color="white" name="checkmark-outline" size={20 * fontScale} />
+                </Pressable>
+              </>
+            ) : (
               <Pressable
                 onPress={() => {
                   handleEditOpen()
                 }}
-                style={styles.submitButton}
+                style={[styles.submitButton, { width: 28 * fontScale, height: 28 * fontScale }]}
                 onPressIn={() => setEditHovered(true)}
                 onPressOut={() => setEditHovered(false)}>
-                <Ionicons name="create-outline" size={20} color={iconColor} />
+                <Ionicons name="create-outline" size={20 * fontScale} color={iconColor} />
               </Pressable>
             )}
           </View>
-        )}
+        ) : null}
         <LoadingOverlay loading={isLoading} />
       </View>
       <UploadProgress uploads={uploads} />
@@ -141,6 +181,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     paddingTop: 6,
+    paddingHorizontal: 4,
     gap: 10,
   },
   contentContainer: {
@@ -155,14 +196,9 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderStyle: 'dashed',
   },
-  submitButtonContainer: {
-    flexDirection: 'row',
-    overflow: 'hidden',
-    gap: 12,
-  },
   submitButton: {
-    width: 24,
-    height: 24,
+    width: 28,
+    height: 28,
     borderRadius: 4,
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/form/input/boolean/index.tsx

@@ -1,7 +1,8 @@
 import { InputRef } from '@chem-po/core'
 import { BooleanField, useBooleanFieldText } from '@chem-po/react'
 import React, { ForwardedRef, forwardRef, useImperativeHandle } from 'react'
-import { Switch, Text, View } from 'react-native'
+import { Switch, View } from 'react-native'
+import { Txt } from '../../../text/Txt'
 import { FieldProps } from '../../types'
 
 const BaseCheckboxComponent = (
@@ -16,7 +17,7 @@ const BaseCheckboxComponent = (
   return (
     <View style={{ flexDirection: 'row', alignItems: 'center' }}>
       <Switch value={value} onValueChange={onChange} {...input} />
-      <Text style={{ marginLeft: 8, fontWeight: '600', opacity: value ? 0.9 : 0.6 }}>{text}</Text>
+      <Txt style={{ marginLeft: 8, fontWeight: '600', opacity: value ? 0.9 : 0.6 }}>{text}</Txt>
     </View>
   )
 }
@@ -37,7 +38,7 @@ const BaseSwitchComponent = (
   return (
     <View style={{ flexDirection: 'row', alignItems: 'center' }}>
       <Switch value={value} onValueChange={onChange} {...input} />
-      <Text style={{ marginLeft: 8, fontWeight: '600', opacity: value ? 0.9 : 0.6 }}>{text}</Text>
+      <Txt style={{ marginLeft: 8, fontWeight: '600', opacity: value ? 0.9 : 0.6 }}>{text}</Txt>
     </View>
   )
 }

package/src/components/form/input/file/index.tsx

@@ -15,6 +15,7 @@ import * as ImagePicker from 'expo-image-picker'
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react'
 import { Platform, StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'
 import { Pressable } from 'react-native-gesture-handler'
+import { useFontScale } from '../../../../store/useFontScale'
 import { downloadFile } from '../../../../utils/downloadFile'
 import { LoadingImage } from '../../../loading/LoadingImage'
 import { FieldProps } from '../../types'
@@ -38,12 +39,13 @@ const NoFileView = ({ hasUpload, onPress }: { hasUpload?: boolean; onPress?: ()
   const textColor = useTextColor()
   const iconColor = useIconColor()
   const borderColor = useBorderColor()
+  const fontScale = useFontScale(s => s.fontScale)
   return (
     <Pressable style={[styles.noFileContainer, { borderColor }]} onPress={onPress}>
       <Text style={[styles.noFileText, { color: textColor }]}>
         {hasUpload ? 'Tap to upload file' : 'No file uploaded'}
       </Text>
-      <Ionicons name="cloud-upload" size={24} color={iconColor} />
+      <Ionicons name="cloud-upload" size={24 * fontScale} color={iconColor} />
     </Pressable>
   )
 }

package/src/components/loading/LoadingOverlay.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react'
 import { Animated, StyleProp, StyleSheet, ViewStyle } from 'react-native'
 import { FadeInOptions, useFadeIn } from '../../hooks/useFadeIn'
+import { useFontScale } from '../../store/useFontScale'
 import { CircularProgress, CircularProgressProps } from './CircularProgress'
-
 const loadingFadeInProps: FadeInOptions = {
   activeOpacity: 0.8,
   duration: 100,
@@ -22,10 +22,11 @@ export const LoadingOverlay = ({
   const opts = useMemo(() => ({ ...loadingFadeInProps, ...fadeOptions }), [fadeOptions])
   const opacity = useFadeIn(loading, opts)
 
+  const fontScale = useFontScale(s => s.fontScale)
   return (
     <Animated.View
       style={[styles.overlay, style, { opacity, pointerEvents: loading ? 'auto' : 'none' }]}>
-      <CircularProgress {...indicatorProps} />
+      <CircularProgress size={indicatorProps?.size ?? 20 * fontScale} {...indicatorProps} />
     </Animated.View>
   )
 }

package/src/components/text/AnimatedText.tsx

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren, useEffect, useMemo, useRef } from 'react'
 import { Animated, StyleProp, TextStyle } from 'react-native'
+import { useFontScale } from '../../store/useFontScale'
 
 export interface AnimatedTextProps {
   show: boolean
@@ -10,6 +11,7 @@ export interface AnimatedTextProps {
 }
 const useAnimatedText = (show: boolean, color: string, height: number, marginBottom: number) => {
   const placeholderAnim = useRef(new Animated.Value(0)).current
+  const fontScale = useFontScale(s => s.fontScale)
 
   useEffect(() => {
     Animated.timing(placeholderAnim, {
@@ -33,14 +35,14 @@ const useAnimatedText = (show: boolean, color: string, height: number, marginBot
       ],
       height: placeholderAnim.interpolate({
         inputRange: [0, 1],
-        outputRange: [0, height],
+        outputRange: [0, height * fontScale],
       }),
       marginBottom: placeholderAnim.interpolate({
         inputRange: [0, 1],
-        outputRange: [0, marginBottom],
+        outputRange: [0, marginBottom * fontScale],
       }),
     }),
-    [color, height, marginBottom, placeholderAnim],
+    [color, height, marginBottom, placeholderAnim, fontScale],
   )
 }
 

package/src/contexts/root.tsx

@@ -13,6 +13,7 @@ import { en, registerTranslation } from 'react-native-paper-dates'
 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 { useRefreshFontScale } from '../hooks/useRefreshFontScale'
 import { UseThemeProps, useThemeState } from '../hooks/useThemeState'
 import { initializeScreen } from '../store/useScreen'
 import { ChempoFontsProvider } from './fonts'
@@ -21,14 +22,16 @@ registerTranslation('en', en)
 
 export type FontConfig = Partial<Record<MD3TypescaleKey, Partial<MD3Type>>>
 export type MiddlewareProvider = FC<PropsWithChildren>
-export interface ChempoNativeProviderProps<BackendAdapter extends BackendAdapterInterface>
-  extends PropsWithChildren<Pick<ChempoProps<BackendAdapter>, 'backendAdapter' | 'assets'>> {
+export interface ChempoNativeProviderProps<
+  BackendAdapter extends BackendAdapterInterface,
+> extends PropsWithChildren<Pick<ChempoProps<BackendAdapter>, 'backendAdapter' | 'assets'>> {
   theme?: Theme
   fonts?: FontConfig
   initialColorMode?: ColorMode
   colorModeProp?: string
   middlewareProvider?: MiddlewareProvider
   insetNotifier?: boolean
+  disableFontScaling?: boolean
 }
 const createPaperTheme = (
   themeConfig: Theme,
@@ -148,6 +151,7 @@ export const ChempoNativeProvider = <BackendAdapter extends BackendAdapterInterf
   colorModeProp,
   middlewareProvider: Middleware,
   insetNotifier,
+  disableFontScaling,
   ...props
 }: ChempoNativeProviderProps<BackendAdapter>) => {
   const useThemeProps = useMemo<UseThemeProps>(
@@ -155,6 +159,7 @@ export const ChempoNativeProvider = <BackendAdapter extends BackendAdapterInterf
     [themeProp, initialColorMode, colorModeProp],
   )
   const theme = useThemeState(useThemeProps)
+  useRefreshFontScale(disableFontScaling)
 
   const { theme: paperTheme, fonts } = useMemo(
     () => createPaperTheme(theme.theme ?? defaultTheme, fontConfig, theme.colorMode),

package/src/hooks/useRefreshFontScale.ts

@@ -0,0 +1,26 @@
+import { useEffect } from 'react'
+import { AppState, PixelRatio } from 'react-native'
+import { useFontScale } from '../store/useFontScale'
+
+/**
+ * Subscribes to app state and refreshes the global font scale when the app
+ * becomes active (cold start or returning from background). Call once near the
+ * root of the app (e.g. in _layout).
+ */
+export function useRefreshFontScale(disableFontScaling = false) {
+  useEffect(() => {
+    if (disableFontScaling) {
+      useFontScale.setState({ fontScale: 1 })
+      return () => {}
+    }
+    const refresh = () => useFontScale.setState({ fontScale: PixelRatio.getFontScale() ?? 1 })
+
+    refresh()
+
+    const sub = AppState.addEventListener('change', nextState => {
+      if (nextState === 'active') refresh()
+    })
+
+    return () => sub.remove()
+  }, [disableFontScaling])
+}

package/src/store/index.ts

@@ -1 +1,2 @@
+export * from './useFontScale'
 export * from './useScreen'

package/src/store/useFontScale.ts

@@ -0,0 +1,8 @@
+import { PixelRatio } from 'react-native'
+import { create } from 'zustand'
+
+// export const normalizeFontScale = (fontScale: number) =>
+//   fontScale > 1 ? (fontScale - 1) * 0.5 + 1 : fontScale
+export const useFontScale = create<{ fontScale: number }>(() => ({
+  fontScale: PixelRatio.getFontScale() ?? 1,
+}))