@chem-po/react-native 0.0.30 → 0.0.31

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

@@ -2,10 +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 { Pressable } from 'react-native-gesture-handler'
+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'
@@ -64,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(() => {
@@ -84,22 +95,25 @@ 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}>
-            <Pressable onPress={() => setShowDatePicker(true)}>
+            <Pressable onPress={handleFocusDate}>
               <Ionicons name="calendar" size={iconSize} color={iconColor} />
             </Pressable>
-            <Pressable onPress={() => setShowTimePicker(true)}>
+            <Pressable onPress={handleFocusTime}>
               <Ionicons name="time" size={iconSize} color={iconColor} />
             </Pressable>
             {optional && value ? (
@@ -110,7 +124,7 @@ export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
               />
             ) : null}
           </View>
-        </TouchableOpacity>
+        </View>
         <Portal>
           {showDatePicker && (
             <DatePickerModal
@@ -153,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',

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

@@ -48,20 +48,17 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
 
   const colorMode = useColorMode()
   const inputRef = useRef<IDropdownRef>(null)
-  const {
-    container: inputStyles,
-    iconSize,
-    clearButtonSize,
-    text,
-    buttonContainer,
-    size,
-  } = useInputStyles(inEditable, field.size, formSize)
+  const { container, iconSize, clearButtonSize, text, buttonContainer, size } = useInputStyles(
+    inEditable,
+    field.size,
+    formSize,
+  )
   const iconColor = useIconColor()
   const textColor = useTextColor()
   const placeholderColor = usePlaceholderColor()
   const menuBg = useBackgroundColor(100)
   const inputBg = useBackgroundColor(50)
-  const selectedOptionBg = useColorModeValue('#ffffff55', '#ffffff22')
+  const selectedOptionBg = useColorModeValue('#ffffff22', '#ffffff22')
   const borderColor = useBorderColor()
 
   useImperativeHandle(ref, () => ({
@@ -73,13 +70,6 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
     },
   }))
 
-  const defaultSelectedOptionStyle = useMemo(() => {
-    return {
-      paddingVertical: inputStyles.paddingVertical,
-      paddingHorizontal: inputStyles.paddingHorizontal,
-    }
-  }, [inputStyles])
-
   const RenderOptionText = (
     props: RenderSelectOptionProps<T['options'][number]['value'], T['options'][number]>,
   ) => {
@@ -96,9 +86,9 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
       return RenderOption(props)
     }
     return (
-      <>
-        <Txt style={[defaultSelectedOptionStyle, text]}>{props.option.label}</Txt>
-      </>
+      <View style={{ padding: 6 }}>
+        <Txt style={[text]}>{props.option.label}</Txt>
+      </View>
     )
   }
 
@@ -110,11 +100,11 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
     <View style={[styles.wrapper]}>
       <MultiSelect
         ref={inputRef}
-        style={[inputStyles, { borderColor }]}
+        style={[container, { borderColor, boxShadow: `0 0 10px ${borderColor}`, borderWidth: 0 }]}
         placeholderStyle={[text, { color: value?.length ? textColor : placeholderColor }]}
         containerStyle={{
           backgroundColor: menuBg,
-          boxShadow: `0 0 10px ${borderColor}`,
+          boxShadow: `0 0 6px ${borderColor}`,
           borderWidth: 0,
         }}
         inputSearchStyle={[styles.inputSearch, text, { backgroundColor: inputBg, borderWidth: 0 }]}
@@ -135,21 +125,33 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
         }}
         onFocus={onFocus}
         onBlur={onBlur}
+        itemContainerStyle={{
+          backgroundColor: menuBg,
+          borderTopWidth: 1,
+          borderColor: borderColor,
+        }}
         renderItem={(item, selected) => (
-          <View style={{ backgroundColor: menuBg }}>
-            <View style={{ backgroundColor: selected ? selectedOptionBg : 'transparent' }}>
-              <RenderOptionText
-                value={item.value}
-                option={item}
-                colorMode={colorMode}
-                isSelected={!!selected}
-                size={size}
-              />
-            </View>
+          <View
+            style={{
+              backgroundColor: selected ? selectedOptionBg : 'transparent',
+              paddingVertical: 8,
+              paddingHorizontal: 12,
+              flexDirection: 'row',
+              alignItems: 'center',
+              width: '100%',
+            }}>
+            <RenderOptionText
+              value={item.value}
+              option={item}
+              colorMode={colorMode}
+              isSelected={!!selected}
+              size={size}
+            />
+            {selected ? <Ionicons name="checkmark" size={iconSize} color={iconColor} /> : null}
           </View>
         )}
         renderSelectedItem={item => (
-          <SelectedOptionContainer>
+          <SelectedOptionContainer style={{ marginTop: 10 }}>
             <RenderSelectedOptionText
               value={item.value}
               option={item}
@@ -189,7 +191,7 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   defaultOption: {
-    padding: 10,
+    flex: 1,
   },
   iconStyle: {
     width: 20,
@@ -198,7 +200,6 @@ const styles = StyleSheet.create({
   inputSearch: {
     paddingVertical: 4,
     minHeight: 0,
-    height: 'auto',
     outlineWidth: 0,
     fontSize: 16,
   },
@@ -216,7 +217,6 @@ const styles = StyleSheet.create({
     borderLeftWidth: 1,
     borderTopRightRadius: 8,
     borderBottomRightRadius: 8,
-    height: '100%',
     justifyContent: 'center',
   },
 })

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

@@ -9,7 +9,8 @@ import React, {
   useMemo,
   useState,
 } from 'react'
-import { Modal, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
+import { Modal, StyleSheet, Text, TextInput, View } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 import { FieldProps } from '../../types'
 const siteToIcon: Record<SocialMediaSites, string> = {
   facebook: 'facebook',
@@ -42,11 +43,11 @@ const SocialMediaSiteInput: FC<{
 
   return (
     <>
-      <TouchableOpacity
+      <Pressable
         style={[styles.iconButton, !handle && styles.iconButtonInactive]}
         onPress={() => onModalClose()}>
         <Text style={styles.iconText}>{siteToIcon[site]}</Text>
-      </TouchableOpacity>
+      </Pressable>
 
       <Modal
         visible={isModalVisible}
@@ -65,9 +66,9 @@ const SocialMediaSiteInput: FC<{
               autoCapitalize="none"
               autoCorrect={false}
             />
-            <TouchableOpacity style={styles.closeButton} onPress={onModalClose}>
+            <Pressable style={styles.closeButton} onPress={onModalClose}>
               <Text style={styles.closeButtonText}>Close</Text>
-            </TouchableOpacity>
+            </Pressable>
           </View>
         </View>
       </Modal>

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

@@ -10,7 +10,7 @@ export const AutoResizeTextarea = forwardRef<TextInput, TextInputProps>(
   ({ style, value, onChangeText, ...props }, ref) => {
     const textColor = useTextColor()
 
-    const { handleChange, height, setHeight } = useWebAutoResize(onChangeText, style)
+    const { handleChange, height } = useWebAutoResize(onChangeText, style)
 
     const iconColor = useIconColor()
 
@@ -18,9 +18,6 @@ export const AutoResizeTextarea = forwardRef<TextInput, TextInputProps>(
       <TextInput
         ref={ref}
         cursorColor={iconColor}
-        onContentSizeChange={e => {
-          setHeight(e.nativeEvent.contentSize.height)
-        }}
         multiline
         style={[styles.textarea, { color: textColor, height }, style]}
         value={value}
@@ -33,7 +30,6 @@ export const AutoResizeTextarea = forwardRef<TextInput, TextInputProps>(
 const styles = StyleSheet.create({
   textarea: {
     width: '100%',
-    minHeight: 18,
     backgroundColor: 'transparent',
     textAlignVertical: 'top',
     outlineWidth: 0,

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

@@ -2,7 +2,8 @@ import { InputRef } from '@chem-po/core'
 import { TextField, usePlaceholderColor, useTextColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import { StyleSheet, TextInput, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, TextInput, View } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 import { FieldProps } from '../../types'
 import { useInputStyles } from '../hooks/useInputStyles'
 import { TextAreaComponent } from './textarea'
@@ -63,9 +64,9 @@ export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
     return type === 'password' ? (
       <View style={[conatinerStyles, styles.passwordContainer, style]}>
         {body}
-        <TouchableOpacity style={styles.eyeIcon} onPress={() => setIsHidden(!isHidden)}>
+        <Pressable style={styles.eyeIcon} onPress={() => setIsHidden(!isHidden)}>
           <Ionicons name={isHidden ? 'eye' : 'eye-off'} size={20} color="#666" />
-        </TouchableOpacity>
+        </Pressable>
       </View>
     ) : (
       <View style={[conatinerStyles, style]}>{body}</View>

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

@@ -16,7 +16,7 @@ export const TextAreaComponent = forwardRef<TextInput, FieldProps<TextField>>(
       <View style={[container, style]}>
         <AutoResizeTextarea
           ref={ref}
-          style={[{ color, ...text }, inputStyle]}
+          style={[{ color, ...text, paddingBottom: inEditable ? 0 : 4 }, inputStyle]}
           placeholder={field.placeholder}
           placeholderTextColor={placeholderColor}
           multiline

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

@@ -39,7 +39,10 @@ export const useWebAutoResize = (
   style: StyleProp<TextStyle> | undefined,
 ) => {
   const flattenedStyle = useMemo(() => StyleSheet.flatten(style), [style])
-  const [height, setHeight] = useState((flattenedStyle.fontSize ?? 18) + 4)
+  const fontSize = useMemo(() => flattenedStyle.fontSize ?? 16, [flattenedStyle.fontSize])
+  const [height, setHeight] = useState<number | 'auto'>(
+    Platform.OS === 'web' ? fontSize + 10 : 'auto',
+  )
   const spanRef = useRef<HTMLSpanElement>(
     Platform.OS === 'web' ? document.createElement('span') : null,
   )
@@ -55,15 +58,14 @@ export const useWebAutoResize = (
         ? (e: string) => {
             if (spanRef.current) {
               const height = getWebTextHeight(e, spanRef)
-              setHeight((height ?? 18) + 4)
+              setHeight((height ?? fontSize) + 8)
               if (onChangeText) onChangeText(e)
             }
           }
         : onChangeText,
-    [onChangeText],
+    [onChangeText, fontSize],
   )
   return {
-    getWebTextHeight,
     handleChange,
     height,
     setHeight,

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

@@ -2,7 +2,8 @@ import { InputRef, padZeros } from '@chem-po/core'
 import { TimeField, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
 import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
 import { Portal } from 'react-native-paper'
 import { TimePickerModal } from 'react-native-paper-dates'
 import { FieldProps } from '../../types'
@@ -71,7 +72,7 @@ export const TimeInput = forwardRef<InputRef, FieldProps<TimeField>>(
 
     return (
       <View style={styles.container}>
-        <TouchableOpacity
+        <Pressable
           style={[styles.button, inputStyles]}
           onPress={() => {
             setVisible(true)
@@ -90,7 +91,7 @@ export const TimeInput = forwardRef<InputRef, FieldProps<TimeField>>(
               />
             ) : null}
           </View>
-        </TouchableOpacity>
+        </Pressable>
         <Portal>
           <TimePickerModal
             visible={visible}

package/src/components/form/view/select.tsx

@@ -24,7 +24,11 @@ export const DefaultRenderOption = <
 >({
   option,
 }: RenderSelectOptionProps<Value, Option>) => {
-  return <Txt style={inputViewStyles.value}>{option.label}</Txt>
+  return (
+    <View style={{ padding: 6 }}>
+      <Txt style={inputViewStyles.value}>{option.label}</Txt>
+    </View>
+  )
 }
 
 export const SelectFieldView = ({