@chem-po/react-native 0.0.29 → 0.0.31

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

@@ -1,4 +1,6 @@
+import { InputRef } from '@chem-po/core'
 import {
+  CustomEditableViewProps,
   EditableProps,
   Field,
   useColorModeValue,
@@ -7,8 +9,11 @@ import {
   useThemeValue,
 } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import React, { useCallback, useEffect, useMemo } from 'react'
-import { StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native'
+import React, { ForwardedRef, useCallback, useEffect, useMemo } from 'react'
+import { StyleSheet, TextStyle, View, ViewStyle } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
+import { CustomInputProps } from '../../../types/forms'
+import { CollapseHorizontal } from '../../layout/CollapseHorizontal'
 import { LoadingOverlay } from '../../loading/LoadingOverlay'
 import { UploadProgress } from '../UploadProgress'
 import { FieldView } from '../view'
@@ -24,7 +29,9 @@ export const Editable = <T extends Field>({
   onEditOpen,
   containerStyle,
   size,
-}: EditableProps<ViewStyle, T>) => {
+  CustomInput,
+  CustomView,
+}: EditableProps<ViewStyle, TextStyle, T>) => {
   const {
     inputRef,
     setValue,
@@ -36,7 +43,6 @@ export const Editable = <T extends Field>({
     isEditing,
     value,
     setEditHovered,
-    submitValue,
     submit,
   } = useEditable({
     value: initValue,
@@ -48,6 +54,7 @@ export const Editable = <T extends Field>({
   })
 
   const alwaysEditing = useMemo(() => {
+    if (!field) return false
     switch (field._type) {
       case 'file':
       case 'boolean':
@@ -57,29 +64,6 @@ export const Editable = <T extends Field>({
     }
   }, [field])
 
-  const shouldSubmitOnChange = useMemo(() => {
-    if (alwaysEditing) return true
-    switch (field._type) {
-      case 'select':
-      case 'date':
-      case 'time':
-      case 'datetime':
-        return true
-      default:
-        return false
-    }
-  }, [field, alwaysEditing])
-
-  const noCloseButton = useMemo(() => {
-    if (alwaysEditing) return true
-    switch (field._type) {
-      case 'select':
-        return true
-      default:
-        return false
-    }
-  }, [field, alwaysEditing])
-
   useEffect(() => {
     if (isEditing) {
       inputRef.current?.focus()
@@ -90,100 +74,83 @@ export const Editable = <T extends Field>({
   const editingBorderColor = useColorModeValue('#00000055', '#ffffff55')
   const submitColor = useThemeValue('colors.accent.600')
 
-  const handleBlur = useCallback(() => {
-    switch (field._type) {
-      case 'select':
-      case 'date':
-      case 'time':
-      case 'datetime':
-        handleEditClose()
-        break
-      default:
-        break
-    }
-  }, [field, handleEditClose])
+  const RenderInput = useCallback(
+    (props: CustomInputProps<T['defaultValue']>, ref?: ForwardedRef<InputRef | null>) => {
+      if (CustomInput) {
+        return <CustomInput {...props} ref={ref} />
+      }
+      if (!field) throw new Error('Editable component must have a field OR a CustomInput')
+      return <StandaloneInput ref={ref} field={field} {...props} />
+    },
+    [CustomInput, field],
+  )
 
-  const editableField = useMemo(
-    () => ({
-      ...field,
-      // optional: false,
-    }),
-    [field],
+  const RenderView = useCallback(
+    (props: CustomEditableViewProps<T['defaultValue']>) => {
+      if (CustomView) {
+        return <CustomView {...props} />
+      }
+      if (!field) throw new Error('Editable component must have a field OR a CustomView')
+      return <FieldView field={field} {...props} />
+    },
+    [CustomView, field],
   )
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          borderColor: editHovered && !isEditing ? editingBorderColor : 'transparent',
-        },
-        containerStyle,
-      ]}>
+    <View style={[styles.container, containerStyle]}>
       <View style={styles.contentContainer}>
         <View
           style={[
             styles.inputContainer,
             {
               opacity: isLoading ? 0 : 1,
-              borderColor: isEditing ? editingBorderColor : 'transparent',
+              borderColor: isEditing || editHovered ? editingBorderColor : 'transparent',
             },
           ]}>
           {isEditing || alwaysEditing ? (
-            <StandaloneInput
+            <RenderInput
+              onChange={setValue}
               ref={inputRef}
               value={value}
               inEditable
-              field={editableField}
               style={style}
               size={size}
-              onChange={shouldSubmitOnChange ? v => submitValue(v) : setValue}
-              onBlur={handleBlur}
             />
           ) : (
-            <FieldView noLabel style={style} size={size} field={field} value={value} />
+            <RenderView inEditable noLabel size={size} value={value} />
           )}
         </View>
         {!alwaysEditing && (
           <View style={styles.buttonsContainer}>
-            {isEditing ? null : (
-              <TouchableOpacity
-                style={styles.editButton}
+            <CollapseHorizontal in={!isEditing}>
+              <Pressable
                 onPress={() => {
                   handleEditOpen()
                 }}
+                style={styles.submitButton}
                 onPressIn={() => setEditHovered(true)}
                 onPressOut={() => setEditHovered(false)}>
                 <Ionicons name="create-outline" size={20} color={iconColor} />
-              </TouchableOpacity>
-            )}
-            {noCloseButton || !isEditing ? null : (
-              <TouchableOpacity
-                style={styles.editButton}
+              </Pressable>
+            </CollapseHorizontal>
+            <CollapseHorizontal in={isEditing} style={styles.submitButtonContainer}>
+              <Pressable
                 onPress={() => {
                   handleEditClose()
                 }}
+                style={styles.submitButton}
                 onPressIn={() => setEditHovered(true)}
                 onPressOut={() => setEditHovered(false)}>
                 <Ionicons name="close" size={20} color={iconColor} />
-              </TouchableOpacity>
-            )}
-            <View
-              style={[
-                styles.submitButtonContainer,
-                {
-                  width: isEditing ? 26 : 0,
-                  opacity: isEditing ? 1 : 0,
-                },
-              ]}>
-              <TouchableOpacity
+              </Pressable>
+              <Pressable
                 style={[styles.submitButton, { backgroundColor: submitColor }]}
                 onPress={() => {
                   submit()
                 }}>
                 <Ionicons name="checkmark" size={20} color="#fff" />
-              </TouchableOpacity>
-            </View>
+              </Pressable>
+            </CollapseHorizontal>
           </View>
         )}
         <LoadingOverlay loading={isLoading} />
@@ -196,20 +163,16 @@ export const Editable = <T extends Field>({
 const styles = StyleSheet.create({
   container: {
     borderRadius: 4,
-    borderWidth: 1,
-    borderStyle: 'dashed',
     width: '100%',
   },
   buttonsContainer: {
     flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-    marginLeft: 5,
+    justifyContent: 'center',
+    paddingTop: 6,
   },
   contentContainer: {
     flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 4,
+    gap: 10,
     position: 'relative',
     width: '100%',
   },
@@ -219,13 +182,10 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderStyle: 'dashed',
   },
-  editButton: {
-    padding: 4,
-  },
   submitButtonContainer: {
-    justifyContent: 'center',
-    alignItems: 'center',
+    flexDirection: 'row',
     overflow: 'hidden',
+    gap: 12,
   },
   submitButton: {
     width: 24,

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

@@ -1,24 +1,15 @@
-import { InputRef, InputSize } from '@chem-po/core'
-import { Field, useStandaloneInput } from '@chem-po/react'
+import { InputRef } from '@chem-po/core'
+import { BaseCustomInputProps, Field, useStandaloneInput } from '@chem-po/react'
 import React, { ForwardedRef, forwardRef } from 'react'
-import { StyleProp, TextStyle, ViewStyle } from 'react-native'
+import { TextStyle, ViewStyle } from 'react-native'
 import { Input } from './input'
 
 interface StandaloneInputProps<
   T extends Field,
   ContainerStyle extends ViewStyle = ViewStyle,
   InputStyle extends TextStyle = TextStyle,
-> {
-  onChange: (v?: any) => void
-  value?: any
+> extends BaseCustomInputProps<T['defaultValue'], ContainerStyle, InputStyle> {
   field: T
-  onBlur?: () => void
-  onFocus?: () => void
-  theme?: 'basic' | 'detailed'
-  inEditable?: boolean
-  style?: StyleProp<ContainerStyle>
-  inputStyle?: StyleProp<InputStyle>
-  size?: InputSize
 }
 
 const StandaloneInputBase = <

package/src/components/form/input/common/InputClearButton.tsx

@@ -1,7 +1,8 @@
 import { useBackgroundColor, useBorderColor, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React from 'react'
-import { StyleSheet, TouchableOpacity } from 'react-native'
+import { StyleSheet } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 
 export const InputClearButton = ({
   onPress,
@@ -18,7 +19,7 @@ export const InputClearButton = ({
   const borderColor = useBorderColor()
   const backgroundColor = useBackgroundColor(100)
   return (
-    <TouchableOpacity
+    <Pressable
       onPress={onPress}
       style={[
         styles.closeButton,
@@ -27,7 +28,7 @@ export const InputClearButton = ({
       hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
       disabled={!isActive}>
       <Ionicons name="close" size={size} color={iconColor} style={{ alignSelf: 'center' }} />
-    </TouchableOpacity>
+    </Pressable>
   )
 }
 

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

@@ -2,9 +2,11 @@ import { getDateString, InputRef } from '@chem-po/core'
 import { DateField, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { forwardRef, useImperativeHandle, useMemo } from 'react'
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
+import { Gesture, GestureDetector } from 'react-native-gesture-handler'
 import { Portal } from 'react-native-paper'
 import { DatePickerModal } from 'react-native-paper-dates'
+import { runOnJS } from 'react-native-reanimated'
 import { FieldProps } from '../../types'
 import { DateInputClearButton } from '../common/InputClearButton'
 import { useInputColor } from '../hooks/useInputColor'
@@ -46,24 +48,28 @@ export const DateInput = forwardRef<InputRef, FieldProps<DateField>>(
       },
     }))
 
-    const showDialog = () => {
-      onFocus()
-    }
-
     const iconColor = useIconColor()
     const inputColor = useInputColor(value)
 
     const minDateObj = minDate === 'now' ? new Date() : minDate ? new Date(minDate) : undefined
     const maxDateObj = maxDate === 'now' ? new Date() : maxDate ? new Date(maxDate) : undefined
 
+    const mainTap = Gesture.Tap().onStart(() => {
+      runOnJS(onFocus)()
+    })
+
     return (
       <View style={styles.container}>
-        <TouchableOpacity style={[styles.button, inputStyles]} onPress={showDialog}>
-          <Text style={[styles.text, text, { color: inputColor }]}>
-            {value ? getDateString(value, 'short') : placeholder}
-          </Text>
+        <View style={[styles.button, inputStyles]}>
+          <GestureDetector gesture={mainTap}>
+            <View style={styles.textContainer}>
+              <Text numberOfLines={1} style={[styles.text, text, { color: inputColor }]}>
+                {value ? getDateString(value, 'short') : placeholder}
+              </Text>
+              <Ionicons name="calendar" size={iconSize} color={iconColor} />
+            </View>
+          </GestureDetector>
           <View style={buttonContainer}>
-            <Ionicons name="calendar" size={iconSize} color={iconColor} />
             {optional && value ? (
               <DateInputClearButton
                 size={clearButtonSize}
@@ -72,7 +78,7 @@ export const DateInput = forwardRef<InputRef, FieldProps<DateField>>(
               />
             ) : null}
           </View>
-        </TouchableOpacity>
+        </View>
         <Portal>
           <DatePickerModal
             locale="en"
@@ -104,8 +110,15 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
+    gap: 8,
     width: '100%',
   },
+  textContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
   text: {
     flex: 1,
   },

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

@@ -2,9 +2,11 @@ import { getDateTimeString, InputRef } from '@chem-po/core'
 import { DateTimeField, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
+import { Gesture, GestureDetector, Pressable } from 'react-native-gesture-handler'
 import { Portal } from 'react-native-paper'
 import { DatePickerModal, TimePickerModal } from 'react-native-paper-dates'
+import { runOnJS } from 'react-native-reanimated'
 import { FieldProps } from '../../types'
 import { DateInputClearButton } from '../common/InputClearButton'
 import { useInputColor } from '../hooks/useInputColor'
@@ -63,11 +65,21 @@ export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
     )
 
     const handleDismiss = useCallback(() => {
-      setShowDatePicker(true)
+      setShowDatePicker(false)
       setShowTimePicker(false)
       onBlur()
     }, [onBlur])
 
+    const handleFocusTime = useCallback(() => {
+      setShowTimePicker(true)
+      onFocus()
+    }, [onFocus])
+
+    const handleFocusDate = useCallback(() => {
+      setShowDatePicker(true)
+      onFocus()
+    }, [onFocus])
+
     const date = useMemo(() => (value ? new Date(value) : undefined), [value])
 
     const formattedValue = useMemo(() => {
@@ -83,20 +95,27 @@ export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
     const iconColor = useIconColor()
     const inputColor = useInputColor(value)
 
+    const mainTap = Gesture.Tap().onStart(() => {
+      runOnJS(handleFocusDate)()
+    })
+
     return (
       <View style={styles.container}>
-        <TouchableOpacity
-          style={[styles.button, inputStyles]}
-          onPress={() => {
-            setShowDatePicker(true)
-            onFocus()
-          }}>
-          <Text style={[styles.text, text, { color: inputColor }]}>
-            {formattedValue ?? placeholder}
-          </Text>
+        <View style={[styles.button, inputStyles]}>
+          <GestureDetector gesture={mainTap}>
+            <View style={styles.textContainer}>
+              <Text numberOfLines={1} style={[styles.text, text, { color: inputColor }]}>
+                {formattedValue ?? placeholder}
+              </Text>
+            </View>
+          </GestureDetector>
           <View style={buttonContainer}>
-            <Ionicons name="calendar" size={iconSize} color={iconColor} />
-            <Ionicons name="time" size={iconSize} color={iconColor} />
+            <Pressable onPress={handleFocusDate}>
+              <Ionicons name="calendar" size={iconSize} color={iconColor} />
+            </Pressable>
+            <Pressable onPress={handleFocusTime}>
+              <Ionicons name="time" size={iconSize} color={iconColor} />
+            </Pressable>
             {optional && value ? (
               <DateInputClearButton
                 size={clearButtonSize}
@@ -105,7 +124,7 @@ export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
               />
             ) : null}
           </View>
-        </TouchableOpacity>
+        </View>
         <Portal>
           {showDatePicker && (
             <DatePickerModal
@@ -148,7 +167,10 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     width: '100%',
   },
-  text: {
+  textContainer: {
     flex: 1,
   },
+  text: {
+    width: '100%',
+  },
 })

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

@@ -12,8 +12,9 @@ import {
 import { Ionicons } from '@expo/vector-icons'
 import * as DocumentPicker from 'expo-document-picker'
 import * as ImagePicker from 'expo-image-picker'
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
-import { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native'
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react'
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 import { downloadFile } from '../../../../utils/downloadFile'
 import { LoadingImage } from '../../../loading/LoadingImage'
 import { FieldProps } from '../../types'
@@ -33,17 +34,17 @@ const generateAccept = (field: FileField) => {
   return accept.join(',')
 }
 
-const NoFileView = ({ hasUpload }: { hasUpload?: boolean }) => {
+const NoFileView = ({ hasUpload, onPress }: { hasUpload?: boolean; onPress?: () => void }) => {
   const textColor = useTextColor()
   const iconColor = useIconColor()
   const borderColor = useBorderColor()
   return (
-    <View style={[styles.noFileContainer, { borderColor }]}>
+    <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} />
-    </View>
+    </Pressable>
   )
 }
 
@@ -54,6 +55,7 @@ export const FileView = ({
   withFullView,
   nonImageContainerStyle,
   withDownload,
+  onUploadPress,
 }: {
   value?: FileValue | null
   hasUpload?: boolean
@@ -61,6 +63,7 @@ export const FileView = ({
   withFullView?: boolean
   nonImageContainerStyle?: StyleProp<ViewStyle>
   withDownload?: boolean
+  onUploadPress?: () => void
 }) => {
   const { storagePath, dataUrl } = value ?? {}
   const missingFile = !dataUrl && !storagePath
@@ -104,26 +107,22 @@ export const FileView = ({
     }
   }, [url, value, showError, showSuccess])
   if (!value || missingFile) {
-    return <NoFileView hasUpload={hasUpload} />
-  }
-
-  if (value.type?.startsWith('image/')) {
-    return (
-      <LoadingImage
-        withDownload={withDownload}
-        filename={value.filename}
-        src={url}
-        fileType={value.type}
-        loadingOverride={loading}
-        width={imageOptions?.width ?? 120}
-        height={imageOptions?.height ?? 120}
-        withFullView={withFullView}
-        style={styles.image}
-      />
-    )
+    return <NoFileView onPress={onUploadPress} hasUpload={hasUpload} />
   }
 
-  return (
+  const body = value.type?.startsWith('image/') ? (
+    <LoadingImage
+      withDownload={withDownload}
+      filename={value.filename}
+      src={url}
+      fileType={value.type}
+      loadingOverride={loading}
+      width={imageOptions?.width ?? 120}
+      height={imageOptions?.height ?? 120}
+      withFullView={withFullView}
+      style={styles.image}
+    />
+  ) : (
     <View style={[styles.fileContainer, { borderColor, backgroundColor }, nonImageContainerStyle]}>
       <View style={styles.iconContainer}>
         <Ionicons name="document" size={24} color={iconColor} />
@@ -134,25 +133,25 @@ export const FileView = ({
         </Text>
       </View>
       {withDownload && (
-        <TouchableOpacity
+        <Pressable
           style={styles.downloadButton}
           onPress={() => void handleDownload()}
           disabled={loading}>
           <Ionicons name="download" size={20} color={iconColor} />
-        </TouchableOpacity>
+        </Pressable>
       )}
     </View>
   )
+
+  return onUploadPress ? <Pressable onPress={onUploadPress}>{body}</Pressable> : body
 }
 
 export const FileComponent = forwardRef<InputRef, FieldProps<FileField>>(
   ({ input: { value, onChange }, field }, ref) => {
-    const [loading, setLoading] = useState(false)
     const { imageOptions } = field || {}
 
     const handlePickFile = useCallback(async () => {
       try {
-        setLoading(true)
         let result: ImagePicker.ImagePickerResult | DocumentPicker.DocumentPickerResult
 
         if (field.accept?.includes('image')) {
@@ -193,8 +192,6 @@ export const FileComponent = forwardRef<InputRef, FieldProps<FileField>>(
         if (error instanceof Error) {
           console.error('Error picking file:', error.message)
         }
-      } finally {
-        setLoading(false)
       }
     }, [field, onChange, value])
 
@@ -227,12 +224,14 @@ export const FileComponent = forwardRef<InputRef, FieldProps<FileField>>(
     return (
       <View style={[styles.container, { borderColor }]}>
         <Text style={[styles.placeholder, { color: placeholderColor }]}>{field.placeholder}</Text>
-        <TouchableOpacity
-          style={styles.contentContainer}
-          onPress={() => void handlePickFile()}
-          disabled={loading}>
-          <FileView hasUpload imageOptions={imgOptions} value={value} />
-        </TouchableOpacity>
+        <View style={styles.contentContainer}>
+          <FileView
+            hasUpload
+            onUploadPress={() => void handlePickFile()}
+            imageOptions={imgOptions}
+            value={value}
+          />
+        </View>
       </View>
     )
   },

package/src/components/form/input/hooks/useInputStyles.ts

@@ -15,18 +15,15 @@ export const inputStyles = StyleSheet.create({
     borderRadius: 3,
   },
   inputSmall: {
-    paddingVertical: 6,
-    paddingHorizontal: 9,
+    padding: 8,
     borderRadius: 4,
   },
   inputMedium: {
-    paddingVertical: 8,
-    paddingHorizontal: 12,
+    padding: 12,
     borderRadius: 6,
   },
   inputLarge: {
-    paddingVertical: 10,
-    paddingHorizontal: 14,
+    padding: 14,
     borderRadius: 8,
   },
   inputTextSmall: {
@@ -110,7 +107,13 @@ export const useInputStyles = (
   const textColor = useTextColor()
   const usedSize = size ?? formSize
   return {
-    text: { ...inputTextSizeMap[usedSize], color: textColor, outlineWidth: 0 },
+    text: {
+      ...inputTextSizeMap[usedSize],
+      paddingTop: 0,
+      paddingBottom: 0,
+      color: textColor,
+      outlineWidth: 0,
+    },
     container: {
       ...inputStyles.input,
       ...(inEditable ? editableInputSizeMap[usedSize] : inputSizeMap[usedSize]),

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

@@ -192,11 +192,11 @@ const staticStyles = StyleSheet.create({
   },
   inputContainer: {
     width: '100%',
-    borderRadius: 4,
     paddingVertical: 1,
-    overflow: 'hidden',
+    // overflow: 'hidden',
   },
   errorText: {
+    paddingTop: 3,
     paddingHorizontal: 8,
     fontWeight: 500,
     // backgroundColor: 'red',