@codeleap/mobile 3.25.0 → 3.25.2

package/src/components/TextInput/index.tsx

@@ -1,19 +1,50 @@
-import React, { useState } from 'react'
-import { TypeGuards, useValidate, useBooleanToggle } from '@codeleap/common'
+import * as React from 'react'
+import {
+  ComponentVariants,
+  FormTypes,
+  PropsOf,
+  TypeGuards,
+  useDefaultComponentStyle,
+  useValidate,
+  yup,
+  useState,
+  useBooleanToggle,
+  IconPlaceholder,
+} from '@codeleap/common'
 import { forwardRef, useImperativeHandle } from 'react'
-import { TextInput as NativeTextInput, NativeSyntheticEvent, TextInputFocusEventData } from 'react-native'
-import { InputBase, selectInputBaseProps } from '../InputBase'
+import { ComponentWithDefaultProps, StylesOf } from '../../types'
+import { StyleSheet, TextInput as NativeTextInput, TextInputProps as NativeTextInputProps, NativeSyntheticEvent, TextInputFocusEventData } from 'react-native'
+import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
+import { TextInputComposition, TextInputPresets } from './styles'
 import { Touchable } from '../Touchable'
-import { MaskedTextInput } from '../../modules/textInputMask'
-import { AnyRecord, AppIcon, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
-import { TextInputProps } from './types'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
+import { MaskedTextInput, TextInputMaskProps } from '../../modules/textInputMask'
 
 export * from './styles'
-export * from './types'
 
-export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inputRef) => {
+export type TextInputProps =
+  Omit<InputBaseProps, 'styles' | 'variants'> &
+  NativeTextInputProps &
+  {
+    styles?: StylesOf<TextInputComposition>
+    password?: boolean
+    validate?: FormTypes.ValidatorFunctionWithoutForm | yup.SchemaOf<string>
+    debugName: string
+    visibilityToggle?: boolean
+    masking?: FormTypes.TextField['masking']
+    variants?: ComponentVariants<typeof TextInputPresets>['variants']
+    onChangeMask?: TextInputMaskProps['onChangeText']
+    visibleIcon?: IconPlaceholder
+    hiddenIcon?: IconPlaceholder
+    _error?: string
+  } & Pick<PropsOf<typeof Touchable>, 'onPress'>
+
+const defaultProps: Partial<TextInputProps> = {
+  hiddenIcon: 'input-visiblity:hidden' as IconPlaceholder,
+  visibleIcon: 'input-visiblity:visible' as IconPlaceholder,
+}
+
+const TextInputComponent = forwardRef<NativeTextInput, TextInputProps>((props, inputRef) => {
+
   const innerInputRef = React.useRef<NativeTextInput>(null)
 
   const [isFocused, setIsFocused] = useState(false)
@@ -27,17 +58,18 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
   })
 
   const {
+    variants,
+    styles,
     value,
     validate,
     debugName,
-    visibilityToggle,
+    visibilityToggle = false,
     masking,
     password,
     onChangeMask,
     onPress,
     visibleIcon,
     hiddenIcon,
-    style,
     _error = null,
     ...textInputProps
   } = others
@@ -48,7 +80,11 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
 
   const InputElement = isMasked ? MaskedTextInput : NativeTextInput
 
-  const styles = useStylesFor(TextInput.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:TextInput', typeof TextInputPresets>('u:TextInput', {
+    variants,
+    styles,
+    transform: StyleSheet.flatten,
+  })
 
   // @ts-expect-error - React's ref type system is weird
   useImperativeHandle(inputRef, () => {
@@ -78,6 +114,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
   }, [validation.onInputFocused, props.onFocus])
 
   const handleMaskChange = (masked, unmasked) => {
+
     if (textInputProps.onChangeText) textInputProps.onChangeText(masking?.saveFormatted ? masked : masked)
     if (onChangeMask) onChangeMask(masked, unmasked)
   }
@@ -86,24 +123,22 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
   const isDisabled = !!inputBaseProps.disabled
 
   const placeholderTextColor = [
-    [isDisabled, styles['placeholder:disabled']],
-    [!validation.isValid, styles['placeholder:error']],
-    [isFocused, styles['placeholder:focus']],
-    [true, styles?.placeholder],
-    // @ts-expect-error
+    [isDisabled, variantStyles['placeholder:disabled']],
+    [!validation.isValid, variantStyles['placeholder:error']],
+    [isFocused, variantStyles['placeholder:focus']],
+    [true, variantStyles.placeholder],
   ].find(([x]) => x)?.[1]?.color
 
   const selectionColor = [
-    [isDisabled, styles['selection:disabled']],
-    [!validation.isValid, styles['selection:error']],
-    [isFocused, styles['selection:focus']],
-    [true, styles?.selection],
-    // @ts-expect-error
+    [isDisabled, variantStyles['selection:disabled']],
+    [!validation.isValid, variantStyles['selection:error']],
+    [isFocused, variantStyles['selection:focus']],
+    [true, variantStyles.selection],
   ].find(([x]) => x)?.[1]?.color
 
   const visibilityToggleProps = visibilityToggle ? {
     onPress: toggleSecureTextEntry,
-    icon: (secureTextEntry ? hiddenIcon : visibleIcon) as AppIcon,
+    icon: (secureTextEntry ? hiddenIcon : visibleIcon) as IconPlaceholder,
     debugName: `${debugName} toggle visibility`,
   } : null
 
@@ -112,32 +147,35 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
   const maskingExtraProps = isMasked ? {
     onChangeText: handleMaskChange,
     ref: null,
+
     refInput: (inputRef) => {
+      // console.log(inputRef)
       if (!!inputRef) {
         innerInputRef.current = inputRef
+
       }
     },
     ...masking,
   } : {}
 
   const buttonModeProps = isPressable ? {
+    // pointerEvents: 'none',
     editable: false,
     caretHidden: true,
   } : {}
 
   const hasMultipleLines = isMultiline && value?.includes('\n')
-
   return <InputBase
     {...inputBaseProps}
     innerWrapper={isPressable ? Touchable : undefined}
     debugName={debugName}
     error={(validation.isValid && !_error) ? null : _error || validation.message}
-    style={{
-      ...styles,
+    styles={{
+      ...variantStyles,
       innerWrapper: [
-        styles?.innerWrapper,
-        isMultiline && styles['innerWrapper:multiline'],
-        hasMultipleLines && styles['innerWrapper:hasMultipleLines'],
+        variantStyles.innerWrapper,
+        isMultiline && variantStyles['innerWrapper:multiline'],
+        hasMultipleLines && variantStyles['innerWrapper:hasMultipleLines'],
       ],
     }}
     innerWrapperProps={{
@@ -150,6 +188,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
     focused={isFocused}
   >
     <InputElement
+
       allowFontScaling={false}
       editable={!isPressable && !isDisabled}
       {...buttonModeProps}
@@ -162,32 +201,106 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
       onBlur={handleBlur}
       onFocus={handleFocus}
       style={[
-        styles?.input,
-        isMultiline && styles['input:multiline'],
-        isFocused && styles['input:focused'],
-        !validation.isValid && styles['input:error'],
-        isDisabled && styles['input:disabled'],
-        hasMultipleLines && styles['input:hasMultipleLines'],
+        variantStyles.input,
+        isMultiline && variantStyles['input:multiline'],
+        isFocused && variantStyles['input:focused'],
+        !validation.isValid && variantStyles['input:error'],
+        isDisabled && variantStyles['input:disabled'],
+        hasMultipleLines && variantStyles['input:hasMultipleLines'],
       ]}
       ref={innerInputRef}
       pointerEvents={isPressable ? 'none' : undefined}
       {...maskingExtraProps}
     />
   </InputBase>
-}) as StyledComponentWithProps<TextInputProps>
+})
 
-TextInput.styleRegistryName = 'TextInput'
-TextInput.elements = [...InputBase.elements, 'input', 'placeholder', 'selection']
-TextInput.rootElement = 'wrapper'
+export type SearchInputProps = {
+  onTypingChange: (isTyping: boolean) => void
+  onSearchChange: (search: string) => void
+  onValueChange?: (search: string) => void
+  onClear?: () => void
+  debugName: string
+  debounce?: number
+  clearIcon?: IconPlaceholder
+  searchIcon?: IconPlaceholder
+  placeholder: string
+} & Partial<TextInputProps>
+
+export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props) => {
+  const {
+    debugName,
+    onClear,
+    onSearchChange,
+    onTypingChange,
+    clearIcon,
+    searchIcon,
+    debounce,
+    placeholder,
+    value,
+    onValueChange,
+    ...others
+  } = {
+    ...SearchInput.defaultProps,
+    ...props,
+  }
 
-TextInput.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return TextInput as (props: StyledComponentProps<TextInputProps, typeof styles>) => IJSX
+  const [search, setSearch] = !TypeGuards.isNil(value) && !!onValueChange ? [value, onValueChange] : useState('')
+
+  const setSearchTimeout = React.useRef<NodeJS.Timeout | null>(null)
+
+  const handleChangeSearch = (value: string) => {
+    setSearch(value)
+
+    if (TypeGuards.isNil(debounce)) {
+      onSearchChange?.(value)
+    } else {
+      if (setSearchTimeout.current) {
+        clearTimeout(setSearchTimeout.current)
+      }
+
+      setSearchTimeout.current = setTimeout(() => {
+
+        onSearchChange(value)
+        onTypingChange?.(false)
+      }, debounce ?? 0)
+    }
+
+  }
+
+  const handleClear = () => {
+    setSearch('')
+    onSearchChange?.('')
+    onClear?.()
+  }
+
+  return (
+    <TextInput
+      value={search}
+      onChangeText={(value) => {
+        onTypingChange?.(true)
+        handleChangeSearch(value)
+      }}
+      placeholder={placeholder}
+      debugName={`Search ${debugName}`}
+      rightIcon={!!search.trim() && {
+        name: clearIcon,
+        onPress: handleClear,
+      }}
+      leftIcon={{
+        name: searchIcon,
+      }}
+      {...others}
+    />
+  )
 }
 
-TextInput.defaultProps = {
-  hiddenIcon: 'input-visiblity:hidden' as AppIcon,
-  visibleIcon: 'input-visiblity:visible' as AppIcon,
-  visibilityToggle: false,
-} as Partial<TextInputProps>
+export const TextInput = TextInputComponent as ComponentWithDefaultProps<TextInputProps>
+
+TextInput.defaultProps = defaultProps
 
-MobileStyleRegistry.registerComponent(TextInput)
+SearchInput.defaultProps = {
+  debounce: null,
+  clearIcon: 'x' as IconPlaceholder,
+  searchIcon: 'search' as IconPlaceholder,
+}

package/src/components/TextInput/styles.ts

@@ -1,7 +1,13 @@
-import { InputBaseStates, InputBaseParts } from '../InputBase'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { InputBaseComposition, InputBaseStates, InputBaseParts } from '../InputBase'
 
-type TextInputParts =  InputBaseParts | 'input'  | 'placeholder' | 'selection'
 
+type TextInputParts =  InputBaseParts | 'input'  | 'placeholder' | 'selection'
 export type TextInputStates = InputBaseStates | 'multiline' | 'hasMultipleLines' | 'pressable'
 
 export type TextInputComposition =  `${TextInputParts}:${TextInputStates}` | TextInputParts
+
+const createTextInputStyle =
+  createDefaultVariantFactory<TextInputComposition>()
+
+export const TextInputPresets = includePresets((styles) => createTextInputStyle(() => ({ wrapper: styles })))

package/src/components/Touchable/index.tsx

@@ -1,20 +1,65 @@
-import React, { forwardRef } from 'react'
-import { TypeGuards, onMount, useGlobalContext } from '@codeleap/common'
-import { Pressable, StyleSheet, View as RNView, Insets, Platform } from 'react-native'
+import * as React from 'react'
+import { forwardRef } from 'react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+
+  useCodeleapContext,
+  AnyFunction,
+  TypeGuards,
+  onMount,
+} from '@codeleap/common'
+import { Pressable, StyleSheet, View as RNView, Insets, Platform, PressableProps, ViewStyle, StyleProp } from 'react-native'
+import { TouchableComposition, TouchablePresets } from './styles'
+import { StylesOf } from '../../types'
 import { View } from '../View'
-import { TouchableFeedbackConfig, usePressableFeedback } from '../../utils'
+import { usePressableFeedback } from '../../utils'
 import { Keyboard } from 'react-native'
+
 import { PressableRipple } from '../../modules/PressableRipple'
-import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
-import { TouchableProps } from './types'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
+export type TouchableProps =
+  Omit<
+    PressableProps,
+    'onPress' | 'children' | 'style'
+  > & {
+    variants?: ComponentVariants<typeof TouchablePresets>['variants']
+    component?: any
+    ref?: React.Ref<RNView>
+    debugName: string
+    activeOpacity?: number
+    debugComponent?: string
+    onPress?: AnyFunction
+    noFeedback?: boolean
+    debounce?: number
+    leadingDebounce?: boolean
+    styles?: StylesOf<TouchableComposition>
+    setPressed?: (param: boolean) => void
+    rippleDisabled?: boolean
+    children?: React.ReactNode
+    style?: StyleProp<ViewStyle>
+    analyticsEnabled?: boolean
+    analyticsName?: string
+    analyticsData?: Record<string, any>
+    dismissKeyboard?: boolean
+  }
 
 export * from './styles'
-export * from './types'
-
-export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref) => {
+const defaultProps: Partial<TouchableProps> = {
+  variants: [],
+  debounce: 500,
+  noFeedback: false,
+  rippleDisabled: false,
+  analyticsEnabled: false,
+  analyticsName: null,
+  analyticsData: {},
+  dismissKeyboard: true,
+}
+const _Touchable = forwardRef<
+  RNView,
+  TouchableProps
+>((touchableProps, ref) => {
   const {
+    variants = [],
     children,
     onPress,
     style,
@@ -23,6 +68,7 @@ export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref
     debounce,
     leadingDebounce,
     noFeedback,
+    styles,
     setPressed,
     rippleDisabled,
     analyticsEnabled,
@@ -31,7 +77,7 @@ export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref
     dismissKeyboard,
     ...props
   } = {
-    ...Touchable.defaultProps,
+    ...defaultProps,
     ...touchableProps,
   }
 
@@ -45,17 +91,26 @@ export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref
     }
   })
 
-  const styles = useStylesFor(Touchable.styleRegistryName, style)
+  const variantStyles = useDefaultComponentStyle<'u:Touchable', typeof TouchablePresets>('u:Touchable', {
+    variants,
+    transform: StyleSheet.flatten,
+    rootElement: 'wrapper',
+    styles,
+  })
 
-  const { logger } = useGlobalContext()
+  const { logger } = useCodeleapContext()
 
   const press = () => {
-    if (!onPress) return
-
+    if (!onPress) {
+      logger.warn('No onPress passed to touchable', {
+        touchableProps,
+      }, 'User Interaction')
+      return
+    }
     const _onPress = () => {
       logger.log(
         `<${debugComponent || 'Touchable'}/>  pressed`,
-        debugName,
+        debugName || variants,
         'User interaction',
       )
       if (dismissKeyboard) {
@@ -68,9 +123,8 @@ export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref
         }
       }
 
-      onPress()
+      onPress && onPress()
     }
-    
     if (TypeGuards.isNumber(debounce)) {
       if (pressed.current) {
         return
@@ -85,9 +139,10 @@ export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref
     } else {
       _onPress()
     }
+
   }
 
-  const _styles = StyleSheet.flatten([styles?.wrapper, props?.disabled && styles?.['wrapper:disabled']])
+  const _styles = StyleSheet.flatten([variantStyles.wrapper, props?.disabled && variantStyles['wrapper:disabled'], style])
 
   const disableFeedback = !onPress || noFeedback
 
@@ -95,7 +150,7 @@ export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref
     hightlightPropertyIn: 'backgroundColor',
     hightlightPropertyOut: 'backgroundColor',
     disabled: disableFeedback,
-    feedbackConfig: styles?.feedback as TouchableFeedbackConfig,
+    feedbackConfig: variantStyles?.feedback,
   })
 
   const Wrapper = View
@@ -110,6 +165,7 @@ export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref
       'bottom!',
       'position!',
       'transform!',
+      // 'flex!',
     ]
 
     const radiusKey = [
@@ -137,7 +193,6 @@ export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref
         return key.startsWith(k)
       }
     }
-
     Object.entries(_styles).forEach(([key, value]) => {
       if (radiusKey.some(k => match(k, key))) {
         wrapperStyle[key] = value
@@ -156,12 +211,10 @@ export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref
         pressableStyle[key] = value
       }
     })
-
     if (wrapperStyle.position === 'absolute') {
       pressableStyle.width = '100%'
       pressableStyle.height = '100%'
     }
-
     wrapperStyle.overflow = 'visible'
 
     return {
@@ -181,12 +234,15 @@ export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref
   const disableRipple = disableFeedback || rippleDisabled || Platform.OS !== 'android'
 
   return (
-    <Wrapper style={wrapperStyle} hitSlop={hitSlop}>
+    <Wrapper style={[wrapperStyle]} hitSlop={hitSlop}>
       {!disableRipple ? (
         <PressableRipple
           onPress={press}
+          style={[
+            pressableStyle,
+            variantStyles.pressable,
+          ]}
           {...props}
-          style={[pressableStyle, styles?.pressable]}
           rippleFades={false}
           rippleDuration={350}
           rippleOpacity={0.1}
@@ -203,7 +259,7 @@ export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref
           style={({ pressed }) => ([
             pressableStyle,
             getFeedbackStyle(pressed),
-            styles?.pressable,
+            variantStyles.pressable,
           ])}
           {...props}
           ref={ref}
@@ -213,23 +269,10 @@ export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref
       )}
     </Wrapper>
   )
-}) as StyledComponentWithProps<TouchableProps>
-
-Touchable.styleRegistryName = 'Touchable'
-Touchable.elements = ['wrapper', 'feedback', 'pressable']
-Touchable.rootElement = 'wrapper'
+})
 
-Touchable.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Touchable as (props: StyledComponentProps<TouchableProps, typeof styles>) => IJSX
+export const Touchable = _Touchable as ((props: TouchableProps) => JSX.Element) & {
+  defaultProps: Partial<TouchableProps>
 }
 
-Touchable.defaultProps = {
-  debounce: 500,
-  noFeedback: false,
-  rippleDisabled: false,
-  analyticsEnabled: false,
-  analyticsName: null,
-  dismissKeyboard: true,
-} as Partial<TouchableProps>
-
-MobileStyleRegistry.registerComponent(Touchable)
+Touchable.defaultProps = defaultProps

package/src/components/Touchable/styles.ts

@@ -1,3 +1,4 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { StylesOf } from '../../types'
 import { TouchableFeedbackConfig } from '../../utils'
 
@@ -6,3 +7,11 @@ export type TouchableComposition = 'wrapper' | 'wrapper:disabled' | 'feedback' |
 export type TouchableStylesGen<TCSS = any> = StylesOf<Exclude<TouchableComposition, 'feedback'>> & {
   feedback?: TouchableFeedbackConfig
 }
+
+const createTouchableStyle = createDefaultVariantFactory<
+  TouchableComposition,
+  TouchableStylesGen
+>()
+
+export const TouchablePresets = includePresets((styles) => createTouchableStyle(() => ({ wrapper: styles, pressable: styles })))
+