@codeleap/mobile 2.3.16 → 2.3.20

package/src/components/AutoComplete/styles.ts

@@ -9,22 +9,127 @@ const createAutoCompleteStyle = createDefaultVariantFactory<AutoCompleteComposit
 export const AutoCompleteStyles = {
   ...SelectStyles,
   default: createAutoCompleteStyle((theme) => {
-    const defaultStyle = SelectStyles.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: {
+        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,
+      },
+
+      closeButtonTouchableWrapper: {
+        alignSelf: 'center',
+        ...theme.spacing.marginLeft('auto'),
+      },
+      closeButtonIcon: {
+        color: theme.colors.text,
+      },
+
+      listWrapper: {
+        height: 'auto',
+      },
+
+      itemWrapper: {
+        ...theme.presets.row,
+        ...theme.presets.justifySpaceBetween,
+        ...theme.presets.alignCenter,
+        borderRadius: theme.borderRadius.medium,
+        ...theme.spacing.padding(1),
+        backgroundColor: theme.colors.backgroundSecondary,
+      },
+      'itemWrapper:selected': {
+        backgroundColor: theme.colors.primary,
+      },
+      'itemIcon:selected': {
+        color: theme.colors.backgroundSecondary,
+        ...theme.sized(2),
+
+      },
+      'itemText:selected': {
+        color: theme.colors.backgroundSecondary,
+
+      },
+      itemIcon: {
+        height: 0,
+        width: 0,
+      },
       header: {
-        ...theme.spacing.paddingHorizontal(2),
-        ...theme.spacing.paddingTop(1),
+        ...theme.spacing.paddingHorizontal(theme.values.innerSpacing.X),
+        ...theme.spacing.paddingVertical(theme.values.innerSpacing.Y),
         ...theme.presets.column,
         ...theme.presets.alignStart,
       },
-
       searchInputWrapper: {
         ...theme.presets.fullWidth,
         ...theme.spacing.marginTop(2),
       },
-
       titleWrapper: {
         ...theme.presets.row,
         ...theme.presets.alignCenter,
@@ -33,6 +138,7 @@ export const AutoCompleteStyles = {
       },
       title: {
         ...theme.presets.textCenter,
+        ...assignTextStyle('h3')(theme).text,
         flex: 1,
       },
       closeButtonWrapper: {

package/src/components/Calendar/types.ts

@@ -1,85 +1,85 @@
 import { FilterKeys } from '@codeleap/common'
 import { Paths } from '@codeleap/common/dist/types/pathMapping'
-import { TextStyle, ViewStyle } from 'react-native';
+import { TextStyle, ViewStyle } from 'react-native'
 
 type CalendarTheme = {
-    timelineContainer?: object;
-    contentStyle?: ViewStyle;
-    event?: object;
-    eventTitle?: object;
-    eventSummary?: object;
-    eventTimes?: object;
-    line?: object;
-    verticalLine?: object;
-    nowIndicatorLine?: object;
-    nowIndicatorKnob?: object;
-    timeLabel?: object;
-    todayTextColor?: string;
-    calendarBackground?: string;
-    indicatorColor?: string;
-    textSectionTitleColor?: string;
-    textSectionTitleDisabledColor?: string;
-    dayTextColor?: string;
-    selectedDayTextColor?: string;
-    monthTextColor?: string;
-    selectedDayBackgroundColor?: string;
-    arrowColor?: string;
-    textDisabledColor?: string;
-    textInactiveColor?: string;
+    timelineContainer?: object
+    contentStyle?: ViewStyle
+    event?: object
+    eventTitle?: object
+    eventSummary?: object
+    eventTimes?: object
+    line?: object
+    verticalLine?: object
+    nowIndicatorLine?: object
+    nowIndicatorKnob?: object
+    timeLabel?: object
+    todayTextColor?: string
+    calendarBackground?: string
+    indicatorColor?: string
+    textSectionTitleColor?: string
+    textSectionTitleDisabledColor?: string
+    dayTextColor?: string
+    selectedDayTextColor?: string
+    monthTextColor?: string
+    selectedDayBackgroundColor?: string
+    arrowColor?: string
+    textDisabledColor?: string
+    textInactiveColor?: string
     backgroundColor?: string; //TODO: remove in V2
-    dotColor?: string;
-    selectedDotColor?: string;
-    disabledArrowColor?: string;
-    textDayFontFamily?: TextStyle['fontFamily'];
-    textMonthFontFamily?: TextStyle['fontFamily'];
-    textDayHeaderFontFamily?: TextStyle['fontFamily'];
-    textDayFontWeight?: TextStyle['fontWeight'];
-    textMonthFontWeight?: TextStyle['fontWeight'];
-    textDayHeaderFontWeight?: TextStyle['fontWeight'];
-    textDayFontSize?: number;
-    textMonthFontSize?: number;
-    textDayHeaderFontSize?: number;
-    agendaDayTextColor?: string;
-    agendaDayNumColor?: string;
-    agendaTodayColor?: string;
-    agendaKnobColor?: string;
-    todayButtonFontFamily?: TextStyle['fontFamily'];
-    todayButtonFontWeight?: TextStyle['fontWeight'];
-    todayButtonFontSize?: number;
-    textDayStyle?: TextStyle;
-    dotStyle?: object;
-    arrowStyle?: ViewStyle;
-    todayBackgroundColor?: string;
-    disabledDotColor?: string;
-    inactiveDotColor?: string;
-    todayDotColor?: string;
-    todayButtonTextColor?: string;
-    todayButtonPosition?: string;
-    arrowHeight?: number;
-    arrowWidth?: number;
-    weekVerticalMargin?: number;
+    dotColor?: string
+    selectedDotColor?: string
+    disabledArrowColor?: string
+    textDayFontFamily?: TextStyle['fontFamily']
+    textMonthFontFamily?: TextStyle['fontFamily']
+    textDayHeaderFontFamily?: TextStyle['fontFamily']
+    textDayFontWeight?: TextStyle['fontWeight']
+    textMonthFontWeight?: TextStyle['fontWeight']
+    textDayHeaderFontWeight?: TextStyle['fontWeight']
+    textDayFontSize?: number
+    textMonthFontSize?: number
+    textDayHeaderFontSize?: number
+    agendaDayTextColor?: string
+    agendaDayNumColor?: string
+    agendaTodayColor?: string
+    agendaKnobColor?: string
+    todayButtonFontFamily?: TextStyle['fontFamily']
+    todayButtonFontWeight?: TextStyle['fontWeight']
+    todayButtonFontSize?: number
+    textDayStyle?: TextStyle
+    dotStyle?: object
+    arrowStyle?: ViewStyle
+    todayBackgroundColor?: string
+    disabledDotColor?: string
+    inactiveDotColor?: string
+    todayDotColor?: string
+    todayButtonTextColor?: string
+    todayButtonPosition?: string
+    arrowHeight?: number
+    arrowWidth?: number
+    weekVerticalMargin?: number
     stylesheet?: {
       calendar?: {
-        main?: object; 
-        header?: object;
-      };
+        main?: object
+        header?: object
+      }
       day?: {
-        basic?: object; 
-        period?: object;
-      };
-      dot?: object;
-      marking?: object;
+        basic?: object
+        period?: object
+      }
+      dot?: object
+      marking?: object
       'calendar-list'?: {
-        main?: object;
-      };
+        main?: object
+      }
       agenda?: {
-        main?: object; 
-        list?: object;
-      };
+        main?: object
+        list?: object
+      }
       expandable?: {
-        main?: object;
-      };
-    };
+        main?: object
+      }
+    }
   }
 
 type FlatStyleKeys = 'dot' | 'marking'

package/src/components/EmptyPlaceholder/index.tsx

@@ -16,18 +16,25 @@ import {
   EmptyPlaceholderStyles,
 } from './styles'
 
-import { StyleSheet } from 'react-native'
+import { ImageSourcePropType, StyleSheet, Image as RNImage } from 'react-native'
 import { StylesOf } from '../../types'
+import { Image } from '../Image'
 
 export * from './styles'
 
 export type EmptyPlaceholderProps = {
   itemName?: string
-  title?: React.ReactElement
+
+  title?: React.ReactElement | string
+  description?: React.ReactElement | string
+  image?: ImageSourcePropType
+  icon?: IconPlaceholder
+
   loading?: boolean
+
   styles?: StylesOf<EmptyPlaceholderComposition>
   variants?: ComponentVariants<typeof EmptyPlaceholderStyles>['variants']
-  emptyIconName?: IconPlaceholder
+
   renderEmpty?: (props: {
     emptyText:string | React.ReactElement
     emptyIconName?: IconPlaceholder
@@ -40,14 +47,16 @@ export const EmptyPlaceholder:React.FC<EmptyPlaceholderProps> = (props: EmptyPla
     itemName,
     title,
     loading,
+    description,
+    image,
     styles = {},
     variants = [],
-    emptyIconName = 'placeholder',
+    icon = null,
     renderEmpty,
   } = props
   const emptyText = title || (itemName && `No ${itemName} found.`) || 'No items.'
 
-  const componentStyles = useDefaultComponentStyle('EmptyPlaceholder', {
+  const componentStyles = useDefaultComponentStyle<'u:EmptyPlaceholder', typeof EmptyPlaceholderStyles>('u:EmptyPlaceholder', {
     variants,
     transform: StyleSheet.flatten,
     styles,
@@ -69,7 +78,7 @@ export const EmptyPlaceholder:React.FC<EmptyPlaceholderProps> = (props: EmptyPla
       <View style={componentStyles.wrapper}>
         {renderEmpty({
           emptyText,
-          emptyIconName: emptyIconName as IconPlaceholder,
+          emptyIconName: icon as IconPlaceholder,
           styles: {
             ...componentStyles,
             activityIndicatorStyles,
@@ -79,10 +88,25 @@ export const EmptyPlaceholder:React.FC<EmptyPlaceholderProps> = (props: EmptyPla
     )
   }
 
+  let _image = null
+
+  if (icon) {
+    _image = <Icon name={icon} style={componentStyles.icon}/>
+  } else if (image) {
+    _image = <Image source={image} style={[
+      componentStyles.image,
+
+    ]}/>
+  }
+
   return (
     <View style={componentStyles.wrapper}>
-      <Icon name={emptyIconName as IconPlaceholder} style={componentStyles.icon}/>
-      <Text text={emptyText} style={componentStyles.text}/>
+      <View style={componentStyles.imageWrapper}>
+        {_image}
+      </View>
+
+      {React.isValidElement(emptyText) ? emptyText : <Text text={emptyText} style={componentStyles.title}/> }
+      {React.isValidElement(description) ? description : <Text text={description} style={componentStyles.description}/> }
     </View>
   )
 }

package/src/components/EmptyPlaceholder/styles.ts

@@ -5,7 +5,10 @@ export type EmptyPlaceholderComposition =
   | 'wrapper:loading'
   | `loader${Capitalize<ActivityIndicatorComposition>}`
   | 'wrapper'
-  | 'text'
+  | 'title'
+  | 'description'
+  | 'image'
+  | 'imageWrapper'
   | 'icon'
 
 const createEmptyPlaceholderStyle = createDefaultVariantFactory<EmptyPlaceholderComposition>()
@@ -17,24 +20,24 @@ export const EmptyPlaceholderStyles = {
   ...presets,
   default: createEmptyPlaceholderStyle((theme) => ({
     wrapper: {
+      flexGrow: 1,
       ...theme.presets.center,
-      minHeight: theme.values.window.height / 2,
-      height: '100%',
-      flex: 1,
     },
-    loaderWrapper: {
-
-      ...theme.spacing.marginVertical(8),
-      ...theme.presets.center,
-      ...theme.presets.flex,
-    },
-    icon: {
-      color: theme.colors.placeholder,
-      size: theme.spacing.value(24),
+    title: {
+      ...assignTextStyle('h3')(theme).text,
+      ...theme.spacing.marginBottom(theme.values.innerSpacing.Y),
     },
-    text: {
+    description: {
       ...assignTextStyle('p1')(theme).text,
-      ...theme.presets.textCenter,
+    },
+    imageWrapper: {
+      ...theme.spacing.paddingBottom(theme.values.innerSpacing.Y * 2),
+      ...theme.presets.fullWidth,
+      ...theme.presets.alignCenter,
+      height: '45%',
+    },
+    image: {
+      ...theme.presets.fullHeight,
     },
   })),
   compact: createEmptyPlaceholderStyle((theme) => ({

package/src/components/Image/index.tsx

@@ -38,10 +38,20 @@ export type ImageProps = Omit<NativeImageProps, 'source' | 'style'> & {
     | number
   resizeMode?: keyof typeof FastImage.resizeMode
   spotlight?: string
+  maintainAspectRatioFrom?: 'width' | 'height' | 'none'
 }
 
 export const ImageComponent: React.FC<ImageProps> = (props) => {
-  const { variants, style, fast = true, spotlight = null, resizeMode = 'contain', source, ...imageProps } = props
+  const {
+    variants,
+    style,
+    fast = true,
+    spotlight = null,
+    resizeMode = 'contain',
+    source,
+    maintainAspectRatioFrom = 'height',
+    ...imageProps
+  } = props
 
   const variantStyles = useDefaultComponentStyle<'u:Image', typeof ImageStyles>('u:Image', { variants })
 
@@ -60,12 +70,32 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
     style: [variantStyles.touchable],
     android_ripple: null,
   }
+
+  const aspectRatioStyle = React.useMemo(() => {
+    if (maintainAspectRatioFrom === 'none' || !imSource) return null
+    try {
+      // @ts-ignore
+      const assetSource = NativeImage.resolveAssetSource(imSource)
+      const aspectRatio = assetSource.width / assetSource.height
+
+      if (Number.isNaN(aspectRatio)) {
+        return null
+      }
+      return {
+        aspectRatio,
+      }
+    } catch (e) {
+      return null
+    }
+
+  }, [maintainAspectRatioFrom, imSource])
+
   if (fast) {
     return (
       <Wrapper {...wrapperProps}>
 
         <FastImage
-          style={styles}
+          style={[aspectRatioStyle, styles]}
           // @ts-ignore
           tintColor={styles?.tintColor}
           source={imSource}
@@ -76,7 +106,7 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
     )
   }
   return <Wrapper {...wrapperProps}>
-    <NativeImage style={styles} resizeMode={resizeMode} source={imSource} {...(imageProps as any)} />
+    <NativeImage style={[aspectRatioStyle, styles]} resizeMode={resizeMode} source={imSource} {...(imageProps as any)} />
 
   </Wrapper>
 }

package/src/components/List/styles.ts

@@ -1,11 +1,14 @@
-import { createDefaultVariantFactory } from '@codeleap/common'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ScrollComposition, ScrollStyles } from '../Scroll/styles'
 
 export type ListComposition = ScrollComposition | 'separator'
 
 const createListStyle = createDefaultVariantFactory<ListComposition>()
 
+const presets = includePresets(style => createListStyle(() => ({ content: style })))
+
 export const ListStyles = {
+  ...presets,
   default: createListStyle((theme) => {
     const defaultStyles = ScrollStyles.default(theme)
     return {
@@ -14,6 +17,9 @@ export const ListStyles = {
         width: '100%',
         height: theme.spacing.value(1),
       },
+      content: {
+        flexGrow: 1,
+      },
     }
   }),
 }

package/src/components/Modal/index.tsx

@@ -25,6 +25,7 @@ import { useBackButton, useStaticAnimationStyles } from '../../utils/hooks'
 import { Text, TextProps } from '../Text'
 import { Touchable } from '../Touchable'
 import { GetKeyboardAwarePropsOptions } from '../../utils'
+import { ActionIcon } from '../ActionIcon'
 
 export * from './styles'
 
@@ -43,6 +44,7 @@ export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
   visible: boolean
   toggle?: () => void
   zIndex?: number
+  description?: React.ReactElement
   scroll?: boolean
   header?: React.ReactElement
   closeOnHardwareBackPress?: boolean
@@ -57,12 +59,13 @@ export type ModalHeaderProps = Omit<ModalProps, 'styles' | 'renderHeader'> & {
     title: TextProps['style']
     closeButton: ButtonProps['styles']
   }
+  description?: React.ReactElement
 }
 
 const DefaultHeader:React.FC<ModalHeaderProps> = (props) => {
-  const { styles, title = null, showClose = false, closable, debugName, closeIconName = 'close', toggle } = props
+  const { styles, title = null, showClose = false, description = null, closable, debugName, closeIconName = 'close', toggle } = props
   return <>
-    {(title || showClose) && (
+    {(title || showClose || description) && (
       <View style={styles.wrapper}>
         {typeof title === 'string' ? (
           <Text text={title} style={styles.title} />
@@ -71,10 +74,9 @@ const DefaultHeader:React.FC<ModalHeaderProps> = (props) => {
         )}
 
         {(showClose && closable) && (
-          <Button
+          <ActionIcon
             debugName={`${debugName} modal close button`}
             icon={closeIconName as IconPlaceholder}
-            variants={['icon']}
             onPress={toggle}
             styles={styles.closeButton}
           />
@@ -104,7 +106,6 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     closeOnHardwareBackPress = true,
     ...props
   } = modalProps
-
   const variantStyles = useDefaultComponentStyle('u:Modal', {
     variants: variants as any,
     transform: StyleSheet.flatten,
@@ -136,7 +137,9 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
   const scrollStyle = scroll ? getStyles('scroll') : getStyles('innerWrapper')
 
   const headerProps:ModalHeaderProps = {
+
     ...modalProps,
+    closable,
     styles: {
       wrapper: getStyles('header'),
       title: getStyles('title'),
@@ -170,14 +173,16 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
       <ScrollComponent
         style={scrollStyle}
         contentContainerStyle={getStyles('scrollContent')}
+        showsVerticalScrollIndicator={false}
         keyboardAware= {{
-          adapt: 'marginBottom',
+          adapt: 'maxHeight',
           baseStyleProp: 'style',
           animated: true,
           enabled: visible,
-          enableOnAndroid: true,
+          // enableOnAndroid: true,
         }}
         animated
+        // ref={scrollRef}
         { ...scrollProps}
       >
         {dismissOnBackdrop &&