@chem-po/react-native 0.0.52 → 0.0.53

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

@@ -1,114 +0,0 @@
-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'
-import { useFont } from '../../../../hooks/useFont'
-
-export const inputStyles = StyleSheet.create({
-  input: {
-    width: '100%',
-    fontSize: 16,
-    outlineWidth: 0,
-  },
-  inputXSmall: {
-    paddingVertical: 4,
-    paddingHorizontal: 6,
-    borderRadius: 3,
-  },
-  inputSmall: {
-    padding: 8,
-    borderRadius: 4,
-  },
-  inputMedium: {
-    padding: 12,
-    borderRadius: 6,
-  },
-  inputLarge: {
-    padding: 14,
-    borderRadius: 8,
-  },
-  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 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
-  const textFont = useFont('body', usedSize)
-  return {
-    text: {
-      ...textFont,
-      paddingTop: 0,
-      paddingBottom: 0,
-      color: textColor,
-      outlineWidth: 0,
-    },
-    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/index.ts

@@ -1,4 +0,0 @@
-export * from './Editable'
-export * from './hooks'
-export * from './input'
-export * from './StandaloneInput'

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

@@ -1,218 +0,0 @@
-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'
-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 { useInputStyles } from './hooks/useInputStyles'
-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,
-    formSize,
-    style,
-  } = 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: 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])
-
-  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 ? (
-        typeof Label === 'string' ? (
-          <Text style={staticStyles.label}>{Label}</Text>
-        ) : (
-          <Label />
-        )
-      ) : null}
-      {inEditable ? 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} input={{ ...input, onChange, value: formattedValue }} />
-      </Animated.View>
-      {/* {!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>
-  )
-}
-
-const staticStyles = StyleSheet.create({
-  container: {
-    position: 'relative',
-    width: '100%',
-    // backgroundColor: 'blue',
-  },
-  label: {
-    color: '#1A202C',
-    fontSize: 14,
-    paddingHorizontal: 8,
-  },
-  inputContainer: {
-    width: '100%',
-    paddingVertical: 1,
-    // overflow: 'hidden',
-  },
-  errorText: {
-    paddingTop: 3,
-    paddingHorizontal: 8,
-    fontWeight: 500,
-    // backgroundColor: 'red',
-  },
-  errorTextEditable: {
-    fontSize: 14,
-    paddingHorizontal: 6,
-    paddingBottom: 8,
-    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

@@ -1,221 +0,0 @@
-import { InputRef, RenderSelectOptionProps } from '@chem-po/core'
-import {
-  MultipleSelectField,
-  useBackgroundColor,
-  useBorderColor,
-  useColorMode,
-  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 SelectedOptionContainer = ({
-  children,
-  style,
-}: PropsWithChildren<{ key?: string; style?: StyleProp<ViewStyle> }>) => {
-  const borderColor = useBorderColor()
-  const bg = useBackgroundColor(100)
-  return (
-    <View style={[styles.selectedOption, { borderColor, backgroundColor: bg }, style]}>
-      {children}
-    </View>
-  )
-}
-
-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
-
-  const colorMode = useColorMode()
-  const inputRef = useRef<IDropdownRef>(null)
-  const { container, iconSize, clearButtonSize, text, buttonContainer, size } = useInputStyles(
-    inEditable,
-    field.size,
-    formSize,
-  )
-  const iconColor = useIconColor()
-  const textColor = useTextColor()
-  const placeholderColor = usePlaceholderColor()
-  const menuBg = useBackgroundColor(100)
-  const inputBg = useBackgroundColor(50)
-  const selectedOptionBg = useBackgroundColor(50)
-  const borderColor = useBorderColor()
-
-  useImperativeHandle(ref, () => ({
-    focus: () => {
-      inputRef.current?.open()
-    },
-    blur: () => {
-      inputRef.current?.close()
-    },
-  }))
-
-  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>
-  }
-
-  const RenderSelectedOptionText = (
-    props: RenderSelectOptionProps<T['options'][number]['value'], T['options'][number]>,
-  ) => {
-    if (typeof RenderOption === 'function') {
-      return RenderOption(props)
-    }
-    return (
-      <View style={[container, { width: 'auto' }]}>
-        <Txt style={[text]}>{props.option.label}</Txt>
-      </View>
-    )
-  }
-
-  const selectedOptions = useMemo(() => {
-    return options.filter(o => value?.includes(o.value))
-  }, [options, value])
-
-  return (
-    <View style={[styles.wrapper]}>
-      <MultiSelect
-        ref={inputRef}
-        style={container}
-        placeholderStyle={[text, { color: value?.length ? textColor : placeholderColor }]}
-        containerStyle={{
-          backgroundColor: menuBg,
-          boxShadow: `0 0 10px #00000066`,
-          borderWidth: 0,
-        }}
-        inputSearchStyle={[styles.inputSearch, text, { backgroundColor: inputBg, borderWidth: 0 }]}
-        iconStyle={styles.iconStyle}
-        data={options}
-        search={searchable}
-        searchField={searchable ? 'label' : undefined}
-        maxHeight={300}
-        labelField="label"
-        valueField="value"
-        placeholder={
-          selectedOptions.length ? selectedOptions.map(v => v.label).join(', ') : placeholder
-        }
-        searchPlaceholder={searchPlaceholder ?? placeholder}
-        value={value ?? []}
-        onChange={updated => {
-          onChange(updated)
-        }}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        itemContainerStyle={{
-          backgroundColor: menuBg,
-          borderTopWidth: 1,
-          borderColor: borderColor,
-        }}
-        renderItem={(item, selected) => (
-          <View
-            style={{
-              backgroundColor: selected ? selectedOptionBg : menuBg,
-              paddingVertical: 8,
-              paddingHorizontal: 12,
-              flexDirection: 'row',
-              alignItems: 'center',
-              width: '100%',
-            }}>
-            <RenderOptionText
-              value={item.value}
-              option={item}
-              colorMode={colorMode}
-              isSelected={!!selected}
-              size={size}
-            />
-            {selected ? <Ionicons name="checkmark" size={iconSize} color={iconColor} /> : null}
-          </View>
-        )}
-        renderSelectedItem={item => (
-          <SelectedOptionContainer style={{ marginTop: 10 }}>
-            <RenderSelectedOptionText
-              value={item.value}
-              option={item}
-              colorMode={colorMode}
-              isSelected
-              size={size}
-            />
-            <View style={[styles.optionClearContainer, { borderColor }]}>
-              <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({
-  wrapper: {
-    width: '100%',
-  },
-  defaultOption: {
-    flex: 1,
-  },
-  iconStyle: {
-    width: 20,
-    height: 20,
-  },
-  inputSearch: {
-    paddingVertical: 4,
-    minHeight: 0,
-    outlineWidth: 0,
-    fontSize: 16,
-  },
-  selectedOption: {
-    flexDirection: 'row',
-    borderRadius: 4,
-    borderWidth: 1,
-    alignItems: 'center',
-    marginTop: 4,
-    marginBottom: 4,
-    marginHorizontal: 4,
-  },
-  optionClearContainer: {
-    paddingHorizontal: 8,
-    borderLeftWidth: 1,
-    borderTopRightRadius: 8,
-    borderBottomRightRadius: 8,
-    justifyContent: 'center',
-  },
-})

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

@@ -1,108 +0,0 @@
-import { InputRef } from '@chem-po/core'
-import { CurrencyAmountField, NumberField, usePlaceholderColor, useTextColor } from '@chem-po/react'
-import React, { ForwardedRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import { StyleSheet, Text, TextInput, View } from 'react-native'
-import { FieldProps } from '../../types'
-import { InputSlider } from '../InputSlider'
-import { useInputImperativeHandle } from '../hooks/useInputImperativeHandle'
-import { useInputStyles } from '../hooks/useInputStyles'
-
-export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & { prefix?: string }>(
-  (
-    {
-      input: { onChange, value, ...input },
-      inputStyle,
-      field,
-      prefix,
-      inEditable,
-      style,
-      formSize,
-    },
-    ref,
-  ) => {
-    const { type, defaultValue, placeholder, size } = field
-    const color = useTextColor()
-    const { container: conatinerStyles, text: inputStyles } = useInputStyles(
-      inEditable,
-      size,
-      formSize,
-    )
-    const inputRef = useInputImperativeHandle(ref)
-    const [endsWith, setEndsWith] = useState('')
-    const displayed = typeof value === 'number' && !Number.isNaN(value) ? `${value}${endsWith}` : ''
-
-    const placeholderColor = usePlaceholderColor()
-
-    if (type === 'slider') {
-      return (
-        <InputSlider
-          label={placeholder}
-          style={style}
-          onValueChange={onChange}
-          value={value}
-          minimumValue={defaultValue}
-        />
-      )
-    }
-
-    return (
-      <View style={[styles.container, conatinerStyles, style]}>
-        {prefix && <Text style={styles.prefix}>{prefix}</Text>}
-        <TextInput
-          ref={inputRef}
-          style={[inputStyles, { color, outlineWidth: 0 }, inputStyle]}
-          placeholder={field.placeholder}
-          placeholderTextColor={placeholderColor}
-          keyboardType="numeric"
-          value={displayed}
-          onChangeText={text => {
-            if (text.endsWith('.')) {
-              setEndsWith('.')
-            } else if (text.includes('.') && text.endsWith('0')) {
-              setEndsWith('0')
-            } else {
-              setEndsWith('')
-            }
-            const num = parseFloat(text)
-            onChange(!isNaN(num) ? num : undefined)
-          }}
-          {...input}
-          // {...props}
-        />
-      </View>
-    )
-  },
-)
-
-const BaseCurrencyAmountComponent = (
-  { field, ...props }: FieldProps<CurrencyAmountField>,
-  ref: ForwardedRef<InputRef>,
-) => {
-  const inputRef = useRef<TextInput>(null)
-
-  useImperativeHandle(ref, () => ({
-    focus: () => {
-      inputRef.current?.focus()
-    },
-    blur: () => {
-      inputRef.current?.blur()
-    },
-  }))
-  return <NumberComponent prefix="$" field={{ ...field, _type: 'number' }} {...props} />
-}
-
-export const CurrencyAmountComponent = forwardRef<InputRef, FieldProps<CurrencyAmountField>>(
-  BaseCurrencyAmountComponent as any,
-)
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: '100%',
-  },
-  prefix: {
-    marginRight: 4,
-    fontSize: 16,
-  },
-})