@chem-po/react-native 0.0.28 → 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,14 +9,14 @@ 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'
 import { StandaloneInput } from './StandaloneInput'
-import { InputClearButton } from './common/InputClearButton'
-import { useInputStyles } from './hooks/useInputStyles'
 
 export const Editable = <T extends Field>({
   value: initValue,
@@ -26,7 +28,9 @@ export const Editable = <T extends Field>({
   onEditOpen,
   containerStyle,
   size,
-}: EditableProps<ViewStyle, T>) => {
+  CustomInput,
+  CustomView,
+}: EditableProps<ViewStyle, TextStyle, T>) => {
   const {
     inputRef,
     setValue,
@@ -38,7 +42,6 @@ export const Editable = <T extends Field>({
     isEditing,
     value,
     setEditHovered,
-    submitValue,
     submit,
   } = useEditable({
     value: initValue,
@@ -50,6 +53,7 @@ export const Editable = <T extends Field>({
   })
 
   const alwaysEditing = useMemo(() => {
+    if (!field) return false
     switch (field._type) {
       case 'file':
       case 'boolean':
@@ -59,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()
@@ -89,110 +70,80 @@ export const Editable = <T extends Field>({
   }, [isEditing, inputRef])
 
   const iconColor = useIconColor()
-  const { clearButtonSize } = useInputStyles(true, field.size, size)
   const editingBorderColor = useColorModeValue('#00000055', '#ffffff55')
-  const submitColor = useThemeValue('colors.accent.200')
+  const submitColor = useThemeValue('colors.accent.600')
 
-  const needsClearButton = useMemo(() => {
-    if (!field.optional) return false
-    switch (field._type) {
-      case 'select':
-        return true
-    }
-  }, [field])
-
-  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}
-              onChange={shouldSubmitOnChange ? v => submitValue(v) : setValue}
-              onBlur={handleBlur}
+              size={size}
             />
           ) : (
-            <FieldView noLabel style={style} field={field} value={value} />
+            <RenderView inEditable noLabel size={size} value={value} />
           )}
         </View>
         {!alwaysEditing && (
           <View style={styles.buttonsContainer}>
-            {needsClearButton ? (
-              <InputClearButton
-                size={clearButtonSize}
+            <CollapseHorizontal in={!isEditing}>
+              <TouchableOpacity
                 onPress={() => {
-                  submitValue(null)
+                  handleEditOpen()
                 }}
-                isActive={!!value}
-              />
-            ) : null}
-            {noCloseButton && isEditing ? null : (
+                style={styles.submitButton}
+                onPressIn={() => setEditHovered(true)}
+                onPressOut={() => setEditHovered(false)}>
+                <Ionicons name="create-outline" size={20} color={iconColor} />
+              </TouchableOpacity>
+            </CollapseHorizontal>
+            <CollapseHorizontal in={isEditing} style={styles.submitButtonContainer}>
               <TouchableOpacity
-                style={styles.editButton}
                 onPress={() => {
-                  if (isEditing) {
-                    setValue(value)
-                    handleEditClose()
-                  } else {
-                    handleEditOpen()
-                  }
+                  handleEditClose()
                 }}
+                style={styles.submitButton}
                 onPressIn={() => setEditHovered(true)}
                 onPressOut={() => setEditHovered(false)}>
-                <Ionicons
-                  name={isEditing ? 'close' : 'create-outline'}
-                  size={20}
-                  color={iconColor}
-                />
+                <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={() => {
@@ -200,7 +151,7 @@ export const Editable = <T extends Field>({
                 }}>
                 <Ionicons name="checkmark" size={20} color="#fff" />
               </TouchableOpacity>
-            </View>
+            </CollapseHorizontal>
           </View>
         )}
         <LoadingOverlay loading={isLoading} />
@@ -213,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%',
   },
@@ -236,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,22 +1,33 @@
 import { InputRef } from '@chem-po/core'
-import { Field, useStandaloneInput } from '@chem-po/react'
+import { BaseCustomInputProps, Field, useStandaloneInput } from '@chem-po/react'
 import React, { ForwardedRef, forwardRef } from 'react'
-import { StyleProp, ViewStyle } from 'react-native'
+import { TextStyle, ViewStyle } from 'react-native'
 import { Input } from './input'
 
-interface StandaloneInputProps {
-  onChange: (v?: any) => void
-  value?: any
-  field: Field
-  onBlur?: () => void
-  onFocus?: () => void
-  theme?: 'basic' | 'detailed'
-  inEditable?: boolean
-  style?: StyleProp<ViewStyle>
+interface StandaloneInputProps<
+  T extends Field,
+  ContainerStyle extends ViewStyle = ViewStyle,
+  InputStyle extends TextStyle = TextStyle,
+> extends BaseCustomInputProps<T['defaultValue'], ContainerStyle, InputStyle> {
+  field: T
 }
 
-const StandaloneInputBase = (
-  { onChange, value, field, onBlur, inEditable, onFocus, style }: StandaloneInputProps,
+const StandaloneInputBase = <
+  T extends Field,
+  ContainerStyle extends ViewStyle = ViewStyle,
+  InputStyle extends TextStyle = TextStyle,
+>(
+  {
+    onChange,
+    value,
+    field,
+    onBlur,
+    inEditable,
+    onFocus,
+    style,
+    size,
+    inputStyle,
+  }: StandaloneInputProps<T, ContainerStyle, InputStyle>,
   ref: ForwardedRef<InputRef>,
 ) => {
   const { inputProps, meta } = useStandaloneInput(field, value, onChange, onFocus, onBlur)
@@ -28,6 +39,8 @@ const StandaloneInputBase = (
       inEditable={inEditable}
       style={style}
       input={inputProps}
+      inputStyle={inputStyle}
+      formSize={size}
       meta={meta}
     />
   )

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/hooks/useInputStyles.ts

@@ -110,7 +110,7 @@ export const useInputStyles = (
   const textColor = useTextColor()
   const usedSize = size ?? formSize
   return {
-    text: { ...inputTextSizeMap[usedSize], color: textColor },
+    text: { ...inputTextSizeMap[usedSize], color: textColor, outlineWidth: 0 },
     container: {
       ...inputStyles.input,
       ...(inEditable ? editableInputSizeMap[usedSize] : inputSizeMap[usedSize]),

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

@@ -30,7 +30,12 @@ export const SelectedOptionContainer = ({
   style,
 }: PropsWithChildren<{ key?: string; style?: StyleProp<ViewStyle> }>) => {
   const borderColor = useBorderColor()
-  return <View style={[styles.selectedOption, { borderColor }, style]}>{children}</View>
+  const bg = useBackgroundColor(100)
+  return (
+    <View style={[styles.selectedOption, { borderColor, backgroundColor: bg }, style]}>
+      {children}
+    </View>
+  )
 }
 
 const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
@@ -55,7 +60,8 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
   const textColor = useTextColor()
   const placeholderColor = usePlaceholderColor()
   const menuBg = useBackgroundColor(100)
-  const selectedOptionBg = useColorModeValue('#ffffff77', '#ffffff15')
+  const inputBg = useBackgroundColor(50)
+  const selectedOptionBg = useColorModeValue('#ffffff55', '#ffffff22')
   const borderColor = useBorderColor()
 
   useImperativeHandle(ref, () => ({
@@ -96,14 +102,22 @@ 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 }}
-        inputSearchStyle={[styles.inputSearch, text]}
+        containerStyle={{
+          backgroundColor: menuBg,
+          boxShadow: `0 0 10px ${borderColor}`,
+          borderWidth: 0,
+        }}
+        inputSearchStyle={[styles.inputSearch, text, { backgroundColor: inputBg, borderWidth: 0 }]}
         iconStyle={styles.iconStyle}
         data={options}
         search={searchable}
@@ -111,24 +125,27 @@ 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 => {
           onChange(updated)
         }}
-        activeColor={selectedOptionBg}
         onFocus={onFocus}
         onBlur={onBlur}
         renderItem={(item, selected) => (
-          <View style={{ backgroundColor: selected ? selectedOptionBg : menuBg }}>
-            <RenderOptionText
-              value={item.value}
-              option={item}
-              colorMode={colorMode}
-              isSelected={!!selected}
-              size={size}
-            />
+          <View style={{ backgroundColor: menuBg }}>
+            <View style={{ backgroundColor: selected ? selectedOptionBg : 'transparent' }}>
+              <RenderOptionText
+                value={item.value}
+                option={item}
+                colorMode={colorMode}
+                isSelected={!!selected}
+                size={size}
+              />
+            </View>
           </View>
         )}
         renderSelectedItem={item => (
@@ -140,11 +157,7 @@ const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
               isSelected
               size={size}
             />
-            <View
-              style={[
-                styles.optionClearContainer,
-                { borderColor, backgroundColor: selectedOptionBg },
-              ]}>
+            <View style={[styles.optionClearContainer, { borderColor }]}>
               <InputClearButton
                 size={clearButtonSize}
                 onPress={() => {
@@ -183,10 +196,10 @@ const styles = StyleSheet.create({
     height: 20,
   },
   inputSearch: {
-    outlineWidth: 0,
     paddingVertical: 4,
     minHeight: 0,
     height: 'auto',
+    outlineWidth: 0,
     fontSize: 16,
   },
   selectedOption: {
@@ -195,6 +208,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     alignItems: 'center',
     marginTop: 4,
+    marginBottom: 4,
     marginHorizontal: 4,
   },
   optionClearContainer: {

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

@@ -8,10 +8,25 @@ import { useInputImperativeHandle } from '../hooks/useInputImperativeHandle'
 import { useInputStyles } from '../hooks/useInputStyles'
 
 export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & { prefix?: string }>(
-  ({ input: { onChange, value, ...input }, field, prefix, inEditable, style, formSize }, ref) => {
+  (
+    {
+      input: { onChange, value, ...input },
+      inputStyle,
+      field,
+      prefix,
+      inEditable,
+      style,
+      formSize,
+    },
+    ref,
+  ) => {
     const { type, defaultValue, placeholder, size } = field
     const color = useTextColor()
-    const { container: inputStyles } = useInputStyles(inEditable, size, formSize)
+    const { container: conatinerStyles, text: inputStyles } = useInputStyles(
+      inEditable,
+      size,
+      formSize,
+    )
     const inputRef = useInputImperativeHandle(ref)
     const [endsWith, setEndsWith] = useState('')
     const displayed = typeof value === 'number' && !Number.isNaN(value) ? `${value}${endsWith}` : ''
@@ -22,6 +37,7 @@ export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & {
       return (
         <InputSlider
           label={placeholder}
+          style={style}
           onValueChange={onChange}
           value={value}
           minimumValue={defaultValue}
@@ -30,11 +46,11 @@ export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & {
     }
 
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, conatinerStyles, style]}>
         {prefix && <Text style={styles.prefix}>{prefix}</Text>}
         <TextInput
           ref={inputRef}
-          style={[inputStyles, { color }, style]}
+          style={[inputStyles, { color, outlineWidth: 0 }, inputStyle]}
           placeholder={field.placeholder}
           placeholderTextColor={placeholderColor}
           keyboardType="numeric"

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

@@ -3,6 +3,7 @@ import {
   SelectField,
   useBackgroundColor,
   useBorderColor,
+  useColorMode,
   useIconColor,
   usePlaceholderColor,
 } from '@chem-po/react'
@@ -29,6 +30,7 @@ const BaseSelectComponent = <T extends SelectField>(
   } = field
   const { onChange, value, onFocus, onBlur } = input
   const { active } = meta
+  const colorMode = useColorMode()
 
   const inputRef = useRef<IDropdownRef>(null)
   const {
@@ -70,8 +72,18 @@ const BaseSelectComponent = <T extends SelectField>(
         ref={inputRef}
         style={[inputStyles, { borderColor }]}
         placeholderStyle={[text, { color: placeholderColor }]}
+        containerStyle={{
+          backgroundColor: menuBg,
+          borderWidth: 0,
+          borderColor: 'transparent',
+          boxShadow: `0 0 10px ${borderColor}`,
+        }}
         selectedTextStyle={text}
-        inputSearchStyle={[styles.inputSearch, text]}
+        inputSearchStyle={[
+          styles.inputSearch,
+          text,
+          { backgroundColor: selectedOptionBg, borderColor: 'transparent' },
+        ]}
         iconStyle={styles.iconStyle}
         data={options}
         search={searchable}
@@ -95,7 +107,7 @@ const BaseSelectComponent = <T extends SelectField>(
             <RenderOptionText
               value={item.value}
               option={item}
-              colorMode="light"
+              colorMode={colorMode}
               isSelected={!!selected}
               size={size}
             />
@@ -114,7 +126,7 @@ const BaseSelectComponent = <T extends SelectField>(
                 onPress={() => {
                   onChange(null)
                 }}
-                isActive={!!value}
+                isActive
               />
             ) : null}
           </View>

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

@@ -0,0 +1,45 @@
+import { forwardRef } from 'react'
+import { StyleSheet, TextInput, TextInputProps } from 'react-native'
+
+import { useIconColor, useTextColor } from '@chem-po/react'
+
+import React from 'react'
+import { useWebAutoResize } from './useWebAutoResize'
+
+export const AutoResizeTextarea = forwardRef<TextInput, TextInputProps>(
+  ({ style, value, onChangeText, ...props }, ref) => {
+    const textColor = useTextColor()
+
+    const { handleChange, height, setHeight } = useWebAutoResize(onChangeText, style)
+
+    const iconColor = useIconColor()
+
+    return (
+      <TextInput
+        ref={ref}
+        cursorColor={iconColor}
+        onContentSizeChange={e => {
+          setHeight(e.nativeEvent.contentSize.height)
+        }}
+        multiline
+        style={[styles.textarea, { color: textColor, height }, style]}
+        value={value}
+        onChangeText={handleChange}
+        {...props}
+      />
+    )
+  },
+)
+const styles = StyleSheet.create({
+  textarea: {
+    width: '100%',
+    minHeight: 18,
+    backgroundColor: 'transparent',
+    textAlignVertical: 'top',
+    outlineWidth: 0,
+  },
+  inEditable: {
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+  },
+})