@chem-po/react-native 0.0.9 → 0.0.10

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 React, { 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/date/index.tsx

@@ -8,6 +8,7 @@ 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

@@ -8,6 +8,7 @@ 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

@@ -14,8 +14,10 @@ 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')

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

@@ -52,6 +52,7 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
     meta: { error, active, touched },
     input,
     inEditable,
+    style,
   } = props
 
   const { value } = input
@@ -84,7 +85,7 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
     outputRange: [placeholderColor, shadowColor],
   })
 
-  const { _type, label } = field
+  const { _type, label: Label } = field
   const showPlaceholder = useMemo(
     () => _type === 'multipleSelect' || (!!value && _type !== 'file' && _type !== 'boolean'),
     [value, _type],
@@ -118,16 +119,24 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
   const Component = useMemo(() => Components[_type] as ComponentType<T>, [_type])
 
   return (
-    <View style={[staticStyles.container]}>
-      {label && !inEditable ? <Text style={staticStyles.label}>{label}</Text> : null}
-      <AnimatedText
-        style={staticStyles.placeholder}
-        show={showPlaceholder}
-        color={placeholderColor}
-        height={16}
-        marginBottom={6}>
-        {field.placeholder ?? ''}
-      </AnimatedText>
+    <View style={[staticStyles.container, style]}>
+      {Label && !inEditable ? (
+        typeof Label === 'string' ? (
+          <Text style={staticStyles.label}>{Label}</Text>
+        ) : (
+          <Label />
+        )
+      ) : null}
+      {inEditable ? null : (
+        <AnimatedText
+          style={staticStyles.placeholder}
+          show={showPlaceholder}
+          color={placeholderColor}
+          height={16}
+          marginBottom={6}>
+          {field.placeholder ?? ''}
+        </AnimatedText>
+      )}
       <Animated.View style={[staticStyles.inputContainer, animatedStyles]}>
         <Component ref={ref} {...props} />
       </Animated.View>

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

@@ -6,7 +6,7 @@ import { FieldProps } from '../../types'
 
 export const MultipleSelectComponent = forwardRef<InputRef, FieldProps<MultipleSelectField>>(
   ({ field, input, inEditable }, ref) => {
-    const { options, renderOption, getOptionKey } = field
+    const { options, renderOption: RenderOption, getOptionKey } = field
     const { onChange, value, onFocus, onBlur } = input
     const colorMode = useColorMode()
 
@@ -34,7 +34,7 @@ export const MultipleSelectComponent = forwardRef<InputRef, FieldProps<MultipleS
             key={getOptionKey ? getOptionKey(o) : o}
             style={[styles.option, value?.includes(o) && styles.selectedOption]}
             onPress={() => handleOptionPress(o)}>
-            {renderOption(o, colorMode, !!value?.includes(o))}
+            <RenderOption value={o} colorMode={colorMode} isSelected={!!value?.includes(o)} />
           </TouchableOpacity>
         ))}
       </View>

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

@@ -5,13 +5,12 @@ import { StyleSheet, Text, TextInput, View } from 'react-native'
 import { FieldProps } from '../../types'
 import { InputSlider } from '../InputSlider'
 import { useInputImperativeHandle } from '../hooks/useInputImperativeHandle'
-import { useInputStyle } from '../hooks/useInputStyle'
+import { inputStyles } from '../styles'
 
 export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & { prefix?: string }>(
-  ({ input: { onChange, value, ...input }, field, size, prefix, inEditable: _, ...props }, ref) => {
+  ({ input: { onChange, value, ...input }, field, prefix, inEditable: _, style }, ref) => {
     const { type, defaultValue, placeholder } = field
     const color = useTextColor()
-    const { style } = useInputStyle(size)
     const inputRef = useInputImperativeHandle(ref)
     const [endsWith, setEndsWith] = useState('')
     const displayed = typeof value === 'number' && !Number.isNaN(value) ? `${value}${endsWith}` : ''
@@ -34,8 +33,7 @@ export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & {
         {prefix && <Text style={styles.prefix}>{prefix}</Text>}
         <TextInput
           ref={inputRef}
-          style={[styles.input, style, { color }]}
-          // style={styles.input}
+          style={[inputStyles.input, { color }, style]}
           placeholder={field.placeholder}
           placeholderTextColor={placeholderColor}
           keyboardType="numeric"
@@ -86,13 +84,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     width: '100%',
   },
-  input: {
-    flex: 1,
-    height: 40,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    backgroundColor: 'transparent',
-  },
   prefix: {
     marginRight: 4,
     fontSize: 16,

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

@@ -1,4 +1,4 @@
-import { InputRef } from '@chem-po/core'
+import { InputRef, RenderSelectOptionProps } from '@chem-po/core'
 import {
   SelectField,
   useBackgroundColor,
@@ -19,6 +19,7 @@ import { Modal, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'rea
 import { Txt } from '../../../text/Txt'
 import { FieldProps } from '../../types'
 import { InputClearButton } from '../common/InputClearButton'
+import { inputStyles } from '../styles'
 
 type SelectOption<T extends SelectField> = T['options'][number]
 
@@ -26,7 +27,7 @@ const BaseSelectComponent = <T extends SelectField>(
   { field, input, meta }: FieldProps<T>,
   ref: ForwardedRef<InputRef>,
 ) => {
-  const { placeholder, options, renderOption, getOptionKey, optional } = field
+  const { placeholder, options, renderOption: RenderOption, getOptionKey, optional } = field
   const { onChange, value, onFocus, onBlur } = input
   const { active } = meta
   const [buttonLayout, setButtonLayout] = useState({ x: 0, y: 0, width: 0, height: 0 })
@@ -61,14 +62,14 @@ const BaseSelectComponent = <T extends SelectField>(
     })
   }
 
-  const renderOptionText = (option: T['options'][number], isSelected: boolean) => {
-    if (typeof renderOption === 'function') {
-      return renderOption(option, 'light', isSelected)
+  const RenderOptionText = (props: RenderSelectOptionProps<T['defaultValue']>) => {
+    if (typeof RenderOption === 'function') {
+      return RenderOption({ ...props, value: props.value ?? '' })
     }
-    if (typeof option === 'object') {
-      return <Txt>{JSON.stringify(option)}</Txt>
+    if (typeof props.value === 'object') {
+      return <Txt>{JSON.stringify(props.value)}</Txt>
     }
-    return <Txt>{String(option)}</Txt>
+    return <Txt>{String(props.value)}</Txt>
   }
 
   const getKey = (option: SelectOption<T>): string => {
@@ -94,7 +95,7 @@ const BaseSelectComponent = <T extends SelectField>(
     <View style={styles.wrapper}>
       <View ref={buttonRef} onLayout={handleButtonLayout} style={styles.container}>
         <TouchableOpacity
-          style={[styles.button]}
+          style={[styles.button, inputStyles.input]}
           onPress={() => {
             if (active) {
               onBlur()
@@ -104,7 +105,7 @@ const BaseSelectComponent = <T extends SelectField>(
           }}>
           <View style={styles.buttonTextContainer}>
             {selected ? (
-              renderOptionText(selected, true)
+              <RenderOptionText value={selected} colorMode="light" isSelected={true} />
             ) : (
               <Text style={[styles.placeholder, { color: placeholderColor }]}>{placeholder}</Text>
             )}
@@ -147,7 +148,9 @@ const BaseSelectComponent = <T extends SelectField>(
                       isSelected && { backgroundColor: selectedOptionBg },
                     ]}
                     onPress={() => handleOptionPress(option)}>
-                    <View>{renderOptionText(option, isSelected)}</View>
+                    <View>
+                      <RenderOptionText value={option} colorMode="light" isSelected={isSelected} />
+                    </View>
                   </TouchableOpacity>
                 )
               })}
@@ -172,10 +175,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    width: '100%',
-    height: 40,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
     backgroundColor: 'transparent',
     borderRadius: 4,
   },

package/src/components/form/input/styles.ts

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native'
+
+export const inputStyles = StyleSheet.create({
+  input: {
+    width: '100%',
+    paddingHorizontal: 6,
+    fontSize: 16,
+    paddingVertical: 4,
+    outlineWidth: 0,
+  },
+})

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

@@ -4,10 +4,11 @@ import { Ionicons } from '@expo/vector-icons'
 import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
 import { StyleSheet, TextInput, TouchableOpacity, View } from 'react-native'
 import { FieldProps } from '../../types'
+import { inputStyles } from '../styles'
 import { TextAreaComponent } from './textarea'
 
 export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
-  ({ input, inEditable, meta, field }, ref) => {
+  ({ input, inEditable, meta, field, style }, ref) => {
     const { placeholder, type } = field
     const [isHidden, setIsHidden] = useState(type === 'password')
     const { value, onChange, ...inputProps } = input
@@ -31,10 +32,11 @@ export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
         <TextInput
           ref={inputRef}
           style={[
-            styles.input,
-            inEditable && styles.inEditable,
+            inputStyles.input,
+            // inEditable && styles.inEditable,
             type === 'password' && styles.passwordInput,
             { color },
+            style,
           ]}
           secureTextEntry={isHidden}
           placeholderTextColor={placeholderColor}
@@ -61,17 +63,11 @@ export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
 TextComponent.displayName = 'TextComponent'
 
 const styles = StyleSheet.create({
-  input: {
-    width: '100%',
-    height: 40,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-  },
-  inEditable: {
-    paddingHorizontal: 0,
-    paddingVertical: 0,
-    height: 'auto',
-  },
+  // inEditable: {
+  //   paddingHorizontal: 0,
+  //   paddingVertical: 0,
+  //   height: 'auto',
+  // },
   passwordInput: {
     paddingRight: 40,
   },

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

@@ -8,6 +8,7 @@ import { 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 TimeInput = forwardRef<InputRef, FieldProps<TimeField>>(
   ({ input: { onChange, value, onFocus, onBlur }, field: { placeholder, optional } }, ref) => {
@@ -56,7 +57,7 @@ export const TimeInput = forwardRef<InputRef, FieldProps<TimeField>>(
     return (
       <View style={styles.container}>
         <TouchableOpacity
-          style={styles.button}
+          style={[styles.button, inputStyles.input]}
           onPress={() => {
             setVisible(true)
             onFocus()
@@ -92,9 +93,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/view/index.tsx

@@ -1,7 +1,8 @@
 import { formatField } from '@chem-po/core'
 import { Field } from '@chem-po/react'
 import React, { useMemo } from 'react'
-import { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { StyleSheet, View, ViewStyle } from 'react-native'
+import { Txt } from '../../text'
 import { FileFieldView } from './file'
 import { MultipleSelectFieldView } from './multipleSelect'
 import { SelectFieldView } from './select'
@@ -18,9 +19,11 @@ const styles = StyleSheet.create({
   },
   value: {
     opacity: 1,
+    fontSize: 16,
   },
   valueEmpty: {
     opacity: 0.6,
+    fontSize: 16,
   },
 })
 
@@ -45,10 +48,8 @@ const DefaultFieldView = ({
 
   return (
     <View style={[styles.container, style]}>
-      {!noLabel && <Text style={styles.label}>{placeholder}</Text>}
-      <Text style={value !== undefined && value !== null ? styles.value : styles.valueEmpty}>
-        {formatted ?? 'None'}
-      </Text>
+      {!noLabel && <Txt style={styles.label}>{placeholder}</Txt>}
+      <Txt style={value ? styles.value : styles.valueEmpty}>{formatted ?? 'None'}</Txt>
     </View>
   )
 }

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

@@ -1,5 +1,5 @@
-import { MultipleSelectField } from '@chem-po/react'
-import React, { StyleSheet, Text, useColorScheme, View, ViewStyle } from 'react-native'
+import { MultipleSelectField, useColorMode } from '@chem-po/react'
+import React, { StyleSheet, Text, View, ViewStyle } from 'react-native'
 
 const styles = StyleSheet.create({
   container: {
@@ -32,16 +32,18 @@ export const MultipleSelectFieldView = ({
   noLabel?: boolean
   style?: ViewStyle
 }) => {
-  const { placeholder, renderOption, getOptionKey } = field
-  const colorScheme = useColorScheme() ?? 'light'
+  const { placeholder, renderOption: RenderOption } = field
+  const colorMode = useColorMode()
 
   return (
     <View style={[styles.container, style]}>
       {!noLabel && <Text style={styles.label}>{placeholder}</Text>}
       {value ? (
         value.map((v: any) => (
-          <View key={getOptionKey ? getOptionKey(v) : v} style={styles.optionContainer}>
-            {renderOption(v, colorScheme, true)}
+          <View
+            //  key={getOptionKey ? getOptionKey(v) : v}
+            style={styles.optionContainer}>
+            <RenderOption value={v} colorMode={colorMode} isSelected={true} />
           </View>
         ))
       ) : (