@chem-po/react-native 0.0.14 → 0.0.16

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

@@ -7,83 +7,55 @@ import {
   usePlaceholderColor,
 } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import React, {
-  ForwardedRef,
-  forwardRef,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import { Modal, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useRef } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Dropdown, IDropdownRef } from 'react-native-element-dropdown'
 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]
+import { useInputStyles } from '../hooks/useInputStyles'
 
 const BaseSelectComponent = <T extends SelectField>(
-  { field, input, meta }: FieldProps<T>,
+  { field, input, meta, formSize, inEditable }: FieldProps<T>,
   ref: ForwardedRef<InputRef>,
 ) => {
-  const { placeholder, options, renderOption: RenderOption, getOptionKey, optional } = field
+  const {
+    placeholder,
+    options,
+    renderOption: RenderOption,
+    optional,
+    searchable,
+    searchPlaceholder,
+  } = field
   const { onChange, value, onFocus, onBlur } = input
   const { active } = meta
-  const [buttonLayout, setButtonLayout] = useState({ x: 0, y: 0, width: 0, height: 0 })
-  const buttonRef = useRef<View>(null)
 
-  const selected = useMemo(() => {
-    if (!value) return undefined
-    return options.find(o => {
-      if (getOptionKey) {
-        const key1 = getOptionKey(o)
-        const key2 = getOptionKey(value)
-        return key1 === key2
-      }
-      return o === value
-    })
-  }, [value, options, getOptionKey])
+  const inputRef = useRef<IDropdownRef>(null)
+  const {
+    container: inputStyles,
+    iconSize,
+    text,
+    size,
+    clearButtonSize,
+    buttonContainer,
+  } = useInputStyles(inEditable, field.size, formSize)
 
   useImperativeHandle(ref, () => ({
     focus: () => {
-      onFocus()
-      // setIsOpen(true)
+      inputRef.current?.open()
     },
     blur: () => {
-      onBlur()
-      // setIsOpen(false)
+      inputRef.current?.close()
     },
   }))
 
-  const handleButtonLayout = () => {
-    buttonRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
-      setButtonLayout({ x: pageX, y: pageY, width, height })
-    })
-  }
-
-  const RenderOptionText = (props: RenderSelectOptionProps<T['defaultValue']>) => {
+  const RenderOptionText = (
+    props: RenderSelectOptionProps<T['options'][number]['value'], T['options'][number]>,
+  ) => {
     if (typeof RenderOption === 'function') {
-      return RenderOption({ ...props, value: props.value ?? '' })
-    }
-    if (typeof props.value === 'object') {
-      return <Txt>{JSON.stringify(props.value)}</Txt>
-    }
-    return <Txt>{String(props.value)}</Txt>
-  }
-
-  const getKey = (option: SelectOption<T>): string => {
-    if (getOptionKey) {
-      const key = getOptionKey(option)
-      return typeof key === 'object' ? JSON.stringify(key) : String(key)
+      return RenderOption(props)
     }
-    return typeof option === 'object' ? JSON.stringify(option) : String(option)
-  }
-
-  const handleOptionPress = (option: SelectOption<T>) => {
-    onChange(option)
-    onBlur()
-    // setIsOpen(false)
+    return <Txt style={styles.defaultOption}>{props.option.label}</Txt>
   }
 
   const iconColor = useIconColor()
@@ -91,73 +63,61 @@ const BaseSelectComponent = <T extends SelectField>(
   const menuBg = useBackgroundColor(100)
   const selectedOptionBg = useBackgroundColor(50)
   const borderColor = useBorderColor()
+
   return (
     <View style={styles.wrapper}>
-      <View ref={buttonRef} onLayout={handleButtonLayout} style={styles.container}>
-        <TouchableOpacity
-          style={[styles.button, inputStyles.input]}
-          onPress={() => {
-            if (active) {
-              onBlur()
-            } else {
-              onFocus()
-            }
-          }}>
-          <View style={styles.buttonTextContainer}>
-            {selected ? (
-              <RenderOptionText value={selected} colorMode="light" isSelected={true} />
-            ) : (
-              <Text style={[styles.placeholder, { color: placeholderColor }]}>{placeholder}</Text>
-            )}
+      <Dropdown
+        ref={inputRef}
+        style={[inputStyles, { borderColor }]}
+        placeholderStyle={[text, { color: placeholderColor }]}
+        selectedTextStyle={text}
+        inputSearchStyle={[styles.inputSearch, text]}
+        iconStyle={styles.iconStyle}
+        data={options}
+        search={searchable}
+        searchField={searchable ? 'label' : undefined}
+        maxHeight={300}
+        labelField="label"
+        valueField="value"
+        placeholder={placeholder}
+        searchPlaceholder={searchPlaceholder ?? placeholder}
+        value={value}
+        onChange={item => {
+          onChange(item.value)
+        }}
+        activeColor={selectedOptionBg}
+        // onFocus={onFocus}
+        // onBlur={onBlur}
+        renderItem={(item, selected) => (
+          <View style={{ backgroundColor: selected ? selectedOptionBg : menuBg }}>
+            <RenderOptionText
+              value={item.value}
+              option={item}
+              colorMode="light"
+              isSelected={!!selected}
+              size={size}
+            />
           </View>
-          <Ionicons
-            name={active ? 'chevron-up' : 'chevron-down'}
-            size={20}
-            color={iconColor}
-            style={styles.icon}
-          />
-          {optional && value ? (
-            <InputClearButton onPress={() => onChange(null)} isActive={!!value} />
-          ) : null}
-        </TouchableOpacity>
-      </View>
-      <Modal visible={active} transparent animationType="fade" onRequestClose={() => onBlur()}>
-        <TouchableOpacity style={styles.modalOverlay} activeOpacity={1} onPress={() => onBlur()}>
-          <View
-            style={[
-              styles.dropdownContainer,
-              {
-                position: 'absolute',
-                top: buttonLayout.y + buttonLayout.height + 4,
-                left: buttonLayout.x,
-                width: buttonLayout.width,
-                backgroundColor: menuBg,
-                borderColor,
-              },
-            ]}>
-            <ScrollView style={styles.dropdown}>
-              {options.map((option: SelectOption<T>) => {
-                const key = getKey(option)
-                const isSelected = option === selected
-                return (
-                  <TouchableOpacity
-                    key={key}
-                    style={[
-                      styles.option,
-                      { borderColor },
-                      isSelected && { backgroundColor: selectedOptionBg },
-                    ]}
-                    onPress={() => handleOptionPress(option)}>
-                    <View>
-                      <RenderOptionText value={option} colorMode="light" isSelected={isSelected} />
-                    </View>
-                  </TouchableOpacity>
-                )
-              })}
-            </ScrollView>
+        )}
+        renderRightIcon={() => (
+          <View style={buttonContainer}>
+            <Ionicons
+              name={active ? 'chevron-up' : 'chevron-down'}
+              size={iconSize}
+              color={iconColor}
+            />
+            {optional && value ? (
+              <InputClearButton
+                size={clearButtonSize}
+                onPress={() => {
+                  onChange(null)
+                }}
+                isActive={!!value}
+              />
+            ) : null}
           </View>
-        </TouchableOpacity>
-      </Modal>
+        )}
+      />
     </View>
   )
 }
@@ -168,54 +128,16 @@ const styles = StyleSheet.create({
   wrapper: {
     width: '100%',
   },
-  container: {
-    width: '100%',
-  },
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    backgroundColor: 'transparent',
-    borderRadius: 4,
-  },
-  buttonTextContainer: {
-    flex: 1,
-  },
-  buttonText: {
-    fontSize: 16,
+  defaultOption: {
+    padding: 10,
   },
-  modalOverlay: {
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  iconStyle: {
+    width: 20,
+    height: 20,
   },
-  dropdownContainer: {
-    backgroundColor: 'white',
-    borderWidth: 1,
-    borderColor: '#ddd',
-    borderRadius: 4,
-    maxHeight: 200,
-    elevation: 3,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 2,
-    padding: 0,
-  },
-  dropdown: {
-    maxHeight: 200,
-  },
-  option: {
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderBottomWidth: 1,
-  },
-  optionText: {
+  inputSearch: {
+    height: 40,
     fontSize: 16,
-  },
-  placeholder: {
-    color: '#666',
-  },
-  icon: {
-    marginRight: 10,
+    outlineWidth: 0,
   },
 })

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

@@ -4,15 +4,16 @@ 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 { useInputStyles } from '../hooks/useInputStyles'
 import { TextAreaComponent } from './textarea'
 
 export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
-  ({ input, inEditable, meta, field, style }, ref) => {
+  ({ input, inEditable, meta, field, style, formSize }, ref) => {
     const { placeholder, type } = field
     const [isHidden, setIsHidden] = useState(type === 'password')
     const { value, onChange, ...inputProps } = input
     const inputRef = useRef<TextInput>(null)
+    const { container: inputStyles } = useInputStyles(inEditable, field.size, formSize)
 
     useImperativeHandle(ref, () => ({
       focus: () => {
@@ -31,13 +32,7 @@ export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
       ) : (
         <TextInput
           ref={inputRef}
-          style={[
-            inputStyles.input,
-            // inEditable && styles.inEditable,
-            type === 'password' && styles.passwordInput,
-            { color },
-            style,
-          ]}
+          style={[inputStyles, { color }, style]}
           secureTextEntry={isHidden}
           placeholderTextColor={placeholderColor}
           placeholder={placeholder}

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

@@ -1,12 +1,14 @@
 import { InputRef } from '@chem-po/core'
 import { TextField, usePlaceholderColor, useTextColor } from '@chem-po/react'
 import React, { forwardRef, useImperativeHandle, useRef } from 'react'
-import { StyleSheet, TextInput } from 'react-native'
+import { StyleSheet, TextInput, View } from 'react-native'
 import { FieldProps } from '../../types'
+import { useInputStyles } from '../hooks/useInputStyles'
 
 export const TextAreaComponent = forwardRef<InputRef, FieldProps<TextField>>(
-  ({ input, field, inEditable }, ref) => {
+  ({ input, field, inEditable, formSize }, ref) => {
     const inputRef = useRef<TextInput>(null)
+    const { container: inputStyles } = useInputStyles(inEditable, field.size, formSize)
     const { value, onChange, ...inputProps } = input
 
     useImperativeHandle(ref, () => ({
@@ -22,18 +24,20 @@ export const TextAreaComponent = forwardRef<InputRef, FieldProps<TextField>>(
     const color = useTextColor()
 
     return (
-      <TextInput
-        ref={inputRef}
-        style={[styles.textarea, inEditable && styles.inEditable, { color }]}
-        placeholder={field.placeholder}
-        placeholderTextColor={placeholderColor}
-        multiline
-        maxLength={200}
-        textAlignVertical="top"
-        value={value ?? ''}
-        onChangeText={onChange}
-        {...inputProps}
-      />
+      <View style={inputStyles}>
+        <TextInput
+          ref={inputRef}
+          style={[styles.textarea, inEditable && styles.inEditable, { color }]}
+          placeholder={field.placeholder}
+          placeholderTextColor={placeholderColor}
+          multiline
+          maxLength={200}
+          textAlignVertical="top"
+          value={value ?? ''}
+          onChangeText={onChange}
+          {...inputProps}
+        />
+      </View>
     )
   },
 )
@@ -44,8 +48,6 @@ const styles = StyleSheet.create({
   textarea: {
     width: '100%',
     minHeight: 80,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
     backgroundColor: 'transparent',
     textAlignVertical: 'top',
   },

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

@@ -8,12 +8,27 @@ 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'
+import { useInputStyles } from '../hooks/useInputStyles'
 
 export const TimeInput = forwardRef<InputRef, FieldProps<TimeField>>(
-  ({ input: { onChange, value, onFocus, onBlur }, field: { placeholder, optional } }, ref) => {
+  (
+    {
+      input: { onChange, value, onFocus, onBlur },
+      field: { placeholder, optional, size },
+      formSize,
+      inEditable,
+    },
+    ref,
+  ) => {
     const [visible, setVisible] = useState(false)
 
+    const {
+      container: inputStyles,
+      iconSize,
+      text,
+      clearButtonSize,
+      buttonContainer,
+    } = useInputStyles(inEditable, size, formSize)
     useImperativeHandle(ref, () => ({
       focus: () => {
         setVisible(true)
@@ -57,16 +72,24 @@ export const TimeInput = forwardRef<InputRef, FieldProps<TimeField>>(
     return (
       <View style={styles.container}>
         <TouchableOpacity
-          style={[styles.button, inputStyles.input]}
+          style={[styles.button, inputStyles]}
           onPress={() => {
             setVisible(true)
             onFocus()
           }}>
-          <Text style={[styles.text, { color: inputColor }]}>{formattedValue ?? placeholder}</Text>
-          <Ionicons name="time" size={20} color={iconColor} style={styles.icon} />
-          {optional && value ? (
-            <DateInputClearButton onPress={() => onChange(null)} isActive={!!value} />
-          ) : null}
+          <Text style={[styles.text, text, { color: inputColor }]}>
+            {formattedValue ?? placeholder}
+          </Text>
+          <View style={buttonContainer}>
+            <Ionicons name="time" size={iconSize} color={iconColor} />
+            {optional && value ? (
+              <DateInputClearButton
+                size={clearButtonSize}
+                onPress={() => onChange(null)}
+                isActive={!!value}
+              />
+            ) : null}
+          </View>
         </TouchableOpacity>
         <Portal>
           <TimePickerModal
@@ -98,7 +121,4 @@ const styles = StyleSheet.create({
     fontSize: 16,
     flex: 1,
   },
-  icon: {
-    marginRight: 10,
-  },
 })

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

@@ -1,4 +1,4 @@
-import { ImageViewOptions } from '@chem-po/core'
+import { ImageViewOptions, InputSize } from '@chem-po/core'
 import { FileField } from '@chem-po/react'
 import React, { useMemo } from 'react'
 import { StyleSheet, Text, View, ViewStyle } from 'react-native'
@@ -24,24 +24,39 @@ const styles = StyleSheet.create({
   },
 })
 
+const getFileSizeHeight = (size: InputSize) => {
+  switch (size) {
+    case 'sm':
+      return 80
+    case 'md':
+      return 120
+    case 'lg':
+      return 150
+    default:
+      return 120
+  }
+}
+
 export const FileFieldView = ({
   field,
   value,
   noLabel,
   style,
+  size: sizeProp,
 }: {
   field: FileField
   value: any
   noLabel?: boolean
   style?: ViewStyle
+  size?: InputSize
 }) => {
-  const { imageOptions, placeholder } = field
+  const { imageOptions, placeholder, size } = field
   const options = useMemo<ImageViewOptions>(
     () => ({
-      height: 150,
+      height: getFileSizeHeight(size ?? sizeProp ?? 'md'),
       ...imageOptions,
     }),
-    [imageOptions],
+    [imageOptions, size, sizeProp],
   )
 
   return (

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

@@ -1,30 +1,19 @@
-import { formatField } from '@chem-po/core'
-import { Field } from '@chem-po/react'
+import { displayField, InputSize } from '@chem-po/core'
+import { Field, FormatField } from '@chem-po/react'
 import React, { useMemo } from 'react'
 import { StyleSheet, View, ViewStyle } from 'react-native'
 import { Txt } from '../../text'
+import { useInputStyles } from '../input/hooks/useInputStyles'
 import { FileFieldView } from './file'
 import { MultipleSelectFieldView } from './multipleSelect'
 import { SelectFieldView } from './select'
+import { inputViewStyles } from './styles'
 
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
   },
-  label: {
-    paddingRight: 8,
-    opacity: 0.7,
-    fontWeight: '600',
-  },
-  value: {
-    opacity: 1,
-    fontSize: 16,
-  },
-  valueEmpty: {
-    opacity: 0.6,
-    fontSize: 16,
-  },
 })
 
 const DefaultFieldView = ({
@@ -32,24 +21,33 @@ const DefaultFieldView = ({
   value,
   noLabel,
   style,
+  size: sizeProp,
 }: {
   field: Field
   value: any
   noLabel?: boolean
   style?: ViewStyle
+  size?: InputSize
 }) => {
   const { placeholder } = field
 
+  const { text } = useInputStyles(false, field.size, sizeProp)
   const formatted = useMemo(() => {
-    const format = formatField[field._type]
+    const format = displayField[field._type] as FormatField<Field>
     if (!format) return value
     return format(field, value)
   }, [value, field])
 
+  const hasValue = useMemo(() => {
+    return value !== null && value !== undefined && value !== ''
+  }, [value])
+
   return (
     <View style={[styles.container, style]}>
-      {!noLabel && <Txt style={styles.label}>{placeholder}</Txt>}
-      <Txt style={value ? styles.value : styles.valueEmpty}>{formatted ?? 'None'}</Txt>
+      {!noLabel && <Txt style={[inputViewStyles.label, text]}>{placeholder}</Txt>}
+      <Txt style={[hasValue ? inputViewStyles.value : inputViewStyles.valueEmpty, text]}>
+        {hasValue ? formatted : 'None'}
+      </Txt>
     </View>
   )
 }
@@ -59,20 +57,36 @@ export const FieldView = ({
   value,
   noLabel,
   style,
+  size,
 }: {
   field: Field
   value: any
   noLabel?: boolean
   style?: ViewStyle
+  size?: InputSize
 }) => {
   switch (field._type) {
     case 'select':
-      return <SelectFieldView style={style} field={field} value={value} noLabel={noLabel} />
+      return (
+        <SelectFieldView style={style} field={field} value={value} noLabel={noLabel} size={size} />
+      )
     case 'multipleSelect':
-      return <MultipleSelectFieldView style={style} field={field} value={value} noLabel={noLabel} />
+      return (
+        <MultipleSelectFieldView
+          style={style}
+          field={field}
+          value={value}
+          noLabel={noLabel}
+          size={size}
+        />
+      )
     case 'file':
-      return <FileFieldView style={style} field={field} value={value} noLabel={noLabel} />
+      return (
+        <FileFieldView style={style} field={field} value={value} noLabel={noLabel} size={size} />
+      )
     default:
-      return <DefaultFieldView style={style} field={field} value={value} noLabel={noLabel} />
+      return (
+        <DefaultFieldView style={style} field={field} value={value} noLabel={noLabel} size={size} />
+      )
   }
 }