@chem-po/react-native 0.0.29 → 0.0.31

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,19 +86,27 @@ 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>
     )
   }
 
+  const selectedOptions = useMemo(() => {
+    return options.filter(o => value?.includes(o.value))
+  }, [options, value])
+
   return (
     <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}` }}
+        containerStyle={{
+          backgroundColor: menuBg,
+          boxShadow: `0 0 6px ${borderColor}`,
+          borderWidth: 0,
+        }}
         inputSearchStyle={[styles.inputSearch, text, { backgroundColor: inputBg, borderWidth: 0 }]}
         iconStyle={styles.iconStyle}
         data={options}
@@ -117,7 +115,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 => {
@@ -125,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}
@@ -179,7 +191,7 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   defaultOption: {
-    padding: 10,
+    flex: 1,
   },
   iconStyle: {
     width: 20,
@@ -188,7 +200,6 @@ const styles = StyleSheet.create({
   inputSearch: {
     paddingVertical: 4,
     minHeight: 0,
-    height: 'auto',
     outlineWidth: 0,
     fontSize: 16,
   },
@@ -198,6 +209,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     alignItems: 'center',
     marginTop: 4,
+    marginBottom: 4,
     marginHorizontal: 4,
   },
   optionClearContainer: {
@@ -205,7 +217,6 @@ const styles = StyleSheet.create({
     borderLeftWidth: 1,
     borderTopRightRadius: 8,
     borderBottomRightRadius: 8,
-    height: '100%',
     justifyContent: 'center',
   },
 })

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/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'
@@ -24,7 +25,7 @@ export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
         inputRef.current?.focus()
       },
       blur: () => {
-        inputRef.current?.blur()
+        inputRef.current?.clear()
       },
     }))
 
@@ -34,7 +35,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 +52,7 @@ export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
         ref={inputRef}
         style={[inputStyles, { color }, inputStyle]}
         secureTextEntry={isHidden}
+        selectTextOnFocus={inEditable}
         placeholderTextColor={placeholderColor}
         placeholder={placeholder}
         value={value ?? ''}
@@ -62,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

@@ -1,34 +1,22 @@
-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}
-          style={[{ color, ...text }, inputStyle]}
+          ref={ref}
+          style={[{ color, ...text, paddingBottom: inEditable ? 0 : 4 }, inputStyle]}
           placeholder={field.placeholder}
           placeholderTextColor={placeholderColor}
           multiline

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

@@ -38,33 +38,34 @@ 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 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,
   )
 
   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 ?? 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/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,
@@ -23,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 = ({
@@ -32,17 +37,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 +66,9 @@ export const SelectFieldView = ({
           size={size}
         />
       ) : (
-        <Txt style={inputViewStyles.valueEmpty}>None</Txt>
+        <View style={container}>
+          <Txt style={[text, { color: placeholderColor }]}>None</Txt>
+        </View>
       )}
     </View>
   )

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

@@ -9,7 +9,4 @@ export const inputViewStyles = StyleSheet.create({
   value: {
     opacity: 1,
   },
-  valueEmpty: {
-    opacity: 0.6,
-  },
 })