@codeleap/mobile 1.9.33 → 2.0.0

package/src/components/Image/index.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react'
+import {
+  ComponentVariants,
+
+  useDefaultComponentStyle,
+  arePropsEqual,
+  FormTypes,
+} 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)
+  }
+  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
+

package/src/components/List/styles.ts

@@ -0,0 +1,15 @@
+import { createDefaultVariantFactory } from '@codeleap/common'
+import { ScrollComposition, ScrollStyles } from '../Scroll/styles'
+
+export type ListComposition = ScrollComposition
+
+const createListStyle = createDefaultVariantFactory<ListComposition>()
+
+export const ListStyles = {
+  default: createListStyle((theme) => {
+    const defaultStyles = ScrollStyles.default(theme)
+    return {
+      ...defaultStyles,
+    }
+  }),
+}

package/src/components/Modal/index.tsx

@@ -11,9 +11,9 @@ import {
   useDefaultComponentStyle,
 } from '@codeleap/common'
 import {
-  MobileModalComposition,
-  MobileModalStyles,
-  MobileModalParts,
+  ModalComposition,
+  ModalStyles,
+  ModalParts,
 } from './styles'
 import { StyleSheet } from 'react-native'
 import { StylesOf } from '../../types/utility'
@@ -21,14 +21,14 @@ import { StylesOf } from '../../types/utility'
 import { useDynamicAnimation } from 'moti'
 import { Backdrop } from '../Backdrop'
 import { useStaticAnimationStyles } from '../../utils/hooks'
-import { Text } from '../Text'
+import { Text, TextProps } from '../Text'
 import { Touchable } from '../Touchable'
 
 export * from './styles'
 
 export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
-  variants?: ComponentVariants<typeof MobileModalStyles>['variants']
-  styles?: StylesOf<MobileModalComposition>
+  variants?: ComponentVariants<typeof ModalStyles>['variants']
+  styles?: StylesOf<ModalComposition>
   dismissOnBackdrop?: boolean
   buttonProps?: ButtonProps
   accessible?: boolean
@@ -42,7 +42,41 @@ export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
   toggle?: () => void
   zIndex?: number
   scroll?: boolean
+  header?: React.ReactElement
   keyboardAware?: boolean
+  renderHeader?: (props: ModalHeaderProps) => React.ReactElement
+}
+
+export type ModalHeaderProps = Omit<ModalProps, 'styles' | 'renderHeader'> & {
+  styles: {
+    wrapper: ViewProps['style']
+    title: TextProps['style']
+    closeButton: ButtonProps['styles']
+  }
+}
+
+const DefaultHeader:React.FC<ModalHeaderProps> = (props) => {
+  const { styles, title, showClose, closable, debugName, closeIconName, toggle } = props
+  return <>
+    {(title || showClose) && (
+      <View style={styles.wrapper}>
+        {typeof title === 'string' ? (
+          <Text text={title} style={styles.title} />
+        ) : (
+          title
+        )}
+
+        {(showClose && closable) && (
+          <Button
+            debugName={`${debugName} modal close button`}
+            icon={closeIconName as IconPlaceholder}
+            variants={['icon']}
+            onPress={toggle}
+            styles={styles.closeButton}
+          />
+        )}
+      </View>
+    )}</>
 }
 
 export const Modal: React.FC<ModalProps> = (modalProps) => {
@@ -50,16 +84,17 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     variants = [],
     styles = {},
     visible,
-    showClose,
+
     closable = true,
-    title,
+
     footer,
     children,
     toggle = () => null,
     dismissOnBackdrop = true,
-    closeIconName = 'close',
+    header = null,
     debugName,
     scroll = true,
+    renderHeader,
     keyboardAware = true,
     zIndex = null,
     ...props
@@ -71,7 +106,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     styles,
   }) as ModalProps['styles']
 
-  function getStyles(key: MobileModalParts) {
+  function getStyles(key: ModalParts) {
     const s = [
       variantStyles[key],
       styles[key],
@@ -91,8 +126,24 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     boxAnimation.animateTo(visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden'])
   }, [visible])
   const wrapperStyle = getStyles('wrapper')
+  const ScrollComponent = scroll ? Scroll : View
+  const scrollStyle = scroll ? getStyles('innerWrapper') : [getStyles('innerWrapper'), getStyles('innerWrapperScroll')]
+
+  const headerProps:ModalHeaderProps = {
+    ...modalProps,
+    styles: {
+      wrapper: getStyles('header'),
+      title: getStyles('title'),
+      closeButton: buttonStyles,
+    },
+  }
+  const Header = renderHeader || DefaultHeader
+
   return (
-    <View style={[wrapperStyle, { zIndex: TypeGuards.isNumber(zIndex) ? zIndex : wrapperStyle?.zIndex }]} pointerEvents={visible ? 'auto' : 'none'}>
+    <View
+      style={[wrapperStyle, { zIndex: TypeGuards.isNumber(zIndex) ? zIndex : wrapperStyle?.zIndex }]}
+      pointerEvents={visible ? 'auto' : 'none'}
+    >
 
       <Backdrop visible={visible} debugName={`Modal ${debugName} backdrop`} styles={{
         'wrapper:hidden': variantStyles['backdrop:hidden'],
@@ -103,18 +154,20 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
         transition: { ...variantStyles['backdrop:transition'] },
       }}
       />
-      <Scroll
-        style={getStyles('innerWrapper')}
+      <ScrollComponent
+        style={scrollStyle}
         contentContainerStyle={getStyles('innerWrapperScroll')}
         scrollEnabled={scroll}
         keyboardAware={keyboardAware}
       >
-        <Touchable
-          feedbackVariant='none'
-          onPress={(dismissOnBackdrop && closable) ? toggle : (() => {})}
-          debugName={'Modal backdrop touchable'}
-          style={variantStyles.backdropTouchable}
-        />
+        {dismissOnBackdrop &&
+          <Touchable
+            feedbackVariant='none'
+            onPress={ closable ? toggle : (() => {})}
+            debugName={'Modal backdrop touchable'}
+            style={variantStyles.backdropTouchable}
+            android_ripple={null}
+          />}
         <View
           animated
           state={boxAnimation}
@@ -122,25 +175,8 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
           transition={{ ...variantStyles['box:transition'] }}
           {...props}
         >
-          {(title || showClose) && (
-            <View style={getStyles('header')}>
-              {typeof title === 'string' ? (
-                <Text text={title} style={getStyles('title')} />
-              ) : (
-                title
-              )}
-
-              {(showClose && closable) && (
-                <Button
-                  debugName={`${debugName} modal close button`}
-                  icon={closeIconName as IconPlaceholder}
-                  variants={['icon']}
-                  onPress={toggle}
-                  styles={buttonStyles}
-                />
-              )}
-            </View>
-          )}
+
+          {header ? header : <Header {...headerProps}/>}
 
           <View style={getStyles('body')}>{children}</View>
           {footer && (
@@ -149,7 +185,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
             </View>
           )}
         </View>
-      </Scroll>
+      </ScrollComponent>
     </View>
 
   )