react-native-system-ui 0.0.1 → 0.0.3

package/dist/cjs/components/index-bar/IndexBar.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
   _react = function () {
     return data;
   };
@@ -20,8 +20,9 @@ function _reactNative() {
 }
 var _hooks = require("../../hooks");
 var _validate = require("../../utils/validate");
+var _safeAreaView = require("../safe-area-view");
 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 IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const {
@@ -48,20 +49,24 @@ const IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     colors,
     layout
   } = (0, _tokens.useIndexBarTokens)(tokensOverride);
-  const scrollRef = _react().default.useRef(null);
-  const scrollYRef = _react().default.useRef(0);
-  const anchorLayouts = _react().default.useRef(new Map());
-  const indexListHeightRef = _react().default.useRef(0);
-  const draggingIndexRef = _react().default.useRef(null);
-  const pendingScrollToValueRef = _react().default.useRef(null);
-  const [stickyVisible, setStickyVisible] = _react().default.useState(false);
-  const [indicator, setIndicator] = _react().default.useState({
+  const scrollRef = (0, _react().useRef)(null);
+  const scrollYRef = (0, _react().useRef)(0);
+  const anchorLayouts = (0, _react().useRef)(new Map());
+  const anchorOffsetsRef = (0, _react().useRef)([]);
+  const indexListHeightRef = (0, _react().useRef)(0);
+  const navItemLayoutsRef = (0, _react().useRef)(new Map());
+  const navItemOffsetsRef = (0, _react().useRef)([]);
+  const draggingIndexRef = (0, _react().useRef)(null);
+  const pendingScrollToValueRef = (0, _react().useRef)(null);
+  const [interactionIndex, setInteractionIndex] = (0, _react().useState)(null);
+  const [stickyVisible, setStickyVisible] = (0, _react().useState)(false);
+  const [indicator, setIndicator] = (0, _react().useState)({
     visible: false
   });
-  const anchors = _react().default.useMemo(() => {
+  const anchors = (0, _react().useMemo)(() => {
     return _react().default.Children.toArray(children).filter(_react().default.isValidElement);
   }, [children]);
-  const navItems = _react().default.useMemo(() => {
+  const navItems = (0, _react().useMemo)(() => {
     return indexList?.length ? indexList : anchors.map(anchor => anchor.props.index);
   }, [anchors, indexList]);
   const firstIndex = navItems[0];
@@ -72,20 +77,21 @@ const IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     trigger: 'onChange'
   });
   const currentIndex = activeIndex === undefined || activeIndex === null || !navItems.includes(activeIndex) ? firstIndex : activeIndex;
-  const showIndicatorNow = label => {
+  const displayIndex = interactionIndex ?? currentIndex;
+  const showIndicatorNow = (0, _react().useCallback)(label => {
     if (!showIndicator) return;
     setIndicator({
       visible: true,
       label
     });
-  };
-  const hideIndicatorNow = () => {
+  }, [showIndicator]);
+  const hideIndicatorNow = (0, _react().useCallback)(() => {
     if (!showIndicator) return;
     setIndicator(prev => prev.visible ? {
       visible: false
     } : prev);
-  };
-  const scrollToAnchor = (index, animated) => {
+  }, [showIndicator]);
+  const scrollToAnchor = (0, _react().useCallback)((index, animated) => {
     const y = anchorLayouts.current.get(index);
     if (y === undefined) {
       pendingScrollToValueRef.current = index;
@@ -95,9 +101,13 @@ const IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       y: Math.max(0, y - stickyOffsetTop),
       animated
     });
-  };
-  const handleAnchorLayout = (index, layoutY) => {
+  }, [stickyOffsetTop]);
+  const handleAnchorLayout = (0, _react().useCallback)((index, layoutY) => {
     anchorLayouts.current.set(index, layoutY);
+    anchorOffsetsRef.current = Array.from(anchorLayouts.current.entries()).map(([key, y]) => ({
+      index: key,
+      y
+    })).sort((a, b) => a.y - b.y);
     const pending = pendingScrollToValueRef.current;
     if (pending === null) return;
     const y = anchorLayouts.current.get(pending);
@@ -107,23 +117,36 @@ const IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       y: Math.max(0, y - stickyOffsetTop),
       animated: false
     });
-  };
-  const scrollToIndex = (index, animated = true) => {
+  }, [stickyOffsetTop]);
+  const scrollToIndex = (0, _react().useCallback)((index, animated = true) => {
     scrollToAnchor(index, animated);
     setActiveIndex(index);
-  };
-  _react().default.useImperativeHandle(ref, () => ({
+  }, [scrollToAnchor, setActiveIndex]);
+  (0, _react().useImperativeHandle)(ref, () => ({
     scrollTo: index => scrollToIndex(index, true)
-  }));
-  const handleScroll = event => {
+  }), [scrollToIndex]);
+  const handleScroll = (0, _react().useCallback)(event => {
     const offsetY = event?.nativeEvent?.contentOffset?.y ?? 0;
     scrollYRef.current = offsetY;
     const threshold = sticky ? stickyOffsetTop : 0;
     let nextIndex = currentIndex;
-    for (const anchor of anchors) {
-      const y = anchorLayouts.current.get(anchor.props.index);
-      if (y === undefined) continue;
-      if (offsetY + threshold + 1 >= y) nextIndex = anchor.props.index;else break;
+    const entries = anchorOffsetsRef.current;
+    const targetY = offsetY + threshold + 1;
+    let low = 0;
+    let high = entries.length - 1;
+    let found = null;
+    while (low <= high) {
+      const mid = Math.floor((low + high) / 2);
+      const entry = entries[mid];
+      if (entry && entry.y <= targetY) {
+        found = entry.index;
+        low = mid + 1;
+      } else {
+        high = mid - 1;
+      }
+    }
+    if (found !== null) {
+      nextIndex = found;
     }
     if (nextIndex !== undefined && nextIndex !== null && nextIndex !== currentIndex) {
       setActiveIndex(nextIndex);
@@ -135,8 +158,39 @@ const IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     } else {
       setStickyVisible(prev => prev ? false : prev);
     }
-  };
-  _react().default.useEffect(() => {
+  }, [currentIndex, setActiveIndex, sticky, stickyOffsetTop]);
+  (0, _react().useEffect)(() => {
+    const valid = new Set(anchors.map(anchor => anchor.props.index));
+    Array.from(anchorLayouts.current.keys()).forEach(key => {
+      if (!valid.has(key)) {
+        anchorLayouts.current.delete(key);
+      }
+    });
+    anchorOffsetsRef.current = Array.from(anchorLayouts.current.entries()).map(([key, y]) => ({
+      index: key,
+      y
+    })).sort((a, b) => a.y - b.y);
+  }, [anchors]);
+  (0, _react().useEffect)(() => {
+    const valid = new Set(navItems);
+    Array.from(navItemLayoutsRef.current.keys()).forEach(key => {
+      if (!valid.has(key)) {
+        navItemLayoutsRef.current.delete(key);
+      }
+    });
+    navItemOffsetsRef.current = Array.from(navItemLayoutsRef.current.entries()).map(([key, layoutItem]) => ({
+      index: key,
+      y: layoutItem.y,
+      height: layoutItem.height
+    })).sort((a, b) => a.y - b.y);
+  }, [navItems]);
+  (0, _react().useEffect)(() => {
+    if (interactionIndex == null) return;
+    if (!navItems.includes(interactionIndex)) {
+      setInteractionIndex(null);
+    }
+  }, [interactionIndex, navItems]);
+  (0, _react().useEffect)(() => {
     if (value === undefined || value === null) return;
     const y = anchorLayouts.current.get(value);
     if (y === undefined) {
@@ -150,22 +204,39 @@ const IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
       animated: true
     });
   }, [stickyOffsetTop, value]);
-  const selectIndex = (index, animated) => {
+  const selectIndex = (0, _react().useCallback)((index, animated) => {
     showIndicatorNow(String(index));
     onSelect?.(index);
     scrollToIndex(index, animated);
-  };
-  const handlePressIn = index => {
+  }, [onSelect, scrollToIndex, showIndicatorNow]);
+  const handlePressIn = (0, _react().useCallback)(index => {
+    setInteractionIndex(index);
     selectIndex(index, true);
-  };
-  const handlePressOut = () => {
+  }, [selectIndex]);
+  const handlePressOut = (0, _react().useCallback)(() => {
     hideIndicatorNow();
-  };
+    setInteractionIndex(null);
+  }, [hideIndicatorNow]);
+  const handleIndexItemLayout = (0, _react().useCallback)((index, event) => {
+    const {
+      y,
+      height
+    } = event.nativeEvent.layout;
+    navItemLayoutsRef.current.set(index, {
+      y,
+      height
+    });
+    navItemOffsetsRef.current = Array.from(navItemLayoutsRef.current.entries()).map(([key, layoutItem]) => ({
+      index: key,
+      y: layoutItem.y,
+      height: layoutItem.height
+    })).sort((a, b) => a.y - b.y);
+  }, []);
   if (anchors.length === 0) {
     return null;
   }
   const highlight = highlightColor ?? colors.activeText;
-  const activeAnchor = anchors.find(anchor => anchor.props.index === currentIndex);
+  const activeAnchor = anchors.find(anchor => anchor.props.index === displayIndex);
   const stickyNode = sticky && stickyVisible && activeAnchor ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [styles.sticky, {
       backgroundColor: colors.stickyBackground,
@@ -177,70 +248,101 @@ const IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     }]
   }, activeAnchor.props.title ?? activeAnchor.props.index)) : null;
   const indicatorSize = layout.indicatorSize;
-  const indicatorNode = showIndicator && indicator.visible ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.indicator, {
-      width: indicatorSize,
-      height: indicatorSize,
-      borderRadius: indicatorSize / 2,
-      backgroundColor: colors.indicatorBackground,
-      zIndex,
-      transform: [{
-        translateX: -indicatorSize / 2
-      }, {
-        translateY: -indicatorSize / 2
+  const indicatorNode = (0, _react().useMemo)(() => {
+    if (!showIndicator || !indicator.visible) return null;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [styles.indicator, {
+        width: indicatorSize,
+        height: indicatorSize,
+        borderRadius: indicatorSize / 2,
+        backgroundColor: colors.indicatorBackground,
+        zIndex,
+        transform: [{
+          translateX: -indicatorSize / 2
+        }, {
+          translateY: -indicatorSize / 2
+        }]
+      }, indicatorStyle]
+    }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: [styles.indicatorText, {
+        color: colors.indicatorText
       }]
-    }, indicatorStyle]
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [styles.indicatorText, {
-      color: colors.indicatorText
-    }]
-  }, indicator.label)) : null;
-  const pickIndexFromEvent = evt => {
+    }, indicator.label));
+  }, [colors.indicatorBackground, colors.indicatorText, indicator.label, indicator.visible, indicatorSize, indicatorStyle, showIndicator, zIndex]);
+  const pickIndexFromEvent = (0, _react().useCallback)(evt => {
+    if (!navItems.length) return null;
+    const locationY = evt?.nativeEvent?.locationY;
+    if (!(0, _validate.isFiniteNumber)(locationY)) return null;
+    const entries = navItemOffsetsRef.current;
+    if (entries.length) {
+      let picked = null;
+      let minDistance = Number.POSITIVE_INFINITY;
+      entries.forEach(entry => {
+        if (entry.height <= 0) return;
+        const center = entry.y + entry.height / 2;
+        const distance = Math.abs(locationY - center);
+        if (distance < minDistance) {
+          minDistance = distance;
+          picked = entry.index;
+        }
+      });
+      return picked;
+    }
     const height = indexListHeightRef.current;
-    if (!height || !navItems.length) return null;
+    if (!height) return null;
     const paddingY = layout.paddingVertical;
     const contentHeight = Math.max(0, height - paddingY * 2);
     const itemHeight = contentHeight / navItems.length;
     if (itemHeight <= 0) return null;
-    const locationY = evt?.nativeEvent?.locationY;
-    if (!(0, _validate.isFiniteNumber)(locationY)) return null;
     const y = locationY - paddingY;
     const idx = Math.max(0, Math.min(navItems.length - 1, Math.floor(y / itemHeight)));
-    return navItems[idx] ?? null;
-  };
-  const panResponder = _reactNative().PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onStartShouldSetPanResponderCapture: () => true,
-    onMoveShouldSetPanResponder: () => true,
-    onMoveShouldSetPanResponderCapture: () => true,
-    onPanResponderGrant: evt => {
-      const picked = pickIndexFromEvent(evt);
-      draggingIndexRef.current = picked;
-      if (picked !== null) {
-        selectIndex(picked, true);
-      }
-    },
-    onPanResponderMove: evt => {
-      const picked = pickIndexFromEvent(evt);
-      if (picked === null) return;
-      if (picked === draggingIndexRef.current) return;
-      draggingIndexRef.current = picked;
-      selectIndex(picked, false);
-    },
-    onPanResponderRelease: () => {
-      draggingIndexRef.current = null;
-      hideIndicatorNow();
-    },
-    onPanResponderTerminate: () => {
-      draggingIndexRef.current = null;
-      hideIndicatorNow();
+    return navItems[idx] || null;
+  }, [layout.paddingVertical, navItems]);
+  const shouldHandleResponder = (0, _react().useCallback)(evt => {
+    if (!navItems.length) return false;
+    const locationY = evt?.nativeEvent?.locationY;
+    if (!(0, _validate.isFiniteNumber)(locationY)) return false;
+    if (navItemOffsetsRef.current.length) return true;
+    return indexListHeightRef.current > 0;
+  }, [navItems.length]);
+  const handleResponderGrant = (0, _react().useCallback)(evt => {
+    const picked = pickIndexFromEvent(evt);
+    draggingIndexRef.current = picked;
+    if (picked !== null) {
+      setInteractionIndex(picked);
+      selectIndex(picked, true);
     }
-  });
-  const StickyWrapper = safeAreaInsetTop ? _reactNative().SafeAreaView : _reactNative().View;
+  }, [pickIndexFromEvent, selectIndex]);
+  const handleResponderMove = (0, _react().useCallback)(evt => {
+    const picked = pickIndexFromEvent(evt);
+    if (picked === null) return;
+    if (picked === draggingIndexRef.current) return;
+    draggingIndexRef.current = picked;
+    setInteractionIndex(picked);
+    selectIndex(picked, false);
+  }, [pickIndexFromEvent, selectIndex]);
+  const handleResponderRelease = (0, _react().useCallback)(() => {
+    draggingIndexRef.current = null;
+    hideIndicatorNow();
+    setInteractionIndex(null);
+  }, [hideIndicatorNow]);
+  const StickyWrapper = safeAreaInsetTop ? _safeAreaView.SafeAreaView : _reactNative().View;
   const stickyWrapperStyle = [styles.stickyWrapper, {
     top: stickyOffsetTop,
     zIndex
   }];
+  const handleIndexListLayout = (0, _react().useCallback)(e => {
+    const {
+      height
+    } = e.nativeEvent.layout;
+    indexListHeightRef.current = height;
+  }, []);
+  const anchorNodes = (0, _react().useMemo)(() => anchors.map(anchor => /*#__PURE__*/_react().default.cloneElement(anchor, {
+    key: anchor.key ?? anchor.props.index,
+    active: anchor.props.index === displayIndex,
+    highlightColor: highlight,
+    onLayoutCapture: handleAnchorLayout
+  })), [anchors, displayIndex, handleAnchorLayout, highlight]);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
     style: [styles.container, style]
   }), /*#__PURE__*/_react().default.createElement(_reactNative().ScrollView, {
@@ -248,32 +350,35 @@ const IndexBarBase = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     onScroll: handleScroll,
     scrollEventThrottle: 16,
     showsVerticalScrollIndicator: false
-  }, anchors.map(anchor => /*#__PURE__*/_react().default.cloneElement(anchor, {
-    key: anchor.key ?? anchor.props.index,
-    active: anchor.props.index === currentIndex,
-    highlightColor: highlight,
-    onLayoutCapture: handleAnchorLayout
-  }))), sticky && stickyVisible && stickyNode ? /*#__PURE__*/_react().default.createElement(StickyWrapper, {
+  }, anchorNodes), sticky && stickyVisible && stickyNode && /*#__PURE__*/_react().default.createElement(StickyWrapper, {
     style: stickyWrapperStyle
-  }, stickyNode) : null, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+  }, stickyNode), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    testID: "rv-indexbar-nav-list",
     style: [styles.indexList, {
       width: layout.indexWidth,
       paddingVertical: layout.paddingVertical,
       zIndex
     }],
-    onLayout: e => {
-      const {
-        height
-      } = e.nativeEvent.layout;
-      indexListHeightRef.current = height;
-    }
-  }, panResponder.panHandlers), navItems.map(item => {
-    const isActive = item === currentIndex;
+    onLayout: handleIndexListLayout,
+    onStartShouldSetResponder: () => false,
+    onMoveShouldSetResponder: evt => shouldHandleResponder(evt),
+    onStartShouldSetResponderCapture: () => false,
+    onMoveShouldSetResponderCapture: evt => shouldHandleResponder(evt),
+    onResponderGrant: handleResponderGrant,
+    onResponderStart: handleResponderGrant,
+    onResponderMove: handleResponderMove,
+    onResponderRelease: handleResponderRelease,
+    onResponderTerminate: handleResponderRelease
+  }, navItems.map(item => {
+    const isActive = item === displayIndex;
     const node = itemRender?.(item, isActive);
     return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
       key: String(item),
       testID: `rv-indexbar-nav-${String(item)}`,
       style: styles.indexItem,
+      hitSlop: layout.spacing,
+      onLayout: event => handleIndexItemLayout(item, event),
+      onPress: () => handlePressIn(item),
       onPressIn: () => handlePressIn(item),
       onPressOut: handlePressOut
     }, node ?? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
@@ -298,7 +403,10 @@ const styles = _reactNative().StyleSheet.create({
   },
   indexItem: {
     paddingVertical: 1,
-    paddingHorizontal: 0
+    paddingHorizontal: 0,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   indexText: {
     fontSize: 12