@codeleap/mobile 2.3.5 → 2.3.7

package/src/components/Icon/index.tsx

@@ -1,69 +0,0 @@
-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

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

@@ -1,91 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,157 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

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

package/src/components/InputLabel/index.tsx

@@ -1,38 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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
-