@chem-po/react-native 0.0.52 → 0.0.53

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

@@ -1,206 +0,0 @@
-import { InputRef } from '@chem-po/core'
-import {
-  CustomEditableViewProps,
-  EditableProps,
-  Field,
-  useColorModeValue,
-  useEditable,
-  useIconColor,
-  useThemeValue,
-} from '@chem-po/react'
-import { Ionicons } from '@expo/vector-icons'
-import React, { ForwardedRef, useCallback, useEffect } from 'react'
-import { StyleSheet, TextStyle, View, ViewStyle } from 'react-native'
-import { Pressable } from 'react-native-gesture-handler'
-import { useFontScale } from '../../../store/useFontScale'
-import { CustomInputProps } from '../../../types/forms'
-import { LoadingOverlay } from '../../loading/LoadingOverlay'
-import { UploadProgress } from '../UploadProgress'
-import { FieldView } from '../view'
-import { StandaloneInput } from './StandaloneInput'
-
-export const Editable = <T extends Field>({
-  value: initValue,
-  field,
-  onSubmit,
-  storagePath,
-  style,
-  onEditClose,
-  onEditOpen,
-  containerStyle,
-  size,
-  CustomInput,
-  ref,
-  CustomView,
-  inputStyle,
-}: EditableProps<ViewStyle, TextStyle, T>) => {
-  const {
-    inputRef,
-    onChange,
-    isLoading,
-    uploads,
-    editHovered,
-    handleEditOpen,
-    isEditing,
-    shouldSubmitOnChange,
-    handleEditClose,
-    submit,
-    value,
-    setEditHovered,
-  } = useEditable({
-    value: initValue,
-    field,
-    onSubmit,
-    storagePath,
-    onEditOpen,
-    onEditClose,
-    ref,
-  })
-  const fontScale = useFontScale(s => s.fontScale)
-
-  useEffect(() => {
-    if (isEditing) {
-      inputRef.current?.focus()
-    }
-  }, [isEditing, inputRef])
-
-  const iconColor = useIconColor()
-  const submitBackgroundColor = useThemeValue('colors.accent.600')
-  const editingBorderColor = useColorModeValue('#00000055', '#ffffff55')
-
-  const RenderInput = useCallback(
-    (props: CustomInputProps<T['defaultValue']>, ref?: ForwardedRef<InputRef | null>) => {
-      if (CustomInput) {
-        return <CustomInput {...props} ref={ref} />
-      }
-      if (!field) throw new Error('Editable component must have a field OR a CustomInput')
-      return <StandaloneInput ref={ref} field={field} inputStyle={inputStyle} {...props} />
-    },
-    [CustomInput, field, inputStyle],
-  )
-
-  const RenderView = useCallback(
-    (props: CustomEditableViewProps<T['defaultValue']>) => {
-      if (CustomView) {
-        return <CustomView {...props} />
-      }
-      if (!field) throw new Error('Editable component must have a field OR a CustomView')
-      return <FieldView textStyle={inputStyle} field={field} {...props} />
-    },
-    [CustomView, field, inputStyle],
-  )
-
-  return (
-    <View style={[styles.container, containerStyle]}>
-      <View style={styles.contentContainer}>
-        <View
-          style={[
-            styles.inputContainer,
-            {
-              opacity: isLoading ? 0 : 1,
-              borderColor: isEditing || editHovered ? editingBorderColor : 'transparent',
-            },
-          ]}>
-          {isEditing || shouldSubmitOnChange ? (
-            <RenderInput
-              onChange={onChange}
-              ref={inputRef}
-              value={value}
-              inEditable
-              style={style}
-              size={size}
-            />
-          ) : (
-            <RenderView inEditable noLabel size={size} value={value} />
-          )}
-        </View>
-        {!shouldSubmitOnChange ? (
-          <View style={styles.buttonsContainer}>
-            {isEditing ? (
-              <>
-                <Pressable
-                  onPress={() => {
-                    handleEditClose()
-                  }}
-                  style={[
-                    styles.submitButton,
-                    {
-                      borderColor: iconColor,
-                      borderWidth: 1,
-                      width: 28 * fontScale,
-                      height: 28 * fontScale,
-                    },
-                  ]}
-                  onPressIn={() => setEditHovered(true)}
-                  onPressOut={() => setEditHovered(false)}>
-                  <Ionicons name="close-outline" size={20 * fontScale} color={iconColor} />
-                </Pressable>
-                <Pressable
-                  onPress={() => {
-                    submit()
-                  }}
-                  style={[
-                    styles.submitButton,
-                    {
-                      backgroundColor: submitBackgroundColor,
-                      width: 28 * fontScale,
-                      height: 28 * fontScale,
-                    },
-                  ]}
-                  onPressIn={() => setEditHovered(true)}
-                  onPressOut={() => setEditHovered(false)}>
-                  <Ionicons color="white" name="checkmark-outline" size={20 * fontScale} />
-                </Pressable>
-              </>
-            ) : (
-              <Pressable
-                onPress={() => {
-                  handleEditOpen()
-                }}
-                style={[styles.submitButton, { width: 28 * fontScale, height: 28 * fontScale }]}
-                onPressIn={() => setEditHovered(true)}
-                onPressOut={() => setEditHovered(false)}>
-                <Ionicons name="create-outline" size={20 * fontScale} color={iconColor} />
-              </Pressable>
-            )}
-          </View>
-        ) : null}
-        <LoadingOverlay loading={isLoading} />
-      </View>
-      <UploadProgress uploads={uploads} />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 4,
-    width: '100%',
-  },
-  buttonsContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    paddingTop: 6,
-    paddingHorizontal: 4,
-    gap: 10,
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    gap: 10,
-    position: 'relative',
-    width: '100%',
-  },
-  inputContainer: {
-    flex: 1,
-    minWidth: 0,
-    borderWidth: 1,
-    borderStyle: 'dashed',
-  },
-  submitButton: {
-    width: 28,
-    height: 28,
-    borderRadius: 4,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-})

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

@@ -1,71 +0,0 @@
-import { Gradient } from '@chem-po/core'
-import Slider from '@react-native-community/slider'
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-
-type SliderProps = React.ComponentProps<typeof Slider>
-
-export const InputSlider = ({
-  // label,
-  gradient,
-  value,
-  minimumValue,
-  maximumValue,
-  ...props
-}: {
-  label: string
-  gradient?: Gradient
-} & SliderProps) => {
-  return (
-    <View style={[styles.container, { opacity: value !== undefined ? 1 : 0.5 }]}>
-      <View style={styles.sliderContainer}>
-        {minimumValue !== undefined ? (
-          <Text style={[styles.label, gradient ? styles.gradientText : null]}>
-            {typeof minimumValue === 'number'
-              ? minimumValue.toFixed((props?.step ?? 1) < 1 ? 2 : 0)
-              : ''}
-          </Text>
-        ) : null}
-
-        <Slider
-          style={styles.slider}
-          minimumValue={minimumValue}
-          maximumValue={maximumValue}
-          step={1}
-          {...props}
-        />
-
-        {maximumValue !== undefined ? (
-          <Text style={[styles.label, gradient ? styles.gradientText : null]}>
-            {typeof maximumValue === 'number'
-              ? maximumValue.toFixed((props?.step ?? 1) < 1 ? 2 : 0)
-              : ''}
-          </Text>
-        ) : null}
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    paddingVertical: 8,
-  },
-  sliderContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: '100%',
-  },
-  slider: {
-    flex: 1,
-    height: 40,
-  },
-  label: {
-    fontSize: 14,
-    marginHorizontal: 8,
-  },
-  gradientText: {
-    color: '#007AFF', // iOS blue color, you can customize this
-  },
-})

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

@@ -1,43 +0,0 @@
-import { Field } from '@chem-po/react'
-import React, { useMemo } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-
-export const OptionalTag = <T extends Field>({
-  value,
-  field,
-}: {
-  field: T
-  value: T['defaultValue'] | undefined | null
-}) => {
-  const top = useMemo(() => {
-    if (value === '' || value === undefined || value === null) return 1
-    switch (field._type) {
-      case 'text':
-      case 'number':
-      case 'select':
-      case 'date':
-      case 'time':
-      case 'datetime':
-        return -1
-      default:
-        return 1
-    }
-  }, [value, field])
-
-  return (
-    <View style={[styles.container, { top }]}>
-      <Text style={styles.text}>OPTIONAL</Text>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    right: 12,
-  },
-  text: {
-    fontSize: 12,
-    opacity: 0.6,
-  },
-})

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

@@ -1,49 +0,0 @@
-import { InputRef } from '@chem-po/core'
-import { BaseCustomInputProps, Field, useStandaloneInput } from '@chem-po/react'
-import React, { ForwardedRef, forwardRef } from 'react'
-import { TextStyle, ViewStyle } from 'react-native'
-import { Input } from './input'
-
-interface StandaloneInputProps<
-  T extends Field,
-  ContainerStyle extends ViewStyle = ViewStyle,
-  InputStyle extends TextStyle = TextStyle,
-> extends BaseCustomInputProps<T['defaultValue'], ContainerStyle, InputStyle> {
-  field: T
-}
-
-const StandaloneInputBase = <
-  T extends Field,
-  ContainerStyle extends ViewStyle = ViewStyle,
-  InputStyle extends TextStyle = TextStyle,
->(
-  {
-    onChange,
-    value,
-    field,
-    onBlur,
-    inEditable,
-    onFocus,
-    style,
-    size,
-    inputStyle,
-  }: StandaloneInputProps<T, ContainerStyle, InputStyle>,
-  ref: ForwardedRef<InputRef>,
-) => {
-  const { inputProps, meta } = useStandaloneInput(field, value, onChange, onFocus, onBlur)
-
-  return (
-    <Input
-      ref={ref}
-      field={field}
-      inEditable={inEditable}
-      style={style}
-      input={inputProps}
-      inputStyle={inputStyle}
-      formSize={size}
-      meta={meta}
-    />
-  )
-}
-
-export const StandaloneInput = forwardRef(StandaloneInputBase)

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

@@ -1,53 +0,0 @@
-import { InputRef } from '@chem-po/core'
-import { BooleanField, useBooleanFieldText } from '@chem-po/react'
-import React, { ForwardedRef, forwardRef, useImperativeHandle } from 'react'
-import { Switch, View } from 'react-native'
-import { Txt } from '../../../text/Txt'
-import { FieldProps } from '../../types'
-
-const BaseCheckboxComponent = (
-  { field, input: { onChange, value, ...input } }: FieldProps<BooleanField>,
-  ref: ForwardedRef<InputRef>,
-) => {
-  useImperativeHandle(ref, () => ({
-    focus: () => {},
-    blur: () => {},
-  }))
-  const text = useBooleanFieldText(field, value)
-  return (
-    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-      <Switch value={value} onValueChange={onChange} {...input} />
-      <Txt style={{ marginLeft: 8, fontWeight: '600', opacity: value ? 0.9 : 0.6 }}>{text}</Txt>
-    </View>
-  )
-}
-
-const CheckboxBooleanComponent = forwardRef<InputRef, FieldProps<BooleanField>>(
-  BaseCheckboxComponent,
-)
-
-const BaseSwitchComponent = (
-  { field, input: { onChange, value, ...input } }: FieldProps<BooleanField>,
-  ref: ForwardedRef<InputRef>,
-) => {
-  useImperativeHandle(ref, () => ({
-    focus: () => {},
-    blur: () => {},
-  }))
-  const text = useBooleanFieldText(field, value)
-  return (
-    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-      <Switch value={value} onValueChange={onChange} {...input} />
-      <Txt style={{ marginLeft: 8, fontWeight: '600', opacity: value ? 0.9 : 0.6 }}>{text}</Txt>
-    </View>
-  )
-}
-
-const SwitchBooleanComponent = forwardRef<InputRef, FieldProps<BooleanField>>(BaseSwitchComponent)
-
-const BaseBooleanComponent = (props: FieldProps<BooleanField>, ref: ForwardedRef<InputRef>) => {
-  if (props.field.type === 'switch') return <SwitchBooleanComponent ref={ref} {...props} />
-  return <CheckboxBooleanComponent ref={ref} {...props} />
-}
-
-export const BooleanComponent = forwardRef<InputRef, FieldProps<BooleanField>>(BaseBooleanComponent)

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

@@ -1,145 +0,0 @@
-import { colorValueToHex, Gradient, gradients, InputRef } from '@chem-po/core'
-import { ColorField } from '@chem-po/react'
-import React, { forwardRef, useCallback, useMemo } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { FieldProps } from '../../types'
-import { InputSlider } from '../InputSlider'
-import { useInputImperativeHandle } from '../hooks/useInputImperativeHandle'
-
-const ColorComponentSlider = ({
-  label,
-  gradient,
-  value,
-  ...props
-}: {
-  label: string
-  gradient: Gradient
-} & React.ComponentProps<typeof InputSlider>) => (
-  <InputSlider
-    label={label}
-    value={value}
-    minimumValue={0}
-    maximumValue={255}
-    step={1}
-    gradient={gradient}
-    {...props}
-  />
-)
-
-export const ColorComponent = forwardRef<InputRef, FieldProps<ColorField>>(
-  ({ input: { onChange, value }, field, meta }, ref) => {
-    const { withAlpha, defaultValue } = field
-    const { active } = meta || {}
-
-    useInputImperativeHandle(ref)
-
-    const handleChange = useCallback(
-      (key: 'r' | 'g' | 'b' | 'a', val: number) => {
-        if (withAlpha) {
-          onChange({
-            r: 0,
-            g: 0,
-            b: 0,
-            a: 1,
-            ...value,
-            [key]: val,
-          })
-        } else {
-          onChange({
-            r: 0,
-            g: 0,
-            b: 0,
-            ...value,
-            [key]: val,
-          })
-        }
-      },
-      [value, onChange, withAlpha],
-    )
-
-    const withDefault = useMemo(() => ({ ...defaultValue, ...value }), [defaultValue, value])
-    const asHex = useMemo(() => colorValueToHex(!!withAlpha, withDefault), [withDefault, withAlpha])
-
-    return (
-      <View style={styles.container}>
-        <View style={[styles.colorPreview, { backgroundColor: asHex }]}>
-          <Text style={styles.hexText}>{asHex}</Text>
-        </View>
-        <View style={[styles.slidersContainer, active && styles.activeContainer]}>
-          <ColorComponentSlider
-            label="R"
-            gradient={gradients.red}
-            value={value?.r}
-            onValueChange={updatedRed => handleChange('r', updatedRed)}
-          />
-          <ColorComponentSlider
-            label="G"
-            gradient={gradients.green}
-            value={value?.g}
-            onValueChange={updatedGreen => handleChange('g', updatedGreen)}
-          />
-          <ColorComponentSlider
-            label="B"
-            gradient={gradients.blue}
-            value={value?.b}
-            onValueChange={updatedBlue => handleChange('b', updatedBlue)}
-          />
-          {withAlpha ? (
-            <ColorComponentSlider
-              label="A"
-              gradient={gradients.midnight}
-              value={value?.a}
-              onValueChange={updatedAlpha => handleChange('a', updatedAlpha)}
-            />
-          ) : null}
-        </View>
-      </View>
-    )
-  },
-)
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  colorPreview: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    justifyContent: 'center',
-    alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
-  },
-  hexText: {
-    fontSize: 16,
-    color: '#fff',
-    textShadowColor: 'rgba(0, 0, 0, 0.75)',
-    textShadowOffset: { width: 0, height: 1 },
-    textShadowRadius: 2,
-  },
-  slidersContainer: {
-    flex: 1,
-    padding: 8,
-    borderRadius: 6,
-  },
-  activeContainer: {
-    shadowColor: '#fff',
-    shadowOffset: {
-      width: 0,
-      height: 0,
-    },
-    shadowOpacity: 0.5,
-    shadowRadius: 5,
-    elevation: 5,
-  },
-})

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

@@ -1,57 +0,0 @@
-import { useBackgroundColor, useBorderColor, useIconColor } from '@chem-po/react'
-import { Ionicons } from '@expo/vector-icons'
-import React from 'react'
-import { StyleSheet } from 'react-native'
-import { Pressable } from 'react-native-gesture-handler'
-
-export const InputClearButton = ({
-  onPress,
-  isActive,
-  marginRight,
-  size,
-}: {
-  onPress: () => void
-  isActive: boolean
-  marginRight?: number
-  size: number
-}) => {
-  const iconColor = useIconColor()
-  const borderColor = useBorderColor()
-  const backgroundColor = useBackgroundColor(100)
-  return (
-    <Pressable
-      onPress={onPress}
-      style={[
-        styles.closeButton,
-        { opacity: isActive ? 1 : 0, marginRight, borderColor, backgroundColor },
-      ]}
-      hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-      disabled={!isActive}>
-      <Ionicons name="close" size={size} color={iconColor} style={{ alignSelf: 'center' }} />
-    </Pressable>
-  )
-}
-
-export const DateInputClearButton = ({
-  onPress,
-  isActive,
-  size,
-}: {
-  onPress: () => void
-  isActive: boolean
-  size: number
-}) => {
-  return <InputClearButton marginRight={0} onPress={onPress} isActive={isActive} size={size} />
-}
-
-const styles = StyleSheet.create({
-  closeButton: {
-    padding: 3,
-    borderRadius: 100,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    // backgroundColor: '#e2e8f0',
-    borderWidth: 1,
-  },
-})