@codeleap/mobile 3.9.0 → 3.10.1

package/package.json

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

package/src/components/ImageView/Spotlight.tsx

@@ -145,37 +145,41 @@ export const useImageSpotlight = (name: string | null, src: ImageProps['source']
   }
 }
 
-type HeaderComponentProps = {
+export type SpotlightHeaderComponent = {
   imageIndex: number
   spotlight: ReturnType<typeof useSpotlight>
 }
 
-type DefaultFooterComponentType = React.ComponentType<{
+export type SpootlightFooterComponent = React.ComponentType<{
   imageIndex: number
   imagesLength: number
+  spotlight: ReturnType<typeof useSpotlight>
 }>
 
-type FooterComponentProps = HeaderComponentProps
+type FooterComponentProps = SpotlightHeaderComponent
 
-type SpotlightProps = {
+export type SpotlightProps = {
   name?: string
-  HeaderComponent?: (props: HeaderComponentProps) => JSX.Element
+  HeaderComponent?: (props: SpotlightHeaderComponent) => JSX.Element
   FooterComponent?: (props: FooterComponentProps) => JSX.Element
   showFooter?: boolean
 } & ImageViewProps
 
-const DefaultFooterComponent: DefaultFooterComponentType = ({ imageIndex, imagesLength }) => (
+const DefaultFooterComponent: SpootlightFooterComponent = ({ imageIndex, imagesLength }) => (
   <View variants={['marginBottom:5', 'alignCenter']}>
     <Text text={imageIndex + 1 + '/' + imagesLength} />
   </View>
 )
 
-export const Spotlight: React.FC<SpotlightProps> = ({ name, HeaderComponent, FooterComponent, ...rest }) => {
+export const Spotlight = (props: SpotlightProps) => {
+  const { name, HeaderComponent, showFooter, FooterComponent, ...rest } = props
   const spotlight = useSpotlight(name)
+
   useUnmount(() => {
     spotlight.clear()
   })
 
+  const Footer = showFooter ? FooterComponent || DefaultFooterComponent : (() => null)
   return <ImageView
     imageIndex={spotlight.currentIndex}
     images={spotlight.images.map(x => x.source)}
@@ -183,10 +187,7 @@ export const Spotlight: React.FC<SpotlightProps> = ({ name, HeaderComponent, Foo
     onRequestClose={spotlight.close}
     visible={typeof spotlight.currentIndex !== 'undefined'}
     {...rest}
-    FooterComponent={({ imageIndex }) => !!FooterComponent ?
-      <FooterComponent imageIndex={imageIndex} spotlight={spotlight} /> :
-      <DefaultFooterComponent imageIndex={imageIndex} imagesLength={spotlight.images.length} />
-    }
+    FooterComponent={({ imageIndex }) => <Footer imageIndex={imageIndex} spotlight={spotlight} imagesLength={spotlight.images.length} />}
     HeaderComponent={!!HeaderComponent ? ({ imageIndex }) => <HeaderComponent spotlight={spotlight} imageIndex={imageIndex} /> : undefined}
   />
 }

package/src/components/ImageView/component.tsx

@@ -5,7 +5,8 @@ import _ImageView from 'react-native-image-viewing'
 import { StatusBar } from 'react-native'
 
 export type ImageViewProps = PropsOf<typeof _ImageView>
-export const ImageView: React.FC<ImageViewProps> = (props) => {
+
+export const ImageView = (props: ImageViewProps) => {
   onUpdate(() => {
     StatusBar.setHidden(props.visible)
   }, [props.visible])