@codeleap/mobile 1.4.0 → 1.4.3

package/src/components/Switch.tsx

@@ -1,82 +1,81 @@
-import * as React from 'react'
-import {
-  SwitchStyles,
-  SwitchComposition,
-  ComponentVariants,
-  useDefaultComponentStyle,
-  StylesOf,
-  useCodeleapContext,
-  FormTypes,
-  useValidate,
-} from '@codeleap/common'
-import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
-import { StyleSheet, Switch as NativeSwitch } from 'react-native'
-import { InputLabel, FormError } from './TextInput'
-import { View } from './View'
-
-type NativeSwitchProps = Omit<
-  ComponentPropsWithRef<typeof NativeSwitch>,
-  'thumbColor' | 'trackColor'
->;
-type SwitchProps = NativeSwitchProps & {
-  variants?: ComponentVariants<typeof SwitchStyles>['variants'];
-  label?: ReactNode;
-  styles?: StylesOf<SwitchComposition>;
-  validate?: FormTypes.ValidatorFunctionWithoutForm | string;
-};
-
-
-export const Switch = forwardRef<NativeSwitch, SwitchProps>(
-  (switchProps, ref) => {
-    const {
-      variants = [],
-      style = {},
-      styles = {},
-      validate,
-      label,
-      value,
-      ...props
-    } = switchProps
-
-    const variantStyles = useDefaultComponentStyle('Switch', {
-      variants,
-    })
-    const { error, showError } = useValidate(switchProps.value, validate)
-    function getStyles(key: SwitchComposition) {
-      return [
-        variantStyles[key],
-        styles[key],
-        key === 'wrapper' ? style : {},
-        showError ? variantStyles[key + ':error'] : {},
-        showError ? styles[key + ':error'] : {},
-        value ? variantStyles[key + ':on'] : {},
-        value ? styles[key + ':on'] : {},
-        switchProps.disabled ? variantStyles[key + ':disabled'] : {},
-        switchProps.disabled ? styles[key + ':disabled'] : {},
-      ]
-    }
-
-    const inputStyles = getStyles('input')
-
-    const { color, backgroundColor } = StyleSheet.flatten(inputStyles)
-    const { Theme } = useCodeleapContext()
-
-    const thumbColor = color || Theme.colors.primary
-    const trackColor = backgroundColor || Theme.colors.gray
-    return (
-      <View style={getStyles('wrapper')}>
-        <View style={getStyles('inputWrapper')}>
-          <NativeSwitch
-            thumbColor={thumbColor}
-            trackColor={{ false: trackColor, true: trackColor }}
-            ios_backgroundColor={trackColor}
-            value={value}
-            {...props}
-          />
-          <InputLabel label={label} style={getStyles('label')} />
-        </View>
-        <FormError message={error.message} style={getStyles('error')} />
-      </View>
-    )
-  },
-) as React.FC<SwitchProps>
+import * as React from 'react'
+import {
+  SwitchStyles,
+  SwitchComposition,
+  ComponentVariants,
+  useDefaultComponentStyle,
+  StylesOf,
+  useCodeleapContext,
+  FormTypes,
+  useValidate,
+} from '@codeleap/common'
+import { ComponentPropsWithRef, forwardRef, ReactNode } from 'react'
+import { StyleSheet, Switch as NativeSwitch } from 'react-native'
+import { InputLabel, FormError } from './TextInput'
+import { View } from './View'
+
+type NativeSwitchProps = Omit<
+  ComponentPropsWithRef<typeof NativeSwitch>,
+  'thumbColor' | 'trackColor'
+>
+type SwitchProps = NativeSwitchProps & {
+  variants?: ComponentVariants<typeof SwitchStyles>['variants']
+  label?: ReactNode
+  styles?: StylesOf<SwitchComposition>
+  validate?: FormTypes.ValidatorFunctionWithoutForm | string
+}
+
+export const Switch = forwardRef<NativeSwitch, SwitchProps>(
+  (switchProps, ref) => {
+    const {
+      variants = [],
+      style = {},
+      styles = {},
+      validate,
+      label,
+      value,
+      ...props
+    } = switchProps
+
+    const variantStyles = useDefaultComponentStyle('Switch', {
+      variants,
+    })
+    const { error, showError } = useValidate(switchProps.value, validate)
+    function getStyles(key: SwitchComposition) {
+      return [
+        variantStyles[key],
+        styles[key],
+        key === 'wrapper' ? style : {},
+        showError ? variantStyles[key + ':error'] : {},
+        showError ? styles[key + ':error'] : {},
+        value ? variantStyles[key + ':on'] : {},
+        value ? styles[key + ':on'] : {},
+        switchProps.disabled ? variantStyles[key + ':disabled'] : {},
+        switchProps.disabled ? styles[key + ':disabled'] : {},
+      ]
+    }
+
+    const inputStyles = getStyles('input')
+
+    const { color, backgroundColor } = StyleSheet.flatten(inputStyles)
+    const { Theme } = useCodeleapContext()
+
+    const thumbColor = color || Theme.colors.primary
+    const trackColor = backgroundColor || Theme.colors.gray
+    return (
+      <View style={getStyles('wrapper')}>
+        <View style={getStyles('inputWrapper')}>
+          <NativeSwitch
+            thumbColor={thumbColor}
+            trackColor={{ false: trackColor, true: trackColor }}
+            ios_backgroundColor={trackColor}
+            value={value}
+            {...props}
+          />
+          <InputLabel label={label} style={getStyles('label')} />
+        </View>
+        <FormError message={error.message} style={getStyles('error')} />
+      </View>
+    )
+  },
+) as React.FC<SwitchProps>

package/src/components/Text.tsx

@@ -1,30 +1,30 @@
-import * as React from 'react'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
-import {
-  ComponentVariants,
-  useDefaultComponentStyle,
-  BaseViewProps,
-  TextStyles,
-} from '@codeleap/common'
-import { Text as NativeText } from 'react-native'
-
-export type TextProps = ComponentPropsWithoutRef<typeof NativeText> & {
-  text?: string;
-  variants?: ComponentVariants<typeof TextStyles>['variants'];
-} & BaseViewProps;
-
-export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
-  const { variants = [], text, style, ...props } = textProps
-
-  const variantStyles = useDefaultComponentStyle('Text', {
-    variants,
-    rootElement: 'text',
-  })
-
-  const styles = [variantStyles.text, style]
-  return (
-    <NativeText {...props} style={styles} ref={ref}>
-      {text}
-    </NativeText>
-  )
-})
+import * as React from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+  BaseViewProps,
+  TextStyles,
+} from '@codeleap/common'
+import { Text as NativeText } from 'react-native'
+
+export type TextProps = ComponentPropsWithoutRef<typeof NativeText> & {
+  text?: string
+  variants?: ComponentVariants<typeof TextStyles>['variants']
+} & BaseViewProps
+
+export const Text = forwardRef<NativeText, TextProps>((textProps, ref) => {
+  const { variants = [], text, style, ...props } = textProps
+
+  const variantStyles = useDefaultComponentStyle('Text', {
+    variants,
+    rootElement: 'text',
+  })
+
+  const styles = [variantStyles.text, style]
+  return (
+    <NativeText {...props} style={styles} ref={ref}>
+      {text}
+    </NativeText>
+  )
+})

package/src/components/TextInput.tsx

@@ -1,203 +1,204 @@
-import * as React from 'react'
-import {
-  ComponentVariants,
-  FormTypes,
-  IconPlaceholder,
-  TextInputComposition,
-  TextInputStyles,
-  useBooleanToggle,
-  useDefaultComponentStyle,
-  useValidate,
-} from '@codeleap/common'
-import { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import { Text } from './Text'
-import { View, ViewProps  } from './View'
-import { Button } from './Button'
-import { StylesOf } from '../types/utility'
-import { Icon } from './Icon'
-import { NativeSyntheticEvent, StyleSheet, TextInput as NativeTextInput, TextInputChangeEventData } from 'react-native'
-import { Touchable, TouchableProps } from './Touchable'
-
-type IconProp = { name: IconPlaceholder, action?: () => void }
-
-type NativeProps = ComponentPropsWithoutRef<typeof NativeTextInput>
-
-export type TextInputProps =
-  ComponentVariants<typeof TextInputStyles> &
-  Omit<NativeProps, 'value'> &
-  {
-    multiline?: boolean;
-    onChangeText?: (text: string) => void;
-    disabled?: boolean;
-    edited?: boolean;
-    type?: string;
-    label?: React.ReactNode
-
-    leftIcon?: IconProp
-    rightIcon?: IconProp
-    styles?: StylesOf<TextInputComposition>
-    validate?: FormTypes.ValidatorFunctionWithoutForm | string
-    value?: string
-    password?: boolean
-    visibilityToggle?: boolean
-    touchableWrapper?: boolean
-    innerWrapperProps?: TouchableProps | ViewProps
-  };
-
-export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops, inputRef) => {
-  const {
-    onChange,
-    type,
-    value,
-    onChangeText,
-    disabled,
-    edited,
-    onFocus,
-    onBlur,
-    multiline,
-    variants,
-    label,
-    leftIcon,
-    rightIcon,
-    styles,
-    validate,
-    password,
-    visibilityToggle,
-    touchableWrapper,
-    innerWrapperProps,
-    ...props
-  } = rawprops
-
-  const [isFocused, setFocus] = useState(false)
-  const [editedState, setEdited] = useState(edited)
-
-  const input = useRef<any>(null)
-  const [textIsVisible, setTextVisible] = useBooleanToggle(false)
-  const variantStyles = useDefaultComponentStyle('TextInput', {
-    variants,
-    styles,
-  })
-  const InputElement = 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 handleChange = (event: NativeSyntheticEvent<TextInputChangeEventData>) => {
-    const text = event.nativeEvent.text
-
-    if (onChange) onChange(event)
-    if (onChangeText) onChangeText(text)
-  }
-
-  useImperativeHandle(inputRef, () => ({...input.current, focus: () => {
-    input.current?.focus?.()
-  }, isTextInput: true}))
-
-  const { showError, error } = useValidate(value, validate)
-
-  const leftIconStyle = {
-    ...variantStyles.icon,
-    ...(isFocused ? variantStyles['icon:focus'] : {}),
-    ...(showError ? variantStyles['icon:error'] : {}),
-    ...variantStyles.leftIcon,
-    ...(isFocused ? variantStyles['leftIcon:focus'] : {}),
-    ...(showError ? variantStyles['leftIcon:error'] : {}),
-  }
-
-  const rightIconStyle = {
-    ...variantStyles.icon,
-    ...(isFocused ? variantStyles['icon:focus'] : {}),
-    ...(showError ? variantStyles['icon:error'] : {}),
-    ...variantStyles.rightIcon,
-    ...(isFocused ? variantStyles['rightIcon:focus'] : {}),
-    ...(showError ? variantStyles['rightIcon:error'] : {}),
-  }
-
-  function getStyles(key: TextInputComposition) {
-    const requestedStyles = [
-      variantStyles[key],
-      isFocused ? variantStyles[key + ':focus'] : {},
-      showError ? variantStyles[key + ':error'] : {},
-    ]
-    return requestedStyles
-  }
-
-  const InnerWrapper = touchableWrapper ? Touchable : View
-
-  return (
-    <View
-      style={getStyles('wrapper')}
-    >
-      <InputLabel label={label} style={getStyles('label')} />
-      <InnerWrapper style={getStyles('innerWrapper')} {...innerWrapperProps}>
-        <InputIcon {...leftIcon} style={leftIconStyle} />
-        <InputElement
-          ref={input}
-          secureTextEntry={password && !textIsVisible}
-          onChange={handleChange}
-          value={value}
-          editable={disabled}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          placeholderTextColor={StyleSheet.flatten(getStyles('placeholder'))?.color}
-          {...props}
-          style={getStyles('textField')}
-        />
-        {
-          visibilityToggle ?
-            <InputIcon name={
-              (textIsVisible ? 'input-visiblity:visible' : 'input-visiblity:hidden') as IconPlaceholder
-            } action={() => setTextVisible()} style={rightIconStyle} />
-            :
-            <InputIcon {...rightIcon} style={rightIconStyle} />
-        }
-      </InnerWrapper>
-      <FormError message={error.message} style={{
-        ...variantStyles.error,
-      }} />
-    </View>
-  )
-})
-
-export const FormError = ({ message, ...props }) => {
-  if (['number', 'string', 'undefined'].includes(typeof message)) {
-    return <Text text={`${message || ' '}`} variants={['p2', 'marginTop:1']} {...props} />
-  }
-  return message
-}
-
-export const InputIcon: React.FC<{ style: any } & IconProp> = ({ name, style, action }) => {
-  if (!name) return null
-  if (action) {
-    return <Button icon={name} onPress={() => action()} styles={{
-      icon: style,
-    }} variants={['icon']} />
-  }
-  return <Icon name={name} style={style} />
-}
-
-export const InputLabel = ({ label, style }) => {
-  if (!label) return null
-
-  switch (typeof label) {
-    case 'string':
-      return <Text style={style} text={label} />
-    case 'object':
-      return label
-    default:
-      return null
-  }
-}
+import * as React from 'react'
+import {
+  ComponentVariants,
+  FormTypes,
+  IconPlaceholder,
+  TextInputComposition,
+  TextInputStyles,
+  useBooleanToggle,
+  useDefaultComponentStyle,
+  useValidate,
+} from '@codeleap/common'
+import { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import { Text } from './Text'
+import { View, ViewProps } from './View'
+import { Button } from './Button'
+import { StylesOf } from '../types/utility'
+import { Icon } from './Icon'
+import { NativeSyntheticEvent, StyleSheet, TextInput as NativeTextInput, TextInputChangeEventData } from 'react-native'
+import { Touchable, TouchableProps } from './Touchable'
+
+type IconProp = { name: IconPlaceholder; action?: () => void }
+
+type NativeProps = ComponentPropsWithoutRef<typeof NativeTextInput>
+
+export type TextInputProps =
+  ComponentVariants<typeof TextInputStyles> &
+  Omit<NativeProps, 'value'> &
+  {
+    multiline?: boolean
+    onChangeText?: (text: string) => void
+    disabled?: boolean
+    edited?: boolean
+    type?: string
+    label?: React.ReactNode
+    debugName: string
+    leftIcon?: IconProp
+    rightIcon?: IconProp
+    styles?: StylesOf<TextInputComposition>
+    validate?: FormTypes.ValidatorFunctionWithoutForm | string
+    value?: string
+    password?: boolean
+    visibilityToggle?: boolean
+    touchableWrapper?: boolean
+    innerWrapperProps?: TouchableProps | ViewProps
+  }
+
+export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops, inputRef) => {
+  const {
+    onChange,
+    type,
+    value,
+    onChangeText,
+    disabled,
+    edited,
+    onFocus,
+    onBlur,
+    multiline,
+    variants,
+    label,
+    leftIcon,
+    rightIcon,
+    styles,
+    validate,
+    password,
+    visibilityToggle,
+    touchableWrapper,
+    innerWrapperProps,
+    debugName,
+    ...props
+  } = rawprops
+
+  const [isFocused, setFocus] = useState(false)
+  const [editedState, setEdited] = useState(edited)
+
+  const input = useRef<any>(null)
+  const [textIsVisible, setTextVisible] = useBooleanToggle(false)
+  const variantStyles = useDefaultComponentStyle('TextInput', {
+    variants,
+    styles,
+  })
+  const InputElement = 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 handleChange = (event: NativeSyntheticEvent<TextInputChangeEventData>) => {
+    const text = event.nativeEvent.text
+
+    if (onChange) onChange(event)
+    if (onChangeText) onChangeText(text)
+  }
+
+  useImperativeHandle(inputRef, () => ({ ...input.current, focus: () => {
+    input.current?.focus?.()
+  }, isTextInput: true }))
+
+  const { showError, error } = useValidate(value, validate)
+
+  const leftIconStyle = {
+    ...variantStyles.icon,
+    ...(isFocused ? variantStyles['icon:focus'] : {}),
+    ...(showError ? variantStyles['icon:error'] : {}),
+    ...variantStyles.leftIcon,
+    ...(isFocused ? variantStyles['leftIcon:focus'] : {}),
+    ...(showError ? variantStyles['leftIcon:error'] : {}),
+  }
+
+  const rightIconStyle = {
+    ...variantStyles.icon,
+    ...(isFocused ? variantStyles['icon:focus'] : {}),
+    ...(showError ? variantStyles['icon:error'] : {}),
+    ...variantStyles.rightIcon,
+    ...(isFocused ? variantStyles['rightIcon:focus'] : {}),
+    ...(showError ? variantStyles['rightIcon:error'] : {}),
+  }
+
+  function getStyles(key: TextInputComposition) {
+    const requestedStyles = [
+      variantStyles[key],
+      isFocused ? variantStyles[key + ':focus'] : {},
+      showError ? variantStyles[key + ':error'] : {},
+    ]
+    return requestedStyles
+  }
+
+  const InnerWrapper = touchableWrapper ? Touchable : View
+
+  return (
+    <View
+      style={getStyles('wrapper')}
+    >
+      <InputLabel label={label} style={getStyles('label')} />
+      <InnerWrapper debugName={debugName} style={getStyles('innerWrapper')} {...innerWrapperProps}>
+        <InputIcon {...leftIcon} style={leftIconStyle} />
+        <InputElement
+          ref={input}
+          secureTextEntry={password && !textIsVisible}
+          onChange={handleChange}
+          value={value}
+          editable={disabled}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholderTextColor={StyleSheet.flatten(getStyles('placeholder'))?.color}
+          {...props}
+          style={getStyles('textField')}
+        />
+        {
+          visibilityToggle ?
+            <InputIcon name={
+              (textIsVisible ? 'input-visiblity:visible' : 'input-visiblity:hidden') as IconPlaceholder
+            } action={() => setTextVisible()} style={rightIconStyle} />
+            :
+            <InputIcon {...rightIcon} style={rightIconStyle} />
+        }
+      </InnerWrapper>
+      <FormError message={error.message} style={{
+        ...variantStyles.error,
+      }} />
+    </View>
+  )
+})
+
+export const FormError = ({ message, ...props }) => {
+  if (['number', 'string', 'undefined'].includes(typeof message)) {
+    return <Text text={`${message || ' '}`} variants={['p2', 'marginTop:1']} {...props} />
+  }
+  return message
+}
+
+export const InputIcon: React.FC<{ style: any } & IconProp> = ({ name, style, action }) => {
+  if (!name) return null
+  if (action) {
+    return <Button icon={name} debugName={`${name} icon button`} onPress={() => action()} styles={{
+      icon: style,
+    }} variants={['icon']} />
+  }
+  return <Icon name={name} style={style} />
+}
+
+export const InputLabel = ({ label, style }) => {
+  if (!label) return null
+
+  switch (typeof label) {
+    case 'string':
+      return <Text style={style} text={label} />
+    case 'object':
+      return label
+    default:
+      return null
+  }
+}