@codeleap/mobile 2.3.8 → 2.3.10

package/src/components/TextInput/index.tsx

@@ -0,0 +1,319 @@
+import * as React from 'react'
+import {
+  ComponentVariants,
+  FormTypes,
+  getNestedStylesByKey,
+  IconPlaceholder,
+
+  TypeGuards,
+
+  useBooleanToggle,
+  useDefaultComponentStyle,
+  useValidate,
+} from '@codeleap/common'
+import { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import { Text, TextProps } from '../Text'
+import { View, ViewProps } from '../View'
+import { StylesOf } from '../../types'
+import { NativeSyntheticEvent, StyleSheet, TextInput as NativeTextInput, TextInputChangeEventData } from 'react-native'
+import { Touchable, TouchableProps } from '../Touchable'
+import { MaskedTextInput, TextInputMaskProps } from '../../modules/textInputMask'
+import { InputLabel } from '../InputLabel'
+
+export * from './styles'
+
+import {
+  InputIconComposition,
+  TextInputComposition,
+  TextInputStyles,
+} from './styles'
+import { ActionIcon, ActionIconParts, ActionIconProps } from '../ActionIcon'
+
+type NativeProps = ComponentPropsWithoutRef<typeof NativeTextInput>
+
+type SubtitleProps = {
+  errorProps: TextProps
+  styles: Record<'wrapper'|'error'|'subtitle', any>
+}
+
+export type TextInputProps =
+  Partial<TextInputMaskProps> &
+  ComponentVariants<typeof TextInputStyles> &
+  Omit<NativeProps, 'value'> &
+  {
+    multiline?: boolean
+    onChangeText?: (text: string) => void
+    disabled?: boolean
+    edited?: boolean
+    type?: string
+    label?: React.ReactNode
+    debugName: string
+    leftIcon?: Partial<ActionIconProps>
+    rightIcon?: Partial<ActionIconProps>
+    styles?: StylesOf<TextInputComposition>
+    validate?: FormTypes.ValidatorFunctionWithoutForm | string
+    value?: string
+    password?: boolean
+    visibilityToggle?: boolean
+    touchableWrapper?: boolean
+    subtitle?: string | ((props: SubtitleProps) => React.ReactElement)
+    onPress?: () => void
+    masking?: FormTypes.TextField['masking']
+    innerWrapperProps?: ViewProps
+    wrapperProps?: TouchableProps
+    onChangeMask?: TextInputMaskProps['onChangeText']
+    required?:boolean
+  }
+
+export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops, inputRef) => {
+  const {
+    onChange,
+    value,
+    onChangeText,
+    disabled,
+    edited,
+    onFocus,
+    onBlur,
+    variants,
+    label,
+    wrapperProps,
+    leftIcon,
+    rightIcon,
+    styles,
+    validate,
+    password,
+    visibilityToggle,
+    innerWrapperProps,
+    masking,
+    subtitle = '',
+    onChangeMask,
+    debugName,
+    required = false,
+    ...props
+  } = rawprops
+
+  const [isFocused, setFocus] = useState(false)
+  const [editedState, setEdited] = useState(edited)
+
+  const input = useRef<any>(null)
+  const maskInputRef = useRef<any>(null)
+  const [textIsVisible, setTextVisible] = useBooleanToggle(false)
+  const variantStyles = useDefaultComponentStyle<'u:TextInput', typeof TextInputStyles>('u:TextInput', {
+    variants,
+    styles,
+    transform: StyleSheet.flatten,
+  })
+  const InputElement = masking ? MaskedTextInput : NativeTextInput
+
+  const handleBlur: TextInputProps['onBlur'] = (e) => {
+    if (!editedState && value) setEdited(true)
+    setFocus(false)
+
+    if (onBlur) {
+      onBlur(e)
+    }
+  }
+
+  const handleFocus: TextInputProps['onFocus'] = (e) => {
+    setFocus(true)
+    if (onFocus) {
+      onFocus(e)
+    }
+  }
+  const handleMaskChange = (masked, unmasked) => {
+
+    if (onChangeText) onChangeText(masking?.saveFormatted ? masked : masked)
+    if (onChangeMask) onChangeMask(masked, unmasked)
+  }
+  const handleChange = (event: NativeSyntheticEvent<TextInputChangeEventData>) => {
+    const text = event.nativeEvent.text
+
+    if (onChange) onChange(event)
+    if (onChangeText) onChangeText(text)
+  }
+
+  useImperativeHandle(inputRef, () => {
+    return {
+      ...input.current,
+      focus: () => {
+        input.current?.focus?.()
+      },
+      isTextInput: true,
+    }
+
+  }, [!!masking, !!input?.current?.focus])
+
+  const { showError, error } = useValidate(value, validate)
+
+  const commonIconStyles = getNestedStylesByKey('icon', variantStyles)
+
+  const leftIconStyles = getNestedStylesByKey('leftIcon', variantStyles)
+
+  const rightIconStyles = getNestedStylesByKey('rightIcon', variantStyles)
+
+  function getStyles(key: TextInputComposition) {
+    const requestedStyles = [
+      variantStyles[key],
+      isFocused ? variantStyles[key + ':focus'] : {},
+      showError ? variantStyles[key + ':error'] : {},
+    ]
+    return StyleSheet.flatten(requestedStyles)
+  }
+
+  function handlePress() {
+    if (props.onPress) {
+      props.onPress()
+    } else {
+      input.current?.focus?.()
+    }
+  }
+
+  const visibilityToggleProps = visibilityToggle ? {
+    onPress: () => setTextVisible(),
+    icon: (textIsVisible ? 'input-visiblity:visible' : 'input-visiblity:hidden') as IconPlaceholder,
+    debugName: `${debugName} toggle visibility`,
+  } : {}
+
+  const subtitleStyles = {
+    error: getStyles('error'),
+    wrapper: getStyles('subtitleWrapper'),
+    subtitle: getStyles('subtitle'),
+
+  }
+  const errorProps = { text: error.message, style: subtitleStyles.error }
+
+  const subtitleContent = TypeGuards.isFunction(subtitle) ? subtitle({ styles: subtitleStyles, errorProps }) : <View style={subtitleStyles.wrapper}>
+    <FormError {...errorProps}/>
+    {TypeGuards.isString(subtitle) ? <Text text={subtitle} style={subtitleStyles.subtitle}/> : (subtitle || null)}
+  </View>
+  return (
+    <Touchable
+      style={getStyles('wrapper')}
+      debugName={debugName}
+      onPress={handlePress}
+      {...wrapperProps}
+      android_ripple={null}
+      noFeedback
+    >
+      <InputLabel
+        label={label}
+        styles={{
+          wrapper: getStyles('labelWrapper'),
+          asterisk: getStyles('labelAsterisk'),
+          text: getStyles('labelText'),
+        }}
+        required={required}
+      />
+      <View style={getStyles('innerWrapper')} {...innerWrapperProps}>
+        <InputIcon
+          isFocused={isFocused}
+          showError={showError}
+          styles={leftIconStyles}
+          commonStyles={commonIconStyles}
+          debugName={`${debugName} left icon`}
+          onPress={() => {}}
+          noFeedback={!leftIcon?.onPress}
+          {...leftIcon}
+        />
+        {/* @ts-ignore */}
+        <InputElement
+
+          secureTextEntry={password && !textIsVisible}
+          onChange={(e) => masking ? onChange?.(e) : handleChange(e)}
+          value={value}
+          editable={disabled}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholderTextColor={StyleSheet.flatten(getStyles('placeholder'))?.color}
+          selectionColor={StyleSheet.flatten(getStyles('selection'))?.color}
+          includeRawValueInChangeText={true}
+          {...props}
+          {...masking}
+          {...(!!masking ? {
+            onChangeText: handleMaskChange,
+            ref: maskInputRef,
+            refInput: (inputRef) => {
+              // console.log(inputRef)
+              if (!!inputRef) {
+                input.current = inputRef
+
+              }
+            },
+            ...masking,
+          } : {
+            ref: input,
+          })}
+          style={getStyles('textField')}
+        />
+        <InputIcon
+          isFocused={isFocused}
+          showError={showError}
+          styles={rightIconStyles}
+          commonStyles={commonIconStyles}
+          debugName={`${debugName} right icon`}
+          onPress={() => {}}
+          noFeedback={!rightIcon?.onPress}
+          {...rightIcon}
+          {...visibilityToggleProps}
+        />
+
+      </View>
+      {subtitleContent}
+    </Touchable>
+  )
+})
+
+export const FormError:React.FC<TextProps> = ({ text, ...props }) => {
+  let message = text
+  if (TypeGuards.isNumber(message)) {
+    message = message.toString()
+  }
+  if (typeof message === 'undefined') {
+    message = ''
+  }
+
+  if (TypeGuards.isString(message)) {
+    const text = message ? `${message.charAt(0).toUpperCase() + message.slice(1)}` : ' '
+    return <Text text={text} {...props} />
+  }
+  return <>
+    {text}
+  </>
+}
+
+type InputIconProps = {
+  styles: StylesOf<InputIconComposition>
+  commonStyles: StylesOf<InputIconComposition>
+  isFocused: boolean
+  showError: boolean
+} & Omit<ActionIconProps, 'styles'>
+
+export const InputIcon:React.FC<InputIconProps> = ({ styles, commonStyles, isFocused, showError, ...props }) => {
+  if (!props.icon) return null
+
+  function getStyles(k: ActionIconParts | '') {
+    let key = k
+    if (key === 'icon') key = ''
+    const requestedStyles = [
+      commonStyles[key],
+      isFocused ? commonStyles[key + ':focus'] : {},
+      showError ? commonStyles[key + ':error'] : {},
+      styles[key],
+      isFocused ? styles[key + ':focus'] : {},
+      showError ? styles[key + ':error'] : {},
+    ]
+
+    return StyleSheet.flatten(requestedStyles)
+  }
+  const iconStyles = {
+    icon: getStyles('icon'),
+    touchablePressable: getStyles('touchablePressable'),
+    touchableWrapper: getStyles('touchableWrapper'),
+    touchableFeedback: getStyles('touchableFeedback'),
+  }
+
+  return <ActionIcon
+    styles={iconStyles}
+    {...props}
+  />
+}

package/src/components/TextInput/styles.ts

@@ -0,0 +1,127 @@
+import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ActionIconParts } from '../ActionIcon'
+import { InputLabelComposition } from '../InputLabel'
+
+export type IconParts = Exclude<ActionIconParts, 'icon' | 'icon:disabled'>
+type InputIcons = 'icon' | 'leftIcon' | 'rightIcon'
+
+export type InputIconComposition = `${InputIcons}${Capitalize<IconParts>}`
+| InputIcons
+
+type TextInputParts =
+  | 'wrapper'
+  | InputIconComposition
+  | 'textField'
+  | 'innerWrapper'
+  | 'error'
+  | 'subtitle'
+  | 'subtitleWrapper'
+  | 'placeholder'
+  | 'selection'
+  | `label${Capitalize<InputLabelComposition>}`
+
+export type TextInputComposition =
+  | `${TextInputParts}:error`
+  | `${TextInputParts}:focus`
+  | TextInputParts
+
+const createTextInputStyle =
+  createDefaultVariantFactory<TextInputComposition>()
+
+const presets = includePresets((styles) => createTextInputStyle(() => ({ wrapper: styles })))
+
+export const TextInputStyles = {
+  ...presets,
+  default: createTextInputStyle((theme) => ({
+    textField: {
+      ...theme.spacing.padding(0),
+      ...theme.spacing.paddingHorizontal(1),
+      ...assignTextStyle('p1')(theme).text,
+      minWidth: 1,
+      backgroundColor: 'transparent',
+      flex: 1,
+    },
+    placeholder: {
+      color: theme.colors.lightGray,
+    },
+    selection: {
+      color: theme.colors.primary,
+    },
+    wrapper: {
+      display: 'flex',
+      flexDirection: 'column',
+
+    },
+    innerWrapper: {
+      ...theme.spacing.paddingVertical(0.5),
+      ...theme.spacing.paddingHorizontal(1),
+      ...theme.presets.row,
+      ...theme.border.neutral(1),
+      display: 'flex',
+      alignItems: 'center',
+    },
+
+    labelWrapper: {
+      ...theme.spacing.marginBottom(1),
+
+    },
+    labelText: {
+      ...assignTextStyle('h5')(theme).text,
+    },
+    'icon': {
+      color: theme.colors.neutral,
+    },
+    'icon:error': {
+      color: theme.colors.negative,
+    },
+    'icon:focus': {
+      color: theme.colors.primary,
+    },
+    leftIconTouchableWrapper: {
+      // ...theme.spacing.marginRight(0.5),
+    },
+    rightIconTouchableWrapper: {
+      // ...theme.spacing.marginLeft(0.5),
+    },
+    error: {
+      color: theme.colors.negative,
+
+    },
+    subtitleWrapper: {
+      ...theme.spacing.marginTop(0.2),
+      ...theme.presets.row,
+      ...theme.presets.justifySpaceBetween,
+      ...theme.presets.alignCenter,
+    },
+    subtitle: {
+      ...theme.presets.textRight,
+    },
+    'labelText:error': {
+      color: theme.colors.negative,
+    },
+
+    'innerWrapper:error': {
+      ...theme.border.negative(1),
+    },
+    'innerWrapper:focus': {
+      ...theme.border.primary(1),
+    },
+
+  })),
+  line: createTextInputStyle((theme) => ({
+    innerWrapper: {
+      ...theme.border.neutral({ width: 1, directions: ['bottom'] }),
+    },
+  })),
+  box: createTextInputStyle((theme) => ({
+    innerWrapper: {
+      ...theme.border.neutral(1),
+    },
+  })),
+  pill: createTextInputStyle((theme) => ({
+    innerWrapper: {
+      ...theme.border.neutral(1),
+      borderRadius: 15,
+    },
+  })),
+}

package/src/components/Touchable/index.tsx

@@ -0,0 +1,174 @@
+import * as React from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  BaseViewProps,
+
+  useCodeleapContext,
+  AnyFunction,
+  TypeGuards,
+} from '@codeleap/common'
+import { Pressable, StyleSheet, View as RNView } from 'react-native'
+
+import { createAnimatableComponent } from 'react-native-animatable'
+import { TouchableComposition, TouchableStyles } from './styles'
+import { StylesOf } from '../../types'
+import { View } from '../View'
+import { usePressableFeedback } from '../../utils'
+export type TouchableProps = Omit<
+  ComponentPropsWithoutRef<typeof Pressable>,
+  'onPress'
+> & {
+  variants?: ComponentVariants<typeof TouchableStyles>['variants']
+  component?: any
+  ref?: React.Ref<RNView>
+  debugName: string
+  activeOpacity?: number
+  debugComponent?: string
+  onPress?: AnyFunction
+  noFeedback?: boolean
+  debounce?: number
+  styles?: StylesOf<TouchableComposition>
+} & BaseViewProps
+export * from './styles'
+
+export const Touchable: React.FC<TouchableProps> = forwardRef<
+  RNView,
+  TouchableProps
+>((touchableProps, ref) => {
+  const {
+    variants = [],
+    children,
+    onPress,
+    style,
+    debugName,
+    debugComponent,
+    debounce = 1000,
+    noFeedback = false,
+    styles,
+    ...props
+  } = touchableProps
+  const pressed = React.useRef(false)
+  const variantStyles = useDefaultComponentStyle<'u:Touchable', typeof TouchableStyles>('u:Touchable', {
+    variants,
+    transform: StyleSheet.flatten,
+    rootElement: 'wrapper',
+    styles,
+  })
+
+  const { logger } = useCodeleapContext()
+
+  const press = () => {
+    if (!onPress) {
+      logger.warn('No onPress passed to touchable', {
+        touchableProps,
+      }, 'User Interaction')
+      return
+    }
+    const _onPress = () => {
+      logger.log(
+        `<${debugComponent || 'Touchable'}/>  pressed`,
+        debugName || variants,
+        'User interaction',
+      )
+      onPress && onPress()
+    }
+    if (TypeGuards.isNumber(debounce)) {
+      if (pressed.current) {
+        return
+      }
+      pressed.current = true
+      _onPress()
+      setTimeout(() => {
+        pressed.current = false
+      }, debounce)
+    } else {
+      _onPress()
+    }
+
+  }
+
+  const _styles = StyleSheet.flatten([variantStyles.wrapper, style])
+
+  const disableFeedback = !onPress || noFeedback
+
+  const { rippleConfig, getFeedbackStyle } = usePressableFeedback(_styles, {
+    hightlightPropertyIn: 'backgroundColor',
+    hightlightPropertyOut: 'backgroundColor',
+    disabled: disableFeedback,
+    feedbackConfig: variantStyles?.feedback,
+  })
+
+  const Wrapper = View
+
+  const { wrapperStyle, pressableStyle } = React.useMemo(() => {
+    const wrapperkeys = [
+      'margin',
+      'alignSelf',
+      'border',
+      'top!',
+      'left!',
+      'right!',
+      'bottom!',
+      'position!',
+      // 'flex!',
+    ]
+    const sharedKeys = [
+      'width!',
+      'height!',
+      'flex!',
+      'backgroundColor!',
+
+    ]
+
+    const wrapperStyle = {} as any
+    const pressableStyle = {} as any
+    const match = (k, key) => {
+      if (k.endsWith('!')) {
+        return key === k.substring(0, k.length - 1)
+      } else {
+
+        return key.startsWith(k)
+      }
+    }
+    Object.entries(_styles).forEach(([key, value]) => {
+
+      if (wrapperkeys.some(k => match(k, key))) {
+        wrapperStyle[key] = value
+      } else if (sharedKeys.some(k => match(k, key))) {
+        wrapperStyle[key] = value
+
+        pressableStyle[key] = value
+      } else {
+        pressableStyle[key] = value
+      }
+    })
+
+    wrapperStyle.overflow = 'hidden'
+    // wrapperStyle.flexDirection = 'row'
+    // wrapperStyle.alignItems = 'stretch'
+
+    return {
+      wrapperStyle,
+      pressableStyle,
+    }
+  }, [JSON.stringify(_styles)])
+
+  return (
+    <Wrapper style={[wrapperStyle]}>
+      <Pressable onPress={press} style={({ pressed }) => ([
+
+        // defaultPressableStyles,
+        pressableStyle,
+        // !!rippleConfig && ripplePressableStyles,
+        getFeedbackStyle(pressed),
+        variantStyles.pressable,
+      ])} android_ripple={rippleConfig} {...props} ref={ref}>
+        {children}
+      </Pressable>
+    </Wrapper>
+  )
+})
+
+export const AnimatedTouchable = createAnimatableComponent(Touchable) as unknown as typeof Touchable

package/src/components/Touchable/styles.ts

@@ -0,0 +1,28 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { StylesOf } from '../../types'
+import { TouchableFeedbackConfig } from '../../utils'
+
+export type TouchableComposition = 'wrapper' | 'feedback' | 'pressable'
+
+export type TouchableStylesGen<TCSS = any> = StylesOf<Exclude<TouchableComposition, 'feedback'>> & {
+  feedback?: TouchableFeedbackConfig
+}
+
+const createTouchableStyle = createDefaultVariantFactory<
+  TouchableComposition,
+  TouchableStylesGen
+>()
+
+const presets = includePresets((styles) => createTouchableStyle(() => ({ wrapper: styles, pressable: styles })),
+)
+
+export const TouchableStyles = {
+  ...presets,
+  default: createTouchableStyle((t) => ({
+    feedback: {
+      type: 'opacity',
+      value: 0.5,
+    },
+  })),
+
+}