@chem-po/react-native 0.0.4 → 0.0.6

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

@@ -0,0 +1,100 @@
+import { InputRef } from '@chem-po/core'
+import { CurrencyAmountField, NumberField, usePlaceholderColor, useTextColor } from '@chem-po/react'
+import { 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 { useInputStyle } from '../hooks/useInputStyle'
+
+export const NumberComponent = forwardRef<InputRef, FieldProps<NumberField> & { prefix?: string }>(
+  ({ input: { onChange, value, ...input }, field, size, prefix, inEditable: _, ...props }, ref) => {
+    const { type, defaultValue, placeholder } = field
+    const color = useTextColor()
+    const { style } = useInputStyle(size)
+    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}
+          onValueChange={onChange}
+          value={value}
+          minimumValue={defaultValue}
+        />
+      )
+    }
+
+    return (
+      <View style={styles.container}>
+        {prefix && <Text style={styles.prefix}>{prefix}</Text>}
+        <TextInput
+          ref={inputRef}
+          style={[styles.input, style, { color }]}
+          // style={styles.input}
+          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%',
+  },
+  input: {
+    flex: 1,
+    height: 40,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: 'transparent',
+  },
+  prefix: {
+    marginRight: 4,
+    fontSize: 16,
+  },
+})

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

@@ -0,0 +1,215 @@
+import { InputRef } from '@chem-po/core'
+import {
+  SelectField,
+  useBackgroundColor,
+  useBorderColor,
+  useIconColor,
+  usePlaceholderColor,
+} from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import { ForwardedRef, forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { Modal, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { Txt } from '../../../text/Txt'
+import { FieldProps } from '../../types'
+import { InputClearButton } from '../common/InputClearButton'
+
+type SelectOption<T extends SelectField> = T['options'][number]
+
+const BaseSelectComponent = <T extends SelectField>(
+  { field, input, meta }: FieldProps<T>,
+  ref: ForwardedRef<InputRef>,
+) => {
+  const { placeholder, options, renderOption, getOptionKey, optional } = field
+  const { onChange, value, onFocus, onBlur } = input
+  const { active } = meta
+  const [buttonLayout, setButtonLayout] = useState({ x: 0, y: 0, width: 0, height: 0 })
+  const buttonRef = useRef<View>(null)
+
+  const selected = useMemo(() => {
+    if (!value) return undefined
+    return options.find(o => {
+      if (getOptionKey) {
+        const key1 = getOptionKey(o)
+        const key2 = getOptionKey(value)
+        return key1 === key2
+      }
+      return o === value
+    })
+  }, [value, options, getOptionKey])
+
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      onFocus()
+      // setIsOpen(true)
+    },
+    blur: () => {
+      onBlur()
+      // setIsOpen(false)
+    },
+  }))
+
+  const handleButtonLayout = () => {
+    buttonRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+      setButtonLayout({ x: pageX, y: pageY, width, height })
+    })
+  }
+
+  const renderOptionText = (option: T['options'][number], isSelected: boolean) => {
+    if (typeof renderOption === 'function') {
+      return renderOption(option, 'light', isSelected)
+    }
+    if (typeof option === 'object') {
+      return <Txt>{JSON.stringify(option)}</Txt>
+    }
+    return <Txt>{String(option)}</Txt>
+  }
+
+  const getKey = (option: SelectOption<T>): string => {
+    if (getOptionKey) {
+      const key = getOptionKey(option)
+      return typeof key === 'object' ? JSON.stringify(key) : String(key)
+    }
+    return typeof option === 'object' ? JSON.stringify(option) : String(option)
+  }
+
+  const handleOptionPress = (option: SelectOption<T>) => {
+    onChange(option)
+    onBlur()
+    // setIsOpen(false)
+  }
+
+  const iconColor = useIconColor()
+  const placeholderColor = usePlaceholderColor()
+  const menuBg = useBackgroundColor(100)
+  const selectedOptionBg = useBackgroundColor(50)
+  const borderColor = useBorderColor()
+  return (
+    <View style={styles.wrapper}>
+      <View ref={buttonRef} onLayout={handleButtonLayout} style={styles.container}>
+        <TouchableOpacity
+          style={[styles.button]}
+          onPress={() => {
+            if (active) {
+              onBlur()
+            } else {
+              onFocus()
+            }
+          }}>
+          <View style={styles.buttonTextContainer}>
+            {selected ? (
+              renderOptionText(selected, true)
+            ) : (
+              <Text style={[styles.placeholder, { color: placeholderColor }]}>{placeholder}</Text>
+            )}
+          </View>
+          <Ionicons
+            name={active ? 'chevron-up' : 'chevron-down'}
+            size={20}
+            color={iconColor}
+            style={styles.icon}
+          />
+          {optional && value ? (
+            <InputClearButton onPress={() => onChange(null)} isActive={!!value} />
+          ) : null}
+        </TouchableOpacity>
+      </View>
+      <Modal visible={active} transparent animationType="fade" onRequestClose={() => onBlur()}>
+        <TouchableOpacity style={styles.modalOverlay} activeOpacity={1} onPress={() => onBlur()}>
+          <View
+            style={[
+              styles.dropdownContainer,
+              {
+                position: 'absolute',
+                top: buttonLayout.y + buttonLayout.height + 4,
+                left: buttonLayout.x,
+                width: buttonLayout.width,
+                backgroundColor: menuBg,
+                borderColor,
+              },
+            ]}>
+            <ScrollView style={styles.dropdown}>
+              {options.map((option: SelectOption<T>) => {
+                const key = getKey(option)
+                const isSelected = option === selected
+                return (
+                  <TouchableOpacity
+                    key={key}
+                    style={[
+                      styles.option,
+                      { borderColor },
+                      isSelected && { backgroundColor: selectedOptionBg },
+                    ]}
+                    onPress={() => handleOptionPress(option)}>
+                    <View>{renderOptionText(option, isSelected)}</View>
+                  </TouchableOpacity>
+                )
+              })}
+            </ScrollView>
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </View>
+  )
+}
+
+export const SelectComponent = forwardRef(BaseSelectComponent)
+
+const styles = StyleSheet.create({
+  wrapper: {
+    width: '100%',
+  },
+  container: {
+    width: '100%',
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    height: 40,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: 'transparent',
+    borderRadius: 4,
+  },
+  buttonTextContainer: {
+    flex: 1,
+  },
+  buttonText: {
+    fontSize: 16,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  dropdownContainer: {
+    backgroundColor: 'white',
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 4,
+    maxHeight: 200,
+    elevation: 3,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    padding: 0,
+  },
+  dropdown: {
+    maxHeight: 200,
+  },
+  option: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderBottomWidth: 1,
+  },
+  optionText: {
+    fontSize: 16,
+  },
+  placeholder: {
+    color: '#666',
+  },
+  icon: {
+    marginRight: 10,
+  },
+})

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

@@ -0,0 +1,234 @@
+import { getHandle, InputRef, SocialMediaSites } from '@chem-po/core'
+import { SocialMediaField } from '@chem-po/react'
+import {
+  FC,
+  ForwardedRef,
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react'
+import { Modal, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
+import { FieldProps } from '../../types'
+const siteToIcon: Record<SocialMediaSites, string> = {
+  facebook: 'facebook',
+  instagram: 'instagram',
+  twitter: 'twitter',
+  youtube: 'youtube',
+  soundcloud: 'soundcloud',
+}
+
+const SocialMediaSiteInput: FC<{
+  site: SocialMediaSites
+  value?: string
+  onChange: (v?: string) => void
+  isModalVisible: boolean
+  onModalClose: () => void
+}> = ({ site, value, onChange, isModalVisible, onModalClose }) => {
+  const { handle, error } = useMemo(() => {
+    try {
+      const h = getHandle(site, value)
+      return { handle: h }
+    } catch (e: any) {
+      return { error: e?.message ?? 'Error parsing handle' }
+    }
+  }, [value, site])
+
+  const displayedText = useMemo(
+    () => (handle ? `${site.toUpperCase()}: ${handle}` : site.toUpperCase()),
+    [site, handle],
+  )
+
+  return (
+    <>
+      <TouchableOpacity
+        style={[styles.iconButton, !handle && styles.iconButtonInactive]}
+        onPress={() => onModalClose()}>
+        <Text style={styles.iconText}>{siteToIcon[site]}</Text>
+      </TouchableOpacity>
+
+      <Modal
+        visible={isModalVisible}
+        transparent={true}
+        animationType="slide"
+        onRequestClose={onModalClose}>
+        <View style={styles.modalContainer}>
+          <View style={styles.modalContent}>
+            <Text style={styles.modalTitle}>{displayedText}</Text>
+            {error && <Text style={styles.errorText}>{error}</Text>}
+            <TextInput
+              style={styles.modalInput}
+              onChangeText={onChange}
+              placeholder="Handle or URL"
+              value={value}
+              autoCapitalize="none"
+              autoCorrect={false}
+            />
+            <TouchableOpacity style={styles.closeButton} onPress={onModalClose}>
+              <Text style={styles.closeButtonText}>Close</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </Modal>
+    </>
+  )
+}
+
+export const SocialMediaComponent = forwardRef<InputRef, FieldProps<SocialMediaField>>(
+  (props: FieldProps<SocialMediaField>, ref: ForwardedRef<InputRef>) => {
+    const {
+      input: { value, onChange },
+      field: { sites },
+    } = props
+
+    const [selectedSite, setSelectedSite] = useState<SocialMediaSites | null>(null)
+
+    const handleChange = useCallback(
+      (site: SocialMediaSites, v?: string) => {
+        const { [site]: _curr, ...rest } = value ?? {}
+        if (!v && Object.keys(rest).length === 0) {
+          onChange({ target: { value: undefined } })
+        }
+        if (!v) onChange(rest)
+        onChange({ ...rest, [site]: v })
+      },
+      [onChange, value],
+    )
+
+    useImperativeHandle(ref, () => ({
+      blur: () => {},
+      focus: () => {},
+    }))
+
+    return (
+      <View style={styles.container}>
+        <Text style={styles.title}>Links</Text>
+        <View style={styles.iconsContainer}>
+          {(!sites || sites.facebook) && (
+            <SocialMediaSiteInput
+              onChange={v => handleChange('facebook', v)}
+              site="facebook"
+              value={value?.facebook}
+              isModalVisible={selectedSite === 'facebook'}
+              onModalClose={() => setSelectedSite(null)}
+            />
+          )}
+          {(!sites || sites.instagram) && (
+            <SocialMediaSiteInput
+              onChange={v => handleChange('instagram', v)}
+              site="instagram"
+              value={value?.instagram}
+              isModalVisible={selectedSite === 'instagram'}
+              onModalClose={() => setSelectedSite(null)}
+            />
+          )}
+          {(!sites || sites.twitter) && (
+            <SocialMediaSiteInput
+              onChange={v => handleChange('twitter', v)}
+              site="twitter"
+              value={value?.twitter}
+              isModalVisible={selectedSite === 'twitter'}
+              onModalClose={() => setSelectedSite(null)}
+            />
+          )}
+          {(!sites || sites.youtube) && (
+            <SocialMediaSiteInput
+              onChange={v => handleChange('youtube', v)}
+              site="youtube"
+              value={value?.youtube}
+              isModalVisible={selectedSite === 'youtube'}
+              onModalClose={() => setSelectedSite(null)}
+            />
+          )}
+          {(!sites || sites.soundcloud) && (
+            <SocialMediaSiteInput
+              onChange={v => handleChange('soundcloud', v)}
+              site="soundcloud"
+              value={value?.soundcloud}
+              isModalVisible={selectedSite === 'soundcloud'}
+              onModalClose={() => setSelectedSite(null)}
+            />
+          )}
+        </View>
+      </View>
+    )
+  },
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 8,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginBottom: 8,
+    color: '#1A202C',
+  },
+  iconsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  iconButton: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    backgroundColor: '#EDF2F7',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconButtonInactive: {
+    opacity: 0.6,
+  },
+  iconText: {
+    fontSize: 12,
+    color: '#1A202C',
+  },
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContent: {
+    backgroundColor: 'white',
+    borderRadius: 8,
+    padding: 16,
+    width: '80%',
+    maxWidth: 300,
+  },
+  modalTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginBottom: 8,
+    color: '#1A202C',
+  },
+  errorText: {
+    color: '#E53E3E',
+    fontSize: 14,
+    marginBottom: 8,
+    padding: 4,
+    backgroundColor: '#FFF5F5',
+  },
+  modalInput: {
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 4,
+    padding: 8,
+    marginBottom: 16,
+    fontSize: 16,
+  },
+  closeButton: {
+    backgroundColor: '#EDF2F7',
+    padding: 8,
+    borderRadius: 4,
+    alignItems: 'center',
+  },
+  closeButtonText: {
+    color: '#1A202C',
+    fontSize: 16,
+  },
+})

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

@@ -0,0 +1,89 @@
+import { InputRef } from '@chem-po/core'
+import { TextField, usePlaceholderColor, useTextColor } from '@chem-po/react'
+import { Ionicons } from '@expo/vector-icons'
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import { StyleSheet, TextInput, TouchableOpacity, View } from 'react-native'
+import { FieldProps } from '../../types'
+import { TextAreaComponent } from './textarea'
+
+export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
+  ({ input, inEditable, meta, field }, ref) => {
+    const { placeholder, type } = field
+    const [isHidden, setIsHidden] = useState(type === 'password')
+    const { value, onChange, ...inputProps } = input
+    const inputRef = useRef<TextInput>(null)
+
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        inputRef.current?.focus()
+      },
+      blur: () => {
+        inputRef.current?.blur()
+      },
+    }))
+
+    const placeholderColor = usePlaceholderColor()
+    const color = useTextColor()
+    const body =
+      type === 'textarea' ? (
+        <TextAreaComponent inEditable={inEditable} field={field} input={input} meta={meta} />
+      ) : (
+        <TextInput
+          ref={inputRef}
+          style={[
+            styles.input,
+            inEditable && styles.inEditable,
+            type === 'password' && styles.passwordInput,
+            { color },
+          ]}
+          secureTextEntry={isHidden}
+          placeholderTextColor={placeholderColor}
+          placeholder={placeholder}
+          value={value ?? ''}
+          onChangeText={onChange}
+          {...inputProps}
+        />
+      )
+
+    return type === 'password' ? (
+      <View style={styles.passwordContainer}>
+        {body}
+        <TouchableOpacity style={styles.eyeIcon} onPress={() => setIsHidden(!isHidden)}>
+          <Ionicons name={isHidden ? 'eye' : 'eye-off'} size={20} color="#666" />
+        </TouchableOpacity>
+      </View>
+    ) : (
+      body
+    )
+  },
+)
+
+TextComponent.displayName = 'TextComponent'
+
+const styles = StyleSheet.create({
+  input: {
+    width: '100%',
+    height: 40,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  inEditable: {
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    height: 'auto',
+  },
+  passwordInput: {
+    paddingRight: 40,
+  },
+  passwordContainer: {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  eyeIcon: {
+    position: 'absolute',
+    right: 12,
+    padding: 4,
+  },
+})

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

@@ -0,0 +1,56 @@
+import { InputRef } from '@chem-po/core'
+import { TextField, usePlaceholderColor, useTextColor } from '@chem-po/react'
+import { forwardRef, useImperativeHandle, useRef } from 'react'
+import { StyleSheet, TextInput } from 'react-native'
+import { FieldProps } from '../../types'
+
+export const TextAreaComponent = forwardRef<InputRef, FieldProps<TextField>>(
+  ({ input, field, inEditable }, ref) => {
+    const inputRef = useRef<TextInput>(null)
+    const { value, onChange, ...inputProps } = input
+
+    useImperativeHandle(ref, () => ({
+      focus: () => {
+        inputRef.current?.focus()
+      },
+      blur: () => {
+        inputRef.current?.blur()
+      },
+    }))
+
+    const placeholderColor = usePlaceholderColor()
+    const color = useTextColor()
+
+    return (
+      <TextInput
+        ref={inputRef}
+        style={[styles.textarea, inEditable && styles.inEditable, { color }]}
+        placeholder={field.placeholder}
+        placeholderTextColor={placeholderColor}
+        multiline
+        maxLength={200}
+        textAlignVertical="top"
+        value={value ?? ''}
+        onChangeText={onChange}
+        {...inputProps}
+      />
+    )
+  },
+)
+
+TextAreaComponent.displayName = 'TextAreaComponent'
+
+const styles = StyleSheet.create({
+  textarea: {
+    width: '100%',
+    minHeight: 80,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: 'transparent',
+    textAlignVertical: 'top',
+  },
+  inEditable: {
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+  },
+})