react-native-x-components 0.1.0 → 0.2.1

package/dist/index.js

@@ -90,7 +90,7 @@ export { useXLocale, setXLocale, getXLocale, xT, xMonthTitle, X_WEEKDAYS } from
 // ---------------------------------------------------------------------------
 export { XCarousel } from './XCarousel';
 export { XTabs, XTabPane } from './XTabs';
-export { XElevator } from './XElevator';
+// XElevator 已废弃（实现质量不达标，代码保留在 src/_deprecated/），不再导出/发布
 // ---------------------------------------------------------------------------
 // 下拉菜单
 // ---------------------------------------------------------------------------
@@ -125,3 +125,12 @@ export { XSignatureSkia } from './XSignature/XSignatureSkia';
 // 上传（适配器模式：普通 multipart + MinIO 预签名直传）
 // ---------------------------------------------------------------------------
 export * from './XUpload';
+// ---------------------------------------------------------------------------
+// 主题色 + 全局主题控件
+// ---------------------------------------------------------------------------
+export { ThemeControls } from './XTheme/ThemeControls';
+export { useXBrandStore, setXBrand, setXBrandByName, X_BRAND_PRESETS } from './XTheme/BrandColor';
+// ---------------------------------------------------------------------------
+// 视频预览
+// ---------------------------------------------------------------------------
+export { XVideoPreview } from './XVideoPreview';

package/dist/theme.d.ts

@@ -150,14 +150,6 @@ export declare function setXThemeMode(mode: XThemeMode): void;
 export declare function getXThemeMode(): XThemeMode;
 /** 订阅当前模式（React 组件里用） */
 export declare function useXThemeMode(): XThemeMode;
-/**
- * 【核心 Hook】当前模式下的完整 token 集。
- *
- * - 返回值是模块级常量对象（lightTokens / darkTokens），
- *   引用稳定、不会触发无谓重渲染；模式切换时组件自然重渲染取到新对象；
- * - 解析规则：mode==='system' 时跟随 useColorScheme()，
- *   否则用强制值（未挂 Provider 也能工作，状态全局单例）。
- */
 export declare function useXTheme(): XTheme;
 /** 当前实际生效的明暗方案（isDark 便捷判断用） */
 export declare function useXThemeScheme(): XThemeScheme;

package/dist/theme.js

@@ -95,7 +95,7 @@ export const darkTokens = {
     colorTextQuaternary: 'rgba(255, 255, 255, 0.25)',
     colorTextLightSolid: '#FFFFFF',
     colorBorder: 'rgba(255, 255, 255, 0.22)',
-    colorSplit: 'rgba(255, 255, 255, 0.08)',
+    colorSplit: 'rgba(255, 255, 255, 0.15)',
     colorProgressTrack: 'rgba(255, 255, 255, 0.12)',
     colorBgContainer: '#212225',
     colorBgLayout: '#000000',
@@ -142,16 +142,32 @@ export function useXThemeMode() {
 /**
  * 【核心 Hook】当前模式下的完整 token 集。
  *
- * - 返回值是模块级常量对象（lightTokens / darkTokens），
- *   引用稳定、不会触发无谓重渲染；模式切换时组件自然重渲染取到新对象；
- * - 解析规则：mode==='system' 时跟随 useColorScheme()，
- *   否则用强制值（未挂 Provider 也能工作，状态全局单例）。
+ * - 返回值按 (scheme × 品牌色) 缓存，**引用稳定**：同组合永远返回同一对象，
+ *   避免每次渲染新对象导致订阅组件级联重渲染（曾引发日历连点卡顿）；
+ * - mode==='system' 时跟随 useColorScheme()，否则用强制值；
+ * - 注入运行时品牌色（zustand XBrand）覆盖 colorPrimary 等键。
  */
+import { useXBrandStore } from './XTheme/BrandColor';
+const themeCache = new Map();
 export function useXTheme() {
     const mode = useXThemeModeStore(s => s.mode);
     const systemScheme = useColorScheme();
     const scheme = mode === 'system' ? (systemScheme === 'dark' ? 'dark' : 'light') : mode;
-    return scheme === 'dark' ? darkTokens : lightTokens;
+    const brand = useXBrandStore(s => s.brand);
+    const key = `${scheme}:${brand.name}`;
+    let cached = themeCache.get(key);
+    if (!cached) {
+        const base = scheme === 'dark' ? darkTokens : lightTokens;
+        cached = {
+            ...base,
+            colorPrimary: scheme === 'dark' ? brand.primaryDark : brand.primary,
+            colorPrimaryActive: scheme === 'dark' ? brand.primaryDark : brand.primary,
+            colorPrimaryBg: brand.primaryBg,
+            colorPrimaryDisabled: scheme === 'dark' ? 'rgba(255,255,255,0.18)' : 'rgba(32,128,240,0.28)',
+        };
+        themeCache.set(key, cached);
+    }
+    return cached;
 }
 /** 当前实际生效的明暗方案（isDark 便捷判断用） */
 export function useXThemeScheme() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-x-components",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Ant Design 风格的 React Native (Expo) 组件库：表单/弹层(TopView)/日历/Skia逐字签名/上传适配器(MinIO预签名)/轻量图表，内置暗黑模式与中英双语。",
   "main": "dist/index.js",
   "react-native": "dist/index.js",
@@ -8,7 +8,9 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "AGENTS.md",
+    "wechat-qrcode.png"
   ],
   "sideEffects": false,
   "keywords": [
@@ -31,16 +33,22 @@
     "popup"
   ],
   "license": "MIT",
+  "author": "KevinMao (maoyuxiang)",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/maoyuxiang/rn-x-components.git"
+    "url": "git+https://github.com/TimSpan/rn-x-components.git"
+  },
+  "homepage": "https://github.com/TimSpan/rn-x-components#readme",
+  "bugs": {
+    "url": "https://github.com/TimSpan/rn-x-components/issues"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-native": ">=0.74.0",
     "react-native-reanimated": ">=3.17.0",
     "react-native-safe-area-context": ">=4.0.0",
-    "react-native-svg": ">=14.0.0"
+    "react-native-svg": ">=14.0.0",
+    "react-native-gesture-handler": ">=2.0.0"
   },
   "peerDependenciesMeta": {
     "@shopify/react-native-skia": {
@@ -61,9 +69,6 @@
     "expo-image-picker": {
       "optional": true
     },
-    "react-native-gesture-handler": {
-      "optional": true
-    },
     "react-native-linear-gradient": {
       "optional": true
     },

package/dist/XElevator/index.d.ts

@@ -1,52 +0,0 @@
-/**
- * ============================================================================
- * 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 React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-export interface XElevatorSection<T = {
-    name: string;
-}> {
-    /** 分组标题（吸顶显示） */
-    title: string;
-    /** 右侧导航条短标签，默认取 title 首字符 */
-    navLabel?: string;
-    /** 数据 */
-    data: T[];
-}
-export interface XElevatorProps<T> {
-    sections: XElevatorSection<T>[];
-    /** 自定义行渲染，默认显示 item.name */
-    renderItem?: (item: T, section: XElevatorSection<T>, index: number) => React.ReactNode;
-    keyExtractor?: (item: T, index: number) => string;
-    onItemClick?: (item: T, section: XElevatorSection<T>) => void;
-    /** 是否显示右侧导航条，默认 true */
-    showNav?: boolean;
-    /** 列表顶部（搜索框等） */
-    renderTop?: () => React.ReactNode;
-    /** 列表底部 */
-    renderFooter?: () => React.ReactNode;
-    /** 空态 */
-    renderEmpty?: () => React.ReactNode;
-    style?: StyleProp<ViewStyle>;
-}
-export declare function XElevator<T = {
-    name: string;
-}>({ sections, renderItem, keyExtractor, onItemClick, showNav, renderTop, renderFooter, renderEmpty, style, }: XElevatorProps<T>): React.JSX.Element;
-export default XElevator;

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;