@codeleap/mobile 2.3.19 → 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/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 &&

package/src/components/Modal/styles.ts

@@ -1,9 +1,9 @@
 import {
   assignTextStyle,
-  ButtonComposition,
   createDefaultVariantFactory,
   includePresets,
 } from '@codeleap/common'
+import { ActionIconComposition } from '../ActionIcon'
 
 export type AnimatableParts = 'box' | 'backdrop'
 
@@ -11,7 +11,6 @@ export type ModalParts =
   | AnimatableParts
   | 'wrapper'
   | 'innerWrapper'
-
   | 'scrollContent'
   | 'scroll'
   | 'body'
@@ -19,7 +18,7 @@ export type ModalParts =
   | 'header'
   | 'backdropTouchable'
   | 'title'
-  | `closeButton${Capitalize<ButtonComposition>}`
+  | `closeButton${Capitalize<ActionIconComposition>}`
 
 export type ModalComposition =
   | ModalParts
@@ -32,26 +31,14 @@ const createModalStyle = createDefaultVariantFactory<ModalComposition>()
 const presets = includePresets((style) => createModalStyle(() => ({ body: style })))
 
 export const ModalStyles = {
-
   ...presets,
   default: createModalStyle((theme) => {
-    const fullSize = {
-      ...theme.presets.whole,
-      position: 'absolute',
-      width: theme.values.width,
-      height: theme.values.height,
-      maxHeight: theme.values.height,
-    }
-
     return {
       wrapper: {
-        zIndex: 1,
-        height: theme.values.height,
-        width: theme.values.width,
-        ...theme.presets.whole,
-        position: 'absolute',
-        ...theme.presets.safeAreaTop(),
-        paddingBottom: theme.values.bottomNavHeight,
+        ...theme.presets.absolute,
+        // ...theme.presets.whole,
+        ...theme.presets.fullHeight,
+        ...theme.presets.fullWidth,
       },
       'box:transition': {
         scale: {
@@ -70,12 +57,17 @@ export const ModalStyles = {
         },
       },
       backdrop: {
+        ...theme.presets.absolute,
+        ...theme.presets.whole,
 
         backgroundColor: theme.colors.black,
-        ...fullSize,
+
       },
       backdropTouchable: {
-        ...fullSize,
+        // height: '100%',
+        ...theme.presets.absolute,
+        ...theme.presets.whole,
+
       },
       'backdrop:visible': {
         opacity: 0.5,
@@ -84,28 +76,25 @@ export const ModalStyles = {
         opacity: 0,
       },
       innerWrapper: {
-        ...theme.presets.alignCenter,
-        ...theme.presets.justifyCenter,
-        width: theme.values.width,
-        flex: 1,
+
       },
       scroll: {
-        width: theme.values.width,
-        height: theme.values.window.height,
-        maxHeight: theme.values.window.height,
+        flex: 1,
+        // maxHeight: theme.values.height,
       },
       scrollContent: {
         ...theme.presets.alignCenter,
         ...theme.presets.justifyCenter,
-        ...theme.spacing.paddingVertical(2),
-        ...theme.presets.fullWidth,
-        flex: 1,
+        flexGrow: 1,
+        ...theme.presets.safeAreaTop(theme.values.innerSpacing.Y),
+        ...theme.presets.safeAreaBottom(theme.values.innerSpacing.Y),
       },
       box: {
-        width: '80%',
         backgroundColor: theme.colors.background,
-        borderRadius: theme.borderRadius.medium,
-        ...theme.spacing.padding(2),
+        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': {
@@ -121,33 +110,34 @@ export const ModalStyles = {
         flexDirection: 'row',
         ...theme.presets.justifySpaceBetween,
         ...theme.presets.alignCenter,
+        ...theme.presets.alignSelfStretch,
+        ...theme.spacing.marginBottom(1),
       },
-      closeButtonWrapper: {
+      closeButtonTouchableWrapper: {
         alignSelf: 'center',
         ...theme.spacing.marginLeft('auto'),
       },
+      closeButtonIcon: {
+        color: theme.colors.text,
+      },
       title: {
-        ...theme.presets.textCenter,
         ...assignTextStyle('h3')(theme).text,
-        ...theme.spacing.paddingBottom(1),
-        flex: 1,
       },
     }
   }),
   popup: createModalStyle(() => ({})),
   fullscreen: createModalStyle((theme) => ({
-    overlay: {
-      backgroundColor: theme.colors.background,
-    },
-    'overlay:visible': {
-      opacity: 1,
+    scrollContent: {
+      paddingTop: 0,
+      paddingBottom: 0,
     },
     box: {
-      flex: 1,
+      width: '100%',
+      flexGrow: 1,
       borderRadius: 0,
-      width: theme.values.width,
-      height: theme.values.window.height,
       ...theme.presets.center,
+      ...theme.presets.safeAreaTop(theme.values.innerSpacing.Y),
+      ...theme.presets.safeAreaBottom(theme.values.innerSpacing.Y),
     },
   })),
 }

package/src/components/MultiSelect/index.tsx

@@ -32,6 +32,7 @@ export const MultiSelect = <T extends string|number = string>(selectProps:MultiS
     clearIconName = 'close',
     limit = null,
     validate = null,
+    itemProps = {},
     ...drawerProps
   } = selectProps
 
@@ -81,6 +82,8 @@ export const MultiSelect = <T extends string|number = string>(selectProps:MultiS
       onPress={() => select(item.value)}
       styles={variantStyles}
       icon={selectedIcon as IconPlaceholder}
+      {...itemProps}
+
     />
   }
 
@@ -123,16 +126,19 @@ export const MultiSelect = <T extends string|number = string>(selectProps:MultiS
       )
     }
 
-    <ModalManager.Drawer scroll={false} title={label} {...drawerProps} styles={variantStyles}>
+    <ModalManager.Modal title={label} {...drawerProps} styles={variantStyles} id={null}>
       <List<MultiSelectProps<any>['options']>
         data={options}
-        style={variantStyles.list}
-        contentContainerStyle={variantStyles.listContent}
+        styles={getNestedStylesByKey('list', variantStyles)}
         keyExtractor={(i) => i.value}
+        separators
+        keyboardAware={{
+          enabled: false,
+        }}
         renderItem={renderListItem}
         {...listProps}
       />
-    </ModalManager.Drawer>
+    </ModalManager.Modal>
 
   </>
 }