@chem-po/react-native 0.0.28 → 0.0.29

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

@@ -3,6 +3,7 @@ import {
   SelectField,
   useBackgroundColor,
   useBorderColor,
+  useColorMode,
   useIconColor,
   usePlaceholderColor,
 } from '@chem-po/react'
@@ -29,6 +30,7 @@ const BaseSelectComponent = <T extends SelectField>(
   } = field
   const { onChange, value, onFocus, onBlur } = input
   const { active } = meta
+  const colorMode = useColorMode()
 
   const inputRef = useRef<IDropdownRef>(null)
   const {
@@ -70,8 +72,18 @@ const BaseSelectComponent = <T extends SelectField>(
         ref={inputRef}
         style={[inputStyles, { borderColor }]}
         placeholderStyle={[text, { color: placeholderColor }]}
+        containerStyle={{
+          backgroundColor: menuBg,
+          borderWidth: 0,
+          borderColor: 'transparent',
+          boxShadow: `0 0 10px ${borderColor}`,
+        }}
         selectedTextStyle={text}
-        inputSearchStyle={[styles.inputSearch, text]}
+        inputSearchStyle={[
+          styles.inputSearch,
+          text,
+          { backgroundColor: selectedOptionBg, borderColor: 'transparent' },
+        ]}
         iconStyle={styles.iconStyle}
         data={options}
         search={searchable}
@@ -95,7 +107,7 @@ const BaseSelectComponent = <T extends SelectField>(
             <RenderOptionText
               value={item.value}
               option={item}
-              colorMode="light"
+              colorMode={colorMode}
               isSelected={!!selected}
               size={size}
             />
@@ -108,13 +120,13 @@ const BaseSelectComponent = <T extends SelectField>(
               size={iconSize}
               color={iconColor}
             />
-            {optional && value ? (
+            {optional && value && !inEditable ? (
               <InputClearButton
                 size={clearButtonSize}
                 onPress={() => {
                   onChange(null)
                 }}
-                isActive={!!value}
+                isActive
               />
             ) : null}
           </View>

package/src/components/form/input/text/AutoResizeTextarea.tsx

@@ -0,0 +1,45 @@
+import { forwardRef } from 'react'
+import { StyleSheet, TextInput, TextInputProps } from 'react-native'
+
+import { useIconColor, useTextColor } from '@chem-po/react'
+
+import React from 'react'
+import { useWebAutoResize } from './useWebAutoResize'
+
+export const AutoResizeTextarea = forwardRef<TextInput, TextInputProps>(
+  ({ style, value, onChangeText, ...props }, ref) => {
+    const textColor = useTextColor()
+
+    const { handleChange, height, setHeight } = useWebAutoResize(onChangeText, style)
+
+    const iconColor = useIconColor()
+
+    return (
+      <TextInput
+        ref={ref}
+        cursorColor={iconColor}
+        onContentSizeChange={e => {
+          setHeight(e.nativeEvent.contentSize.height)
+        }}
+        multiline
+        style={[styles.textarea, { color: textColor, height }, style]}
+        value={value}
+        onChangeText={handleChange}
+        {...props}
+      />
+    )
+  },
+)
+const styles = StyleSheet.create({
+  textarea: {
+    width: '100%',
+    minHeight: 18,
+    backgroundColor: 'transparent',
+    textAlignVertical: 'top',
+    outlineWidth: 0,
+  },
+  inEditable: {
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+  },
+})

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

@@ -8,12 +8,16 @@ import { useInputStyles } from '../hooks/useInputStyles'
 import { TextAreaComponent } from './textarea'
 
 export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
-  ({ input, inEditable, meta, field, style, formSize }, ref) => {
+  ({ input, inEditable, meta, field, style, formSize, inputStyle }, ref) => {
     const { placeholder, type } = field
     const [isHidden, setIsHidden] = useState(type === 'password')
     const { value, onChange, ...inputProps } = input
     const inputRef = useRef<TextInput>(null)
-    const { container: inputStyles } = useInputStyles(inEditable, field.size, formSize)
+    const { container: conatinerStyles, text: inputStyles } = useInputStyles(
+      inEditable,
+      field.size,
+      formSize,
+    )
 
     useImperativeHandle(ref, () => ({
       focus: () => {
@@ -26,31 +30,44 @@ export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
 
     const placeholderColor = usePlaceholderColor()
     const color = useTextColor()
-    const body =
-      type === 'textarea' ? (
-        <TextAreaComponent inEditable={inEditable} field={field} input={input} meta={meta} />
-      ) : (
-        <TextInput
-          ref={inputRef}
-          style={[inputStyles, { color }, style]}
-          secureTextEntry={isHidden}
-          placeholderTextColor={placeholderColor}
-          placeholder={placeholder}
-          value={value ?? ''}
-          onChangeText={onChange}
-          {...inputProps}
+
+    if (type === 'textarea') {
+      return (
+        <TextAreaComponent
+          ref={ref}
+          formSize={formSize}
+          inputStyle={inputStyle}
+          inEditable={inEditable}
+          field={field}
+          style={style}
+          input={input}
+          meta={meta}
         />
       )
+    }
+
+    const body = (
+      <TextInput
+        ref={inputRef}
+        style={[inputStyles, { color }, inputStyle]}
+        secureTextEntry={isHidden}
+        placeholderTextColor={placeholderColor}
+        placeholder={placeholder}
+        value={value ?? ''}
+        onChangeText={onChange}
+        {...inputProps}
+      />
+    )
 
     return type === 'password' ? (
-      <View style={styles.passwordContainer}>
+      <View style={[conatinerStyles, styles.passwordContainer, style]}>
         {body}
         <TouchableOpacity style={styles.eyeIcon} onPress={() => setIsHidden(!isHidden)}>
           <Ionicons name={isHidden ? 'eye' : 'eye-off'} size={20} color="#666" />
         </TouchableOpacity>
       </View>
     ) : (
-      body
+      <View style={[conatinerStyles, style]}>{body}</View>
     )
   },
 )

package/src/components/form/input/text/textarea.tsx

@@ -1,14 +1,15 @@
 import { InputRef } from '@chem-po/core'
 import { TextField, usePlaceholderColor, useTextColor } from '@chem-po/react'
 import React, { forwardRef, useImperativeHandle, useRef } from 'react'
-import { StyleSheet, TextInput, View } from 'react-native'
+import { TextInput, View } from 'react-native'
 import { FieldProps } from '../../types'
 import { useInputStyles } from '../hooks/useInputStyles'
+import { AutoResizeTextarea } from './AutoResizeTextarea'
 
 export const TextAreaComponent = forwardRef<InputRef, FieldProps<TextField>>(
-  ({ input, field, inEditable, formSize }, ref) => {
+  ({ input, field, inEditable, formSize, inputStyle, style }, ref) => {
     const inputRef = useRef<TextInput>(null)
-    const { container: inputStyles } = useInputStyles(inEditable, field.size, formSize)
+    const { text, container } = useInputStyles(inEditable, field.size, formSize)
     const { value, onChange, ...inputProps } = input
 
     useImperativeHandle(ref, () => ({
@@ -24,15 +25,13 @@ export const TextAreaComponent = forwardRef<InputRef, FieldProps<TextField>>(
     const color = useTextColor()
 
     return (
-      <View style={inputStyles}>
-        <TextInput
+      <View style={[container, style]}>
+        <AutoResizeTextarea
           ref={inputRef}
-          style={[styles.textarea, inEditable && styles.inEditable, { color }]}
+          style={[{ color, ...text }, inputStyle]}
           placeholder={field.placeholder}
           placeholderTextColor={placeholderColor}
           multiline
-          maxLength={200}
-          textAlignVertical="top"
           value={value ?? ''}
           onChangeText={onChange}
           {...inputProps}
@@ -43,16 +42,3 @@ export const TextAreaComponent = forwardRef<InputRef, FieldProps<TextField>>(
 )
 
 TextAreaComponent.displayName = 'TextAreaComponent'
-
-const styles = StyleSheet.create({
-  textarea: {
-    width: '100%',
-    minHeight: 80,
-    backgroundColor: 'transparent',
-    textAlignVertical: 'top',
-  },
-  inEditable: {
-    paddingHorizontal: 0,
-    paddingVertical: 0,
-  },
-})

package/src/components/form/input/text/useWebAutoResize.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Platform, StyleProp, StyleSheet, TextStyle } from 'react-native'
+
+// creates a span element with the text and style and returns the height
+const getWebTextHeight = (text: string, spanRef: React.RefObject<HTMLSpanElement | null>) => {
+  if (!spanRef.current) return null
+  const span = spanRef.current
+  span.innerText = `${text}\n`
+  document.body.appendChild(span)
+  const height = span.offsetHeight
+  document.body.removeChild(span)
+  return height
+}
+
+const updateSpanStyle = (span: HTMLSpanElement, style: TextStyle | undefined) => {
+  span.style.whiteSpace = 'pre-wrap'
+  if (style?.fontFamily) {
+    span.style.fontFamily = style.fontFamily
+  }
+  if (style?.fontSize) {
+    span.style.fontSize = style.fontSize.toString() + 'px'
+  }
+  if (style?.fontWeight) {
+    span.style.fontWeight = style.fontWeight.toString()
+  }
+  if (style?.lineHeight) {
+    span.style.lineHeight = style.lineHeight.toString()
+  }
+  if (style?.letterSpacing) {
+    span.style.letterSpacing = style.letterSpacing.toString()
+  }
+  if (style?.textAlign) {
+    span.style.textAlign = style.textAlign
+  }
+}
+
+export const useWebAutoResize = (
+  onChangeText: ((e: string) => void) | undefined,
+  style: StyleProp<TextStyle> | undefined,
+) => {
+  const [height, setHeight] = useState(18)
+  const spanRef = useRef<HTMLSpanElement>(
+    Platform.OS === 'web' ? document.createElement('span') : null,
+  )
+
+  useEffect(() => {
+    if (Platform.OS === 'web' && spanRef.current) {
+      updateSpanStyle(spanRef.current, {
+        ...StyleSheet.flatten(style),
+      })
+    }
+  }, [style])
+  const handleChange = useMemo(
+    () =>
+      Platform.OS === 'web'
+        ? (e: string) => {
+            if (spanRef.current) {
+              const height = getWebTextHeight(e, spanRef)
+              setHeight(height ?? 18)
+              if (onChangeText) onChangeText(e)
+            }
+          }
+        : onChangeText,
+    [onChangeText],
+  )
+  return {
+    getWebTextHeight,
+    handleChange,
+    height,
+    setHeight,
+  }
+}

package/src/components/form/types.ts

@@ -1,4 +1,8 @@
 import { BaseFieldProps, Field } from '@chem-po/react'
-import { StyleProp } from 'react-native'
+import { StyleProp, TextStyle, ViewStyle } from 'react-native'
 
-export type FieldProps<T extends Field> = BaseFieldProps<StyleProp<any>, T>
+export type FieldProps<
+  T extends Field,
+  ContainerStyle extends ViewStyle = ViewStyle,
+  InputStyle extends TextStyle = TextStyle,
+> = BaseFieldProps<StyleProp<ContainerStyle>, StyleProp<InputStyle>, T>

package/src/contexts/root.tsx

@@ -1,24 +1,121 @@
 import { BackendAdapterInterface, ColorMode, Theme } from '@chem-po/core'
-import { ChempoProps, ChempoProvider } from '@chem-po/react'
+import { ChempoProps, ChempoProvider, useTheme } from '@chem-po/react'
 import React, { PropsWithChildren, useMemo } from 'react'
 import { NotifierWrapper } from 'react-native-notifier'
+import { configureFonts, 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 { nativeToast } from '../constants/toast'
 import { useThemeState } from '../hooks/useThemeState'
 import { initializeScreen } from '../store/useScreen'
 
 registerTranslation('en', en)
 
+export type FontConfig = Partial<Record<MD3TypescaleKey, Partial<MD3Type>>>
 export interface ChempoNativeProviderProps<BackendAdapter extends BackendAdapterInterface>
   extends PropsWithChildren<Pick<ChempoProps<BackendAdapter>, 'backendAdapter' | 'assets'>> {
   theme?: Theme
+  fonts?: FontConfig
   initialColorMode?: ColorMode
 }
+const createPaperTheme = (
+  theme: Theme,
+  fonts: FontConfig | undefined,
+  colorMode: ColorMode,
+): PaperProviderProps['theme'] => {
+  const { colors } = theme
+
+  return {
+    dark: colorMode === 'dark',
+    colors: {
+      primary: colors.accent[200],
+      onPrimary: colors.text[900],
+      primaryContainer: colors.accent[500],
+      onPrimaryContainer: colors.text[300],
+
+      secondary: colors.background[150],
+      onSecondary: colors.text[100],
+      secondaryContainer: colors.background[50],
+      onSecondaryContainer: colors.text[150],
+
+      tertiary: colors.accent[600],
+      onTertiary: colors.text[50],
+      tertiaryContainer: colors.accent[300],
+      onTertiaryContainer: colors.text[700],
+
+      error: colors.error[500],
+      onError: colors.text[50],
+      errorContainer: colors.error[100],
+      onErrorContainer: colors.error[900],
+
+      background: colors.background[50],
+      onBackground: colors.text[100],
+      surface: colors.background[100],
+      onSurface: colors.text[100],
+      surfaceVariant: colors.background[200],
+      onSurfaceVariant: colors.text[250],
+      outline: colors.text[500],
+      outlineVariant: colors.accent[300],
+
+      surfaceDisabled: colors.background[200],
+      onSurfaceDisabled: colors.text[400],
+      backdrop: '#000000aa', // 60% opacity
+
+      inverseSurface: colors.background[900],
+      inverseOnSurface: colors.text[50],
+      inversePrimary: colors.accent[200],
+      shadow: '#00000099',
+      scrim: '#00000099', // Semi-transparent dark overlay
+
+      elevation: {
+        level0: 'transparent',
+        level1: colors.background[100],
+        level2: colors.background[200],
+        level3: colors.background[300],
+        level4: colors.background[400],
+        level5: colors.background[500],
+      },
+    },
+    roundness: 4,
+    animation: {
+      scale: 1.0,
+    },
+    fonts: configureFonts({
+      config: {
+        ...fonts,
+        bodyLarge: {
+          fontSize: 18,
+          ...fonts?.bodyLarge,
+        },
+        bodyMedium: {
+          fontSize: 17,
+          ...fonts?.bodyMedium,
+        },
+        bodySmall: {
+          fontSize: 15,
+          ...fonts?.bodySmall,
+        },
+      },
+    }),
+  }
+}
+
+const ChempoPaperProvider = ({ children, fonts }: PropsWithChildren<{ fonts?: FontConfig }>) => {
+  const { theme, colorMode } = useTheme()
+
+  const paperTheme = useMemo(
+    () => createPaperTheme(theme, fonts, colorMode),
+    [theme, fonts, colorMode],
+  )
+  return <PaperProvider theme={paperTheme}>{children}</PaperProvider>
+}
 export const ChempoNativeProvider = <
   BackendAdapter extends BackendAdapterInterface<any, any, any, any, any, any>,
 >({
   theme: themeProp,
   initialColorMode,
+  children,
+  fonts,
   ...props
 }: ChempoNativeProviderProps<BackendAdapter>) => {
   const useThemeProps = useMemo(
@@ -32,8 +129,9 @@ export const ChempoNativeProvider = <
         toast={nativeToast}
         theme={theme}
         initializeScreen={initializeScreen}
-        {...props}
-      />
+        {...props}>
+        <ChempoPaperProvider fonts={fonts}>{children}</ChempoPaperProvider>
+      </ChempoProvider>
     </NotifierWrapper>
   )
 }