@chem-po/react-native 0.0.51 → 0.0.53

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

@@ -1,152 +0,0 @@
-import { InputRef, RenderSelectOptionProps } from '@chem-po/core'
-import {
-  SelectField,
-  useBackgroundColor,
-  useColorMode,
-  useIconColor,
-  usePlaceholderColor,
-} from '@chem-po/react'
-import { Ionicons } from '@expo/vector-icons'
-import React, { ForwardedRef, forwardRef, useImperativeHandle, useRef } from 'react'
-import { StyleSheet, View } from 'react-native'
-import { Dropdown, IDropdownRef } from 'react-native-element-dropdown'
-import { Txt } from '../../../text/Txt'
-import { FieldProps } from '../../types'
-import { InputClearButton } from '../common/InputClearButton'
-import { useInputStyles } from '../hooks/useInputStyles'
-
-const BaseSelectComponent = <T extends SelectField>(
-  { field, input, meta, formSize, inEditable }: FieldProps<T>,
-  ref: ForwardedRef<InputRef>,
-) => {
-  const {
-    placeholder,
-    options,
-    renderOption: RenderOption,
-    optional,
-    searchable,
-    searchPlaceholder,
-  } = field
-  const { onChange, value, onFocus, onBlur } = input
-  const { active } = meta
-  const colorMode = useColorMode()
-
-  const inputRef = useRef<IDropdownRef>(null)
-  const { container, iconSize, text, size, clearButtonSize, buttonContainer } = useInputStyles(
-    inEditable,
-    field.size,
-    formSize,
-  )
-
-  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}>{props.option.label}</Txt>
-  }
-
-  const iconColor = useIconColor()
-  const placeholderColor = usePlaceholderColor()
-  const menuBg = useBackgroundColor(100)
-  const selectedOptionBg = useBackgroundColor(50)
-
-  return (
-    <View style={styles.wrapper}>
-      <Dropdown
-        ref={inputRef}
-        style={container}
-        placeholderStyle={[text, { color: placeholderColor }]}
-        containerStyle={{
-          backgroundColor: menuBg,
-          borderWidth: 0,
-          borderColor: 'transparent',
-          boxShadow: `0 0 10px #00000066`,
-        }}
-        selectedTextStyle={text}
-        inputSearchStyle={[
-          styles.inputSearch,
-          text,
-          { backgroundColor: selectedOptionBg, borderColor: 'transparent' },
-        ]}
-        iconStyle={styles.iconStyle}
-        data={options}
-        search={searchable}
-        searchField={searchable ? 'label' : undefined}
-        maxHeight={300}
-        labelField="label"
-        valueField="value"
-        placeholder={placeholder}
-        searchPlaceholder={searchPlaceholder ?? placeholder}
-        value={value}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onChange={item => {
-          onChange(item.value)
-        }}
-        activeColor={selectedOptionBg}
-        // onFocus={onFocus}
-        // onBlur={onBlur}
-        renderItem={(item, selected) => (
-          <View style={{ backgroundColor: selected ? selectedOptionBg : menuBg }}>
-            <RenderOptionText
-              value={item.value}
-              option={item}
-              colorMode={colorMode}
-              isSelected={!!selected}
-              size={size}
-            />
-          </View>
-        )}
-        renderRightIcon={() => (
-          <View style={buttonContainer}>
-            <Ionicons
-              name={active ? 'chevron-up' : 'chevron-down'}
-              size={iconSize}
-              color={iconColor}
-            />
-            {optional && value ? (
-              <InputClearButton
-                size={clearButtonSize}
-                onPress={() => {
-                  onChange(null)
-                }}
-                isActive
-              />
-            ) : null}
-          </View>
-        )}
-      />
-    </View>
-  )
-}
-
-export const SelectComponent = forwardRef(BaseSelectComponent)
-
-const styles = StyleSheet.create({
-  wrapper: {
-    width: '100%',
-  },
-  defaultOption: {
-    padding: 10,
-  },
-  iconStyle: {
-    width: 20,
-    height: 20,
-  },
-  inputSearch: {
-    height: 40,
-    fontSize: 16,
-    outlineWidth: 0,
-  },
-})

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

@@ -1,235 +0,0 @@
-import { getHandle, InputRef, SocialMediaSites } from '@chem-po/core'
-import { SocialMediaField } from '@chem-po/react'
-import React, {
-  FC,
-  ForwardedRef,
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react'
-import { Modal, StyleSheet, Text, TextInput, View } from 'react-native'
-import { Pressable } from 'react-native-gesture-handler'
-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 (
-    <>
-      <Pressable
-        style={[styles.iconButton, !handle && styles.iconButtonInactive]}
-        onPress={() => onModalClose()}>
-        <Text style={styles.iconText}>{siteToIcon[site]}</Text>
-      </Pressable>
-
-      <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}
-            />
-            <Pressable style={styles.closeButton} onPress={onModalClose}>
-              <Text style={styles.closeButtonText}>Close</Text>
-            </Pressable>
-          </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/AutoResizeTextarea.tsx

@@ -1,41 +0,0 @@
-import { forwardRef } from 'react'
-import { StyleSheet, TextInput, TextInputProps } from 'react-native'
-
-import { useIconColor, useTextColor } from '@chem-po/react'
-
-import React from 'react'
-import { useWebAutoResize } from './useWebAutoResize'
-
-export const AutoResizeTextarea = forwardRef<TextInput, TextInputProps>(
-  ({ style, value, onChangeText, ...props }, ref) => {
-    const textColor = useTextColor()
-
-    const { handleChange, height } = useWebAutoResize(onChangeText, style)
-
-    const iconColor = useIconColor()
-
-    return (
-      <TextInput
-        ref={ref}
-        cursorColor={iconColor}
-        multiline
-        style={[styles.textarea, { color: textColor, height }, style]}
-        value={value}
-        onChangeText={handleChange}
-        {...props}
-      />
-    )
-  },
-)
-const styles = StyleSheet.create({
-  textarea: {
-    width: '100%',
-    backgroundColor: 'transparent',
-    textAlignVertical: 'top',
-    outlineWidth: 0,
-  },
-  inEditable: {
-    paddingHorizontal: 0,
-    paddingVertical: 0,
-  },
-})

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

@@ -1,99 +0,0 @@
-import { InputRef } from '@chem-po/core'
-import { TextField, usePlaceholderColor, useTextColor } from '@chem-po/react'
-import { Ionicons } from '@expo/vector-icons'
-import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import { StyleSheet, TextInput, View } from 'react-native'
-import { Pressable } from 'react-native-gesture-handler'
-import { FieldProps } from '../../types'
-import { useInputStyles } from '../hooks/useInputStyles'
-import { TextAreaComponent } from './textarea'
-
-export const TextComponent = forwardRef<InputRef, FieldProps<TextField>>(
-  ({ input, inEditable, meta, field, style, formSize, inputStyle }, ref) => {
-    const { placeholder, type } = field
-    const [isHidden, setIsHidden] = useState(type === 'password')
-    const { value, onChange, ...inputProps } = input
-    const inputRef = useRef<TextInput>(null)
-    const { container: conatinerStyles, text: inputStyles } = useInputStyles(
-      inEditable,
-      field.size,
-      formSize,
-    )
-
-    useImperativeHandle(ref, () => ({
-      focus: () => {
-        inputRef.current?.focus()
-      },
-      blur: () => {
-        inputRef.current?.clear()
-      },
-    }))
-
-    const placeholderColor = usePlaceholderColor()
-    const color = useTextColor()
-
-    if (type === 'textarea') {
-      return (
-        <TextAreaComponent
-          ref={inputRef}
-          formSize={formSize}
-          inputStyle={inputStyle}
-          inEditable={inEditable}
-          field={field}
-          style={style}
-          input={input}
-          meta={meta}
-        />
-      )
-    }
-
-    const body = (
-      <TextInput
-        ref={inputRef}
-        style={[inputStyles, { color }, inputStyle]}
-        secureTextEntry={isHidden}
-        selectTextOnFocus={inEditable}
-        placeholderTextColor={placeholderColor}
-        placeholder={placeholder}
-        value={value ?? ''}
-        onChangeText={onChange}
-        {...inputProps}
-      />
-    )
-
-    return type === 'password' ? (
-      <View style={[conatinerStyles, styles.passwordContainer, style]}>
-        {body}
-        <Pressable style={styles.eyeIcon} onPress={() => setIsHidden(!isHidden)}>
-          <Ionicons name={isHidden ? 'eye' : 'eye-off'} size={20} color="#666" />
-        </Pressable>
-      </View>
-    ) : (
-      <View style={[conatinerStyles, style]}>{body}</View>
-    )
-  },
-)
-
-TextComponent.displayName = 'TextComponent'
-
-const styles = StyleSheet.create({
-  // 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

@@ -1,32 +0,0 @@
-import { TextField, usePlaceholderColor, useTextColor } from '@chem-po/react'
-import React, { forwardRef } from 'react'
-import { TextInput, View } from 'react-native'
-import { FieldProps } from '../../types'
-import { useInputStyles } from '../hooks/useInputStyles'
-import { AutoResizeTextarea } from './AutoResizeTextarea'
-
-export const TextAreaComponent = forwardRef<TextInput, FieldProps<TextField>>(
-  ({ input, field, inEditable, formSize, inputStyle, style }, ref) => {
-    const { text, container } = useInputStyles(inEditable, field.size, formSize)
-    const { value, onChange, ...inputProps } = input
-    const placeholderColor = usePlaceholderColor()
-    const color = useTextColor()
-
-    return (
-      <View style={[container, style]}>
-        <AutoResizeTextarea
-          ref={ref}
-          style={[{ color, ...text, paddingBottom: inEditable ? 0 : 4 }, inputStyle]}
-          placeholder={field.placeholder}
-          placeholderTextColor={placeholderColor}
-          multiline
-          value={value ?? ''}
-          onChangeText={onChange}
-          {...inputProps}
-        />
-      </View>
-    )
-  },
-)
-
-TextAreaComponent.displayName = 'TextAreaComponent'

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

@@ -1,73 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { Platform, StyleProp, StyleSheet, TextStyle } from 'react-native'
-
-// creates a span element with the text and style and returns the height
-const getWebTextHeight = (text: string, spanRef: React.RefObject<HTMLSpanElement | null>) => {
-  if (!spanRef.current) return null
-  const span = spanRef.current
-  span.innerText = `${text}\n`
-  document.body.appendChild(span)
-  const height = span.offsetHeight
-  document.body.removeChild(span)
-  return height
-}
-
-const updateSpanStyle = (span: HTMLSpanElement, style: TextStyle | undefined) => {
-  span.style.whiteSpace = 'pre-wrap'
-  if (style?.fontFamily) {
-    span.style.fontFamily = style.fontFamily
-  }
-  if (style?.fontSize) {
-    span.style.fontSize = style.fontSize.toString() + 'px'
-  }
-  if (style?.fontWeight) {
-    span.style.fontWeight = style.fontWeight.toString()
-  }
-  if (style?.lineHeight) {
-    span.style.lineHeight = style.lineHeight.toString()
-  }
-  if (style?.letterSpacing) {
-    span.style.letterSpacing = style.letterSpacing.toString()
-  }
-  if (style?.textAlign) {
-    span.style.textAlign = style.textAlign
-  }
-}
-
-export const useWebAutoResize = (
-  onChangeText: ((e: string) => void) | undefined,
-  style: StyleProp<TextStyle> | undefined,
-) => {
-  const flattenedStyle = useMemo(() => StyleSheet.flatten(style), [style])
-  const fontSize = useMemo(() => flattenedStyle.fontSize ?? 16, [flattenedStyle.fontSize])
-  const [height, setHeight] = useState<number | 'auto'>(
-    Platform.OS === 'web' ? fontSize + 10 : 'auto',
-  )
-  const spanRef = useRef<HTMLSpanElement>(
-    Platform.OS === 'web' ? document.createElement('span') : null,
-  )
-
-  useEffect(() => {
-    if (Platform.OS === 'web' && spanRef.current) {
-      updateSpanStyle(spanRef.current, flattenedStyle)
-    }
-  }, [flattenedStyle])
-  const handleChange = useMemo(
-    () =>
-      Platform.OS === 'web'
-        ? (e: string) => {
-            if (spanRef.current) {
-              const height = getWebTextHeight(e, spanRef)
-              setHeight((height ?? fontSize) + 8)
-              if (onChangeText) onChangeText(e)
-            }
-          }
-        : onChangeText,
-    [onChangeText, fontSize],
-  )
-  return {
-    handleChange,
-    height,
-    setHeight,
-  }
-}