react-native-x-components 0.1.0 → 0.2.0

package/dist/XElevator/index.js

@@ -1,138 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * ============================================================================
- * XElevator —— 电梯楼层/字母导航列表（duxui Elevator 的 RN 原生重写版）
- * ============================================================================
- *
- * 【与 duxui Elevator 的关系】
- * duxui 用 ScrollView + Layout 手动累加每组高度算 scrollTop；
- * RN 端 SectionList 原生支持分组吸顶 + scrollToLocation，
- * 这里直接用 SectionList 重写：代码量减半、吸顶/定位更稳。
- *
- * 【右侧导航条】
- * - 触摸（按下/滑动）定位：容器拦截 responder 事件，用 locationY 与
- *   各标签 onLayout 记录的 y 区间比对，命中即 scrollToLocation；
- * - 滚动联动高亮：onViewableItemsChanged 取第一个可见项所属 section。
- *
- * 【API 对标 duxui】list -> sections（{title, data}[]）、onItemClick、
- * showNav、renderTop/Header/Footer/Empty；扩展 navLabel（导航条短标签，
- * 默认取 title 首字符）、keyExtractor。
- * ============================================================================
- */
-import { useCallback, useRef, useState } from 'react';
-import { SectionList, StyleSheet, Text, View, } from 'react-native';
-import { useXTheme } from '../theme';
-export function XElevator({ sections, renderItem, keyExtractor, onItemClick, showNav = true, renderTop, renderFooter, renderEmpty, style, }) {
-    const t = useXTheme();
-    const listRef = useRef(null);
-    /** 导航条每个标签的 y 中心（onLayout 记录，用于触摸命中） */
-    const navYRef = useRef([]);
-    /** 当前高亮的分组下标 */
-    const [activeIndex, setActiveIndex] = useState(0);
-    /** 滚动定位到分组 */
-    const scrollToSection = useCallback((index) => {
-        if (index < 0 || index >= sections.length)
-            return;
-        listRef.current?.scrollToLocation({ sectionIndex: index, itemIndex: 0, viewPosition: 0 });
-    }, [sections.length]);
-    /**
-     * 导航条触摸（按下/滑动）：locationY 落在哪个标签区间 → 定位。
-     * onStartShouldSetResponder 抢占事件，滑动中 onResponderMove 连续命中。
-     */
-    const handleNavTouch = useCallback((e) => {
-        const y = e.nativeEvent.locationY;
-        const ys = navYRef.current;
-        for (let i = ys.length - 1; i >= 0; i--) {
-            if (ys[i] !== undefined && y >= ys[i]) {
-                if (activeIndex !== i)
-                    setActiveIndex(i);
-                scrollToSection(i);
-                return;
-            }
-        }
-        scrollToSection(0);
-    }, [activeIndex, scrollToSection]);
-    /** 第一个可见项所属分组 → 导航高亮 */
-    const handleViewableItemsChanged = useRef(({ viewableItems }) => {
-        const first = viewableItems.find(v => v.section);
-        if (!first?.section)
-            return;
-        const index = sections.findIndex(s => s.title === first.section.title);
-        if (index >= 0)
-            setActiveIndex(prev => (prev === index ? prev : index));
-    }).current;
-    /** 默认行渲染 */
-    const defaultRenderItem = (item, section, index) => (_jsx(Text, { style: [styles.itemText, { color: t.colorText }], children: item.name }));
-    /** SectionList 的行：包一层按压反馈 */
-    const renderRow = ({ item, section, index }) => {
-        const Row = renderItem ?? defaultRenderItem;
-        return (_jsx(View, { style: [styles.item, { borderBottomColor: t.colorSplit }], onTouchEnd: () => onItemClick?.(item, section), children: Row(item, section, index) }));
-    };
-    const hasData = sections.some(s => s.data.length > 0);
-    return (_jsxs(View, { style: [styles.container, style], children: [_jsxs(View, { style: styles.listWrap, children: [renderTop?.(), _jsx(SectionList, { ref: listRef, sections: sections, renderItem: renderRow, renderSectionHeader: ({ section }) => (_jsx(View, { style: [styles.sectionHeader, { backgroundColor: t.colorBgLayout }], children: _jsx(Text, { style: [styles.sectionTitle, { color: t.colorTextSecondary }], children: section.title }) })), keyExtractor: keyExtractor ?? ((item, index) => String(index)), stickySectionHeadersEnabled: true, onViewableItemsChanged: handleViewableItemsChanged, viewabilityConfig: { itemVisiblePercentThreshold: 10 }, ListEmptyComponent: renderEmpty ?? _jsx(Text, { style: [styles.empty, { color: t.colorTextTertiary }], children: "\u6682\u65E0\u6570\u636E" }), ListFooterComponent: renderFooter, getItemLayout: undefined, onScrollToIndexFailed: () => {
-                            // 分组高度未测量完成时定位可能失败，兜底到顶部分组
-                            listRef.current?.scrollToLocation({ sectionIndex: 0, itemIndex: 0, viewPosition: 0 });
-                        } }), renderFooter?.()] }), showNav && hasData && (_jsx(View, { style: [styles.nav, { backgroundColor: t.colorBgContainerDisabled }], onStartShouldSetResponder: () => true, onMoveShouldSetResponder: () => true, onResponderGrant: handleNavTouch, onResponderMove: handleNavTouch, children: sections.map((section, i) => (_jsx(View, { onLayout: e => {
-                        // 记录每个标签的"区间下界"，命中判断用
-                        navYRef.current[i] = e.nativeEvent.layout.y + e.nativeEvent.layout.height / 2;
-                    }, style: [styles.navItem, activeIndex === i && styles.navItemActive], children: _jsx(Text, { style: [
-                            styles.navText,
-                            { color: t.colorTextSecondary },
-                            activeIndex === i && { color: t.colorTextLightSolid },
-                        ], allowFontScaling: false, children: section.navLabel ?? section.title.slice(0, 1) }) }, section.title + i))) }))] }));
-}
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        overflow: 'hidden',
-        position: 'relative',
-    },
-    listWrap: {
-        flex: 1,
-    },
-    sectionHeader: {
-        paddingHorizontal: 16,
-        paddingVertical: 6,
-    },
-    sectionTitle: {
-        fontSize: 13,
-    },
-    item: {
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        borderBottomWidth: StyleSheet.hairlineWidth,
-    },
-    itemText: {
-        fontSize: 15,
-    },
-    empty: {
-        textAlign: 'center',
-        paddingVertical: 40,
-        fontSize: 14,
-    },
-    nav: {
-        position: 'absolute',
-        right: 4,
-        top: '20%',
-        borderRadius: 12,
-        paddingHorizontal: 5,
-        paddingVertical: 6,
-        alignItems: 'center',
-    },
-    navItem: {
-        paddingVertical: 2,
-        paddingHorizontal: 3,
-        borderRadius: 9,
-        minHeight: 18,
-        justifyContent: 'center',
-    },
-    navItemActive: {
-        backgroundColor: '#2080F0',
-    },
-    navText: {
-        fontSize: 11,
-        lineHeight: 14,
-        textAlign: 'center',
-    },
-});
-export default XElevator;