@chem-po/react-native 0.0.5 → 0.0.7

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

@@ -0,0 +1,167 @@
+import { palette } from '@chem-po/core'
+import { EditableProps, Field, useColorModeValue, useEditable } from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import { useEffect, useMemo } from 'react'
+import { StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native'
+import { LoadingOverlay } from '../../loading/Loading'
+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,
+}: EditableProps<ViewStyle, T>) => {
+  const {
+    formattedValue,
+    inputRef,
+    setValue,
+    isLoading,
+    uploads,
+    editHovered,
+    handleEditOpen,
+    handleEditClose,
+    isEditing,
+    value,
+    setEditHovered,
+    submitValue,
+    submit,
+    parse,
+  } = useEditable({
+    value: initValue,
+    field,
+    onSubmit,
+    storagePath,
+    onEditOpen,
+    onEditClose,
+  })
+
+  const alwaysEditing = useMemo(() => field._type === 'file' || field._type === 'boolean', [field])
+
+  useEffect(() => {
+    if (isEditing) {
+      inputRef.current?.focus()
+    }
+  }, [isEditing, inputRef])
+
+  const editingBorderColor = useColorModeValue('#00000055', '#ffffff55')
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          borderColor: editHovered && !isEditing ? editingBorderColor : 'transparent',
+        },
+        style,
+      ]}>
+      <View style={styles.contentContainer}>
+        <View
+          style={[
+            styles.inputContainer,
+            {
+              opacity: isLoading ? 0 : 1,
+              borderColor: isEditing ? editingBorderColor : 'transparent',
+            },
+          ]}>
+          {isEditing || alwaysEditing ? (
+            <StandaloneInput
+              ref={inputRef}
+              value={formattedValue}
+              inEditable
+              field={field}
+              style={[styles.input, style]}
+              onChange={alwaysEditing ? v => submitValue(parse(v)) : v => setValue(parse(v))}
+            />
+          ) : (
+            <FieldView style={style} field={field} value={value} />
+          )}
+        </View>
+
+        {!alwaysEditing && (
+          <>
+            <TouchableOpacity
+              style={styles.editButton}
+              onPress={() => {
+                if (isEditing) {
+                  setValue(value)
+                  handleEditClose()
+                } else {
+                  handleEditOpen()
+                }
+              }}
+              onPressIn={() => setEditHovered(true)}
+              onPressOut={() => setEditHovered(false)}>
+              <Ionicons
+                name={isEditing ? 'close' : 'create-outline'}
+                size={20}
+                color={palette.gray.medium}
+              />
+            </TouchableOpacity>
+
+            <View
+              style={[
+                styles.submitButtonContainer,
+                {
+                  width: isEditing ? 30 : 0,
+                  opacity: isEditing ? 1 : 0,
+                },
+              ]}>
+              <TouchableOpacity
+                style={[styles.submitButton, { backgroundColor: palette.cyan.light }]}
+                onPress={() => {
+                  submit()
+                }}>
+                <Ionicons name="checkmark" size={20} color="#fff" />
+              </TouchableOpacity>
+            </View>
+          </>
+        )}
+        <LoadingOverlay isLoading={isLoading} />
+      </View>
+      <UploadProgress uploads={uploads} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 4,
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    width: '100%',
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 4,
+    position: 'relative',
+    width: '100%',
+  },
+  inputContainer: {
+    flex: 1,
+    minWidth: 0,
+    borderWidth: 1,
+    borderStyle: 'dashed',
+  },
+  input: {
+    padding: 0,
+  },
+  editButton: {
+    padding: 4,
+    marginLeft: 4,
+  },
+  submitButtonContainer: {
+    justifyContent: 'flex-end',
+    overflow: 'hidden',
+  },
+  submitButton: {
+    padding: 4,
+    borderRadius: 4,
+  },
+})

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

@@ -0,0 +1,70 @@
+import { Gradient } from '@chem-po/core'
+import Slider from '@react-native-community/slider'
+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

@@ -0,0 +1,43 @@
+import { Field } from '@chem-po/react'
+import { 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

@@ -0,0 +1,36 @@
+import { InputRef } from '@chem-po/core'
+import { Field, useStandaloneInput } from '@chem-po/react'
+import { ForwardedRef, forwardRef } from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
+import { Input } from './input'
+
+interface StandaloneInputProps {
+  onChange: (v?: any) => void
+  value?: any
+  field: Field
+  onBlur?: () => void
+  onFocus?: () => void
+  theme?: 'basic' | 'detailed'
+  inEditable?: boolean
+  style?: StyleProp<ViewStyle>
+}
+
+const StandaloneInputBase = (
+  { onChange, value, field, onBlur, inEditable, onFocus, style }: StandaloneInputProps,
+  ref: ForwardedRef<InputRef>,
+) => {
+  const { inputProps, meta } = useStandaloneInput(field, value, onChange, onFocus, onBlur)
+
+  return (
+    <Input
+      ref={ref}
+      field={field}
+      inEditable={inEditable}
+      style={style}
+      input={inputProps}
+      meta={meta}
+    />
+  )
+}
+
+export const StandaloneInput = forwardRef(StandaloneInputBase)

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

@@ -0,0 +1,56 @@
+import { InputRef } from '@chem-po/core'
+import { BooleanField } from '@chem-po/react'
+import { ForwardedRef, forwardRef, useImperativeHandle } from 'react'
+import { Switch, Text, View } from 'react-native'
+import { FieldProps } from '../../types'
+
+const BaseCheckboxComponent = (
+  { field, input: { onChange, value, ...input } }: FieldProps<BooleanField>,
+  ref: ForwardedRef<InputRef>,
+) => {
+  const { placeholder } = field
+  useImperativeHandle(ref, () => ({
+    focus: () => {},
+    blur: () => {},
+  }))
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+      <Switch value={value} onValueChange={onChange} {...input} />
+      <Text style={{ marginLeft: 8, fontWeight: '600', opacity: value ? 0.9 : 0.6 }}>
+        {placeholder}
+      </Text>
+    </View>
+  )
+}
+
+const CheckboxBooleanComponent = forwardRef<InputRef, FieldProps<BooleanField>>(
+  BaseCheckboxComponent,
+)
+
+const BaseSwitchComponent = (
+  { field, input: { onChange, value, ...input } }: FieldProps<BooleanField>,
+  ref: ForwardedRef<InputRef>,
+) => {
+  const { placeholder } = field
+  useImperativeHandle(ref, () => ({
+    focus: () => {},
+    blur: () => {},
+  }))
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+      <Switch value={value} onValueChange={onChange} {...input} />
+      <Text style={{ marginLeft: 8, fontWeight: '600', opacity: value ? 0.9 : 0.6 }}>
+        {placeholder}
+      </Text>
+    </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

@@ -0,0 +1,145 @@
+import { colorValueToHex, Gradient, gradients, InputRef } from '@chem-po/core'
+import { ColorField } from '@chem-po/react'
+import { 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

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

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

@@ -0,0 +1,103 @@
+import { getDateString, InputRef } from '@chem-po/core'
+import { DateField, useIconColor } from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import { forwardRef, useImperativeHandle, useMemo } from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { Portal } from 'react-native-paper'
+import { DatePickerModal } from 'react-native-paper-dates'
+import { FieldProps } from '../../types'
+import { DateInputClearButton } from '../common/InputClearButton'
+import { useInputColor } from '../hooks/useInputColor'
+
+// 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 },
+      meta: { active },
+    },
+    ref,
+  ) => {
+    const date = useMemo(() => (value ? new Date(`${value}T00:00:00.000`) : undefined), [value])
+
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        onFocus()
+      },
+      blur: () => {
+        onBlur()
+      },
+    }))
+
+    const showDialog = () => {
+      onFocus()
+    }
+
+    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
+
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity style={styles.button} onPress={showDialog}>
+          <Text style={[styles.text, { color: inputColor }]}>
+            {value ? getDateString(value, 'short') : placeholder}
+          </Text>
+          <Ionicons name="calendar" size={20} color={iconColor} style={styles.icon} />
+          {optional && value ? (
+            <DateInputClearButton onPress={() => onChange(null)} isActive />
+          ) : null}
+        </TouchableOpacity>
+        <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',
+    width: '100%',
+    height: 40,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  text: {
+    fontSize: 16,
+    flex: 1,
+  },
+  icon: {
+    marginRight: 10,
+  },
+})