@chem-po/react-native 0.0.52 → 0.0.53

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

@@ -1,125 +0,0 @@
-import { getDateString, InputRef } from '@chem-po/core'
-import { DateField, useIconColor } from '@chem-po/react'
-import { Ionicons } from '@expo/vector-icons'
-import React, { forwardRef, useImperativeHandle, useMemo } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { Gesture, GestureDetector } from 'react-native-gesture-handler'
-import { Portal } from 'react-native-paper'
-import { DatePickerModal } from 'react-native-paper-dates'
-import { scheduleOnRN } from 'react-native-worklets'
-import { FieldProps } from '../../types'
-import { DateInputClearButton } from '../common/InputClearButton'
-import { useInputColor } from '../hooks/useInputColor'
-import { useInputStyles } from '../hooks/useInputStyles'
-
-// const parseDate = (date?: Date) =>
-//   date
-//     ? `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(
-//         date.getDate(),
-//       ).padStart(2, '0')}`
-//     : undefined
-
-export const DateInput = forwardRef<InputRef, FieldProps<DateField>>(
-  (
-    {
-      input: { onChange, value, onFocus, onBlur },
-      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: () => {
-        onFocus()
-      },
-      blur: () => {
-        onBlur()
-      },
-    }))
-
-    const iconColor = useIconColor()
-    const inputColor = useInputColor(value)
-
-    const minDateObj = minDate === 'now' ? new Date() : minDate ? new Date(minDate) : undefined
-    const maxDateObj = maxDate === 'now' ? new Date() : maxDate ? new Date(maxDate) : undefined
-
-    const mainTap = Gesture.Tap().onStart(() => {
-      scheduleOnRN(onFocus)
-    })
-
-    return (
-      <View style={styles.container}>
-        <View style={[styles.button, inputStyles]}>
-          <GestureDetector gesture={mainTap}>
-            <View style={styles.textContainer}>
-              <Text numberOfLines={1} style={[styles.text, text, { color: inputColor }]}>
-                {value ? getDateString(value, 'short') : placeholder}
-              </Text>
-              <Ionicons name="calendar" size={iconSize} color={iconColor} />
-            </View>
-          </GestureDetector>
-          <View style={buttonContainer}>
-            {optional && value ? (
-              <DateInputClearButton
-                size={clearButtonSize}
-                onPress={() => onChange(null)}
-                isActive={!!value}
-              />
-            ) : null}
-          </View>
-        </View>
-        <Portal>
-          <DatePickerModal
-            locale="en"
-            label="Date"
-            date={date}
-            startYear={minDateObj?.getFullYear()}
-            endYear={maxDateObj?.getFullYear()}
-            mode="single"
-            onConfirm={d => {
-              onChange(d?.date?.toISOString()?.split('T')[0] ?? null)
-              onBlur()
-            }}
-            onDismiss={onBlur}
-            visible={active}
-          />
-        </Portal>
-      </View>
-    )
-  },
-)
-
-DateInput.displayName = 'DateInput'
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-  },
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: 8,
-    width: '100%',
-  },
-  textContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  text: {
-    flex: 1,
-  },
-})

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

@@ -1,176 +0,0 @@
-import { getDateTimeString, InputRef } from '@chem-po/core'
-import { DateTimeField, useIconColor } from '@chem-po/react'
-import { Ionicons } from '@expo/vector-icons'
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { Gesture, GestureDetector, Pressable } from 'react-native-gesture-handler'
-import { Portal } from 'react-native-paper'
-import { DatePickerModal, TimePickerModal } from 'react-native-paper-dates'
-import { scheduleOnRN } from 'react-native-worklets'
-import { FieldProps } from '../../types'
-import { DateInputClearButton } from '../common/InputClearButton'
-import { useInputColor } from '../hooks/useInputColor'
-import { useInputStyles } from '../hooks/useInputStyles'
-
-export const DateTimeInput = forwardRef<InputRef, FieldProps<DateTimeField>>(
-  (
-    { 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 {
-      container: inputStyles,
-      iconSize,
-      text,
-      clearButtonSize,
-      buttonContainer,
-    } = useInputStyles(inEditable, field.size, formSize)
-
-    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(false)
-      setShowTimePicker(false)
-      onBlur()
-    }, [onBlur])
-
-    const handleFocusTime = useCallback(() => {
-      setShowTimePicker(true)
-      onFocus()
-    }, [onFocus])
-
-    const handleFocusDate = useCallback(() => {
-      setShowDatePicker(true)
-      onFocus()
-    }, [onFocus])
-
-    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)
-
-    const mainTap = Gesture.Tap().onStart(() => {
-      scheduleOnRN(handleFocusDate)
-    })
-
-    return (
-      <View style={styles.container}>
-        <View style={[styles.button, inputStyles]}>
-          <GestureDetector gesture={mainTap}>
-            <View style={styles.textContainer}>
-              <Text numberOfLines={1} style={[styles.text, text, { color: inputColor }]}>
-                {formattedValue ?? placeholder}
-              </Text>
-            </View>
-          </GestureDetector>
-          <View style={buttonContainer}>
-            <Pressable onPress={handleFocusDate}>
-              <Ionicons name="calendar" size={iconSize} color={iconColor} />
-            </Pressable>
-            <Pressable onPress={handleFocusTime}>
-              <Ionicons name="time" size={iconSize} color={iconColor} />
-            </Pressable>
-            {optional && value ? (
-              <DateInputClearButton
-                size={clearButtonSize}
-                onPress={() => onChange(null)}
-                isActive={!!value}
-              />
-            ) : null}
-          </View>
-        </View>
-        <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%',
-  },
-  textContainer: {
-    flex: 1,
-  },
-  text: {
-    width: '100%',
-  },
-})

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

@@ -1,310 +0,0 @@
-import { FileValue, ImageViewOptions, InputRef, LocalFileValue } from '@chem-po/core'
-import {
-  FileField,
-  useBackgroundColor,
-  useBorderColor,
-  useIconColor,
-  useObjectUrl,
-  usePlaceholderColor,
-  useTextColor,
-  useToast,
-} 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 React, { forwardRef, useCallback, useImperativeHandle, useMemo } from 'react'
-import { Platform, StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'
-import { Pressable } from 'react-native-gesture-handler'
-import { useFontScale } from '../../../../store/useFontScale'
-import { downloadFile } from '../../../../utils/downloadFile'
-import { LoadingImage } from '../../../loading/LoadingImage'
-import { FieldProps } from '../../types'
-
-const fallbackAccept =
-  'image/jpg,image/jpeg,image/png,image/svg,image/gif,application/pdf,audio/mp3,audio/wav,audio/x-wav,audio/webm,audio/ogg'
-const generateAccept = (field: FileField) => {
-  if (!field.accept) return fallbackAccept
-  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, onPress }: { hasUpload?: boolean; onPress?: () => void }) => {
-  const textColor = useTextColor()
-  const iconColor = useIconColor()
-  const borderColor = useBorderColor()
-  const fontScale = useFontScale(s => s.fontScale)
-  return (
-    <Pressable style={[styles.noFileContainer, { borderColor }]} onPress={onPress}>
-      <Text style={[styles.noFileText, { color: textColor }]}>
-        {hasUpload ? 'Tap to upload file' : 'No file uploaded'}
-      </Text>
-      <Ionicons name="cloud-upload" size={24 * fontScale} color={iconColor} />
-    </Pressable>
-  )
-}
-
-export const FileView = ({
-  value,
-  hasUpload,
-  imageOptions,
-  withFullView,
-  nonImageContainerStyle,
-  withDownload,
-  onUploadPress,
-  textStyle,
-}: {
-  value?: FileValue | null
-  hasUpload?: boolean
-  imageOptions?: ImageViewOptions
-  withFullView?: boolean
-  nonImageContainerStyle?: StyleProp<ViewStyle>
-  withDownload?: boolean
-  onUploadPress?: () => void
-  textStyle?: StyleProp<TextStyle>
-}) => {
-  const { storagePath, dataUrl } = value ?? {}
-  const missingFile = !dataUrl && !storagePath
-
-  const { url, loading } = useObjectUrl(value)
-  const { showError, showSuccess } = useToast()
-
-  const iconColor = useIconColor()
-  const fileNameColor = useTextColor()
-  const borderColor = useBorderColor()
-  const backgroundColor = useBackgroundColor(100)
-
-  const handleDownload = useCallback(async () => {
-    if (!url) {
-      showError('File URL is not available')
-      return
-    }
-
-    const filename = value?.filename?.split('/').pop()?.replace(/\s+/g, '_')
-    if (!filename) {
-      showError('Filename is not available')
-      return
-    }
-
-    const fileType = value?.type
-    if (!fileType) {
-      showError('File type is not available')
-      return
-    }
-
-    try {
-      await downloadFile(url, filename, fileType)
-      if (Platform.OS === 'android') {
-        showSuccess('File downloaded successfully')
-        return
-      }
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        console.error('Error downloading file:', error.message)
-      } else {
-        console.error('Error downloading file:', String(error))
-      }
-      showError('Failed to download file')
-    }
-  }, [url, value, showError, showSuccess])
-  if (!value || missingFile) {
-    return <NoFileView onPress={onUploadPress} hasUpload={hasUpload} />
-  }
-
-  const body = value.type?.startsWith('image/') ? (
-    <LoadingImage
-      withDownload={withDownload}
-      filename={value.filename}
-      src={url}
-      fileType={value.type}
-      loadingOverride={loading}
-      width={imageOptions?.width ?? 120}
-      height={imageOptions?.height ?? 120}
-      withFullView={withFullView}
-      style={styles.image}
-    />
-  ) : (
-    <View style={[styles.fileContainer, { borderColor, backgroundColor }, nonImageContainerStyle]}>
-      <View style={styles.iconContainer}>
-        <Ionicons name="document" size={24} color={iconColor} />
-      </View>
-      <View style={styles.filenameContainer}>
-        <Text numberOfLines={1} style={[styles.filename, { color: fileNameColor }, textStyle]}>
-          {value.filename}
-        </Text>
-      </View>
-      {withDownload && (
-        <Pressable
-          style={styles.downloadButton}
-          onPress={() => void handleDownload()}
-          disabled={loading}>
-          <Ionicons name="download" size={20} color={iconColor} />
-        </Pressable>
-      )}
-    </View>
-  )
-
-  return onUploadPress ? <Pressable onPress={onUploadPress}>{body}</Pressable> : body
-}
-
-export const FileComponent = forwardRef<InputRef, FieldProps<FileField>>(
-  ({ input: { value, onChange }, field }, ref) => {
-    const { imageOptions } = field || {}
-
-    const handlePickFile = useCallback(async () => {
-      try {
-        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({
-              dataUrl: asset.uri,
-              type: asset.mimeType ?? `image/${fileExtension}`,
-              filename: fileName,
-            } as LocalFileValue)
-          }
-        } 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)
-        }
-      }
-    }, [field, onChange, value])
-
-    useImperativeHandle(ref, () => ({
-      focus: () => {
-        void handlePickFile()
-      },
-      blur: () => {},
-    }))
-
-    const isImageField = useMemo(
-      () => 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>
-        <View style={styles.contentContainer}>
-          <FileView
-            hasUpload
-            onUploadPress={() => void handlePickFile()}
-            imageOptions={imgOptions}
-            value={value}
-          />
-        </View>
-      </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',
-    borderWidth: 1,
-    borderRadius: 4,
-    maxWidth: '100%',
-    overflow: 'hidden',
-  },
-  filenameContainer: {
-    flex: 1,
-    paddingRight: 4,
-    justifyContent: 'center',
-  },
-  filename: {
-    fontSize: 14,
-  },
-  iconContainer: {
-    padding: 4,
-  },
-  downloadButton: {
-    padding: 8,
-    marginLeft: 4,
-  },
-  image: {
-    borderRadius: 4,
-    overflow: 'hidden',
-  },
-})

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

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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
-}