@chem-po/react-native 0.0.29 → 0.0.30

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,10 @@ 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, TouchableOpacity, View, ViewStyle } from 'react-native'
+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 +28,9 @@ export const Editable = <T extends Field>({
   onEditOpen,
   containerStyle,
   size,
-}: EditableProps<ViewStyle, T>) => {
+  CustomInput,
+  CustomView,
+}: EditableProps<ViewStyle, TextStyle, T>) => {
   const {
     inputRef,
     setValue,
@@ -36,7 +42,6 @@ export const Editable = <T extends Field>({
     isEditing,
     value,
     setEditHovered,
-    submitValue,
     submit,
   } = useEditable({
     value: initValue,
@@ -48,6 +53,7 @@ export const Editable = <T extends Field>({
   })
 
   const alwaysEditing = useMemo(() => {
+    if (!field) return false
     switch (field._type) {
       case 'file':
       case 'boolean':
@@ -57,29 +63,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,92 +73,77 @@ 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],
   )
 
+  console.log({ isEditing })
+
   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 : (
+            <CollapseHorizontal in={!isEditing}>
               <TouchableOpacity
-                style={styles.editButton}
                 onPress={() => {
                   handleEditOpen()
                 }}
+                style={styles.submitButton}
                 onPressIn={() => setEditHovered(true)}
                 onPressOut={() => setEditHovered(false)}>
                 <Ionicons name="create-outline" size={20} color={iconColor} />
               </TouchableOpacity>
-            )}
-            {noCloseButton || !isEditing ? null : (
+            </CollapseHorizontal>
+            <CollapseHorizontal in={isEditing} style={styles.submitButtonContainer}>
               <TouchableOpacity
-                style={styles.editButton}
                 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
                 style={[styles.submitButton, { backgroundColor: submitColor }]}
                 onPress={() => {
@@ -183,7 +151,7 @@ export const Editable = <T extends Field>({
                 }}>
                 <Ionicons name="checkmark" size={20} color="#fff" />
               </TouchableOpacity>
-            </View>
+            </CollapseHorizontal>
           </View>
         )}
         <LoadingOverlay loading={isLoading} />
@@ -196,20 +164,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 +183,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/datetime/index.tsx

@@ -3,6 +3,7 @@ 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 { Portal } from 'react-native-paper'
 import { DatePickerModal, TimePickerModal } from 'react-native-paper-dates'
 import { FieldProps } from '../../types'
@@ -95,8 +96,12 @@ export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
             {formattedValue ?? placeholder}
           </Text>
           <View style={buttonContainer}>
-            <Ionicons name="calendar" size={iconSize} color={iconColor} />
-            <Ionicons name="time" size={iconSize} color={iconColor} />
+            <Pressable onPress={() => setShowDatePicker(true)}>
+              <Ionicons name="calendar" size={iconSize} color={iconColor} />
+            </Pressable>
+            <Pressable onPress={() => setShowTimePicker(true)}>
+              <Ionicons name="time" size={iconSize} color={iconColor} />
+            </Pressable>
             {optional && value ? (
               <DateInputClearButton
                 size={clearButtonSize}

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

@@ -102,13 +102,21 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
     )
   }
 
+  const selectedOptions = useMemo(() => {
+    return options.filter(o => value?.includes(o.value))
+  }, [options, value])
+
   return (
     <View style={[styles.wrapper]}>
       <MultiSelect
         ref={inputRef}
         style={[inputStyles, { borderColor }]}
         placeholderStyle={[text, { color: value?.length ? textColor : placeholderColor }]}
-        containerStyle={{ backgroundColor: menuBg, boxShadow: `0 0 10px ${borderColor}` }}
+        containerStyle={{
+          backgroundColor: menuBg,
+          boxShadow: `0 0 10px ${borderColor}`,
+          borderWidth: 0,
+        }}
         inputSearchStyle={[styles.inputSearch, text, { backgroundColor: inputBg, borderWidth: 0 }]}
         iconStyle={styles.iconStyle}
         data={options}
@@ -117,7 +125,9 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
         maxHeight={300}
         labelField="label"
         valueField="value"
-        placeholder={placeholder}
+        placeholder={
+          selectedOptions.length ? selectedOptions.map(v => v.label).join(', ') : placeholder
+        }
         searchPlaceholder={searchPlaceholder ?? placeholder}
         value={value ?? []}
         onChange={updated => {
@@ -198,6 +208,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     alignItems: 'center',
     marginTop: 4,
+    marginBottom: 4,
     marginHorizontal: 4,
   },
   optionClearContainer: {

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

@@ -120,7 +120,7 @@ const BaseSelectComponent = <T extends SelectField>(
               size={iconSize}
               color={iconColor}
             />
-            {optional && value && !inEditable ? (
+            {optional && value ? (
               <InputClearButton
                 size={clearButtonSize}
                 onPress={() => {

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

@@ -24,7 +24,7 @@ export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
         inputRef.current?.focus()
       },
       blur: () => {
-        inputRef.current?.blur()
+        inputRef.current?.clear()
       },
     }))
 
@@ -34,7 +34,7 @@ export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
     if (type === 'textarea') {
       return (
         <TextAreaComponent
-          ref={ref}
+          ref={inputRef}
           formSize={formSize}
           inputStyle={inputStyle}
           inEditable={inEditable}
@@ -51,6 +51,7 @@ export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
         ref={inputRef}
         style={[inputStyles, { color }, inputStyle]}
         secureTextEntry={isHidden}
+        selectTextOnFocus={inEditable}
         placeholderTextColor={placeholderColor}
         placeholder={placeholder}
         value={value ?? ''}

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

@@ -1,33 +1,21 @@
-import { InputRef } from '@chem-po/core'
 import { TextField, usePlaceholderColor, useTextColor } from '@chem-po/react'
-import React, { forwardRef, useImperativeHandle, useRef } from 'react'
+import React, { forwardRef } from 'react'
 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>>(
+export const TextAreaComponent = forwardRef<TextInput, FieldProps<TextField>>(
   ({ input, field, inEditable, formSize, inputStyle, style }, ref) => {
-    const inputRef = useRef<TextInput>(null)
     const { text, container } = useInputStyles(inEditable, field.size, formSize)
     const { value, onChange, ...inputProps } = input
-
-    useImperativeHandle(ref, () => ({
-      focus: () => {
-        inputRef.current?.focus()
-      },
-      blur: () => {
-        inputRef.current?.blur()
-      },
-    }))
-
     const placeholderColor = usePlaceholderColor()
     const color = useTextColor()
 
     return (
       <View style={[container, style]}>
         <AutoResizeTextarea
-          ref={inputRef}
+          ref={ref}
           style={[{ color, ...text }, inputStyle]}
           placeholder={field.placeholder}
           placeholderTextColor={placeholderColor}

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

@@ -38,25 +38,24 @@ export const useWebAutoResize = (
   onChangeText: ((e: string) => void) | undefined,
   style: StyleProp<TextStyle> | undefined,
 ) => {
-  const [height, setHeight] = useState(18)
+  const flattenedStyle = useMemo(() => StyleSheet.flatten(style), [style])
+  const [height, setHeight] = useState((flattenedStyle.fontSize ?? 18) + 4)
   const spanRef = useRef<HTMLSpanElement>(
     Platform.OS === 'web' ? document.createElement('span') : null,
   )
 
   useEffect(() => {
     if (Platform.OS === 'web' && spanRef.current) {
-      updateSpanStyle(spanRef.current, {
-        ...StyleSheet.flatten(style),
-      })
+      updateSpanStyle(spanRef.current, flattenedStyle)
     }
-  }, [style])
+  }, [flattenedStyle])
   const handleChange = useMemo(
     () =>
       Platform.OS === 'web'
         ? (e: string) => {
             if (spanRef.current) {
               const height = getWebTextHeight(e, spanRef)
-              setHeight(height ?? 18)
+              setHeight((height ?? 18) + 4)
               if (onChangeText) onChangeText(e)
             }
           }

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

@@ -1,8 +1,10 @@
 import { ImageViewOptions, InputSize } from '@chem-po/core'
-import { FileField } from '@chem-po/react'
+import { FileField, usePlaceholderColor } from '@chem-po/react'
 import React, { useMemo } from 'react'
 import { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { Txt } from '../../text/Txt'
 import { FileView } from '../input/file'
+import { useInputStyles } from '../input/hooks/useInputStyles'
 
 const styles = StyleSheet.create({
   container: {
@@ -16,9 +18,6 @@ const styles = StyleSheet.create({
     opacity: 0.7,
     fontWeight: '600',
   },
-  emptyText: {
-    opacity: 0.7,
-  },
   fileContainer: {
     padding: 4,
   },
@@ -59,6 +58,9 @@ export const FileFieldView = ({
     [imageOptions, size, sizeProp],
   )
 
+  const { text, container } = useInputStyles(false, field.size, sizeProp)
+  const placeholderColor = usePlaceholderColor()
+
   return (
     <View style={[value ? styles.container : styles.rowContainer, style]}>
       {!noLabel && <Text style={styles.label}>{placeholder}</Text>}
@@ -67,7 +69,9 @@ export const FileFieldView = ({
           <FileView imageOptions={options} value={value} />
         </View>
       ) : (
-        <Text style={styles.emptyText}>None</Text>
+        <View style={container}>
+          <Txt style={[text, { color: placeholderColor }]}>None</Txt>
+        </View>
       )}
     </View>
   )

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

@@ -1,5 +1,5 @@
 import { displayField, InputSize } from '@chem-po/core'
-import { Field, FormatField } from '@chem-po/react'
+import { Field, FormatField, usePlaceholderColor } from '@chem-po/react'
 import React, { useMemo } from 'react'
 import { StyleSheet, View, ViewStyle } from 'react-native'
 import { Txt } from '../../text'
@@ -22,30 +22,33 @@ const DefaultFieldView = ({
   noLabel,
   style,
   size: sizeProp,
+  inEditable,
 }: {
   field: Field
   value: any
   noLabel?: boolean
   style?: ViewStyle
   size?: InputSize
+  inEditable?: boolean
 }) => {
   const { placeholder } = field
 
-  const { text } = useInputStyles(false, field.size, sizeProp)
+  const { text, container: containerStyles } = useInputStyles(inEditable, field.size, sizeProp)
   const formatted = useMemo(() => {
     const format = displayField[field._type] as FormatField<Field>
     if (!format) return value
     return format(field, value)
   }, [value, field])
 
+  const placeholderColor = usePlaceholderColor()
   const hasValue = useMemo(() => {
     return value !== null && value !== undefined && value !== ''
   }, [value])
 
   return (
-    <View style={[styles.container, style]}>
+    <View style={[styles.container, containerStyles, { backgroundColor: 'transparent' }, style]}>
       {!noLabel && <Txt style={[inputViewStyles.label, text]}>{placeholder}</Txt>}
-      <Txt style={[hasValue ? inputViewStyles.value : inputViewStyles.valueEmpty, text]}>
+      <Txt style={[text, { color: hasValue ? undefined : placeholderColor }]}>
         {hasValue ? formatted : 'None'}
       </Txt>
     </View>
@@ -58,17 +61,26 @@ export const FieldView = ({
   noLabel,
   style,
   size,
+  inEditable,
 }: {
   field: Field
-  value: any
+  value?: any
   noLabel?: boolean
   style?: ViewStyle
   size?: InputSize
+  inEditable?: boolean
 }) => {
   switch (field._type) {
     case 'select':
       return (
-        <SelectFieldView style={style} field={field} value={value} noLabel={noLabel} size={size} />
+        <SelectFieldView
+          style={style}
+          field={field}
+          value={value}
+          noLabel={noLabel}
+          size={size}
+          inEditable={inEditable}
+        />
       )
     case 'multipleSelect':
       return (
@@ -86,7 +98,14 @@ export const FieldView = ({
       )
     default:
       return (
-        <DefaultFieldView style={style} field={field} value={value} noLabel={noLabel} size={size} />
+        <DefaultFieldView
+          style={style}
+          field={field}
+          value={value}
+          noLabel={noLabel}
+          size={size}
+          inEditable={inEditable}
+        />
       )
   }
 }

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

@@ -1,7 +1,8 @@
 import { InputSize } from '@chem-po/core'
-import { MultipleSelectField, useColorMode } from '@chem-po/react'
+import { MultipleSelectField, useColorMode, usePlaceholderColor } from '@chem-po/react'
 import { useMemo } from 'react'
 import React, { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { Txt } from '../../text/Txt'
 import { useInputStyles } from '../input/hooks/useInputStyles'
 import { SelectedOptionContainer } from '../input/multipleSelect'
 import { DefaultRenderOption } from './select'
@@ -12,6 +13,7 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     alignItems: 'center',
     maxWidth: '100%',
+    backgroundColor: 'transparent',
   },
   label: {
     paddingRight: 8,
@@ -27,9 +29,6 @@ const styles = StyleSheet.create({
     marginTop: 2,
     marginHorizontal: 2,
   },
-  emptyText: {
-    opacity: 0.6,
-  },
 })
 
 export const MultipleSelectFieldView = <F extends MultipleSelectField>({
@@ -48,13 +47,14 @@ export const MultipleSelectFieldView = <F extends MultipleSelectField>({
   const { placeholder, renderOption: customRender, options } = field
   const selectedOptions = options.filter(o => value?.includes(o.value))
   const colorMode = useColorMode()
-  const { size, container: inputStyles, text } = useInputStyles(undefined, field.size, sizeProp)
+  const { size, text, container } = useInputStyles(true, field.size, sizeProp)
+  const placeholderColor = usePlaceholderColor()
   const selectedOptionStyle = useMemo<ViewStyle>(() => {
     return {
-      paddingHorizontal: inputStyles.paddingHorizontal,
-      paddingVertical: inputStyles.paddingVertical,
+      paddingHorizontal: container.paddingHorizontal,
+      paddingVertical: container.paddingVertical,
     }
-  }, [inputStyles])
+  }, [container])
   const RenderOption = useMemo(() => customRender ?? DefaultRenderOption, [customRender])
   return (
     <View style={[styles.container, style]}>
@@ -74,7 +74,9 @@ export const MultipleSelectFieldView = <F extends MultipleSelectField>({
           ))}
         </View>
       ) : (
-        <Text style={[styles.emptyText, text]}>None</Text>
+        <View style={container}>
+          <Txt style={[text, { color: placeholderColor }]}>None</Txt>
+        </View>
       )}
     </View>
   )

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

@@ -10,6 +10,7 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
+    backgroundColor: 'transparent',
   },
   label: {
     paddingRight: 10,
@@ -32,17 +33,19 @@ export const SelectFieldView = ({
   noLabel,
   style,
   size: sizeProp,
+  inEditable,
 }: {
   field: SelectField
   value: any
   noLabel?: boolean
   style?: ViewStyle
   size?: InputSize
+  inEditable?: boolean
 }) => {
   const { placeholder, renderOption: customRender } = field
   const colorMode = useColorMode()
   const placeholderColor = usePlaceholderColor()
-  const { size, text } = useInputStyles(false, field.size, sizeProp)
+  const { size, text, container } = useInputStyles(inEditable, field.size, sizeProp)
   const selectedOption = field.options.find(o => o.value === value)
   const RenderOption = customRender ?? DefaultRenderOption
   return (
@@ -59,7 +62,9 @@ export const SelectFieldView = ({
           size={size}
         />
       ) : (
-        <Txt style={inputViewStyles.valueEmpty}>None</Txt>
+        <View style={container}>
+          <Txt style={[text, { color: placeholderColor }]}>None</Txt>
+        </View>
       )}
     </View>
   )