@codeleap/mobile 2.1.10 → 2.2.0

package/src/components/Grid/index.tsx

@@ -11,7 +11,7 @@ import { View, ViewProps } from '../View'
 import { EmptyPlaceholder, EmptyPlaceholderProps } from '../EmptyPlaceholder'
 import { GridComposition, GridStyles } from './styles'
 import { StylesOf } from '../../types'
-import { listenToKeyboardEvents } from '../../utils'
+import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
 
 export type DataboundFlatGridPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
 
@@ -28,8 +28,6 @@ export type ReplaceFlatGridProps<P, T> = Omit<P, DataboundFlatGridPropsTypes> &
 
 export * from './styles'
 
-const KeyboardAwareFlatGrid = listenToKeyboardEvents(FlatGrid)
-
 export type GridProps<
   T = any[],
   Data = T extends Array<infer D> ? D : never
@@ -37,7 +35,8 @@ export type GridProps<
   Omit<ViewProps, 'variants'> & {
     separators?: boolean
     placeholder?: EmptyPlaceholderProps
-    keyboardAware?: boolean
+    keyboardAware?: GetKeyboardAwarePropsOptions
+    debugName?: string
     styles?: StylesOf<GridComposition>
     refreshControlProps?: Partial<RefreshControlProps>
   } & ComponentVariants<typeof GridStyles>
@@ -51,7 +50,8 @@ const GridCP = forwardRef<FlatGrid, GridProps>(
       onRefresh,
       refreshing,
       placeholder,
-      keyboardAware = true,
+      keyboardAware,
+      debugName,
       refreshControlProps = {},
       ...props
     } = flatGridProps
@@ -73,16 +73,15 @@ const GridCP = forwardRef<FlatGrid, GridProps>(
     const isEmpty = !props.data || !props.data.length
     const separator = !isEmpty && separatorProp == true && renderSeparator
 
-    const Component = keyboardAware ? KeyboardAwareFlatGrid : FlatGrid
     const refreshStyles = StyleSheet.flatten([variantStyles.refreshControl, styles.refreshControl])
-
-    return (
-      <Component
-        style={[variantStyles.wrapper, style]}
-        contentContainerStyle={variantStyles.content}
-        ref={ref as unknown as FlatGrid}
-        ItemSeparatorComponent={separator}
-        refreshControl={
+    const Component = FlatGrid
+
+    const _gridProps = {
+      style: [variantStyles.wrapper, style],
+      contentContainerStyle: variantStyles.content,
+      ref: ref as unknown as FlatGrid,
+      ItemSeparatorComponent: separator,
+      refreshControl:
           !!onRefresh && (
             <RefreshControl
               refreshing={refreshing}
@@ -91,11 +90,22 @@ const GridCP = forwardRef<FlatGrid, GridProps>(
               colors={[refreshStyles?.color]}
               {...refreshControlProps}
             />
-          )
-        }
+          ),
 
-        ListEmptyComponent={<EmptyPlaceholder {...placeholder}/>}
-        {...props}
+      ListEmptyComponent: <EmptyPlaceholder {...placeholder}/>,
+      ...props,
+    }
+    const keyboard = useKeyboardAwareView({
+      debugName,
+    })
+    const gridProps = keyboard.getKeyboardAwareProps(_gridProps, {
+      baseStyleProp: 'contentContainerStyle',
+      adapt: 'paddingBottom',
+      ...keyboardAware,
+    })
+    return (
+      <Component
+        {...gridProps}
       />
     )
   },

package/src/components/ImageView/Spotlight.tsx

@@ -45,7 +45,6 @@ export function useSpotlight(name: string) {
 
   const imList =
     Object.values(ctx.spotlights[name] || {})
-      .sort((a, b) => a.created - b.created)
 
   return {
     images: imList,

package/src/components/List/index.tsx

@@ -5,6 +5,7 @@ import {
   useDefaultComponentStyle,
 
   ComponentVariants,
+  useCallback,
 } from '@codeleap/common'
 
 import { RefreshControl, FlatList, FlatListProps as RNFlatListProps, ListRenderItemInfo, StyleSheet, RefreshControlProps } from 'react-native'
@@ -12,7 +13,7 @@ import { View, ViewProps } from '../View'
 import { EmptyPlaceholder, EmptyPlaceholderProps } from '../EmptyPlaceholder'
 import { ListComposition, ListStyles } from './styles'
 import { StylesOf } from '../../types'
-import { KeyboardAwareFlatList } from '../../utils'
+import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
 
 export type DataboundFlatListPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
 
@@ -37,7 +38,7 @@ export type FlatListProps<
   Omit<ViewProps, 'variants'> & {
     separators?: boolean
     placeholder?: EmptyPlaceholderProps
-    keyboardAware?: boolean
+    keyboardAware?: GetKeyboardAwarePropsOptions
     styles?: StylesOf<ListComposition>
     refreshControlProps?: Partial<RefreshControlProps>
   } & ComponentVariants<typeof ListStyles>
@@ -52,7 +53,7 @@ const ListCP = forwardRef<FlatList, FlatListProps>(
       component,
       refreshing,
       placeholder,
-      keyboardAware = true,
+      keyboardAware,
       refreshControlProps = {},
       ...props
     } = flatListProps
@@ -64,39 +65,45 @@ const ListCP = forwardRef<FlatList, FlatListProps>(
 
     })
 
-    const renderSeparator = () => {
+    const renderSeparator = useCallback(() => {
       return (
         <View variants={['separator']}></View>
       )
-    }
+    }, [])
 
     const separatorProp = props.separators
     const isEmpty = !props.data || !props.data.length
     const separator = !isEmpty && separatorProp == true && renderSeparator
 
-    const Component:any = component || (keyboardAware ? KeyboardAwareFlatList : FlatList)
+    const Component:any = component || FlatList
     const refreshStyles = StyleSheet.flatten([variantStyles.refreshControl, styles.refreshControl])
 
+    const _listProps = {
+      style: [variantStyles.wrapper, style],
+      contentContainerStyle: variantStyles.content,
+      ref: ref as unknown as FlatList,
+      ItemSeparatorComponent: separator,
+      refreshControl: !!onRefresh && (
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={onRefresh}
+          tintColor={refreshStyles?.color}
+          colors={[refreshStyles?.color]}
+          {...refreshControlProps}
+        />
+      ),
+      ListEmptyComponent: <EmptyPlaceholder {...placeholder}/>,
+      ...props,
+    }
+    const keyboard = useKeyboardAwareView()
+    const listProps = keyboard.getKeyboardAwareProps(_listProps, {
+      adapt: 'paddingBottom',
+      baseStyleProp: 'contentContainerStyle',
+      ...keyboardAware,
+    })
     return (
       <Component
-        style={[variantStyles.wrapper, style]}
-        contentContainerStyle={variantStyles.content}
-        ref={ref as unknown as FlatList}
-        ItemSeparatorComponent={separator}
-        refreshControl={
-          !!onRefresh && (
-            <RefreshControl
-              refreshing={refreshing}
-              onRefresh={onRefresh}
-              tintColor={refreshStyles?.color}
-              colors={[refreshStyles?.color]}
-              {...refreshControlProps}
-            />
-          )
-        }
-
-        ListEmptyComponent={<EmptyPlaceholder {...placeholder}/>}
-        {...props}
+        {...listProps}
       />
     )
   },

package/src/components/Modal/index.tsx

@@ -21,7 +21,7 @@ import { StylesOf } from '../../types/utility'
 
 import { useDynamicAnimation } from 'moti'
 import { Backdrop } from '../Backdrop'
-import { useStaticAnimationStyles } from '../../utils/hooks'
+import { useBackButton, useStaticAnimationStyles } from '../../utils/hooks'
 import { Text, TextProps } from '../Text'
 import { Touchable } from '../Touchable'
 
@@ -44,6 +44,7 @@ export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
   zIndex?: number
   scroll?: boolean
   header?: React.ReactElement
+  closeOnHardwareBackPress?: boolean
   renderHeader?: (props: ModalHeaderProps) => React.ReactElement
   scrollProps?: PropsOf<typeof Scroll>
 }
@@ -98,6 +99,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     renderHeader,
     zIndex = null,
     scrollProps = {},
+    closeOnHardwareBackPress = true,
     ...props
   } = modalProps
 
@@ -139,6 +141,14 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     },
   }
   const Header = renderHeader || DefaultHeader
+
+  useBackButton(() => {
+    if (visible && closeOnHardwareBackPress) {
+      toggle()
+      return true
+    }
+  }, [visible, toggle, closeOnHardwareBackPress])
+
   return (
     <View
       style={[wrapperStyle, { zIndex: TypeGuards.isNumber(zIndex) ? zIndex : wrapperStyle?.zIndex }]}

package/src/components/Modal/styles.ts

@@ -34,9 +34,9 @@ const presets = includePresets((style) => createModalStyle(() => ({ body: style
 export const ModalStyles = {
 
   ...presets,
-  default: createModalStyle((Theme) => {
+  default: createModalStyle((theme) => {
     const fullSize = {
-      ...Theme.presets.whole,
+      ...theme.presets.whole,
       position: 'absolute',
       width: '100%',
       height: '100%',
@@ -45,28 +45,30 @@ export const ModalStyles = {
     return {
       wrapper: {
         zIndex: 1,
-
-        ...fullSize,
+        height: theme.values.height,
+        width: theme.values.width,
+        ...theme.presets.whole,
+        position: 'absolute',
       },
       'box:transition': {
         scale: {
-          duration: Theme.values.transitions.modal.duration,
+          duration: theme.values.transitions.modal.duration,
           type: 'timing',
         },
         opacity: {
-          duration: Theme.values.transitions.modal.duration,
+          duration: theme.values.transitions.modal.duration,
           type: 'timing',
         },
       },
       'backdrop:transition': {
         opacity: {
-          duration: Theme.values.transitions.modal.duration,
+          duration: theme.values.transitions.modal.duration,
           type: 'timing',
         },
       },
       backdrop: {
 
-        backgroundColor: Theme.colors.black,
+        backgroundColor: theme.colors.black,
         ...fullSize,
       },
       backdropTouchable: {
@@ -79,26 +81,24 @@ export const ModalStyles = {
         opacity: 0,
       },
       innerWrapper: {
-        display: 'flex',
-        alignItems: 'center',
-        ...Theme.presets.justifyCenter,
-        ...Theme.presets.fullHeight,
+        ...theme.presets.alignCenter,
+        ...theme.presets.justifyCenter,
+        ...theme.presets.fullHeight,
+        ...theme.presets.fullWidth,
       },
       scroll: {
-        height: '100%',
-        width: '100%',
+        ...fullSize,
       },
       scrollContent: {
-        display: 'flex',
-        alignItems: 'center',
-        ...Theme.presets.justifyCenter,
-        ...Theme.presets.fullHeight,
+        ...theme.presets.alignCenter,
+        ...theme.presets.justifyCenter,
+        ...theme.presets.full,
       },
       box: {
         width: '80%',
-        backgroundColor: Theme.colors.background,
-        borderRadius: Theme.borderRadius.medium,
-        ...Theme.spacing.padding(2),
+        backgroundColor: theme.colors.background,
+        borderRadius: theme.borderRadius.medium,
+        ...theme.spacing.padding(2),
       },
 
       'box:hidden': {
@@ -112,17 +112,17 @@ export const ModalStyles = {
       },
       header: {
         flexDirection: 'row',
-        ...Theme.presets.justifySpaceBetween,
-        ...Theme.presets.alignCenter,
+        ...theme.presets.justifySpaceBetween,
+        ...theme.presets.alignCenter,
       },
       closeButtonWrapper: {
         alignSelf: 'center',
-        ...Theme.spacing.marginLeft('auto'),
+        ...theme.spacing.marginLeft('auto'),
       },
       title: {
-        ...Theme.presets.textCenter,
-        ...assignTextStyle('h3')(Theme).text,
-        ...Theme.spacing.paddingBottom(1),
+        ...theme.presets.textCenter,
+        ...assignTextStyle('h3')(theme).text,
+        ...theme.spacing.paddingBottom(1),
         flex: 1,
       },
     }
@@ -139,7 +139,7 @@ export const ModalStyles = {
       flex: 1,
       borderRadius: 0,
       width: theme.values.width,
-      height: theme.values.height,
+      height: theme.values.window.height,
       ...theme.presets.center,
     },
   })),

package/src/components/Pager/styles.ts

@@ -53,7 +53,7 @@ export const PagerStyles = {
   ...presets,
   default: createPagerStyle((theme) => {
     const width = theme.values.width
-    const height = theme.values.height * 0.8
+    const height = theme.values.window.height * 0.8
     return {
       ...pagerAnimation(height, width, 'X'),
       page: {
@@ -67,15 +67,15 @@ export const PagerStyles = {
       },
     }
   }),
-  horizontal: createPagerStyle((Theme) => {
+  horizontal: createPagerStyle((theme) => {
 
-    const width = Theme.values.width
-    const height = Theme.values.height * 0.8
+    const width = theme.values.width
+    const height = theme.values.window.height * 0.8
     return pagerAnimation(height, width, 'X')
   }),
-  vertical: createPagerStyle((Theme) => {
-    const height = Theme.values.height * 0.8
-    const width = Theme.values.width
+  vertical: createPagerStyle((theme) => {
+    const height = theme.values.window.height * 0.8
+    const width = theme.values.width
     return pagerAnimation(height, width, 'Y')
   }),
 }

package/src/components/Scroll/index.tsx

@@ -5,7 +5,6 @@ import {
   onUpdate,
   useDefaultComponentStyle,
   usePrevious,
-  useCodeleapContext,
 } from '@codeleap/common'
 
 import { RefreshControl, RefreshControlProps, ScrollView, StyleSheet } from 'react-native'
@@ -13,7 +12,7 @@ import { ViewProps } from '../View'
 import { KeyboardAwareScrollViewTypes } from '../../modules'
 import { StylesOf } from '../../types'
 import { ScrollComposition, ScrollStyles } from './styles'
-import { useKeyboardScrollView } from '../../utils'
+import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
 // import { KeyboardAwareScrollView } from '../../utils'
 
 type KeyboardAwareScrollViewProps = KeyboardAwareScrollViewTypes.KeyboardAwareScrollViewProps
@@ -23,10 +22,11 @@ export type ScrollProps = KeyboardAwareScrollViewProps &
     onRefresh?: () => void
     refreshTimeout?: number
     changeData?: any
-    keyboardAware?: boolean
+    keyboardAware?: GetKeyboardAwarePropsOptions
     refreshing?: boolean
     styles?: StylesOf<ScrollComposition>
     refreshControlProps?: Partial<RefreshControlProps>
+    debugName?: string
   }
 
 export const Scroll = forwardRef<ScrollView, ScrollProps>(
@@ -40,7 +40,8 @@ export const Scroll = forwardRef<ScrollView, ScrollProps>(
       styles = {},
       refreshControlProps = {},
       contentContainerStyle,
-      keyboardAware = true,
+      keyboardAware,
+      debugName = '',
       ...props
     } = scrollProps
     const hasRefresh = !!props.onRefresh
@@ -71,7 +72,6 @@ export const Scroll = forwardRef<ScrollView, ScrollProps>(
         }
       }
     }, [refreshingDisplay, changeData])
-    const { Theme } = useCodeleapContext()
 
     const variantStyles = useDefaultComponentStyle<'u:Scroll', typeof ScrollStyles>('u:Scroll', {
       variants,
@@ -96,9 +96,16 @@ export const Scroll = forwardRef<ScrollView, ScrollProps>(
       ),
       ...props,
     }
-    const keyboard = useKeyboardScrollView()
-    const keyboardAwareScrollProps = keyboard.getScrollProps(_scrollProps)
-    const rootProps = keyboardAware ? keyboardAwareScrollProps : _scrollProps
+    const keyboard = useKeyboardAwareView({
+      debugName,
+    })
+
+    const rootProps = keyboard.getKeyboardAwareProps(_scrollProps, {
+      adapt: 'marginBottom',
+      baseStyleProp: 'style',
+      ...keyboardAware,
+
+    })
 
     return (
       <ScrollView

package/src/components/Scroll/styles.ts

@@ -8,8 +8,7 @@ export const ScrollStyles = {
   default: createScrollStyle((theme) => {
     return {
       wrapper: {
-        height: '100%',
-        // maxHeight: theme.values.height,
+        ...theme.presets.fullHeight,
       },
       refreshControl: {
         color: theme.colors.primary,

package/src/components/SegmentedControl/index.tsx

@@ -131,6 +131,7 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
       style={variantStyles.scroll}
       contentContainerStyle={variantStyles.scrollContent}
       {...scrollProps}
+      keyboardAware={false}
       ref={scrollRef}
     >
       <View style={variantStyles.wrapper}>

package/src/components/Select/index.tsx

@@ -10,7 +10,7 @@ import { TextInput } from '../TextInput'
 import { Touchable } from '../Touchable'
 import { SelectStyles } from './styles'
 import { CustomSelectProps } from './types'
-import { ModalManager, useKeyboardScrollView } from '../../utils'
+import { ModalManager, useKeyboardAwareView } from '../../utils'
 import { Icon } from '../Icon'
 
 export const SelectItem = ({ item, icon = null, isSelected, styles, onPress }) => {
@@ -46,7 +46,7 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
     selectedIcon = 'selectMarker',
     inputProps = {},
     hideInput = false,
-    keyboardAware = true,
+
     ...drawerProps
   } = selectProps
 
@@ -113,9 +113,6 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
     ...listProps,
   }
 
-  const keyboard = useKeyboardScrollView()
-  const _listProps = keyboardAware ? keyboard.getScrollProps(baseListProps, 'contentContainerStyle', 'paddingBottom') : baseListProps
-
   return <>
     {
       !hideInput && (
@@ -146,7 +143,7 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
 
     <ModalManager.Drawer scroll={false} title={label} {...drawerProps} styles={variantStyles}>
       <List<CustomSelectProps<any>['options']>
-        {..._listProps}
+        {...baseListProps}
       />
     </ModalManager.Drawer>
 

package/src/components/Select/styles.ts

@@ -49,8 +49,8 @@ export const SelectStyles = {
       list: {
         height: 'auto',
 
-        maxHeight: theme.values.height * 0.7,
-        ...theme.presets.safeAreaBottom(),
+        maxHeight: theme.values.window.height * 0.7,
+        // ...theme.presets.safeAreaBottom(),
       },
       listContent: {
         paddingBottom: theme.values.bottomNavHeight + theme.spacing.value(1),

package/src/components/Select/types.ts

@@ -4,6 +4,7 @@ import {
   IconPlaceholder,
 } from '@codeleap/common'
 import { StylesOf } from '../../types/utility'
+import { GetKeyboardAwarePropsOptions } from '../../utils'
 import { DrawerProps } from '../Drawer'
 import { FlatListProps } from '../List'
 import { TextInputProps } from '../TextInput'
@@ -37,6 +38,6 @@ export type CustomSelectProps<T> = SelectDrawerProps & {
     listProps?: Partial<FlatListProps>
     clearable?: boolean
     clearIconName?: IconPlaceholder
-    keyboardAware?: boolean
+    keyboardAware?: GetKeyboardAwarePropsOptions
   } & ComponentVariants<typeof SelectStyles>
 

package/src/components/legacy/Modal/index.tsx

@@ -19,6 +19,7 @@ import { StylesOf } from '../../../types/utility'
 import { Touchable } from '../../Touchable'
 import { Text } from '../../Text'
 import { Animated } from '../../Animated'
+import { GetKeyboardAwarePropsOptions } from '../../../utils'
 
 export * from './styles'
 
@@ -38,7 +39,7 @@ export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
   toggle?: () => void
   zIndex?: number
   scroll?: boolean
-  keyboardAware?: boolean
+  keyboardAware?: GetKeyboardAwarePropsOptions
 }
 
 export const Modal: React.FC<ModalProps> = (modalProps) => {
@@ -56,7 +57,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     closeIconName = 'close',
     debugName,
     scroll = true,
-    keyboardAware = true,
+    keyboardAware,
     zIndex = null,
     ...props
   } = modalProps

package/src/components/legacy/Modal/styles.ts

@@ -39,12 +39,12 @@ const defaultModalStyles = ModalStyles
 export const MobileModalStyles = {
   ...defaultModalStyles,
   ...presets,
-  default: createModalStyle((Theme) => {
+  default: createModalStyle((theme) => {
     const fullSize = {
-      ...Theme.presets.whole,
+      ...theme.presets.whole,
       position: 'absolute',
-      width: Theme?.values?.width,
-      height: Theme?.values?.height,
+      width: theme?.values?.width,
+      height: theme?.values?.height,
     }
 
     return {
@@ -57,7 +57,7 @@ export const MobileModalStyles = {
       overlay: {
         opacity: 0,
 
-        backgroundColor: Theme.colors.black,
+        backgroundColor: theme.colors.black,
         ...fullSize,
       },
       'overlay:visible': {
@@ -67,14 +67,14 @@ export const MobileModalStyles = {
       innerWrapperScroll: {
         display: 'flex',
         alignItems: 'center',
-        ...Theme.presets.justifyCenter,
-        minHeight: Theme.values.height,
+        ...theme.presets.justifyCenter,
+        minHeight: theme.values.window.height,
       },
       box: {
         width: '80%',
-        backgroundColor: Theme.colors.background,
-        borderRadius: Theme.borderRadius.medium,
-        ...Theme.spacing.padding(2),
+        backgroundColor: theme.colors.background,
+        borderRadius: theme.borderRadius.medium,
+        ...theme.spacing.padding(2),
       },
       touchableBackdrop: {
         ...fullSize,
@@ -91,17 +91,17 @@ export const MobileModalStyles = {
       },
       header: {
         flexDirection: 'row',
-        ...Theme.presets.justifySpaceBetween,
-        ...Theme.presets.alignCenter,
+        ...theme.presets.justifySpaceBetween,
+        ...theme.presets.alignCenter,
       },
       closeButtonWrapper: {
         alignSelf: 'center',
-        ...Theme.spacing.marginLeft('auto'),
+        ...theme.spacing.marginLeft('auto'),
       },
       title: {
-        ...Theme.presets.textCenter,
-        ...assignTextStyle('h3')(Theme).text,
-        ...Theme.spacing.paddingBottom(1),
+        ...theme.presets.textCenter,
+        ...assignTextStyle('h3')(theme).text,
+        ...theme.spacing.paddingBottom(1),
         flex: 1,
       },
     }
@@ -118,7 +118,7 @@ export const MobileModalStyles = {
       flex: 1,
       borderRadius: 0,
       width: theme.values.width,
-      height: theme.values.height,
+      height: theme.values.window.height,
       ...theme.presets.center,
     },
   })),