@chem-po/react-native 0.0.15 → 0.0.17

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

@@ -8,7 +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'
+import { useInputStyles } from '../hooks/useInputStyles'
 
 // const parseDate = (date?: Date) =>
 //   date
@@ -21,12 +21,21 @@ export const DateInput = forwardRef<InputRef, FieldProps<DateField>>(
   (
     {
       input: { onChange, value, onFocus, onBlur },
-      field: { placeholder, minDate, maxDate, optional },
+      field: { placeholder, minDate, maxDate, optional, size },
       meta: { active },
+      formSize,
+      inEditable,
     },
     ref,
   ) => {
     const date = useMemo(() => (value ? new Date(`${value}T00:00:00.000`) : undefined), [value])
+    const {
+      container: inputStyles,
+      iconSize,
+      text,
+      clearButtonSize,
+      buttonContainer,
+    } = useInputStyles(inEditable, size, formSize)
 
     useImperativeHandle(ref, () => ({
       focus: () => {
@@ -49,14 +58,20 @@ export const DateInput = forwardRef<InputRef, FieldProps<DateField>>(
 
     return (
       <View style={styles.container}>
-        <TouchableOpacity style={[styles.button, inputStyles.input]} onPress={showDialog}>
-          <Text style={[styles.text, { color: inputColor }]}>
+        <TouchableOpacity style={[styles.button, inputStyles]} onPress={showDialog}>
+          <Text style={[styles.text, text, { color: inputColor }]}>
             {value ? getDateString(value, 'short') : placeholder}
           </Text>
-          <Ionicons name="calendar" size={20} color={iconColor} style={styles.icon} />
-          {optional && value ? (
-            <DateInputClearButton onPress={() => onChange(null)} isActive />
-          ) : null}
+          <View style={buttonContainer}>
+            <Ionicons name="calendar" size={iconSize} color={iconColor} />
+            {optional && value ? (
+              <DateInputClearButton
+                size={clearButtonSize}
+                onPress={() => onChange(null)}
+                isActive={!!value}
+              />
+            ) : null}
+          </View>
         </TouchableOpacity>
         <Portal>
           <DatePickerModal
@@ -92,10 +107,6 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   text: {
-    fontSize: 16,
     flex: 1,
   },
-  icon: {
-    marginRight: 10,
-  },
 })

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

@@ -8,14 +8,23 @@ 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'
+import { useInputStyles } from '../hooks/useInputStyles'
 
 export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
-  ({ input: { value, onBlur, onChange, onFocus }, field, meta: { active } }, ref) => {
+  (
+    { input: { value, onBlur, onChange, onFocus }, field, meta: { active }, formSize, inEditable },
+    ref,
+  ) => {
     const { placeholder, optional } = field
     const [showDatePicker, setShowDatePicker] = useState(true)
     const [showTimePicker, setShowTimePicker] = useState(false)
-    // const [selectedDate] = useState<Date>(value ? new Date(value) : new Date())
+    const {
+      container: inputStyles,
+      iconSize,
+      text,
+      clearButtonSize,
+      buttonContainer,
+    } = useInputStyles(inEditable, field.size, formSize)
 
     const selectedDate = useMemo(() => (value ? new Date(value) : new Date()), [value])
     useImperativeHandle(ref, () => ({
@@ -77,17 +86,25 @@ export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
     return (
       <View style={styles.container}>
         <TouchableOpacity
-          style={[styles.button, inputStyles.input]}
+          style={[styles.button, inputStyles]}
           onPress={() => {
             setShowDatePicker(true)
             onFocus()
           }}>
-          <Text style={[styles.text, { color: inputColor }]}>{formattedValue ?? placeholder}</Text>
-          <Ionicons name="calendar" size={20} color={iconColor} style={styles.icon} />
-          <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="calendar" size={iconSize} color={iconColor} />
+            <Ionicons name="time" size={iconSize} color={iconColor} />
+            {optional && value ? (
+              <DateInputClearButton
+                size={clearButtonSize}
+                onPress={() => onChange(null)}
+                isActive={!!value}
+              />
+            ) : null}
+          </View>
         </TouchableOpacity>
         <Portal>
           {showDatePicker && (
@@ -132,10 +149,6 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   text: {
-    fontSize: 16,
     flex: 1,
   },
-  icon: {
-    marginRight: 10,
-  },
 })

package/src/components/form/input/hooks/index.ts

@@ -1,2 +1,2 @@
 export * from './useInputImperativeHandle'
-export * from './useInputStyle'
+export * from './useInputStyles'

package/src/components/form/input/hooks/useInputStyles.ts

@@ -0,0 +1,124 @@
+import { InputSize } from '@chem-po/core'
+import { useBackgroundColor, useTextColor } from '@chem-po/react'
+import { useMemo } from 'react'
+import { StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'
+
+export const inputStyles = StyleSheet.create({
+  input: {
+    width: '100%',
+    fontSize: 16,
+    outlineWidth: 0,
+  },
+  inputXSmall: {
+    paddingVertical: 4,
+    paddingHorizontal: 6,
+    borderRadius: 3,
+  },
+  inputSmall: {
+    paddingVertical: 6,
+    paddingHorizontal: 9,
+    borderRadius: 4,
+  },
+  inputMedium: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 6,
+  },
+  inputLarge: {
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    borderRadius: 8,
+  },
+  inputTextSmall: {
+    fontSize: 14,
+  },
+  inputTextMedium: {
+    fontSize: 16,
+  },
+  inputTextLarge: {
+    fontSize: 18,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  buttonContainerSmall: {
+    gap: 6,
+  },
+  buttonContainerMedium: {
+    gap: 8,
+  },
+  buttonContainerLarge: {
+    gap: 10,
+  },
+})
+
+const iconSizeMap = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+}
+
+const clearButtonSizeMap = {
+  sm: 12,
+  md: 14,
+  lg: 16,
+}
+
+const inputSizeMap = {
+  sm: inputStyles.inputSmall,
+  md: inputStyles.inputMedium,
+  lg: inputStyles.inputLarge,
+}
+
+const editableInputSizeMap = {
+  sm: inputStyles.inputXSmall,
+  md: inputStyles.inputSmall,
+  lg: inputStyles.inputMedium,
+}
+
+const inputTextSizeMap = {
+  sm: inputStyles.inputTextSmall,
+  md: inputStyles.inputTextMedium,
+  lg: inputStyles.inputTextLarge,
+}
+
+const buttonContainerSizeMap = {
+  sm: inputStyles.buttonContainerSmall,
+  md: inputStyles.buttonContainerMedium,
+  lg: inputStyles.buttonContainerLarge,
+}
+
+export interface UseInputStyles {
+  text: TextStyle
+  container: ViewStyle
+  size: InputSize
+  iconSize: number
+  clearButtonSize: number
+  buttonContainer: StyleProp<ViewStyle>
+}
+export const useInputStyles = (
+  inEditable: boolean | undefined,
+  size: InputSize | undefined,
+  formSize: InputSize = 'md',
+): UseInputStyles => {
+  const formElementBg = useBackgroundColor(150)
+  const bg = useMemo(
+    () => (inEditable ? 'transparent' : formElementBg),
+    [inEditable, formElementBg],
+  )
+  const textColor = useTextColor()
+  const usedSize = size ?? formSize
+  return {
+    text: { ...inputTextSizeMap[usedSize], color: textColor },
+    container: {
+      ...inputStyles.input,
+      ...(inEditable ? editableInputSizeMap[usedSize] : inputSizeMap[usedSize]),
+      backgroundColor: bg,
+    },
+    size: usedSize,
+    iconSize: iconSizeMap[usedSize],
+    clearButtonSize: clearButtonSizeMap[usedSize],
+    buttonContainer: [inputStyles.buttonContainer, buttonContainerSizeMap[usedSize]],
+  }
+}

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

@@ -1,15 +1,10 @@
-import { FieldType, InputRef } from '@chem-po/core'
-import {
-  Field,
-  TypedField,
-  useBackgroundColor,
-  usePlaceholderColor,
-  useThemeValue,
-} from '@chem-po/react'
+import { FieldType, formatField, InputRef, parseField } from '@chem-po/core'
+import { Field, FormatField, TypedField, usePlaceholderColor, useThemeValue } from '@chem-po/react'
 import React, {
   ForwardedRef,
   forwardRef,
   ForwardRefExoticComponent,
+  useCallback,
   useEffect,
   useMemo,
 } from 'react'
@@ -21,6 +16,7 @@ import { ColorComponent } from './color'
 import { DateInput } from './date'
 import { DateTimeInput } from './datetime'
 import { FileComponent } from './file'
+import { useInputStyles } from './hooks/useInputStyles'
 import { MultipleSelectComponent } from './multipleSelect'
 import { CurrencyAmountComponent, NumberComponent } from './number'
 import { SelectComponent } from './select'
@@ -52,6 +48,7 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
     meta: { error, active, touched },
     input,
     inEditable,
+    formSize,
     style,
   } = props
 
@@ -60,7 +57,6 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
   const placeholderColor = usePlaceholderColor()
   const activeColor = useThemeValue('colors.accent.400')
   const errorColor = useThemeValue('colors.error.400')
-
   const shadowColorAnim = useMemo(() => new Animated.Value(0), [])
 
   const displayedError = useMemo(() => {
@@ -91,7 +87,7 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
     [value, _type],
   )
 
-  const bg = useBackgroundColor(150)
+  // const bg = useBackgroundColor(150)
 
   const animatedStyles = useMemo(() => {
     if (inEditable) return {}
@@ -109,15 +105,43 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
           shadowOpacity: 1,
           shadowRadius: 4,
           elevation: 5,
-          backgroundColor: bg,
+          // backgroundColor: bg,
         } as Animated.WithAnimatedValue<ViewStyle>
       default:
         return {}
     }
-  }, [_type, animatedShadowColor, inEditable, bg])
+  }, [_type, animatedShadowColor, inEditable])
 
   const Component = useMemo(() => Components[_type] as ComponentType<T>, [_type])
 
+  const parse = useCallback(
+    (raw: any) => {
+      const defaultParse = parseField[field._type]
+      if (!defaultParse) return raw
+      return defaultParse(field, raw)
+    },
+    [field],
+  )
+
+  const { text } = useInputStyles(inEditable, field.size, formSize)
+
+  const format = useCallback(
+    (raw: any) => {
+      const defaultFormat = formatField[field._type] as FormatField<T>
+      if (!defaultFormat) return raw
+      return defaultFormat(field, raw)
+    },
+    [field],
+  )
+
+  const formattedValue = useMemo(() => format(value), [value, format])
+  const onChange = useCallback(
+    (v: any) => {
+      input.onChange(parse(v))
+    },
+    [input, parse],
+  )
+
   return (
     <View style={[staticStyles.container, style]}>
       {Label && !inEditable ? (
@@ -138,18 +162,18 @@ const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<Inpu
         </AnimatedText>
       )}
       <Animated.View style={[staticStyles.inputContainer, animatedStyles]}>
-        <Component ref={ref} {...props} />
+        <Component ref={ref} {...props} input={{ ...input, onChange, value: formattedValue }} />
       </Animated.View>
-      {!inEditable && (
-        <AnimatedText
-          style={staticStyles.errorText}
-          show={!!displayedError}
-          color={errorColor}
-          height={18}
-          marginBottom={0}>
-          {displayedError}
-        </AnimatedText>
-      )}
+      {/* {!inEditable && ( */}
+      <AnimatedText
+        style={[staticStyles.errorText, { fontSize: text.fontSize ?? 14 }]}
+        show={!!displayedError}
+        color={errorColor}
+        height={(text.fontSize ?? 14) + 5}
+        marginBottom={inEditable ? 10 : 0}>
+        {displayedError}
+      </AnimatedText>
+      {/* )} */}
       {/* {optional && !inEditable ? <OptionalTag field={field} value={value} /> : null} */}
     </View>
   )
@@ -159,7 +183,6 @@ const staticStyles = StyleSheet.create({
   container: {
     position: 'relative',
     width: '100%',
-    paddingHorizontal: 4,
     // backgroundColor: 'blue',
   },
   label: {
@@ -174,8 +197,14 @@ const staticStyles = StyleSheet.create({
     overflow: 'hidden',
   },
   errorText: {
+    paddingHorizontal: 8,
+    fontWeight: 500,
+    // backgroundColor: 'red',
+  },
+  errorTextEditable: {
     fontSize: 14,
-    paddingHorizontal: 4,
+    paddingHorizontal: 6,
+    paddingBottom: 8,
     fontWeight: 500,
     // backgroundColor: 'red',
   },

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

@@ -1,79 +1,208 @@
-import { InputRef } from '@chem-po/core'
-import { MultipleSelectField, useColorMode, usePlaceholderColor } from '@chem-po/react'
-import React, { forwardRef, useImperativeHandle } from 'react'
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { InputRef, RenderSelectOptionProps } from '@chem-po/core'
+import {
+  MultipleSelectField,
+  useBackgroundColor,
+  useBorderColor,
+  useColorMode,
+  useColorModeValue,
+  useIconColor,
+  usePlaceholderColor,
+  useTextColor,
+} from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import React, {
+  ForwardedRef,
+  forwardRef,
+  PropsWithChildren,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import { IDropdownRef, MultiSelect } from 'react-native-element-dropdown'
+import { Txt } from '../../../text/Txt'
 import { FieldProps } from '../../types'
+import { InputClearButton } from '../common/InputClearButton'
+import { useInputStyles } from '../hooks/useInputStyles'
 
-export const MultipleSelectComponent = forwardRef<InputRef, FieldProps<MultipleSelectField>>(
-  ({ field, input, inEditable }, ref) => {
-    const { options, renderOption: RenderOption, getOptionKey } = field
-    const { onChange, value, onFocus, onBlur } = input
-    const colorMode = useColorMode()
+export const SelectedOptionContainer = ({
+  children,
+  style,
+}: PropsWithChildren<{ key?: string; style?: StyleProp<ViewStyle> }>) => {
+  const borderColor = useBorderColor()
+  return <View style={[styles.selectedOption, { borderColor }, style]}>{children}</View>
+}
 
-    const placeholderColor = usePlaceholderColor()
+const BaseMultipleSelectComponent = <T extends MultipleSelectField>(
+  { field, input, meta, formSize, inEditable }: FieldProps<T>,
+  ref: ForwardedRef<InputRef>,
+) => {
+  const { placeholder, options, renderOption: RenderOption, searchable, searchPlaceholder } = field
+  const { onChange, value, onFocus, onBlur } = input
+  const { active } = meta
 
-    useImperativeHandle(ref, () => ({
-      focus: () => {
-        onFocus()
-      },
-      blur: () => {
-        onBlur()
-      },
-    }))
+  const colorMode = useColorMode()
+  const inputRef = useRef<IDropdownRef>(null)
+  const {
+    container: inputStyles,
+    iconSize,
+    clearButtonSize,
+    text,
+    buttonContainer,
+    size,
+  } = useInputStyles(inEditable, field.size, formSize)
+  const iconColor = useIconColor()
+  const textColor = useTextColor()
+  const placeholderColor = usePlaceholderColor()
+  const menuBg = useBackgroundColor(100)
+  const selectedOptionBg = useColorModeValue('#ffffff77', '#ffffff15')
+  const borderColor = useBorderColor()
 
-    const handleOptionPress = (option: any) => {
-      onChange(
-        value?.includes(option) ? value.filter(v => v !== option) : [...(value ?? []), option],
-      )
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      inputRef.current?.open()
+    },
+    blur: () => {
+      inputRef.current?.close()
+    },
+  }))
+
+  const defaultSelectedOptionStyle = useMemo(() => {
+    return {
+      paddingVertical: inputStyles.paddingVertical,
+      paddingHorizontal: inputStyles.paddingHorizontal,
     }
+  }, [inputStyles])
 
-    const body = (
-      <View style={styles.container}>
-        {options.map(o => (
-          <TouchableOpacity
-            key={getOptionKey ? getOptionKey(o) : o}
-            style={[styles.option, value?.includes(o) && styles.selectedOption]}
-            onPress={() => handleOptionPress(o)}>
-            <RenderOption value={o} colorMode={colorMode} isSelected={!!value?.includes(o)} />
-          </TouchableOpacity>
-        ))}
-      </View>
-    )
+  const RenderOptionText = (
+    props: RenderSelectOptionProps<T['options'][number]['value'], T['options'][number]>,
+  ) => {
+    if (typeof RenderOption === 'function') {
+      return RenderOption(props)
+    }
+    return <Txt style={[styles.defaultOption, text]}>{props.option.label}</Txt>
+  }
 
-    return inEditable ? (
-      <View style={styles.editableContainer}>
-        <Text style={[styles.placeholder, { color: placeholderColor }]}>{field.placeholder}</Text>
-        {body}
-      </View>
-    ) : (
-      body
+  const RenderSelectedOptionText = (
+    props: RenderSelectOptionProps<T['options'][number]['value'], T['options'][number]>,
+  ) => {
+    if (typeof RenderOption === 'function') {
+      return RenderOption(props)
+    }
+    return (
+      <>
+        <Txt style={[defaultSelectedOptionStyle, text]}>{props.option.label}</Txt>
+      </>
     )
-  },
-)
+  }
+
+  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]}
+        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={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>
+        )}
+        renderSelectedItem={item => (
+          <SelectedOptionContainer>
+            <RenderSelectedOptionText
+              value={item.value}
+              option={item}
+              colorMode={colorMode}
+              isSelected
+              size={size}
+            />
+            <View
+              style={[
+                styles.optionClearContainer,
+                { borderColor, backgroundColor: selectedOptionBg },
+              ]}>
+              <InputClearButton
+                size={clearButtonSize}
+                onPress={() => {
+                  onChange(value?.filter(v => v !== item.value))
+                }}
+                isActive
+              />
+            </View>
+          </SelectedOptionContainer>
+        )}
+        renderRightIcon={() => (
+          <View style={buttonContainer}>
+            <Ionicons
+              name={active ? 'chevron-up' : 'chevron-down'}
+              size={iconSize}
+              color={iconColor}
+            />
+          </View>
+        )}
+      />
+    </View>
+  )
+}
+
+export const MultipleSelectComponent = forwardRef(BaseMultipleSelectComponent)
 
 const styles = StyleSheet.create({
-  container: {
+  wrapper: {
     width: '100%',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 4,
   },
-  editableContainer: {
-    width: '100%',
-    paddingVertical: 2,
+  defaultOption: {
+    padding: 10,
   },
-  placeholder: {
-    fontSize: 14,
-    fontWeight: '600',
-    opacity: 0.8,
-    paddingHorizontal: 8,
-    marginBottom: 4,
+  iconStyle: {
+    width: 20,
+    height: 20,
   },
-  option: {
-    padding: 4,
-    opacity: 0.7,
+  inputSearch: {
+    outlineWidth: 0,
+    paddingVertical: 4,
+    minHeight: 0,
+    height: 'auto',
+    fontSize: 16,
   },
   selectedOption: {
-    opacity: 1,
+    flexDirection: 'row',
+    borderRadius: 4,
+    borderWidth: 1,
+    alignItems: 'center',
+    marginTop: 4,
+    marginHorizontal: 4,
+  },
+  optionClearContainer: {
+    paddingHorizontal: 8,
+    borderLeftWidth: 1,
+    borderTopRightRadius: 8,
+    borderBottomRightRadius: 8,
+    height: '100%',
+    justifyContent: 'center',
   },
 })