@natsuneko-laboratory/react-native-desktop-navigation 0.1.0-alpha.12

package/dist/split/index.js

@@ -0,0 +1,199 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSplitNavigator = createSplitNavigator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const routers_1 = require("../routers");
+const builder_1 = require("../core/builder");
+const Scene_1 = require("../core/Scene");
+const context_1 = require("../core/context");
+const platform_1 = require("../platform");
+function Divider({ column, width, resize, style, renderContent, onWidthChange, }) {
+    const [dragging, setDragging] = react_1.default.useState(false);
+    const start = react_1.default.useRef({ width, pageX: 0 });
+    const latest = react_1.default.useRef({ width, resize });
+    latest.current = { width, resize };
+    const responder = react_1.default.useMemo(() => react_native_1.PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: (event) => {
+            start.current = {
+                width: latest.current.width,
+                pageX: event.nativeEvent.pageX,
+            };
+            setDragging(true);
+        },
+        // Use root coordinates: the handle itself moves during resizing.
+        onPanResponderMove: (event) => latest.current.resize(start.current.width + event.nativeEvent.pageX - start.current.pageX),
+        onPanResponderRelease: () => setDragging(false),
+        onPanResponderTerminate: () => setDragging(false),
+        onPanResponderTerminationRequest: () => false,
+    }), []);
+    const { colors } = (0, context_1.useNavigationTheme)();
+    const context = { columnId: column.id, width, dragging };
+    return ((0, jsx_runtime_1.jsx)(platform_1.DesktopView, { ...responder.panHandlers, testID: `split-divider-${column.id}`, style: styles.dividerHitArea, pointerEvents: "box-only", accessible: true, focusable: true, accessibilityRole: "adjustable", accessibilityLabel: `Resize ${column.id}`, accessibilityValue: {
+            min: column.minWidth ?? 100,
+            max: column.maxWidth,
+            now: width,
+        }, accessibilityActions: [{ name: 'increment' }, { name: 'decrement' }], onAccessibilityAction: (event) => resize(width + (event.nativeEvent.actionName === 'increment' ? 10 : -10)), keyDownEvents: [{ key: 'ArrowLeft' }, { key: 'ArrowRight' }], onKeyDown: (event) => {
+            if (!(0, platform_1.eventHandled)(event) &&
+                ['ArrowLeft', 'ArrowRight'].includes(event.nativeEvent.key)) {
+                resize(width + (event.nativeEvent.key === 'ArrowRight' ? 10 : -10));
+                (0, platform_1.consumeKey)(event);
+            }
+        }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { testID: `split-divider-visual-${column.id}`, onLayout: (event) => onWidthChange(event.nativeEvent.layout.width), accessible: false, style: [
+                { flex: 1, width: 6, backgroundColor: colors.border },
+                typeof style === 'function' ? style(context) : style,
+                typeof column.dividerStyle === 'function'
+                    ? column.dividerStyle(context)
+                    : column.dividerStyle,
+            ], children: (column.renderDivider ?? renderContent)?.(context) }) }));
+}
+function createSplitNavigator() {
+    function Column(_props) {
+        return null;
+    }
+    function Navigator(props) {
+        const columns = [];
+        react_1.default.Children.forEach(props.children, (child) => {
+            if (child == null || typeof child === 'boolean')
+                return;
+            if (!react_1.default.isValidElement(child) || child.type !== Column)
+                throw new Error('Split.Navigator children must be Split.Column elements.');
+            columns.push(child.props);
+        });
+        const { id, state, store } = (0, builder_1.useNavigator)('split', { routes: columns.map((c) => ({ ...c, name: c.id })) }, props.id);
+        const [size, setSize] = react_1.default.useState(null);
+        const [dividerWidths, setDividerWidths] = react_1.default.useState({});
+        const [collapsedWidths, setCollapsedWidths] = react_1.default.useState({});
+        const onSidebarChange = react_1.default.useCallback((columnId, width) => {
+            setCollapsedWidths((previous) => {
+                if (previous[columnId] === width)
+                    return previous;
+                return { ...previous, [columnId]: width };
+            });
+        }, []);
+        const layout = props.layout;
+        const dividerSpace = (ids) => ids.slice(0, -1).reduce((total, columnId) => {
+            const column = columns.find((c) => c.id === columnId);
+            return (total +
+                ((column?.dividerShown ?? props.dividerShown ?? true)
+                    ? (dividerWidths[columnId] ?? 6)
+                    : 0));
+        }, 0);
+        react_1.default.useLayoutEffect(() => {
+            const ids = size
+                ? layout
+                    ? layout(size)
+                    : columns.map((c) => c.id)
+                : state.visibleColumnIds;
+            const before = store.getNode(id).state;
+            store.dispatch({
+                target: id,
+                type: 'layout',
+                payload: {
+                    ids,
+                    availableWidth: size ? size.width - dividerSpace(ids) : undefined,
+                    collapsedWidths: Object.fromEntries(columns
+                        .filter((c) => c.collapsible === false || c.id in collapsedWidths)
+                        .map((c) => [
+                        c.id,
+                        c.collapsible === false ? null : collapsedWidths[c.id],
+                    ])),
+                },
+            });
+            const after = store.getNode(id).state;
+            if (before.collapsedColumns !== after.collapsedColumns) {
+                for (const columnId of Object.keys(after.widths)) {
+                    if (before.widths[columnId] !== after.widths[columnId])
+                        props.onColumnResize?.(columnId, after.widths[columnId]);
+                }
+            }
+        });
+        const ordered = [
+            ...state.visibleColumnIds,
+            ...columns
+                .filter((c) => !state.visibleColumnIds.includes(c.id))
+                .map((c) => c.id),
+        ];
+        return ((0, jsx_runtime_1.jsx)(builder_1.NavigatorStateContext.Provider, { value: state, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.split, props.style], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "split-layout", style: styles.row, onLayout: (event) => {
+                        const { width, height } = event.nativeEvent.layout;
+                        setSize((previous) => previous?.width === width && previous.height === height
+                            ? previous
+                            : { width, height });
+                    }, children: ordered.map((columnId) => {
+                        const column = columns.find((c) => c.id === columnId);
+                        const constraints = (0, routers_1.splitColumnConfig)(state, {
+                            ...column,
+                            name: columnId,
+                        });
+                        const route = state.routes.find((r) => r.name === columnId);
+                        const visible = state.visibleColumnIds.includes(columnId);
+                        const last = columnId ===
+                            state.visibleColumnIds[state.visibleColumnIds.length - 1];
+                        const resize = (width) => {
+                            const before = store.getNode(id).state;
+                            store.dispatch({
+                                target: id,
+                                // Native layout precedes input. The fallback supports pre-layout imperative use.
+                                type: size ? 'resizeBoundary' : 'resize',
+                                payload: { id: columnId, width },
+                            });
+                            const after = store.getNode(id).state;
+                            for (const changedId of after.visibleColumnIds) {
+                                if (before.widths[changedId] !== after.widths[changedId])
+                                    props.onColumnResize?.(changedId, after.widths[changedId]);
+                            }
+                        };
+                        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { testID: `split-column-${columnId}`, style: [
+                                        props.columnStyle,
+                                        column.style,
+                                        {
+                                            overflow: 'hidden',
+                                            width: state.widths[columnId],
+                                            minWidth: constraints.minWidth ?? 100,
+                                            maxWidth: constraints.maxWidth,
+                                            flexBasis: 'auto',
+                                            flexGrow: !size && last && !state.collapsedColumns?.[columnId]
+                                                ? 1
+                                                : 0,
+                                            flexShrink: 0,
+                                        },
+                                        !visible && { display: 'none' },
+                                    ], children: (0, jsx_runtime_1.jsx)(context_1.SplitColumnContext.Provider, { value: { nodeId: id, columnId, onSidebarChange }, children: (0, jsx_runtime_1.jsx)(Scene_1.Scene, { nodeId: id, route: route, component: column.component, visible: visible, options: {
+                                                inactiveBehavior: 'keep',
+                                                focusBehavior: 'none',
+                                                contentStyle: column.contentStyle,
+                                            } }) }) }), visible &&
+                                    !last &&
+                                    (column.dividerShown ?? props.dividerShown ?? true) && ((0, jsx_runtime_1.jsx)(Divider, { column: {
+                                        ...column,
+                                        minWidth: constraints.minWidth,
+                                        maxWidth: constraints.maxWidth,
+                                    }, width: state.widths[columnId], resize: resize, style: props.dividerStyle, renderContent: props.renderDivider, onWidthChange: (width) => {
+                                        if (!Number.isFinite(width) || width < 0)
+                                            return;
+                                        setDividerWidths((previous) => previous[columnId] === width
+                                            ? previous
+                                            : { ...previous, [columnId]: width });
+                                    } }))] }, route.key));
+                    }) }) }) }));
+    }
+    return { Navigator, Column };
+}
+const styles = react_native_1.StyleSheet.create({
+    split: { flex: 1, flexDirection: 'row', overflow: 'hidden' },
+    row: { flex: 1, minWidth: 0, flexDirection: 'row', overflow: 'hidden' },
+    dividerHitArea: {
+        // Enlarge the native view's bounds; negative margins keep the columns
+        // and visible divider at their original positions. Measure only the visual.
+        paddingHorizontal: 8,
+        marginHorizontal: -8,
+        flexShrink: 0,
+        zIndex: 1,
+    },
+});

package/dist/stack/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { HistoryBehavior, ParamListBase, RouteName } from '../routers';
+import { type ScreenConfig } from '../core/builder';
+import type { StackNavigation, StackScreenOptions, HeaderProps } from '../core/types';
+export interface StackNavigatorProps {
+    children: React.ReactNode;
+    id?: string;
+    initialRouteName?: string;
+    historyBehavior?: HistoryBehavior;
+    screenOptions?: StackScreenOptions | ((context: {
+        navigation: StackNavigation;
+        route: import('../routers').NavigationRoute;
+    }) => StackScreenOptions);
+    style?: StyleProp<ViewStyle>;
+}
+export declare function StackHeader(props: HeaderProps): React.JSX.Element | null;
+export declare function createStackNavigator<P extends ParamListBase = ParamListBase>(): {
+    Navigator: (props: Omit<StackNavigatorProps, "initialRouteName"> & {
+        initialRouteName?: RouteName<P>;
+    }) => React.JSX.Element;
+    Screen: <N extends RouteName<P>>(_props: ScreenConfig<P, N, StackScreenOptions, StackNavigation<P>>) => null;
+};

package/dist/stack/index.js

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackHeader = StackHeader;
+exports.createStackNavigator = createStackNavigator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const builder_1 = require("../core/builder");
+const Scene_1 = require("../core/Scene");
+const navigation_1 = require("../core/navigation");
+const context_1 = require("../core/context");
+function renderAction(action, props) {
+    return typeof action === 'function' ? action(props) : action;
+}
+function StackHeader(props) {
+    const { options, route, navigation, canGoBack } = props;
+    const { colors } = (0, context_1.useNavigationTheme)();
+    if (options.headerShown === false)
+        return null;
+    if (options.header !== undefined)
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: typeof options.header === 'function'
+                ? options.header(props)
+                : options.header }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            styles.header,
+            { backgroundColor: colors.surface, borderColor: colors.border },
+            options.headerStyle,
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.action, options.headerLeftContainerStyle], children: options.headerLeft !== undefined
+                    ? renderAction(options.headerLeft, props)
+                    : canGoBack && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: options.headerBackTitle ?? 'Back', style: options.headerBackButtonStyle, focusable: true, onPress: () => navigation.goBack(), children: (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [
+                                { color: options.headerTintColor ?? colors.accent },
+                                options.headerBackTitleStyle,
+                            ], children: ["\u2039 ", options.headerBackTitle ?? 'Back'] }) })) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityRole: "header", numberOfLines: 1, style: [
+                    styles.title,
+                    { color: options.headerTintColor ?? colors.text },
+                    options.headerTitleStyle,
+                ], children: options.title ?? route.name }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.action, options.headerRightContainerStyle], children: renderAction(options.headerRight, props) })] }));
+}
+function createStackNavigator() {
+    function Screen(_props) {
+        return null;
+    }
+    function Navigator(props) {
+        const definitions = (0, builder_1.readScreens)(props.children, Screen);
+        const { id, state, store } = (0, builder_1.useNavigator)('stack', {
+            routes: definitions,
+            initialRouteName: props.initialRouteName,
+            historyBehavior: props.historyBehavior,
+        }, props.id);
+        const getCanGoBack = react_1.default.useCallback(() => store.canDispatch('back', id), [store, id]);
+        const canGoBack = react_1.default.useSyncExternalStore(store.subscribe, getCanGoBack, getCanGoBack);
+        const scenes = state.routes.map((route) => {
+            const definition = definitions.find((d) => d.name === route.name);
+            if (!definition)
+                throw new Error(`Screen ${route.name} was removed. Remount the navigator to change its screen list.`);
+            const navigation = (0, navigation_1.createNavigation)(store, id, route.key);
+            return {
+                route,
+                definition,
+                navigation,
+                options: (0, builder_1.resolveOptions)(definition, route, navigation, props.screenOptions),
+            };
+        });
+        let visibleStart = scenes.length - 1;
+        while (visibleStart > 0 &&
+            ['modal', 'dialog'].includes(scenes[visibleStart].options.presentation ?? 'card'))
+            visibleStart--;
+        return ((0, jsx_runtime_1.jsx)(builder_1.NavigatorStateContext.Provider, { value: state, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.stack, props.style], children: scenes.map(({ route, definition, navigation, options }, index) => ((0, jsx_runtime_1.jsx)(Scene_1.Scene, { nodeId: id, route: route, component: definition.component, visible: index >= visibleStart, options: options, animation: options.animation ?? 'default', overlayStyle: options.overlayStyle, dialogStyle: options.dialogStyle, overlay: options.presentation === 'card'
+                        ? undefined
+                        : options.presentation, children: (0, jsx_runtime_1.jsx)(StackHeader, { route: route, navigation: navigation, options: options, canGoBack: canGoBack }) }, route.key))) }) }));
+    }
+    return { Navigator, Screen };
+}
+const styles = react_native_1.StyleSheet.create({
+    stack: { flex: 1, overflow: 'hidden' },
+    header: {
+        minHeight: 44,
+        paddingHorizontal: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
+    },
+    title: { flex: 1, textAlign: 'center', fontWeight: '600' },
+    action: { minWidth: 60 },
+});

package/dist/tabs/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { ParamListBase, RouteName } from '../routers';
+import { type ScreenConfig } from '../core/builder';
+import { type SelectionNavigatorProps } from '../core/SelectionNavigator';
+import type { TabNavigation, TabScreenOptions } from '../core/types';
+export type TabNavigatorOptions = Pick<SelectionNavigatorProps, 'id' | 'initialRouteName' | 'screenOptions' | 'style' | 'barStyle' | 'barContentStyle' | 'contentStyle'>;
+export declare function createTabNavigator<P extends ParamListBase = ParamListBase>(): {
+    Navigator: (props: Omit<TabNavigatorOptions, "initialRouteName"> & {
+        initialRouteName?: RouteName<P>;
+        children: React.ReactNode;
+    }) => React.JSX.Element;
+    Screen: <N extends RouteName<P>>(_props: ScreenConfig<P, N, TabScreenOptions, TabNavigation<P>>) => null;
+};

package/dist/tabs/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTabNavigator = createTabNavigator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const builder_1 = require("../core/builder");
+const SelectionNavigator_1 = require("../core/SelectionNavigator");
+function createTabNavigator() {
+    function Screen(_props) {
+        return null;
+    }
+    function Navigator(props) {
+        return ((0, jsx_runtime_1.jsx)(SelectionNavigator_1.SelectionNavigator, { ...props, type: "tabs", definitions: (0, builder_1.readScreens)(props.children, Screen) }));
+    }
+    return { Navigator, Screen };
+}