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

package/src/split/index.tsx

@@ -0,0 +1,350 @@
+import React from 'react';
+import {
+  PanResponder,
+  View,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { splitColumnConfig, type SplitNavigationState } from '../routers';
+import { NavigatorStateContext, useNavigator } from '../core/builder';
+import { Scene } from '../core/Scene';
+import { SplitColumnContext, useNavigationTheme } from '../core/context';
+import { consumeKey, DesktopView, eventHandled } from '../platform';
+export interface SplitColumnProps {
+  id: string;
+  component: React.ComponentType;
+  minWidth?: number;
+  maxWidth?: number;
+  defaultWidth?: number;
+  /** Follow a directly nested Sidebar when it collapses (default: true). */
+  collapsible?: boolean;
+  style?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
+  /** Hide the entire resize handle, including its space and keyboard target. */
+  dividerShown?: boolean;
+  dividerStyle?: SplitDividerStyle;
+  renderDivider?: (props: SplitDividerRenderProps) => React.ReactNode;
+}
+export interface SplitDividerRenderProps {
+  columnId: string;
+  width: number;
+  dragging: boolean;
+}
+export type SplitDividerStyle =
+  | StyleProp<ViewStyle>
+  | ((props: SplitDividerRenderProps) => StyleProp<ViewStyle>);
+export interface SplitNavigatorProps {
+  children: React.ReactNode;
+  id?: string;
+  style?: StyleProp<ViewStyle>;
+  columnStyle?: StyleProp<ViewStyle>;
+  /** Hide the entire resize handle, including its space and keyboard target. */
+  dividerShown?: boolean;
+  dividerStyle?: SplitDividerStyle;
+  renderDivider?: (props: SplitDividerRenderProps) => React.ReactNode;
+  layout?: (size: { width: number; height: number }) => string[];
+  onColumnResize?: (id: string, width: number) => void;
+}
+function Divider({
+  column,
+  width,
+  resize,
+  style,
+  renderContent,
+  onWidthChange,
+}: {
+  column: SplitColumnProps;
+  width: number;
+  resize: (width: number) => void;
+  style?: SplitDividerStyle;
+  renderContent?: (props: SplitDividerRenderProps) => React.ReactNode;
+  onWidthChange: (width: number) => void;
+}) {
+  const [dragging, setDragging] = React.useState(false);
+  const start = React.useRef({ width, pageX: 0 });
+  const latest = React.useRef({ width, resize });
+  latest.current = { width, resize };
+  const responder = React.useMemo(
+    () =>
+      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 } = useNavigationTheme();
+  const context = { columnId: column.id, width, dragging };
+  return (
+    <DesktopView
+      {...responder.panHandlers}
+      testID={`split-divider-${column.id}`}
+      style={styles.dividerHitArea}
+      pointerEvents="box-only"
+      accessible
+      focusable
+      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 (
+          !eventHandled(event) &&
+          ['ArrowLeft', 'ArrowRight'].includes(event.nativeEvent.key)
+        ) {
+          resize(width + (event.nativeEvent.key === 'ArrowRight' ? 10 : -10));
+          consumeKey(event);
+        }
+      }}
+    >
+      <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,
+        ]}
+      >
+        {(column.renderDivider ?? renderContent)?.(context)}
+      </View>
+    </DesktopView>
+  );
+}
+export function createSplitNavigator() {
+  function Column(_props: SplitColumnProps) {
+    return null;
+  }
+  function Navigator(props: SplitNavigatorProps) {
+    const columns: SplitColumnProps[] = [];
+    React.Children.forEach(props.children, (child) => {
+      if (child == null || typeof child === 'boolean') return;
+      if (!React.isValidElement(child) || child.type !== Column)
+        throw new Error(
+          'Split.Navigator children must be Split.Column elements.',
+        );
+      columns.push(child.props as SplitColumnProps);
+    });
+    const { id, state, store } = useNavigator<SplitNavigationState>(
+      'split',
+      { routes: columns.map((c) => ({ ...c, name: c.id })) },
+      props.id,
+    );
+    const [size, setSize] = React.useState<{
+      width: number;
+      height: number;
+    } | null>(null);
+    const [dividerWidths, setDividerWidths] = React.useState<
+      Record<string, number>
+    >({});
+    const [collapsedWidths, setCollapsedWidths] = React.useState<
+      Record<string, number | null>
+    >({});
+    const onSidebarChange = React.useCallback(
+      (columnId: string, width: number | null) => {
+        setCollapsedWidths((previous) => {
+          if (previous[columnId] === width) return previous;
+          return { ...previous, [columnId]: width };
+        });
+      },
+      [],
+    );
+    const layout = props.layout;
+    const dividerSpace = (ids: string[]) =>
+      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.useLayoutEffect(() => {
+      const ids = size
+        ? layout
+          ? layout(size)
+          : columns.map((c) => c.id)
+        : state.visibleColumnIds;
+      const before = store.getNode(id)!.state as SplitNavigationState;
+      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 as SplitNavigationState;
+      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 (
+      <NavigatorStateContext.Provider value={state}>
+        <View style={[styles.split, props.style]}>
+          <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 },
+              );
+            }}
+          >
+            {ordered.map((columnId) => {
+              const column = columns.find((c) => c.id === columnId)!;
+              const constraints = 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: number) => {
+                const before = store.getNode(id)!.state as SplitNavigationState;
+                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 as SplitNavigationState;
+                for (const changedId of after.visibleColumnIds) {
+                  if (before.widths[changedId] !== after.widths[changedId])
+                    props.onColumnResize?.(changedId, after.widths[changedId]);
+                }
+              };
+              return (
+                <React.Fragment key={route.key}>
+                  <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' },
+                    ]}
+                  >
+                    <SplitColumnContext.Provider
+                      value={{ nodeId: id, columnId, onSidebarChange }}
+                    >
+                      <Scene
+                        nodeId={id}
+                        route={route}
+                        component={column.component}
+                        visible={visible}
+                        options={{
+                          inactiveBehavior: 'keep',
+                          focusBehavior: 'none',
+                          contentStyle: column.contentStyle,
+                        }}
+                      />
+                    </SplitColumnContext.Provider>
+                  </View>
+                  {visible &&
+                    !last &&
+                    (column.dividerShown ?? props.dividerShown ?? true) && (
+                      <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 },
+                          );
+                        }}
+                      />
+                    )}
+                </React.Fragment>
+              );
+            })}
+          </View>
+        </View>
+      </NavigatorStateContext.Provider>
+    );
+  }
+  return { Navigator, Column };
+}
+const styles = 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/src/stack/index.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import {
+  Pressable,
+  Text,
+  View,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import type {
+  HistoryBehavior,
+  ParamListBase,
+  RouteName,
+  StackNavigationState,
+} from '../routers';
+import {
+  useNavigator,
+  readScreens,
+  resolveOptions,
+  NavigatorStateContext,
+  type ScreenConfig,
+} from '../core/builder';
+import { Scene } from '../core/Scene';
+import { createNavigation } from '../core/navigation';
+import { useNavigationTheme } from '../core/context';
+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>;
+}
+function renderAction(
+  action: StackScreenOptions['headerLeft'],
+  props: HeaderProps,
+) {
+  return typeof action === 'function' ? action(props) : action;
+}
+export function StackHeader(props: HeaderProps) {
+  const { options, route, navigation, canGoBack } = props;
+  const { colors } = useNavigationTheme();
+  if (options.headerShown === false) return null;
+  if (options.header !== undefined)
+    return (
+      <>
+        {typeof options.header === 'function'
+          ? options.header(props)
+          : options.header}
+      </>
+    );
+  return (
+    <View
+      style={[
+        styles.header,
+        { backgroundColor: colors.surface, borderColor: colors.border },
+        options.headerStyle,
+      ]}
+    >
+      <View style={[styles.action, options.headerLeftContainerStyle]}>
+        {options.headerLeft !== undefined
+          ? renderAction(options.headerLeft, props)
+          : canGoBack && (
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={options.headerBackTitle ?? 'Back'}
+                style={options.headerBackButtonStyle}
+                focusable
+                onPress={() => navigation.goBack()}
+              >
+                <Text
+                  style={[
+                    { color: options.headerTintColor ?? colors.accent },
+                    options.headerBackTitleStyle,
+                  ]}
+                >
+                  ‹ {options.headerBackTitle ?? 'Back'}
+                </Text>
+              </Pressable>
+            )}
+      </View>
+      <Text
+        accessibilityRole="header"
+        numberOfLines={1}
+        style={[
+          styles.title,
+          { color: options.headerTintColor ?? colors.text },
+          options.headerTitleStyle,
+        ]}
+      >
+        {options.title ?? route.name}
+      </Text>
+      <View style={[styles.action, options.headerRightContainerStyle]}>
+        {renderAction(options.headerRight, props)}
+      </View>
+    </View>
+  );
+}
+export function createStackNavigator<
+  P extends ParamListBase = ParamListBase,
+>() {
+  function Screen<N extends RouteName<P>>(
+    _props: ScreenConfig<P, N, StackScreenOptions, StackNavigation<P>>,
+  ) {
+    return null;
+  }
+  function Navigator(
+    props: Omit<StackNavigatorProps, 'initialRouteName'> & {
+      initialRouteName?: RouteName<P>;
+    },
+  ) {
+    const definitions = readScreens<StackScreenOptions>(props.children, Screen);
+    const { id, state, store } = useNavigator<StackNavigationState>(
+      'stack',
+      {
+        routes: definitions,
+        initialRouteName: props.initialRouteName,
+        historyBehavior: props.historyBehavior,
+      },
+      props.id,
+    );
+    const getCanGoBack = React.useCallback(
+      () => store.canDispatch('back', id),
+      [store, id],
+    );
+    const canGoBack = React.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 = createNavigation(store, id, route.key);
+      return {
+        route,
+        definition,
+        navigation,
+        options: resolveOptions(
+          definition,
+          route,
+          navigation,
+          props.screenOptions,
+        ),
+      };
+    });
+    let visibleStart = scenes.length - 1;
+    while (
+      visibleStart > 0 &&
+      ['modal', 'dialog'].includes(
+        scenes[visibleStart].options.presentation ?? 'card',
+      )
+    )
+      visibleStart--;
+    return (
+      <NavigatorStateContext.Provider value={state}>
+        <View style={[styles.stack, props.style]}>
+          {scenes.map(({ route, definition, navigation, options }, index) => (
+            <Scene
+              key={route.key}
+              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
+              }
+            >
+              <StackHeader
+                route={route}
+                navigation={navigation}
+                options={options}
+                canGoBack={canGoBack}
+              />
+            </Scene>
+          ))}
+        </View>
+      </NavigatorStateContext.Provider>
+    );
+  }
+  return { Navigator, Screen };
+}
+const styles = StyleSheet.create({
+  stack: { flex: 1, overflow: 'hidden' },
+  header: {
+    minHeight: 44,
+    paddingHorizontal: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  title: { flex: 1, textAlign: 'center', fontWeight: '600' },
+  action: { minWidth: 60 },
+});

package/src/tabs/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { ParamListBase, RouteName } from '../routers';
+import { readScreens, type ScreenConfig } from '../core/builder';
+import {
+  SelectionNavigator,
+  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 function createTabNavigator<P extends ParamListBase = ParamListBase>() {
+  function Screen<N extends RouteName<P>>(
+    _props: ScreenConfig<P, N, TabScreenOptions, TabNavigation<P>>,
+  ) {
+    return null;
+  }
+  function Navigator(
+    props: Omit<TabNavigatorOptions, 'initialRouteName'> & {
+      initialRouteName?: RouteName<P>;
+      children: React.ReactNode;
+    },
+  ) {
+    return (
+      <SelectionNavigator
+        {...props}
+        type="tabs"
+        definitions={readScreens(props.children, Screen)}
+      />
+    );
+  }
+  return { Navigator, Screen };
+}

package/windows/DesktopNavigation/DesktopNavigation.def

@@ -0,0 +1,3 @@
+EXPORTS
+DllCanUnloadNow = WINRT_CanUnloadNow PRIVATE
+DllGetActivationFactory = WINRT_GetActivationFactory PRIVATE