@codeleap/mobile 1.9.33 → 2.0.0

package/src/components/Image.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react'
-import {
-  ComponentVariants,
-  ImageStyles,
-  MobileInputFile,
-  useDefaultComponentStyle,
-  arePropsEqual,
-} from '@codeleap/common'
-import { ComponentPropsWithoutRef } from 'react'
-import {
-  Image as NativeImage,
-  ImageStyle,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  ViewStyle,
-} from 'react-native'
-import { FastImage } from '../modules/fastImage'
-
-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
-      })
-    | MobileInputFile
-    | string
-  resizeMode?: keyof typeof FastImage.resizeMode
-}
-
-export const ImageComponent: React.FC<ImageProps> = (props) => {
-  const { variants, style, fast = true, resizeMode = 'contain', ...imageProps } = props
-
-  const variantStyles = useDefaultComponentStyle('Image', { variants })
-
-  const styles = StyleSheet.flatten([variantStyles.wrapper, style])
-
-  if (fast) {
-    return (
-      <FastImage
-        style={styles}
-        // @ts-ignore
-        tintColor={styles?.tintColor}
-        resizeMode={FastImage.resizeMode[resizeMode || 'contain']}
-        {...imageProps}
-      />
-    )
-  }
-  return <NativeImage style={styles} resizeMode={resizeMode} {...(imageProps as any)} />
-}
-
-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/List.tsx

@@ -1,155 +0,0 @@
-import * as React from 'react'
-import { forwardRef, useState } from 'react'
-import {
-  deepEqual,
-  onUpdate,
-  useDefaultComponentStyle,
-  usePrevious,
-  useCodeleapContext,
-  TypeGuards,
-} from '@codeleap/common'
-import {
-
-  KeyboardAwareFlatList as KBDView,
-  // @ts-ignore
-} from 'react-native-keyboard-aware-scroll-view'
-
-import { RefreshControl, FlatList, FlatListProps as RNFlatListProps, ListRenderItemInfo } from 'react-native'
-import { View, ViewProps } from './View'
-import { EmptyPlaceholder, EmptyPlaceholderProps } from './EmptyPlaceholder'
-import { ActivityIndicator } from './ActivityIndicator'
-import { Text } from './Text'
-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 type FlatListProps<
-  T = any[],
-  Data = T extends Array<infer D> ? D : never
-> =RNFlatListProps<Data> &
-  ViewProps & {
-    refreshTimeout?: number
-    changeData?: any
-    separators?: boolean
-    refreshing?: boolean
-    placeholder?: EmptyPlaceholderProps
-    keyboardAware?: boolean
-
-  }
-
-const KeyboardAwareFlatList =
-  KBDView as unknown as React.ForwardRefExoticComponent<
-    ViewProps & {
-      refreshControl?: JSX.Element
-      ref?: FlatList
-    }
-  >
-
-const ListCP = forwardRef<FlatList, FlatListProps>(
-  (flatListProps, ref) => {
-    const {
-      variants = [],
-      style,
-      refreshTimeout = 3000,
-      changeData,
-      placeholder,
-      keyboardAware = true,
-      ...props
-    } = flatListProps
-    const hasRefresh = !!props.onRefresh
-    const [refreshingState, setRefreshing] = useState(false)
-    const refreshingDisplay = props.refreshing !== undefined ? props.refreshing : refreshingState
-
-    const timer = React.useRef(null)
-    const previousData = usePrevious(changeData)
-
-    const onRefresh = () => {
-      if (timer.current) {
-        clearTimeout(timer.current)
-      }
-
-      setRefreshing(true)
-
-      props.onRefresh()
-
-      timer.current = setTimeout(() => {
-        setRefreshing(false)
-      }, refreshTimeout)
-    }
-    onUpdate(() => {
-      if (refreshingDisplay && !deepEqual(previousData, changeData)) {
-        setRefreshing(false)
-        if (timer.current) {
-          clearTimeout(timer.current)
-        }
-      }
-    }, [refreshingDisplay, changeData])
-    const { Theme } = useCodeleapContext()
-
-    const variantStyles = useDefaultComponentStyle('View', {
-      variants,
-    })
-
-    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 ? KeyboardAwareFlatList : FlatList
-
-    return (
-      <Component
-        style={[Theme.presets.full, style]}
-        contentContainerStyle={[variantStyles.wrapper]}
-        ref={ref as unknown as FlatList}
-        ItemSeparatorComponent={separator}
-        refreshControl={
-          hasRefresh && (
-            <RefreshControl refreshing={refreshingDisplay} onRefresh={onRefresh} />
-          )
-        }
-        ListEmptyComponent={<EmptyPlaceholder {...placeholder}/>}
-        {...props}
-      />
-    )
-  },
-)
-
-export type PaginationIndicatorProps = {
-  isFetching?: boolean
-  hasMore?: boolean
-  noMoreItemsText: React.ReactChild
-  activityIndicator?: JSX.Element
-}
-
-export const PaginationIndicator = ({ hasMore, isFetching, noMoreItemsText, activityIndicator }: PaginationIndicatorProps) => {
-  if (isFetching) {
-    return activityIndicator || <ActivityIndicator variants={['center', 'marginVertical:3']}/>
-  }
-  if (!hasMore) {
-    if (TypeGuards.isString(noMoreItemsText) || TypeGuards.isNumber(noMoreItemsText)) {
-      return <Text variants={['h4', 'marginVertical:3', 'textCenter', 'fullWidth']} text={noMoreItemsText.toString()}/>
-    }
-    return noMoreItemsText
-  }
-  return null
-}
-
-export type ListComponentType = <T extends any[] = any[]>(props: FlatListProps<T>) => React.ReactElement
-
-export const List = ListCP as ListComponentType
-

package/src/components/NewPager/index.tsx

@@ -1,121 +0,0 @@
-import {
-  ComponentVariants,
-  useDefaultComponentStyle,
-} from '@codeleap/common'
-import React, {
-  ReactNode,
-} from 'react'
-import { StyleSheet } from 'react-native'
-import { StylesOf } from '../../types/utility'
-import { View } from '../View'
-import { NewMobilePagerStyles, NewPagerComposition } from './styles'
-export * from './styles'
-
-type PageProps = {
-  isLast: boolean
-  isFirst: boolean
-  isActive: boolean
-  isNext: boolean
-  page: number
-  index: number
-  isPrevious: boolean
-}
-
-export type NewPagerProps = {
-  variants?: ComponentVariants<typeof NewMobilePagerStyles>['variants']
-  styles?: StylesOf<NewPagerComposition>
-  children?: (((pageData: PageProps) => ReactNode) | ReactNode)[]
-  page?: number
-  style?: any
-  setPage?: (page: number) => void
-  returnEarly?: boolean
-  renderPageWrapper?:React.FC<PageProps>
-  pageWrapperProps?: any
-}
-
-export const NewPager:React.FC<NewPagerProps> = (pagerProps) => {
-  const {
-
-    styles,
-    variants,
-    page,
-    style = {},
-    returnEarly = true,
-    renderPageWrapper,
-    pageWrapperProps = {},
-    children,
-  } = pagerProps
-
-  let variantStyles = useDefaultComponentStyle<'u:Pager', typeof NewMobilePagerStyles>(
-    'u:Pager',
-    {
-      styles,
-      transform: StyleSheet.flatten,
-      variants,
-    },
-  )
-  const nChildren = React.Children.count(children)
-
-  const lastPage = nChildren - 1
-
-  const childArr = React.Children.toArray(children)
-
-  const WrapperComponent = renderPageWrapper || View
-
-  // Reamimated seems to glitch if this is not done
-  variantStyles = JSON.parse(JSON.stringify(variantStyles))
-
-  return (
-    <View style={[variantStyles.wrapper, style]} >
-      {
-        childArr.map((child:NewPagerProps['children'][number], index) => {
-          const isActive = index === page
-          const isLast = index === lastPage
-          const isFirst = index === 0
-          const isNext = index === page + 1
-          const isPrevious = index === page - 1
-          const shouldRender = isActive || isNext || isPrevious
-
-          if (!shouldRender && returnEarly) return null
-          let pos = 0
-
-          if (isActive) {
-            pos = 1
-          } else if (index > page) {
-            pos = 2
-          } else {
-            pos = 0
-          }
-
-          const pageProps = {
-            isLast,
-            isActive,
-            isFirst,
-            isNext,
-            isPrevious,
-            index,
-            page,
-          }
-
-          const content = typeof child === 'function' ? child(pageProps) : child
-
-          const wrapperProps = {
-            key: index,
-            style: variantStyles.page,
-            animated: true,
-            transition: variantStyles['page:transition'],
-            animate: [variantStyles['page:previous'], variantStyles['page:current'], variantStyles['page:next']][pos],
-            ...pageWrapperProps,
-          }
-
-          return (
-            <WrapperComponent {...wrapperProps}>
-              {content}
-            </WrapperComponent>
-          )
-
-        })
-      }
-    </View>
-  )
-}

package/src/components/NewPager/styles.ts

@@ -1,76 +0,0 @@
-import {
-  createDefaultVariantFactory,
-  includePresets,
-} from '@codeleap/common'
-import { Easing } from 'react-native'
-
-export type NewPagerComposition =
-  | 'page'
-  | 'page:transition'
-  | 'page:previous'
-  | 'page:next'
-  | 'page:current'
-  | 'wrapper'
-
-const createPagerStyle = createDefaultVariantFactory<NewPagerComposition>()
-
-const presets = includePresets((style) => createPagerStyle(() => ({ wrapper: style })),
-)
-export const defaultPagerTransition = {
-  type: 'timing',
-  duration: 300,
-  easing: Easing.linear,
-}
-
-export function pagerAnimation(height, width, translate = 'X', transition = defaultPagerTransition) {
-  const translateProp = `translate${translate}`
-
-  const translateVal = translate === 'X' ? width : height
-
-  return {
-    wrapper: {
-      height,
-      width,
-      overflow: 'hidden',
-    },
-    'page:transition': {
-      [translateProp]: transition,
-    },
-    'page:next': {
-      [translateProp]: translateVal,
-
-    },
-    'page:current': {
-      [translateProp]: 0,
-    },
-    'page:previous': {
-      [translateProp]: -translateVal,
-    },
-  }
-}
-
-export const NewMobilePagerStyles = {
-  ...presets,
-  default: createPagerStyle((theme) => ({
-    page: {
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 0,
-      top: 0,
-    },
-  })),
-  horizontal: createPagerStyle((Theme) => {
-
-    const width = Theme.values.width
-    const height = Theme.values.height * 0.8
-    return pagerAnimation(height, width, 'X')
-  }),
-  vertical: createPagerStyle((Theme) => {
-    const height = Theme.values.height * 0.8
-    const width = Theme.values.width
-    return pagerAnimation(height, width, 'Y')
-  }),
-}

package/src/components/Overlay.tsx

@@ -1,86 +0,0 @@
-import * as React from 'react'
-import {
-  ComponentVariants,
-  IconPlaceholder,
-  onUpdate,
-  OverlayComposition,
-  OverlayStyles,
-  useDefaultComponentStyle,
-} from '@codeleap/common'
-import { ReactNode } from 'react'
-import { InputLabel } from './TextInput'
-import { Button } from './Button'
-
-import { View } from './View'
-import { StylesOf } from '../types/utility'
-import { StyleSheet, ViewProps } from 'react-native'
-import { AnimatedTouchable, Touchable } from './Touchable'
-import { useAnimationState } from 'moti'
-
-export type OverlayProps = ViewProps & {
-  title?: ReactNode
-  visible?: boolean
-  showClose?: boolean
-  variants?: ComponentVariants<typeof OverlayStyles>
-  styles?: StylesOf<OverlayComposition>
-  style?: any
-  onPress?: () => void
-} & React.ComponentPropsWithoutRef<typeof AnimatedTouchable>
-
-export const Overlay: React.FC<OverlayProps> = (overlayProps) => {
-  const {
-    showClose,
-    title,
-    children,
-    visible,
-    styles = {},
-    style,
-    variants,
-    ...props
-  } = overlayProps
-
-  const variantStyles = useDefaultComponentStyle('Overlay', {
-    styles,
-    transform: StyleSheet.flatten,
-    variants: variants as any,
-  }) as StylesOf<OverlayComposition>
-
-  const animation = useAnimationState({
-    visible: variantStyles['wrapper:visible'],
-    hidden: styles['wrapper:visible'],
-  })
-
-  onUpdate(() => {
-    animation.transitionTo(visible ? 'visible' : 'hidden')
-  }, [visible])
-
-  const viewStyles = [
-    variantStyles.wrapper,
-    styles.wrapper,
-  ]
-
-  return (
-    <View animated state={animation} style={viewStyles}>
-      <Touchable
-
-        feedbackVariant='none'
-        variants={['whole', 'full', 'absolute']}
-        {...props}
-      >
-        {(title || showClose) && (
-          <View style={variantStyles.header}>
-            <InputLabel style={variantStyles.title} label={title} />
-            {showClose && (
-              <Button
-                variants={['icon']}
-                icon={'close' as IconPlaceholder}
-                style={variantStyles.closeButton}
-                debugName={'Close icon'}
-              />
-            )}
-          </View>
-        )}
-      </Touchable>
-    </View>
-  )
-}

package/src/components/Touchable.tsx

@@ -1,89 +0,0 @@
-import * as React from 'react'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
-import {
-  ComponentVariants,
-  useDefaultComponentStyle,
-  BaseViewProps,
-  ViewStyles,
-  useCodeleapContext,
-  AnyFunction,
-} from '@codeleap/common'
-import { TouchableOpacity as NativeTouchable, Pressable, View } from 'react-native'
-
-import { createAnimatableComponent } from 'react-native-animatable'
-export type TouchableProps = Omit<
-  ComponentPropsWithoutRef<typeof Pressable>,
-  'onPress'
-> & {
-  variants?: ComponentVariants<typeof ViewStyles>['variants']
-  component?: any
-  ref?: React.Ref<View>
-  debugName: string
-  activeOpacity?: number
-  debugComponent?: string
-  feedbackVariant?: 'opacity' | 'none' | 'highlight'
-  onPress?: AnyFunction
-} & BaseViewProps
-
-export const Touchable: React.FC<TouchableProps> = forwardRef<
-  View,
-  TouchableProps
->((touchableProps, ref) => {
-  const {
-    variants = [],
-    children,
-    onPress,
-    style,
-    activeOpacity = 0.5,
-    debugName,
-    debugComponent,
-    feedbackVariant = 'opacity',
-    ...props
-  } = touchableProps
-
-  const variantStyles = useDefaultComponentStyle('View', {
-    variants,
-  })
-
-  const { logger } = useCodeleapContext()
-
-  const press = () => {
-    if (!onPress) { throw { message: 'No onPress passed to touchable', touchableProps } }
-
-    logger.log(
-      `<${debugComponent || 'Touchable'}/>  pressed`,
-      debugName || variants,
-      'User interaction',
-    )
-    onPress && onPress()
-  }
-
-  const styles = [variantStyles.wrapper, style]
-
-  function getFeedbackStyle(pressed:boolean, variant: TouchableProps['feedbackVariant']) {
-    switch (variant) {
-      case 'highlight':
-        return {
-          backgroundColor: pressed ? '#e0e0e0' : 'transparent',
-        }
-        break
-      case 'opacity':
-        return {
-          opacity: pressed ? activeOpacity : 1,
-        }
-      case 'none':
-        return {}
-    }
-  }
-
-  return (
-    <Pressable onPress={press} style={({ pressed }) => ([
-      getFeedbackStyle(pressed, feedbackVariant),
-      styles,
-    ])} {...props} ref={ref}>
-      {children}
-    </Pressable>
-  )
-})
-
-export const AnimatedTouchable = createAnimatableComponent(Touchable) as unknown as typeof Touchable

package/src/components/View.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react'
-import * as Animatable from 'react-native-animatable'
-import { ComponentPropsWithoutRef, forwardRef } from 'react'
-import {
-  ComponentVariants,
-  useDefaultComponentStyle,
-  ViewStyles,
-  BaseViewProps,
-} from '@codeleap/common'
-import { View as NativeView, ViewStyle } from 'react-native'
-import { MotiView, MotiProps } from 'moti'
-export type ViewProps = ComponentPropsWithoutRef<typeof NativeView> &
-  ComponentVariants<typeof ViewStyles> & {
-    ref?: any
-    component?: any
-    animated?: boolean
-  } & BaseViewProps
-
-export const View: React.FC<ViewProps & Partial<MotiProps>> = forwardRef<NativeView, ViewProps & Partial<MotiProps>>((viewProps, ref) => {
-  const {
-    responsiveVariants = {},
-    variants = [],
-    children,
-    style,
-    onHover,
-    component,
-    animated = false,
-    ...props
-  } = viewProps
-
-  const variantStyles = useDefaultComponentStyle('View', {
-    responsiveVariants,
-    variants,
-  })
-  const Component = animated ? MotiView : (component || NativeView)
-
-  return (
-    <Component style={[variantStyles.wrapper, style]} ref={ref} {...props}>
-      {children}
-    </Component>
-  )
-})
-
-export const AnimatedView = Animatable.createAnimatableComponent(
-  View,
-) as unknown as React.ForwardRefExoticComponent<
-  { transition?: any; animation?: any } & ViewProps
->

package/src/utils/styles.ts

@@ -1,14 +0,0 @@
-import { useCodeleapContext } from '@codeleap/common'
-import { StyleSheet } from 'react-native'
-
-export function useLogStyles() {
-  const { logger } = useCodeleapContext()
-
-  return (name, styles) => {
-    logger.debug.blue(
-      name,
-      JSON.stringify(StyleSheet.flatten(styles), null, 2),
-      'Component Styles',
-    )
-  }
-}