@fountain-ui/lab 2.0.0-beta.7 → 2.0.0-beta.71

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 { useWorkletCallback } 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 = 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,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import {
@@ -50,7 +50,6 @@ const ANIMATION_DURATION_MILLIS = 100;
 
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 
-
 function useLargerValueOfLastTwoValues(value: number) {
     const refLatestTwoValues = useRef([0, 0]);
 
@@ -60,7 +59,6 @@ function useLargerValueOfLastTwoValues(value: number) {
     return Math.max(...refLatestTwoValues.current);
 }
 
-
 export default function useUnstableCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
     const { shouldTranslateYReset }: Required<Options> = {
         ...defaultOptions,
@@ -75,7 +73,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
     const appBarMaxHeight = useLargerValueOfLastTwoValues(appBarHeight);
     const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
 
-    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight);
+    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
 
     const translateY = useSharedValue<number>(0);
     const lastTranslateY = useSharedValue<number>(0);
@@ -86,23 +84,40 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
 
     const elevationStyle = useElevationStyle(4);
     const animatedStyle = 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 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) {
@@ -136,7 +151,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
 
             vectorY.value = 0;
         }
-    };
+    }, [appBarHeight]);
 
     const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
@@ -207,7 +222,7 @@ export default function useUnstableCollapsibleAppBar(userOptions: Options = defa
                 duration: ANIMATION_DURATION_MILLIS,
             });
         },
-    });
+    }, [appBarHeight]);
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 

package/src/hooks/useUnstableToggleDisplayStyle.ts

@@ -17,9 +17,10 @@ export default function useAnimatedDisplayStyle(
                 display.value = 'flex';
             }
         },
+        [threshold],
     );
 
     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/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,"names":["Carousel","props","autoplay","defaultAutoplay","autoplayInterval","defaultAutoplayInterval","centerSlidePadding","data","inactiveSlideOpacity","defaultInactiveSlideOpacity","inactiveSlideScale","defaultInactiveSlideScale","index","infinite","defaultInfinite","onChange","renderItem","carouselRef","useRef","sliderWidth","setSliderWidth","useState","Dimensions","get","width","itemWidth","undefined","useEffect","carousel","current","currentIndex","snapToItem","handleSnapToItem","newIndex","event","nativeEvent","layout"],"sources":["CarouselNative.tsx"],"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"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;AAQe,SAASA,QAAT,CAAyBC,KAAzB,EAAsD;EACjE,MAAM;IACFC,QAAQ,GAAGC,sBADT;IAEFC,gBAAgB,GAAGC,8BAFjB;IAGFC,kBAHE;IAIFC,IAJE;IAKFC,oBAAoB,GAAGC,kCALrB;IAMFC,kBAAkB,GAAGC,gCANnB;IAOFC,KAPE;IAQFC,QAAQ,GAAGC,sBART;IASFC,QATE;IAUFC;EAVE,IAWFf,KAXJ;EAaA,MAAMgB,WAAW,GAAG,IAAAC,aAAA,EAAqC,IAArC,CAApB;EAEA,MAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC,IAAAC,eAAA,EAAS,MAAMC,uBAAA,CAAWC,GAAX,CAAe,QAAf,EAAyBC,KAAxC,CAAtC;EAEA,MAAMC,SAAS,GAAGnB,kBAAkB,KAAKoB,SAAvB,GACZP,WAAW,GAAIb,kBAAkB,GAAG,CADxB,GAEZa,WAFN;EAIA,IAAAQ,gBAAA,EAAU,MAAM;IACZ,MAAMC,QAAQ,GAAGX,WAAW,CAACY,OAA7B;;IACA,IAAID,QAAQ,IAAIhB,KAAK,KAAKgB,QAAQ,CAACE,YAAnC,EAAiD;MAC7CF,QAAQ,CAACG,UAAT,CAAoBnB,KAApB,EAA2B,IAA3B;IACH;EACJ,CALD,EAKG,CAACA,KAAD,CALH;;EAOA,MAAMoB,gBAAgB,GAAIC,QAAD,IAAsB;IAC3C,IAAIlB,QAAJ,EAAc;MACVA,QAAQ,CAACkB,QAAD,CAAR;IACH;EACJ,CAJD;;EAMA,oBACI,6BAAC,iBAAD;IAAM,QAAQ,EAAGC,KAAD,IAAWd,cAAc,CAACc,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyBZ,KAA1B;EAAzC,gBACI,6BAAC,gCAAD;IACI,QAAQ,EAAEtB,QADd;IAEI,gBAAgB,EAAEE,gBAFtB;IAGI,IAAI,EAAEG,IAHV;IAII,UAAU,EAAE,IAJhB;IAKI,oBAAoB,EAAEC,oBAL1B;IAMI,kBAAkB,EAAEE,kBANxB;IAOI,SAAS,EAAEe,SAPf;IAQI,IAAI,EAAEZ,QARV;IASI,iBAAiB,EAAE,CATvB;IAUI,YAAY,EAAEmB,gBAVlB;IAWI,GAAG,EAAEf,WAXT;IAYI,UAAU,EAAED,UAZhB;IAaI,WAAW,EAAEG;EAbjB,EADJ,CADJ;AAmBH;;AAAA"}

package/build/commonjs/Carousel/CarouselWeb.js

@@ -1,237 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactNative = require("react-native");
-
-var _reactSlick = _interopRequireDefault(require("react-slick"));
-
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-
-var _icons = require("@fountain-ui/icons");
-
-var _utils = require("@fountain-ui/utils");
-
-var _utils2 = require("./utils");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
-
-const baseSettings = {
-  dots: false,
-  draggable: true,
-  lazyLoad: typeof window === 'undefined' ? undefined : 'ondemand',
-  pauseOnFocus: true,
-  pauseOnHover: true,
-  rows: 1,
-  swipe: true,
-  slidesPerRow: 1,
-  vertical: false
-};
-
-const noop = () => void 0;
-
-const StyledContainer = _styled.default.div(props => ({
-  ['& .slick-slider']: {
-    display: 'block',
-    position: 'relative',
-    userSelect: 'none'
-  },
-  ['& .slick-list']: {
-    display: 'block',
-    position: 'relative',
-    overflow: 'hidden',
-    margin: 0,
-    padding: 0,
-    ['&:focus']: {
-      outline: 'none'
-    },
-    ['&.dragging']: {
-      cursor: 'pointer'
-    }
-  },
-  ['& .slick-slider .slick-track, &.slick-slider .slick-list']: {
-    transform: 'translate3d(0, 0, 0)'
-  },
-  ['& .slick-track']: {
-    display: 'block',
-    position: 'relative',
-    top: 0,
-    left: 0,
-    ['&:before, &:after']: {
-      display: 'table',
-      content: '\'\''
-    },
-    ['&:after']: {
-      clear: 'both'
-    },
-    ...props.trackStyle
-  },
-  ['& .slick-slide']: {
-    display: 'none',
-    float: 'left',
-    height: '100%',
-    minHeight: 1,
-    ['& > div']: {
-      justifyContent: 'center',
-      display: 'flex',
-      transform: `scale(${props.inactiveSlideScale})`,
-      transition: 'transform .5s',
-      opacity: props.inactiveSlideOpacity
-    }
-  },
-  ['& .slick-current > div']: {
-    transform: `scale(${props.activeSlideScale})`,
-    opacity: 1
-  },
-  ['& .slick-initialized .slick-slide']: {
-    display: 'block'
-  },
-  ...props.arrowsStyle
-}));
-
-const ArrowContainer = props => {
-  const {
-    children,
-    currentSlide,
-    slideCount,
-    visible,
-    ...otherProps
-  } = props;
-  return visible ?
-  /*#__PURE__*/
-  // If root component is not a div, there's no arrow class.
-  _react.default.createElement("div", _extends({}, otherProps, {
-    style: {
-      cursor: 'pointer'
-    }
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      height: '100%',
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: 'white',
-      borderRadius: 16
-    }
-  }, children)) : null;
-};
-
-var _default = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const {
-    activeSlideScale = _utils2.defaultActiveSlideScale,
-    autoplay = _utils2.defaultAutoplay,
-    autoplayInterval = _utils2.defaultAutoplayInterval,
-    centerMode = false,
-    centerSlidePadding = 0,
-    data,
-    inactiveSlideOpacity = _utils2.defaultInactiveSlideOpacity,
-    inactiveSlideScale = _utils2.defaultInactiveSlideScale,
-    index,
-    infinite = _utils2.defaultInfinite,
-    onChange,
-    renderItem,
-    slidesToScroll = 1,
-    slidesToShow = 1,
-    arrows = false,
-    arrowsStyle = {},
-    trackStyle = {}
-  } = props;
-
-  const slickRef = _react.default.useRef(null);
-
-  const [visibleArrow, setVisibleArrow] = _react.default.useState(false);
-
-  _react.default.useEffect(() => {
-    if (slickRef.current) {
-      slickRef.current.slickGoTo(index, false);
-    }
-  }, [index]);
-
-  const fixOnClickNotWorkingAfterMobileSwipe = () => {
-    // @ts-ignore
-    if (slickRef.current && slickRef.current.innerSlider) {
-      // @ts-ignore
-      slickRef.current.innerSlider.clickHandler = noop;
-    }
-  };
-
-  const handleAfterChange = newIndex => {
-    fixOnClickNotWorkingAfterMobileSwipe();
-
-    if (onChange) {
-      onChange(newIndex);
-    }
-  };
-
-  const handleBeforeChange = () => {
-    fixOnClickNotWorkingAfterMobileSwipe();
-  };
-
-  const onPointerOver = () => setVisibleArrow(true);
-
-  const onPointerLeave = () => setVisibleArrow(false);
-
-  _react.default.useEffect(() => {
-    if (ref) {
-      //@ts-ignore
-      ref.current = slickRef.current;
-    }
-  }, []);
-
-  return /*#__PURE__*/_react.default.createElement(StyledContainer, {
-    activeSlideScale: activeSlideScale,
-    inactiveSlideOpacity: inactiveSlideOpacity,
-    inactiveSlideScale: inactiveSlideScale,
-    arrowsStyle: arrowsStyle,
-    trackStyle: trackStyle,
-    onPointerOver: onPointerOver,
-    onPointerLeave: onPointerLeave
-  }, /*#__PURE__*/_react.default.createElement(_reactSlick.default, _extends({}, baseSettings, {
-    afterChange: handleAfterChange,
-    autoplay: autoplay,
-    autoplaySpeed: autoplayInterval,
-    beforeChange: handleBeforeChange,
-    centerMode: centerMode,
-    centerPadding: `${centerSlidePadding}px`,
-    infinite: infinite,
-    initialSlide: index,
-    ref: slickRef,
-    slidesToScroll: slidesToScroll,
-    slidesToShow: slidesToShow,
-    arrows: arrows,
-    prevArrow: /*#__PURE__*/_react.default.createElement(ArrowContainer, {
-      visible: visibleArrow,
-      children: /*#__PURE__*/_react.default.createElement(_icons.ChevronLeft, {
-        fill: '#767676'
-      })
-    }),
-    nextArrow: /*#__PURE__*/_react.default.createElement(ArrowContainer, {
-      visible: visibleArrow,
-      children: /*#__PURE__*/_react.default.createElement(_icons.ChevronRight, {
-        fill: '#767676'
-      })
-    })
-  }), (0, _utils.mapIndexed)((item, index) => {
-    const child = renderItem({
-      item,
-      index
-    });
-
-    if (child) {
-      return /*#__PURE__*/_react.default.cloneElement(child, {
-        key: index
-      });
-    }
-
-    return child;
-  }, data)));
-});
-
-exports.default = _default;
-//# sourceMappingURL=CarouselWeb.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["baseSettings","dots","draggable","lazyLoad","window","undefined","pauseOnFocus","pauseOnHover","rows","swipe","slidesPerRow","vertical","noop","StyledContainer","styled","div","props","display","position","userSelect","overflow","margin","padding","outline","cursor","transform","top","left","content","clear","trackStyle","float","height","minHeight","justifyContent","inactiveSlideScale","transition","opacity","inactiveSlideOpacity","activeSlideScale","arrowsStyle","ArrowContainer","children","currentSlide","slideCount","visible","otherProps","alignItems","backgroundColor","borderRadius","React","forwardRef","ref","defaultActiveSlideScale","autoplay","defaultAutoplay","autoplayInterval","defaultAutoplayInterval","centerMode","centerSlidePadding","data","defaultInactiveSlideOpacity","defaultInactiveSlideScale","index","infinite","defaultInfinite","onChange","renderItem","slidesToScroll","slidesToShow","arrows","slickRef","useRef","visibleArrow","setVisibleArrow","useState","useEffect","current","slickGoTo","fixOnClickNotWorkingAfterMobileSwipe","innerSlider","clickHandler","handleAfterChange","newIndex","handleBeforeChange","onPointerOver","onPointerLeave","mapIndexed","item","child","cloneElement","key"],"sources":["CarouselWeb.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport Slick, { Settings } from 'react-slick';\nimport styled from '@emotion/styled';\nimport { ChevronLeft, ChevronRight } from '@fountain-ui/icons';\nimport { mapIndexed } from '@fountain-ui/utils';\nimport type CarouselProps from './CarouselProps';\nimport {\n    defaultActiveSlideScale,\n    defaultAutoplay,\n    defaultAutoplayInterval,\n    defaultInactiveSlideOpacity,\n    defaultInactiveSlideScale,\n    defaultInfinite,\n} from './utils';\n\nconst baseSettings: Settings = {\n    dots: false,\n    draggable: true,\n    lazyLoad: typeof window === 'undefined' ? undefined : 'ondemand',\n    pauseOnFocus: true,\n    pauseOnHover: true,\n    rows: 1,\n    swipe: true,\n    slidesPerRow: 1,\n    vertical: false,\n};\n\nconst noop = () => void 0;\n\nconst StyledContainer: any = styled.div((props: any) => ({\n    ['& .slick-slider']: {\n        display: 'block',\n        position: 'relative',\n        userSelect: 'none',\n    },\n    ['& .slick-list']: {\n        display: 'block',\n        position: 'relative',\n        overflow: 'hidden',\n        margin: 0,\n        padding: 0,\n        ['&:focus']: {\n            outline: 'none',\n        },\n        ['&.dragging']: {\n            cursor: 'pointer',\n        },\n    },\n    ['& .slick-slider .slick-track, &.slick-slider .slick-list']: {\n        transform: 'translate3d(0, 0, 0)',\n    },\n    ['& .slick-track']: {\n        display: 'block',\n        position: 'relative',\n        top: 0,\n        left: 0,\n        ['&:before, &:after']: {\n            display: 'table',\n            content: '\\'\\'',\n        },\n        ['&:after']: {\n            clear: 'both',\n        },\n        ...props.trackStyle,\n    },\n    ['& .slick-slide']: {\n        display: 'none',\n        float: 'left',\n        height: '100%',\n        minHeight: 1,\n        ['& > div']: {\n            justifyContent: 'center',\n            display: 'flex',\n            transform: `scale(${props.inactiveSlideScale})`,\n            transition: 'transform .5s',\n            opacity: props.inactiveSlideOpacity,\n        },\n    },\n    ['& .slick-current > div']: {\n        transform: `scale(${props.activeSlideScale})`,\n        opacity: 1,\n    },\n    ['& .slick-initialized .slick-slide']: {\n        display: 'block',\n    },\n    ...props.arrowsStyle,\n}));\n\ninterface ArrowContainerProps {\n    children: React.ReactElement;\n    visible: boolean;\n    currentSlide?: any;\n    slideCount?: any;\n}\n\nconst ArrowContainer = (props: ArrowContainerProps) => {\n    const {\n        children,\n        currentSlide,\n        slideCount,\n        visible,\n        ...otherProps\n    } = props;\n\n    return visible ? (\n        // If root component is not a div, there's no arrow class.\n        <div {...otherProps} style={{ cursor: 'pointer' }}>\n            <View\n                style={{\n                    height: '100%',\n                    justifyContent: 'center',\n                    alignItems: 'center',\n                    backgroundColor: 'white',\n                    borderRadius: 16,\n                }}\n            >\n                {children}\n            </View>\n        </div>\n    ) : null;\n};\n\nexport default React.forwardRef((props: CarouselProps, ref) => {\n    const {\n        activeSlideScale = defaultActiveSlideScale,\n        autoplay = defaultAutoplay,\n        autoplayInterval = defaultAutoplayInterval,\n        centerMode = false,\n        centerSlidePadding = 0,\n        data,\n        inactiveSlideOpacity = defaultInactiveSlideOpacity,\n        inactiveSlideScale = defaultInactiveSlideScale,\n        index,\n        infinite = defaultInfinite,\n        onChange,\n        renderItem,\n        slidesToScroll = 1,\n        slidesToShow = 1,\n        arrows = false,\n        arrowsStyle = {},\n        trackStyle = {},\n    } = props;\n\n    const slickRef = React.useRef<Slick | null>(null);\n    const [visibleArrow, setVisibleArrow] = React.useState(false);\n\n    React.useEffect(() => {\n        if (slickRef.current) {\n            slickRef.current.slickGoTo(index, false);\n        }\n    }, [index]);\n\n    const fixOnClickNotWorkingAfterMobileSwipe = () => {\n        // @ts-ignore\n        if (slickRef.current && slickRef.current.innerSlider) {\n            // @ts-ignore\n            slickRef.current.innerSlider.clickHandler = noop;\n        }\n    };\n\n    const handleAfterChange = (newIndex: number) => {\n        fixOnClickNotWorkingAfterMobileSwipe();\n\n        if (onChange) {\n            onChange(newIndex);\n        }\n    };\n\n    const handleBeforeChange = () => {\n        fixOnClickNotWorkingAfterMobileSwipe();\n    };\n\n    const onPointerOver = () => setVisibleArrow(true);\n    const onPointerLeave = () => setVisibleArrow(false);\n\n    React.useEffect(() => {\n        if (ref) {\n            //@ts-ignore\n            ref.current = slickRef.current;\n        }\n    }, []);\n\n    return (\n        <StyledContainer\n            activeSlideScale={activeSlideScale}\n            inactiveSlideOpacity={inactiveSlideOpacity}\n            inactiveSlideScale={inactiveSlideScale}\n            arrowsStyle={arrowsStyle}\n            trackStyle={trackStyle}\n            onPointerOver={onPointerOver}\n            onPointerLeave={onPointerLeave}\n        >\n            <Slick\n                {...baseSettings}\n                afterChange={handleAfterChange}\n                autoplay={autoplay}\n                autoplaySpeed={autoplayInterval}\n                beforeChange={handleBeforeChange}\n                centerMode={centerMode}\n                centerPadding={`${centerSlidePadding}px`}\n                infinite={infinite}\n                initialSlide={index}\n                ref={slickRef}\n                slidesToScroll={slidesToScroll}\n                slidesToShow={slidesToShow}\n                arrows={arrows}\n                prevArrow={<ArrowContainer visible={visibleArrow} children={<ChevronLeft fill={'#767676'}/>}/>}\n                nextArrow={<ArrowContainer visible={visibleArrow} children={<ChevronRight fill={'#767676'}/>}/>}\n            >\n                {mapIndexed((item, index) => {\n                    const child = renderItem({ item, index });\n\n                    if (child) {\n                        return React.cloneElement(child, { key: index });\n                    }\n                    return child;\n                }, data)}\n            </Slick>\n        </StyledContainer>\n    );\n});\n"],"mappings":"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"}

package/build/commonjs/Carousel/index.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["index.native.ts"],"sourcesContent":["export { default } from './CarouselNative';"],"mappings":";;;;;;;;;;;;AAAA"}