@codeleap/mobile 5.0.10 → 5.0.11

package/dist/components/Pager/PagerItem.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { PageProps } from './types';
+type PagerItemComponentProps = PageProps<any> & {
+    renderItem: (props: any) => JSX.Element;
+};
+export declare const PagerItem: import("react").NamedExoticComponent<PagerItemComponentProps>;
+export {};

package/dist/components/Pager/PagerItem.js

@@ -0,0 +1,12 @@
+import { memoBy } from '@codeleap/utils';
+import { TypeGuards } from '@codeleap/types';
+function PagerItemComponent(props) {
+    const { item, renderItem: RenderItem, ...info } = props;
+    if (TypeGuards.isFunction(item)) {
+        const ItemComponent = item;
+        return <ItemComponent {...info}/>;
+    }
+    return <RenderItem {...info} item={item}/>;
+}
+export const PagerItem = memoBy(PagerItemComponent, ['renderItem', 'item']);
+//# sourceMappingURL=PagerItem.js.map

package/dist/components/Pager/PagerItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PagerItem.js","sourceRoot":"","sources":["../../../src/components/Pager/PagerItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAM5C,SAAS,kBAAkB,CAAC,KAA8B;IACxD,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAEvD,IAAI,UAAU,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;QAC/B,MAAM,aAAa,GAAG,IAAI,CAAA;QAC1B,OAAO,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,EAAG,CAAA;KACnC;IAED,OAAO,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAG,CAAA;AAC7C,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAA"}

package/dist/components/Pager/index.js

@@ -1,58 +1,64 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { ReduceMotion } from 'react-native-reanimated';
 import Carousel from 'react-native-reanimated-carousel';
 import { Dimensions } from 'react-native';
-import { TypeGuards } from '@codeleap/types';
-import { onUpdate, useConditionalState } from '@codeleap/hooks';
+import { useConditionalState } from '@codeleap/hooks';
 import { useNestedStylesByKey } from '@codeleap/styles';
 import { useStylesFor } from '../../hooks';
 import { MobileStyleRegistry } from '../../Registry';
 import { View } from '../View';
 import { PagerDots } from './PagerDots';
+import { PagerItem } from './PagerItem';
 export * from './styles';
 export * from './types';
 export * from './PagerDots';
-const window = Dimensions.get('window');
+const window = Dimensions.get('screen');
 export function Pager(props) {
-    const { pages, page, onChangePage, initialPage, style, showDots, renderItem: RenderItem, footer, width: carouselWidth, height: carouselHeight, autoCalculateFooterHeight, ...rest } = {
+    const { pages, page, onChangePage, initialPage, style, showDots, renderItem, footer, width: carouselWidth, height: carouselHeight, autoCalculateFooterHeight, removeFixedHeight, removeFixedWidth, ...rest } = {
         ...Pager.defaultProps,
         ...props,
     };
-    const [currentPage, setCurrentPage] = useConditionalState(page, onChangePage, { initialValue: initialPage });
     const carouselRef = useRef(null);
+    const [currentPage, setCurrentPage] = useConditionalState(page, onChangePage, { initialValue: initialPage });
     const [footerHeight, setFooterHeight] = useState(0);
+    const [loaded, setLoaded] = useState(!showDots && !footer ? true : false);
     const styles = useStylesFor(Pager.styleRegistryName, style);
     const dotStyles = useNestedStylesByKey('dot', styles);
-    onUpdate(() => {
-        carouselRef.current?.scrollTo({ index: currentPage, animated: true });
+    useEffect(() => {
+        if (carouselRef.current?.getCurrentIndex?.() !== currentPage) {
+            carouselRef.current?.scrollTo?.({ index: currentPage, animated: true });
+        }
     }, [currentPage]);
-    const renderItem = useCallback(({ item, index, animationValue }) => {
-        const itemProps = {
+    const getItemInfo = useCallback((index) => {
+        const info = {
             isFirst: index === 0,
             isLast: index === pages?.length - 1,
             isOnly: pages?.length === 1,
-            isActive: index === currentPage,
-            isNext: index === currentPage + 1,
-            isPrevious: index === currentPage - 1,
             index,
-            animationValue,
         };
-        if (TypeGuards.isFunction(item)) {
-            const ItemComponent = item;
-            return <ItemComponent {...itemProps}/>;
-        }
-        return <RenderItem {...itemProps} item={item}/>;
-    }, [RenderItem, pages?.length, currentPage]);
-    return (<View style={styles.wrapper}>
-      <Carousel data={pages} withAnimation={{
+        return info;
+    }, []);
+    const customRenderItem = useCallback(({ item, index, animationValue }) => {
+        const info = getItemInfo(index);
+        return (<PagerItem {...info} renderItem={renderItem} item={item} animationValue={animationValue}/>);
+    }, [renderItem, getItemInfo]);
+    const onFooterLayout = useCallback((event) => {
+        setFooterHeight(event.nativeEvent.layout.height);
+        setTimeout(() => setLoaded(true), 0);
+    }, []);
+    const width = carouselWidth - removeFixedWidth;
+    const height = carouselHeight - ((autoCalculateFooterHeight ? footerHeight : 0) + removeFixedHeight);
+    return (<View style={[{ width, opacity: !loaded ? 0 : 1 }, styles.wrapper]}>
+      <Carousel data={pages} autoPlay={false} loop={false} overscrollEnabled={false} pagingEnabled={false} ref={carouselRef} defaultIndex={initialPage} onSnapToItem={setCurrentPage} maxScrollDistancePerSwipe={carouselWidth} minScrollDistancePerSwipe={carouselWidth * 0.1} width={width} height={height} renderItem={customRenderItem} withAnimation={{
             type: 'timing',
             config: {
                 reduceMotion: ReduceMotion.Never,
             },
-        }} autoPlay={false} ref={carouselRef} loop={false} defaultIndex={initialPage} onSnapToItem={setCurrentPage} maxScrollDistancePerSwipe={carouselWidth} width={carouselWidth} height={carouselHeight - (autoCalculateFooterHeight ? footerHeight : 0)} renderItem={renderItem} {...rest} style={styles.carousel}/>
+        }} {...rest} style={styles.carousel}/>
+
+      <View onLayout={onFooterLayout} style={styles.footerWrapper}>
+        {footer}
 
-      <View onLayout={(event) => setFooterHeight(event.nativeEvent.layout.height)} style={styles.footerWrapper}>
-        {/* {footer} */}
         {showDots ? (<PagerDots currentPage={currentPage} pages={pages} setCurrentPage={setCurrentPage} styles={dotStyles}/>) : null}
       </View>
     </View>);
@@ -69,6 +75,9 @@ Pager.defaultProps = {
     showDots: true,
     autoCalculateFooterHeight: true,
     initialPage: 0,
+    footer: null,
+    removeFixedHeight: 0,
+    removeFixedWidth: 0,
 };
 MobileStyleRegistry.registerComponent(Pager);
 //# sourceMappingURL=index.js.map

package/dist/components/Pager/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Pager/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Pager/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Pager/types.d.ts

@@ -6,11 +6,8 @@ import { CarouselRenderItemInfo } from 'react-native-reanimated-carousel/lib/typ
 export type PageProps<T> = CarouselRenderItemInfo<T> & {
     isLast: boolean;
     isFirst: boolean;
-    isActive: boolean;
     isOnly: boolean;
-    isNext: boolean;
     index: number;
-    isPrevious: boolean;
 };
 export type PagerProps<T> = Partial<Omit<TCarouselProps<T>, 'data' | 'renderItem'>> & {
     pages: TCarouselProps<T>['data'];
@@ -22,4 +19,6 @@ export type PagerProps<T> = Partial<Omit<TCarouselProps<T>, 'data' | 'renderItem
     showDots?: boolean;
     footer?: ReactNode;
     autoCalculateFooterHeight?: boolean;
+    removeFixedHeight?: number;
+    removeFixedWidth?: number;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "5.0.10",
+  "version": "5.0.11",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,39 +9,39 @@
     "directory": "packages/mobile"
   },
   "devDependencies": {
-    "@codeleap/types": "5.0.10",
-    "@codeleap/utils": "5.0.10",
-    "@codeleap/hooks": "5.0.10",
-    "@codeleap/form": "5.0.10",
-    "@codeleap/query": "5.0.10",
-    "@codeleap/logger": "5.0.10",
-    "@codeleap/config": "5.0.10",
-    "@codeleap/modals": "5.0.10"
+    "@codeleap/types": "5.0.11",
+    "@codeleap/utils": "5.0.11",
+    "@codeleap/hooks": "5.0.11",
+    "@codeleap/form": "5.0.11",
+    "@codeleap/query": "5.0.11",
+    "@codeleap/logger": "5.0.11",
+    "@codeleap/config": "5.0.11",
+    "@codeleap/modals": "5.0.11"
   },
   "scripts": {
     "build": "tsc --build",
     "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
   },
   "peerDependencies": {
-    "@codeleap/types": "5.0.10",
-    "@codeleap/utils": "5.0.10",
-    "@codeleap/hooks": "5.0.10",
-    "@codeleap/form": "5.0.10",
-    "@codeleap/query": "5.0.10",
-    "@codeleap/logger": "5.0.10",
-    "@codeleap/styles": "5.0.10",
-    "@codeleap/modals": "5.0.10",
-    "@d11/react-native-fast-image": "8.8.0",
-    "@react-native-firebase/messaging": "21.7.2",
-    "@react-navigation/bottom-tabs": "7.2.0",
-    "@react-navigation/native": "7.0.14",
-    "@react-navigation/native-stack": "7.2.0",
+    "@codeleap/types": "5.0.11",
+    "@codeleap/utils": "5.0.11",
+    "@codeleap/hooks": "5.0.11",
+    "@codeleap/form": "5.0.11",
+    "@codeleap/query": "5.0.11",
+    "@codeleap/logger": "5.0.11",
+    "@codeleap/styles": "5.0.11",
+    "@codeleap/modals": "5.0.11",
+    "@d11/react-native-fast-image": "8.9.2",
+    "@react-native-firebase/messaging": "21.12.0",
+    "@react-navigation/bottom-tabs": "7.3.1",
+    "@react-navigation/native": "7.0.17",
+    "@react-navigation/native-stack": "7.3.1",
     "react": "18.2.0",
-    "react-native": "0.77.0",
+    "react-native": "0.77.1",
     "react-native-calendars": "1.1307.0",
-    "react-native-date-picker": "5.0.9",
+    "react-native-date-picker": "5.0.10",
     "react-native-device-info": "14.0.4",
-    "react-native-gesture-handler": "2.22.1",
+    "react-native-gesture-handler": "2.24.0",
     "react-native-image-crop-picker": "0.42.0",
     "react-native-image-viewing": "0.2.2",
     "react-native-localize": "3.4.1",
@@ -54,8 +54,8 @@
     "@miblanchard/react-native-slider": "2.3.1",
     "react-native-currency-input": "^1.1.1",
     "react-native-masked-text": "1.13.0",
-    "react-native-reanimated-carousel": "^3.5.1",
-    "react-native-sortables": "^1.1.1",
+    "react-native-reanimated-carousel": "4.0.2",
+    "react-native-sortables": "1.1.1",
     "react-native-uuid": "2.0.1"
   }
 }

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "5.0.10",
+  "version": "5.0.11",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -31,17 +31,17 @@
     "@codeleap/logger": "workspace:*",
     "@codeleap/styles": "workspace:*",
     "@codeleap/modals": "workspace:*",
-    "@d11/react-native-fast-image": "8.8.0",
-    "@react-native-firebase/messaging": "21.7.2",
-    "@react-navigation/bottom-tabs": "7.2.0",
-    "@react-navigation/native": "7.0.14",
-    "@react-navigation/native-stack": "7.2.0",
+    "@d11/react-native-fast-image": "8.9.2",
+    "@react-native-firebase/messaging": "21.12.0",
+    "@react-navigation/bottom-tabs": "7.3.1",
+    "@react-navigation/native": "7.0.17",
+    "@react-navigation/native-stack": "7.3.1",
     "react": "18.2.0",
-    "react-native": "0.77.0",
+    "react-native": "0.77.1",
     "react-native-calendars": "1.1307.0",
-    "react-native-date-picker": "5.0.9",
+    "react-native-date-picker": "5.0.10",
     "react-native-device-info": "14.0.4",
-    "react-native-gesture-handler": "2.22.1",
+    "react-native-gesture-handler": "2.24.0",
     "react-native-image-crop-picker": "0.42.0",
     "react-native-image-viewing": "0.2.2",
     "react-native-localize": "3.4.1",
@@ -54,8 +54,8 @@
     "@miblanchard/react-native-slider": "2.3.1",
     "react-native-currency-input": "^1.1.1",
     "react-native-masked-text": "1.13.0",
-    "react-native-reanimated-carousel": "^3.5.1",
-    "react-native-sortables": "^1.1.1",
+    "react-native-reanimated-carousel": "4.0.2",
+    "react-native-sortables": "1.1.1",
     "react-native-uuid": "2.0.1"
   }
 }

package/src/components/Pager/PagerItem.tsx

@@ -0,0 +1,20 @@
+import { memoBy } from '@codeleap/utils'
+import { PageProps } from './types' 
+import { TypeGuards } from '@codeleap/types'
+
+type PagerItemComponentProps = PageProps<any> & {
+  renderItem: (props: any) => JSX.Element
+}
+
+function PagerItemComponent(props: PagerItemComponentProps) {
+  const { item, renderItem: RenderItem, ...info } = props
+
+  if (TypeGuards.isFunction(item)) {
+    const ItemComponent = item
+    return <ItemComponent {...info} />
+  }
+
+  return <RenderItem {...info} item={item} />
+}
+
+export const PagerItem = memoBy(PagerItemComponent, ['renderItem', 'item'])

package/src/components/Pager/index.tsx

@@ -1,22 +1,22 @@
-import React, { useCallback, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { ReduceMotion } from 'react-native-reanimated'
 import Carousel, { ICarouselInstance } from 'react-native-reanimated-carousel'
 import { CarouselRenderItemInfo, TCarouselProps } from 'react-native-reanimated-carousel/lib/typescript/types'
 import { Dimensions, LayoutChangeEvent } from 'react-native'
-import { TypeGuards } from '@codeleap/types'
-import { onUpdate, useConditionalState } from '@codeleap/hooks'
+import { useConditionalState } from '@codeleap/hooks'
 import { AnyRecord, IJSX, StyledComponentProps, useNestedStylesByKey } from '@codeleap/styles'
 import { useStylesFor } from '../../hooks'
 import { MobileStyleRegistry } from '../../Registry'
 import { View } from '../View'
 import { PageProps, PagerProps } from './types'
 import { PagerDots } from './PagerDots'
+import { PagerItem } from './PagerItem'
 
 export * from './styles'
 export * from './types'
 export * from './PagerDots'
 
-const window = Dimensions.get('window')
+const window = Dimensions.get('screen')
 
 export function Pager<T>(props: PagerProps<T>) {
   const {
@@ -26,73 +26,95 @@ export function Pager<T>(props: PagerProps<T>) {
     initialPage,
     style,
     showDots,
-    renderItem: RenderItem,
+    renderItem,
     footer,
     width: carouselWidth,
     height: carouselHeight,
     autoCalculateFooterHeight,
+    removeFixedHeight,
+    removeFixedWidth,
     ...rest
   } = {
     ...Pager.defaultProps,
     ...props,
   }
 
-  const [currentPage, setCurrentPage] = useConditionalState(page, onChangePage, { initialValue: initialPage })
   const carouselRef = useRef<ICarouselInstance>(null)
+
+  const [currentPage, setCurrentPage] = useConditionalState(page, onChangePage, { initialValue: initialPage })
   const [footerHeight, setFooterHeight] = useState(0)
+  const [loaded, setLoaded] = useState(!showDots && !footer ? true : false)
 
   const styles = useStylesFor(Pager.styleRegistryName, style)
   const dotStyles = useNestedStylesByKey('dot', styles)
 
-  onUpdate(() => {
-    carouselRef.current?.scrollTo({ index: currentPage, animated: true })
+  useEffect(() => {
+    if (carouselRef.current?.getCurrentIndex?.() !== currentPage) {
+      carouselRef.current?.scrollTo?.({ index: currentPage, animated: true })
+    }
   }, [currentPage])
 
-  const renderItem = useCallback(({ item, index, animationValue }: CarouselRenderItemInfo<any>) => {
-    const itemProps: Omit<PageProps<T>, 'item'> = {
+  const getItemInfo = useCallback((index: number) => {
+    const info: Omit<PageProps<T>, 'item' | 'animationValue'> = {
       isFirst: index === 0,
       isLast: index === pages?.length - 1,
       isOnly: pages?.length === 1,
-      isActive: index === currentPage,
-      isNext: index === currentPage + 1,
-      isPrevious: index === currentPage - 1,
       index,
-      animationValue,
     }
 
-    if (TypeGuards.isFunction(item)) {
-      const ItemComponent = item
-      return <ItemComponent {...itemProps} />
-    }
+    return info
+  }, [])
+
+  const customRenderItem = useCallback(({ item, index, animationValue }: CarouselRenderItemInfo<any>) => {
+    const info = getItemInfo(index)
 
-    return <RenderItem {...itemProps} item={item} />
-  }, [RenderItem, pages?.length, currentPage])
+    return (
+      <PagerItem
+        {...info}
+        renderItem={renderItem}
+        item={item}
+        animationValue={animationValue}
+      />
+    )
+  }, [renderItem, getItemInfo])
+
+  const onFooterLayout = useCallback((event: LayoutChangeEvent) => {
+    setFooterHeight(event.nativeEvent.layout.height)
+    setTimeout(() => setLoaded(true), 0)
+  }, [])
+
+  const width = carouselWidth - removeFixedWidth
+  const height = carouselHeight - ((autoCalculateFooterHeight ? footerHeight : 0) + removeFixedHeight)
 
   return (
-    <View style={styles.wrapper}>
+    <View style={[{ width, opacity: !loaded ? 0 : 1 }, styles.wrapper]}>
       <Carousel
         data={pages}
+        autoPlay={false}
+        loop={false}
+        overscrollEnabled={false}
+        pagingEnabled={false}
+        ref={carouselRef}
+        defaultIndex={initialPage}
+        onSnapToItem={setCurrentPage}
+        maxScrollDistancePerSwipe={carouselWidth}
+        minScrollDistancePerSwipe={carouselWidth * 0.1}
+        width={width}
+        height={height}
+        renderItem={customRenderItem}
         withAnimation={{
           type: 'timing',
           config: {
             reduceMotion: ReduceMotion.Never,
           },
         }}
-        autoPlay={false}
-        ref={carouselRef}
-        loop={false}
-        defaultIndex={initialPage}
-        onSnapToItem={setCurrentPage}
-        maxScrollDistancePerSwipe={carouselWidth}
-        width={carouselWidth}
-        height={carouselHeight - (autoCalculateFooterHeight ? footerHeight : 0)}
-        renderItem={renderItem}
         {...rest as TCarouselProps<T>}
         style={styles.carousel}
       />
 
-      <View onLayout={(event: LayoutChangeEvent) => setFooterHeight(event.nativeEvent.layout.height)} style={styles.footerWrapper}>
-        {/* {footer} */}
+      <View onLayout={onFooterLayout} style={styles.footerWrapper}>
+        {footer}
+
         {showDots ? (
           <PagerDots currentPage={currentPage} pages={pages} setCurrentPage={setCurrentPage} styles={dotStyles} />
         ) : null}
@@ -115,6 +137,9 @@ Pager.defaultProps = {
   showDots: true,
   autoCalculateFooterHeight: true,
   initialPage: 0,
+  footer: null,
+  removeFixedHeight: 0,
+  removeFixedWidth: 0,
 } as Partial<PagerProps<unknown>>
 
 MobileStyleRegistry.registerComponent(Pager)

package/src/components/Pager/types.ts

@@ -7,11 +7,8 @@ import { CarouselRenderItemInfo } from 'react-native-reanimated-carousel/lib/typ
 export type PageProps<T> = CarouselRenderItemInfo<T> & {
   isLast: boolean
   isFirst: boolean
-  isActive: boolean
   isOnly: boolean
-  isNext: boolean
   index: number
-  isPrevious: boolean
 }
 
 export type PagerProps<T> = Partial<Omit<TCarouselProps<T>, 'data' | 'renderItem'>> & {
@@ -24,4 +21,6 @@ export type PagerProps<T> = Partial<Omit<TCarouselProps<T>, 'data' | 'renderItem
   showDots?: boolean
   footer?: ReactNode
   autoCalculateFooterHeight?: boolean
+  removeFixedHeight?: number
+  removeFixedWidth?: number
 }