@chem-po/react-native 0.0.5 → 0.0.7

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

@@ -0,0 +1,143 @@
+import { getDateTimeString, InputRef } from '@chem-po/core'
+import { DateTimeField, useIconColor } from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { Portal } from 'react-native-paper'
+import { DatePickerModal, TimePickerModal } from 'react-native-paper-dates'
+import { FieldProps } from '../../types'
+import { DateInputClearButton } from '../common/InputClearButton'
+import { useInputColor } from '../hooks/useInputColor'
+
+export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
+  ({ input: { value, onBlur, onChange, onFocus }, field, meta: { active } }, 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 selectedDate = useMemo(() => (value ? new Date(value) : new Date()), [value])
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        onFocus()
+      },
+      blur: () => {
+        onBlur()
+      },
+    }))
+
+    const handleDateChange = useCallback(
+      (date: string | null) => {
+        if (date) {
+          const newDate = new Date(date)
+          onChange(newDate.toISOString())
+          setShowTimePicker(true)
+        } else {
+          onBlur()
+        }
+        setShowDatePicker(false)
+      },
+      [onChange, onBlur],
+    )
+
+    const handleTimeChange = useCallback(
+      ({ hours, minutes }: { hours: number; minutes: number }) => {
+        const newDate = selectedDate ? new Date(selectedDate) : new Date()
+        newDate.setHours(hours)
+        newDate.setMinutes(minutes)
+        onChange(newDate.toISOString())
+        setShowTimePicker(false)
+        onBlur()
+      },
+      [onChange, onBlur, selectedDate],
+    )
+
+    const handleDismiss = useCallback(() => {
+      setShowDatePicker(true)
+      setShowTimePicker(false)
+      onBlur()
+    }, [onBlur])
+
+    const date = useMemo(() => (value ? new Date(value) : undefined), [value])
+
+    const formattedValue = useMemo(() => {
+      if (!value) return null
+      return getDateTimeString(value)
+    }, [value])
+
+    const hourMinute = useMemo(() => {
+      if (!date) return { hours: 0, minutes: 0 }
+      return { hours: date.getHours(), minutes: date.getMinutes() }
+    }, [date])
+
+    const iconColor = useIconColor()
+    const inputColor = useInputColor(value)
+
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity
+          style={styles.button}
+          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}
+        </TouchableOpacity>
+        <Portal>
+          {showDatePicker && (
+            <DatePickerModal
+              locale="en"
+              label="Date"
+              date={date}
+              mode="single"
+              onConfirm={d => {
+                handleDateChange(d?.date?.toISOString()?.split('T')[0] ?? null)
+              }}
+              onDismiss={handleDismiss}
+              visible={active && showDatePicker}
+            />
+          )}
+          {showTimePicker && (
+            <TimePickerModal
+              visible={active && showTimePicker}
+              onDismiss={handleDismiss}
+              locale="en-US"
+              onConfirm={handleTimeChange}
+              hours={hourMinute.hours}
+              minutes={hourMinute.minutes}
+            />
+          )}
+        </Portal>
+      </View>
+    )
+  },
+)
+
+DateTimeInput.displayName = 'DateTimeInput'
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    height: 40,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  text: {
+    fontSize: 16,
+    flex: 1,
+  },
+  icon: {
+    marginRight: 10,
+  },
+})

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

@@ -0,0 +1,226 @@
+import { FileValue, InputRef } from '@chem-po/core'
+import {
+  FileField,
+  useBorderColor,
+  useIconColor,
+  usePlaceholderColor,
+  useTextColor,
+} from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import * as DocumentPicker from 'expo-document-picker'
+import * as ImagePicker from 'expo-image-picker'
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { LoadingImage } from '../../../loading/LoadingImage'
+import { FieldProps } from '../../types'
+
+const generateAccept = (field: FileField) => {
+  if (!field.accept) return undefined
+  const accept: string[] = []
+  if (field.accept.includes('image')) {
+    accept.push('image/jpg', 'image/jpeg', 'image/png', 'image/svg', 'image/gif')
+  }
+  if (field.accept.includes('pdf')) accept.push('application/pdf')
+  if (field.accept.includes('audio')) {
+    accept.push('audio/mp3', 'audio/wav', 'audio/x-wav', 'audio/webm', 'audio/ogg')
+  }
+  return accept.join(',')
+}
+
+const NoFileView = ({ hasUpload }: { hasUpload?: boolean }) => {
+  const textColor = useTextColor()
+  const iconColor = useIconColor()
+  const borderColor = useBorderColor()
+  return (
+    <View style={[styles.noFileContainer, { borderColor }]}>
+      <Text style={[styles.noFileText, { color: textColor }]}>
+        {hasUpload ? 'Tap to upload file' : 'No file uploaded'}
+      </Text>
+      <Ionicons name="cloud-upload" size={24} color={iconColor} />
+    </View>
+  )
+}
+
+export const FileView = ({
+  value,
+  hasUpload,
+  imageOptions,
+}: {
+  value?: FileValue | null
+  hasUpload?: boolean
+  imageOptions?: any
+}) => {
+  const { storagePath, dataUrl } = value ?? {}
+  const missingFile = !dataUrl && !storagePath
+
+  const iconColor = useIconColor()
+  const fileNameColor = useTextColor()
+  const borderColor = useBorderColor()
+  if (!value || missingFile) {
+    return <NoFileView hasUpload={hasUpload} />
+  }
+
+  if (value.type?.startsWith('image/')) {
+    return (
+      <LoadingImage
+        src={dataUrl}
+        width={imageOptions?.width ?? 120}
+        height={imageOptions?.height ?? 120}
+        style={styles.image}
+      />
+    )
+  }
+
+  return (
+    <View style={[styles.fileContainer, { borderColor }]}>
+      <Ionicons name="document" size={24} color={iconColor} />
+      <Text style={[styles.filename, { color: fileNameColor }]}>{value.filename}</Text>
+    </View>
+  )
+}
+
+export const FileComponent = forwardRef<InputRef, FieldProps<FileField>>(
+  ({ input: { value, onChange }, field }, ref) => {
+    const [loading, setLoading] = useState(false)
+    const { imageOptions } = field || {}
+
+    const handlePickFile = useCallback(async () => {
+      try {
+        setLoading(true)
+        let result: ImagePicker.ImagePickerResult | DocumentPicker.DocumentPickerResult
+
+        if (field.accept?.includes('image')) {
+          result = await ImagePicker.launchImageLibraryAsync({
+            mediaTypes: ['images'],
+            allowsEditing: true,
+            quality: 1,
+            base64: true,
+          })
+
+          if (!result.canceled && result.assets[0]) {
+            const asset = result.assets[0]
+            const fileExtension = asset.uri.split('.').pop() ?? 'jpeg'
+            const fileName = asset.uri.split('/').pop() ?? 'image'
+
+            onChange({
+              ...value,
+              dataUrl: asset.uri,
+              type: `image/${fileExtension}`,
+              filename: fileName,
+            })
+          }
+        } else {
+          result = await DocumentPicker.getDocumentAsync({
+            type: generateAccept(field),
+          })
+
+          if (!result.canceled) {
+            onChange({
+              ...value,
+              dataUrl: result.assets[0].uri,
+              type: result.assets[0].mimeType,
+              filename: result.assets[0].name,
+            })
+          }
+        }
+      } catch (error: unknown) {
+        if (error instanceof Error) {
+          console.error('Error picking file:', error.message)
+        }
+      } finally {
+        setLoading(false)
+      }
+    }, [field, onChange, value])
+
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        void handlePickFile()
+      },
+      blur: () => {},
+    }))
+
+    const isImageField = useMemo(
+      () => field.accept && field.accept.length === 1 && field.accept[0] === 'image',
+      [field],
+    )
+
+    const imgOptions = useMemo(
+      () =>
+        isImageField || value?.type?.startsWith('image/')
+          ? {
+              height: 120,
+              ...imageOptions,
+            }
+          : undefined,
+      [imageOptions, isImageField, value],
+    )
+
+    const placeholderColor = usePlaceholderColor()
+    const borderColor = useBorderColor()
+
+    return (
+      <View style={[styles.container, { borderColor }]}>
+        <Text style={[styles.placeholder, { color: placeholderColor }]}>{field.placeholder}</Text>
+        <TouchableOpacity
+          style={styles.contentContainer}
+          onPress={() => void handlePickFile()}
+          disabled={loading}>
+          <FileView hasUpload imageOptions={imgOptions} value={value} />
+        </TouchableOpacity>
+      </View>
+    )
+  },
+)
+
+FileComponent.displayName = 'FileComponent'
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  placeholder: {
+    fontSize: 14,
+    opacity: 0.8,
+    marginBottom: 4,
+  },
+  contentContainer: {
+    width: '100%',
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 8,
+    overflow: 'hidden',
+  },
+  noFileContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+    borderWidth: 1,
+    borderRadius: 4,
+    borderStyle: 'dashed',
+  },
+  noFileText: {
+    fontSize: 14,
+    textAlign: 'center',
+    opacity: 0.8,
+    marginRight: 10,
+  },
+  fileContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+    borderWidth: 1,
+    borderRadius: 4,
+  },
+  filename: {
+    fontSize: 14,
+    marginLeft: 8,
+  },
+  image: {
+    borderRadius: 4,
+    overflow: 'hidden',
+  },
+})

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

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

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

@@ -0,0 +1,7 @@
+import { usePlaceholderColor, useTextColor } from '@chem-po/react'
+
+export const useInputColor = (value?: any) => {
+  const textColor = useTextColor()
+  const placeholderColor = usePlaceholderColor()
+  return value !== undefined && value !== null && value !== '' ? textColor : placeholderColor
+}

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

@@ -0,0 +1,22 @@
+import { InputRef } from '@chem-po/core'
+import { ForwardedRef, useImperativeHandle, useRef } from 'react'
+import { TextInput } from 'react-native'
+
+export const useInputImperativeHandle = (ref: ForwardedRef<InputRef>) => {
+  const inputRef = useRef<TextInput>(null)
+
+  useImperativeHandle<InputRef, InputRef>(
+    ref,
+    () => ({
+      focus: () => {
+        inputRef.current?.focus()
+      },
+      blur: () => {
+        inputRef.current?.blur()
+      },
+    }),
+    [],
+  )
+
+  return inputRef
+}

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

@@ -0,0 +1,40 @@
+import { InputSize } from '@chem-po/react'
+import { useMemo } from 'react'
+import { StyleSheet } from 'react-native'
+
+const inputPaddingY: Record<InputSize, number> = {
+  xs: 4, // 0.25rem * 16
+  sm: 6, // 0.35rem * 16
+  md: 8, // 0.5rem * 16
+  lg: 8, // 0.5rem * 16
+  xl: 8, // 0.5rem * 16
+}
+
+const inputPaddingX: Record<InputSize, number> = {
+  xs: 8, // 0.5rem * 16
+  sm: 12, // 0.75rem * 16
+  md: 12, // 0.75rem * 16
+  lg: 12, // 0.75rem * 16
+  xl: 12, // 0.75rem * 16
+}
+
+const fontSize: Record<InputSize, number> = {
+  xs: 12, // 0.75rem * 16
+  sm: 14, // 0.875rem * 16
+  md: 16, // 1rem * 16
+  lg: 18, // 1.125rem * 16
+  xl: 20, // 1.25rem * 16
+}
+
+export const useInputStyle = (size?: InputSize) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        style: {
+          paddingVertical: inputPaddingY[size ?? 'md'],
+          paddingHorizontal: inputPaddingX[size ?? 'md'],
+          fontSize: fontSize[size ?? 'md'],
+        },
+      }),
+    [size],
+  )

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

@@ -0,0 +1,2 @@
+export * from './Editable'
+export * from './StandaloneInput'

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

@@ -0,0 +1,174 @@
+import { FieldType, InputRef } from '@chem-po/core'
+import {
+  Field,
+  TypedField,
+  useBackgroundColor,
+  usePlaceholderColor,
+  useThemeValue,
+} from '@chem-po/react'
+import { ForwardedRef, forwardRef, ForwardRefExoticComponent, useEffect, useMemo } from 'react'
+import { Animated, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { AnimatedText } from '../../text/AnimatedText'
+import { FieldProps } from '../types'
+import { BooleanComponent } from './boolean'
+import { ColorComponent } from './color'
+import { DateInput } from './date'
+import { DateTimeInput } from './datetime'
+import { FileComponent } from './file'
+import { MultipleSelectComponent } from './multipleSelect'
+import { CurrencyAmountComponent, NumberComponent } from './number'
+import { SelectComponent } from './select'
+import { SocialMediaComponent } from './socialMedia'
+import { TextComponent } from './text'
+import { TimeInput } from './time'
+
+type ComponentType<T extends Field> = ForwardRefExoticComponent<
+  FieldProps<T> & React.RefAttributes<InputRef>
+>
+
+const Components: { [Key in FieldType]: ComponentType<TypedField<Key>> } = {
+  text: TextComponent,
+  file: FileComponent,
+  boolean: BooleanComponent,
+  select: SelectComponent,
+  multipleSelect: MultipleSelectComponent,
+  currency: CurrencyAmountComponent,
+  number: NumberComponent,
+  date: DateInput,
+  datetime: DateTimeInput,
+  time: TimeInput,
+  socialMedia: SocialMediaComponent,
+  color: ColorComponent,
+}
+const InputBase = <T extends Field>(props: FieldProps<T>, ref: ForwardedRef<InputRef>) => {
+  const {
+    field,
+    meta: { error, active, touched },
+    input,
+    inEditable,
+  } = props
+
+  const { value } = input
+
+  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(() => {
+    if (error && touched) return error
+    return null
+  }, [error, touched])
+  const shadowColor = useMemo(() => {
+    if (displayedError) return errorColor
+    return activeColor
+  }, [displayedError, activeColor, errorColor])
+
+  useEffect(() => {
+    Animated.timing(shadowColorAnim, {
+      toValue: active || displayedError ? 1 : 0,
+      duration: 300,
+      useNativeDriver: false,
+    }).start()
+  }, [active, displayedError, shadowColorAnim])
+
+  const animatedShadowColor = shadowColorAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [placeholderColor, shadowColor],
+  })
+
+  const { _type, label } = field
+  const showPlaceholder = useMemo(
+    () => _type === 'multipleSelect' || (!!value && _type !== 'file' && _type !== 'boolean'),
+    [value, _type],
+  )
+
+  const bg = useBackgroundColor(150)
+
+  const animatedStyles = useMemo(() => {
+    if (inEditable) return {}
+    switch (_type) {
+      case 'text':
+      case 'number':
+      case 'currency':
+      case 'select':
+      case 'datetime':
+      case 'date':
+      case 'time':
+        return {
+          shadowColor: animatedShadowColor,
+          shadowOffset: { width: 0, height: 0 },
+          shadowOpacity: 1,
+          shadowRadius: 4,
+          elevation: 5,
+          backgroundColor: bg,
+        } as Animated.WithAnimatedValue<ViewStyle>
+      default:
+        return {}
+    }
+  }, [_type, animatedShadowColor, inEditable, bg])
+
+  const Component = useMemo(() => Components[_type] as ComponentType<T>, [_type])
+
+  return (
+    <View style={[staticStyles.container]}>
+      {label && !inEditable ? <Text style={staticStyles.label}>{label}</Text> : null}
+      <AnimatedText
+        style={staticStyles.placeholder}
+        show={showPlaceholder}
+        color={placeholderColor}
+        height={16}
+        marginBottom={6}>
+        {field.placeholder ?? ''}
+      </AnimatedText>
+      <Animated.View style={[staticStyles.inputContainer, animatedStyles]}>
+        <Component ref={ref} {...props} />
+      </Animated.View>
+      {!inEditable && (
+        <AnimatedText
+          style={staticStyles.errorText}
+          show={!!displayedError}
+          color={errorColor}
+          height={18}
+          marginBottom={0}>
+          {displayedError}
+        </AnimatedText>
+      )}
+      {/* {optional && !inEditable ? <OptionalTag field={field} value={value} /> : null} */}
+    </View>
+  )
+}
+
+const staticStyles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    width: '100%',
+    paddingHorizontal: 4,
+    // backgroundColor: 'blue',
+  },
+  label: {
+    color: '#1A202C',
+    fontSize: 14,
+    paddingHorizontal: 8,
+  },
+  inputContainer: {
+    width: '100%',
+    borderRadius: 4,
+    paddingVertical: 1,
+    overflow: 'hidden',
+  },
+  errorText: {
+    fontSize: 14,
+    paddingHorizontal: 4,
+    fontWeight: 500,
+    // backgroundColor: 'red',
+  },
+  placeholder: {
+    fontSize: 14,
+    paddingHorizontal: 4,
+    overflow: 'hidden',
+  },
+})
+
+export const Input = forwardRef<InputRef, FieldProps<Field>>(InputBase)

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

@@ -0,0 +1,79 @@
+import { InputRef } from '@chem-po/core'
+import { MultipleSelectField, useColorMode, usePlaceholderColor } from '@chem-po/react'
+import { forwardRef, useImperativeHandle } from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { FieldProps } from '../../types'
+
+export const MultipleSelectComponent = forwardRef<InputRef, FieldProps<MultipleSelectField>>(
+  ({ field, input, inEditable }, ref) => {
+    const { options, renderOption, getOptionKey } = field
+    const { onChange, value, onFocus, onBlur } = input
+    const colorMode = useColorMode()
+
+    const placeholderColor = usePlaceholderColor()
+
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        onFocus()
+      },
+      blur: () => {
+        onBlur()
+      },
+    }))
+
+    const handleOptionPress = (option: any) => {
+      onChange(
+        value?.includes(option) ? value.filter(v => v !== option) : [...(value ?? []), option],
+      )
+    }
+
+    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(o, colorMode, !!value?.includes(o))}
+          </TouchableOpacity>
+        ))}
+      </View>
+    )
+
+    return inEditable ? (
+      <View style={styles.editableContainer}>
+        <Text style={[styles.placeholder, { color: placeholderColor }]}>{field.placeholder}</Text>
+        {body}
+      </View>
+    ) : (
+      body
+    )
+  },
+)
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 4,
+  },
+  editableContainer: {
+    width: '100%',
+    paddingVertical: 2,
+  },
+  placeholder: {
+    fontSize: 14,
+    fontWeight: '600',
+    opacity: 0.8,
+    paddingHorizontal: 8,
+    marginBottom: 4,
+  },
+  option: {
+    padding: 4,
+    opacity: 0.7,
+  },
+  selectedOption: {
+    opacity: 1,
+  },
+})