@fountain-ui/lab 2.0.0-beta.11 → 2.0.0-beta.12

package/build/module/ViewabilityTrackerView/Viewability.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=Viewability.js.map

package/build/module/ViewabilityTrackerView/Viewability.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["Viewability.ts"],"sourcesContent":["export default interface Viewability {\n    visible: boolean;\n}\n"],"mappings":""}

package/build/module/ViewabilityTrackerView/ViewabilityTrackerView.js

@@ -0,0 +1,28 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useRef } from 'react';
+import { View } from 'react-native';
+import useViewabilityTracker from './useViewabilityTracker';
+export default function ViewabilityTrackerView(props) {
+  const {
+    enabled = true,
+    measurementIntervalMillis = 1000,
+    onViewabilityChange,
+    visiblePercentThreshold = 50,
+    ...otherProps
+  } = props;
+  const viewRef = useRef(null);
+  useViewabilityTracker({
+    enabled,
+    measurementIntervalMillis,
+    onViewabilityChange,
+    viewRef,
+    visiblePercentThreshold
+  });
+  return /*#__PURE__*/React.createElement(View, _extends({}, otherProps, {
+    ref: viewRef,
+    collapsable: false
+  }));
+}
+;
+//# sourceMappingURL=ViewabilityTrackerView.js.map

package/build/module/ViewabilityTrackerView/ViewabilityTrackerView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","View","useViewabilityTracker","ViewabilityTrackerView","props","enabled","measurementIntervalMillis","onViewabilityChange","visiblePercentThreshold","otherProps","viewRef"],"sources":["ViewabilityTrackerView.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { View } from 'react-native';\nimport useViewabilityTracker from './useViewabilityTracker';\nimport type ViewabilityTrackerViewProps from './ViewabilityTrackerViewProps';\n\n\nexport default function ViewabilityTrackerView(props: ViewabilityTrackerViewProps) {\n    const {\n        enabled = true,\n        measurementIntervalMillis = 1000,\n        onViewabilityChange,\n        visiblePercentThreshold = 50,\n        ...otherProps\n    } = props;\n\n    const viewRef = useRef<View>(null);\n\n    useViewabilityTracker({\n        enabled,\n        measurementIntervalMillis,\n        onViewabilityChange,\n        viewRef,\n        visiblePercentThreshold,\n    });\n\n    return (\n        <View\n            {...otherProps}\n            ref={viewRef}\n            collapsable={false}\n        />\n    );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,MAAhB,QAA8B,OAA9B;AACA,SAASC,IAAT,QAAqB,cAArB;AACA,OAAOC,qBAAP,MAAkC,yBAAlC;AAIA,eAAe,SAASC,sBAAT,CAAgCC,KAAhC,EAAoE;EAC/E,MAAM;IACFC,OAAO,GAAG,IADR;IAEFC,yBAAyB,GAAG,IAF1B;IAGFC,mBAHE;IAIFC,uBAAuB,GAAG,EAJxB;IAKF,GAAGC;EALD,IAMFL,KANJ;EAQA,MAAMM,OAAO,GAAGV,MAAM,CAAO,IAAP,CAAtB;EAEAE,qBAAqB,CAAC;IAClBG,OADkB;IAElBC,yBAFkB;IAGlBC,mBAHkB;IAIlBG,OAJkB;IAKlBF;EALkB,CAAD,CAArB;EAQA,oBACI,oBAAC,IAAD,eACQC,UADR;IAEI,GAAG,EAAEC,OAFT;IAGI,WAAW,EAAE;EAHjB,GADJ;AAOH;AAAA"}

package/build/module/ViewabilityTrackerView/ViewabilityTrackerViewProps.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=ViewabilityTrackerViewProps.js.map

package/build/module/ViewabilityTrackerView/ViewabilityTrackerViewProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["ViewabilityTrackerViewProps.ts"],"sourcesContent":["import type { ViewProps } from 'react-native';\nimport type { OverridableComponentProps } from '@fountain-ui/core';\nimport type Viewability from './Viewability';\n\nexport default interface ViewabilityTrackerViewProps extends OverridableComponentProps<ViewProps, {\n    /**\n     * @default true\n     */\n    enabled?: boolean;\n\n    /**\n     * @default 1000\n     */\n    measurementIntervalMillis?: number;\n\n    /**\n     *\n     */\n    onViewabilityChange?: (viewability: Viewability) => void;\n\n    /**\n     * @default 50\n     */\n    visiblePercentThreshold?: number;\n}> {}\n"],"mappings":""}

package/build/module/ViewabilityTrackerView/index.js

@@ -0,0 +1,2 @@
+export { default } from './ViewabilityTrackerView';
+//# sourceMappingURL=index.js.map

package/build/module/ViewabilityTrackerView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default"],"sources":["index.ts"],"sourcesContent":["export { default } from './ViewabilityTrackerView';\nexport type { default as ViewabilityTrackerViewProps } from './ViewabilityTrackerViewProps';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,0BAAxB"}

package/build/module/ViewabilityTrackerView/measureViewability.js

@@ -0,0 +1,34 @@
+const computeRectSize = rect => (rect.bottom - rect.top) * (rect.right - rect.left);
+
+const normalizePagePosition = value => value != null && Number.isFinite(value) ? value : Number.MAX_SAFE_INTEGER;
+
+const normalizeViewSize = size => Number.isFinite(size) && size > 0 ? size : Number.MAX_SAFE_INTEGER;
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+
+export default function measureViewability(_ref) {
+  let {
+    view,
+    windowWidth,
+    windowHeight,
+    onViewabilityDetailMeasured
+  } = _ref;
+  view.measure((x, y, width, height, pageX, pageY) => {
+    const safePageX = normalizePagePosition(pageX);
+    const safePageY = normalizePagePosition(pageY);
+    const visibleRect = {
+      top: clamp(safePageY, 0, windowHeight),
+      bottom: clamp(safePageY + height, 0, windowHeight),
+      left: clamp(safePageX, 0, windowWidth),
+      right: clamp(safePageX + width, 0, windowWidth)
+    };
+    const visibleRectSize = computeRectSize(visibleRect);
+    const viewSize = normalizeViewSize(width * height);
+    const visiblePercent = Math.round(visibleRectSize / viewSize * 100);
+    onViewabilityDetailMeasured === null || onViewabilityDetailMeasured === void 0 ? void 0 : onViewabilityDetailMeasured({
+      visiblePercent
+    });
+  });
+}
+;
+//# sourceMappingURL=measureViewability.js.map

package/build/module/ViewabilityTrackerView/measureViewability.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["computeRectSize","rect","bottom","top","right","left","normalizePagePosition","value","Number","isFinite","MAX_SAFE_INTEGER","normalizeViewSize","size","clamp","min","max","Math","measureViewability","view","windowWidth","windowHeight","onViewabilityDetailMeasured","measure","x","y","width","height","pageX","pageY","safePageX","safePageY","visibleRect","visibleRectSize","viewSize","visiblePercent","round"],"sources":["measureViewability.ts"],"sourcesContent":["import type { View } from 'react-native';\n\ninterface Rect {\n    top: number,\n    bottom: number;\n    left: number;\n    right: number;\n}\n\nexport interface ViewabilityDetail {\n    visiblePercent: number;\n}\n\nexport interface MeasureViewabilityParameters {\n    view: View;\n    windowWidth: number;\n    windowHeight: number;\n    onViewabilityDetailMeasured: (detail: ViewabilityDetail) => void;\n}\n\nconst computeRectSize = (rect: Rect): number =>\n    (rect.bottom - rect.top) * (rect.right - rect.left);\n\nconst normalizePagePosition = (value?: number): number =>\n    (value != null && Number.isFinite(value)) ? value : Number.MAX_SAFE_INTEGER;\n\nconst normalizeViewSize = (size: number): number =>\n    Number.isFinite(size) && size > 0 ? size : Number.MAX_SAFE_INTEGER;\n\nconst clamp = (value: number, min: number, max: number): number =>\n    Math.min(Math.max(value, min), max);\n\nexport default function measureViewability({\n    view,\n    windowWidth,\n    windowHeight,\n    onViewabilityDetailMeasured,\n}: MeasureViewabilityParameters) {\n    view.measure((x, y, width, height, pageX?: number, pageY?: number) => {\n        const safePageX = normalizePagePosition(pageX);\n        const safePageY = normalizePagePosition(pageY);\n\n        const visibleRect: Rect = {\n            top: clamp(safePageY, 0, windowHeight),\n            bottom: clamp(safePageY + height, 0, windowHeight),\n            left: clamp(safePageX, 0, windowWidth),\n            right: clamp(safePageX + width, 0, windowWidth),\n        };\n\n        const visibleRectSize = computeRectSize(visibleRect);\n        const viewSize = normalizeViewSize(width * height);\n        const visiblePercent = Math.round(visibleRectSize / viewSize * 100);\n\n        onViewabilityDetailMeasured?.({ visiblePercent });\n    });\n};\n"],"mappings":"AAoBA,MAAMA,eAAe,GAAIC,IAAD,IACpB,CAACA,IAAI,CAACC,MAAL,GAAcD,IAAI,CAACE,GAApB,KAA4BF,IAAI,CAACG,KAAL,GAAaH,IAAI,CAACI,IAA9C,CADJ;;AAGA,MAAMC,qBAAqB,GAAIC,KAAD,IACzBA,KAAK,IAAI,IAAT,IAAiBC,MAAM,CAACC,QAAP,CAAgBF,KAAhB,CAAlB,GAA4CA,KAA5C,GAAoDC,MAAM,CAACE,gBAD/D;;AAGA,MAAMC,iBAAiB,GAAIC,IAAD,IACtBJ,MAAM,CAACC,QAAP,CAAgBG,IAAhB,KAAyBA,IAAI,GAAG,CAAhC,GAAoCA,IAApC,GAA2CJ,MAAM,CAACE,gBADtD;;AAGA,MAAMG,KAAK,GAAG,CAACN,KAAD,EAAgBO,GAAhB,EAA6BC,GAA7B,KACVC,IAAI,CAACF,GAAL,CAASE,IAAI,CAACD,GAAL,CAASR,KAAT,EAAgBO,GAAhB,CAAT,EAA+BC,GAA/B,CADJ;;AAGA,eAAe,SAASE,kBAAT,OAKkB;EAAA,IALU;IACvCC,IADuC;IAEvCC,WAFuC;IAGvCC,YAHuC;IAIvCC;EAJuC,CAKV;EAC7BH,IAAI,CAACI,OAAL,CAAa,CAACC,CAAD,EAAIC,CAAJ,EAAOC,KAAP,EAAcC,MAAd,EAAsBC,KAAtB,EAAsCC,KAAtC,KAAyD;IAClE,MAAMC,SAAS,GAAGvB,qBAAqB,CAACqB,KAAD,CAAvC;IACA,MAAMG,SAAS,GAAGxB,qBAAqB,CAACsB,KAAD,CAAvC;IAEA,MAAMG,WAAiB,GAAG;MACtB5B,GAAG,EAAEU,KAAK,CAACiB,SAAD,EAAY,CAAZ,EAAeV,YAAf,CADY;MAEtBlB,MAAM,EAAEW,KAAK,CAACiB,SAAS,GAAGJ,MAAb,EAAqB,CAArB,EAAwBN,YAAxB,CAFS;MAGtBf,IAAI,EAAEQ,KAAK,CAACgB,SAAD,EAAY,CAAZ,EAAeV,WAAf,CAHW;MAItBf,KAAK,EAAES,KAAK,CAACgB,SAAS,GAAGJ,KAAb,EAAoB,CAApB,EAAuBN,WAAvB;IAJU,CAA1B;IAOA,MAAMa,eAAe,GAAGhC,eAAe,CAAC+B,WAAD,CAAvC;IACA,MAAME,QAAQ,GAAGtB,iBAAiB,CAACc,KAAK,GAAGC,MAAT,CAAlC;IACA,MAAMQ,cAAc,GAAGlB,IAAI,CAACmB,KAAL,CAAWH,eAAe,GAAGC,QAAlB,GAA6B,GAAxC,CAAvB;IAEAZ,2BAA2B,SAA3B,IAAAA,2BAA2B,WAA3B,YAAAA,2BAA2B,CAAG;MAAEa;IAAF,CAAH,CAA3B;EACH,CAhBD;AAiBH;AAAA"}

package/build/module/ViewabilityTrackerView/useViewabilityTracker.js

@@ -0,0 +1,73 @@
+import { useEffect, useRef } from 'react';
+import { useValidWindowDimensions } from '@fountain-ui/core';
+import { useDeferredExecutor } from '../hooks';
+import measureViewability from './measureViewability';
+const initialViewability = {
+  visible: false
+};
+export default function useViewabilityTracker(config) {
+  const {
+    enabled,
+    measurementIntervalMillis,
+    onViewabilityChange,
+    viewRef,
+    visiblePercentThreshold
+  } = config;
+  const viewabilityRef = useRef(initialViewability);
+  const executor = useDeferredExecutor();
+  const window = useValidWindowDimensions();
+
+  const maybeMeasureRecursive = () => {
+    if (!enabled) {
+      return;
+    }
+
+    const mapViewabilityDetailToViewability = detail => {
+      return {
+        visible: detail.visiblePercent >= visiblePercentThreshold
+      };
+    };
+
+    const isViewabilityEquals = (a, b) => {
+      return a.visible === b.visible;
+    };
+
+    const dispatchViewabilityChanged = viewability => {
+      executor.execute(() => onViewabilityChange === null || onViewabilityChange === void 0 ? void 0 : onViewabilityChange(viewability));
+    };
+
+    const onViewabilityDetailMeasured = detail => {
+      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]);
+}
+;
+//# sourceMappingURL=useViewabilityTracker.js.map

package/build/module/ViewabilityTrackerView/useViewabilityTracker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","useValidWindowDimensions","useDeferredExecutor","measureViewability","initialViewability","visible","useViewabilityTracker","config","enabled","measurementIntervalMillis","onViewabilityChange","viewRef","visiblePercentThreshold","viewabilityRef","executor","window","maybeMeasureRecursive","mapViewabilityDetailToViewability","detail","visiblePercent","isViewabilityEquals","a","b","dispatchViewabilityChanged","viewability","execute","onViewabilityDetailMeasured","nextViewability","current","maybeMeasure","view","windowWidth","width","windowHeight","height","cancel"],"sources":["useViewabilityTracker.ts"],"sourcesContent":["import type { RefObject } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { View } from 'react-native';\nimport { useValidWindowDimensions } from '@fountain-ui/core';\nimport { useDeferredExecutor } from '../hooks';\nimport type { ViewabilityDetail } from './measureViewability';\nimport measureViewability from './measureViewability';\nimport type Viewability from './Viewability';\n\nexport interface ViewabilityTrackerConfig {\n    enabled: boolean;\n    measurementIntervalMillis: number;\n    onViewabilityChange?: (viewability: Viewability) => void;\n    viewRef: RefObject<View>;\n    visiblePercentThreshold: number;\n}\n\nconst initialViewability: Readonly<Viewability> = { visible: false };\n\nexport default function useViewabilityTracker(config: ViewabilityTrackerConfig) {\n    const {\n        enabled,\n        measurementIntervalMillis,\n        onViewabilityChange,\n        viewRef,\n        visiblePercentThreshold,\n    } = config;\n\n    const viewabilityRef = useRef<Viewability>(initialViewability);\n\n    const executor = useDeferredExecutor();\n\n    const window = useValidWindowDimensions();\n\n    const maybeMeasureRecursive = () => {\n        if (!enabled) {\n            return;\n        }\n\n        const mapViewabilityDetailToViewability = (detail: ViewabilityDetail): Viewability => {\n            return { visible: detail.visiblePercent >= visiblePercentThreshold };\n        };\n\n        const isViewabilityEquals = (a: Viewability, b: Viewability): boolean => {\n            return a.visible === b.visible;\n        };\n\n        const dispatchViewabilityChanged = (viewability: Viewability) => {\n            executor.execute(() => onViewabilityChange?.(viewability));\n        };\n\n        const onViewabilityDetailMeasured = (detail: ViewabilityDetail) => {\n            const nextViewability = mapViewabilityDetailToViewability(detail);\n\n            if (!isViewabilityEquals(viewabilityRef.current, nextViewability)) {\n                viewabilityRef.current = nextViewability;\n\n                dispatchViewabilityChanged(nextViewability);\n            }\n\n            maybeMeasureRecursive();\n        };\n\n        const maybeMeasure = () => {\n            if (viewRef.current) {\n                measureViewability({\n                    view: viewRef.current,\n                    windowWidth: window.width,\n                    windowHeight: window.height,\n                    onViewabilityDetailMeasured,\n                });\n            }\n        };\n\n        executor.execute(maybeMeasure, measurementIntervalMillis);\n    };\n\n    useEffect(() => {\n        if (enabled) {\n            maybeMeasureRecursive();\n        } else {\n            executor.cancel();\n        }\n    }, [enabled]);\n};\n"],"mappings":"AACA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,OAAlC;AAEA,SAASC,wBAAT,QAAyC,mBAAzC;AACA,SAASC,mBAAT,QAAoC,UAApC;AAEA,OAAOC,kBAAP,MAA+B,sBAA/B;AAWA,MAAMC,kBAAyC,GAAG;EAAEC,OAAO,EAAE;AAAX,CAAlD;AAEA,eAAe,SAASC,qBAAT,CAA+BC,MAA/B,EAAiE;EAC5E,MAAM;IACFC,OADE;IAEFC,yBAFE;IAGFC,mBAHE;IAIFC,OAJE;IAKFC;EALE,IAMFL,MANJ;EAQA,MAAMM,cAAc,GAAGb,MAAM,CAAcI,kBAAd,CAA7B;EAEA,MAAMU,QAAQ,GAAGZ,mBAAmB,EAApC;EAEA,MAAMa,MAAM,GAAGd,wBAAwB,EAAvC;;EAEA,MAAMe,qBAAqB,GAAG,MAAM;IAChC,IAAI,CAACR,OAAL,EAAc;MACV;IACH;;IAED,MAAMS,iCAAiC,GAAIC,MAAD,IAA4C;MAClF,OAAO;QAAEb,OAAO,EAAEa,MAAM,CAACC,cAAP,IAAyBP;MAApC,CAAP;IACH,CAFD;;IAIA,MAAMQ,mBAAmB,GAAG,CAACC,CAAD,EAAiBC,CAAjB,KAA6C;MACrE,OAAOD,CAAC,CAAChB,OAAF,KAAciB,CAAC,CAACjB,OAAvB;IACH,CAFD;;IAIA,MAAMkB,0BAA0B,GAAIC,WAAD,IAA8B;MAC7DV,QAAQ,CAACW,OAAT,CAAiB,MAAMf,mBAAN,aAAMA,mBAAN,uBAAMA,mBAAmB,CAAGc,WAAH,CAA1C;IACH,CAFD;;IAIA,MAAME,2BAA2B,GAAIR,MAAD,IAA+B;MAC/D,MAAMS,eAAe,GAAGV,iCAAiC,CAACC,MAAD,CAAzD;;MAEA,IAAI,CAACE,mBAAmB,CAACP,cAAc,CAACe,OAAhB,EAAyBD,eAAzB,CAAxB,EAAmE;QAC/Dd,cAAc,CAACe,OAAf,GAAyBD,eAAzB;QAEAJ,0BAA0B,CAACI,eAAD,CAA1B;MACH;;MAEDX,qBAAqB;IACxB,CAVD;;IAYA,MAAMa,YAAY,GAAG,MAAM;MACvB,IAAIlB,OAAO,CAACiB,OAAZ,EAAqB;QACjBzB,kBAAkB,CAAC;UACf2B,IAAI,EAAEnB,OAAO,CAACiB,OADC;UAEfG,WAAW,EAAEhB,MAAM,CAACiB,KAFL;UAGfC,YAAY,EAAElB,MAAM,CAACmB,MAHN;UAIfR;QAJe,CAAD,CAAlB;MAMH;IACJ,CATD;;IAWAZ,QAAQ,CAACW,OAAT,CAAiBI,YAAjB,EAA+BpB,yBAA/B;EACH,CAzCD;;EA2CAV,SAAS,CAAC,MAAM;IACZ,IAAIS,OAAJ,EAAa;MACTQ,qBAAqB;IACxB,CAFD,MAEO;MACHF,QAAQ,CAACqB,MAAT;IACH;EACJ,CANQ,EAMN,CAAC3B,OAAD,CANM,CAAT;AAOH;AAAA"}

package/build/module/hooks/index.js

@@ -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';
 //# sourceMappingURL=index.js.map

package/build/module/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","useUnstableCollapsibleAppBar","useUnstableToggleDisplayStyle"],"sources":["index.ts"],"sourcesContent":["export { default as useUnstableCollapsibleAppBar } from './useUnstableCollapsibleAppBar';\nexport { default as useUnstableToggleDisplayStyle } from './useUnstableToggleDisplayStyle';\n\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,4BAApB,QAAwD,gCAAxD;AACA,SAASD,OAAO,IAAIE,6BAApB,QAAyD,iCAAzD"}
+{"version":3,"names":["default","useDeferredExecutor","useIsMounted","useUnstableCollapsibleAppBar","useUnstableToggleDisplayStyle"],"sources":["index.ts"],"sourcesContent":["export { default as useDeferredExecutor } from './useDeferredExecutor';\nexport { default as useIsMounted } from './useIsMounted';\nexport { default as useUnstableCollapsibleAppBar } from './useUnstableCollapsibleAppBar';\nexport { default as useUnstableToggleDisplayStyle } from './useUnstableToggleDisplayStyle';\n\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,mBAApB,QAA+C,uBAA/C;AACA,SAASD,OAAO,IAAIE,YAApB,QAAwC,gBAAxC;AACA,SAASF,OAAO,IAAIG,4BAApB,QAAwD,gCAAxD;AACA,SAASH,OAAO,IAAII,6BAApB,QAAyD,iCAAzD"}

package/build/module/hooks/useDeferredExecutor.js

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useRef } from 'react';
+import useIsMounted from './useIsMounted';
+export default function useDeferredExecutor() {
+  const isMounted = useIsMounted();
+  const timeoutIdRef = useRef(null);
+  const cancel = useCallback(() => {
+    if (timeoutIdRef.current) {
+      clearTimeout(timeoutIdRef.current);
+    }
+  }, []);
+  useEffect(() => {
+    return cancel;
+  }, []);
+  const execute = useCallback((runnable, delay) => {
+    if (!isMounted()) {
+      return;
+    }
+
+    cancel();
+
+    if (Number.isFinite(delay)) {
+      timeoutIdRef.current = setTimeout(() => runnable(), delay);
+    } else {
+      runnable();
+    }
+  }, []);
+  return {
+    cancel,
+    execute
+  };
+}
+;
+//# sourceMappingURL=useDeferredExecutor.js.map

package/build/module/hooks/useDeferredExecutor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useRef","useIsMounted","useDeferredExecutor","isMounted","timeoutIdRef","cancel","current","clearTimeout","execute","runnable","delay","Number","isFinite","setTimeout"],"sources":["useDeferredExecutor.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport useIsMounted from './useIsMounted';\n\nexport interface Runnable {\n    (): void;\n}\n\nexport interface DeferredExecute {\n    (runnable: Runnable, delay?: number): void;\n}\n\nexport interface DeferredExecutor {\n    cancel: () => void;\n    execute: DeferredExecute;\n}\n\nexport default function useDeferredExecutor(): DeferredExecutor {\n    const isMounted = useIsMounted();\n    const timeoutIdRef = useRef<NodeJS.Timer | null>(null);\n\n    const cancel = useCallback(() => {\n        if (timeoutIdRef.current) {\n            clearTimeout(timeoutIdRef.current);\n        }\n    }, []);\n\n    useEffect(() => {\n        return cancel;\n    }, []);\n\n    const execute = useCallback<DeferredExecute>((runnable, delay) => {\n        if (!isMounted()) {\n            return;\n        }\n\n        cancel();\n\n        if (Number.isFinite(delay)) {\n            timeoutIdRef.current = setTimeout(() => runnable(), delay);\n        } else {\n            runnable();\n        }\n    }, []);\n\n    return { cancel, execute };\n};\n"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,SAAtB,EAAiCC,MAAjC,QAA+C,OAA/C;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AAeA,eAAe,SAASC,mBAAT,GAAiD;EAC5D,MAAMC,SAAS,GAAGF,YAAY,EAA9B;EACA,MAAMG,YAAY,GAAGJ,MAAM,CAAsB,IAAtB,CAA3B;EAEA,MAAMK,MAAM,GAAGP,WAAW,CAAC,MAAM;IAC7B,IAAIM,YAAY,CAACE,OAAjB,EAA0B;MACtBC,YAAY,CAACH,YAAY,CAACE,OAAd,CAAZ;IACH;EACJ,CAJyB,EAIvB,EAJuB,CAA1B;EAMAP,SAAS,CAAC,MAAM;IACZ,OAAOM,MAAP;EACH,CAFQ,EAEN,EAFM,CAAT;EAIA,MAAMG,OAAO,GAAGV,WAAW,CAAkB,CAACW,QAAD,EAAWC,KAAX,KAAqB;IAC9D,IAAI,CAACP,SAAS,EAAd,EAAkB;MACd;IACH;;IAEDE,MAAM;;IAEN,IAAIM,MAAM,CAACC,QAAP,CAAgBF,KAAhB,CAAJ,EAA4B;MACxBN,YAAY,CAACE,OAAb,GAAuBO,UAAU,CAAC,MAAMJ,QAAQ,EAAf,EAAmBC,KAAnB,CAAjC;IACH,CAFD,MAEO;MACHD,QAAQ;IACX;EACJ,CAZ0B,EAYxB,EAZwB,CAA3B;EAcA,OAAO;IAAEJ,MAAF;IAAUG;EAAV,CAAP;AACH;AAAA"}

package/build/module/hooks/useIsMounted.js

@@ -0,0 +1,13 @@
+import { useCallback, useEffect, useRef } from 'react';
+export default function useIsMounted() {
+  const mountedRef = useRef(false);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  return useCallback(() => mountedRef.current, []);
+}
+;
+//# sourceMappingURL=useIsMounted.js.map

package/build/module/hooks/useIsMounted.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useRef","useIsMounted","mountedRef","current"],"sources":["useIsMounted.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nexport interface UseIsMounted {\n    (): boolean;\n}\n\nexport default function useIsMounted(): UseIsMounted {\n    const mountedRef = useRef<boolean>(false);\n\n    useEffect(() => {\n        mountedRef.current = true;\n\n        return () => {\n            mountedRef.current = false;\n        };\n    }, []);\n\n    return useCallback(() => mountedRef.current, []);\n};\n"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,SAAtB,EAAiCC,MAAjC,QAA+C,OAA/C;AAMA,eAAe,SAASC,YAAT,GAAsC;EACjD,MAAMC,UAAU,GAAGF,MAAM,CAAU,KAAV,CAAzB;EAEAD,SAAS,CAAC,MAAM;IACZG,UAAU,CAACC,OAAX,GAAqB,IAArB;IAEA,OAAO,MAAM;MACTD,UAAU,CAACC,OAAX,GAAqB,KAArB;IACH,CAFD;EAGH,CANQ,EAMN,EANM,CAAT;EAQA,OAAOL,WAAW,CAAC,MAAMI,UAAU,CAACC,OAAlB,EAA2B,EAA3B,CAAlB;AACH;AAAA"}

package/build/module/index.js

@@ -12,5 +12,7 @@ export { default as ComicViewer } from './ComicViewer';
 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';
 //# sourceMappingURL=index.js.map

package/build/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","BottomSheet","Carousel","DateTimePicker","FlipCard","ViewPager","ComicViewer","StatusBarProvider","useStatusBarContext"],"sources":["index.ts"],"sourcesContent":["export { default as BottomSheet } from './BottomSheet';\nexport * from './BottomSheet';\n\nexport { default as Carousel } from './Carousel';\nexport * from './Carousel';\n\nexport { default as DateTimePicker } from './DateTimePicker';\nexport * from './DateTimePicker';\n\nexport { default as FlipCard } from './FlipCard';\nexport * from './FlipCard';\n\nexport { default as ViewPager } from './ViewPager';\nexport * from './ViewPager';\n\nexport { default as ComicViewer } from './ComicViewer';\nexport * from './ComicViewer';\n\nexport { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';\nexport * from './StatusBarProvider';\n\nexport * from './hooks';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASD,OAAO,IAAIE,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASF,OAAO,IAAIG,cAApB,QAA0C,kBAA1C;AACA,cAAc,kBAAd;AAEA,SAASH,OAAO,IAAII,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASJ,OAAO,IAAIK,SAApB,QAAqC,aAArC;AACA,cAAc,aAAd;AAEA,SAASL,OAAO,IAAIM,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASN,OAAO,IAAIO,iBAApB,EAAuCC,mBAAvC,QAAkE,qBAAlE;AACA,cAAc,qBAAd;AAEA,cAAc,SAAd"}
+{"version":3,"names":["default","BottomSheet","Carousel","DateTimePicker","FlipCard","ViewPager","ComicViewer","StatusBarProvider","useStatusBarContext","ViewabilityTrackerView"],"sources":["index.ts"],"sourcesContent":["export { default as BottomSheet } from './BottomSheet';\nexport * from './BottomSheet';\n\nexport { default as Carousel } from './Carousel';\nexport * from './Carousel';\n\nexport { default as DateTimePicker } from './DateTimePicker';\nexport * from './DateTimePicker';\n\nexport { default as FlipCard } from './FlipCard';\nexport * from './FlipCard';\n\nexport { default as ViewPager } from './ViewPager';\nexport * from './ViewPager';\n\nexport { default as ComicViewer } from './ComicViewer';\nexport * from './ComicViewer';\n\nexport { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';\nexport * from './StatusBarProvider';\n\nexport { default as ViewabilityTrackerView } from './ViewabilityTrackerView';\nexport * from './ViewabilityTrackerView';\n\nexport * from './hooks';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASD,OAAO,IAAIE,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASF,OAAO,IAAIG,cAApB,QAA0C,kBAA1C;AACA,cAAc,kBAAd;AAEA,SAASH,OAAO,IAAII,QAApB,QAAoC,YAApC;AACA,cAAc,YAAd;AAEA,SAASJ,OAAO,IAAIK,SAApB,QAAqC,aAArC;AACA,cAAc,aAAd;AAEA,SAASL,OAAO,IAAIM,WAApB,QAAuC,eAAvC;AACA,cAAc,eAAd;AAEA,SAASN,OAAO,IAAIO,iBAApB,EAAuCC,mBAAvC,QAAkE,qBAAlE;AACA,cAAc,qBAAd;AAEA,SAASR,OAAO,IAAIS,sBAApB,QAAkD,0BAAlD;AACA,cAAc,0BAAd;AAEA,cAAc,SAAd"}

package/build/typescript/Carousel/Carousel.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type CarouselProps from './CarouselProps';
+import type { CarouselInstance } from './types';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<CarouselProps<any>, "style" | "data" | "autoplay" | "autoplayInterval" | "createItemStyle" | "createScrollAnimation" | "disableSmartAutoplay" | "initialIndex" | "itemHeight" | "itemWidth" | "loop" | "onIndexChange" | "renderItem" | "scrollEnabled" | "windowSize"> & React.RefAttributes<CarouselInstance>>>;
+export default _default;

package/build/typescript/Carousel/CarouselProps.d.ts

@@ -1,7 +1,8 @@
-import React, { RefObject } from 'react';
-import type { ListRenderItemInfo } from 'react-native';
+import type { RefObject } from 'react';
 import type { ComponentProps } from '@fountain-ui/core';
+import type { CarouselInstance, CreateItemStyle, CreateScrollAnimation, RenderItem } from './types';
 export default interface CarouselProps<ItemT = any> extends ComponentProps<{
+    ref?: RefObject<CarouselInstance>;
     /**
      * If `true`, enable autoplay.
      * @default false
@@ -13,78 +14,61 @@ export default interface CarouselProps<ItemT = any> extends ComponentProps<{
      */
     autoplayInterval?: number;
     /**
-     * Padding for center slide. If specified, `slidesToScroll` and `slidesToShow` set to 1.
+     * The item style creator function.
+     * @default createDefaultItemStyle
      */
-    centerSlidePadding?: number;
+    createItemStyle?: CreateItemStyle;
     /**
-     * Delay in ms until navigating to the next item.
+     * The scroll animation creator function.
+     * @default createDefaultScrollAnimation
+     */
+    createScrollAnimation?: CreateScrollAnimation;
+    /**
+     * Data for render items.
      */
     data: ReadonlyArray<ItemT>;
     /**
-     * Value of the opacity effect applied to inactive slides.
-     * @default 0.7
+     * If `true`, carousel will detect its own viewability and control autoplay automatically.
+     * @default false
      */
-    inactiveSlideOpacity?: number;
+    disableSmartAutoplay?: boolean;
     /**
-     * Value of the 'scale' transform applied to inactive slides.
-     * @default 0.9
+     * Index of initial item that should be selected.
+     * @default 0
      */
-    inactiveSlideScale?: number;
+    initialIndex?: number;
     /**
-     * Web only. Value of the 'scale' transform applied to a active slide.
-     * @default 0.990
+     * The item width.
      */
-    activeSlideScale?: number;
+    itemHeight: number;
     /**
-     * A number representing the index of the active slide.
+     * The item width.
      */
-    index: number;
+    itemWidth: number;
     /**
      * Enable infinite loop mode.
      * @default false
      */
-    infinite?: boolean;
+    loop?: boolean;
     /**
      * Callback fired when an index is changed.
      */
-    onChange?: (newIndex: number) => void;
+    onIndexChange?: (newIndex: number) => void;
     /**
      * Takes an item from data and renders it into the list.
      */
-    renderItem: (info: Omit<ListRenderItemInfo<ItemT>, 'separators'>) => React.ReactElement | null;
-    /**
-     * Web only. Number of slides to scroll at once.
-     * @default 1
-     */
-    slidesToScroll?: number;
-    /**
-     * Web only. Number of slides to display.
-     * @default 1
-     */
-    slidesToShow?: number;
+    renderItem: RenderItem<ItemT>;
     /**
-     * Web only. Enable items to display at the center.
+     * Whether to enable scroll gesture.
      * @default true
      */
-    centerMode?: boolean;
-    /**
-     * Web only. Enable arrows to display.
-     * @default true
-     */
-    arrows?: boolean;
-    /**
-     * Web only. Style of arrows
-     * @default true
-     */
-    arrowsStyle?: object;
-    /**
-     * Web only. Style of track
-     * @default object
-     */
-    trackStyle?: object;
+    scrollEnabled?: boolean;
     /**
-     * Only web. Refer slick object
+     * The maximum number of items that can respond to pan gesture events.
+     * Due to the nature of the `active` item, it accepts only odd number. (e.g. 1, 3, 5...)
+     * 0 means all items will respond to pan gesture events.
+     * @default 5
      */
-    ref?: RefObject<any>;
+    windowSize?: number;
 }> {
 }

package/build/typescript/Carousel/animation/animationUtils.d.ts

@@ -0,0 +1 @@
+export declare const itemInterpolationInputRange: number[];

package/build/typescript/Carousel/animation/createDefaultItemStyle.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("../types").CreateItemStyle;
+export default _default;

package/build/typescript/Carousel/animation/createDefaultScrollAnimation.d.ts

@@ -0,0 +1,2 @@
+import { Animated } from 'react-native';
+export default function createDefaultScrollAnimation(animatedValue: Animated.Value, toValue: number): Animated.CompositeAnimation;

package/build/typescript/Carousel/animation/index.d.ts

@@ -0,0 +1,4 @@
+export { default as createDefaultItemStyle } from './createDefaultItemStyle';
+export { default as createDefaultScrollAnimation } from './createDefaultScrollAnimation';
+export { default as normalItemStyleFactory } from './normalItemStyleFactory';
+export { default as parallaxItemStyleFactory } from './parallaxItemStyleFactory';

package/build/typescript/Carousel/animation/normalItemStyleFactory.d.ts

@@ -0,0 +1,2 @@
+import type { CreateItemStyle } from '../types';
+export default function normalItemStyleFactory(): CreateItemStyle;

package/build/typescript/Carousel/animation/parallaxItemStyleFactory.d.ts

@@ -0,0 +1,9 @@
+import type { CreateItemStyle } from '../types';
+export interface ParallaxAnimationConfig {
+    parallaxActiveItemScale?: number;
+    parallaxActiveItemOpacity?: number;
+    parallaxAdjacentItemScale?: number;
+    parallaxAdjacentItemOpacity?: number;
+    parallaxScrollingOffset?: number;
+}
+export default function parallaxItemStyleFactory(config?: ParallaxAnimationConfig): CreateItemStyle;

package/build/typescript/Carousel/components/InternalContext.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Animated } from 'react-native';
+import type { CreateItemStyle, ItemVisibilityStore } from '../types';
+export interface InternalContextValue<ItemT> {
+    createItemStyle: CreateItemStyle;
+    data: ReadonlyArray<ItemT>;
+    globalInterpolation: Animated.AnimatedInterpolation;
+    itemHeight: number;
+    itemWidth: number;
+    itemVisibilityStore: ItemVisibilityStore;
+    loop: boolean;
+}
+declare const InternalContext: import("react").Context<InternalContextValue<any>>;
+export default InternalContext;

package/build/typescript/Carousel/components/ItemView.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from 'react';
+import { Animated } from 'react-native';
+export interface ItemViewProps {
+    children: (interpolation: Animated.AnimatedInterpolation) => ReactElement | null;
+    index: number;
+}
+export default function ItemView(props: ItemViewProps): JSX.Element;

package/build/typescript/Carousel/components/RootView.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ViewProps, View } from 'react-native';
+import type { RenderItem } from '../types';
+export declare type RootViewProps<ItemT> = ViewProps & {
+    data: ReadonlyArray<ItemT>;
+    itemHeight: number;
+    originalData: ReadonlyArray<ItemT>;
+    renderItem: RenderItem<ItemT>;
+};
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ViewProps & {
+    data: readonly any[];
+    itemHeight: number;
+    originalData: readonly any[];
+    renderItem: RenderItem<any>;
+} & React.RefAttributes<View>>>;
+export default _default;

package/build/typescript/Carousel/components/ScrollViewGesture.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import { Animated } from 'react-native';
+import type { AutoplayController, StartPagingAnimation } from '../types';
+export interface ScrollViewGestureProps {
+    autoplayController: AutoplayController;
+    children: ReactNode;
+    finalizeAnimation: () => void;
+    offsetTx: Animated.Value;
+    scrollEnabled: boolean;
+    startAnimation: StartPagingAnimation;
+}
+export default function ScrollViewGesture(props: ScrollViewGestureProps): JSX.Element;

package/build/typescript/Carousel/components/index.d.ts

@@ -0,0 +1,4 @@
+export { default as InternalContext } from './InternalContext';
+export { default as ItemView } from './ItemView';
+export { default as RootView } from './RootView';
+export { default as ScrollViewGesture } from './ScrollViewGesture';

package/build/typescript/Carousel/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export { default as useAutoplayController } from './useAutoplayController';
+export { default as useDimensionChangeReaction } from './useDimensionChangeReaction';
+export { default as useIndexController } from './useIndexController';
+export { default as useItemInterpolation } from './useItemInterpolation';
+export { default as useLoopedData } from './useLoopedData';
+export { default as usePagingAnimation } from './usePagingAnimation';
+export { default as useItemVisibilityStore } from './useItemVisibilityStore';

package/build/typescript/Carousel/hooks/useAutoplayController.d.ts

@@ -0,0 +1,7 @@
+import type { AutoplayController, StartPagingAnimation } from '../types';
+export interface AutoplayConfig {
+    enabled: boolean;
+    intervalMillis: number;
+    startPagingAnimation: StartPagingAnimation;
+}
+export default function useAutoplayController(config: AutoplayConfig): AutoplayController;

package/build/typescript/Carousel/hooks/useDimensionChangeReaction.d.ts

@@ -0,0 +1,7 @@
+import { Animated } from 'react-native';
+export interface Parameters {
+    controlledTx: Animated.AnimatedValue;
+    currentIndex: number;
+    itemWidth: number;
+}
+export default function useDimensionChangeReaction(params: Parameters): void;

package/build/typescript/Carousel/hooks/useIndexController.d.ts

@@ -0,0 +1,10 @@
+import { Animated } from 'react-native';
+import type { IndexController } from '../types';
+export interface UseIndexControllerParameters {
+    controlledTx: Animated.AnimatedValue;
+    initialIndex: number;
+    itemWidth: number;
+    numberOfOriginalData: number;
+    onIndexChange?: (newIndex: number) => void;
+}
+export default function useIndexController(params: UseIndexControllerParameters): IndexController;

package/build/typescript/Carousel/hooks/useItemInterpolation.d.ts

@@ -0,0 +1,2 @@
+import { Animated } from 'react-native';
+export default function useItemInterpolation(index: number): Animated.AnimatedInterpolation;

package/build/typescript/Carousel/hooks/useItemVisibilityStore.d.ts

@@ -0,0 +1,7 @@
+import type { ItemVisibilityStore } from '../types';
+export interface Parameters {
+    currentIndex: number;
+    numberOfData: number;
+    windowSize: number;
+}
+export default function useItemVisibilityStore(params: Parameters): ItemVisibilityStore;

package/build/typescript/Carousel/hooks/useLoopedData.d.ts

@@ -0,0 +1 @@
+export default function useLoopedData<ItemT>(originalData: ReadonlyArray<ItemT>, loop: boolean): ReadonlyArray<ItemT>;

package/build/typescript/Carousel/hooks/usePagingAnimation.d.ts

@@ -0,0 +1,18 @@
+import { Animated } from 'react-native';
+import type { CreateScrollAnimation, GetCurrentIndex, StartPagingAnimation } from '../types';
+export interface PagingAnimationConfig {
+    controlledTx: Animated.Value;
+    createScrollAnimation: CreateScrollAnimation;
+    getCurrentIndex: GetCurrentIndex;
+    itemWidth: number;
+    lastIndex: number;
+    loop: boolean;
+    numberOfData: number;
+    offsetTx: Animated.Value;
+}
+export interface UsePagingAnimation {
+    finalizeAnimation: () => void;
+    globalInterpolation: Animated.AnimatedInterpolation;
+    startAnimation: StartPagingAnimation;
+}
+export default function usePagingAnimation(config: PagingAnimationConfig): UsePagingAnimation;

package/build/typescript/Carousel/index.d.ts

@@ -1,2 +1,4 @@
-export { default } from './CarouselWeb';
+export { default } from './Carousel';
 export type { default as CarouselProps } from './CarouselProps';
+export type { CarouselInstance } from './types';
+export { normalItemStyleFactory, parallaxItemStyleFactory } from './animation';