@codeleap/mobile 2.3.0 → 2.3.1

package/src/components/Icon/index.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import {
+  ComponentVariants,
+
+  useDefaultComponentStyle,
+  useCodeleapContext,
+  arePropsEqual,
+  IconPlaceholder,
+  onMount,
+  onUpdate,
+} from '@codeleap/common'
+import { StyleSheet } from 'react-native'
+import { View } from '../View'
+export * from './styles'
+
+import {
+  IconStyles,
+} from './styles'
+
+export type IconProps = {
+  name: IconPlaceholder
+  style?: any
+  color?: string
+  variants?: ComponentVariants<typeof IconStyles>['variants']
+  renderEmptySpace?: boolean
+  size?: number
+}
+
+export const IconComponent: React.FC<IconProps> = ({ name, style, variants, renderEmptySpace, ...otherProps }) => {
+  const { Theme, logger } = useCodeleapContext()
+
+  const variantStyles = useDefaultComponentStyle<'u:Icon', typeof IconStyles>('u:Icon', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles: {
+      icon: style,
+    },
+    rootElement: 'icon',
+  })
+  const Component = Theme?.icons?.[name]
+  onUpdate(() => {
+    if (!Component && !!name) {
+      logger.warn(
+        `Icon: No icon found in theme for name "${name}".`,
+        { props: { style, name, variants, variantStyles }},
+        'Component',
+      )
+    }
+  }, [name])
+
+  if (!name) {
+    return renderEmptySpace ? <View style={variantStyles.icon}/> : null
+  }
+
+  if (!Component) {
+
+    return null
+  }
+  return <Component {...otherProps} style={variantStyles.icon} />
+}
+
+function areEqual(prevProps, nextProps) {
+  const check = ['name', 'style', 'variants', 'renderEmptySpace']
+  const res = arePropsEqual(prevProps, nextProps, { check })
+  return res
+}
+
+export const Icon = React.memo(IconComponent, areEqual)
+

package/src/components/Icon/styles.ts

@@ -0,0 +1,57 @@
+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,
+    },
+  })),
+  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

@@ -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,157 @@
+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] || {})
+
+  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/InputLabel/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { ComponentVariants, FormTypes, useDefaultComponentStyle } from '@codeleap/common'
+import { StylesOf } from '../../types'
+import { View, ViewProps } from '../View'
+import { InputLabelComposition, InputLabelStyles } from './styles'
+import { Text } from '../Text'
+import { StyleSheet } from 'react-native'
+
+export type InputLabelProps = ViewProps & {
+    styles?: StylesOf<InputLabelComposition>
+    label?: FormTypes.Label
+    required?: boolean
+} & ComponentVariants<typeof InputLabelStyles>
+
+export * from './styles'
+
+export const InputLabel:React.FC<InputLabelProps> = (props) => {
+  const { label, required = false, variants = [], styles = {}, style, ...viewProps } = props
+  const variantStyles = useDefaultComponentStyle<'u:InputLabel', typeof InputLabelStyles>('u:InputLabel', {
+    variants, styles, transform: StyleSheet.flatten,
+  })
+
+  if (!label) return null
+
+  switch (typeof label) {
+    case 'string':
+      return <View {...viewProps} style={[variantStyles.wrapper, style]}>
+        <Text style={variantStyles.text} text={label} />
+        {required && <Text style={variantStyles.asterisk} text={' *'} />}
+      </View>
+    case 'object':
+      return <>
+        {label as React.ReactNode}
+      </>
+    default:
+      return null
+  }
+}

package/src/components/InputLabel/styles.ts

@@ -0,0 +1,19 @@
+import { assignTextStyle, createDefaultVariantFactory } from '@codeleap/common'
+
+export type InputLabelComposition = 'text' | 'wrapper' | 'asterisk'
+
+const createInputLabelStyle = createDefaultVariantFactory<InputLabelComposition>()
+
+export const InputLabelStyles = {
+  default: createInputLabelStyle((theme) => ({
+    asterisk: {
+      color: theme.colors.negative,
+    },
+    wrapper: {
+      ...theme.presets.row,
+    },
+    text: {
+      ...assignTextStyle('h5')(theme).text,
+    },
+  })),
+}

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,114 @@
+import * as React from 'react'
+import { forwardRef } from 'react'
+import {
+
+  useDefaultComponentStyle,
+
+  ComponentVariants,
+  useCallback,
+} 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 { GetKeyboardAwarePropsOptions, useKeyboardAwareView } 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?: GetKeyboardAwarePropsOptions
+    styles?: StylesOf<ListComposition>
+    refreshControlProps?: Partial<RefreshControlProps>
+  } & ComponentVariants<typeof ListStyles>
+
+const ListCP = forwardRef<FlatList, FlatListProps>(
+  (flatListProps, ref) => {
+    const {
+      variants = [],
+      style,
+      styles = {},
+      onRefresh,
+      component,
+      refreshing,
+      placeholder,
+      keyboardAware,
+      refreshControlProps = {},
+      ...props
+    } = flatListProps
+
+    const variantStyles = useDefaultComponentStyle<'u:List', typeof ListStyles>('u:List', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
+
+    })
+
+    const renderSeparator = useCallback(() => {
+      return (
+        <View style={variantStyles.separator}></View>
+      )
+    }, [])
+
+    const isEmpty = !props.data || !props.data.length
+    const separator = !isEmpty && props?.separators && renderSeparator
+
+    const Component:any = component || FlatList
+    const refreshStyles = StyleSheet.flatten([variantStyles.refreshControl, styles.refreshControl])
+
+    const _listProps = {
+      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,
+    }
+    const keyboard = useKeyboardAwareView()
+    const listProps = keyboard.getKeyboardAwareProps(_listProps, {
+      adapt: 'paddingBottom',
+      baseStyleProp: 'contentContainerStyle',
+      ...keyboardAware,
+    })
+    return (
+      <Component
+        {...listProps}
+      />
+    )
+  },
+)
+
+export type ListComponentType = <T extends any[] = any[]>(props: FlatListProps<T>) => React.ReactElement
+
+export const List = ListCP as ListComponentType
+

package/src/components/List/styles.ts

@@ -0,0 +1,19 @@
+import { createDefaultVariantFactory } from '@codeleap/common'
+import { ScrollComposition, ScrollStyles } from '../Scroll/styles'
+
+export type ListComposition = ScrollComposition | 'separator'
+
+const createListStyle = createDefaultVariantFactory<ListComposition>()
+
+export const ListStyles = {
+  default: createListStyle((theme) => {
+    const defaultStyles = ScrollStyles.default(theme)
+    return {
+      ...defaultStyles,
+      separator: {
+        width: '100%',
+        height: theme.spacing.value(1),
+      },
+    }
+  }),
+}