react-native-debug-toolkit 3.3.8 → 3.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -26
- package/README.zh-CN.md +52 -38
- package/android/src/main/java/com/reactnativedebugtoolkit/DebugToolkitNativeLogsModule.java +146 -0
- package/android/src/main/java/com/reactnativedebugtoolkit/ReactNativeDebugToolkitPackage.java +5 -3
- package/ios/DebugToolkitNativeLogs.mm +92 -0
- package/lib/commonjs/constants/logLevels.js +19 -0
- package/lib/commonjs/constants/logLevels.js.map +1 -0
- package/lib/commonjs/core/initialize.js +32 -19
- package/lib/commonjs/core/initialize.js.map +1 -1
- package/lib/commonjs/features/console/ConsoleLogTab.js +4 -15
- package/lib/commonjs/features/console/ConsoleLogTab.js.map +1 -1
- package/lib/commonjs/features/console/index.js +15 -8
- package/lib/commonjs/features/console/index.js.map +1 -1
- package/lib/commonjs/features/nativeLogs/NativeLogTab.js +156 -0
- package/lib/commonjs/features/nativeLogs/NativeLogTab.js.map +1 -0
- package/lib/commonjs/features/nativeLogs/index.js +97 -0
- package/lib/commonjs/features/nativeLogs/index.js.map +1 -0
- package/lib/commonjs/features/nativeLogs/nativeLogsBridge.js +71 -0
- package/lib/commonjs/features/nativeLogs/nativeLogsBridge.js.map +1 -0
- package/lib/commonjs/features/network/NetworkLogTab.js +90 -95
- package/lib/commonjs/features/network/NetworkLogTab.js.map +1 -1
- package/lib/commonjs/features/network/index.js +7 -4
- package/lib/commonjs/features/network/index.js.map +1 -1
- package/lib/commonjs/features/sessionHistory/SessionHistoryTab.js +1046 -0
- package/lib/commonjs/features/sessionHistory/SessionHistoryTab.js.map +1 -0
- package/lib/commonjs/features/sessionHistory/index.js +104 -0
- package/lib/commonjs/features/sessionHistory/index.js.map +1 -0
- package/lib/commonjs/features/track/index.js +4 -3
- package/lib/commonjs/features/track/index.js.map +1 -1
- package/lib/commonjs/index.js +27 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/ui/DebugView.js +2 -0
- package/lib/commonjs/ui/DebugView.js.map +1 -1
- package/lib/commonjs/ui/panel/DebugPanel.js +67 -34
- package/lib/commonjs/ui/panel/DebugPanel.js.map +1 -1
- package/lib/commonjs/ui/panel/FeatureIntroCard.js +151 -0
- package/lib/commonjs/ui/panel/FeatureIntroCard.js.map +1 -0
- package/lib/commonjs/ui/panel/FeatureRail.js +163 -0
- package/lib/commonjs/ui/panel/FeatureRail.js.map +1 -0
- package/lib/commonjs/ui/panel/FloatPanelView.js +119 -22
- package/lib/commonjs/ui/panel/FloatPanelView.js.map +1 -1
- package/lib/commonjs/ui/panel/buildFeatureSummary.js +207 -0
- package/lib/commonjs/ui/panel/buildFeatureSummary.js.map +1 -0
- package/lib/commonjs/ui/panel/filterFeatureSnapshot.js +43 -0
- package/lib/commonjs/ui/panel/filterFeatureSnapshot.js.map +1 -0
- package/lib/commonjs/ui/theme/colors.js +6 -0
- package/lib/commonjs/ui/theme/colors.js.map +1 -1
- package/lib/commonjs/utils/DaemonClient.js +30 -8
- package/lib/commonjs/utils/DaemonClient.js.map +1 -1
- package/lib/commonjs/utils/SessionManager.js +132 -0
- package/lib/commonjs/utils/SessionManager.js.map +1 -0
- package/lib/commonjs/utils/StorageAdapter.js +104 -0
- package/lib/commonjs/utils/StorageAdapter.js.map +1 -0
- package/lib/commonjs/utils/createChannelFeature.js +22 -5
- package/lib/commonjs/utils/createChannelFeature.js.map +1 -1
- package/lib/commonjs/utils/createPersistedObservableStore.js +14 -8
- package/lib/commonjs/utils/createPersistedObservableStore.js.map +1 -1
- package/lib/commonjs/utils/debugPreferences.js +28 -5
- package/lib/commonjs/utils/debugPreferences.js.map +1 -1
- package/lib/commonjs/utils/deviceReport.js +5 -1
- package/lib/commonjs/utils/deviceReport.js.map +1 -1
- package/lib/commonjs/utils/logRuntime.js +32 -0
- package/lib/commonjs/utils/logRuntime.js.map +1 -0
- package/lib/module/constants/logLevels.js +15 -0
- package/lib/module/constants/logLevels.js.map +1 -0
- package/lib/module/core/initialize.js +32 -19
- package/lib/module/core/initialize.js.map +1 -1
- package/lib/module/features/console/ConsoleLogTab.js +1 -12
- package/lib/module/features/console/ConsoleLogTab.js.map +1 -1
- package/lib/module/features/console/index.js +15 -8
- package/lib/module/features/console/index.js.map +1 -1
- package/lib/module/features/nativeLogs/NativeLogTab.js +151 -0
- package/lib/module/features/nativeLogs/NativeLogTab.js.map +1 -0
- package/lib/module/features/nativeLogs/index.js +91 -0
- package/lib/module/features/nativeLogs/index.js.map +1 -0
- package/lib/module/features/nativeLogs/nativeLogsBridge.js +63 -0
- package/lib/module/features/nativeLogs/nativeLogsBridge.js.map +1 -0
- package/lib/module/features/network/NetworkLogTab.js +90 -95
- package/lib/module/features/network/NetworkLogTab.js.map +1 -1
- package/lib/module/features/network/index.js +7 -4
- package/lib/module/features/network/index.js.map +1 -1
- package/lib/module/features/sessionHistory/SessionHistoryTab.js +1041 -0
- package/lib/module/features/sessionHistory/SessionHistoryTab.js.map +1 -0
- package/lib/module/features/sessionHistory/index.js +100 -0
- package/lib/module/features/sessionHistory/index.js.map +1 -0
- package/lib/module/features/track/index.js +4 -3
- package/lib/module/features/track/index.js.map +1 -1
- package/lib/module/index.js +3 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/ui/DebugView.js +2 -0
- package/lib/module/ui/DebugView.js.map +1 -1
- package/lib/module/ui/panel/DebugPanel.js +67 -34
- package/lib/module/ui/panel/DebugPanel.js.map +1 -1
- package/lib/module/ui/panel/FeatureIntroCard.js +146 -0
- package/lib/module/ui/panel/FeatureIntroCard.js.map +1 -0
- package/lib/module/ui/panel/FeatureRail.js +158 -0
- package/lib/module/ui/panel/FeatureRail.js.map +1 -0
- package/lib/module/ui/panel/FloatPanelView.js +119 -22
- package/lib/module/ui/panel/FloatPanelView.js.map +1 -1
- package/lib/module/ui/panel/buildFeatureSummary.js +203 -0
- package/lib/module/ui/panel/buildFeatureSummary.js.map +1 -0
- package/lib/module/ui/panel/filterFeatureSnapshot.js +39 -0
- package/lib/module/ui/panel/filterFeatureSnapshot.js.map +1 -0
- package/lib/module/ui/theme/colors.js +6 -0
- package/lib/module/ui/theme/colors.js.map +1 -1
- package/lib/module/utils/DaemonClient.js +30 -8
- package/lib/module/utils/DaemonClient.js.map +1 -1
- package/lib/module/utils/SessionManager.js +127 -0
- package/lib/module/utils/SessionManager.js.map +1 -0
- package/lib/module/utils/StorageAdapter.js +96 -0
- package/lib/module/utils/StorageAdapter.js.map +1 -0
- package/lib/module/utils/createChannelFeature.js +22 -5
- package/lib/module/utils/createChannelFeature.js.map +1 -1
- package/lib/module/utils/createPersistedObservableStore.js +14 -8
- package/lib/module/utils/createPersistedObservableStore.js.map +1 -1
- package/lib/module/utils/debugPreferences.js +27 -5
- package/lib/module/utils/debugPreferences.js.map +1 -1
- package/lib/module/utils/deviceReport.js +4 -1
- package/lib/module/utils/deviceReport.js.map +1 -1
- package/lib/module/utils/logRuntime.js +26 -0
- package/lib/module/utils/logRuntime.js.map +1 -0
- package/lib/typescript/src/constants/logLevels.d.ts +3 -0
- package/lib/typescript/src/constants/logLevels.d.ts.map +1 -0
- package/lib/typescript/src/core/initialize.d.ts +6 -0
- package/lib/typescript/src/core/initialize.d.ts.map +1 -1
- package/lib/typescript/src/features/console/ConsoleLogTab.d.ts.map +1 -1
- package/lib/typescript/src/features/console/index.d.ts +2 -1
- package/lib/typescript/src/features/console/index.d.ts.map +1 -1
- package/lib/typescript/src/features/nativeLogs/NativeLogTab.d.ts +4 -0
- package/lib/typescript/src/features/nativeLogs/NativeLogTab.d.ts.map +1 -0
- package/lib/typescript/src/features/nativeLogs/index.d.ts +12 -0
- package/lib/typescript/src/features/nativeLogs/index.d.ts.map +1 -0
- package/lib/typescript/src/features/nativeLogs/nativeLogsBridge.d.ts +11 -0
- package/lib/typescript/src/features/nativeLogs/nativeLogsBridge.d.ts.map +1 -0
- package/lib/typescript/src/features/network/NetworkLogTab.d.ts.map +1 -1
- package/lib/typescript/src/features/network/index.d.ts +2 -1
- package/lib/typescript/src/features/network/index.d.ts.map +1 -1
- package/lib/typescript/src/features/sessionHistory/SessionHistoryTab.d.ts +20 -0
- package/lib/typescript/src/features/sessionHistory/SessionHistoryTab.d.ts.map +1 -0
- package/lib/typescript/src/features/sessionHistory/index.d.ts +4 -0
- package/lib/typescript/src/features/sessionHistory/index.d.ts.map +1 -0
- package/lib/typescript/src/features/track/index.d.ts +2 -1
- package/lib/typescript/src/features/track/index.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +7 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/types/feature.d.ts +1 -1
- package/lib/typescript/src/types/feature.d.ts.map +1 -1
- package/lib/typescript/src/types/index.d.ts +3 -1
- package/lib/typescript/src/types/index.d.ts.map +1 -1
- package/lib/typescript/src/types/logs.d.ts +15 -0
- package/lib/typescript/src/types/logs.d.ts.map +1 -1
- package/lib/typescript/src/ui/DebugView.d.ts.map +1 -1
- package/lib/typescript/src/ui/panel/DebugPanel.d.ts +3 -1
- package/lib/typescript/src/ui/panel/DebugPanel.d.ts.map +1 -1
- package/lib/typescript/src/ui/panel/FeatureIntroCard.d.ts +14 -0
- package/lib/typescript/src/ui/panel/FeatureIntroCard.d.ts.map +1 -0
- package/lib/typescript/src/ui/panel/FeatureRail.d.ts +16 -0
- package/lib/typescript/src/ui/panel/FeatureRail.d.ts.map +1 -0
- package/lib/typescript/src/ui/panel/FloatPanelView.d.ts.map +1 -1
- package/lib/typescript/src/ui/panel/buildFeatureSummary.d.ts +13 -0
- package/lib/typescript/src/ui/panel/buildFeatureSummary.d.ts.map +1 -0
- package/lib/typescript/src/ui/panel/filterFeatureSnapshot.d.ts +3 -0
- package/lib/typescript/src/ui/panel/filterFeatureSnapshot.d.ts.map +1 -0
- package/lib/typescript/src/ui/theme/colors.d.ts +5 -0
- package/lib/typescript/src/ui/theme/colors.d.ts.map +1 -1
- package/lib/typescript/src/utils/DaemonClient.d.ts +7 -1
- package/lib/typescript/src/utils/DaemonClient.d.ts.map +1 -1
- package/lib/typescript/src/utils/SessionManager.d.ts +30 -0
- package/lib/typescript/src/utils/SessionManager.d.ts.map +1 -0
- package/lib/typescript/src/utils/StorageAdapter.d.ts +38 -0
- package/lib/typescript/src/utils/StorageAdapter.d.ts.map +1 -0
- package/lib/typescript/src/utils/createChannelFeature.d.ts +2 -0
- package/lib/typescript/src/utils/createChannelFeature.d.ts.map +1 -1
- package/lib/typescript/src/utils/createPersistedObservableStore.d.ts +4 -1
- package/lib/typescript/src/utils/createPersistedObservableStore.d.ts.map +1 -1
- package/lib/typescript/src/utils/debugPreferences.d.ts +1 -3
- package/lib/typescript/src/utils/debugPreferences.d.ts.map +1 -1
- package/lib/typescript/src/utils/deviceReport.d.ts +1 -0
- package/lib/typescript/src/utils/deviceReport.d.ts.map +1 -1
- package/lib/typescript/src/utils/logRuntime.d.ts +13 -0
- package/lib/typescript/src/utils/logRuntime.d.ts.map +1 -0
- package/node/daemon/src/console/console.html +18 -0
- package/node/mcp/src/logs.js +1 -1
- package/package.json +9 -1
- package/src/constants/logLevels.ts +13 -0
- package/src/core/initialize.ts +54 -25
- package/src/features/console/ConsoleLogTab.tsx +1 -14
- package/src/features/console/index.ts +18 -8
- package/src/features/nativeLogs/NativeLogTab.tsx +66 -0
- package/src/features/nativeLogs/index.ts +94 -0
- package/src/features/nativeLogs/nativeLogsBridge.ts +51 -0
- package/src/features/network/NetworkLogTab.tsx +60 -71
- package/src/features/network/index.ts +12 -3
- package/src/features/sessionHistory/SessionHistoryTab.tsx +693 -0
- package/src/features/sessionHistory/index.ts +102 -0
- package/src/features/track/index.ts +10 -3
- package/src/index.ts +16 -0
- package/src/types/feature.ts +3 -1
- package/src/types/index.ts +13 -0
- package/src/types/logs.ts +17 -0
- package/src/ui/DebugView.tsx +2 -0
- package/src/ui/panel/DebugPanel.tsx +60 -30
- package/src/ui/panel/FeatureIntroCard.tsx +147 -0
- package/src/ui/panel/FeatureRail.tsx +165 -0
- package/src/ui/panel/FloatPanelView.tsx +123 -15
- package/src/ui/panel/buildFeatureSummary.ts +288 -0
- package/src/ui/panel/filterFeatureSnapshot.ts +51 -0
- package/src/ui/theme/colors.ts +7 -0
- package/src/utils/DaemonClient.ts +33 -5
- package/src/utils/SessionManager.ts +174 -0
- package/src/utils/StorageAdapter.ts +135 -0
- package/src/utils/createChannelFeature.ts +28 -6
- package/src/utils/createPersistedObservableStore.ts +18 -10
- package/src/utils/debugPreferences.ts +38 -7
- package/src/utils/deviceReport.ts +5 -1
- package/src/utils/logRuntime.ts +39 -0
- package/lib/commonjs/ui/panel/FeatureTabBar.js +0 -182
- package/lib/commonjs/ui/panel/FeatureTabBar.js.map +0 -1
- package/lib/module/ui/panel/FeatureTabBar.js +0 -177
- package/lib/module/ui/panel/FeatureTabBar.js.map +0 -1
- package/lib/typescript/src/ui/panel/FeatureTabBar.d.ts +0 -13
- package/lib/typescript/src/ui/panel/FeatureTabBar.d.ts.map +0 -1
- package/src/ui/panel/FeatureTabBar.tsx +0 -204
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { SessionManager, type SessionManagerOptions } from './SessionManager';
|
|
2
|
+
import {
|
|
3
|
+
createDefaultLogStorage,
|
|
4
|
+
type StorageAdapter,
|
|
5
|
+
} from './StorageAdapter';
|
|
6
|
+
|
|
7
|
+
export interface LogRuntimeContext {
|
|
8
|
+
logStorage: StorageAdapter;
|
|
9
|
+
sessionManager: SessionManager;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export interface LogRuntimeOptions extends SessionManagerOptions {
|
|
13
|
+
logStorage?: StorageAdapter;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
let defaultRuntime: LogRuntimeContext | null = null;
|
|
17
|
+
|
|
18
|
+
export function createLogRuntime(options: LogRuntimeOptions = {}): LogRuntimeContext {
|
|
19
|
+
const logStorage = options.logStorage ?? createDefaultLogStorage();
|
|
20
|
+
return {
|
|
21
|
+
logStorage,
|
|
22
|
+
sessionManager: new SessionManager(logStorage, {
|
|
23
|
+
maxSessions: options.maxSessions,
|
|
24
|
+
featureKeys: options.featureKeys,
|
|
25
|
+
}),
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export function setDefaultLogRuntime(runtime: LogRuntimeContext | null): void {
|
|
30
|
+
defaultRuntime = runtime;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export function getDefaultLogRuntime(): LogRuntimeContext {
|
|
34
|
+
if (!defaultRuntime) {
|
|
35
|
+
defaultRuntime = createLogRuntime();
|
|
36
|
+
defaultRuntime.sessionManager.initialize().catch(() => {});
|
|
37
|
+
}
|
|
38
|
+
return defaultRuntime;
|
|
39
|
+
}
|
|
@@ -1,182 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.FeatureTabBar = FeatureTabBar;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _reactNative = require("react-native");
|
|
9
|
-
var _colors = require("../theme/colors");
|
|
10
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
-
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); }
|
|
12
|
-
function FeatureTabBar({
|
|
13
|
-
tabs,
|
|
14
|
-
activeIndex,
|
|
15
|
-
onSelectTab
|
|
16
|
-
}) {
|
|
17
|
-
const [underlineWidth, setUnderlineWidth] = (0, _react.useState)(0);
|
|
18
|
-
const underlineTranslateX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
19
|
-
const tabScrollViewRef = (0, _react.useRef)(null);
|
|
20
|
-
const tabLayouts = (0, _react.useRef)([]);
|
|
21
|
-
const tabScrollOffset = (0, _react.useRef)(0);
|
|
22
|
-
const tabViewportWidth = (0, _react.useRef)(0);
|
|
23
|
-
const tabContentWidth = (0, _react.useRef)(0);
|
|
24
|
-
const underlineInit = (0, _react.useRef)(false);
|
|
25
|
-
const isSwitching = (0, _react.useRef)(false);
|
|
26
|
-
const maxTabScroll = (0, _react.useCallback)(() => Math.max(0, tabContentWidth.current - tabViewportWidth.current), []);
|
|
27
|
-
const clampScroll = (0, _react.useCallback)(offset => Math.min(Math.max(0, offset), maxTabScroll()), [maxTabScroll]);
|
|
28
|
-
const getTabScrollTarget = (0, _react.useCallback)(index => {
|
|
29
|
-
const layout = tabLayouts.current[index];
|
|
30
|
-
return layout ? clampScroll(layout.x - 60) : clampScroll(tabScrollOffset.current);
|
|
31
|
-
}, [clampScroll]);
|
|
32
|
-
const animateUnderline = (0, _react.useCallback)((index, scrollOffset) => {
|
|
33
|
-
const layout = tabLayouts.current[index];
|
|
34
|
-
if (!layout) return;
|
|
35
|
-
const offsetX = clampScroll(scrollOffset ?? tabScrollOffset.current);
|
|
36
|
-
setUnderlineWidth(layout.width);
|
|
37
|
-
_reactNative.Animated.spring(underlineTranslateX, {
|
|
38
|
-
toValue: layout.x - offsetX,
|
|
39
|
-
friction: 7,
|
|
40
|
-
tension: 50,
|
|
41
|
-
useNativeDriver: true
|
|
42
|
-
}).start();
|
|
43
|
-
}, [clampScroll, underlineTranslateX]);
|
|
44
|
-
const syncUnderlineToActiveTab = (0, _react.useCallback)(() => {
|
|
45
|
-
const layout = tabLayouts.current[activeIndex];
|
|
46
|
-
if (!layout) return;
|
|
47
|
-
const clamped = clampScroll(tabScrollOffset.current);
|
|
48
|
-
if (clamped !== tabScrollOffset.current) tabScrollOffset.current = clamped;
|
|
49
|
-
underlineTranslateX.setValue(layout.x - clamped);
|
|
50
|
-
setUnderlineWidth(layout.width);
|
|
51
|
-
}, [activeIndex, clampScroll, underlineTranslateX]);
|
|
52
|
-
const tryInit = (0, _react.useCallback)(() => {
|
|
53
|
-
if (underlineInit.current || tabViewportWidth.current <= 0 || tabContentWidth.current <= 0) return;
|
|
54
|
-
const layout = tabLayouts.current[activeIndex];
|
|
55
|
-
if (!layout) return;
|
|
56
|
-
const target = getTabScrollTarget(activeIndex);
|
|
57
|
-
tabScrollOffset.current = target;
|
|
58
|
-
tabScrollViewRef.current?.scrollTo({
|
|
59
|
-
x: target,
|
|
60
|
-
animated: false
|
|
61
|
-
});
|
|
62
|
-
underlineTranslateX.setValue(layout.x - target);
|
|
63
|
-
setUnderlineWidth(layout.width);
|
|
64
|
-
underlineInit.current = true;
|
|
65
|
-
}, [activeIndex, getTabScrollTarget, underlineTranslateX]);
|
|
66
|
-
const handleSelectTab = (0, _react.useCallback)(index => {
|
|
67
|
-
if (isSwitching.current || index === activeIndex) return;
|
|
68
|
-
isSwitching.current = true;
|
|
69
|
-
const layout = tabLayouts.current[index];
|
|
70
|
-
if (layout) {
|
|
71
|
-
const target = getTabScrollTarget(index);
|
|
72
|
-
tabScrollOffset.current = target;
|
|
73
|
-
tabScrollViewRef.current?.scrollTo({
|
|
74
|
-
x: target,
|
|
75
|
-
animated: true
|
|
76
|
-
});
|
|
77
|
-
animateUnderline(index, target);
|
|
78
|
-
}
|
|
79
|
-
onSelectTab(index);
|
|
80
|
-
setTimeout(() => {
|
|
81
|
-
isSwitching.current = false;
|
|
82
|
-
}, 350);
|
|
83
|
-
}, [activeIndex, animateUnderline, getTabScrollTarget, onSelectTab]);
|
|
84
|
-
|
|
85
|
-
// React to external activeIndex changes (e.g. swipe-to-switch)
|
|
86
|
-
(0, _react.useEffect)(() => {
|
|
87
|
-
if (!underlineInit.current) return;
|
|
88
|
-
const layout = tabLayouts.current[activeIndex];
|
|
89
|
-
if (!layout) return;
|
|
90
|
-
const target = getTabScrollTarget(activeIndex);
|
|
91
|
-
tabScrollOffset.current = target;
|
|
92
|
-
tabScrollViewRef.current?.scrollTo({
|
|
93
|
-
x: target,
|
|
94
|
-
animated: true
|
|
95
|
-
});
|
|
96
|
-
animateUnderline(activeIndex, target);
|
|
97
|
-
}, [activeIndex, animateUnderline, getTabScrollTarget]);
|
|
98
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
99
|
-
style: styles.container,
|
|
100
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
|
|
101
|
-
ref: tabScrollViewRef,
|
|
102
|
-
horizontal: true,
|
|
103
|
-
showsHorizontalScrollIndicator: false,
|
|
104
|
-
contentContainerStyle: styles.scrollContent,
|
|
105
|
-
onLayout: e => {
|
|
106
|
-
tabViewportWidth.current = e.nativeEvent.layout.width;
|
|
107
|
-
tryInit();
|
|
108
|
-
},
|
|
109
|
-
onContentSizeChange: width => {
|
|
110
|
-
tabContentWidth.current = width;
|
|
111
|
-
tryInit();
|
|
112
|
-
},
|
|
113
|
-
onScroll: e => {
|
|
114
|
-
tabScrollOffset.current = clampScroll(e.nativeEvent.contentOffset.x);
|
|
115
|
-
if (!isSwitching.current) syncUnderlineToActiveTab();
|
|
116
|
-
},
|
|
117
|
-
scrollEventThrottle: 16,
|
|
118
|
-
children: tabs.map((tab, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
119
|
-
style: styles.tab,
|
|
120
|
-
onPress: () => handleSelectTab(index),
|
|
121
|
-
activeOpacity: 0.7,
|
|
122
|
-
onLayout: e => {
|
|
123
|
-
const {
|
|
124
|
-
x,
|
|
125
|
-
width
|
|
126
|
-
} = e.nativeEvent.layout;
|
|
127
|
-
tabLayouts.current[index] = {
|
|
128
|
-
x,
|
|
129
|
-
width
|
|
130
|
-
};
|
|
131
|
-
if (index === activeIndex) tryInit();
|
|
132
|
-
},
|
|
133
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
134
|
-
style: [styles.tabText, activeIndex === index && styles.activeTabText],
|
|
135
|
-
numberOfLines: 1,
|
|
136
|
-
children: tab.label
|
|
137
|
-
})
|
|
138
|
-
}, tab.id))
|
|
139
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
|
|
140
|
-
style: [styles.underline, {
|
|
141
|
-
width: underlineWidth,
|
|
142
|
-
transform: [{
|
|
143
|
-
translateX: underlineTranslateX
|
|
144
|
-
}]
|
|
145
|
-
}]
|
|
146
|
-
})]
|
|
147
|
-
});
|
|
148
|
-
}
|
|
149
|
-
const styles = _reactNative.StyleSheet.create({
|
|
150
|
-
container: {
|
|
151
|
-
backgroundColor: _colors.Colors.surface,
|
|
152
|
-
borderBottomWidth: _reactNative.StyleSheet.hairlineWidth,
|
|
153
|
-
borderBottomColor: _colors.Colors.border
|
|
154
|
-
},
|
|
155
|
-
scrollContent: {
|
|
156
|
-
paddingHorizontal: 20,
|
|
157
|
-
flexDirection: 'row'
|
|
158
|
-
},
|
|
159
|
-
tab: {
|
|
160
|
-
paddingVertical: 10,
|
|
161
|
-
paddingHorizontal: 14,
|
|
162
|
-
marginRight: 8
|
|
163
|
-
},
|
|
164
|
-
tabText: {
|
|
165
|
-
fontSize: 14,
|
|
166
|
-
fontWeight: '500',
|
|
167
|
-
color: _colors.Colors.textLight
|
|
168
|
-
},
|
|
169
|
-
activeTabText: {
|
|
170
|
-
color: _colors.Colors.primary,
|
|
171
|
-
fontWeight: '600'
|
|
172
|
-
},
|
|
173
|
-
underline: {
|
|
174
|
-
position: 'absolute',
|
|
175
|
-
bottom: 0,
|
|
176
|
-
left: 0,
|
|
177
|
-
height: 2.5,
|
|
178
|
-
borderRadius: 1.25,
|
|
179
|
-
backgroundColor: _colors.Colors.primary
|
|
180
|
-
}
|
|
181
|
-
});
|
|
182
|
-
//# sourceMappingURL=FeatureTabBar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_colors","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FeatureTabBar","tabs","activeIndex","onSelectTab","underlineWidth","setUnderlineWidth","useState","underlineTranslateX","useRef","Animated","Value","current","tabScrollViewRef","tabLayouts","tabScrollOffset","tabViewportWidth","tabContentWidth","underlineInit","isSwitching","maxTabScroll","useCallback","Math","max","clampScroll","offset","min","getTabScrollTarget","index","layout","x","animateUnderline","scrollOffset","offsetX","width","spring","toValue","friction","tension","useNativeDriver","start","syncUnderlineToActiveTab","clamped","setValue","tryInit","target","scrollTo","animated","handleSelectTab","setTimeout","useEffect","jsxs","View","style","styles","container","children","jsx","ScrollView","ref","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","scrollContent","onLayout","nativeEvent","onContentSizeChange","onScroll","contentOffset","scrollEventThrottle","map","tab","TouchableOpacity","onPress","activeOpacity","Text","tabText","activeTabText","numberOfLines","label","id","underline","transform","translateX","StyleSheet","create","backgroundColor","Colors","surface","borderBottomWidth","hairlineWidth","borderBottomColor","border","paddingHorizontal","flexDirection","paddingVertical","marginRight","fontSize","fontWeight","color","textLight","primary","position","bottom","left","height","borderRadius"],"sourceRoot":"../../../../src","sources":["ui/panel/FeatureTabBar.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,177 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
4
|
-
import { View, Text, StyleSheet, Animated, ScrollView, TouchableOpacity } from 'react-native';
|
|
5
|
-
import { Colors } from '../theme/colors';
|
|
6
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
|
-
export function FeatureTabBar({
|
|
8
|
-
tabs,
|
|
9
|
-
activeIndex,
|
|
10
|
-
onSelectTab
|
|
11
|
-
}) {
|
|
12
|
-
const [underlineWidth, setUnderlineWidth] = useState(0);
|
|
13
|
-
const underlineTranslateX = useRef(new Animated.Value(0)).current;
|
|
14
|
-
const tabScrollViewRef = useRef(null);
|
|
15
|
-
const tabLayouts = useRef([]);
|
|
16
|
-
const tabScrollOffset = useRef(0);
|
|
17
|
-
const tabViewportWidth = useRef(0);
|
|
18
|
-
const tabContentWidth = useRef(0);
|
|
19
|
-
const underlineInit = useRef(false);
|
|
20
|
-
const isSwitching = useRef(false);
|
|
21
|
-
const maxTabScroll = useCallback(() => Math.max(0, tabContentWidth.current - tabViewportWidth.current), []);
|
|
22
|
-
const clampScroll = useCallback(offset => Math.min(Math.max(0, offset), maxTabScroll()), [maxTabScroll]);
|
|
23
|
-
const getTabScrollTarget = useCallback(index => {
|
|
24
|
-
const layout = tabLayouts.current[index];
|
|
25
|
-
return layout ? clampScroll(layout.x - 60) : clampScroll(tabScrollOffset.current);
|
|
26
|
-
}, [clampScroll]);
|
|
27
|
-
const animateUnderline = useCallback((index, scrollOffset) => {
|
|
28
|
-
const layout = tabLayouts.current[index];
|
|
29
|
-
if (!layout) return;
|
|
30
|
-
const offsetX = clampScroll(scrollOffset ?? tabScrollOffset.current);
|
|
31
|
-
setUnderlineWidth(layout.width);
|
|
32
|
-
Animated.spring(underlineTranslateX, {
|
|
33
|
-
toValue: layout.x - offsetX,
|
|
34
|
-
friction: 7,
|
|
35
|
-
tension: 50,
|
|
36
|
-
useNativeDriver: true
|
|
37
|
-
}).start();
|
|
38
|
-
}, [clampScroll, underlineTranslateX]);
|
|
39
|
-
const syncUnderlineToActiveTab = useCallback(() => {
|
|
40
|
-
const layout = tabLayouts.current[activeIndex];
|
|
41
|
-
if (!layout) return;
|
|
42
|
-
const clamped = clampScroll(tabScrollOffset.current);
|
|
43
|
-
if (clamped !== tabScrollOffset.current) tabScrollOffset.current = clamped;
|
|
44
|
-
underlineTranslateX.setValue(layout.x - clamped);
|
|
45
|
-
setUnderlineWidth(layout.width);
|
|
46
|
-
}, [activeIndex, clampScroll, underlineTranslateX]);
|
|
47
|
-
const tryInit = useCallback(() => {
|
|
48
|
-
if (underlineInit.current || tabViewportWidth.current <= 0 || tabContentWidth.current <= 0) return;
|
|
49
|
-
const layout = tabLayouts.current[activeIndex];
|
|
50
|
-
if (!layout) return;
|
|
51
|
-
const target = getTabScrollTarget(activeIndex);
|
|
52
|
-
tabScrollOffset.current = target;
|
|
53
|
-
tabScrollViewRef.current?.scrollTo({
|
|
54
|
-
x: target,
|
|
55
|
-
animated: false
|
|
56
|
-
});
|
|
57
|
-
underlineTranslateX.setValue(layout.x - target);
|
|
58
|
-
setUnderlineWidth(layout.width);
|
|
59
|
-
underlineInit.current = true;
|
|
60
|
-
}, [activeIndex, getTabScrollTarget, underlineTranslateX]);
|
|
61
|
-
const handleSelectTab = useCallback(index => {
|
|
62
|
-
if (isSwitching.current || index === activeIndex) return;
|
|
63
|
-
isSwitching.current = true;
|
|
64
|
-
const layout = tabLayouts.current[index];
|
|
65
|
-
if (layout) {
|
|
66
|
-
const target = getTabScrollTarget(index);
|
|
67
|
-
tabScrollOffset.current = target;
|
|
68
|
-
tabScrollViewRef.current?.scrollTo({
|
|
69
|
-
x: target,
|
|
70
|
-
animated: true
|
|
71
|
-
});
|
|
72
|
-
animateUnderline(index, target);
|
|
73
|
-
}
|
|
74
|
-
onSelectTab(index);
|
|
75
|
-
setTimeout(() => {
|
|
76
|
-
isSwitching.current = false;
|
|
77
|
-
}, 350);
|
|
78
|
-
}, [activeIndex, animateUnderline, getTabScrollTarget, onSelectTab]);
|
|
79
|
-
|
|
80
|
-
// React to external activeIndex changes (e.g. swipe-to-switch)
|
|
81
|
-
useEffect(() => {
|
|
82
|
-
if (!underlineInit.current) return;
|
|
83
|
-
const layout = tabLayouts.current[activeIndex];
|
|
84
|
-
if (!layout) return;
|
|
85
|
-
const target = getTabScrollTarget(activeIndex);
|
|
86
|
-
tabScrollOffset.current = target;
|
|
87
|
-
tabScrollViewRef.current?.scrollTo({
|
|
88
|
-
x: target,
|
|
89
|
-
animated: true
|
|
90
|
-
});
|
|
91
|
-
animateUnderline(activeIndex, target);
|
|
92
|
-
}, [activeIndex, animateUnderline, getTabScrollTarget]);
|
|
93
|
-
return /*#__PURE__*/_jsxs(View, {
|
|
94
|
-
style: styles.container,
|
|
95
|
-
children: [/*#__PURE__*/_jsx(ScrollView, {
|
|
96
|
-
ref: tabScrollViewRef,
|
|
97
|
-
horizontal: true,
|
|
98
|
-
showsHorizontalScrollIndicator: false,
|
|
99
|
-
contentContainerStyle: styles.scrollContent,
|
|
100
|
-
onLayout: e => {
|
|
101
|
-
tabViewportWidth.current = e.nativeEvent.layout.width;
|
|
102
|
-
tryInit();
|
|
103
|
-
},
|
|
104
|
-
onContentSizeChange: width => {
|
|
105
|
-
tabContentWidth.current = width;
|
|
106
|
-
tryInit();
|
|
107
|
-
},
|
|
108
|
-
onScroll: e => {
|
|
109
|
-
tabScrollOffset.current = clampScroll(e.nativeEvent.contentOffset.x);
|
|
110
|
-
if (!isSwitching.current) syncUnderlineToActiveTab();
|
|
111
|
-
},
|
|
112
|
-
scrollEventThrottle: 16,
|
|
113
|
-
children: tabs.map((tab, index) => /*#__PURE__*/_jsx(TouchableOpacity, {
|
|
114
|
-
style: styles.tab,
|
|
115
|
-
onPress: () => handleSelectTab(index),
|
|
116
|
-
activeOpacity: 0.7,
|
|
117
|
-
onLayout: e => {
|
|
118
|
-
const {
|
|
119
|
-
x,
|
|
120
|
-
width
|
|
121
|
-
} = e.nativeEvent.layout;
|
|
122
|
-
tabLayouts.current[index] = {
|
|
123
|
-
x,
|
|
124
|
-
width
|
|
125
|
-
};
|
|
126
|
-
if (index === activeIndex) tryInit();
|
|
127
|
-
},
|
|
128
|
-
children: /*#__PURE__*/_jsx(Text, {
|
|
129
|
-
style: [styles.tabText, activeIndex === index && styles.activeTabText],
|
|
130
|
-
numberOfLines: 1,
|
|
131
|
-
children: tab.label
|
|
132
|
-
})
|
|
133
|
-
}, tab.id))
|
|
134
|
-
}), /*#__PURE__*/_jsx(Animated.View, {
|
|
135
|
-
style: [styles.underline, {
|
|
136
|
-
width: underlineWidth,
|
|
137
|
-
transform: [{
|
|
138
|
-
translateX: underlineTranslateX
|
|
139
|
-
}]
|
|
140
|
-
}]
|
|
141
|
-
})]
|
|
142
|
-
});
|
|
143
|
-
}
|
|
144
|
-
const styles = StyleSheet.create({
|
|
145
|
-
container: {
|
|
146
|
-
backgroundColor: Colors.surface,
|
|
147
|
-
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
148
|
-
borderBottomColor: Colors.border
|
|
149
|
-
},
|
|
150
|
-
scrollContent: {
|
|
151
|
-
paddingHorizontal: 20,
|
|
152
|
-
flexDirection: 'row'
|
|
153
|
-
},
|
|
154
|
-
tab: {
|
|
155
|
-
paddingVertical: 10,
|
|
156
|
-
paddingHorizontal: 14,
|
|
157
|
-
marginRight: 8
|
|
158
|
-
},
|
|
159
|
-
tabText: {
|
|
160
|
-
fontSize: 14,
|
|
161
|
-
fontWeight: '500',
|
|
162
|
-
color: Colors.textLight
|
|
163
|
-
},
|
|
164
|
-
activeTabText: {
|
|
165
|
-
color: Colors.primary,
|
|
166
|
-
fontWeight: '600'
|
|
167
|
-
},
|
|
168
|
-
underline: {
|
|
169
|
-
position: 'absolute',
|
|
170
|
-
bottom: 0,
|
|
171
|
-
left: 0,
|
|
172
|
-
height: 2.5,
|
|
173
|
-
borderRadius: 1.25,
|
|
174
|
-
backgroundColor: Colors.primary
|
|
175
|
-
}
|
|
176
|
-
});
|
|
177
|
-
//# sourceMappingURL=FeatureTabBar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useEffect","useRef","useState","View","Text","StyleSheet","Animated","ScrollView","TouchableOpacity","Colors","jsx","_jsx","jsxs","_jsxs","FeatureTabBar","tabs","activeIndex","onSelectTab","underlineWidth","setUnderlineWidth","underlineTranslateX","Value","current","tabScrollViewRef","tabLayouts","tabScrollOffset","tabViewportWidth","tabContentWidth","underlineInit","isSwitching","maxTabScroll","Math","max","clampScroll","offset","min","getTabScrollTarget","index","layout","x","animateUnderline","scrollOffset","offsetX","width","spring","toValue","friction","tension","useNativeDriver","start","syncUnderlineToActiveTab","clamped","setValue","tryInit","target","scrollTo","animated","handleSelectTab","setTimeout","style","styles","container","children","ref","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","scrollContent","onLayout","e","nativeEvent","onContentSizeChange","onScroll","contentOffset","scrollEventThrottle","map","tab","onPress","activeOpacity","tabText","activeTabText","numberOfLines","label","id","underline","transform","translateX","create","backgroundColor","surface","borderBottomWidth","hairlineWidth","borderBottomColor","border","paddingHorizontal","flexDirection","paddingVertical","marginRight","fontSize","fontWeight","color","textLight","primary","position","bottom","left","height","borderRadius"],"sourceRoot":"../../../../src","sources":["ui/panel/FeatureTabBar.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface TabItem {
|
|
3
|
-
id: string;
|
|
4
|
-
label: string;
|
|
5
|
-
}
|
|
6
|
-
interface FeatureTabBarProps {
|
|
7
|
-
tabs: TabItem[];
|
|
8
|
-
activeIndex: number;
|
|
9
|
-
onSelectTab: (index: number) => void;
|
|
10
|
-
}
|
|
11
|
-
export declare function FeatureTabBar({ tabs, activeIndex, onSelectTab }: FeatureTabBarProps): React.JSX.Element;
|
|
12
|
-
export {};
|
|
13
|
-
//# sourceMappingURL=FeatureTabBar.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FeatureTabBar.d.ts","sourceRoot":"","sources":["../../../../../src/ui/panel/FeatureTabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAWxE,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,kBAAkB;IAC1B,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,kBAAkB,qBAmJnF"}
|
|
@@ -1,204 +0,0 @@
|
|
|
1
|
-
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
View,
|
|
4
|
-
Text,
|
|
5
|
-
StyleSheet,
|
|
6
|
-
Animated,
|
|
7
|
-
ScrollView,
|
|
8
|
-
TouchableOpacity,
|
|
9
|
-
} from 'react-native';
|
|
10
|
-
import { Colors } from '../theme/colors';
|
|
11
|
-
|
|
12
|
-
export interface TabItem {
|
|
13
|
-
id: string;
|
|
14
|
-
label: string;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
interface FeatureTabBarProps {
|
|
18
|
-
tabs: TabItem[];
|
|
19
|
-
activeIndex: number;
|
|
20
|
-
onSelectTab: (index: number) => void;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export function FeatureTabBar({ tabs, activeIndex, onSelectTab }: FeatureTabBarProps) {
|
|
24
|
-
const [underlineWidth, setUnderlineWidth] = useState(0);
|
|
25
|
-
const underlineTranslateX = useRef(new Animated.Value(0)).current;
|
|
26
|
-
const tabScrollViewRef = useRef<ScrollView>(null);
|
|
27
|
-
const tabLayouts = useRef<Array<{ x: number; width: number }>>([]);
|
|
28
|
-
const tabScrollOffset = useRef(0);
|
|
29
|
-
const tabViewportWidth = useRef(0);
|
|
30
|
-
const tabContentWidth = useRef(0);
|
|
31
|
-
const underlineInit = useRef(false);
|
|
32
|
-
const isSwitching = useRef(false);
|
|
33
|
-
|
|
34
|
-
const maxTabScroll = useCallback(
|
|
35
|
-
() => Math.max(0, tabContentWidth.current - tabViewportWidth.current),
|
|
36
|
-
[],
|
|
37
|
-
);
|
|
38
|
-
const clampScroll = useCallback(
|
|
39
|
-
(offset: number) => Math.min(Math.max(0, offset), maxTabScroll()),
|
|
40
|
-
[maxTabScroll],
|
|
41
|
-
);
|
|
42
|
-
const getTabScrollTarget = useCallback(
|
|
43
|
-
(index: number) => {
|
|
44
|
-
const layout = tabLayouts.current[index];
|
|
45
|
-
return layout ? clampScroll(layout.x - 60) : clampScroll(tabScrollOffset.current);
|
|
46
|
-
},
|
|
47
|
-
[clampScroll],
|
|
48
|
-
);
|
|
49
|
-
|
|
50
|
-
const animateUnderline = useCallback(
|
|
51
|
-
(index: number, scrollOffset?: number) => {
|
|
52
|
-
const layout = tabLayouts.current[index];
|
|
53
|
-
if (!layout) return;
|
|
54
|
-
const offsetX = clampScroll(scrollOffset ?? tabScrollOffset.current);
|
|
55
|
-
setUnderlineWidth(layout.width);
|
|
56
|
-
Animated.spring(underlineTranslateX, {
|
|
57
|
-
toValue: layout.x - offsetX,
|
|
58
|
-
friction: 7,
|
|
59
|
-
tension: 50,
|
|
60
|
-
useNativeDriver: true,
|
|
61
|
-
}).start();
|
|
62
|
-
},
|
|
63
|
-
[clampScroll, underlineTranslateX],
|
|
64
|
-
);
|
|
65
|
-
|
|
66
|
-
const syncUnderlineToActiveTab = useCallback(() => {
|
|
67
|
-
const layout = tabLayouts.current[activeIndex];
|
|
68
|
-
if (!layout) return;
|
|
69
|
-
const clamped = clampScroll(tabScrollOffset.current);
|
|
70
|
-
if (clamped !== tabScrollOffset.current) tabScrollOffset.current = clamped;
|
|
71
|
-
underlineTranslateX.setValue(layout.x - clamped);
|
|
72
|
-
setUnderlineWidth(layout.width);
|
|
73
|
-
}, [activeIndex, clampScroll, underlineTranslateX]);
|
|
74
|
-
|
|
75
|
-
const tryInit = useCallback(() => {
|
|
76
|
-
if (underlineInit.current || tabViewportWidth.current <= 0 || tabContentWidth.current <= 0)
|
|
77
|
-
return;
|
|
78
|
-
const layout = tabLayouts.current[activeIndex];
|
|
79
|
-
if (!layout) return;
|
|
80
|
-
const target = getTabScrollTarget(activeIndex);
|
|
81
|
-
tabScrollOffset.current = target;
|
|
82
|
-
tabScrollViewRef.current?.scrollTo({ x: target, animated: false });
|
|
83
|
-
underlineTranslateX.setValue(layout.x - target);
|
|
84
|
-
setUnderlineWidth(layout.width);
|
|
85
|
-
underlineInit.current = true;
|
|
86
|
-
}, [activeIndex, getTabScrollTarget, underlineTranslateX]);
|
|
87
|
-
|
|
88
|
-
const handleSelectTab = useCallback(
|
|
89
|
-
(index: number) => {
|
|
90
|
-
if (isSwitching.current || index === activeIndex) return;
|
|
91
|
-
isSwitching.current = true;
|
|
92
|
-
|
|
93
|
-
const layout = tabLayouts.current[index];
|
|
94
|
-
if (layout) {
|
|
95
|
-
const target = getTabScrollTarget(index);
|
|
96
|
-
tabScrollOffset.current = target;
|
|
97
|
-
tabScrollViewRef.current?.scrollTo({ x: target, animated: true });
|
|
98
|
-
animateUnderline(index, target);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
onSelectTab(index);
|
|
102
|
-
setTimeout(() => {
|
|
103
|
-
isSwitching.current = false;
|
|
104
|
-
}, 350);
|
|
105
|
-
},
|
|
106
|
-
[activeIndex, animateUnderline, getTabScrollTarget, onSelectTab],
|
|
107
|
-
);
|
|
108
|
-
|
|
109
|
-
// React to external activeIndex changes (e.g. swipe-to-switch)
|
|
110
|
-
useEffect(() => {
|
|
111
|
-
if (!underlineInit.current) return;
|
|
112
|
-
const layout = tabLayouts.current[activeIndex];
|
|
113
|
-
if (!layout) return;
|
|
114
|
-
const target = getTabScrollTarget(activeIndex);
|
|
115
|
-
tabScrollOffset.current = target;
|
|
116
|
-
tabScrollViewRef.current?.scrollTo({ x: target, animated: true });
|
|
117
|
-
animateUnderline(activeIndex, target);
|
|
118
|
-
}, [activeIndex, animateUnderline, getTabScrollTarget]);
|
|
119
|
-
|
|
120
|
-
return (
|
|
121
|
-
<View style={styles.container}>
|
|
122
|
-
<ScrollView
|
|
123
|
-
ref={tabScrollViewRef}
|
|
124
|
-
horizontal
|
|
125
|
-
showsHorizontalScrollIndicator={false}
|
|
126
|
-
contentContainerStyle={styles.scrollContent}
|
|
127
|
-
onLayout={(e) => {
|
|
128
|
-
tabViewportWidth.current = e.nativeEvent.layout.width;
|
|
129
|
-
tryInit();
|
|
130
|
-
}}
|
|
131
|
-
onContentSizeChange={(width) => {
|
|
132
|
-
tabContentWidth.current = width;
|
|
133
|
-
tryInit();
|
|
134
|
-
}}
|
|
135
|
-
onScroll={(e) => {
|
|
136
|
-
tabScrollOffset.current = clampScroll(e.nativeEvent.contentOffset.x);
|
|
137
|
-
if (!isSwitching.current) syncUnderlineToActiveTab();
|
|
138
|
-
}}
|
|
139
|
-
scrollEventThrottle={16}
|
|
140
|
-
>
|
|
141
|
-
{tabs.map((tab, index) => (
|
|
142
|
-
<TouchableOpacity
|
|
143
|
-
key={tab.id}
|
|
144
|
-
style={styles.tab}
|
|
145
|
-
onPress={() => handleSelectTab(index)}
|
|
146
|
-
activeOpacity={0.7}
|
|
147
|
-
onLayout={(e) => {
|
|
148
|
-
const { x, width } = e.nativeEvent.layout;
|
|
149
|
-
tabLayouts.current[index] = { x, width };
|
|
150
|
-
if (index === activeIndex) tryInit();
|
|
151
|
-
}}
|
|
152
|
-
>
|
|
153
|
-
<Text
|
|
154
|
-
style={[styles.tabText, activeIndex === index && styles.activeTabText]}
|
|
155
|
-
numberOfLines={1}
|
|
156
|
-
>
|
|
157
|
-
{tab.label}
|
|
158
|
-
</Text>
|
|
159
|
-
</TouchableOpacity>
|
|
160
|
-
))}
|
|
161
|
-
</ScrollView>
|
|
162
|
-
<Animated.View
|
|
163
|
-
style={[
|
|
164
|
-
styles.underline,
|
|
165
|
-
{ width: underlineWidth, transform: [{ translateX: underlineTranslateX }] },
|
|
166
|
-
]}
|
|
167
|
-
/>
|
|
168
|
-
</View>
|
|
169
|
-
);
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
const styles = StyleSheet.create({
|
|
173
|
-
container: {
|
|
174
|
-
backgroundColor: Colors.surface,
|
|
175
|
-
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
176
|
-
borderBottomColor: Colors.border,
|
|
177
|
-
},
|
|
178
|
-
scrollContent: {
|
|
179
|
-
paddingHorizontal: 20,
|
|
180
|
-
flexDirection: 'row',
|
|
181
|
-
},
|
|
182
|
-
tab: {
|
|
183
|
-
paddingVertical: 10,
|
|
184
|
-
paddingHorizontal: 14,
|
|
185
|
-
marginRight: 8,
|
|
186
|
-
},
|
|
187
|
-
tabText: {
|
|
188
|
-
fontSize: 14,
|
|
189
|
-
fontWeight: '500',
|
|
190
|
-
color: Colors.textLight,
|
|
191
|
-
},
|
|
192
|
-
activeTabText: {
|
|
193
|
-
color: Colors.primary,
|
|
194
|
-
fontWeight: '600',
|
|
195
|
-
},
|
|
196
|
-
underline: {
|
|
197
|
-
position: 'absolute',
|
|
198
|
-
bottom: 0,
|
|
199
|
-
left: 0,
|
|
200
|
-
height: 2.5,
|
|
201
|
-
borderRadius: 1.25,
|
|
202
|
-
backgroundColor: Colors.primary,
|
|
203
|
-
},
|
|
204
|
-
});
|