@codeleap/mobile 3.13.3 → 3.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "3.13.3",
+  "version": "3.14.0",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/components/ActionIcon/index.tsx

@@ -7,9 +7,12 @@ import { Icon, IconProps } from '../Icon'
 import { Touchable, TouchableProps } from '../Touchable'
 import { ActionIconComposition, ActionIconPresets } from './styles'
 
+/** * IconButton */
 export type ActionIconProps= {
     iconProps?: Partial<IconProps>
+    /** prop */
     icon?: IconProps['name']
+    /** prop */
     name?: IconProps['name']
     styles?: StylesOf<ActionIconComposition> | StylesOf<ActionIconComposition>[]
 } & Omit<TouchableProps, 'styles' | 'variants'> & ComponentVariants<typeof ActionIconPresets> & BadgeComponentProps

package/src/components/Modal/index.tsx

@@ -10,6 +10,7 @@ import {
   TypeGuards,
   useDefaultComponentStyle,
   useRef,
+  useCodeleapContext,
 } from '@codeleap/common'
 import {
   ModalComposition,
@@ -24,6 +25,7 @@ import { useAnimatedVariantStyles, useBackButton } from '../../utils/hooks'
 import { Text, TextProps } from '../Text'
 import { Touchable } from '../Touchable'
 import { ActionIcon } from '../ActionIcon'
+import { useState } from 'react'
 
 export * from './styles'
 
@@ -101,7 +103,7 @@ const DefaultHeader = (props: ModalHeaderProps) => {
     )}</>
 }
 
-export const Modal = (modalProps:ModalProps) => {
+export const Modal = (modalProps: ModalProps) => {
   const {
     variants = [],
     styles = {},
@@ -125,6 +127,9 @@ export const Modal = (modalProps:ModalProps) => {
     ...Modal.defaultProps,
     ...modalProps,
   }
+  const [modalHeight, setModalHeight] = useState(0)
+  const { Theme } = useCodeleapContext()
+
   const variantStyles = useDefaultComponentStyle('u:Modal', {
     variants: variants as any,
     transform: StyleSheet.flatten,
@@ -157,7 +162,10 @@ export const Modal = (modalProps:ModalProps) => {
   const ScrollComponent = scroll ? Scroll : View
   const scrollStyle = scroll ? getStyles('scroll') : getStyles('innerWrapper')
 
-  const headerProps:ModalHeaderProps = {
+  const heightThreshold = Theme.values.height * 0.75
+  const topSpacing = modalHeight > heightThreshold ? variantStyles.topSpacing : Theme.spacing.paddingTop(0)
+
+  const headerProps: ModalHeaderProps = {
 
     ...modalProps,
     closable,
@@ -178,9 +186,17 @@ export const Modal = (modalProps:ModalProps) => {
     }
   }, [visible, toggle, closeOnHardwareBackPress])
 
+  const onModalLayout = (event) => {
+    const { height } = event.nativeEvent.layout
+    setModalHeight(height)
+    props?.onLayout?.(event)
+  }
+
   return (
     <View
-      style={[wrapperStyle, { zIndex: TypeGuards.isNumber(zIndex) ? zIndex : wrapperStyle?.zIndex }]}
+      style={[wrapperStyle, {
+        zIndex: TypeGuards.isNumber(zIndex) ? zIndex : wrapperStyle?.zIndex, ...topSpacing,
+      }]}
       pointerEvents={visible ? 'auto' : 'none'}
     >
 
@@ -189,9 +205,9 @@ export const Modal = (modalProps:ModalProps) => {
         'wrapper:visible': variantStyles['backdrop:visible'],
         wrapper: variantStyles.backdrop,
       }}
-      wrapperProps={{
-        transition: { ...variantStyles['backdrop:transition'] },
-      }}
+        wrapperProps={{
+          transition: { ...variantStyles['backdrop:transition'] },
+        }}
       />
       <ScrollComponent
         style={scrollStyle}
@@ -200,11 +216,11 @@ export const Modal = (modalProps:ModalProps) => {
         keyboardAware
         animated
 
-        { ...scrollProps}
+        {...scrollProps}
       >
         {dismissOnBackdrop &&
           <Touchable
-            onPress={closable && visible ? toggle : (() => {})}
+            onPress={closable && visible ? toggle : (() => { })}
             debounce={400}
             debugName={'Modal backdrop touchable'}
             style={variantStyles.backdropTouchable}
@@ -215,11 +231,11 @@ export const Modal = (modalProps:ModalProps) => {
         <View
           animated
           style={[getStyles('box'), boxAnimationStyles]}
-
           {...props}
+          onLayout={onModalLayout}
         >
 
-          {header ? header : <Header {...headerProps}/>}
+          {header ? header : <Header {...headerProps} />}
 
           <View style={getStyles('body')}>{children}</View>
           {footer && (
@@ -230,7 +246,7 @@ export const Modal = (modalProps:ModalProps) => {
         </View>
 
       </ScrollComponent>
-    </View>
+    </View >
 
   )
 }

package/src/components/Modal/styles.ts

@@ -20,6 +20,7 @@ export type ModalParts =
   | 'description'
   | 'titleWrapper'
   | `closeButton${Capitalize<ActionIconComposition>}`
+  | 'topSpacing'
 
 export type ModalComposition =
   | ModalParts

package/src/components/Touchable/index.tsx

@@ -36,10 +36,21 @@ export type TouchableProps =
     rippleDisabled?: boolean
     children?: React.ReactNode
     style?: StyleProp<ViewStyle>
+    analyticsEnabled?: boolean
+    analyticsName?: string
+    analyticsData?: Record<string, any>
   }
 
 export * from './styles'
-
+const defaultProps: Partial<TouchableProps> = {
+  variants: [],
+  debounce: 500,
+  noFeedback: false,
+  rippleDisabled: false,
+  analyticsEnabled: false,
+  analyticsName: null,
+  analyticsData: {},
+}
 const _Touchable = forwardRef<
   RNView,
   TouchableProps
@@ -51,14 +62,20 @@ const _Touchable = forwardRef<
     style,
     debugName,
     debugComponent,
-    debounce = 500,
+    debounce,
     leadingDebounce,
-    noFeedback = false,
+    noFeedback,
     styles,
     setPressed,
-    rippleDisabled = false,
+    rippleDisabled,
+    analyticsEnabled,
+    analyticsName,
+    analyticsData = {},
     ...props
-  } = touchableProps
+  } = {
+    ...defaultProps,
+    ...touchableProps,
+  }
 
   const pressed = React.useRef(!!leadingDebounce)
 
@@ -92,6 +109,12 @@ const _Touchable = forwardRef<
         debugName || variants,
         'User interaction',
       )
+      if (analyticsEnabled) {
+        const name = analyticsName || debugName
+        if (!!name?.trim?.()) {
+          logger.analytics?.interaction(name, analyticsData)
+        }
+      }
       onPress && onPress()
     }
     if (TypeGuards.isNumber(debounce)) {
@@ -240,4 +263,8 @@ const _Touchable = forwardRef<
   )
 })
 
-export const Touchable = _Touchable as ((props: TouchableProps) => JSX.Element)
+export const Touchable = _Touchable as ((props: TouchableProps) => JSX.Element) & {
+  defaultProps: Partial<TouchableProps>
+}
+
+Touchable.defaultProps = defaultProps