@codeleap/mobile 1.9.33 → 2.0.2

package/src/components/Grid/index.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react'
+import { forwardRef } from 'react'
+import {
+  useDefaultComponentStyle,
+  ComponentVariants,
+} from '@codeleap/common'
+
+import { FlatGrid, FlatGridProps, GridRenderItemInfo } from 'react-native-super-grid'
+import { RefreshControl, StyleSheet, RefreshControlProps } from 'react-native'
+import { View, ViewProps } from '../View'
+import { EmptyPlaceholder, EmptyPlaceholderProps } from '../EmptyPlaceholder'
+import { GridComposition, GridStyles } from './styles'
+import { StylesOf } from '../../types'
+import { listenToKeyboardEvents } from '../../utils'
+
+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 * from './styles'
+
+const KeyboardAwareFlatGrid = listenToKeyboardEvents(FlatGrid)
+
+export type GridProps<
+  T = any[],
+  Data = T extends Array<infer D> ? D : never
+> =FlatGridProps<Data> &
+  Omit<ViewProps, 'variants'> & {
+    separators?: boolean
+    placeholder?: EmptyPlaceholderProps
+    keyboardAware?: boolean
+    styles?: StylesOf<GridComposition>
+    refreshControlProps?: Partial<RefreshControlProps>
+  } & ComponentVariants<typeof GridStyles>
+
+const GridCP = forwardRef<FlatGrid, GridProps>(
+  (flatGridProps, ref) => {
+    const {
+      variants = [],
+      style,
+      styles = {},
+      onRefresh,
+      refreshing,
+      placeholder,
+      keyboardAware = true,
+      refreshControlProps = {},
+      ...props
+    } = flatGridProps
+
+    const variantStyles = useDefaultComponentStyle<'u:Grid', typeof GridStyles>('u:Grid', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
+
+    })
+
+    const renderSeparator = () => {
+      return (
+        <View variants={['separator']}></View>
+      )
+    }
+
+    const separatorProp = props.separators
+    const isEmpty = !props.data || !props.data.length
+    const separator = !isEmpty && separatorProp == true && renderSeparator
+
+    const Component = keyboardAware ? KeyboardAwareFlatGrid : FlatGrid
+    const refreshStyles = StyleSheet.flatten([variantStyles.refreshControl, styles.refreshControl])
+
+    return (
+      <Component
+        style={[variantStyles.wrapper, style]}
+        contentContainerStyle={variantStyles.content}
+        ref={ref as unknown as FlatGrid}
+        ItemSeparatorComponent={separator}
+        refreshControl={
+          !!onRefresh && (
+            <RefreshControl
+              refreshing={refreshing}
+              onRefresh={onRefresh}
+              tintColor={refreshStyles?.color}
+              colors={[refreshStyles?.color]}
+              {...refreshControlProps}
+            />
+          )
+        }
+
+        ListEmptyComponent={<EmptyPlaceholder {...placeholder}/>}
+        {...props}
+      />
+    )
+  },
+)
+
+export type GridComponentType = <T extends any[] = any[]>(props: FlatGridProps<T>) => React.ReactElement
+
+export const Grid = GridCP as GridComponentType
+

package/src/components/Grid/styles.ts

@@ -0,0 +1,11 @@
+import { createDefaultVariantFactory } from '@codeleap/common'
+import { ListComposition, ListStyles } from '../List'
+
+export type GridComposition = ListComposition
+
+const createGridStyle = createDefaultVariantFactory<GridComposition>()
+
+export const GridStyles = {
+  ...ListStyles,
+
+}

package/src/components/{Icon.tsx → Icon/index.tsx}

@@ -1,14 +1,19 @@
 import * as React from 'react'
 import {
   ComponentVariants,
-  IconPlaceholder,
-  IconStyles,
+
   useDefaultComponentStyle,
   useCodeleapContext,
   arePropsEqual,
+  IconPlaceholder,
 } from '@codeleap/common'
 import { StyleSheet } from 'react-native'
-import { View } from './View'
+import { View } from '../View'
+export * from './styles'
+
+import {
+  IconStyles,
+} from './styles'
 
 export type IconProps = {
   name: IconPlaceholder

package/src/components/Icon/styles.ts

@@ -0,0 +1,52 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type IconComposition = 'icon'
+
+const createIconStyle = createDefaultVariantFactory<IconComposition>()
+
+const presets = includePresets((styles) => createIconStyle(() => ({ icon: styles })))
+
+export const IconStyles = {
+  ...presets,
+  default: createIconStyle((theme) => ({
+    icon: {
+      color: theme.colors.icon,
+    },
+  })),
+  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

@@ -0,0 +1,91 @@
+import * as React from 'react'
+import {
+  ComponentVariants,
+
+  useDefaultComponentStyle,
+  arePropsEqual,
+  FormTypes,
+  TypeGuards,
+} from '@codeleap/common'
+import { ComponentPropsWithoutRef } from 'react'
+import {
+  Image as NativeImage,
+  ImageStyle,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  ViewStyle,
+} from 'react-native'
+import { FastImage } from '../../modules/fastImage'
+import {
+  ImageStyles,
+} from './styles'
+import { useImageSpotlight } from '../ImageView/Spotlight'
+import { Touchable } from '../Touchable'
+import { isFile, toMultipartFile } from '../../utils'
+export * from './styles'
+type NativeImageProps = ComponentPropsWithoutRef<typeof NativeImage>
+export type ImageProps = Omit<NativeImageProps, 'source' | 'style'> & {
+  variants?: ComponentVariants<typeof ImageStyles>['variants']
+  fast?: boolean
+  style?: StyleProp<ImageStyle | TextStyle | ViewStyle>
+  source:
+    | (NativeImageProps['source'] & {
+        priority?: keyof typeof FastImage.priority
+      })
+    | FormTypes.AnyFile
+    | string
+    | number
+  resizeMode?: keyof typeof FastImage.resizeMode
+  spotlight?: string
+}
+
+export const ImageComponent: React.FC<ImageProps> = (props) => {
+  const { variants, style, fast = true, spotlight = null, resizeMode = 'contain', source, ...imageProps } = props
+
+  const variantStyles = useDefaultComponentStyle<'u:Image', typeof ImageStyles>('u:Image', { variants })
+
+  const styles = StyleSheet.flatten([variantStyles.wrapper, style])
+  let imSource = source
+  if (isFile(imSource)) {
+    imSource = toMultipartFile(imSource)
+  } else if (TypeGuards.isString(source)) {
+    imSource = { uri: source }
+  }
+  const spotlightActions = useImageSpotlight(spotlight, props.source)
+  const Wrapper = !!spotlight ? Touchable : ({ children }) => <>{children}</>
+  const wrapperProps = {
+    onPress: spotlightActions.onImagePressed,
+    debugName: `Press spotlight image ${props.source}`,
+    style: [variantStyles.touchable],
+    android_ripple: null,
+  }
+  if (fast) {
+    return (
+      <Wrapper {...wrapperProps}>
+
+        <FastImage
+          style={styles}
+          // @ts-ignore
+          tintColor={styles?.tintColor}
+          source={imSource}
+          resizeMode={FastImage.resizeMode[resizeMode || 'contain']}
+          {...imageProps}
+        />
+      </Wrapper>
+    )
+  }
+  return <Wrapper {...wrapperProps}>
+    <NativeImage style={styles} resizeMode={resizeMode} source={imSource} {...(imageProps as any)} />
+
+  </Wrapper>
+}
+
+function areEqual(prevProps, nextProps) {
+  const check = ['source', 'style', 'variants', 'resizeMode', 'fast']
+  const res = arePropsEqual(prevProps, nextProps, { check })
+  return res
+}
+
+export const Image = React.memo(ImageComponent, areEqual)
+

package/src/components/Image/styles.ts

@@ -0,0 +1,20 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type ImageComposition = 'wrapper' | 'touchable'
+const createImageStyle = createDefaultVariantFactory<ImageComposition>()
+
+const presets = 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

@@ -0,0 +1,158 @@
+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'
+type TImage = {
+    source: ImageSource
+    created: number
+    id: string
+
+}
+type ImageList = Record<string, TImage>
+
+type SpotlightState = ReactState<Record<string, ImageList>>
+type IndexState = ReactState<Record<string, number>>
+type TSpotlightCtx = {
+    spotlights: SpotlightState[0]
+    setSpotlights: SpotlightState[1]
+    indexes: IndexState[0]
+    setIndexes: IndexState[1]
+
+}
+
+const SpotlightCtx = React.createContext({} as TSpotlightCtx)
+
+export const SpotlightProvider:React.FC = ({ children }) => {
+  const [spotlights, setSpotlights] = useState<TSpotlightCtx['spotlights']>({})
+  const [indexes, setIndexes] = useState<TSpotlightCtx['indexes']>({})
+  const ctxValue:TSpotlightCtx = {
+    spotlights,
+    setSpotlights,
+    indexes,
+    setIndexes,
+  }
+
+  return <SpotlightCtx.Provider value={ctxValue}>
+    {children}
+  </SpotlightCtx.Provider>
+}
+
+export function useSpotlight(name: string) {
+  const ctx = useContext(SpotlightCtx)
+
+  const imList =
+    Object.values(ctx.spotlights[name] || {})
+      .sort((a, b) => a.created - b.created)
+
+  return {
+    images: imList,
+    currentIndex: ctx.indexes[name],
+    set(img: ImageSource, id?: string) {
+      const newId = id || uuid.v4() as string
+      ctx.setSpotlights((prev) => {
+        const images = { ...prev[name] }
+
+        if (id !== null) {
+          images[id] = {
+            ...images[id],
+            source: img,
+          }
+        } else {
+          const now = Date.now()
+
+          images[newId] = {
+            created: now,
+            id: newId,
+            source: img,
+          }
+        }
+
+        return {
+          ...prev,
+          [name]: images,
+        }
+      })
+
+      return newId
+    },
+    remove(id: string) {
+      ctx.setSpotlights((prev) => {
+        const images = { ...prev[name] }
+        delete images[id]
+        return {
+          ...prev,
+          [name]: images,
+        }
+      })
+    },
+    open(id: string) {
+      const newIdx = imList.findIndex(x => x.id === id)
+      ctx.setIndexes((prev) => ({
+        ...prev,
+        [name]: newIdx,
+      }))
+    },
+    close() {
+
+      ctx.setIndexes((prev) => ({
+        ...prev,
+        [name]: undefined,
+      }))
+    },
+    clear() {
+      ctx.setIndexes((prev) => ({
+        ...prev,
+        [name]: undefined,
+      }))
+      ctx.setSpotlights((prev) => {
+
+        return {
+          ...prev,
+          [name]: {},
+        }
+      })
+    },
+  }
+}
+
+export const useImageSpotlight = (name: string | null, src: ImageProps['source']) => {
+  const [id, setId] = useState(null)
+  const spotlight = useSpotlight(name)
+  const imSource = TypeGuards.isString(src) ? { uri: src } : src as TImage['source']
+  const prevSource = usePrevious(imSource)
+
+  onUpdate(() => {
+    if (!name) return
+    if (deepEqual(prevSource, imSource)) return
+    setId(spotlight.set(imSource, id))
+  }, [src, id])
+
+  useUnmount(() => {
+    if (!name) return
+    spotlight.remove(id)
+  })
+
+  return {
+    onImagePressed: () => {
+      spotlight.open(id)
+    },
+  }
+}
+
+export const Spotlight = ({ name }) => {
+  const spotlight = useSpotlight(name)
+  useUnmount(() => {
+    spotlight.clear()
+  })
+  return <ImageView
+    imageIndex={spotlight.currentIndex}
+    images={spotlight.images.map(x => x.source)}
+    keyExtractor={(_, index) => index.toString()}
+    onRequestClose={spotlight.close}
+    visible={typeof spotlight.currentIndex !== 'undefined'}
+
+  />
+}

package/src/components/ImageView/component.tsx

@@ -0,0 +1,38 @@
+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'
+import { Text } from '../Text'
+
+type FooterComponentType = React.ComponentType<{
+  imageIndex: number
+  imagesLength: number
+}>
+
+const FooterComponent: FooterComponentType = ({ imageIndex, imagesLength }) => (
+  <View variants={['marginBottom:5', 'alignCenter']}>
+    <Text text={imageIndex + 1 + '/' + imagesLength}/>
+  </View>
+)
+
+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 (
+    <_ImageView
+      doubleTapToZoomEnabled={false}
+      FooterComponent={({ imageIndex }) => <FooterComponent imageIndex={imageIndex} imagesLength={props.images.length}/>}
+      presentationStyle={'overFullScreen'}
+      {...props}
+    />
+  )
+}

package/src/components/ImageView/index.ts

@@ -0,0 +1,2 @@
+export * from './Spotlight'
+export * from './component'

package/src/components/List/PaginationIndicator.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import {
+  assignTextStyle,
+  ComponentVariants,
+  createDefaultVariantFactory,
+  getNestedStylesByKey,
+  includePresets,
+  TypeGuards,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { StyleSheet, ViewStyle } from 'react-native'
+import { StylesOf } from '../../types'
+import { ActivityIndicator, ActivityIndicatorComposition } from '../ActivityIndicator'
+import { Text } from '../Text'
+
+export type PaginationIndicatorComposition = 'text' | `loader${Capitalize<ActivityIndicatorComposition>}`
+
+const createPaginationIndicatorStyle = createDefaultVariantFactory<PaginationIndicatorComposition>()
+const presets = includePresets((style) => createPaginationIndicatorStyle(() => ({ loaderWrapper: style, text: style })))
+export const PaginationIndicatorStyles = {
+  ...presets,
+  default: createPaginationIndicatorStyle((theme) => {
+    return {
+      loaderWrapper: {
+        ...theme.presets.center,
+        ...theme.spacing.marginVertical(3),
+      },
+      text: {
+        ...assignTextStyle('h4')(theme).text,
+        ...theme.presets.textCenter,
+        ...theme.spacing.marginVertical(3),
+        ...theme.presets.fullWidth,
+      },
+    }
+  }),
+}
+
+export type PaginationIndicatorProps = {
+  isFetching?: boolean
+  noMoreItemsText: React.ReactChild
+  hasMore?: boolean
+  activityIndicator?: JSX.Element
+  styles?: StylesOf<PaginationIndicatorComposition>
+  style?: ViewStyle
+} & ComponentVariants<typeof PaginationIndicatorStyles>
+
+export const PaginationIndicator = (props: PaginationIndicatorProps) => {
+  const { hasMore, isFetching, noMoreItemsText, style, activityIndicator, styles = {}, variants = [] } = props
+
+  const variantStyles = useDefaultComponentStyle<
+    'u:PaginationIndicator',
+    typeof PaginationIndicatorStyles
+    >('u:PaginationIndicator', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
+    })
+
+  const loaderStyles = getNestedStylesByKey('loader', variantStyles)
+
+  if (isFetching) {
+    return activityIndicator || <ActivityIndicator style={style} styles={loaderStyles}/>
+  }
+  if (!hasMore) {
+    if (TypeGuards.isString(noMoreItemsText) || TypeGuards.isNumber(noMoreItemsText)) {
+      return <Text style={[variantStyles.text, style]} text={noMoreItemsText.toString()}/>
+    }
+    return noMoreItemsText
+  }
+  return null
+}

package/src/components/List/index.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react'
+import { forwardRef, useState } from 'react'
+import {
+
+  useDefaultComponentStyle,
+
+  ComponentVariants,
+} from '@codeleap/common'
+
+
+import { RefreshControl, FlatList, FlatListProps as RNFlatListProps, ListRenderItemInfo, StyleSheet, RefreshControlProps } from 'react-native'
+import { View, ViewProps } from '../View'
+import { EmptyPlaceholder, EmptyPlaceholderProps } from '../EmptyPlaceholder'
+import { ListComposition, ListStyles } from './styles'
+import { StylesOf } from '../../types'
+import { KeyboardAwareFlatList } from '../../utils'
+
+export type DataboundFlatListPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
+
+export type ReplaceFlatlistProps<P, T> = Omit<P, DataboundFlatListPropsTypes> & {
+  data: T[]
+  keyExtractor?: (item: T, index: number) => string
+  renderItem: (data: ListRenderItemInfo<T>) => React.ReactElement
+  onRefresh?: () => void
+  getItemLayout?: ((
+    data:T,
+    index: number,
+) => { length: number; offset: number; index: number })
+}
+
+export * from './styles'
+export * from './PaginationIndicator'
+
+export type FlatListProps<
+  T = any[],
+  Data = T extends Array<infer D> ? D : never
+> =RNFlatListProps<Data> &
+  Omit<ViewProps, 'variants'> & {
+    separators?: boolean
+    placeholder?: EmptyPlaceholderProps
+    keyboardAware?: boolean
+    styles?: StylesOf<ListComposition>
+    refreshControlProps?: Partial<RefreshControlProps>
+  } & ComponentVariants<typeof ListStyles>
+
+const ListCP = forwardRef<FlatList, FlatListProps>(
+  (flatListProps, ref) => {
+    const {
+      variants = [],
+      style,
+      styles = {},
+      onRefresh,
+      refreshing,
+      placeholder,
+      keyboardAware = true,
+      refreshControlProps = {},
+      ...props
+    } = flatListProps
+
+    const variantStyles = useDefaultComponentStyle<'u:List', typeof ListStyles>('u:List', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
+
+    })
+
+    const renderSeparator = () => {
+      return (
+        <View variants={['separator']}></View>
+      )
+    }
+
+    const separatorProp = props.separators
+    const isEmpty = !props.data || !props.data.length
+    const separator = !isEmpty && separatorProp == true && renderSeparator
+
+    const Component:any = keyboardAware ? KeyboardAwareFlatList : FlatList
+    const refreshStyles = StyleSheet.flatten([variantStyles.refreshControl, styles.refreshControl])
+
+    return (
+      <Component
+        style={[variantStyles.wrapper, style]}
+        contentContainerStyle={variantStyles.content}
+        ref={ref as unknown as FlatList}
+        ItemSeparatorComponent={separator}
+        refreshControl={
+          !!onRefresh && (
+            <RefreshControl
+              refreshing={refreshing}
+              onRefresh={onRefresh}
+              tintColor={refreshStyles?.color}
+              colors={[refreshStyles?.color]}
+              {...refreshControlProps}
+            />
+          )
+        }
+
+        ListEmptyComponent={<EmptyPlaceholder {...placeholder}/>}
+        {...props}
+      />
+    )
+  },
+)
+
+export type ListComponentType = <T extends any[] = any[]>(props: FlatListProps<T>) => React.ReactElement
+
+export const List = ListCP as ListComponentType
+