@fountain-ui/lab 2.0.0-beta.5 → 2.0.0-beta.50

package/src/ViewabilityTrackerView/useViewabilityTracker.ts

@@ -0,0 +1,85 @@
+import type { RefObject } from 'react';
+import { useEffect, useRef } from 'react';
+import type { View } from 'react-native';
+import { useValidWindowDimensions } from '@fountain-ui/core';
+import { useDeferredExecutor } from '../hooks';
+import type { ViewabilityDetail } from './measureViewability';
+import measureViewability from './measureViewability';
+import type Viewability from './Viewability';
+
+export interface ViewabilityTrackerConfig {
+    enabled: boolean;
+    measurementIntervalMillis: number;
+    onViewabilityChange?: (viewability: Viewability) => void;
+    viewRef: RefObject<View>;
+    visiblePercentThreshold: number;
+}
+
+const initialViewability: Readonly<Viewability> = { visible: false };
+
+export default function useViewabilityTracker(config: ViewabilityTrackerConfig) {
+    const {
+        enabled,
+        measurementIntervalMillis,
+        onViewabilityChange,
+        viewRef,
+        visiblePercentThreshold,
+    } = config;
+
+    const viewabilityRef = useRef<Viewability>(initialViewability);
+
+    const executor = useDeferredExecutor();
+
+    const window = useValidWindowDimensions();
+
+    const maybeMeasureRecursive = () => {
+        if (!enabled) {
+            return;
+        }
+
+        const mapViewabilityDetailToViewability = (detail: ViewabilityDetail): Viewability => {
+            return { visible: detail.visiblePercent >= visiblePercentThreshold };
+        };
+
+        const isViewabilityEquals = (a: Viewability, b: Viewability): boolean => {
+            return a.visible === b.visible;
+        };
+
+        const dispatchViewabilityChanged = (viewability: Viewability) => {
+            executor.execute(() => onViewabilityChange?.(viewability));
+        };
+
+        const onViewabilityDetailMeasured = (detail: ViewabilityDetail) => {
+            const nextViewability = mapViewabilityDetailToViewability(detail);
+
+            if (!isViewabilityEquals(viewabilityRef.current, nextViewability)) {
+                viewabilityRef.current = nextViewability;
+
+                dispatchViewabilityChanged(nextViewability);
+            }
+
+            maybeMeasureRecursive();
+        };
+
+        const maybeMeasure = () => {
+            if (viewRef.current) {
+                measureViewability({
+                    view: viewRef.current,
+                    windowWidth: window.width,
+                    windowHeight: window.height,
+                    onViewabilityDetailMeasured,
+                });
+            }
+        };
+
+        executor.execute(maybeMeasure, measurementIntervalMillis);
+    };
+
+    useEffect(() => {
+        if (enabled) {
+            maybeMeasureRecursive();
+        } else {
+            executor.cancel();
+        }
+    }, [enabled]);
+};

package/src/hooks/index.ts

@@ -1,3 +1,5 @@
+export { default as useDeferredExecutor } from './useDeferredExecutor';
+export { default as useIsMounted } from './useIsMounted';
 export { default as useUnstableCollapsibleAppBar } from './useUnstableCollapsibleAppBar';
 export { default as useUnstableToggleDisplayStyle } from './useUnstableToggleDisplayStyle';
 

package/src/hooks/useDeferredExecutor.ts

@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useRef } from 'react';
+import useIsMounted from './useIsMounted';
+
+export interface Runnable {
+    (): void;
+}
+
+export interface DeferredExecute {
+    (runnable: Runnable, delay?: number): void;
+}
+
+export interface DeferredExecutor {
+    cancel: () => void;
+    execute: DeferredExecute;
+}
+
+export default function useDeferredExecutor(): DeferredExecutor {
+    const isMounted = useIsMounted();
+    const timeoutIdRef = useRef<NodeJS.Timer | null>(null);
+
+    const cancel = useCallback(() => {
+        if (timeoutIdRef.current) {
+            clearTimeout(timeoutIdRef.current);
+        }
+    }, []);
+
+    useEffect(() => {
+        return cancel;
+    }, []);
+
+    const execute = useCallback<DeferredExecute>((runnable, delay) => {
+        if (!isMounted()) {
+            return;
+        }
+
+        cancel();
+
+        if (Number.isFinite(delay)) {
+            timeoutIdRef.current = setTimeout(() => runnable(), delay);
+        } else {
+            runnable();
+        }
+    }, []);
+
+    return { cancel, execute };
+};

package/src/hooks/useHeight.ts

@@ -1,13 +1,12 @@
-import React from 'react';
-import { ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
+import React, { useCallback } from 'react';
+import { LayoutChangeEvent, ViewProps } from 'react-native';
 
 type OnLayoutCallback = ViewProps['onLayout'];
 
 export default function useHeight(initialHeight = 0): [number, OnLayoutCallback] {
     const [height, setHeight] = React.useState<number>(initialHeight);
 
-    const onLayout = Animated.useWorkletCallback((e) => {
+    const onLayout = useCallback((e: LayoutChangeEvent) => {
         setHeight(e.nativeEvent.layout.height);
     }, []);
 

package/src/hooks/useIsMounted.ts

@@ -0,0 +1,19 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export interface UseIsMounted {
+    (): boolean;
+}
+
+export default function useIsMounted(): UseIsMounted {
+    const mountedRef = useRef<boolean>(false);
+
+    useEffect(() => {
+        mountedRef.current = true;
+
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+
+    return useCallback(() => mountedRef.current, []);
+};

package/src/hooks/useUnstableCollapsibleAppBar.ts

@@ -1,6 +1,13 @@
-import React, { useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
-import Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import {
+    useAnimatedScrollHandler,
+    useAnimatedStyle,
+    useDerivedValue,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import useAppbarStyles from './useAppbarStyles';
 import useElevationStyle from './useElevationStyle';
@@ -22,13 +29,12 @@ export interface ContentInsets {
 }
 
 export interface Options {
-    translucent?: boolean;
     shouldTranslateYReset?: boolean;
 }
 
 export interface CollapsibleAppBar {
     appBarStyle: ViewStyleProp;
-    vectorY: Animated.SharedValue<number>;
+    vectorY: SharedValue<number>;
     onAppBarLayout: OnLayoutCallback;
     onCollapsibleToolbarLayout: OnLayoutCallback;
     onScroll: OnScroll;
@@ -37,7 +43,6 @@ export interface CollapsibleAppBar {
 }
 
 const defaultOptions: Required<Options> = {
-    translucent: false,
     shouldTranslateYReset: false,
 };
 
@@ -45,7 +50,6 @@ const ANIMATION_DURATION_MILLIS = 100;
 
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 
-
 function useLargerValueOfLastTwoValues(value: number) {
     const refLatestTwoValues = useRef([0, 0]);
 
@@ -55,12 +59,8 @@ function useLargerValueOfLastTwoValues(value: number) {
     return Math.max(...refLatestTwoValues.current);
 }
 
-
 export default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
-    const {
-        translucent,
-        shouldTranslateYReset,
-    }: Required<Options> = {
+    const { shouldTranslateYReset }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
@@ -73,38 +73,55 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
     const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);
     const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
 
-    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);
+    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
 
-    const translateY = Animated.useSharedValue<number>(0);
-    const lastTranslateY = Animated.useSharedValue<number>(0);
-    const lastOffsetY = Animated.useSharedValue<number>(0);
-    const prevOffsetY = Animated.useSharedValue<number>(0);
-    const overlapped = Animated.useSharedValue<boolean>(false);
-    const vectorY = Animated.useSharedValue<number>(0);
+    const translateY = useSharedValue<number>(0);
+    const lastTranslateY = useSharedValue<number>(0);
+    const lastOffsetY = useSharedValue<number>(0);
+    const prevOffsetY = useSharedValue<number>(0);
+    const overlapped = useSharedValue<boolean>(false);
+    const vectorY = useSharedValue<number>(0);
 
     const elevationStyle = useElevationStyle(4);
-    const animatedStyle = Animated.useAnimatedStyle(() => {
-        return Platform.OS === 'web' ? ({
-            transform: [{ translateY: translateY.value }],
-            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
-        }) : ({
-            transform: [{ translateY: translateY.value }],
-            elevation: overlapped.value ? elevationStyle?.elevation : 0,
-            shadowColor: elevationStyle?.shadowColor,
-            shadowOffset: elevationStyle?.shadowOffset,
-            shadowRadius: elevationStyle?.shadowRadius,
-            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
-        });
-    });
-
-    const indexRef = React.useRef<number>(0);
-    const offsetsRef = React.useRef<Array<number>>([]);
-
-    const onScrollViewChanged = (nextIndex: number) => {
+    const animatedStyle = useAnimatedStyle(() => {
+        const transform = [{ translateY: translateY.value }];
+
+        if (Platform.OS === 'web') {
+            return {
+                transform,
+                boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,
+            };
+        }
+        if (Platform.OS === 'android') {
+            return {
+                transform,
+                elevation: overlapped.value ? elevationStyle?.elevation : 0,
+            };
+        }
+        if (Platform.OS === 'ios') {
+            return {
+                transform,
+                shadowColor: elevationStyle?.shadowColor,
+                shadowOffset: elevationStyle?.shadowOffset,
+                shadowRadius: elevationStyle?.shadowRadius,
+                shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,
+            };
+        }
+        return {};
+    }, [
+        /**
+         * FIXME: Consider add `elevationStyle` to dependencies.
+         */
+    ]);
+
+    const indexRef = useRef<number>(0);
+    const offsetsRef = useRef<Array<number>>([]);
+
+    const onScrollViewChanged = useCallback((nextIndex: number) => {
         const prevIndex = indexRef.current;
         if (prevIndex === nextIndex) {
             if (shouldTranslateYReset) {
-                translateY.value = Animated.withTiming(0, {
+                translateY.value = withTiming(0, {
                     duration: ANIMATION_DURATION_MILLIS,
                 });
 
@@ -128,15 +145,15 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
 
         // If next ScrollView's offset is too short, expand app bar.
         if (translateY.value < 0 && savedOffsetY < appBarHeight) {
-            translateY.value = Animated.withTiming(0, {
+            translateY.value = withTiming(0, {
                 duration: ANIMATION_DURATION_MILLIS,
             });
 
             vectorY.value = 0;
         }
-    };
+    }, [appBarHeight]);
 
-    const scrollHandler = Animated.useAnimatedScrollHandler({
+    const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
             lastTranslateY.value = translateY.value;
         },
@@ -162,13 +179,13 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
             } else {
                 if (offsetY > -maxTy) {
                     if (ty === 0) {
-                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
+                        translateY.value = withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {
                             duration: ANIMATION_DURATION_MILLIS,
                         });
                     }
                 } else {
                     if (ty === maxTy) {
-                        translateY.value = Animated.withTiming(0, {
+                        translateY.value = withTiming(0, {
                             duration: ANIMATION_DURATION_MILLIS,
                         });
                     }
@@ -201,17 +218,17 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
 
             overlapped.value = offsetY + nextTranslateY > 0;
 
-            translateY.value = Animated.withTiming(nextTranslateY, {
+            translateY.value = withTiming(nextTranslateY, {
                 duration: ANIMATION_DURATION_MILLIS,
             });
         },
-    });
+    }, [appBarHeight]);
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 
     const appBarStyle = [
         animatedStyle,
-        translucent ? { paddingTop: safeAreaInsets.top } : undefined,
+        { paddingTop: safeAreaInsets.top },
         hasCollapsible ? styles.floating : undefined,
     ];
 

package/src/hooks/useUnstableToggleDisplayStyle.ts

@@ -1,13 +1,14 @@
-import Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import { useAnimatedReaction, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 
 export default function useAnimatedDisplayStyle(
-    vectorY: Animated.SharedValue<number>,
+    vectorY: SharedValue<number>,
     threshold: number = 200,
     defaultDisplay: 'flex' | 'none' = 'flex',
 ) {
-    const display = Animated.useSharedValue(defaultDisplay);
+    const display = useSharedValue(defaultDisplay);
 
-    Animated.useAnimatedReaction(
+    useAnimatedReaction(
         () => vectorY.value,
         (vy) => {
             if (vy >= threshold) {
@@ -16,9 +17,10 @@ export default function useAnimatedDisplayStyle(
                 display.value = 'flex';
             }
         },
+        [threshold],
     );
 
-    return Animated.useAnimatedStyle(() => ({
+    return useAnimatedStyle(() => ({
         display: display.value,
-    }));
+    }), []);
 };

package/src/index.ts

@@ -19,4 +19,7 @@ export * from './ComicViewer';
 export { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';
 export * from './StatusBarProvider';
 
+export { default as ViewabilityTrackerView } from './ViewabilityTrackerView';
+export * from './ViewabilityTrackerView';
+
 export * from './hooks';

package/yarn-error.log

@@ -0,0 +1,103 @@
+Arguments: 
+  /Users/chan/.nvm/versions/node/v16.16.0/bin/node /usr/local/Cellar/yarn/1.22.19/libexec/bin/yarn.js add react-native-device-info
+
+PATH: 
+  /Users/chan/.nvm/versions/node/v16.16.0/bin:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/Users/chan/IdeaProjects/tappytoon/bin/git-ext:/Library/Java/JavaVirtualMachines/jdk-12.0.2.jdk/Contents/Home/bin:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/Users/chan/IdeaProjects/tappytoon/bin/git-ext:/Users/chan/Library/Android/sdk/tools:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/Users/chan/IdeaProjects/tappytoon/bin/git-ext:/Users/chan/Library/Android/sdk/platform-tools:/Users/chan/library/android/sdk/tools:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/Users/chan/IdeaProjects/tappytoon/bin/git-ext:/Library/Java/JavaVirtualMachines/jdk-12.0.2.jdk/Contents/Home/bin:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/Users/chan/IdeaProjects/tappytoon/bin/git-ext:/Users/chan/Library/Android/sdk/tools:/usr/local/bin:/System/Cryptexes/App/usr/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/Users/chan/IdeaProjects/tappytoon/bin/git-ext:/Users/chan/Library/Android/sdk/platform-tools:/Users/hyungchanyuk/library/android/sdk/platform-tools:/Users/chan/WebstormProjects/tappytoon/bin/git-ext
+
+Yarn version: 
+  1.22.19
+
+Node version: 
+  16.16.0
+
+Platform: 
+  darwin x64
+
+Trace: 
+  SyntaxError: /Users/chan/WebstormProjects/tappytoon/nodejs/fountain-ui/packages/fountain-ui-lab/package.json: Unexpected token } in JSON at position 681
+      at JSON.parse (<anonymous>)
+      at /usr/local/Cellar/yarn/1.22.19/libexec/lib/cli.js:1629:59
+      at Generator.next (<anonymous>)
+      at step (/usr/local/Cellar/yarn/1.22.19/libexec/lib/cli.js:310:30)
+      at /usr/local/Cellar/yarn/1.22.19/libexec/lib/cli.js:321:13
+
+npm manifest: 
+  {
+    "name": "@fountain-ui/lab",
+    "version": "2.0.0-beta.45",
+    "private": false,
+    "author": "Fountain-UI Team",
+    "description": "Incubator for Fountain-UI React components.",
+    "license": "MIT",
+    "main": "./build/commonjs/index.js",
+    "module": "./build/module/index.js",
+    "react-native": "./src/index.ts",
+    "source": "./src/index.ts",
+    "types": "./build/typescript/index.d.ts",
+    "scripts": {
+      "clean": "rimraf build",
+      "prepare": "bob build"
+    },
+    "dependencies": {
+      "@emotion/react": "^11.10.0",
+      "@emotion/styled": "^11.10.0",
+      "@fountain-ui/icons": "^2.0.0-beta.9",
+      "@fountain-ui/utils": "^2.0.0-beta.4",
+      "react-native-calendars": "1.1267.0",
+    },
+    "peerDependencies": {
+      "@fountain-ui/core": "^2.0.0-beta.3",
+      "@gorhom/bottom-sheet": "^4.5.0",
+      "date-fns": "^2.0.0",
+      "react": "^16.8.0 || ^17.0.0",
+      "react-dom": "^16.8.0 || ^17.0.0",
+      "react-native": "^0.63.0",
+      "react-native-gesture-handler": "^2.0.0",
+      "react-native-pager-view": "^4.0.0"
+    },
+    "peerDependenciesMeta": {
+      "@gorhom/bottom-sheet": {
+        "optional": true
+      },
+      "react-dom": {
+        "optional": true
+      },
+      "react-native-pager-view": {
+        "optional": true
+      }
+    },
+    "devDependencies": {
+      "@gorhom/bottom-sheet": "^4.5.0",
+      "date-fns": "^2.23.0",
+      "react-native-pager-view": "^4.2.4",
+      "react-native-safe-area-context": "^4.0.0"
+    },
+    "react-native-builder-bob": {
+      "source": "./src",
+      "output": "./build",
+      "targets": [
+        "commonjs",
+        "module",
+        [
+          "typescript",
+          {
+            "project": "tsconfig.build.json",
+            "tsc": "../../node_modules/.bin/tsc"
+          }
+        ]
+      ],
+      "files": [
+        "./src",
+        "./build"
+      ]
+    },
+    "publishConfig": {
+      "access": "public"
+    }
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile

package/build/commonjs/Carousel/CarouselNative.js

@@ -1,72 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Carousel;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactNative = require("react-native");
-
-var _reactNativeSnapCarousel = _interopRequireDefault(require("react-native-snap-carousel"));
-
-var _utils = require("./utils");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function Carousel(props) {
-  const {
-    autoplay = _utils.defaultAutoplay,
-    autoplayInterval = _utils.defaultAutoplayInterval,
-    centerSlidePadding,
-    data,
-    inactiveSlideOpacity = _utils.defaultInactiveSlideOpacity,
-    inactiveSlideScale = _utils.defaultInactiveSlideScale,
-    index,
-    infinite = _utils.defaultInfinite,
-    onChange,
-    renderItem
-  } = props;
-  const carouselRef = (0, _react.useRef)(null);
-  const [sliderWidth, setSliderWidth] = (0, _react.useState)(() => _reactNative.Dimensions.get('window').width);
-  const itemWidth = centerSlidePadding !== undefined ? sliderWidth - centerSlidePadding * 2 : sliderWidth;
-  (0, _react.useEffect)(() => {
-    const carousel = carouselRef.current;
-
-    if (carousel && index !== carousel.currentIndex) {
-      carousel.snapToItem(index, true);
-    }
-  }, [index]);
-
-  const handleSnapToItem = newIndex => {
-    if (onChange) {
-      onChange(newIndex);
-    }
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    onLayout: event => setSliderWidth(event.nativeEvent.layout.width)
-  }, /*#__PURE__*/_react.default.createElement(_reactNativeSnapCarousel.default, {
-    autoplay: autoplay,
-    autoplayInterval: autoplayInterval,
-    data: data,
-    horizontal: true,
-    inactiveSlideOpacity: inactiveSlideOpacity,
-    inactiveSlideScale: inactiveSlideScale,
-    itemWidth: itemWidth,
-    loop: infinite,
-    loopClonesPerSide: 2,
-    onSnapToItem: handleSnapToItem,
-    ref: carouselRef,
-    renderItem: renderItem,
-    sliderWidth: sliderWidth
-  }));
-}
-
-;
-//# sourceMappingURL=CarouselNative.js.map

package/build/commonjs/Carousel/CarouselNative.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["CarouselNative.tsx"],"names":["Carousel","props","autoplay","defaultAutoplay","autoplayInterval","defaultAutoplayInterval","centerSlidePadding","data","inactiveSlideOpacity","defaultInactiveSlideOpacity","inactiveSlideScale","defaultInactiveSlideScale","index","infinite","defaultInfinite","onChange","renderItem","carouselRef","sliderWidth","setSliderWidth","Dimensions","get","width","itemWidth","undefined","carousel","current","currentIndex","snapToItem","handleSnapToItem","newIndex","event","nativeEvent","layout"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;AAQe,SAASA,QAAT,CAAyBC,KAAzB,EAAsD;AACjE,QAAM;AACFC,IAAAA,QAAQ,GAAGC,sBADT;AAEFC,IAAAA,gBAAgB,GAAGC,8BAFjB;AAGFC,IAAAA,kBAHE;AAIFC,IAAAA,IAJE;AAKFC,IAAAA,oBAAoB,GAAGC,kCALrB;AAMFC,IAAAA,kBAAkB,GAAGC,gCANnB;AAOFC,IAAAA,KAPE;AAQFC,IAAAA,QAAQ,GAAGC,sBART;AASFC,IAAAA,QATE;AAUFC,IAAAA;AAVE,MAWFf,KAXJ;AAaA,QAAMgB,WAAW,GAAG,mBAAqC,IAArC,CAApB;AAEA,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC,qBAAS,MAAMC,wBAAWC,GAAX,CAAe,QAAf,EAAyBC,KAAxC,CAAtC;AAEA,QAAMC,SAAS,GAAGjB,kBAAkB,KAAKkB,SAAvB,GACZN,WAAW,GAAIZ,kBAAkB,GAAG,CADxB,GAEZY,WAFN;AAIA,wBAAU,MAAM;AACZ,UAAMO,QAAQ,GAAGR,WAAW,CAACS,OAA7B;;AACA,QAAID,QAAQ,IAAIb,KAAK,KAAKa,QAAQ,CAACE,YAAnC,EAAiD;AAC7CF,MAAAA,QAAQ,CAACG,UAAT,CAAoBhB,KAApB,EAA2B,IAA3B;AACH;AACJ,GALD,EAKG,CAACA,KAAD,CALH;;AAOA,QAAMiB,gBAAgB,GAAIC,QAAD,IAAsB;AAC3C,QAAIf,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAACe,QAAD,CAAR;AACH;AACJ,GAJD;;AAMA,sBACI,6BAAC,iBAAD;AAAM,IAAA,QAAQ,EAAGC,KAAD,IAAWZ,cAAc,CAACY,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyBX,KAA1B;AAAzC,kBACI,6BAAC,gCAAD;AACI,IAAA,QAAQ,EAAEpB,QADd;AAEI,IAAA,gBAAgB,EAAEE,gBAFtB;AAGI,IAAA,IAAI,EAAEG,IAHV;AAII,IAAA,UAAU,EAAE,IAJhB;AAKI,IAAA,oBAAoB,EAAEC,oBAL1B;AAMI,IAAA,kBAAkB,EAAEE,kBANxB;AAOI,IAAA,SAAS,EAAEa,SAPf;AAQI,IAAA,IAAI,EAAEV,QARV;AASI,IAAA,iBAAiB,EAAE,CATvB;AAUI,IAAA,YAAY,EAAEgB,gBAVlB;AAWI,IAAA,GAAG,EAAEZ,WAXT;AAYI,IAAA,UAAU,EAAED,UAZhB;AAaI,IAAA,WAAW,EAAEE;AAbjB,IADJ,CADJ;AAmBH;;AAAA","sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Dimensions, View } from 'react-native';\nimport RNSnapCarousel from 'react-native-snap-carousel';\nimport type CarouselProps from './CarouselProps';\nimport {\n    defaultAutoplay,\n    defaultAutoplayInterval,\n    defaultInactiveSlideOpacity,\n    defaultInactiveSlideScale,\n    defaultInfinite,\n} from './utils';\n\nexport default function Carousel<ItemT>(props: CarouselProps<ItemT>) {\n    const {\n        autoplay = defaultAutoplay,\n        autoplayInterval = defaultAutoplayInterval,\n        centerSlidePadding,\n        data,\n        inactiveSlideOpacity = defaultInactiveSlideOpacity,\n        inactiveSlideScale = defaultInactiveSlideScale,\n        index,\n        infinite = defaultInfinite,\n        onChange,\n        renderItem,\n    } = props;\n\n    const carouselRef = useRef<RNSnapCarousel<ItemT> | null>(null);\n\n    const [sliderWidth, setSliderWidth] = useState(() => Dimensions.get('window').width);\n\n    const itemWidth = centerSlidePadding !== undefined\n        ? sliderWidth - (centerSlidePadding * 2)\n        : sliderWidth;\n\n    useEffect(() => {\n        const carousel = carouselRef.current;\n        if (carousel && index !== carousel.currentIndex) {\n            carousel.snapToItem(index, true);\n        }\n    }, [index]);\n\n    const handleSnapToItem = (newIndex: number) => {\n        if (onChange) {\n            onChange(newIndex);\n        }\n    };\n\n    return (\n        <View onLayout={(event) => setSliderWidth(event.nativeEvent.layout.width)}>\n            <RNSnapCarousel\n                autoplay={autoplay}\n                autoplayInterval={autoplayInterval}\n                data={data}\n                horizontal={true}\n                inactiveSlideOpacity={inactiveSlideOpacity}\n                inactiveSlideScale={inactiveSlideScale}\n                itemWidth={itemWidth}\n                loop={infinite}\n                loopClonesPerSide={2}\n                onSnapToItem={handleSnapToItem}\n                ref={carouselRef}\n                renderItem={renderItem}\n                sliderWidth={sliderWidth}\n            />\n        </View>\n    );\n};\n"]}