@codeleap/mobile 2.3.16 → 2.3.20

package/src/components/Select/styles.ts

@@ -1,15 +1,15 @@
-import { createDefaultVariantFactory, TextInputComposition } from '@codeleap/common'
+import { assignTextStyle, createDefaultVariantFactory, TextInputComposition } from '@codeleap/common'
 import { DrawerComposition, DrawerStyles } from '../Drawer'
+import { ListComposition } from '../List'
+import { ModalComposition } from '../Modal'
 type ItemStates = '' | ':selected'
 export type SelectComposition =
-  DrawerComposition |
+  ModalComposition |
   `input${TextInputComposition}` |
-  'list' |
+  `list${Capitalize<ListComposition>}` |
   'listContent' |
   `itemWrapper${ItemStates}` |
   `itemText${ItemStates}` |
-  'scroll' |
-  'scrollContent' |
   `itemIcon${ItemStates}`
 
 const createSelectStyle = createDefaultVariantFactory<SelectComposition>()
@@ -17,46 +17,124 @@ const createSelectStyle = createDefaultVariantFactory<SelectComposition>()
 export const SelectStyles = {
   ...DrawerStyles,
   default: createSelectStyle((theme) => {
-    const defaultStyle = DrawerStyles.default(theme)
 
     return {
-      ...defaultStyle,
+      wrapper: {
+        ...theme.presets.absolute,
+        // ...theme.presets.whole,
+        ...theme.presets.fullHeight,
+        ...theme.presets.fullWidth,
+      },
+      'box:transition': {
+        scale: {
+          duration: theme.values.transitions.modal.duration,
+          type: 'timing',
+        },
+        opacity: {
+          duration: theme.values.transitions.modal.duration,
+          type: 'timing',
+        },
+      },
+      'backdrop:transition': {
+        opacity: {
+          duration: theme.values.transitions.modal.duration,
+          type: 'timing',
+        },
+      },
+      backdrop: {
+        ...theme.presets.absolute,
+        ...theme.presets.whole,
+
+        backgroundColor: theme.colors.black,
+
+      },
+      backdropTouchable: {
+        // height: '100%',
+        ...theme.presets.absolute,
+        ...theme.presets.whole,
+
+      },
+      'backdrop:visible': {
+        opacity: 0.5,
+      },
+      'backdrop:hidden': {
+        opacity: 0,
+      },
+      innerWrapper: {
+
+      },
+      scroll: {
+        flex: 1,
+        // maxHeight: theme.values.height,
+      },
+      scrollContent: {
+        ...theme.presets.alignCenter,
+        ...theme.presets.justifyCenter,
+        minHeight: '100%',
+        ...theme.presets.safeAreaTop(theme.values.innerSpacing.Y),
+        ...theme.presets.safeAreaBottom(theme.values.innerSpacing.Y),
+      },
       box: {
-        ...theme.spacing.paddingHorizontal(0),
+        backgroundColor: theme.colors.background,
+        width: theme.values.width - theme.spacing.value(theme.values.innerSpacing.X * 2),
+        borderRadius: theme.borderRadius.modalOuter,
+        ...theme.spacing.paddingHorizontal(theme.values.innerSpacing.X),
+        ...theme.spacing.paddingVertical(theme.values.innerSpacing.Y),
+      },
+
+      'box:hidden': {
+        opacity: 0,
+        scale: 0.8,
 
       },
+      'box:visible': {
+        opacity: 1,
+        scale: 1,
+      },
+      header: {
+        flexDirection: 'row',
+        ...theme.presets.justifySpaceBetween,
+        ...theme.presets.alignCenter,
+      },
+      closeButtonTouchableWrapper: {
+        alignSelf: 'center',
+        ...theme.spacing.marginLeft('auto'),
+      },
+      closeButtonIcon: {
+        color: theme.colors.text,
+      },
+      title: {
+        ...assignTextStyle('h3')(theme).text,
+      },
+      listWrapper: {
+        height: 'auto',
+      },
+
       itemWrapper: {
         ...theme.presets.row,
         ...theme.presets.justifySpaceBetween,
         ...theme.presets.alignCenter,
-        ...theme.spacing.padding(1.4),
-        height: 50,
+        borderRadius: theme.borderRadius.medium,
+        ...theme.spacing.padding(1),
+        backgroundColor: theme.colors.backgroundSecondary,
       },
       'itemWrapper:selected': {
         backgroundColor: theme.colors.primary,
       },
-      'itemText:selected': {
-        color: theme.colors.white,
+      'itemIcon:selected': {
+        color: theme.colors.backgroundSecondary,
+        ...theme.sized(2),
 
       },
-      'itemIcon:selected': {
-        color: theme.colors.white,
-        ...theme.sized(3),
+      'itemText:selected': {
+        color: theme.colors.backgroundSecondary,
+
       },
       itemIcon: {
-        width: 0,
         height: 0,
-      },
-      list: {
-        height: 'auto',
-
-        maxHeight: theme.values.window.height * 0.75,
+        width: 0,
 
       },
-      // listContent: {
-      //   paddingBottom: theme.values.safeAreaTop,
-      // },
-
     }
   }),
 }

package/src/components/Select/types.ts

@@ -2,19 +2,26 @@ import {
   ComponentVariants,
   FormTypes,
   IconPlaceholder,
+  PropsOf,
 } from '@codeleap/common'
 import { StylesOf } from '../../types/utility'
 import { GetKeyboardAwarePropsOptions } from '../../utils'
 import { DrawerProps } from '../Drawer'
+import { Icon } from '../Icon'
 import { FlatListProps } from '../List'
+import { Text } from '../Text'
 import { TextInputProps } from '../TextInput'
+import { Touchable } from '../Touchable'
 import { SelectComposition, SelectStyles } from './styles'
 
-export type SelectRenderFNProps<T> = & {
+export type SelectRenderFNProps<T> = {
   styles: StylesOf<SelectComposition>
   onPress: () => void
   isSelected?: boolean
   item: FormTypes.Options<T>[number]
+  touchableProps?: Partial<PropsOf<typeof Touchable>>
+  textProps?: Partial<PropsOf<typeof Text>>
+  iconProps?: Partial<PropsOf<typeof Icon>>
 }
 
 export type SelectRenderFN<T> = (props: SelectRenderFNProps<T>) => JSX.Element
@@ -39,5 +46,8 @@ export type CustomSelectProps<T> = SelectDrawerProps & {
     clearable?: boolean
     clearIconName?: IconPlaceholder
     keyboardAware?: GetKeyboardAwarePropsOptions
+    itemProps?: Partial<
+      Pick<SelectRenderFNProps<any>, 'iconProps'|'textProps'|'touchableProps'
+    >>
   } & ComponentVariants<typeof SelectStyles>
 

package/src/components/TextInput/index.tsx

@@ -211,7 +211,9 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
           styles={leftIconStyles}
           commonStyles={commonIconStyles}
           debugName={`${debugName} left icon`}
-          onPress={() => {}}
+          onPress={() => {
+            input?.current?.focus?.()
+          }}
           noFeedback={!leftIcon?.onPress}
           {...leftIcon}
         />

package/src/components/Touchable/index.tsx

@@ -44,7 +44,7 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
     style,
     debugName,
     debugComponent,
-    debounce = 1000,
+    debounce = 500,
     noFeedback = false,
     styles,
     ...props
@@ -119,7 +119,6 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
       'height!',
       'flex!',
       'backgroundColor!',
-
     ]
 
     const wrapperStyle = {} as any
@@ -144,7 +143,10 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
         pressableStyle[key] = value
       }
     })
-
+    if (wrapperStyle.position === 'absolute') {
+      pressableStyle.width = '100%'
+      pressableStyle.height = '100%'
+    }
     wrapperStyle.overflow = 'hidden'
     // wrapperStyle.flexDirection = 'row'
     // wrapperStyle.alignItems = 'stretch'

package/src/components/View/index.tsx

@@ -7,6 +7,7 @@ import {
   ViewStyles,
   BaseViewProps,
   useCodeleapContext,
+  useMemo,
 } from '@codeleap/common'
 import { View as NativeView } from 'react-native'
 import { MotiView, MotiProps } from 'moti'
@@ -73,26 +74,37 @@ type GapProps = ViewProps & {
 
 export const Gap:React.FC<GapProps> = ({ children, value, defaultProps = {}, ...props }) => {
   const { Theme } = useCodeleapContext()
+  const childArr = React.Children.toArray(children)
+
   const horizontal = props.variants?.includes('row')
+  const spacings = useMemo(() => {
+    return childArr.map((_, idx) => {
+      let spacingFunction = horizontal ? 'marginHorizontal' : 'marginVertical'
+
+      switch (idx) {
+        case 0:
+          spacingFunction = horizontal ? 'marginRight' : 'marginBottom'
+          break
+        case childArr.length - 1:
+          spacingFunction = horizontal ? 'marginLeft' : 'marginTop'
+          break
+        default:
+          break
+      }
+
+      return Theme.spacing[spacingFunction](value / 2)
+    })
+
+  }, [childArr.length, horizontal])
+
   return (
     <View {...props}>
       {
-        React.Children.toArray(children).map((Element, idx, childArr) => {
+        childArr.map((Element, idx, childArr) => {
           if (React.isValidElement(Element)) {
             const props = { ...Element.props, ...defaultProps }
 
-            let spacingFunction = horizontal ? 'marginHorizontal' : 'marginVertical'
-            switch (idx) {
-              case 0:
-                spacingFunction = horizontal ? 'marginRight' : 'marginBottom'
-                break
-              case childArr.length - 1:
-                spacingFunction = horizontal ? 'marginLeft' : 'marginTop'
-                break
-              default:
-                break
-            }
-            props.style = [props.style, Theme.spacing[spacingFunction](value / 2)]
+            props.style = [props.style, spacings[idx]]
             return React.cloneElement(Element, props)
           }
           return Element

package/src/utils/KeyboardAware/context.tsx

@@ -21,7 +21,7 @@ export const KeyboardCtx = React.createContext({} as TKeyboardCtx)
 export const KeyboardProvider = ({ children }) => {
   const [keyboardEvent, setKeyboardEvent] = useState<KeyboardEvent>(null)
   const [keyboardVisible, setKeyboardVisible] = useState(false)
-  const { Theme } = useCodeleapContext()
+
   useEffect(() => {
     const eventNames = Platform.select<KeyboardVisibilityEvents>({
       ios: {
@@ -50,17 +50,12 @@ export const KeyboardProvider = ({ children }) => {
     }
   }, [])
 
-  let adjustKeyboard = 0
-
-  if (Platform.OS === 'android') {
-    adjustKeyboard = Theme.values.safeAreaTop
-  }
   const height = keyboardEvent?.endCoordinates?.height ?? 0
 
   const _return = {
     event: keyboardEvent,
     isVisible: keyboardVisible,
-    height: (!!height && keyboardVisible) ? height + adjustKeyboard : 0,
+    height: (!!height && keyboardVisible) ? height : 0,
     ...Keyboard,
   }
 

package/src/utils/KeyboardAware/lib/KeyboardAwareInterface.ts

@@ -1,10 +1,10 @@
 /* @flow */
 
 export interface KeyboardAwareInterface {
-  getScrollResponder: () => void,
+  getScrollResponder: () => void
   scrollToPosition: (x: number, y: number, animated?: boolean) => void,
-  scrollToEnd: (animated?: boolean) => void,
-  scrollForExtraHeightOnAndroid: (extraHeight: number) => void,
+  scrollToEnd: (animated?: boolean) => void
+  scrollForExtraHeightOnAndroid: (extraHeight: number) => void
   scrollToFocusedInput: (
     reactNode: Object,
     extraHeight: number,

package/src/utils/PermissionManager/context.tsx

@@ -193,7 +193,7 @@ export function usePermissionModal(permissionName: string) {
   const permissionCtx = usePermissions()
   const modalState = modals.state[modalId]
 
-  const currentState = permissionCtx.state[permissionName]
+  const currentState = permissionCtx?.state?.[permissionName]
   const status = currentState
   const [debouncedStatus, reset] = useDebounce(status, modals.transitionDuration * 0.5)
 

package/src/utils/hooks.ts

@@ -1,5 +1,7 @@
 import { onMount, onUpdate, shadeColor, TypeGuards, usePrevious, useRef, useState } from '@codeleap/common'
 import { Animated, AppState, AppStateStatus, Platform, PressableAndroidRippleConfig, BackHandler } from 'react-native'
+// @ts-ignore
+import AsyncStorage from '@react-native-community/async-storage'
 
 export function useAnimateColor(value: string, opts?: Partial<Animated.TimingAnimationConfig>) {
   const iters = useRef(0)
@@ -161,3 +163,51 @@ export function useBackButton(cb: () => boolean|void, deps = []) {
     }
   }, deps)
 }
+type StateSetter<T> = T | ((prev:T) => T)
+
+export function useAsyncStorageState<T>(key:string, defaultValue?: T) {
+  const [value, _setValue] = useState<T>(undefined)
+
+  onMount(() => {
+    AsyncStorage.getItem(key).then(val => {
+      let storedValue = defaultValue
+
+      if (val) {
+        storedValue = JSON.parse(val)
+      }
+
+      _setValue(storedValue)
+    })
+  })
+
+  const setValue = (to: StateSetter<T>) => {
+    return new Promise<void>((resolve, reject) => {
+      _setValue((prev) => {
+        let newValue = prev
+        try {
+
+          if (typeof to !== 'function') {
+            newValue = to
+          } else {
+            const fn = to as ((prev:T) => T)
+            newValue = fn(value)
+          }
+
+          const jsonVal = JSON.stringify(newValue)
+
+          AsyncStorage.setItem(key, jsonVal).then(resolve).catch(reject)
+          resolve()
+          return newValue
+        } catch (e) {
+          reject(e)
+          return newValue
+        }
+
+      })
+    })
+
+  }
+
+  return [value, setValue] as [T, typeof setValue]
+}
+

package/src/utils/theme.ts

@@ -9,7 +9,7 @@ type AppValues = {
 export function getMobileThemeValues(initialWindowMetrics, values: AppValues) {
   const screenDimensions = Dimensions.get('screen')
 
-  const hasNotch = Platform.OS === 'ios' ? (Dimensions.get('window').height >= 812) : (initialWindowMetrics?.insets?.top > 24 || StatusBar.currentHeight > 24)
+  const hasNotch = DeviceInfo.hasNotch()
   const hasIsland = DeviceInfo.hasDynamicIsland()
   const bottomNavHeight = Platform.OS === 'android' ? initialWindowMetrics?.insets?.bottom : 0