@codeleap/mobile 1.8.4 → 1.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "1.8.4",
+  "version": "1.9.2",
   "main": "src/index.ts",
   "author": "Paulo Henrique De Souza <paulosouza300272@gmail.com>",
   "license": "UNLICENSED",
@@ -28,7 +28,8 @@
     "react-native-fast-image": "^8.5.11",
     "react-native-gesture-handler": "^2.2.0",
     "react-native-image-crop-picker": "*",
-    "react-native-keyboard-aware-scroll-view": "^0.9.5"
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-text-input-mask": "3.1.4"
   },
   "dependencies": {
     "@miblanchard/react-native-slider": "^2.1.0",

package/src/components/Checkbox/index.tsx

@@ -26,6 +26,7 @@ type CheckboxProps = NativeCheckboxProps & {
   label?: ReactNode
   styles?: StylesOf<CheckboxComposition>
   validate?: Form.ValidatorFunctionWithoutForm | string
+  required?: boolean
 }
 
 export const Checkbox = forwardRef<NativeCheckbox, CheckboxProps>(
@@ -38,6 +39,7 @@ export const Checkbox = forwardRef<NativeCheckbox, CheckboxProps>(
       value,
       onValueChange,
       validate,
+      required,
       ...props
     } = checkboxProps
 
@@ -72,7 +74,7 @@ export const Checkbox = forwardRef<NativeCheckbox, CheckboxProps>(
           <View style={getStyles('checkmarkWrapper')}>
             <View style={getStyles('checkmark')} />
           </View>
-          <InputLabel label={label} style={getStyles('label')} />
+          <InputLabel label={label} style={getStyles('label')} required={required}/>
         </Touchable>
         <FormError message={error.message} style={getStyles('error')} />
       </View>

package/src/components/FileInput.tsx

@@ -36,6 +36,7 @@ export type FileInputProps = {
   type?: 'image' | 'anyFile'
   alertProps?: Parameters<typeof OSAlert.ask>[0]
   pickerOptions?: Partial<Options>
+  required?: boolean
 }
 
 const pickerDefaults = {
@@ -77,6 +78,7 @@ export const FileInput = forwardRef<
     alertProps,
     placeholder = 'Select a file',
     pickerOptions,
+    required,
     buttonProps,
   } = fileInputProps
 
@@ -162,7 +164,7 @@ export const FileInput = forwardRef<
   if (mode === 'button') {
     return (
       <View style={variantStyles.wrapper}>
-        <InputLabel label={label} style={variantStyles.label} />
+        <InputLabel label={label} style={variantStyles.label} required={required}/>
         <Button
           onPress={() => openFilePicker()}
           text={filenames || placeholder}

package/src/components/List.tsx

@@ -95,12 +95,12 @@ const ListCP = forwardRef<FlatList, FlatListProps>(
         contentContainerStyle={[variantStyles.wrapper]}
         ref={ref as unknown as FlatList}
         ItemSeparatorComponent={separator}
-        {...props}
         refreshControl={
           hasRefresh && (
             <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
           )
         }
+        {...props}
       />
     )
   },

package/src/components/Scroll.tsx

@@ -90,12 +90,12 @@ export const Scroll = forwardRef<ScrollView, ScrollProps>(
         style={[Theme.presets.full, style]}
         contentContainerStyle={[variantStyles.wrapper]}
         ref={ref as unknown as ScrollView}
-        {...props}
         refreshControl={
           hasRefresh && (
             <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
           )
         }
+        {...props}
       >
         {children}
       </Component>

package/src/components/TextInput.tsx

@@ -6,6 +6,7 @@ import {
   TextInputComposition,
   TextInputStyles,
   useBooleanToggle,
+  useComponentStyle,
   useDefaultComponentStyle,
   useValidate,
 } from '@codeleap/common'
@@ -17,6 +18,8 @@ import { StylesOf } from '../types/utility'
 import { Icon } from './Icon'
 import { NativeSyntheticEvent, StyleSheet, TextInput as NativeTextInput, TextInputChangeEventData } from 'react-native'
 import { Touchable, TouchableProps } from './Touchable'
+import { MaskedTextInput } from '../modules/textInputMask'
+import { TextInputMaskProps } from '../modules/types/textInputMask'
 
 type IconProp = { name: IconPlaceholder; action?: () => void }
 
@@ -42,7 +45,10 @@ export type TextInputProps =
     visibilityToggle?: boolean
     touchableWrapper?: boolean
     onPress?: () => void
+    masking?: FormTypes.TextField['masking']
     innerWrapperProps?: TouchableProps | ViewProps
+    onChangeMask?: TextInputMaskProps['onChangeText']
+    required?:boolean
   }
 
 export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops, inputRef) => {
@@ -65,7 +71,10 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
     visibilityToggle,
     touchableWrapper,
     innerWrapperProps,
+    masking = null,
+    onChangeMask,
     debugName,
+    required = false,
     ...props
   } = rawprops
 
@@ -78,7 +87,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
     variants,
     styles,
   })
-  const InputElement = NativeTextInput
+  const InputElement = masking ? MaskedTextInput : NativeTextInput
 
   const handleBlur: TextInputProps['onBlur'] = (e) => {
     if (!editedState && value) setEdited(true)
@@ -95,7 +104,10 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
       onFocus(e)
     }
   }
-
+  const handleMaskChange = (masked, unmasked, obfuscated) => {
+    if (onChangeText) onChangeText(masking.saveFormatted ? masked : unmasked)
+    if (onChangeMask) onChangeMask(masked, unmasked, obfuscated)
+  }
   const handleChange = (event: NativeSyntheticEvent<TextInputChangeEventData>) => {
     const text = event.nativeEvent.text
 
@@ -156,20 +168,29 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
       onPress={handlePress}
       {...innerWrapperProps}
     >
-      <InputLabel label={label} style={getStyles('label')} />
+      <InputLabel
+        label={label}
+        style={getStyles('label')}
+        asteriskStyle={getStyles('requiredAsterisk')}
+        wrapperStyle={getStyles('labelWrapper')}
+        required={required}
+      />
       <View style={getStyles('innerWrapper')} {...innerWrapperProps}>
         <InputIcon {...leftIcon} style={leftIconStyle} wrapperStyle={buttonIconWrapperStyle} />
+        {/* @ts-ignore */}
         <InputElement
           ref={input}
           secureTextEntry={password && !textIsVisible}
-          onChange={handleChange}
+          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}
+          mask={masking?.mask}
           {...props}
+          {...(masking ? { onChangeText: handleMaskChange } : {})}
           style={getStyles('textField')}
         />
         {
@@ -204,12 +225,19 @@ export const InputIcon: React.FC<{ style: any; wrapperStyle: any } & IconProp> =
   return <Icon name={name} style={style} />
 }
 
-export const InputLabel = ({ label, style }) => {
+export const InputLabel = ({ label, variants = [], styles = {}, style, asteriskStyle = null, required = false, wrapperStyle = null }) => {
+  const labelStyles = useDefaultComponentStyle('TextInput', {
+    variants, styles, transform: StyleSheet.flatten,
+  })
+
   if (!label) return null
 
   switch (typeof label) {
     case 'string':
-      return <Text style={style} text={label} />
+      return <View style={ wrapperStyle || labelStyles.labelWrapper}>
+        <Text style={style || labelStyles.label} text={label} />
+        {required && <Text style={asteriskStyle || labelStyles.requiredAsterisk} text={' *'} />}
+      </View>
     case 'object':
       return label
     default:

package/src/modules/textInputMask.ts

@@ -0,0 +1,7 @@
+// @ts-ignore
+import MaskInput from 'react-native-mask-input'
+import { TextInputMaskProps } from './types/textInputMask'
+
+export const MaskedTextInput = MaskInput as React.ForwardRefExoticComponent<TextInputMaskProps & {
+    ref?: any
+}>

package/src/modules/types/textInputMask.ts

@@ -0,0 +1,9 @@
+import { FormTypes } from '@codeleap/common'
+import { ComponentPropsWithoutRef } from 'react'
+import { TextInput as NativeTextInput } from 'react-native'
+type NativeProps = ComponentPropsWithoutRef<typeof NativeTextInput>
+
+export type TextInputMaskProps = {
+    mask: FormTypes.TextField['masking']['mask']
+    onChangeText?: (maskedText:string, unmaskedText:string, obfuscatedText:string) => any
+} & NativeProps