@chem-po/react-native 0.0.52 → 0.0.53

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

@@ -1,125 +0,0 @@
-import { InputRef, padZeros } from '@chem-po/core'
-import { TimeField, useIconColor } from '@chem-po/react'
-import { Ionicons } from '@expo/vector-icons'
-import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { Pressable } from 'react-native-gesture-handler'
-import { Portal } from 'react-native-paper'
-import { TimePickerModal } from 'react-native-paper-dates'
-import { FieldProps } from '../../types'
-import { DateInputClearButton } from '../common/InputClearButton'
-import { useInputColor } from '../hooks/useInputColor'
-import { useInputStyles } from '../hooks/useInputStyles'
-
-export const TimeInput = forwardRef<InputRef, FieldProps<TimeField>>(
-  (
-    {
-      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)
-        onFocus()
-      },
-      blur: () => {
-        setVisible(false)
-        onBlur()
-      },
-    }))
-
-    const handleTimeChange = ({ hours, minutes }: { hours: number; minutes: number }) => {
-      setVisible(false)
-      const timeString = `${padZeros(hours)}:${padZeros(minutes)}`
-      onChange(timeString)
-      onBlur()
-    }
-
-    const handleDismiss = () => {
-      setVisible(false)
-      onBlur()
-    }
-
-    const formattedValue = useMemo(() => {
-      if (!value) return null
-      const [hours, minutes] = value.split(':').map(Number)
-      const amPm = hours >= 12 ? 'PM' : 'AM'
-      const formattedHours = hours % 12 === 0 ? 12 : hours % 12
-      return `${formattedHours}:${padZeros(minutes)} ${amPm}`
-    }, [value])
-
-    const { hours, minutes } = useMemo(() => {
-      if (!value) return { hours: 0, minutes: 0 }
-      const [h, m] = value.split(':').map(Number)
-      return { hours: h, minutes: m }
-    }, [value])
-
-    const iconColor = useIconColor()
-    const inputColor = useInputColor(value)
-
-    return (
-      <View style={styles.container}>
-        <Pressable
-          style={[styles.button, inputStyles]}
-          onPress={() => {
-            setVisible(true)
-            onFocus()
-          }}>
-          <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>
-        </Pressable>
-        <Portal>
-          <TimePickerModal
-            visible={visible}
-            onDismiss={handleDismiss}
-            onConfirm={handleTimeChange}
-            hours={hours}
-            minutes={minutes}
-          />
-        </Portal>
-      </View>
-    )
-  },
-)
-
-TimeInput.displayName = 'TimeInput'
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-  },
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
-  },
-  text: {
-    fontSize: 16,
-    flex: 1,
-  },
-})

package/src/components/form/types.ts

@@ -1,8 +0,0 @@
-import { BaseFieldProps, Field } from '@chem-po/react'
-import { StyleProp, TextStyle, ViewStyle } from 'react-native'
-
-export type FieldProps<
-  T extends Field,
-  ContainerStyle extends ViewStyle = ViewStyle,
-  InputStyle extends TextStyle = TextStyle,
-> = BaseFieldProps<StyleProp<ContainerStyle>, StyleProp<InputStyle>, T>

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

@@ -1,80 +0,0 @@
-import { ImageViewOptions, InputSize } from '@chem-po/core'
-import { FileField, usePlaceholderColor } from '@chem-po/react'
-import React, { useMemo } from 'react'
-import { StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'
-import { Txt } from '../../text/Txt'
-import { FileView } from '../input/file'
-import { useInputStyles } from '../input/hooks/useInputStyles'
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'column',
-  },
-  rowContainer: {
-    flexDirection: 'row',
-  },
-  label: {
-    paddingRight: 8,
-    opacity: 0.7,
-    fontWeight: '600',
-  },
-  fileContainer: {
-    padding: 4,
-  },
-})
-
-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,
-  textStyle,
-}: {
-  field: FileField
-  value: any
-  noLabel?: boolean
-  style?: ViewStyle
-  textStyle?: StyleProp<TextStyle>
-  size?: InputSize
-}) => {
-  const { imageOptions, placeholder, size } = field
-  const options = useMemo<ImageViewOptions>(
-    () => ({
-      height: getFileSizeHeight(size ?? sizeProp ?? 'md'),
-      ...imageOptions,
-    }),
-    [imageOptions, size, sizeProp],
-  )
-
-  const { text, container } = useInputStyles(false, field.size, sizeProp)
-  const placeholderColor = usePlaceholderColor()
-
-  return (
-    <View style={[value ? styles.container : styles.rowContainer, style]}>
-      {!noLabel && <Text style={styles.label}>{placeholder}</Text>}
-      {value ? (
-        <View style={styles.fileContainer}>
-          <FileView textStyle={textStyle} imageOptions={options} value={value} />
-        </View>
-      ) : (
-        <View style={container}>
-          <Txt style={[text, { color: placeholderColor }, textStyle]}>None</Txt>
-        </View>
-      )}
-    </View>
-  )
-}

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

@@ -1,125 +0,0 @@
-import { displayField, InputSize } from '@chem-po/core'
-import { Field, FormatField, usePlaceholderColor } from '@chem-po/react'
-import React, { useMemo } from 'react'
-import { StyleProp, StyleSheet, TextStyle, 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',
-  },
-})
-
-const DefaultFieldView = ({
-  field,
-  value,
-  noLabel,
-  style,
-  size: sizeProp,
-  inEditable,
-  textStyle,
-}: {
-  field: Field
-  value: any
-  noLabel?: boolean
-  style?: ViewStyle
-  textStyle?: StyleProp<TextStyle>
-  size?: InputSize
-  inEditable?: boolean
-}) => {
-  const { placeholder } = field
-
-  const { text, container: containerStyles } = useInputStyles(inEditable, field.size, sizeProp)
-  const formatted = useMemo(() => {
-    const format = displayField[field._type] as FormatField<Field>
-    if (!format) return value
-    return format(field, value)
-  }, [value, field])
-
-  const placeholderColor = usePlaceholderColor()
-  const hasValue = useMemo(() => {
-    return value !== null && value !== undefined && value !== ''
-  }, [value])
-
-  return (
-    <View style={[styles.container, containerStyles, { backgroundColor: 'transparent' }, style]}>
-      {!noLabel && <Txt style={[inputViewStyles.label, text]}>{placeholder}</Txt>}
-      <Txt style={[text, { color: hasValue ? text.color : placeholderColor }, textStyle]}>
-        {hasValue ? formatted : 'None'}
-      </Txt>
-    </View>
-  )
-}
-
-export const FieldView = ({
-  field,
-  value,
-  noLabel,
-  style,
-  textStyle,
-  size,
-  inEditable,
-}: {
-  field: Field
-  value?: any
-  noLabel?: boolean
-  style?: ViewStyle
-  textStyle?: StyleProp<TextStyle>
-  size?: InputSize
-  inEditable?: boolean
-}) => {
-  switch (field._type) {
-    case 'select':
-      return (
-        <SelectFieldView
-          style={style}
-          textStyle={textStyle}
-          field={field}
-          value={value}
-          noLabel={noLabel}
-          size={size}
-          inEditable={inEditable}
-        />
-      )
-    case 'multipleSelect':
-      return (
-        <MultipleSelectFieldView
-          style={style}
-          field={field}
-          value={value}
-          textStyle={textStyle}
-          noLabel={noLabel}
-          size={size}
-        />
-      )
-    case 'file':
-      return (
-        <FileFieldView
-          textStyle={textStyle}
-          style={style}
-          field={field}
-          value={value}
-          noLabel={noLabel}
-          size={size}
-        />
-      )
-    default:
-      return (
-        <DefaultFieldView
-          style={style}
-          field={field}
-          value={value}
-          textStyle={textStyle}
-          noLabel={noLabel}
-          size={size}
-          inEditable={inEditable}
-        />
-      )
-  }
-}

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

@@ -1,85 +0,0 @@
-import { BaseSelectOption, InputSize } from '@chem-po/core'
-import { MultipleSelectField, useColorMode, usePlaceholderColor } from '@chem-po/react'
-import { useMemo } from 'react'
-import React, { StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'
-import { Txt } from '../../text/Txt'
-import { useInputStyles } from '../input/hooks/useInputStyles'
-import { SelectedOptionContainer } from '../input/multipleSelect'
-import { DefaultRenderOption } from './select'
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    maxWidth: '100%',
-    backgroundColor: 'transparent',
-  },
-  label: {
-    paddingRight: 8,
-    opacity: 0.7,
-    fontWeight: '600',
-  },
-  optionsContainer: {
-    padding: 2,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  optionContainer: {
-    marginTop: 2,
-    marginHorizontal: 2,
-  },
-})
-
-type NativeMultipleSelectField<
-  Value extends any[] = string[],
-  Option extends BaseSelectOption<Value[number]> = BaseSelectOption<Value[number]>,
-> = MultipleSelectField<Value, Option>
-
-export const MultipleSelectFieldView = <F extends NativeMultipleSelectField>({
-  field,
-  value,
-  noLabel,
-  size: sizeProp,
-  style,
-  textStyle,
-}: {
-  field: F
-  value?: F['defaultValue']
-  noLabel?: boolean
-  textStyle?: StyleProp<TextStyle>
-  size?: InputSize
-  style?: ViewStyle
-}) => {
-  const { placeholder, renderOption: customRender, options } = field
-  const selectedOptions = options.filter(o => value?.includes(o.value))
-  const colorMode = useColorMode()
-  const { size, text, container } = useInputStyles(true, field.size, sizeProp)
-  const placeholderColor = usePlaceholderColor()
-  const RenderOption = useMemo(() => customRender ?? DefaultRenderOption, [customRender])
-  return (
-    <View style={[styles.container, style]}>
-      {!noLabel && <Text style={styles.label}>{placeholder}</Text>}
-      {value?.length ? (
-        <View style={styles.optionsContainer}>
-          {selectedOptions.map(o => (
-            <SelectedOptionContainer key={o.value} style={[container, { width: 'auto' }]}>
-              <RenderOption
-                option={o}
-                value={o.value}
-                textStyle={[text, textStyle]}
-                colorMode={colorMode}
-                isSelected
-                size={size}
-              />
-            </SelectedOptionContainer>
-          ))}
-        </View>
-      ) : (
-        <View style={container}>
-          <Txt style={[text, { color: placeholderColor }, textStyle]}>None</Txt>
-        </View>
-      )}
-    </View>
-  )
-}

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

@@ -1,83 +0,0 @@
-import { InputSize, RenderSelectOptionProps } from '@chem-po/core'
-import { SelectField, useColorMode, usePlaceholderColor } from '@chem-po/react'
-import React, { useMemo } from 'react'
-import { StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'
-import { Txt } from '../../text'
-import { useInputStyles } from '../input/hooks/useInputStyles'
-import { inputViewStyles } from './styles'
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: 'transparent',
-  },
-  label: {
-    paddingRight: 10,
-    fontWeight: '600',
-  },
-})
-
-export const DefaultRenderOption = ({
-  option,
-  containerStyle,
-  textStyle,
-}: RenderSelectOptionProps & {
-  containerStyle?: StyleProp<ViewStyle>
-  textStyle?: StyleProp<TextStyle>
-}) => {
-  return (
-    <View style={containerStyle}>
-      <Txt style={[inputViewStyles.value, textStyle]}>{option.label}</Txt>
-    </View>
-  )
-}
-
-export const SelectFieldView = <F extends SelectField>({
-  field,
-  value,
-  noLabel,
-  style,
-  size: sizeProp,
-  inEditable,
-  textStyle,
-}: {
-  field: F
-  value: F['defaultValue']
-  noLabel?: boolean
-  style?: ViewStyle
-  textStyle?: StyleProp<TextStyle>
-  size?: InputSize
-  inEditable?: boolean
-}) => {
-  const { placeholder, renderOption: customRender } = field
-  const colorMode = useColorMode()
-  const placeholderColor = usePlaceholderColor()
-  const { size, text, container } = useInputStyles(inEditable, field.size, sizeProp)
-  const selectedOption = field.options.find(o => o.value === value)
-  const RenderOption = useMemo(() => customRender ?? DefaultRenderOption, [customRender])
-  return (
-    <View style={[styles.container, style]}>
-      {!noLabel && (
-        <Text style={[styles.label, text, { color: placeholderColor }, textStyle]}>
-          {placeholder}
-        </Text>
-      )}
-      {selectedOption ? (
-        <RenderOption
-          value={selectedOption.value}
-          option={selectedOption}
-          containerStyle={container}
-          textStyle={[text, textStyle]}
-          colorMode={colorMode}
-          isSelected={true}
-          size={size}
-        />
-      ) : (
-        <View style={container}>
-          <Txt style={[text, { color: placeholderColor }, textStyle]}>None</Txt>
-        </View>
-      )}
-    </View>
-  )
-}

package/src/components/form/view/styles.ts

@@ -1,12 +0,0 @@
-import { StyleSheet } from 'react-native'
-
-export const inputViewStyles = StyleSheet.create({
-  label: {
-    paddingRight: 8,
-    opacity: 0.7,
-    fontWeight: '600',
-  },
-  value: {
-    opacity: 1,
-  },
-})

package/src/components/icons/index.tsx

@@ -1,28 +0,0 @@
-import React, { FC } from 'react'
-import { Path, Svg } from 'react-native-svg'
-
-interface IconProps {
-  size?: number
-  color?: string
-}
-
-export const ChevronDownIcon: FC<IconProps> = ({ size = 24, color = '#000' }) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill={color} />
-  </Svg>
-)
-
-export const ChevronUpIcon: FC<IconProps> = ({ size = 24, color = '#000' }) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z" fill={color} />
-  </Svg>
-)
-
-export const TrashIcon: FC<IconProps> = ({ size = 24, color = '#000' }) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path
-      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-      fill={color}
-    />
-  </Svg>
-)