@codeleap/mobile 2.1.8 → 2.2.0

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

@@ -30,6 +30,7 @@ export const MultiSelect = <T extends string|number = string>(selectProps:MultiS
     inputProps = {},
     clearable = false,
     clearIconName = 'close',
+    validate = null,
     ...drawerProps
   } = selectProps
 
@@ -80,18 +81,16 @@ export const MultiSelect = <T extends string|number = string>(selectProps:MultiS
   }
 
   const isEmpty = value.length === 0
-
-  const inputIcon = clearable ? (
-    isEmpty ? arrowIconName : clearIconName
-  ) : arrowIconName
+  const showClearIcon = !isEmpty && clearable
+  const inputIcon = showClearIcon ? clearIconName : arrowIconName
 
   const onPressInputIcon = () => {
-    if (isEmpty) {
-      close?.()
-    }
-    if (clearable) {
+    if (showClearIcon) {
       onValueChange([])
+    } else {
+      close?.()
     }
+
   }
   return <>
     {
@@ -114,6 +113,7 @@ export const MultiSelect = <T extends string|number = string>(selectProps:MultiS
           debugName={'Select input'}
           styles={inputStyles}
           style={style}
+          validate={validate}
           {...inputProps}
         />
       )

package/src/components/MultiSelect/types.ts

@@ -37,5 +37,6 @@ export type MultiSelectProps<T> = MultiSelectDrawerProps & {
     listProps?: Partial<FlatListProps>
     clearable?: boolean
     clearIconName?: IconPlaceholder
+    validate?: TextInputProps['validate']
   } & ComponentVariants<typeof MultiSelectStyles>
 

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,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 } 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
 
@@ -90,19 +91,28 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
     />
   }
   const isEmpty = TypeGuards.isNil(value)
+  const showClearIcon = !isEmpty && clearable
 
-  const inputIcon = clearable ? (
-    isEmpty ? arrowIconName : clearIconName
-  ) : arrowIconName
+  const inputIcon = showClearIcon ? clearIconName : arrowIconName
 
   const onPressInputIcon = () => {
-    if (isEmpty) {
-      close?.()
-    }
-    if (clearable) {
+    if (showClearIcon) {
       onValueChange(null)
+    } else {
+      close?.()
     }
+
+  }
+
+  const baseListProps = {
+    data: options,
+    style: variantStyles.list,
+    contentContainerStyle: variantStyles.listContent,
+    keyExtractor: (i) => i.value,
+    renderItem: renderListItem,
+    ...listProps,
   }
+
   return <>
     {
       !hideInput && (
@@ -112,6 +122,7 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
           rightIcon={{
             icon: inputIcon as IconPlaceholder,
             onPress: onPressInputIcon,
+            noFeedback: true,
           }}
           editable={false}
           touchableWrapper
@@ -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'
@@ -36,6 +37,7 @@ export type CustomSelectProps<T> = SelectDrawerProps & {
     inputProps?: Partial<TextInputProps>
     listProps?: Partial<FlatListProps>
     clearable?: boolean
-    clearIconName?: 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,