react-native-system-ui 0.0.7 → 1.0.1

package/dist/cjs/components/swiper/Swiper.js

@@ -20,24 +20,19 @@ function _reactNative() {
 }
 var _number = require("../../utils/number");
 var _SwiperPagIndicator = _interopRequireDefault(require("./SwiperPagIndicator"));
+var _tokens = require("./tokens");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const SwiperItem = exports.SwiperItem = /*#__PURE__*/(0, _react().forwardRef)((props, ref) => {
-  const {
-    style,
-    children,
-    testID
-  } = props;
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    ref: ref,
-    style: [styles.item, style],
-    testID: testID
-  }, children);
-});
-SwiperItem.displayName = 'SwiperItem';
-const DEFAULT_AUTOPLAY_INTERVAL = 3000;
-const LOOP_RENDER_ALL_THRESHOLD = 10;
+const SwiperItemImpl = (props, ref) => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  ref: ref,
+  style: [S.item, props.style],
+  testID: props.testID
+}, props.children);
+const SwiperItemFR = /*#__PURE__*/(0, _react().forwardRef)(SwiperItemImpl);
+SwiperItemFR.displayName = 'SwiperItem';
+const SwiperItem = exports.SwiperItem = /*#__PURE__*/(0, _react().memo)(SwiperItemFR);
+const LOOP_THRESHOLD = 10;
 const SwiperImpl = (props, ref) => {
   const {
     data,
@@ -54,310 +49,316 @@ const SwiperImpl = (props, ref) => {
     style,
     testID
   } = props;
-  const flatListRef = (0, _react().useRef)(null);
-  const autoplayTimerRef = (0, _react().useRef)(null);
-  const isInteractingRef = (0, _react().useRef)(false);
-  const isAnimatingRef = (0, _react().useRef)(false);
-  const queuedIndexRef = (0, _react().useRef)(null);
-  const isMomentumRef = (0, _react().useRef)(false);
+  const tokens = (0, _tokens.useSwiperTokens)();
+  const listRef = (0, _react().useRef)(null);
+  const autoRef = (0, _react().useRef)(null);
+  const interRef = (0, _react().useRef)(false);
+  const animRef = (0, _react().useRef)(false);
+  const queueRef = (0, _react().useRef)(null);
+  const momRef = (0, _react().useRef)(false);
+  const dragRef = (0, _react().useRef)(null);
   const isWeb = _reactNative().Platform.OS === 'web';
-  const {
-    width: windowWidth,
-    height: windowHeight
-  } = (0, _reactNative().useWindowDimensions)();
   const [layout, setLayout] = (0, _react().useState)({
     width: 0,
     height: 0
   });
-  const handleLayout = (0, _react().useCallback)(event => {
+  const onLayout = (0, _react().useCallback)(e => {
     const {
-      width,
-      height
-    } = event.nativeEvent.layout;
-    setLayout(prev => prev.width === width && prev.height === height ? prev : {
-      width,
-      height
+      width: w,
+      height: h
+    } = e.nativeEvent.layout;
+    setLayout(p => p.width === w && p.height === h ? p : {
+      width: w,
+      height: h
     });
   }, []);
-  const childItems = (0, _react().useMemo)(() => {
-    if (!children) return [];
-    return _react().Children.toArray(children).filter(child => /*#__PURE__*/(0, _react().isValidElement)(child));
-  }, [children]);
+  const items = (0, _react().useMemo)(() => !children ? [] : _react().Children.toArray(children).filter(c => /*#__PURE__*/(0, _react().isValidElement)(c)), [children]);
   const usingData = Array.isArray(data);
-  const baseItems = (0, _react().useMemo)(() => usingData ? data : childItems, [usingData, data, childItems]);
-  const count = baseItems.length;
+  const base = usingData ? data : items;
+  const count = base.length;
   const shouldLoop = loop && count > 1;
-  const displayData = (0, _react().useMemo)(() => {
-    if (!shouldLoop) return baseItems;
-    const head = baseItems[count - 1];
-    const tail = baseItems[0];
-    return [head, ...baseItems, tail];
-  }, [baseItems, shouldLoop, count]);
-  const displayCount = displayData.length;
-  const loopRenderAll = shouldLoop && displayCount <= LOOP_RENDER_ALL_THRESHOLD;
-  const getRealIndex = (0, _react().useCallback)(displayIndex => {
-    if (!shouldLoop) return (0, _number.clamp)(displayIndex, 0, count - 1);
-    if (displayIndex === 0) return count - 1;
-    if (displayIndex === displayCount - 1) return 0;
-    return displayIndex - 1;
-  }, [shouldLoop, count, displayCount]);
-  const getDisplayIndex = (0, _react().useCallback)(realIndex => {
-    if (!shouldLoop) return (0, _number.clamp)(realIndex, 0, count - 1);
-    return (0, _number.clamp)(realIndex, 0, count - 1) + 1;
-  }, [shouldLoop, count]);
-  const initialRealIndex = (0, _number.clamp)(initialSwipe, 0, Math.max(0, count - 1));
-  const initialDisplayIndex = getDisplayIndex(initialRealIndex);
-  const currentIndexRef = (0, _react().useRef)(initialRealIndex);
-  const [currentIndex, setCurrentIndex] = (0, _react().useState)(initialRealIndex);
-  const layoutReady = layout.width > 0 && layout.height > 0;
-  const mainSize = vertical ? layout.height || windowHeight || 1 : layout.width || windowWidth || 1;
-  const crossSize = vertical ? layout.width || windowWidth || 1 : layout.height || windowHeight || 1;
-  const itemStyle = (0, _react().useMemo)(() => ({
-    width: vertical ? crossSize : mainSize,
-    height: vertical ? mainSize : crossSize
-  }), [vertical, mainSize, crossSize]);
-  const clearAutoplay = (0, _react().useCallback)(() => {
-    if (autoplayTimerRef.current) {
-      clearTimeout(autoplayTimerRef.current);
-      autoplayTimerRef.current = null;
+  const display = (0, _react().useMemo)(() => shouldLoop ? [base[count - 1], ...base, base[0]] : base, [base, shouldLoop, count]);
+  const dCount = display.length;
+  const loopAll = shouldLoop && dCount <= LOOP_THRESHOLD;
+  const realIdx = (0, _react().useCallback)(di => !shouldLoop ? (0, _number.clamp)(di, 0, count - 1) : di === 0 ? count - 1 : di === dCount - 1 ? 0 : di - 1, [shouldLoop, count, dCount]);
+  const dispIdx = (0, _react().useCallback)(ri => shouldLoop ? (0, _number.clamp)(ri, 0, count - 1) + 1 : (0, _number.clamp)(ri, 0, count - 1), [shouldLoop, count]);
+  const initReal = (0, _number.clamp)(initialSwipe, 0, Math.max(0, count - 1));
+  const initDisp = dispIdx(initReal);
+  const curRef = (0, _react().useRef)(initReal);
+  const [curIdx, setCurIdx] = (0, _react().useState)(initReal);
+  const ready = layout.width > 0 && layout.height > 0;
+  const mainSz = vertical ? layout.height : layout.width;
+  const crossSz = vertical ? layout.width : layout.height;
+  const itemSz = (0, _react().useMemo)(() => ({
+    width: vertical ? crossSz : mainSz,
+    height: vertical ? mainSz : crossSz
+  }), [vertical, mainSz, crossSz]);
+  const clearAuto = (0, _react().useCallback)(() => {
+    if (autoRef.current) {
+      clearTimeout(autoRef.current);
+      autoRef.current = null;
     }
   }, []);
-  const updateIndex = (0, _react().useCallback)(next => {
-    const clamped = (0, _number.clamp)(next, 0, Math.max(0, count - 1));
-    if (currentIndexRef.current === clamped) return;
-    currentIndexRef.current = clamped;
-    setCurrentIndex(clamped);
-    onChange?.(clamped);
-  }, [count, onChange]);
-  const scrollToDisplayIndex = (0, _react().useCallback)((displayIndex, animated) => {
+  const onChangeRef = (0, _react().useRef)(onChange);
+  onChangeRef.current = onChange;
+  const update = (0, _react().useCallback)(n => {
+    const c = (0, _number.clamp)(n, 0, Math.max(0, count - 1));
+    if (curRef.current === c) return;
+    curRef.current = c;
+    setCurIdx(c);
+    onChangeRef.current?.(c);
+  }, [count]);
+  const scrollTo = (0, _react().useCallback)((i, anim) => {
     try {
-      flatListRef.current?.scrollToIndex({
-        index: displayIndex,
-        animated
+      listRef.current?.scrollToIndex({
+        index: i,
+        animated: anim
       });
     } catch {}
   }, []);
   const swipeTo = (0, _react().useCallback)((index, animated = true) => {
     if (count === 0) return;
-    if (animated && isAnimatingRef.current) {
-      queuedIndexRef.current = index;
+    if (animated && animRef.current) {
+      queueRef.current = index;
       return;
     }
-    const targetRealIndex = (0, _number.clamp)(index, 0, count - 1);
-    let targetDisplayIndex = getDisplayIndex(targetRealIndex);
-    let resolvedAnimated = animated;
-    if (isWeb && shouldLoop && animated) {
-      const currentRealIndex = currentIndexRef.current;
-      if (currentRealIndex === count - 1 && targetRealIndex === 0 || currentRealIndex === 0 && targetRealIndex === count - 1) {
-        resolvedAnimated = false;
-      }
-    }
-    if (shouldLoop && resolvedAnimated) {
-      const currentDisplayIndex = getDisplayIndex(currentIndexRef.current);
-      if (currentDisplayIndex === count && targetRealIndex === 0) {
-        targetDisplayIndex = displayCount - 1;
-      } else if (currentDisplayIndex === 1 && targetRealIndex === count - 1) {
-        targetDisplayIndex = 0;
-      }
+    const tReal = (0, _number.clamp)(index, 0, count - 1);
+    let tDisp = dispIdx(tReal);
+    if (shouldLoop && animated) {
+      const cDisp = dispIdx(curRef.current);
+      if (cDisp === count && tReal === 0) tDisp = dCount - 1;else if (cDisp === 1 && tReal === count - 1) tDisp = 0;
     }
-    const currentRealIndex = currentIndexRef.current;
-    const currentDisplayIndex = getDisplayIndex(currentRealIndex);
-    if (targetRealIndex === currentRealIndex && targetDisplayIndex === currentDisplayIndex) {
-      if (queuedIndexRef.current != null) {
-        const next = queuedIndexRef.current;
-        queuedIndexRef.current = null;
-        swipeTo(next, true);
+    const cReal = curRef.current,
+      cDisp = dispIdx(cReal);
+    if (tReal === cReal && tDisp === cDisp) {
+      if (queueRef.current != null) {
+        const q = queueRef.current;
+        queueRef.current = null;
+        swipeTo(q, true);
       }
+      ;
       return;
     }
-    if (resolvedAnimated) {
-      isAnimatingRef.current = true;
-    }
-    scrollToDisplayIndex(targetDisplayIndex, resolvedAnimated);
-    if (!resolvedAnimated) {
-      updateIndex(targetRealIndex);
-      if (queuedIndexRef.current != null) {
-        const next = queuedIndexRef.current;
-        queuedIndexRef.current = null;
-        swipeTo(next, true);
+    if (animated) animRef.current = true;
+    scrollTo(tDisp, animated);
+    if (!animated) {
+      update(tReal);
+      if (queueRef.current != null) {
+        const q = queueRef.current;
+        queueRef.current = null;
+        swipeTo(q, true);
       }
     }
-  }, [count, getDisplayIndex, scrollToDisplayIndex, shouldLoop, displayCount, updateIndex, isWeb]);
-  const resolveAutoplayInterval = (0, _react().useCallback)(() => {
-    if (typeof autoplay === 'number') return Math.max(0, autoplay);
-    if (autoplay) return DEFAULT_AUTOPLAY_INTERVAL;
-    return 0;
-  }, [autoplay]);
-  const scheduleAutoplay = (0, _react().useCallback)(() => {
-    const interval = resolveAutoplayInterval();
-    if (!interval || count <= 1) return;
-    if (isInteractingRef.current && !isWeb) return;
-    clearAutoplay();
-    autoplayTimerRef.current = setTimeout(() => {
-      if (isInteractingRef.current && !isWeb) return;
-      const nextIndex = shouldLoop ? (currentIndexRef.current + 1) % count : (0, _number.clamp)(currentIndexRef.current + 1, 0, count - 1);
-      swipeTo(nextIndex, true);
-    }, interval);
-  }, [resolveAutoplayInterval, count, clearAutoplay, shouldLoop, swipeTo]);
-  const swipeNext = (0, _react().useCallback)(() => {
+  }, [count, dispIdx, scrollTo, shouldLoop, dCount, update]);
+  const schedule = (0, _react().useCallback)(() => {
+    const iv = typeof autoplay === 'number' ? Math.max(0, autoplay) : autoplay ? tokens.defaults.autoplayInterval : 0;
+    if (!iv || count <= 1) return;
+    if (interRef.current && !isWeb) return;
+    clearAuto();
+    autoRef.current = setTimeout(() => {
+      if (interRef.current && !isWeb) return;
+      swipeTo(shouldLoop ? (curRef.current + 1) % count : (0, _number.clamp)(curRef.current + 1, 0, count - 1), true);
+    }, iv);
+  }, [autoplay, count, clearAuto, shouldLoop, swipeTo, isWeb, tokens.defaults.autoplayInterval]);
+  const next = (0, _react().useCallback)(() => {
     if (count === 0) return;
-    const next = shouldLoop ? (currentIndexRef.current + 1) % count : (0, _number.clamp)(currentIndexRef.current + 1, 0, count - 1);
-    swipeTo(next, true);
+    swipeTo(shouldLoop ? (curRef.current + 1) % count : (0, _number.clamp)(curRef.current + 1, 0, count - 1), true);
   }, [count, shouldLoop, swipeTo]);
-  const swipePrev = (0, _react().useCallback)(() => {
+  const prev = (0, _react().useCallback)(() => {
     if (count === 0) return;
-    const next = shouldLoop ? (currentIndexRef.current - 1 + count) % count : (0, _number.clamp)(currentIndexRef.current - 1, 0, count - 1);
-    swipeTo(next, true);
+    swipeTo(shouldLoop ? (curRef.current - 1 + count) % count : (0, _number.clamp)(curRef.current - 1, 0, count - 1), true);
   }, [count, shouldLoop, swipeTo]);
-  const flushQueuedSwipe = () => {
-    if (queuedIndexRef.current == null) return;
-    const next = queuedIndexRef.current;
-    queuedIndexRef.current = null;
-    swipeTo(next, true);
+  const flush = () => {
+    if (queueRef.current == null) return;
+    const q = queueRef.current;
+    queueRef.current = null;
+    swipeTo(q, true);
   };
   (0, _react().useImperativeHandle)(ref, () => ({
     swipeTo,
-    swipeNext,
-    swipePrev,
-    getCurrentIndex: () => currentIndexRef.current
-  }), [swipeTo, swipeNext, swipePrev]);
+    swipeNext: next,
+    swipePrev: prev,
+    getCurrentIndex: () => curRef.current
+  }), [swipeTo, next, prev]);
   (0, _react().useEffect)(() => {
-    if (!layoutReady || count === 0) return;
-    scrollToDisplayIndex(initialDisplayIndex, false);
-  }, [layoutReady, count, initialDisplayIndex, scrollToDisplayIndex]);
+    if (!ready || count === 0) return;
+    scrollTo(initDisp, false);
+  }, [ready, count, initDisp, scrollTo]);
   (0, _react().useEffect)(() => {
-    scheduleAutoplay();
-    return clearAutoplay;
-  }, [scheduleAutoplay, clearAutoplay, currentIndex]);
-  const handleScrollBeginDrag = () => {
-    isInteractingRef.current = true;
-    clearAutoplay();
-  };
-  const handleScroll = event => {
-    if (!isWeb || count <= 1) return;
-    const offset = vertical ? event.nativeEvent.contentOffset.y : event.nativeEvent.contentOffset.x;
-    const displayIndex = Math.round(offset / mainSize);
-    const nextDisplayIndex = shouldLoop ? (0, _number.clamp)(displayIndex, 0, displayCount - 1) : (0, _number.clamp)(displayIndex, 0, count - 1);
-    updateIndex(getRealIndex(nextDisplayIndex));
-    const alignedOffset = Math.round(offset / mainSize) * mainSize;
-    if (Math.abs(offset - alignedOffset) < 0.5) {
-      isAnimatingRef.current = false;
-      isInteractingRef.current = false;
-      isMomentumRef.current = false;
-      scheduleAutoplay();
-      flushQueuedSwipe();
+    schedule();
+    return clearAuto;
+  }, [schedule, clearAuto, curIdx]);
+  const reset = (0, _react().useCallback)(() => {
+    animRef.current = false;
+    interRef.current = false;
+    momRef.current = false;
+    schedule();
+    flush();
+  }, [schedule]);
+  const onScroll = (0, _react().useCallback)(e => {
+    if (count <= 1) return;
+    const off = vertical ? e.nativeEvent.contentOffset.y : e.nativeEvent.contentOffset.x;
+    const di = Math.round(off / mainSz);
+    const cdi = shouldLoop ? (0, _number.clamp)(di, 0, dCount - 1) : (0, _number.clamp)(di, 0, count - 1);
+    update(realIdx(cdi));
+    if (isWeb) {
+      const aligned = di * mainSz;
+      if (Math.abs(off - aligned) < 0.5) {
+        if (shouldLoop && (di <= 0 || di >= dCount - 1)) scrollTo(di <= 0 ? count : 1, false);
+        reset();
+      }
     }
-  };
-  const handleMomentumScrollBegin = () => {
-    isMomentumRef.current = true;
-  };
-  const handleScrollEndDrag = event => {
-    if (isMomentumRef.current) return;
-    handleScrollEnd(event);
-  };
-  const handleScrollEnd = event => {
-    if (count === 0) return;
-    const offset = vertical ? event.nativeEvent.contentOffset.y : event.nativeEvent.contentOffset.x;
-    const displayIndex = Math.round(offset / mainSize);
-    let nextDisplayIndex = displayIndex;
+  }, [count, vertical, mainSz, shouldLoop, dCount, update, realIdx, scrollTo, reset, isWeb]);
+  const onEnd = (0, _react().useCallback)(e => {
+    if (isWeb || count === 0) return;
+    const off = vertical ? e.nativeEvent.contentOffset.y : e.nativeEvent.contentOffset.x;
+    const di = Math.round(off / mainSz);
+    let ndi = di;
     if (shouldLoop) {
-      if (displayIndex === 0) nextDisplayIndex = count;
-      if (displayIndex === displayCount - 1) nextDisplayIndex = 1;
+      if (di === 0) ndi = count;
+      if (di === dCount - 1) ndi = 1;
     }
-    if (nextDisplayIndex !== displayIndex) {
-      scrollToDisplayIndex(nextDisplayIndex, false);
-    }
-    updateIndex(getRealIndex(nextDisplayIndex));
-    isInteractingRef.current = false;
-    isAnimatingRef.current = false;
-    isMomentumRef.current = false;
-    scheduleAutoplay();
-    flushQueuedSwipe();
-  };
-  const renderIndicator = () => {
-    if (indicator === false || count <= 1) return null;
-    if (typeof indicator === 'function') return indicator(count, currentIndex);
-    return /*#__PURE__*/_react().default.createElement(_SwiperPagIndicator.default, _extends({}, indicatorProps, {
-      total: count,
-      current: currentIndex,
-      vertical: vertical
-    }));
-  };
+    if (ndi !== di) scrollTo(ndi, false);
+    update(realIdx(ndi));
+    reset();
+  }, [vertical, count, mainSz, shouldLoop, dCount, scrollTo, update, realIdx, reset, isWeb]);
+  const onDragBegin = (0, _react().useCallback)(() => {
+    interRef.current = true;
+    clearAuto();
+  }, [clearAuto]);
+  const onDragEnd = (0, _react().useCallback)(e => {
+    if (!momRef.current) onEnd(e);
+  }, [onEnd]);
+  const onMomBegin = (0, _react().useCallback)(() => {
+    momRef.current = true;
+  }, []);
+  const onFail = (0, _react().useCallback)(info => {
+    scrollTo(info.index, false);
+    update(realIdx(info.index));
+    reset();
+  }, [scrollTo, update, realIdx, reset]);
+  const renderItemRef = (0, _react().useRef)(renderItem);
+  renderItemRef.current = renderItem;
   const renderSlide = (0, _react().useCallback)(info => {
-    const content = usingData ? renderItem?.(info) ?? null : info.item;
-    if (!content) return null;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: [styles.slide, itemStyle]
-    }, content);
-  }, [usingData, renderItem, itemStyle]);
+    const c = usingData ? renderItemRef.current?.(info) ?? null : info.item;
+    return c ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [S.slide, itemSz]
+    }, c) : null;
+  }, [usingData, itemSz]);
+  const getLayout = (0, _react().useCallback)((_, i) => ({
+    length: mainSz,
+    offset: mainSz * i,
+    index: i
+  }), [mainSz]);
+  const keyEx = (0, _react().useCallback)((_, i) => `s-${i}`, []);
   if (count === 0) return null;
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.container, style],
-    onLayout: handleLayout,
+  const indNode = indicator === false || count <= 1 ? null : typeof indicator === 'function' ? indicator(count, curIdx) : /*#__PURE__*/_react().default.createElement(_SwiperPagIndicator.default, _extends({}, indicatorProps, {
+    total: count,
+    current: curIdx,
+    vertical: vertical
+  }));
+  const webMouse = isWeb && touchable && count > 1 ? {
+    onPointerDown: e => {
+      if (e.nativeEvent.pointerType !== 'mouse' || e.nativeEvent.button !== 0) return;
+      dragRef.current = vertical ? e.nativeEvent.pageY : e.nativeEvent.pageX;
+      interRef.current = true;
+      clearAuto();
+    },
+    onPointerUp: e => {
+      const s = dragRef.current;
+      dragRef.current = null;
+      if (s == null || e.nativeEvent.pointerType !== 'mouse') return;
+      const d = (vertical ? e.nativeEvent.pageY : e.nativeEvent.pageX) - s;
+      if (Math.abs(d) >= mainSz * 0.15) {
+        d < 0 ? next() : prev();
+      }
+      ;
+      interRef.current = false;
+      schedule();
+    },
+    onPointerLeave: () => {
+      if (dragRef.current != null) {
+        dragRef.current = null;
+        interRef.current = false;
+        schedule();
+      }
+    }
+  } : undefined;
+  if (!ready) {
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [S.ctr, style],
+      onLayout: onLayout,
+      testID: testID
+    });
+  }
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+    accessibilityRole: "adjustable",
+    accessibilityLabel: `swiper, ${curIdx + 1} of ${count}`,
+    accessibilityValue: {
+      min: 0,
+      max: count - 1,
+      now: curIdx
+    },
+    style: [S.ctr, webMouse && S.web, style],
+    onLayout: onLayout,
     testID: testID
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().FlatList, {
-    ref: flatListRef,
-    data: displayData,
+  }, webMouse), /*#__PURE__*/_react().default.createElement(_reactNative().FlatList, {
+    ref: listRef,
+    data: display,
     renderItem: renderSlide,
-    keyExtractor: (_item, index) => `swiper-${index}`,
+    keyExtractor: keyEx,
     horizontal: !vertical,
-    getItemLayout: (_, index) => ({
-      length: mainSize,
-      offset: mainSize * index,
-      index
-    }),
-    initialScrollIndex: layoutReady ? initialDisplayIndex : undefined,
+    getItemLayout: getLayout,
+    initialScrollIndex: initDisp,
     scrollEnabled: touchable && count > 1,
-    removeClippedSubviews: !shouldLoop || !loopRenderAll,
-    disableVirtualization: shouldLoop && loopRenderAll,
-    initialNumToRender: shouldLoop ? loopRenderAll ? displayCount : 3 : 3,
-    maxToRenderPerBatch: shouldLoop ? loopRenderAll ? displayCount : 3 : 3,
-    windowSize: shouldLoop ? loopRenderAll ? displayCount : 7 : 5,
+    removeClippedSubviews: !shouldLoop || !loopAll,
+    disableVirtualization: shouldLoop && loopAll,
+    initialNumToRender: shouldLoop ? loopAll ? dCount : 3 : 3,
+    maxToRenderPerBatch: shouldLoop ? loopAll ? dCount : 3 : 3,
+    windowSize: shouldLoop ? loopAll ? dCount : 7 : 5,
     pagingEnabled: true,
-    snapToInterval: mainSize,
+    snapToInterval: mainSz,
     decelerationRate: "fast",
     showsHorizontalScrollIndicator: false,
     showsVerticalScrollIndicator: false,
-    onScrollBeginDrag: handleScrollBeginDrag,
-    onScroll: handleScroll,
-    scrollEventThrottle: 16,
-    onScrollEndDrag: handleScrollEndDrag,
-    onMomentumScrollBegin: handleMomentumScrollBegin,
-    onMomentumScrollEnd: handleScrollEnd,
-    onScrollToIndexFailed: info => {
-      scrollToDisplayIndex(info.index, false);
-      isAnimatingRef.current = false;
-      isInteractingRef.current = false;
-      updateIndex(getRealIndex(info.index));
-      scheduleAutoplay();
-      flushQueuedSwipe();
-    }
+    onScrollBeginDrag: onDragBegin,
+    onScroll: onScroll,
+    scrollEventThrottle: tokens.defaults.scrollEventThrottle,
+    onScrollEndDrag: onDragEnd,
+    onMomentumScrollBegin: onMomBegin,
+    onMomentumScrollEnd: onEnd,
+    onScrollToIndexFailed: onFail
   }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     pointerEvents: "none",
-    style: styles.indicatorOverlay
-  }, renderIndicator()));
+    style: [S.ind, {
+      zIndex: tokens.layer.zIndex,
+      elevation: tokens.layer.elevation
+    }]
+  }, indNode));
 };
-const Swiper = /*#__PURE__*/(0, _react().forwardRef)(SwiperImpl);
-Swiper.displayName = 'Swiper';
-const styles = _reactNative().StyleSheet.create({
-  container: {
+const SwiperFR = /*#__PURE__*/(0, _react().forwardRef)(SwiperImpl);
+const Swiper = /*#__PURE__*/(0, _react().memo)(SwiperFR);
+const S = _reactNative().StyleSheet.create({
+  ctr: {
     position: 'relative',
     overflow: 'hidden'
   },
+  web: {
+    cursor: 'grab',
+    userSelect: 'none'
+  },
   slide: {
     flex: 1
   },
   item: {
     flex: 1
   },
-  indicatorOverlay: {
+  ind: {
     position: 'absolute',
     left: 0,
     right: 0,
     top: 0,
-    bottom: 0,
-    zIndex: 10,
-    elevation: 10
+    bottom: 0
   }
 });
 var _default = exports.default = Swiper;