@chem-po/react-native 0.0.8 → 0.0.10

package/src/components/box/Expandable.tsx

@@ -16,13 +16,13 @@ type ExpandableProps = PropsWithChildren<{
 }>
 
 export const Expandable = ({
-  header,
+  header: Header,
   children,
   initExpanded = false,
   nested,
   alwaysExpanded,
   iconColor = '#000',
-  footer,
+  footer: Footer,
   isOpen: isOpenProp,
   onClose: onCloseProp,
   onOpen: onOpenProp,
@@ -81,10 +81,10 @@ export const Expandable = ({
     <View style={[styles.container, style]}>
       <Pressable onPress={handleOpenClick} style={styles.header}>
         <View style={styles.headerContent}>
-          {typeof header === 'string' ? (
-            <Txt style={styles.headerText}>{header}</Txt>
+          {typeof Header === 'string' ? (
+            <Txt style={styles.headerText}>{Header}</Txt>
           ) : (
-            header({ isOpen, onClose })
+            <Header isOpen={isOpen} onClose={onClose} />
           )}
         </View>
         {!alwaysExpanded && (
@@ -108,7 +108,7 @@ export const Expandable = ({
         {children}
       </AnimatedCenter>
 
-      {footer?.({ isOpen, onClose })}
+      {Footer ? <Footer isOpen={isOpen} onClose={onClose} /> : null}
     </View>
   )
 }

package/src/components/box/FullSizeContainer.tsx

@@ -1,8 +1,8 @@
-import { createContext, FC, useCallback, useContext, useMemo, useRef, useState } from 'react'
+import React, { createContext, FC, useCallback, useContext, useMemo, useRef, useState } from 'react'
 import { View, ViewProps } from 'react-native'
 
 export const FullSizeContainer = ({
-  children,
+  children: Children,
   ...props
 }: Omit<ViewProps, 'children'> & { children: FC<{ width: number; height: number }> }) => {
   const [width, setWidth] = useState(0)
@@ -21,7 +21,7 @@ export const FullSizeContainer = ({
       {...props}
       style={[{ width: '100%', height: '100%' }, props.style]}
       onLayout={handleLayout}>
-      {children({ width, height })}
+      <Children width={width} height={height} />
     </View>
   )
 }

package/src/components/button/DeleteButton.tsx

@@ -77,7 +77,7 @@ export const DeleteButton: React.FC<{
   const { showError } = useToast()
   const [deleteLoading, setDeleteLoading] = useState(false)
   const [confirmActive, setConfirmActive] = useState(false)
-  const confirmTimer = useRef<any>()
+  const confirmTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
   const isMounted = useRef(true)
   const contentOpacity = useRef(new Animated.Value(1)).current
   const loaderOpacity = useRef(new Animated.Value(0)).current

package/src/components/button/Toggle.tsx

@@ -1,5 +1,5 @@
 import { useTheme, useToast } from '@chem-po/react'
-import { JSX, useCallback } from 'react'
+import React, { JSX, useCallback } from 'react'
 import { StyleSheet, TouchableOpacity, View } from 'react-native'
 
 export interface ToggleOption<Option extends string = string> {

package/src/components/feed/FeedContentPane.tsx

@@ -1,6 +1,6 @@
 import { AnyObject, WithId } from '@chem-po/core'
 import { PanelStatus, useDocument, useScreen } from '@chem-po/react'
-import { JSX, useEffect, useMemo, useRef } from 'react'
+import React, { JSX, useEffect, useMemo, useRef } from 'react'
 // import { motion, MotionValue, useMotionValue, useSpring, useTransform } from 'framer-motion'
 import { Animated } from 'react-native'
 

package/src/components/feed/MediaFeedRefresh.tsx

@@ -1,5 +1,5 @@
 import Icon from '@expo/vector-icons/MaterialCommunityIcons' // or your preferred icon set
-import { useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { Animated, StyleSheet, View } from 'react-native'
 import { DropShadow } from '../box/DropShadow'
 import { CircularProgress } from '../loading'

package/src/components/feed/context.tsx

@@ -1,5 +1,5 @@
 import { AnyObject, WithId } from '@chem-po/core'
-import { createContext, PropsWithChildren, useContext, useMemo } from 'react'
+import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react'
 
 interface MediaFeedContextValue<T extends AnyObject = AnyObject> {
   curr: WithId<T> | null

package/src/components/form/Condition.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useMemo } from 'react'
+import React, { PropsWithChildren, useMemo } from 'react'
 import { useWatch } from 'react-hook-form'
 import { Animated } from 'react-native'
 

package/src/components/form/Field.tsx

@@ -1,6 +1,6 @@
 import { InputRef, getFieldValidate } from '@chem-po/core'
 import { Field, useField } from '@chem-po/react'
-import { ForwardedRef, forwardRef, useMemo } from 'react'
+import React, { ForwardedRef, forwardRef, useMemo } from 'react'
 import { ChangeHandler, Controller } from 'react-hook-form'
 import { Input } from './input/input'
 

package/src/components/form/Form.tsx

@@ -7,6 +7,8 @@ import {
   FieldFormProps,
   FieldMap,
   FieldMapFormProps,
+  FieldMapValue,
+  FormOnSubmit,
   FormProps,
   IFormElement,
   ListField,
@@ -14,8 +16,9 @@ import {
   useDataView,
   useFormSubmit,
   UseFormSubmitProps,
+  useGetItemField,
 } from '@chem-po/react'
-import { FC, useMemo, useState } from 'react'
+import React, { FC, useMemo, useState } from 'react'
 import { useFieldArray, useFormContext } from 'react-hook-form'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { Expandable } from '../box/Expandable'
@@ -81,6 +84,7 @@ const styles = StyleSheet.create({
   },
   formElementContainer: {
     width: '100%',
+    paddingVertical: 5,
     gap: 5,
   },
   dataViewHeader: {
@@ -207,7 +211,8 @@ const ListFieldView = ({
   value: any[]
   path: string
 }) => {
-  const { itemField, placeholder } = field
+  const { placeholder } = field
+  const getItemField = useGetItemField(field)
   return (
     <View style={styles.listContainer}>
       <Expandable header={() => <Text style={styles.listHeader}>{placeholder}</Text>} initExpanded>
@@ -217,7 +222,7 @@ const ListFieldView = ({
               <View key={`${path}.${index}`} style={styles.listItem}>
                 <FormElementView
                   path={`${path}.${index}`}
-                  field={{ ...itemField, placeholder: `${placeholder} ${index + 1}` }}
+                  field={getItemField(index)}
                   value={item}
                 />
               </View>
@@ -341,7 +346,7 @@ export const FieldMapForm = <F extends FieldMap>({
     () => ({
       field,
       value,
-      submit: onSubmitProp,
+      submit: onSubmitProp as FormOnSubmit<FieldMap>,
       storagePath,
     }),
     [field, value, onSubmitProp, storagePath],
@@ -369,22 +374,23 @@ export const FieldForm = <F extends Field | ListField>({
   ...props
 }: FieldFormProps<F>) => {
   const fieldMap = useMemo<FieldMap>(() => ({ children: { value: field } }), [field])
+  const fieldMapValue = useMemo<FieldMapValue<FieldMap>>(() => ({ value }), [value])
   return (
     <FieldMapForm
       field={fieldMap}
-      value={{ value }}
+      value={fieldMapValue}
       onSubmit={data => onSubmit(data?.value)}
       {...props}
     />
   )
 }
 
-export const Form = <F extends IFormElement>({ field, ...props }: FormProps<F>) => {
+export const Form = <F extends IFormElement>({ field, onSubmit, ...props }: FormProps<F>) => {
   const body =
     isField(field) || isListField(field) ? (
-      <FieldForm field={field} {...props} />
+      <FieldForm field={field} onSubmit={onSubmit as FormOnSubmit<Field | ListField>} {...props} />
     ) : (
-      <FieldMapForm field={field} {...props} />
+      <FieldMapForm field={field} onSubmit={onSubmit as FormOnSubmit<FieldMap>} {...props} />
     )
 
   return <ChempoFormProvider>{body}</ChempoFormProvider>

package/src/components/form/FormFooter.tsx

@@ -5,7 +5,7 @@ import {
   useButtonColor,
   usePlaceholderColor,
 } from '@chem-po/react'
-import { FC, PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+import React, { FC, PropsWithChildren, useEffect, useMemo, useRef } from 'react'
 import { useFormContext, useFormState } from 'react-hook-form'
 import { ActivityIndicator, Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { UploadProgress } from './UploadProgress'
@@ -132,7 +132,7 @@ const FormErrorView = () => {
 }
 
 export const FormFooter = <F extends IFormElement>({
-  renderFooter,
+  renderFooter: RenderFooter,
   ...props
 }: FormFooterProps<F>) => {
   const { uploads, onSubmit, onBack, buttonText } = props
@@ -141,8 +141,8 @@ export const FormFooter = <F extends IFormElement>({
   return (
     <View style={styles.container}>
       <UploadProgress uploads={uploads} />
-      {renderFooter ? (
-        renderFooter(props)
+      {RenderFooter ? (
+        <RenderFooter {...props} />
       ) : (
         <View style={[styles.footerContainer, { borderColor }]}>
           <FormErrorView />

package/src/components/form/UploadProgress/index.tsx

@@ -1,5 +1,5 @@
 import { UploadsState } from '@chem-po/core'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { Animated, StyleSheet, Text, View } from 'react-native'
 
 const styles = StyleSheet.create({

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

@@ -1,7 +1,13 @@
-import { palette } from '@chem-po/core'
-import { EditableProps, Field, useColorModeValue, useEditable } from '@chem-po/react'
+import {
+  EditableProps,
+  Field,
+  useColorModeValue,
+  useEditable,
+  useIconColor,
+  useThemeValue,
+} from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import { useEffect, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo } from 'react'
 import { StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native'
 import { LoadingOverlay } from '../../loading/Loading'
 import { UploadProgress } from '../UploadProgress'
@@ -16,6 +22,7 @@ export const Editable = <T extends Field>({
   style,
   onEditClose,
   onEditOpen,
+  containerStyle,
 }: EditableProps<ViewStyle, T>) => {
   const {
     formattedValue,
@@ -41,7 +48,38 @@ export const Editable = <T extends Field>({
     onEditClose,
   })
 
-  const alwaysEditing = useMemo(() => field._type === 'file' || field._type === 'boolean', [field])
+  const alwaysEditing = useMemo(() => {
+    switch (field._type) {
+      case 'file':
+      case 'boolean':
+        return true
+      default:
+        return false
+    }
+  }, [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) {
@@ -49,7 +87,31 @@ export const Editable = <T extends Field>({
     }
   }, [isEditing, inputRef])
 
+  const iconColor = useIconColor()
+
   const editingBorderColor = useColorModeValue('#00000055', '#ffffff55')
+  const submitColor = useThemeValue('colors.accent.200')
+
+  const handleBlur = useCallback(() => {
+    switch (field._type) {
+      case 'select':
+      case 'date':
+      case 'time':
+      case 'datetime':
+        handleEditClose()
+        break
+      default:
+        break
+    }
+  }, [field, handleEditClose])
+
+  const editableField = useMemo(
+    () => ({
+      ...field,
+      optional: false,
+    }),
+    [field],
+  )
 
   return (
     <View
@@ -58,7 +120,7 @@ export const Editable = <T extends Field>({
         {
           borderColor: editHovered && !isEditing ? editingBorderColor : 'transparent',
         },
-        style,
+        containerStyle,
       ]}>
       <View style={styles.contentContainer}>
         <View
@@ -74,53 +136,55 @@ export const Editable = <T extends Field>({
               ref={inputRef}
               value={formattedValue}
               inEditable
-              field={field}
-              style={[styles.input, style]}
-              onChange={alwaysEditing ? v => submitValue(parse(v)) : v => setValue(parse(v))}
+              field={editableField}
+              style={style}
+              onChange={shouldSubmitOnChange ? v => submitValue(parse(v)) : v => setValue(parse(v))}
+              onBlur={handleBlur}
             />
           ) : (
-            <FieldView style={style} field={field} value={value} />
+            <FieldView noLabel style={style} field={field} value={value} />
           )}
         </View>
 
         {!alwaysEditing && (
-          <>
-            <TouchableOpacity
-              style={styles.editButton}
-              onPress={() => {
-                if (isEditing) {
-                  setValue(value)
-                  handleEditClose()
-                } else {
-                  handleEditOpen()
-                }
-              }}
-              onPressIn={() => setEditHovered(true)}
-              onPressOut={() => setEditHovered(false)}>
-              <Ionicons
-                name={isEditing ? 'close' : 'create-outline'}
-                size={20}
-                color={palette.gray.medium}
-              />
-            </TouchableOpacity>
-
+          <View style={styles.buttonsContainer}>
+            {noCloseButton && isEditing ? null : (
+              <TouchableOpacity
+                style={styles.editButton}
+                onPress={() => {
+                  if (isEditing) {
+                    setValue(value)
+                    handleEditClose()
+                  } else {
+                    handleEditOpen()
+                  }
+                }}
+                onPressIn={() => setEditHovered(true)}
+                onPressOut={() => setEditHovered(false)}>
+                <Ionicons
+                  name={isEditing ? 'close' : 'create-outline'}
+                  size={20}
+                  color={iconColor}
+                />
+              </TouchableOpacity>
+            )}
             <View
               style={[
                 styles.submitButtonContainer,
                 {
-                  width: isEditing ? 30 : 0,
+                  width: isEditing ? 26 : 0,
                   opacity: isEditing ? 1 : 0,
                 },
               ]}>
               <TouchableOpacity
-                style={[styles.submitButton, { backgroundColor: palette.cyan.light }]}
+                style={[styles.submitButton, { backgroundColor: submitColor }]}
                 onPress={() => {
                   submit()
                 }}>
                 <Ionicons name="checkmark" size={20} color="#fff" />
               </TouchableOpacity>
             </View>
-          </>
+          </View>
         )}
         <LoadingOverlay isLoading={isLoading} />
       </View>
@@ -136,6 +200,12 @@ const styles = StyleSheet.create({
     borderStyle: 'dashed',
     width: '100%',
   },
+  buttonsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    marginLeft: 5,
+  },
   contentContainer: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -149,19 +219,19 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderStyle: 'dashed',
   },
-  input: {
-    padding: 0,
-  },
   editButton: {
     padding: 4,
-    marginLeft: 4,
   },
   submitButtonContainer: {
-    justifyContent: 'flex-end',
+    justifyContent: 'center',
+    alignItems: 'center',
     overflow: 'hidden',
   },
   submitButton: {
-    padding: 4,
+    width: 24,
+    height: 24,
     borderRadius: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
 })

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

@@ -1,5 +1,6 @@
 import { Gradient } from '@chem-po/core'
 import Slider from '@react-native-community/slider'
+import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
 type SliderProps = React.ComponentProps<typeof Slider>

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

@@ -1,5 +1,5 @@
 import { Field } from '@chem-po/react'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
 export const OptionalTag = <T extends Field>({

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

@@ -1,6 +1,6 @@
 import { InputRef } from '@chem-po/core'
 import { Field, useStandaloneInput } from '@chem-po/react'
-import { ForwardedRef, forwardRef } from 'react'
+import React, { ForwardedRef, forwardRef } from 'react'
 import { StyleProp, ViewStyle } from 'react-native'
 import { Input } from './input'
 

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

@@ -1,6 +1,6 @@
 import { InputRef } from '@chem-po/core'
 import { BooleanField } from '@chem-po/react'
-import { ForwardedRef, forwardRef, useImperativeHandle } from 'react'
+import React, { ForwardedRef, forwardRef, useImperativeHandle } from 'react'
 import { Switch, Text, View } from 'react-native'
 import { FieldProps } from '../../types'
 

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

@@ -1,6 +1,6 @@
 import { colorValueToHex, Gradient, gradients, InputRef } from '@chem-po/core'
 import { ColorField } from '@chem-po/react'
-import { forwardRef, useCallback, useMemo } from 'react'
+import React, { forwardRef, useCallback, useMemo } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { FieldProps } from '../../types'
 import { InputSlider } from '../InputSlider'

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

@@ -1,5 +1,6 @@
 import { useBorderColor, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
+import React from 'react'
 import { StyleSheet, TouchableOpacity } from 'react-native'
 
 export const InputClearButton = ({

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

@@ -1,13 +1,14 @@
 import { getDateString, InputRef } from '@chem-po/core'
 import { DateField, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import { forwardRef, useImperativeHandle, useMemo } from 'react'
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { Portal } from 'react-native-paper'
 import { DatePickerModal } from 'react-native-paper-dates'
 import { FieldProps } from '../../types'
 import { DateInputClearButton } from '../common/InputClearButton'
 import { useInputColor } from '../hooks/useInputColor'
+import { inputStyles } from '../styles'
 
 // const parseDate = (date?: Date) =>
 //   date
@@ -48,7 +49,7 @@ export const DateInput = forwardRef<InputRef, FieldProps<DateField>>(
 
     return (
       <View style={styles.container}>
-        <TouchableOpacity style={styles.button} onPress={showDialog}>
+        <TouchableOpacity style={[styles.button, inputStyles.input]} onPress={showDialog}>
           <Text style={[styles.text, { color: inputColor }]}>
             {value ? getDateString(value, 'short') : placeholder}
           </Text>
@@ -89,9 +90,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     width: '100%',
-    height: 40,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
   },
   text: {
     fontSize: 16,

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

@@ -1,13 +1,14 @@
 import { getDateTimeString, InputRef } from '@chem-po/core'
 import { DateTimeField, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { Portal } from 'react-native-paper'
 import { DatePickerModal, TimePickerModal } from 'react-native-paper-dates'
 import { FieldProps } from '../../types'
 import { DateInputClearButton } from '../common/InputClearButton'
 import { useInputColor } from '../hooks/useInputColor'
+import { inputStyles } from '../styles'
 
 export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
   ({ input: { value, onBlur, onChange, onFocus }, field, meta: { active } }, ref) => {
@@ -76,7 +77,7 @@ export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
     return (
       <View style={styles.container}>
         <TouchableOpacity
-          style={styles.button}
+          style={[styles.button, inputStyles.input]}
           onPress={() => {
             setShowDatePicker(true)
             onFocus()
@@ -129,9 +130,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     width: '100%',
-    height: 40,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
   },
   text: {
     fontSize: 16,

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

@@ -9,13 +9,15 @@ import {
 import { Ionicons } from '@expo/vector-icons'
 import * as DocumentPicker from 'expo-document-picker'
 import * as ImagePicker from 'expo-image-picker'
-import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { LoadingImage } from '../../../loading/LoadingImage'
 import { FieldProps } from '../../types'
 
+const fallbackAccept =
+  'image/jpg,image/jpeg,image/png,image/svg,image/gif,application/pdf,audio/mp3,audio/wav,audio/x-wav,audio/webm,audio/ogg'
 const generateAccept = (field: FileField) => {
-  if (!field.accept) return undefined
+  if (!field.accept) return fallbackAccept
   const accept: string[] = []
   if (field.accept.includes('image')) {
     accept.push('image/jpg', 'image/jpeg', 'image/png', 'image/svg', 'image/gif')