@codeleap/mobile 3.14.2 → 3.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "3.14.2",
+  "version": "3.15.0",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/components/Grid/index.tsx

@@ -41,6 +41,11 @@ const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
   )
 }
 
+const defaultProps: Partial<GridProps> = {
+  keyboardShouldPersistTaps: 'handled',
+  refreshControlProps: {},
+}
+
 const GridCP = forwardRef<KeyboardAwareFlatList, GridProps>(
   (flatGridProps, ref) => {
     const {
@@ -54,7 +59,11 @@ const GridCP = forwardRef<KeyboardAwareFlatList, GridProps>(
       spacing,
       numColumns,
       ...props
-    } = flatGridProps
+    } = {
+      ...defaultProps,
+      ...flatGridProps,
+    }
+
     const { Theme } = useCodeleapContext()
     const variantStyles = useDefaultComponentStyle<'u:Grid', typeof GridPresets>('u:Grid', {
       variants,
@@ -90,12 +99,12 @@ const GridCP = forwardRef<KeyboardAwareFlatList, GridProps>(
     }, [props?.renderItem, props?.data?.length])
 
     const separatorStyles = { height: Theme.spacing.value(spacing), ...variantStyles.separator }
-    const separator = props?.separators || (!!spacing ? <RenderSeparator separatorStyles={separatorStyles}/> : null)
-    const refreshControl = !!onRefresh && <RefreshControl refreshing={refreshing} onRefresh={onRefresh} {...refreshControlProps}/>
+    const separator = props?.separators || (!!spacing ? <RenderSeparator separatorStyles={separatorStyles} /> : null)
+    const refreshControl = !!onRefresh && <RefreshControl refreshing={refreshing} onRefresh={onRefresh} {...refreshControlProps} />
     const _gridProps = {
       ...props,
       ref: ref,
-      ListEmptyComponent: <EmptyPlaceholder {...placeholder}/>,
+      ListEmptyComponent: <EmptyPlaceholder {...placeholder} />,
       ListHeaderComponentStyle: variantStyles.header,
       ListFooterComponentStyle: variantStyles.footer,
       ItemSeparatorComponent: separator,
@@ -116,7 +125,11 @@ const GridCP = forwardRef<KeyboardAwareFlatList, GridProps>(
   },
 )
 
-export type GridComponentType = <T extends any[] = any[]>(props: GridProps<T>) => React.ReactElement
+export type GridComponentType = (<T extends any[] = any[]>(props: GridProps<T>) => JSX.Element) & {
+  defaultProps?: Partial<GridProps>
+}
 
 export const Grid = GridCP as unknown as GridComponentType
 
+Grid.defaultProps = defaultProps
+

package/src/components/InputBase/index.tsx

@@ -10,7 +10,7 @@ export * from './styles'
 export * from './utils'
 export * from './types'
 
-export const InputBaseDefaultOrder:InputBaseProps['order'] = [
+export const InputBaseDefaultOrder: InputBaseProps['order'] = [
   'label',
   'description',
   'innerWrapper',
@@ -52,6 +52,7 @@ export const InputBase = React.forwardRef<any, InputBaseProps>((props, ref) => {
     // @ts-ignore
     styles: _styles.leftIconStyles,
     debugName: `${debugName} left icon`,
+    dismissKeyboard: false,
   })
 
   const _rightIcon = getRenderedComponent<Partial<ActionIconProps>>(rightIcon, ActionIcon, {
@@ -59,13 +60,14 @@ export const InputBase = React.forwardRef<any, InputBaseProps>((props, ref) => {
     // @ts-ignore
     styles: _styles.rightIconStyles,
     debugName: `${debugName} right icon`,
+    dismissKeyboard: false,
   })
 
-  const _label = TypeGuards.isString(label) ? <Text text={label} style={_styles.labelStyle}/> : label
+  const _label = TypeGuards.isString(label) ? <Text text={label} style={_styles.labelStyle} /> : label
 
-  const _error = TypeGuards.isString(error) ? <Text text={error} style={_styles.errorStyle}/> : error
+  const _error = TypeGuards.isString(error) ? <Text text={error} style={_styles.errorStyle} /> : error
 
-  const _description = TypeGuards.isString(description) ? <Text text={description} style={_styles.descriptionStyle}/> : description
+  const _description = TypeGuards.isString(description) ? <Text text={description} style={_styles.descriptionStyle} /> : description
 
   const parts = {
     label: labelAsRow ? <View style={_styles.labelRowStyle}>
@@ -81,7 +83,7 @@ export const InputBase = React.forwardRef<any, InputBaseProps>((props, ref) => {
       {_rightIcon}
     </InnerWrapperComponent>,
     error: hideErrorMessage ? null : (
-      _error || <Text text={''} style={_styles.errorStyle}/>
+      _error || <Text text={''} style={_styles.errorStyle} />
     ),
   }
 

package/src/components/List/index.tsx

@@ -31,7 +31,7 @@ export type ReplaceFlatlistProps<P, T> = Omit<P, DataboundFlatListPropsTypes> &
   renderItem: (data: AugmentedRenderItemInfo<T>) => React.ReactElement
   onRefresh?: () => void
   getItemLayout?: ((
-    data:T,
+    data: T,
     index: number,
   ) => { length: number; offset: number; index: number })
   fakeEmpty?: boolean
@@ -61,23 +61,36 @@ const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
   )
 }
 
+const defaultProps: Partial<FlatListProps> = {
+  keyboardShouldPersistTaps: 'handled',
+  styles: {},
+  variants: [],
+  refreshControlProps: {},
+  fakeEmpty: false,
+  loading: false,
+  keyboardAware: true,
+}
+
 const ListCP = forwardRef<FlatList, FlatListProps>(
   (flatListProps, ref) => {
     const {
-      variants = [],
+      variants,
       style,
-      styles = {},
+      styles,
       onRefresh,
       component,
       refreshing,
       placeholder,
-      refreshControlProps = {},
-      loading = false,
-      keyboardAware = true,
+      refreshControlProps,
+      loading,
+      keyboardAware,
       fakeEmpty = loading,
       contentContainerStyle,
       ...props
-    } = flatListProps
+    } = {
+      ...defaultProps,
+      ...flatListProps,
+    }
 
     const variantStyles = useDefaultComponentStyle<'u:List', typeof ListPresets>('u:List', {
       variants,
@@ -87,7 +100,7 @@ const ListCP = forwardRef<FlatList, FlatListProps>(
     })
 
     // const isEmpty = !props.data || !props.data.length
-    const separator = props?.separators && <RenderSeparator separatorStyles={variantStyles.separator}/>
+    const separator = props?.separators && <RenderSeparator separatorStyles={variantStyles.separator} />
 
     const renderItem = useCallback((data: ListRenderItemInfo<any>) => {
       if (!props?.renderItem) return null
@@ -138,10 +151,10 @@ const ListCP = forwardRef<FlatList, FlatListProps>(
           />
         )}
 
-        ListEmptyComponent={<EmptyPlaceholder {..._placeholder}/>}
+        ListEmptyComponent={<EmptyPlaceholder {..._placeholder} />}
         {...props}
         data={fakeEmpty ? [] : props.data}
-        ref={ ref }
+        ref={ref}
         renderItem={renderItem}
 
       />
@@ -149,7 +162,10 @@ const ListCP = forwardRef<FlatList, FlatListProps>(
   },
 )
 
-export type ListComponentType = <T extends any[] = any[]>(props: FlatListProps<T>) => JSX.Element
-
+export type ListComponentType = (<T extends any[] = any[]>(props: FlatListProps<T>) => JSX.Element) & {
+  defaultProps: Partial<FlatListProps>
+}
 export const List = ListCP as unknown as ListComponentType
 
+List.defaultProps = defaultProps
+

package/src/components/Pager/index.tsx

@@ -44,11 +44,21 @@ export type PagerProps = React.PropsWithChildren<{
   pageWrapperProps?: any
   width?: number
   onScroll: ScrollProps['onScroll']
-   /** If TRUE render page, nextPage and prevPage only */
-   windowing?:boolean
+  /** If TRUE render page, nextPage and prevPage only */
+  windowing?: boolean
 } & ScrollViewProps>
 
-export const Pager = (pagerProps:PagerProps) => {
+const defaultProps: Partial<PagerProps> = {
+  variants: [],
+  styles: {},
+  page: 0,
+  returnEarly: true,
+  windowing: false,
+  scrollEnabled: true,
+  keyboardShouldPersistTaps: 'handled',
+}
+
+export const Pager = (pagerProps: PagerProps) => {
   const {
     styles,
     variants,
@@ -62,7 +72,10 @@ export const Pager = (pagerProps:PagerProps) => {
     windowing = false,
     setPage,
     scrollEnabled = true,
-  } = pagerProps
+  } = {
+    ...defaultProps,
+    ...pagerProps,
+  }
 
   const childArr = React.Children.toArray(children)
   const scrollRef = useRef<ScrollView>(null)
@@ -134,6 +147,7 @@ export const Pager = (pagerProps:PagerProps) => {
       style={[variantStyles.wrapper, style]}
       {...pagerProps}
       scrollEnabled={childArr.length > 1 && scrollEnabled}
+
     >
       {childArr.map((child: PagerProps['children'][number], index) => {
 
@@ -149,7 +163,7 @@ export const Pager = (pagerProps:PagerProps) => {
           return <View style={{ height: '100%', width }} />
         }
 
-        const pageProps:PageProps = {
+        const pageProps: PageProps = {
           isLast,
           isActive,
           isFirst,
@@ -172,3 +186,5 @@ export const Pager = (pagerProps:PagerProps) => {
     </ScrollView>
   )
 }
+
+Pager.defaultProps = defaultProps

package/src/components/Scroll/index.tsx

@@ -9,7 +9,7 @@ import {
 import { ScrollView, StyleSheet } from 'react-native'
 import { ViewProps } from '../View'
 import { RefreshControl, RefreshControlProps } from '../RefreshControl'
-import { StylesOf } from '../../types'
+import { ComponentWithDefaultProps, StylesOf } from '../../types'
 import { ScrollComposition, ScrollPresets } from './styles'
 import { GetKeyboardAwarePropsOptions, useKeyboardPaddingStyle } from '../../utils'
 import { KeyboardAwareScrollView, KeyboardAwareScrollViewProps } from 'react-native-keyboard-aware-scroll-view'
@@ -29,6 +29,10 @@ export type ScrollProps = KeyboardAwareScrollViewProps &
 
 export type ScrollRef = KeyboardAwareScrollView
 
+const defaultProps: Partial<ScrollProps> = {
+  keyboardShouldPersistTaps: 'handled',
+}
+
 export const Scroll = forwardRef<ScrollRef, ScrollProps>(
   (scrollProps, ref) => {
     const {
@@ -43,7 +47,10 @@ export const Scroll = forwardRef<ScrollRef, ScrollProps>(
       keyboardAware = true,
       animated = true,
       ...props
-    } = scrollProps
+    } = {
+      ...defaultProps,
+      ...scrollProps,
+    }
     const hasRefresh = !!props.onRefresh
     const [refreshingState, setRefreshing] = useState(false)
     const refreshingDisplay = props.refreshing !== undefined ? props.refreshing : refreshingState
@@ -91,7 +98,7 @@ export const Scroll = forwardRef<ScrollRef, ScrollProps>(
         showsVerticalScrollIndicator={false}
         // @ts-ignore
         ref={ref}
-        refreshControl= {
+        refreshControl={
           hasRefresh && (
             <RefreshControl
               refreshing={refreshingDisplay}
@@ -106,5 +113,8 @@ export const Scroll = forwardRef<ScrollRef, ScrollProps>(
       </Component>
     )
   },
-) as unknown as (props:ScrollProps) => JSX.Element
+) as unknown as ComponentWithDefaultProps<ScrollProps>
+
+Scroll.defaultProps = defaultProps
+
 export * from './styles'

package/src/components/Sections/index.tsx

@@ -35,7 +35,7 @@ export type ReplaceSectionListProps<P, T> = Omit<P, DataboundSectionListPropsTyp
   renderItem: (data: AugmentedSectionRenderItemInfo<T>) => React.ReactElement
   onRefresh?: () => void
   getItemLayout?: ((
-    data:T,
+    data: T,
     index: number,
   ) => { length: number; offset: number; index: number })
   fakeEmpty?: boolean
@@ -56,6 +56,13 @@ export type SectionListProps<
     keyboardAware?: boolean
   } & ComponentVariants<typeof SectionsPresets>
 
+const defaultProps: Partial<SectionListProps> = {
+  keyboardShouldPersistTaps: 'handled',
+  refreshControlProps: {},
+  keyboardAware: true,
+
+}
+
 export const Sections = forwardRef<SectionList, SectionListProps>(
   (sectionsProps, ref) => {
     const {
@@ -66,14 +73,17 @@ export const Sections = forwardRef<SectionList, SectionListProps>(
       component,
       refreshing,
       placeholder,
-      keyboardAware = true,
-      refreshControlProps = {},
+      keyboardAware,
+      refreshControlProps,
       contentContainerStyle,
 
       fakeEmpty,
       refreshControl,
       ...props
-    } = sectionsProps
+    } = {
+      ...defaultProps,
+      ...sectionsProps,
+    }
 
     const variantStyles = useDefaultComponentStyle<'u:Sections', typeof SectionsPresets>('u:Sections', {
       variants,
@@ -153,4 +163,6 @@ export const Sections = forwardRef<SectionList, SectionListProps>(
       />
     )
   },
-) as unknown as <T = any>(props: SectionListProps<T>) => JSX.Element
+) as unknown as (<T = any>(props: SectionListProps<T>) => JSX.Element) & {
+  defaultProps: Partial<SectionListProps>
+}

package/src/components/SegmentedControl/index.tsx

@@ -20,7 +20,7 @@ export type SegmentedControlRef = ScrollRef & {
   scrollToCurrent: () => void
 }
 
-const DefaultBubble = (props:Partial<SegmentedControlProps>) => {
+const DefaultBubble = (props: Partial<SegmentedControlProps>) => {
   const {
     style,
 
@@ -32,20 +32,20 @@ const DefaultBubble = (props:Partial<SegmentedControlProps>) => {
 }
 
 export type SegmentedControlProps<T = string> = ScrollProps & {
-    options : SegmentedControlOptionProps[]
-    onValueChange: (value: T) => any
-    value: T
-    debugName: string
-    animation?: TransitionConfig
-    textProps?: Partial<PropsOf<typeof Text>>
-    touchableProps?: Partial<PropsOf<typeof Touchable>>
-    styles?: StylesOf<SegmentedControlComposition>
-    scrollProps?: any
-    label?: FormTypes.Label
-    renderOption?: (props: SegmentedControlOptionProps) => JSX.Element
-    renderBubble?: (props: Partial<SegmentedControlProps>) => JSX.Element
-    getItemWidth?: (item:{label: string; value: T }, idx: number, arr: {label: string; value: T }[]) => number
-    scrollToCurrentOptionOnMount?: boolean
+  options: SegmentedControlOptionProps[]
+  onValueChange: (value: T) => any
+  value: T
+  debugName: string
+  animation?: TransitionConfig
+  textProps?: Partial<PropsOf<typeof Text>>
+  touchableProps?: Partial<PropsOf<typeof Touchable>>
+  styles?: StylesOf<SegmentedControlComposition>
+  scrollProps?: any
+  label?: FormTypes.Label
+  renderOption?: (props: SegmentedControlOptionProps) => JSX.Element
+  renderBubble?: (props: Partial<SegmentedControlProps>) => JSX.Element
+  getItemWidth?: (item: { label: string; value: T }, idx: number, arr: { label: string; value: T }[]) => number
+  scrollToCurrentOptionOnMount?: boolean
 }
 
 const defaultAnimation = {
@@ -72,6 +72,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
     renderBubble,
     scrollToCurrentOptionOnMount = true,
     renderOption,
+    touchableProps,
   } = {
     ...(_SegmentedControl.defaultProps || {}),
     ...props,
@@ -92,7 +93,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
 
   const scrollRef = useRef<SegmentedControlRef>(null)
 
-  function scrollTo(idx:number) {
+  function scrollTo(idx: number) {
     if (!scrollRef.current) return
     setTimeout(() => {
       scrollRef.current?.scrollToPosition?.(widthStyle.width * idx, 0, true)
@@ -115,7 +116,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
 
   const currentOptionIdx = options.findIndex(o => o.value === value) || 0
 
-  const onPress = (txt:string, idx: number) => {
+  const onPress = (txt: string, idx: number) => {
     return () => {
       onValueChange(txt)
       scrollTo(idx)
@@ -167,7 +168,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
   const largestWidth = useRef(0)
 
   return (<View style={variantStyles.wrapper}>
-    <InputLabel label={label} styles={labelStyles} required={false}/>
+    <InputLabel label={label} styles={labelStyles} required={false} />
     <Scroll
       horizontal
       showsHorizontalScrollIndicator={false}
@@ -213,6 +214,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
                 largestWidth.current = 0
               }
             }}
+            {...touchableProps}
           />
         ))}
       </View>
@@ -225,8 +227,9 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
 _SegmentedControl.defaultProps = {
   renderBubble: DefaultBubble,
   renderOption: SegmentedControlOption,
+  touchableProps: {},
 }
 
-type SegControlComponent = <T = string>(props: SegmentedControlProps<T> & {ref?: React.Ref<SegmentedControlRef>}) => ReactElement
+type SegControlComponent = <T = string>(props: SegmentedControlProps<T> & { ref?: React.Ref<SegmentedControlRef> }) => ReactElement
 
 export const SegmentedControl = _SegmentedControl as SegControlComponent

package/src/components/TextInput/index.tsx

@@ -38,7 +38,7 @@ export type TextInputProps =
     _error?: string
   } & Pick<PropsOf<typeof Touchable>, 'onPress'>
 
-const defaultProps:Partial<TextInputProps> = {
+const defaultProps: Partial<TextInputProps> = {
   hiddenIcon: 'input-visiblity:hidden' as IconPlaceholder,
   visibleIcon: 'input-visiblity:visible' as IconPlaceholder,
 }
@@ -182,6 +182,7 @@ const TextInputComponent = forwardRef<NativeTextInput, TextInputProps>((props, i
       ...(inputBaseProps.innerWrapperProps || {}),
       onPress,
       debugName,
+      dismissKeyboard: false,
     }}
     rightIcon={rightIcon}
     focused={isFocused}
@@ -246,7 +247,7 @@ export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props)
 
   const [search, setSearch] = !TypeGuards.isNil(value) && !!onValueChange ? [value, onValueChange] : useState('')
 
-  const setSearchTimeout = React.useRef<NodeJS.Timeout|null>(null)
+  const setSearchTimeout = React.useRef<NodeJS.Timeout | null>(null)
 
   const handleChangeSearch = (value: string) => {
     setSearch(value)

package/src/components/Touchable/index.tsx

@@ -14,6 +14,7 @@ import { TouchableComposition, TouchablePresets } from './styles'
 import { StylesOf } from '../../types'
 import { View } from '../View'
 import { usePressableFeedback } from '../../utils'
+import { Keyboard } from 'react-native'
 
 import { PressableRipple } from '../../modules/PressableRipple'
 export type TouchableProps =
@@ -39,6 +40,7 @@ export type TouchableProps =
     analyticsEnabled?: boolean
     analyticsName?: string
     analyticsData?: Record<string, any>
+    dismissKeyboard?: boolean
   }
 
 export * from './styles'
@@ -50,6 +52,7 @@ const defaultProps: Partial<TouchableProps> = {
   analyticsEnabled: false,
   analyticsName: null,
   analyticsData: {},
+  dismissKeyboard: true,
 }
 const _Touchable = forwardRef<
   RNView,
@@ -71,6 +74,7 @@ const _Touchable = forwardRef<
     analyticsEnabled,
     analyticsName,
     analyticsData = {},
+    dismissKeyboard,
     ...props
   } = {
     ...defaultProps,
@@ -109,12 +113,16 @@ const _Touchable = forwardRef<
         debugName || variants,
         'User interaction',
       )
+      if (dismissKeyboard) {
+        Keyboard.dismiss()
+      }
       if (analyticsEnabled) {
         const name = analyticsName || debugName
         if (!!name?.trim?.()) {
           logger.analytics?.interaction(name, analyticsData)
         }
       }
+
       onPress && onPress()
     }
     if (TypeGuards.isNumber(debounce)) {

package/src/types/index.ts

@@ -1,6 +1,9 @@
 export * from './utility'
 
+export type ComponentWithDefaultProps<P = any> = ((props: P) => JSX.Element) & {
+  defaultProps: Partial<P>
+}
 
-export type ComponentWithDefaultProps<P> = React.FC<P> & {
+export type ForwardRefComponentWithDefaultProps<P = any, R = any> = ((props: P, ref: R) => JSX.Element) & {
   defaultProps: Partial<P>
-}
+}