@chem-po/react-native 0.0.15 → 0.0.16

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,46 @@ 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],
+  )
+  const errorHeight = useMemo(() => {
+    return (text.fontSize ?? 16) - 2
+  }, [text])
+
   return (
     <View style={[staticStyles.container, style]}>
       {Label && !inEditable ? (
@@ -138,18 +165,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: errorHeight }]}
+        show={!!displayedError}
+        color={errorColor}
+        height={errorHeight}
+        marginBottom={inEditable ? 10 : 0}>
+        {displayedError}
+      </AnimatedText>
+      {/* )} */}
       {/* {optional && !inEditable ? <OptionalTag field={field} value={value} /> : null} */}
     </View>
   )
@@ -159,7 +186,6 @@ const staticStyles = StyleSheet.create({
   container: {
     position: 'relative',
     width: '100%',
-    paddingHorizontal: 4,
     // backgroundColor: 'blue',
   },
   label: {
@@ -174,8 +200,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',
   },
 })

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

@@ -5,12 +5,13 @@ import { StyleSheet, Text, TextInput, View } from 'react-native'
 import { FieldProps } from '../../types'
 import { InputSlider } from '../InputSlider'
 import { useInputImperativeHandle } from '../hooks/useInputImperativeHandle'
-import { inputStyles } from '../styles'
+import { useInputStyles } from '../hooks/useInputStyles'
 
 export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & { prefix?: string }>(
-  ({ input: { onChange, value, ...input }, field, prefix, inEditable: _, style }, ref) => {
-    const { type, defaultValue, placeholder } = field
+  ({ input: { onChange, value, ...input }, field, prefix, inEditable, style, formSize }, ref) => {
+    const { type, defaultValue, placeholder, size } = field
     const color = useTextColor()
+    const { container: inputStyles } = useInputStyles(inEditable, size, formSize)
     const inputRef = useInputImperativeHandle(ref)
     const [endsWith, setEndsWith] = useState('')
     const displayed = typeof value === 'number' && !Number.isNaN(value) ? `${value}${endsWith}` : ''
@@ -33,7 +34,7 @@ export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & {
         {prefix && <Text style={styles.prefix}>{prefix}</Text>}
         <TextInput
           ref={inputRef}
-          style={[inputStyles.input, { color }, style]}
+          style={[inputStyles, { color }, style]}
           placeholder={field.placeholder}
           placeholderTextColor={placeholderColor}
           keyboardType="numeric"