@codeleap/mobile 2.1.9 → 2.2.1

package/src/components/AutoComplete/styles.ts

@@ -19,8 +19,7 @@ export const AutoCompleteStyles = {
         ...theme.presets.alignStart,
       },
       box: {
-        minHeight: theme.values.height * 0.85,
-        maxHeight: theme.values.height * 0.85,
+        maxHeight: theme.values.window.height * 0.85,
       },
       listContent: {
         ...theme.presets.safeAreaBottom(0, true),

package/src/components/Drawer/index.tsx

@@ -8,7 +8,7 @@ export * from './styles'
 export type DrawerProps = Omit<ModalProps, 'variants'> & ComponentVariants<typeof DrawerStyles>
 
 export const Drawer:React.FC<DrawerProps> = (props) => {
-  const { variants, styles, ...modalProps } = props
+  const { variants, styles, scrollProps, ...modalProps } = props
 
   const variantStyles = useDefaultComponentStyle('u:Drawer', {
     variants,
@@ -18,7 +18,17 @@ export const Drawer:React.FC<DrawerProps> = (props) => {
 
   return <Modal
     styles={variantStyles}
+    scroll={false}
 
     {...modalProps}
+    scrollProps={{
+      ...scrollProps,
+      keyboardAware: {
+        adapt: 'height',
+        baseStyleProp: 'style',
+
+        ...scrollProps?.keyboardAware,
+      },
+    }}
   />
 }

package/src/components/Drawer/styles.ts

@@ -13,15 +13,15 @@ export const DrawerStyles = {
       ...defaultStyle,
       box: {
         width: '100%',
-        maxHeight: theme.values.height * 0.7,
-        paddingBottom: (theme.values.bottomNavHeight ?? 0) + theme.spacing.value(1),
+        maxHeight: theme.values.window.height * 0.99,
+
       },
-      innerWrapperScroll: {
+      innerWrapper: {
         ...theme.presets.justifyEnd,
       },
 
       'box:hidden': {
-        translateY: theme.values.height,
+        translateY: theme.values.window.height,
         opacity: 1,
         scale: 1,
       },

package/src/components/EmptyPlaceholder/styles.ts

@@ -18,7 +18,7 @@ export const EmptyPlaceholderStyles = {
   default: createEmptyPlaceholderStyle((theme) => ({
     wrapper: {
       ...theme.presets.center,
-      minHeight: theme.values.height / 2,
+      minHeight: theme.values.window.height / 2,
       height: '100%',
       flex: 1,
     },

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

@@ -7,6 +7,7 @@ import {
   getNestedStylesByKey,
   IconPlaceholder,
   onUpdate,
+  PropsOf,
   TypeGuards,
   useDefaultComponentStyle,
 } from '@codeleap/common'
@@ -20,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'
 
@@ -43,8 +44,9 @@ export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
   zIndex?: number
   scroll?: boolean
   header?: React.ReactElement
-  keyboardAware?: boolean
+  closeOnHardwareBackPress?: boolean
   renderHeader?: (props: ModalHeaderProps) => React.ReactElement
+  scrollProps?: PropsOf<typeof Scroll>
 }
 
 export type ModalHeaderProps = Omit<ModalProps, 'styles' | 'renderHeader'> & {
@@ -95,8 +97,9 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     debugName,
     scroll = true,
     renderHeader,
-    keyboardAware = true,
     zIndex = null,
+    scrollProps = {},
+    closeOnHardwareBackPress = true,
     ...props
   } = modalProps
 
@@ -127,7 +130,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
   }, [visible])
   const wrapperStyle = getStyles('wrapper')
   const ScrollComponent = scroll ? Scroll : View
-  const scrollStyle = scroll ? getStyles('innerWrapper') : [getStyles('innerWrapper'), getStyles('innerWrapperScroll')]
+  const scrollStyle = scroll ? getStyles('scroll') : getStyles('innerWrapper')
 
   const headerProps:ModalHeaderProps = {
     ...modalProps,
@@ -139,6 +142,13 @@ 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 }]}
@@ -156,9 +166,8 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
       />
       <ScrollComponent
         style={scrollStyle}
-        contentContainerStyle={getStyles('innerWrapperScroll')}
-        scrollEnabled={scroll}
-        keyboardAware={keyboardAware}
+        contentContainerStyle={getStyles('scrollContent')}
+        {...scrollProps}
       >
         {dismissOnBackdrop &&
           <Touchable
@@ -168,6 +177,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
             android_ripple={null}
             noFeedback
           />}
+
         <View
           animated
           state={boxAnimation}
@@ -185,6 +195,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
             </View>
           )}
         </View>
+
       </ScrollComponent>
     </View>
 

package/src/components/Modal/styles.ts

@@ -11,7 +11,9 @@ export type ModalParts =
   | AnimatableParts
   | 'wrapper'
   | 'innerWrapper'
-  | 'innerWrapperScroll'
+
+  | 'scrollContent'
+  | 'scroll'
   | 'body'
   | 'footer'
   | 'header'
@@ -32,39 +34,41 @@ 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: Theme?.values?.width,
-      height: Theme?.values?.height,
+      width: '100%',
+      height: '100%',
     }
 
     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: {
@@ -76,18 +80,25 @@ export const ModalStyles = {
       'backdrop:hidden': {
         opacity: 0,
       },
-      innerWrapper: {},
-      innerWrapperScroll: {
-        display: 'flex',
-        alignItems: 'center',
-        ...Theme.presets.justifyCenter,
-        minHeight: Theme.values.height,
+      innerWrapper: {
+        ...theme.presets.alignCenter,
+        ...theme.presets.justifyCenter,
+        ...theme.presets.fullHeight,
+        ...theme.presets.fullWidth,
+      },
+      scroll: {
+        ...fullSize,
+      },
+      scrollContent: {
+        ...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': {
@@ -101,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,
       },
     }
@@ -128,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/MultiSelect/index.tsx

@@ -82,7 +82,7 @@ export const MultiSelect = <T extends string|number = string>(selectProps:MultiS
 
   const isEmpty = value.length === 0
   const showClearIcon = !isEmpty && clearable
-  const inputIcon = showClearIcon ? arrowIconName : clearIconName
+  const inputIcon = showClearIcon ? clearIconName : arrowIconName
 
   const onPressInputIcon = () => {
     if (showClearIcon) {

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,8 @@ import { ViewProps } from '../View'
 import { KeyboardAwareScrollViewTypes } from '../../modules'
 import { StylesOf } from '../../types'
 import { ScrollComposition, ScrollStyles } from './styles'
-import { KeyboardAwareScrollView } from '../../utils'
+import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
+// import { KeyboardAwareScrollView } from '../../utils'
 
 type KeyboardAwareScrollViewProps = KeyboardAwareScrollViewTypes.KeyboardAwareScrollViewProps
 
@@ -22,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>(
@@ -38,7 +39,9 @@ export const Scroll = forwardRef<ScrollView, ScrollProps>(
       changeData,
       styles = {},
       refreshControlProps = {},
-      keyboardAware = true,
+      contentContainerStyle,
+      keyboardAware,
+      debugName = '',
       ...props
     } = scrollProps
     const hasRefresh = !!props.onRefresh
@@ -69,37 +72,47 @@ export const Scroll = forwardRef<ScrollView, ScrollProps>(
         }
       }
     }, [refreshingDisplay, changeData])
-    const { Theme } = useCodeleapContext()
 
     const variantStyles = useDefaultComponentStyle<'u:Scroll', typeof ScrollStyles>('u:Scroll', {
       variants,
       styles,
       transform: StyleSheet.flatten,
-      rootElement: 'wrapper',
+      rootElement: 'content',
     })
 
-    const Component = keyboardAware ? KeyboardAwareScrollView : ScrollView
     const refreshStyles = StyleSheet.flatten([variantStyles.refreshControl, styles.refreshControl])
+    const _scrollProps = {
+      style: [variantStyles.wrapper, style],
+      contentContainerStyle: [variantStyles.content, contentContainerStyle],
+      ref: ref as unknown as ScrollView,
+      refreshControl: hasRefresh && (
+        <RefreshControl
+          refreshing={refreshingDisplay}
+          onRefresh={onRefresh}
+          tintColor={refreshStyles?.color}
+          colors={[refreshStyles?.color]}
+          {...refreshControlProps}
+        />
+      ),
+      ...props,
+    }
+    const keyboard = useKeyboardAwareView({
+      debugName,
+    })
+
+    const rootProps = keyboard.getKeyboardAwareProps(_scrollProps, {
+      adapt: 'marginBottom',
+      baseStyleProp: 'style',
+      ...keyboardAware,
+
+    })
+
     return (
-      <Component
-        style={[Theme.presets.full, style]}
-        contentContainerStyle={[variantStyles.wrapper]}
-        ref={ref as unknown as ScrollView}
-        refreshControl={
-          hasRefresh && (
-            <RefreshControl
-              refreshing={refreshingDisplay}
-              onRefresh={onRefresh}
-              tintColor={refreshStyles?.color}
-              colors={[refreshStyles?.color]}
-              {...refreshControlProps}
-            />
-          )
-        }
-        {...props}
+      <ScrollView
+        {...rootProps}
       >
         {children}
-      </Component>
+      </ScrollView>
     )
   },
 )

package/src/components/SegmentedControl/index.tsx

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