@codeleap/mobile 2.2.11 → 2.3.0

package/src/components/TextInput/index.tsx

@@ -1,319 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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

@@ -1,172 +0,0 @@
-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 = null,
-    noFeedback = false,
-    styles,
-    ...props
-  } = touchableProps
-  const [pressed, setPressed] = React.useState(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) {
-        return
-      }
-      setPressed(true)
-      _onPress()
-      setTimeout(() => setPressed(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

@@ -1,28 +0,0 @@
-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,
-    },
-  })),
-
-}