@codeleap/mobile 3.7.1 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "3.7.1",
+  "version": "3.9.0",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {

package/src/components/ImageView/Spotlight.tsx

@@ -2,15 +2,18 @@ import React, { useContext, useState } from 'react'
 import { deepEqual, onUpdate, ReactState, TypeGuards, usePrevious, useUnmount } from '@codeleap/common'
 
 import uuid from 'react-native-uuid'
-import { ImageView } from './component'
+import { ImageView, ImageViewProps } from './component'
 import { ImageProps } from '../Image'
 import { ImageURISource, ImageRequireSource } from 'react-native'
+import { View } from '../View'
+import { Text } from '../Text'
+
 type ImageSource = ImageURISource | ImageRequireSource
 
 type TImage = {
-    source: ImageSource
-    created: number
-    id: string
+  source: ImageSource
+  created: number
+  id: string
 
 }
 type ImageList = Record<string, TImage>
@@ -18,19 +21,18 @@ 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]
-
+  spotlights: SpotlightState[0]
+  setSpotlights: SpotlightState[1]
+  indexes: IndexState[0]
+  setIndexes: IndexState[1]
 }
 
 const SpotlightCtx = React.createContext({} as TSpotlightCtx)
 
-export const SpotlightProvider:React.FC<React.PropsWithChildren<any>> = ({ children }) => {
+export const SpotlightProvider: React.FC<React.PropsWithChildren<any>> = ({ children }) => {
   const [spotlights, setSpotlights] = useState<TSpotlightCtx['spotlights']>({})
   const [indexes, setIndexes] = useState<TSpotlightCtx['indexes']>({})
-  const ctxValue:TSpotlightCtx = {
+  const ctxValue: TSpotlightCtx = {
     spotlights,
     setSpotlights,
     indexes,
@@ -143,17 +145,48 @@ export const useImageSpotlight = (name: string | null, src: ImageProps['source']
   }
 }
 
-export const Spotlight = ({ name }: {name: string}) => {
+type HeaderComponentProps = {
+  imageIndex: number
+  spotlight: ReturnType<typeof useSpotlight>
+}
+
+type DefaultFooterComponentType = React.ComponentType<{
+  imageIndex: number
+  imagesLength: number
+}>
+
+type FooterComponentProps = HeaderComponentProps
+
+type SpotlightProps = {
+  name?: string
+  HeaderComponent?: (props: HeaderComponentProps) => JSX.Element
+  FooterComponent?: (props: FooterComponentProps) => JSX.Element
+  showFooter?: boolean
+} & ImageViewProps
+
+const DefaultFooterComponent: DefaultFooterComponentType = ({ imageIndex, imagesLength }) => (
+  <View variants={['marginBottom:5', 'alignCenter']}>
+    <Text text={imageIndex + 1 + '/' + imagesLength} />
+  </View>
+)
+
+export const Spotlight: React.FC<SpotlightProps> = ({ name, HeaderComponent, FooterComponent, ...rest }) => {
   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'}
-
+    {...rest}
+    FooterComponent={({ imageIndex }) => !!FooterComponent ?
+      <FooterComponent imageIndex={imageIndex} spotlight={spotlight} /> :
+      <DefaultFooterComponent imageIndex={imageIndex} imagesLength={spotlight.images.length} />
+    }
+    HeaderComponent={!!HeaderComponent ? ({ imageIndex }) => <HeaderComponent spotlight={spotlight} imageIndex={imageIndex} /> : undefined}
   />
 }

package/src/components/ImageView/component.tsx

@@ -3,22 +3,8 @@ import * as React from 'react'
 import { onUpdate, PropsOf } from '@codeleap/common'
 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)
@@ -27,7 +13,6 @@ export const ImageView: React.FC<ImageViewProps> = (props) => {
   return (
     <_ImageView
       doubleTapToZoomEnabled={false}
-      FooterComponent={({ imageIndex }) => <FooterComponent imageIndex={imageIndex} imagesLength={props.images.length}/>}
       presentationStyle={'overFullScreen'}
       {...props}
     />