@codeleap/mobile 2.1.9 → 2.2.1

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 } from '../../utils'
+import { ModalManager, useKeyboardAwareView } from '../../utils'
 import { Icon } from '../Icon'
 
 export const SelectItem = ({ item, icon = null, isSelected, styles, onPress }) => {
@@ -46,6 +46,7 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
     selectedIcon = 'selectMarker',
     inputProps = {},
     hideInput = false,
+
     ...drawerProps
   } = selectProps
 
@@ -102,6 +103,16 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
     }
 
   }
+
+  const baseListProps = {
+    data: options,
+    style: variantStyles.list,
+    contentContainerStyle: variantStyles.listContent,
+    keyExtractor: (i) => i.value,
+    renderItem: renderListItem,
+    ...listProps,
+  }
+
   return <>
     {
       !hideInput && (
@@ -132,12 +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']>
-        data={options}
-        style={variantStyles.list}
-        contentContainerStyle={variantStyles.listContent}
-        keyExtractor={(i) => i.value}
-        renderItem={renderListItem}
-        {...listProps}
+        {...baseListProps}
       />
     </ModalManager.Drawer>
 

package/src/components/Select/styles.ts

@@ -49,6 +49,8 @@ export const SelectStyles = {
       list: {
         height: 'auto',
 
+        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,5 +38,6 @@ export type CustomSelectProps<T> = SelectDrawerProps & {
     listProps?: Partial<FlatListProps>
     clearable?: boolean
     clearIconName?: IconPlaceholder
+    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,
     },
   })),

package/src/utils/KeyboardAware/index.ts

@@ -4,6 +4,7 @@ import listenToKeyboardEvents from './lib/KeyboardAwareHOC'
 import KeyboardAwareScrollView from './lib/KeyboardAwareScrollView'
 import KeyboardAwareFlatList from './lib/KeyboardAwareFlatList'
 import KeyboardAwareSectionList from './lib/KeyboardAwareSectionList'
+export * from './keyboardHooks'
 
 export {
   listenToKeyboardEvents,

package/src/utils/KeyboardAware/keyboardHooks.ts

@@ -0,0 +1,155 @@
+import { PropsOf, TypeGuards, useCodeleapContext } from '@codeleap/common'
+import { useEffect, useState } from 'react'
+import {
+  Keyboard,
+  Platform,
+  KeyboardEvent,
+  KeyboardEventName,
+  Dimensions,
+  ScrollView,
+  StyleSheet,
+} from 'react-native'
+
+type KeyboardVisibilityEvents = {
+    show: KeyboardEventName
+    hide: KeyboardEventName
+}
+
+export const useKeyboard = () => {
+  const [keyboardEvent, setKeyboardEvent] = useState<KeyboardEvent>(null)
+  const [keyboardVisible, setKeyboardVisible] = useState(false)
+
+  useEffect(() => {
+    const eventNames = Platform.select<KeyboardVisibilityEvents>({
+      ios: {
+        show: 'keyboardWillShow',
+        hide: 'keyboardWillHide',
+      },
+      android: {
+        show: 'keyboardDidShow',
+        hide: 'keyboardDidHide',
+      },
+    })
+    const events = [
+      Keyboard.addListener(eventNames.show, (e) => {
+        setKeyboardVisible(true)
+        setKeyboardEvent(e)
+      }),
+      Keyboard.addListener(eventNames.hide, (e) => {
+        setKeyboardVisible(false)
+        setKeyboardEvent(e)
+      }),
+    ]
+    return () => {
+      events.forEach(e => e.remove())
+    }
+  }, [])
+
+  const _return = {
+    event: keyboardEvent,
+    isVisible: keyboardVisible,
+    height: keyboardEvent?.endCoordinates?.height || 0,
+    ...Keyboard,
+  }
+
+  return _return
+}
+type ScrollViewProps = Partial<
+  Pick<
+  PropsOf<typeof ScrollView>,
+  'horizontal' | 'contentContainerStyle' | 'style'
+  >
+>
+
+export type GetKeyboardAwarePropsOptions = {
+  baseStyleProp?: 'style' | 'contentContainerStyle'
+  adapt?: 'height' | 'maxHeight' | 'paddingBottom' | 'marginBottom' | 'bottom'
+  enabled?: boolean
+  enableOnAndroid?: boolean
+}
+type UseKeyboardAwareViewParams = {
+  debugName?: string
+}
+export const useKeyboardAwareView = (params?: UseKeyboardAwareViewParams) => {
+  const keyboard = useKeyboard()
+  const { logger } = useCodeleapContext()
+  function getKeyboardAwareProps<T extends ScrollViewProps>(
+    props?:T,
+    options?: GetKeyboardAwarePropsOptions,
+  ): T {
+    const _options:GetKeyboardAwarePropsOptions = {
+      adapt: 'maxHeight',
+      baseStyleProp: 'style',
+      enabled: true,
+      enableOnAndroid: true,
+      ...options,
+    }
+
+    if (!_options.enabled || props?.horizontal || (Platform.OS === 'android' && !_options.enableOnAndroid)) return props
+
+    if (!props) {
+      props = {} as T
+    }
+    const baseStyle = StyleSheet.flatten(props[_options.baseStyleProp] || {})
+
+    const baseValue = baseStyle[_options.adapt] as number
+    let valid = true
+    const warnOnNotNumber = () => {
+      if (!TypeGuards.isNil(baseValue) && !TypeGuards.isNumber(baseValue)) {
+        valid = false
+        const debugStr = params?.debugName ? 'at ' + params?.debugName + ' ' : ''
+        logger.warn(
+          `${_options.baseStyleProp}.${_options.adapt} must be a number or not be set at all`,
+          { props, options: _options },
+          'useKeyboardAwareView' + debugStr,
+        )
+      }
+    }
+
+    const newStyleProp = {
+      ...baseStyle,
+    }
+
+    switch (_options.adapt) {
+      case 'height':
+        warnOnNotNumber()
+        const baseHeight = baseValue || 0
+        newStyleProp.height = baseHeight - keyboard.height
+        break
+      case 'maxHeight':
+        if (keyboard.isVisible) {
+          warnOnNotNumber()
+          const baseMaxHeight = baseValue || Dimensions.get('window').height
+          newStyleProp.maxHeight = baseMaxHeight - keyboard.height
+          // break
+        }
+        break
+      case 'paddingBottom':
+        warnOnNotNumber()
+        const basePaddingBottom = baseValue || 0
+        newStyleProp.paddingBottom = basePaddingBottom + keyboard.height
+        break
+      case 'marginBottom':
+        warnOnNotNumber()
+        const baseMarginBottom = baseValue || 0
+        newStyleProp.marginBottom = baseMarginBottom + keyboard.height
+        break
+      case 'bottom':
+        warnOnNotNumber()
+        const baseBottom = baseValue || 0
+        newStyleProp.bottom = baseBottom + keyboard.height
+        break
+    }
+
+    if (!valid) return props
+
+    return {
+      ...props,
+      [_options.baseStyleProp]: newStyleProp,
+    }
+  }
+  return {
+    keyboard,
+    getKeyboardAwareProps,
+  }
+}

package/src/utils/hooks.ts

@@ -1,5 +1,5 @@
 import { onMount, onUpdate, shadeColor, TypeGuards, usePrevious, useRef, useState } from '@codeleap/common'
-import { Animated, AppState, AppStateStatus, Platform, PressableAndroidRippleConfig } from 'react-native'
+import { Animated, AppState, AppStateStatus, Platform, PressableAndroidRippleConfig, BackHandler } from 'react-native'
 
 export function useAnimateColor(value: string, opts?: Partial<Animated.TimingAnimationConfig>) {
   const iters = useRef(0)
@@ -143,3 +143,21 @@ export function usePressableFeedback(styles: any, config:UsePressableFeedbackCon
     rippleConfig,
   }
 }
+
+export function useBackButton(cb: () => boolean|void, deps = []) {
+  onUpdate(() => {
+    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {
+      const stopBubbling = cb()
+
+      if (TypeGuards.isBoolean(stopBubbling)) {
+        return stopBubbling
+      }
+
+      return false
+
+    })
+    return () => {
+      subscription.remove()
+    }
+  }, deps)
+}