@codeleap/mobile 2.4.7 → 3.1.1

package/src/components/Grid/index.tsx

@@ -3,46 +3,45 @@ import { forwardRef } from 'react'
 import {
   useDefaultComponentStyle,
   ComponentVariants,
+  useCallback,
+  useCodeleapContext,
 } from '@codeleap/common'
 
-import { FlatGrid, FlatGridProps, GridRenderItemInfo } from 'react-native-super-grid'
-import { RefreshControl, StyleSheet, RefreshControlProps, ScrollView } from 'react-native'
+import { StyleSheet, ListRenderItemInfo } from 'react-native'
 import { View, ViewProps } from '../View'
-import { EmptyPlaceholder, EmptyPlaceholderProps } from '../EmptyPlaceholder'
-import { GridComposition, GridStyles } from './styles'
-import { StylesOf } from '../../types'
-import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
+import { EmptyPlaceholder } from '../EmptyPlaceholder'
+import { RefreshControl } from '../RefreshControl'
+import { List } from '../List'
+import { GridPresets } from './styles'
+import { FlatListProps, AugmentedRenderItemInfo } from '../List'
+import { KeyboardAwareFlatList } from 'react-native-keyboard-aware-scroll-view'
+
+export * from './styles'
 
 export type DataboundFlatGridPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
 
-export type ReplaceFlatGridProps<P, T> = Omit<P, DataboundFlatGridPropsTypes> & {
-  data: T[]
-  keyExtractor?: (item: T, index: number) => string
-  renderItem: (data: GridRenderItemInfo<T>) => React.ReactElement
-  onRefresh?: () => void
-  getItemLayout?: ((
-    data:T,
-    index: number,
-) => { length: number; offset: number; index: number })
+export type GridAugmentedRenderItemInfo<T> = AugmentedRenderItemInfo<T> & {
+  isFirstInRow: boolean
+  isLastInRow: boolean
+  isOnlyInRow: boolean
 }
 
-
-export * from './styles'
-
 export type GridProps<
   T = any[],
   Data = T extends Array<infer D> ? D : never
-> =FlatGridProps<Data> &
-  Omit<ViewProps, 'variants'> & {
-    separators?: boolean
-    placeholder?: EmptyPlaceholderProps
-    keyboardAware?: GetKeyboardAwarePropsOptions
-    debugName?: string
-    styles?: StylesOf<GridComposition>
-    refreshControlProps?: Partial<RefreshControlProps>
-  } & ComponentVariants<typeof GridStyles>
-
-const GridCP = forwardRef<ScrollView, GridProps>(
+> = Omit<FlatListProps<T, Data>, 'variants' | 'renderItem'> & ComponentVariants<typeof GridPresets> & {
+  spacing?: number
+  itemDimension?: number
+  renderItem: (data: GridAugmentedRenderItemInfo<T>) => React.ReactElement
+}
+
+const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
+  return (
+    <View style={props.separatorStyles}></View>
+  )
+}
+
+const GridCP = forwardRef<KeyboardAwareFlatList, GridProps>(
   (flatGridProps, ref) => {
     const {
       variants = [],
@@ -51,68 +50,73 @@ const GridCP = forwardRef<ScrollView, GridProps>(
       onRefresh,
       refreshing,
       placeholder,
-      keyboardAware,
-      debugName,
       refreshControlProps = {},
+      spacing,
+      numColumns,
       ...props
     } = flatGridProps
-
-    const variantStyles = useDefaultComponentStyle<'u:Grid', typeof GridStyles>('u:Grid', {
+    const { Theme } = useCodeleapContext()
+    const variantStyles = useDefaultComponentStyle<'u:Grid', typeof GridPresets>('u:Grid', {
       variants,
       styles,
       transform: StyleSheet.flatten,
-
     })
 
-    const renderSeparator = () => {
-      return (
-        <View variants={['separator']}></View>
-      )
-    }
+    const renderItem = useCallback((data: ListRenderItemInfo<any>) => {
+      if (!props?.renderItem) return null
+      const listLength = props?.data?.length || 0
 
-    const separatorProp = props.separators
-    const isEmpty = !props.data || !props.data.length
-    const separator = !isEmpty && separatorProp == true && renderSeparator
+      const isFirst = data.index === 0
+      const isLast = data.index === listLength - 1
+      const isOnly = isFirst && isLast
 
-    const refreshStyles = StyleSheet.flatten([variantStyles.refreshControl, styles.refreshControl])
-    const Component = FlatGrid
+      const idx = data.index + 1
+      const isLastInRow = !isFirst && idx % (numColumns) === 0
+      const isFirstInRow = isFirst || data.index % numColumns === 0
+      const isOnlyInRow = !isFirstInRow && !isLastInRow
 
-    const _gridProps = {
-      style: [variantStyles.wrapper, style],
-      contentContainerStyle: variantStyles.content,
-      ref: ref ,
-      ItemSeparatorComponent: separator,
-      refreshControl:
-          !!onRefresh && (
-            <RefreshControl
-              refreshing={refreshing}
-              onRefresh={onRefresh}
-              tintColor={refreshStyles?.color}
-              colors={[refreshStyles?.color]}
-              {...refreshControlProps}
-            />
-          ),
+      let gap = Theme.spacing.marginRight(spacing / 2)
+      if (isLastInRow) gap = Theme.spacing.marginLeft(spacing / 2)
+      else if (isOnlyInRow) gap = Theme.spacing.marginHorizontal(spacing / 2)
 
-      ListEmptyComponent: <EmptyPlaceholder {...placeholder}/>,
+      const _itemProps = { isFirst, isLast, isOnly, isFirstInRow, isLastInRow, isOnlyInRow }
+      const RenderItem = props?.renderItem
+
+      return (
+        <View style={{ ...variantStyles.itemWrapper, ...gap }}>
+          <RenderItem {...data} {..._itemProps} />
+        </View>
+      )
+    }, [props?.renderItem, props?.data?.length])
+
+    const separatorStyles = { height: Theme.spacing.value(spacing), ...variantStyles.separator }
+    const separator = props?.separators || (!!spacing ? <RenderSeparator separatorStyles={separatorStyles}/> : null)
+    const refreshControl = !!onRefresh && <RefreshControl refreshing={refreshing} onRefresh={onRefresh} {...refreshControlProps}/>
+    const _gridProps = {
       ...props,
+      ref: ref,
+      ListEmptyComponent: <EmptyPlaceholder {...placeholder}/>,
+      ListHeaderComponentStyle: variantStyles.header,
+      ListFooterComponentStyle: variantStyles.footer,
+      ItemSeparatorComponent: separator,
+      refreshControl,
+      style: [variantStyles.wrapper, style],
+      contentContainerStyle: [variantStyles.content, props?.contentContainerStyle],
+      showsVerticalScrollIndicator: false,
+      numColumns,
+      renderItem,
     }
-    const keyboard = useKeyboardAwareView({
-      debugName,
-    })
-    const gridProps = keyboard.getKeyboardAwareProps(_gridProps, {
-      baseStyleProp: 'contentContainerStyle',
-      adapt: 'paddingBottom',
-      ...keyboardAware,
-    })
+
     return (
-      <Component
-        {...gridProps}
+      // @ts-ignore
+      <List
+        {..._gridProps}
       />
     )
   },
 )
 
-export type GridComponentType = <T extends any[] = any[]>(props: FlatGridProps<T>) => React.ReactElement
+export type GridComponentType = <T extends any[] = any[]>(props: GridProps<T>) => React.ReactElement
 
-export const Grid = GridCP as GridComponentType
+export const Grid = GridCP as unknown as GridComponentType
 

package/src/components/Grid/styles.ts

@@ -1,11 +1,8 @@
-import { createDefaultVariantFactory } from '@codeleap/common'
-import { ListComposition, ListStyles } from '../List'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ListComposition } from '../List'
 
-export type GridComposition = ListComposition
+export type GridComposition = ListComposition | 'itemWrapper' | 'footer'
 
 const createGridStyle = createDefaultVariantFactory<GridComposition>()
 
-export const GridStyles = {
-  ...ListStyles,
-
-}
+export const GridPresets = includePresets(style => createGridStyle(() => ({ content: style })))

package/src/components/Icon/index.tsx

@@ -8,32 +8,51 @@ import {
   IconPlaceholder,
   onMount,
   onUpdate,
+  PropsOf,
+  StylesOf,
+  TypeGuards,
+  getNestedStylesByKey,
 } from '@codeleap/common'
 import { StyleSheet } from 'react-native'
 import { View } from '../View'
 export * from './styles'
 
 import {
-  IconStyles,
+  IconComposition,
+  IconPresets,
 } from './styles'
+import { Badge, BadgeComponentProps } from '../Badge'
 
 export type IconProps = {
   name: IconPlaceholder
   style?: any
   color?: string
-  variants?: ComponentVariants<typeof IconStyles>['variants']
-  renderEmptySpace?: boolean
+  variants?: ComponentVariants<typeof IconPresets>['variants']
+  wrapperProps?: Partial<PropsOf<typeof View>>
   size?: number
-}
+  styles?: StylesOf<IconComposition>
+} & BadgeComponentProps
+
+export const IconComponent: React.FC<IconProps> = (props) => {
+  const { 
+    name, 
+    style, 
+    variants, 
+    badge = false, 
+    badgeProps = {}, 
+    wrapperProps = {},
+    styles = {},
+    ...otherProps 
+  } = props
 
-export const IconComponent: React.FC<IconProps> = ({ name, style, variants, renderEmptySpace, ...otherProps }) => {
   const { Theme, logger } = useCodeleapContext()
 
-  const variantStyles = useDefaultComponentStyle<'u:Icon', typeof IconStyles>('u:Icon', {
+  const variantStyles = useDefaultComponentStyle<'u:Icon', typeof IconPresets>('u:Icon', {
     variants,
     transform: StyleSheet.flatten,
     styles: {
       icon: style,
+      ...styles,
     },
     rootElement: 'icon',
   })
@@ -48,8 +67,27 @@ export const IconComponent: React.FC<IconProps> = ({ name, style, variants, rend
     }
   }, [name])
 
+  if (badge || TypeGuards.isNumber(badge)) {
+    const badgeStyles = getNestedStylesByKey('badge', variantStyles)
+
+    const sized = {
+      height: variantStyles.icon?.size || variantStyles.icon?.height || props?.size,
+      width: variantStyles.icon?.size || variantStyles.icon?.width || props?.size,
+    }
+
+    const wrapperStyle = [
+      sized,
+      (variantStyles.iconBadgeWrapper ?? {}),
+    ]
+
+    return <View {...wrapperProps} style={wrapperStyle}>
+      <Component {...otherProps} style={variantStyles.icon} />
+      <Badge styles={badgeStyles} badge={badge} {...badgeProps} />
+    </View>
+  }
+
   if (!name) {
-    return renderEmptySpace ? <View style={variantStyles.icon}/> : null
+    return  null
   }
 
   if (!Component) {
@@ -60,7 +98,7 @@ export const IconComponent: React.FC<IconProps> = ({ name, style, variants, rend
 }
 
 function areEqual(prevProps, nextProps) {
-  const check = ['name', 'style', 'variants', 'renderEmptySpace']
+  const check = ['name', 'style', 'variants', 'renderEmptySpace', 'badgeProps', 'badge']
   const res = arePropsEqual(prevProps, nextProps, { check })
   return res
 }

package/src/components/Icon/styles.ts

@@ -1,57 +1,9 @@
 import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { BadgeComposition } from '../Badge'
 
-export type IconComposition = 'icon'
+export type IconComposition = 'icon' | 'iconBadgeWrapper' | `badge${Capitalize<BadgeComposition>}`
 
 const createIconStyle = createDefaultVariantFactory<IconComposition>()
 
-const presets = includePresets((styles) => createIconStyle(() => ({ icon: styles })))
+export const IconPresets = includePresets((styles) => createIconStyle(() => ({ icon: styles })))
 
-export const IconStyles = {
-  ...presets,
-  default: createIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.icon,
-    },
-  })),
-  originalColor: createIconStyle(theme => ({
-    icon: {
-      color: 'auto',
-    },
-  })),
-  white: createIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.white,
-    },
-  })),
-
-  primary: createIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.primary,
-    },
-  })),
-  negative: createIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.negative,
-    },
-  })),
-  positive: createIconStyle((theme) => ({
-    icon: {
-      color: theme.colors.positive,
-    },
-  })),
-  small: createIconStyle((theme) => ({
-    icon: {
-      ...theme.sized(1),
-    },
-  })),
-  medium: createIconStyle((theme) => ({
-    icon: {
-      ...theme.sized(2),
-    },
-  })),
-  large: createIconStyle((theme) => ({
-    icon: {
-      ...theme.sized(3),
-    },
-  })),
-}

package/src/components/Image/index.tsx

@@ -21,7 +21,7 @@ import {
 import { FastImage } from '../../modules/fastImage'
 import {
   ImageComposition,
-  ImageStyles,
+  ImagePresets,
 } from './styles'
 import { useImageSpotlight } from '../ImageView/Spotlight'
 import { Touchable } from '../Touchable'
@@ -31,7 +31,7 @@ import { StylesOf } from '../../types'
 export * from './styles'
 type NativeImageProps = ComponentPropsWithoutRef<typeof NativeImage>
 export type ImageProps = Omit<NativeImageProps, 'source' | 'style'> & {
-  variants?: ComponentVariants<typeof ImageStyles>['variants']
+  variants?: ComponentVariants<typeof ImagePresets>['variants']
   fast?: boolean
   styles?: StylesOf<ImageComposition>
   style?: StyleProp<ImageStyle | TextStyle | ViewStyle>
@@ -48,9 +48,6 @@ export type ImageProps = Omit<NativeImageProps, 'source' | 'style'> & {
   withLoadingOverlay?: boolean | React.FC<LoadingOverlayProps>
 }
 
-
-
-
 export const ImageComponent: React.FC<ImageProps> = (props) => {
   const {
     variants,
@@ -65,11 +62,11 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
     ...imageProps
   } = props
 
-  const variantStyles = useDefaultComponentStyle<'u:Image', typeof ImageStyles>('u:Image', { variants, styles: componentStyleSheet,transform: StyleSheet.flatten })
+  const variantStyles = useDefaultComponentStyle<'u:Image', typeof ImagePresets>('u:Image', { variants, styles: componentStyleSheet, transform: StyleSheet.flatten })
   const [loading, setLoading] = React.useState(false)
 
   const styles = StyleSheet.flatten([variantStyles.wrapper, style])
-  
+
   let imSource = source
   if (isFile(imSource)) {
     imSource = toMultipartFile(imSource)
@@ -86,7 +83,7 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
   }
 
   const aspectRatioStyle = React.useMemo(() => {
-    if (!maintainAspectRatio|| !imSource) return null
+    if (!maintainAspectRatio || !imSource) return null
     try {
       // @ts-ignore
       const assetSource = NativeImage.resolveAssetSource(imSource)
@@ -109,17 +106,17 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
 
   const loadProps = React.useRef({
     onLoadStart: () => {
-      if(withLoadingOverlay) {
+      if (withLoadingOverlay) {
         setTimeout(() => {
-          if(!loadEndedEarly.current){
+          if (!loadEndedEarly.current) {
             setLoading(true)
           }
-        },60)
+        }, 60)
       }
     }, onLoadEnd: () => {
       loadEndedEarly.current = true
-      if(withLoadingOverlay) setLoading(false)
-    }
+      if (withLoadingOverlay) setLoading(false)
+    },
   })
 
   const Loading = TypeGuards.isFunction(withLoadingOverlay) ? withLoadingOverlay : LoadingOverlay
@@ -127,14 +124,13 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
 
   const overlayStyle = React.useMemo(() => getNestedStylesByKey('overlay', variantStyles), [variantStyles])
 
-  const loadingElement = React.useMemo(() =>  {
+  const loadingElement = React.useMemo(() => {
     return showLoading ? (
       <Loading visible={loading} styles={overlayStyle}/>
-  
-      ) : null
+
+    ) : null
   }, [showLoading, loading])
-    
-  
+
   if (fast) {
     return (
       <Wrapper {...wrapperProps}>
@@ -153,10 +149,10 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
     )
   }
   return <Wrapper {...wrapperProps}>
-    <NativeImage 
-      style={[aspectRatioStyle, styles]} 
-      resizeMode={resizeMode} 
-      source={imSource} {...(imageProps as any)}  
+    <NativeImage
+      style={[aspectRatioStyle, styles]}
+      resizeMode={resizeMode}
+      source={imSource} {...(imageProps as any)}
       {...loadProps.current}
     />
     {

package/src/components/Image/styles.ts

@@ -4,18 +4,5 @@ import { LoadingOverlayComposition } from '../LoadingOverlay/styles'
 export type ImageComposition = 'wrapper' | 'touchable' | `overlay${Capitalize<LoadingOverlayComposition>}`
 const createImageStyle = createDefaultVariantFactory<ImageComposition>()
 
-const presets = includePresets((styles) => createImageStyle(() => ({ wrapper: styles, touchable: styles })),
-)
+export const ImagePresets = includePresets((styles) => createImageStyle(() => ({ wrapper: styles, touchable: styles })))
 
-export const ImageStyles = {
-  ...presets,
-  default: createImageStyle(() => ({
-    wrapper: {},
-  })),
-
-  round: createImageStyle(() => ({
-    wrapper: {
-      borderRadius: 100,
-    },
-  })),
-}

package/src/components/ImageView/Spotlight.tsx

@@ -1,10 +1,12 @@
 import React, { useContext, useState } from 'react'
 import { deepEqual, onUpdate, ReactState, TypeGuards, usePrevious, useUnmount } from '@codeleap/common'
-// @ts-ignore
-import { ImageSource } from 'react-native-image-viewing/dist/@types'
+
 import uuid from 'react-native-uuid'
 import { ImageView } from './component'
 import { ImageProps } from '../Image'
+import {ImageURISource, ImageRequireSource} from 'react-native'
+type ImageSource = ImageURISource | ImageRequireSource
+
 type TImage = {
     source: ImageSource
     created: number

package/src/components/ImageView/component.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react'
 
 import { onUpdate, PropsOf } from '@codeleap/common'
-
-// @ts-ignore
 import _ImageView from 'react-native-image-viewing'
 import { StatusBar } from 'react-native'
 import { View } from '../View'
@@ -24,7 +22,6 @@ export type ImageViewProps = PropsOf<typeof _ImageView>
 export const ImageView: React.FC<ImageViewProps> = (props) => {
   onUpdate(() => {
     StatusBar.setHidden(props.visible)
-    // StatusBar.setBarStyle(`${props.visible ? 'light' : 'dark'}-content`)
   }, [props.visible])
 
   return (

package/src/components/InputBase/index.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { TypeGuards, getRenderedComponent } from '@codeleap/common'
+import { ActionIcon, ActionIconProps } from '../ActionIcon'
+import { View } from '../View'
+import { useInputBaseStyles } from './styles'
+import { InputBaseProps } from './types'
+import { Text } from '../Text'
+
+export * from './styles'
+export * from './utils'
+export * from './types'
+
+export const InputBaseDefaultOrder:InputBaseProps['order'] = [
+  'label',
+  'description',
+  'innerWrapper',
+  'error',
+]
+const KeyPassthrough = (props: React.PropsWithChildren<any>) => {
+  return <>{props.children}</>
+}
+
+export const InputBase = React.forwardRef<any, InputBaseProps>((props, ref) => {
+  const {
+    children,
+    error = null,
+    label,
+    description = null,
+    leftIcon = null,
+    rightIcon = null,
+    styles,
+    wrapper,
+    debugName,
+    innerWrapper,
+    focused,
+    innerWrapperProps = {},
+    wrapperProps = {},
+    disabled = false,
+    order = InputBaseDefaultOrder,
+    style,
+    labelAsRow = false,
+    hideErrorMessage = false,
+    ...otherProps
+  } = props
+
+  const WrapperComponent = wrapper || View
+  const InnerWrapperComponent = innerWrapper || View
+
+  const _styles = useInputBaseStyles(props)
+
+  const _leftIcon = getRenderedComponent<Partial<ActionIconProps>>(leftIcon, ActionIcon, {
+    // @ts-ignore
+    styles: _styles.leftIconStyles,
+    debugName: `${debugName} left icon`,
+  })
+
+  const _rightIcon = getRenderedComponent<Partial<ActionIconProps>>(rightIcon, ActionIcon, {
+
+    // @ts-ignore
+    styles: _styles.rightIconStyles,
+    debugName: `${debugName} right icon`,
+  })
+
+  const _label = TypeGuards.isString(label) ? <Text text={label} style={_styles.labelStyle}/> : label
+
+  const _error = TypeGuards.isString(error) ? <Text text={error} style={_styles.errorStyle}/> : error
+
+  const _description = TypeGuards.isString(description) ? <Text text={description} style={_styles.descriptionStyle}/> : description
+
+  const parts = {
+    label: labelAsRow ? <View style={_styles.labelRowStyle}>
+      {_label}
+      {_description}
+    </View> : _label,
+    description: labelAsRow ? null : _description,
+    innerWrapper: <InnerWrapperComponent style={[
+      _styles.innerWrapperStyle,
+    ]} {...innerWrapperProps}>
+      {_leftIcon}
+      {children}
+      {_rightIcon}
+    </InnerWrapperComponent>,
+    error: hideErrorMessage ? null : (
+      _error || <Text text={''} style={_styles.errorStyle}/>
+    ),
+  }
+
+  return <WrapperComponent
+    style={[_styles.wrapperStyle, style]}
+    {...otherProps}
+    {...wrapperProps}
+  >
+    {
+      order.map((key) => <KeyPassthrough key={key}>
+        {parts[key]}
+      </KeyPassthrough>)
+
+    }
+
+  </WrapperComponent>
+})