@gtkx/navigation 0.0.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 +174 -0
- package/dist/drawer/create-drawer-navigator.d.ts +30 -0
- package/dist/drawer/create-drawer-navigator.d.ts.map +1 -0
- package/dist/drawer/create-drawer-navigator.js +36 -0
- package/dist/drawer/create-drawer-navigator.js.map +1 -0
- package/dist/drawer/drawer-collapsed-context.d.ts +4 -0
- package/dist/drawer/drawer-collapsed-context.d.ts.map +1 -0
- package/dist/drawer/drawer-collapsed-context.js +4 -0
- package/dist/drawer/drawer-collapsed-context.js.map +1 -0
- package/dist/drawer/drawer-item-list.d.ts +6 -0
- package/dist/drawer/drawer-item-list.d.ts.map +1 -0
- package/dist/drawer/drawer-item-list.js +40 -0
- package/dist/drawer/drawer-item-list.js.map +1 -0
- package/dist/drawer/drawer-router.d.ts +5 -0
- package/dist/drawer/drawer-router.d.ts.map +1 -0
- package/dist/drawer/drawer-router.js +49 -0
- package/dist/drawer/drawer-router.js.map +1 -0
- package/dist/drawer/drawer-status.d.ts +4 -0
- package/dist/drawer/drawer-status.d.ts.map +1 -0
- package/dist/drawer/drawer-status.js +11 -0
- package/dist/drawer/drawer-status.js.map +1 -0
- package/dist/drawer/drawer-view.d.ts +11 -0
- package/dist/drawer/drawer-view.d.ts.map +1 -0
- package/dist/drawer/drawer-view.js +67 -0
- package/dist/drawer/drawer-view.js.map +1 -0
- package/dist/drawer/types.d.ts +80 -0
- package/dist/drawer/types.d.ts.map +1 -0
- package/dist/drawer/types.js +2 -0
- package/dist/drawer/types.js.map +1 -0
- package/dist/index.d.ts +15 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +10 -0
- package/dist/index.js.map +1 -0
- package/dist/navigation-container.d.ts +15 -0
- package/dist/navigation-container.d.ts.map +1 -0
- package/dist/navigation-container.js +11 -0
- package/dist/navigation-container.js.map +1 -0
- package/dist/shared/header-bar.d.ts +11 -0
- package/dist/shared/header-bar.d.ts.map +1 -0
- package/dist/shared/header-bar.js +11 -0
- package/dist/shared/header-bar.js.map +1 -0
- package/dist/shared/routes.d.ts +6 -0
- package/dist/shared/routes.d.ts.map +1 -0
- package/dist/shared/routes.js +16 -0
- package/dist/shared/routes.js.map +1 -0
- package/dist/shared/scene-page.d.ts +13 -0
- package/dist/shared/scene-page.d.ts.map +1 -0
- package/dist/shared/scene-page.js +5 -0
- package/dist/shared/scene-page.js.map +1 -0
- package/dist/shared/types.d.ts +16 -0
- package/dist/shared/types.d.ts.map +1 -0
- package/dist/shared/types.js +2 -0
- package/dist/shared/types.js.map +1 -0
- package/dist/shared/use-loaded-routes.d.ts +3 -0
- package/dist/shared/use-loaded-routes.d.ts.map +1 -0
- package/dist/shared/use-loaded-routes.js +11 -0
- package/dist/shared/use-loaded-routes.js.map +1 -0
- package/dist/shared/use-pop-to-top-on-blur.d.ts +10 -0
- package/dist/shared/use-pop-to-top-on-blur.d.ts.map +1 -0
- package/dist/shared/use-pop-to-top-on-blur.js +27 -0
- package/dist/shared/use-pop-to-top-on-blur.js.map +1 -0
- package/dist/split-view/create-split-view-navigator.d.ts +33 -0
- package/dist/split-view/create-split-view-navigator.d.ts.map +1 -0
- package/dist/split-view/create-split-view-navigator.js +20 -0
- package/dist/split-view/create-split-view-navigator.js.map +1 -0
- package/dist/split-view/split-view-router.d.ts +5 -0
- package/dist/split-view/split-view-router.d.ts.map +1 -0
- package/dist/split-view/split-view-router.js +42 -0
- package/dist/split-view/split-view-router.js.map +1 -0
- package/dist/split-view/split-view.d.ts +12 -0
- package/dist/split-view/split-view.d.ts.map +1 -0
- package/dist/split-view/split-view.js +62 -0
- package/dist/split-view/split-view.js.map +1 -0
- package/dist/split-view/types.d.ts +43 -0
- package/dist/split-view/types.d.ts.map +1 -0
- package/dist/split-view/types.js +2 -0
- package/dist/split-view/types.js.map +1 -0
- package/dist/stack/create-stack-navigator.d.ts +30 -0
- package/dist/stack/create-stack-navigator.d.ts.map +1 -0
- package/dist/stack/create-stack-navigator.js +16 -0
- package/dist/stack/create-stack-navigator.js.map +1 -0
- package/dist/stack/stack-pages.d.ts +11 -0
- package/dist/stack/stack-pages.d.ts.map +1 -0
- package/dist/stack/stack-pages.js +80 -0
- package/dist/stack/stack-pages.js.map +1 -0
- package/dist/stack/stack-view.d.ts +14 -0
- package/dist/stack/stack-view.d.ts.map +1 -0
- package/dist/stack/stack-view.js +101 -0
- package/dist/stack/stack-view.js.map +1 -0
- package/dist/stack/sync-navigation-stack.d.ts +7 -0
- package/dist/stack/sync-navigation-stack.d.ts.map +1 -0
- package/dist/stack/sync-navigation-stack.js +69 -0
- package/dist/stack/sync-navigation-stack.js.map +1 -0
- package/dist/stack/types.d.ts +72 -0
- package/dist/stack/types.d.ts.map +1 -0
- package/dist/stack/types.js +2 -0
- package/dist/stack/types.js.map +1 -0
- package/dist/static-navigation.d.ts +13 -0
- package/dist/static-navigation.d.ts.map +1 -0
- package/dist/static-navigation.js +10 -0
- package/dist/static-navigation.js.map +1 -0
- package/dist/tabs/create-tab-navigator.d.ts +30 -0
- package/dist/tabs/create-tab-navigator.d.ts.map +1 -0
- package/dist/tabs/create-tab-navigator.js +16 -0
- package/dist/tabs/create-tab-navigator.js.map +1 -0
- package/dist/tabs/tab-view.d.ts +11 -0
- package/dist/tabs/tab-view.d.ts.map +1 -0
- package/dist/tabs/tab-view.js +52 -0
- package/dist/tabs/tab-view.js.map +1 -0
- package/dist/tabs/types.d.ts +67 -0
- package/dist/tabs/types.d.ts.map +1 -0
- package/dist/tabs/types.js +2 -0
- package/dist/tabs/types.js.map +1 -0
- package/dist/theme.d.ts +18 -0
- package/dist/theme.d.ts.map +1 -0
- package/dist/theme.js +15 -0
- package/dist/theme.js.map +1 -0
- package/package.json +71 -0
- package/src/drawer/create-drawer-navigator.tsx +123 -0
- package/src/drawer/drawer-collapsed-context.ts +5 -0
- package/src/drawer/drawer-item-list.tsx +74 -0
- package/src/drawer/drawer-router.ts +90 -0
- package/src/drawer/drawer-status.ts +19 -0
- package/src/drawer/drawer-view.tsx +171 -0
- package/src/drawer/types.ts +142 -0
- package/src/index.ts +83 -0
- package/src/navigation-container.tsx +35 -0
- package/src/shared/header-bar.tsx +34 -0
- package/src/shared/routes.ts +25 -0
- package/src/shared/scene-page.tsx +27 -0
- package/src/shared/types.ts +17 -0
- package/src/shared/use-loaded-routes.ts +14 -0
- package/src/shared/use-pop-to-top-on-blur.ts +45 -0
- package/src/split-view/create-split-view-navigator.tsx +99 -0
- package/src/split-view/split-view-router.ts +73 -0
- package/src/split-view/split-view.tsx +137 -0
- package/src/split-view/types.ts +100 -0
- package/src/stack/create-stack-navigator.tsx +80 -0
- package/src/stack/stack-pages.ts +140 -0
- package/src/stack/stack-view.tsx +202 -0
- package/src/stack/sync-navigation-stack.ts +117 -0
- package/src/stack/types.ts +131 -0
- package/src/static-navigation.tsx +26 -0
- package/src/tabs/create-tab-navigator.tsx +69 -0
- package/src/tabs/tab-view.tsx +126 -0
- package/src/tabs/types.ts +120 -0
- package/src/theme.ts +31 -0
package/README.md
ADDED
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/gtkx-org/gtkx/main/logo.svg" alt="GTKX" width="100" />
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<h1 align="center">GTKX</h1>
|
|
6
|
+
|
|
7
|
+
<p align="center">
|
|
8
|
+
The React framework for Linux, built on GTK.<br />
|
|
9
|
+
Write native GTK4 desktop applications with React and TypeScript.
|
|
10
|
+
Real GTK widgets, the GNOME stack, and standard web tooling.
|
|
11
|
+
</p>
|
|
12
|
+
|
|
13
|
+
<p align="center">
|
|
14
|
+
<a href="https://www.npmjs.com/package/create-gtkx"><img src="https://img.shields.io/npm/v/create-gtkx?color=cb3837&logo=npm&label=create-gtkx" alt="npm version" /></a>
|
|
15
|
+
<a href="https://www.npmjs.com/package/create-gtkx"><img src="https://img.shields.io/npm/dm/create-gtkx?color=cb3837&logo=npm&label=downloads" alt="npm downloads" /></a>
|
|
16
|
+
<img src="https://img.shields.io/badge/node-%E2%89%A524-339933?logo=node.js&logoColor=white" alt="Node >= 24" />
|
|
17
|
+
<a href="https://github.com/gtkx-org/gtkx/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MPL--2.0-blue.svg" alt="License: MPL-2.0" /></a>
|
|
18
|
+
<a href="https://github.com/gtkx-org/gtkx/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/gtkx-org/gtkx/ci.yml?branch=main&logo=github&label=CI" alt="CI status" /></a>
|
|
19
|
+
<img src="https://img.shields.io/badge/TypeScript-strict-3178c6?logo=typescript&logoColor=white" alt="TypeScript" />
|
|
20
|
+
</p>
|
|
21
|
+
|
|
22
|
+
<p align="center">
|
|
23
|
+
<a href="https://gtkx.dev">Homepage</a> ·
|
|
24
|
+
<a href="https://gtkx.dev/guide/getting-started">Documentation</a> ·
|
|
25
|
+
<a href="https://github.com/gtkx-org/gtkx/tree/main/examples">Examples</a> ·
|
|
26
|
+
<a href="https://github.com/gtkx-org/gtkx/blob/main/CONTRIBUTING.md">Contributing</a>
|
|
27
|
+
</p>
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
<p align="center">
|
|
32
|
+
<img src="https://raw.githubusercontent.com/gtkx-org/gtkx/main/examples/tutorial/assets/screenshot.png" alt="The Tasks app: an Adwaita window with a sidebar of smart views and colored lists on the left, and a boxed task list on the right." />
|
|
33
|
+
</p>
|
|
34
|
+
|
|
35
|
+
<p align="center">
|
|
36
|
+
<em>The Tasks app you build in the <a href="https://gtkx.dev/tutorial/">tutorial</a>.</em>
|
|
37
|
+
</p>
|
|
38
|
+
|
|
39
|
+
## Demo
|
|
40
|
+
|
|
41
|
+
The intrinsic elements in this snippet render GTK4 widgets, and ordinary React hooks and events drive them:
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import * as Gtk from "@gtkx/gi/gtk";
|
|
45
|
+
import { GtkApplication, GtkApplicationWindow, GtkBox, GtkButton, GtkLabel } from "@gtkx/jsx/gtk";
|
|
46
|
+
import { createRoot, quit } from "@gtkx/react";
|
|
47
|
+
import { useState } from "react";
|
|
48
|
+
|
|
49
|
+
const Counter = () => {
|
|
50
|
+
const [count, setCount] = useState(0);
|
|
51
|
+
|
|
52
|
+
return (
|
|
53
|
+
<GtkApplicationWindow
|
|
54
|
+
title="Hello GTKX"
|
|
55
|
+
defaultWidth={400}
|
|
56
|
+
defaultHeight={300}
|
|
57
|
+
onCloseRequest={quit}
|
|
58
|
+
>
|
|
59
|
+
<GtkBox
|
|
60
|
+
orientation={Gtk.Orientation.VERTICAL}
|
|
61
|
+
spacing={20}
|
|
62
|
+
marginTop={40}
|
|
63
|
+
marginBottom={40}
|
|
64
|
+
marginStart={40}
|
|
65
|
+
marginEnd={40}
|
|
66
|
+
valign={Gtk.Align.CENTER}
|
|
67
|
+
halign={Gtk.Align.CENTER}
|
|
68
|
+
>
|
|
69
|
+
<GtkLabel cssClasses={["title-1"]}>Welcome to GTKX!</GtkLabel>
|
|
70
|
+
<GtkLabel cssClasses={["title-2"]}>{`Count: ${count}`}</GtkLabel>
|
|
71
|
+
<GtkButton
|
|
72
|
+
label="Increment"
|
|
73
|
+
onClicked={() => setCount((c) => c + 1)}
|
|
74
|
+
cssClasses={["suggested-action", "pill"]}
|
|
75
|
+
/>
|
|
76
|
+
</GtkBox>
|
|
77
|
+
</GtkApplicationWindow>
|
|
78
|
+
);
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
const App = () => (
|
|
82
|
+
<GtkApplication>
|
|
83
|
+
<Counter />
|
|
84
|
+
</GtkApplication>
|
|
85
|
+
);
|
|
86
|
+
|
|
87
|
+
createRoot().render(<App />);
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
This is the [`hello-world`](https://github.com/gtkx-org/gtkx/tree/main/examples/hello-world) example, with `app.tsx` and `index.tsx` combined into a single snippet. `@gtkx/gi` and `@gtkx/jsx` are per-project bindings generated by the CLI, not packages you install from npm.
|
|
91
|
+
|
|
92
|
+
## Why GTKX
|
|
93
|
+
|
|
94
|
+
### A declarative layer for the GNOME stack
|
|
95
|
+
|
|
96
|
+
GTK4 is mature, and GtkBuilder XML can lay out a static interface, but nothing re-renders that interface when your application state changes, and nothing hot-reloads it as you work. GTKX adds that missing layer, and the tooling around it, on top of the stack you already know:
|
|
97
|
+
|
|
98
|
+
- a React reconciler that exposes every GObject as a JSX element,
|
|
99
|
+
- a CLI for scaffolding, development, and production builds,
|
|
100
|
+
- a dev server with Fast Refresh that patches your running UI in place,
|
|
101
|
+
- CSS-in-JS styling, React Spring animations, React Navigation stack, tab, drawer, and split view navigators, and high-level list, grid, and dialog components,
|
|
102
|
+
- a Testing Library-style API for querying and driving your widgets in tests,
|
|
103
|
+
- and a Model Context Protocol (MCP) server that exposes your live app to AI agents.
|
|
104
|
+
|
|
105
|
+
### The full GNOME API surface
|
|
106
|
+
|
|
107
|
+
React Native and similar frameworks hide the native toolkit so one API can run everywhere. GTKX exposes it: GTK4, Adwaita, and any other GObject-Introspection library on your system. Linux-only by design.
|
|
108
|
+
|
|
109
|
+
### Why Node.js, and why generated bindings
|
|
110
|
+
|
|
111
|
+
GTKX runs on Node.js, which puts native modules, the npm ecosystem, and the tooling built for Node.js APIs within reach. GJS is GNOME's own runtime, built on SpiderMonkey rather than V8; node-gtk runs on Node.js but is lightly maintained, on the older nan/V8 ABI rather than N-API, and still centered on GTK3. The [Why GTKX guide](https://gtkx.dev/guide/why-gtkx) covers what running on Node.js means day to day.
|
|
112
|
+
|
|
113
|
+
GTKX generates the TypeScript types and the native FFI calls from the same GObject-Introspection data, so the types cannot drift from the calls they back. Codegen covers the whole GTK4 and Adwaita surface.
|
|
114
|
+
|
|
115
|
+
At runtime, the native Rust core calls straight into the system GTK4, Adwaita, and GLib libraries through libffi, without loading libgirepository at all.
|
|
116
|
+
|
|
117
|
+
## Quick start
|
|
118
|
+
|
|
119
|
+
GTKX is Linux-only and needs Node.js 24 or later. See [Requirements](#requirements).
|
|
120
|
+
|
|
121
|
+
Scaffold a new app with the `create-gtkx` initializer:
|
|
122
|
+
|
|
123
|
+
```sh
|
|
124
|
+
npm create gtkx
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
The same command works with other package managers: `pnpm create gtkx` or `yarn create gtkx`.
|
|
128
|
+
|
|
129
|
+
Then run your new app:
|
|
130
|
+
|
|
131
|
+
```sh
|
|
132
|
+
cd my-app
|
|
133
|
+
npm run dev
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
To go further, follow the [tutorial](https://gtkx.dev/tutorial/).
|
|
137
|
+
|
|
138
|
+
## Documentation
|
|
139
|
+
|
|
140
|
+
The documentation at **[gtkx.dev](https://gtkx.dev)** includes a step-by-step tutorial that builds a complete GNOME app, from scaffolding to packaging and shipping, plus guides and a full API reference.
|
|
141
|
+
|
|
142
|
+
**[Read the docs →](https://gtkx.dev/guide/why-gtkx)**
|
|
143
|
+
|
|
144
|
+
## Requirements
|
|
145
|
+
|
|
146
|
+
GTKX is Linux-only. You need:
|
|
147
|
+
|
|
148
|
+
- Linux with the GTK4 (4.20 or later) and GLib development libraries, plus Adwaita (1.8 or later) once your project binds `Adw-1`
|
|
149
|
+
- Node.js 24 or later
|
|
150
|
+
|
|
151
|
+
The `@gtkx/native` addon ships prebuilt for x64 and arm64 glibc Linux; other targets need to build it from the GTKX repository, which requires a Rust toolchain.
|
|
152
|
+
|
|
153
|
+
## Examples
|
|
154
|
+
|
|
155
|
+
Explore the [example apps](https://github.com/gtkx-org/gtkx/tree/main/examples):
|
|
156
|
+
|
|
157
|
+
- [`hello-world`](https://github.com/gtkx-org/gtkx/tree/main/examples/hello-world): the counter above.
|
|
158
|
+
- [`gtk-demo`](https://github.com/gtkx-org/gtkx/tree/main/examples/gtk-demo): a React port of the official GTK4 widget showcase, covering lists, dialogs, gestures, CSS, and OpenGL.
|
|
159
|
+
- [`browser`](https://github.com/gtkx-org/gtkx/tree/main/examples/browser): a WebKitWebView-based web browser.
|
|
160
|
+
- [`animations`](https://github.com/gtkx-org/gtkx/tree/main/examples/animations): a tour of `@gtkx/animated`, React Spring animations driven by the GTK frame clock.
|
|
161
|
+
- [`navigation`](https://github.com/gtkx-org/gtkx/tree/main/examples/navigation): a tour of `@gtkx/navigation`, React Navigation's stack, tab, and drawer navigators rendered with libadwaita.
|
|
162
|
+
- [`tutorial`](https://github.com/gtkx-org/gtkx/tree/main/examples/tutorial): the Tasks app the documentation builds.
|
|
163
|
+
|
|
164
|
+
## Status
|
|
165
|
+
|
|
166
|
+
GTKX is stable and ready for production use.
|
|
167
|
+
|
|
168
|
+
## Contributing
|
|
169
|
+
|
|
170
|
+
Contributions are welcome. See [CONTRIBUTING.md](https://github.com/gtkx-org/gtkx/blob/main/CONTRIBUTING.md), the [Code of Conduct](https://github.com/gtkx-org/gtkx/blob/main/CODE_OF_CONDUCT.md), and the [security policy](https://github.com/gtkx-org/gtkx/blob/main/SECURITY.md). Building the repo needs Node.js 24 or later, pnpm, and a Rust toolchain.
|
|
171
|
+
|
|
172
|
+
## License
|
|
173
|
+
|
|
174
|
+
GTKX is licensed under [MPL-2.0](https://github.com/gtkx-org/gtkx/blob/main/LICENSE).
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { DrawerNavigationState, NavigatorTypeBagBase, ParamListBase, StaticConfig, StaticScreenFactory, TypedNavigator } from "@react-navigation/core";
|
|
2
|
+
import type { ReactNode } from "react";
|
|
3
|
+
import type { DrawerNavigationEventMap, DrawerNavigationOptions, DrawerNavigationProp, DrawerNavigatorProps } from "./types.js";
|
|
4
|
+
/** Type bag describing the drawer navigator to React Navigation's typed APIs. */
|
|
5
|
+
type DrawerTypeBag<ParamList extends ParamListBase = ParamListBase, NavigatorID extends string | undefined = string | undefined> = {
|
|
6
|
+
/** Route names and their params. */
|
|
7
|
+
ParamList: ParamList;
|
|
8
|
+
/** Optional navigator id. */
|
|
9
|
+
NavigatorID: NavigatorID;
|
|
10
|
+
/** Shape of the navigator state. */
|
|
11
|
+
State: DrawerNavigationState<ParamList>;
|
|
12
|
+
/** Per-screen options. */
|
|
13
|
+
ScreenOptions: DrawerNavigationOptions;
|
|
14
|
+
/** Events the navigator emits. */
|
|
15
|
+
EventMap: DrawerNavigationEventMap;
|
|
16
|
+
/** Navigation object per route. */
|
|
17
|
+
NavigationList: {
|
|
18
|
+
[RouteName in keyof ParamList]: DrawerNavigationProp<ParamList, RouteName, NavigatorID>;
|
|
19
|
+
};
|
|
20
|
+
/** The navigator component. */
|
|
21
|
+
Navigator: typeof DrawerNavigator;
|
|
22
|
+
};
|
|
23
|
+
/** Declares a typed screen of a drawer navigator for the static configuration API. */
|
|
24
|
+
declare const createDrawerScreen: StaticScreenFactory<DrawerTypeBag>;
|
|
25
|
+
/** Renders the screens of a {@link createDrawerNavigator} beside a sidebar in an `AdwOverlaySplitView`. */
|
|
26
|
+
declare function DrawerNavigator({ drawerContent, collapsed, sidebarPosition, pinSidebar, minSidebarWidth, maxSidebarWidth, sidebarWidthFraction, defaultStatus, ...options }: DrawerNavigatorProps): ReactNode;
|
|
27
|
+
/** Creates a drawer navigator rendered with `AdwOverlaySplitView`: a sidebar listing the screens beside the content. */
|
|
28
|
+
declare function createDrawerNavigator<const ParamList extends ParamListBase, const NavigatorID extends string | undefined = string | undefined, const TypeBag extends NavigatorTypeBagBase = DrawerTypeBag<ParamList, NavigatorID>, const Config extends StaticConfig<TypeBag> | undefined = undefined>(config?: Config): TypedNavigator<TypeBag, Config>;
|
|
29
|
+
export { createDrawerNavigator, createDrawerScreen, DrawerNavigator, type DrawerTypeBag };
|
|
30
|
+
//# sourceMappingURL=create-drawer-navigator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"create-drawer-navigator.d.ts","sourceRoot":"","sources":["../../src/drawer/create-drawer-navigator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAER,qBAAqB,EAErB,oBAAoB,EACpB,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EACR,wBAAwB,EACxB,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACvB,MAAM,YAAY,CAAC;AAIpB,iFAAiF;AACjF,KAAK,aAAa,CACd,SAAS,SAAS,aAAa,GAAG,aAAa,EAC/C,WAAW,SAAS,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,IAC3D;IACA,oCAAoC;IACpC,SAAS,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,WAAW,EAAE,WAAW,CAAC;IACzB,oCAAoC;IACpC,KAAK,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IACxC,0BAA0B;IAC1B,aAAa,EAAE,uBAAuB,CAAC;IACvC,kCAAkC;IAClC,QAAQ,EAAE,wBAAwB,CAAC;IACnC,mCAAmC;IACnC,cAAc,EAAE;SACX,SAAS,IAAI,MAAM,SAAS,GAAG,oBAAoB,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW,CAAC;KAC1F,CAAC;IACF,+BAA+B;IAC/B,SAAS,EAAE,OAAO,eAAe,CAAC;CACrC,CAAC;AAEF,sFAAsF;AACtF,QAAA,MAAM,kBAAkB,EAAE,mBAAmB,CAAC,aAAa,CAAwC,CAAC;AAapG,2GAA2G;AAC3G,iBAAS,eAAe,CAAC,EACrB,aAAa,EACb,SAAS,EACT,eAAe,EACf,UAAU,EACV,eAAe,EACf,eAAe,EACf,oBAAoB,EACpB,aAAa,EACb,GAAG,OAAO,EACb,EAAE,oBAAoB,GAAG,SAAS,CA2BlC;AAED,wHAAwH;AACxH,iBAAS,qBAAqB,CAC1B,KAAK,CAAC,SAAS,SAAS,aAAa,EACrC,KAAK,CAAC,WAAW,SAAS,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,EACjE,KAAK,CAAC,OAAO,SAAS,oBAAoB,GAAG,aAAa,CAAC,SAAS,EAAE,WAAW,CAAC,EAClF,KAAK,CAAC,MAAM,SAAS,YAAY,CAAC,OAAO,CAAC,GAAG,SAAS,GAAG,SAAS,EACpE,MAAM,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC,OAAO,EAAE,MAAM,CAAC,CAElD;AAcD,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,eAAe,EAAE,KAAK,aAAa,EAAE,CAAC"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createNavigatorFactory, createScreenFactory, useNavigationBuilder } from "@react-navigation/core";
|
|
3
|
+
import { useEffect, useState } from "react";
|
|
4
|
+
import { createDrawerRouter } from "./drawer-router.js";
|
|
5
|
+
import { DrawerView } from "./drawer-view.js";
|
|
6
|
+
/** Declares a typed screen of a drawer navigator for the static configuration API. */
|
|
7
|
+
const createDrawerScreen = createScreenFactory();
|
|
8
|
+
const useDrawerRouter = (isCollapsed) => {
|
|
9
|
+
const [flag] = useState(() => new CollapsedFlag(isCollapsed));
|
|
10
|
+
const [createRouter] = useState(() => createDrawerRouter(() => flag.isCollapsed));
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
flag.update(isCollapsed);
|
|
13
|
+
}, [flag, isCollapsed]);
|
|
14
|
+
return createRouter;
|
|
15
|
+
};
|
|
16
|
+
/** Renders the screens of a {@link createDrawerNavigator} beside a sidebar in an `AdwOverlaySplitView`. */
|
|
17
|
+
function DrawerNavigator({ drawerContent, collapsed, sidebarPosition, pinSidebar, minSidebarWidth, maxSidebarWidth, sidebarWidthFraction, defaultStatus, ...options }) {
|
|
18
|
+
const createRouter = useDrawerRouter(collapsed === true);
|
|
19
|
+
const { state, descriptors, navigation, NavigationContent } = useNavigationBuilder(createRouter, { ...options, defaultStatus: defaultStatus ?? (collapsed === true ? "closed" : "open") });
|
|
20
|
+
return (_jsx(NavigationContent, { children: _jsx(DrawerView, { state: state, navigation: navigation, descriptors: descriptors, drawerContent: drawerContent, collapsed: collapsed, sidebarPosition: sidebarPosition, pinSidebar: pinSidebar, minSidebarWidth: minSidebarWidth, maxSidebarWidth: maxSidebarWidth, sidebarWidthFraction: sidebarWidthFraction }) }));
|
|
21
|
+
}
|
|
22
|
+
/** Creates a drawer navigator rendered with `AdwOverlaySplitView`: a sidebar listing the screens beside the content. */
|
|
23
|
+
function createDrawerNavigator(config) {
|
|
24
|
+
return createNavigatorFactory(DrawerNavigator)(config);
|
|
25
|
+
}
|
|
26
|
+
class CollapsedFlag {
|
|
27
|
+
isCollapsed;
|
|
28
|
+
constructor(isCollapsed) {
|
|
29
|
+
this.isCollapsed = isCollapsed;
|
|
30
|
+
}
|
|
31
|
+
update(isCollapsed) {
|
|
32
|
+
this.isCollapsed = isCollapsed;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
export { createDrawerNavigator, createDrawerScreen, DrawerNavigator };
|
|
36
|
+
//# sourceMappingURL=create-drawer-navigator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"create-drawer-navigator.js","sourceRoot":"","sources":["../../src/drawer/create-drawer-navigator.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC3G,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQ5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAyB9C,sFAAsF;AACtF,MAAM,kBAAkB,GAAuC,mBAAmB,EAAiB,CAAC;AAEpG,MAAM,eAAe,GAAG,CAAC,WAAoB,EAAuB,EAAE;IAClE,MAAM,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC;IAC9D,MAAM,CAAC,YAAY,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IAElF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAExB,OAAO,YAAY,CAAC;AACxB,CAAC,CAAC;AAEF,2GAA2G;AAC3G,SAAS,eAAe,CAAC,EACrB,aAAa,EACb,SAAS,EACT,eAAe,EACf,UAAU,EACV,eAAe,EACf,eAAe,EACf,oBAAoB,EACpB,aAAa,EACb,GAAG,OAAO,EACS;IACnB,MAAM,YAAY,GAAG,eAAe,CAAC,SAAS,KAAK,IAAI,CAAC,CAAC;IAEzD,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,CAMhF,YAAY,EAAE,EAAE,GAAG,OAAO,EAAE,aAAa,EAAE,aAAa,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAE1G,OAAO,CACH,KAAC,iBAAiB,cACd,KAAC,UAAU,IACP,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,eAAe,EAAE,eAAe,EAChC,oBAAoB,EAAE,oBAAoB,GAC5C,GACc,CACvB,CAAC;AACN,CAAC;AAED,wHAAwH;AACxH,SAAS,qBAAqB,CAK5B,MAAe;IACb,OAAO,sBAAsB,CAAC,eAAe,CAAC,CAAC,MAAM,CAAoC,CAAC;AAC9F,CAAC;AAED,MAAM,aAAa;IACf,WAAW,CAAU;IAErB,YAAY,WAAoB;QAC5B,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IACnC,CAAC;IAED,MAAM,CAAC,WAAoB;QACvB,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IACnC,CAAC;CACJ;AAED,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,eAAe,EAAsB,CAAC","sourcesContent":["import type {\n DrawerActionHelpers,\n DrawerNavigationState,\n DrawerRouterOptions,\n NavigatorTypeBagBase,\n ParamListBase,\n StaticConfig,\n StaticScreenFactory,\n TypedNavigator,\n} from \"@react-navigation/core\";\nimport type { ReactNode } from \"react\";\nimport { createNavigatorFactory, createScreenFactory, useNavigationBuilder } from \"@react-navigation/core\";\nimport { useEffect, useState } from \"react\";\nimport type { DrawerRouterFactory } from \"./drawer-router.js\";\nimport type {\n DrawerNavigationEventMap,\n DrawerNavigationOptions,\n DrawerNavigationProp,\n DrawerNavigatorProps,\n} from \"./types.js\";\nimport { createDrawerRouter } from \"./drawer-router.js\";\nimport { DrawerView } from \"./drawer-view.js\";\n\n/** Type bag describing the drawer navigator to React Navigation's typed APIs. */\ntype DrawerTypeBag<\n ParamList extends ParamListBase = ParamListBase,\n NavigatorID extends string | undefined = string | undefined,\n> = {\n /** Route names and their params. */\n ParamList: ParamList;\n /** Optional navigator id. */\n NavigatorID: NavigatorID;\n /** Shape of the navigator state. */\n State: DrawerNavigationState<ParamList>;\n /** Per-screen options. */\n ScreenOptions: DrawerNavigationOptions;\n /** Events the navigator emits. */\n EventMap: DrawerNavigationEventMap;\n /** Navigation object per route. */\n NavigationList: {\n [RouteName in keyof ParamList]: DrawerNavigationProp<ParamList, RouteName, NavigatorID>;\n };\n /** The navigator component. */\n Navigator: typeof DrawerNavigator;\n};\n\n/** Declares a typed screen of a drawer navigator for the static configuration API. */\nconst createDrawerScreen: StaticScreenFactory<DrawerTypeBag> = createScreenFactory<DrawerTypeBag>();\n\nconst useDrawerRouter = (isCollapsed: boolean): DrawerRouterFactory => {\n const [flag] = useState(() => new CollapsedFlag(isCollapsed));\n const [createRouter] = useState(() => createDrawerRouter(() => flag.isCollapsed));\n\n useEffect(() => {\n flag.update(isCollapsed);\n }, [flag, isCollapsed]);\n\n return createRouter;\n};\n\n/** Renders the screens of a {@link createDrawerNavigator} beside a sidebar in an `AdwOverlaySplitView`. */\nfunction DrawerNavigator({\n drawerContent,\n collapsed,\n sidebarPosition,\n pinSidebar,\n minSidebarWidth,\n maxSidebarWidth,\n sidebarWidthFraction,\n defaultStatus,\n ...options\n}: DrawerNavigatorProps): ReactNode {\n const createRouter = useDrawerRouter(collapsed === true);\n\n const { state, descriptors, navigation, NavigationContent } = useNavigationBuilder<\n DrawerNavigationState<ParamListBase>,\n DrawerRouterOptions,\n DrawerActionHelpers<ParamListBase>,\n DrawerNavigationOptions,\n DrawerNavigationEventMap\n >(createRouter, { ...options, defaultStatus: defaultStatus ?? (collapsed === true ? \"closed\" : \"open\") });\n\n return (\n <NavigationContent>\n <DrawerView\n state={state}\n navigation={navigation}\n descriptors={descriptors}\n drawerContent={drawerContent}\n collapsed={collapsed}\n sidebarPosition={sidebarPosition}\n pinSidebar={pinSidebar}\n minSidebarWidth={minSidebarWidth}\n maxSidebarWidth={maxSidebarWidth}\n sidebarWidthFraction={sidebarWidthFraction}\n />\n </NavigationContent>\n );\n}\n\n/** Creates a drawer navigator rendered with `AdwOverlaySplitView`: a sidebar listing the screens beside the content. */\nfunction createDrawerNavigator<\n const ParamList extends ParamListBase,\n const NavigatorID extends string | undefined = string | undefined,\n const TypeBag extends NavigatorTypeBagBase = DrawerTypeBag<ParamList, NavigatorID>,\n const Config extends StaticConfig<TypeBag> | undefined = undefined,\n>(config?: Config): TypedNavigator<TypeBag, Config> {\n return createNavigatorFactory(DrawerNavigator)(config) as TypedNavigator<TypeBag, Config>;\n}\n\nclass CollapsedFlag {\n isCollapsed: boolean;\n\n constructor(isCollapsed: boolean) {\n this.isCollapsed = isCollapsed;\n }\n\n update(isCollapsed: boolean): void {\n this.isCollapsed = isCollapsed;\n }\n}\n\nexport { createDrawerNavigator, createDrawerScreen, DrawerNavigator, type DrawerTypeBag };\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer-collapsed-context.d.ts","sourceRoot":"","sources":["../../src/drawer/drawer-collapsed-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,OAAO,CAAC;AAEpD,QAAA,MAAM,sBAAsB,EAAE,OAAO,CAAC,OAAO,CAAwB,CAAC;AAEtE,OAAO,EAAE,sBAAsB,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer-collapsed-context.js","sourceRoot":"","sources":["../../src/drawer/drawer-collapsed-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,aAAa,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,sBAAsB,GAAqB,aAAa,CAAC,KAAK,CAAC,CAAC;AAEtE,OAAO,EAAE,sBAAsB,EAAE,CAAC","sourcesContent":["import { type Context, createContext } from \"react\";\n\nconst DrawerCollapsedContext: Context<boolean> = createContext(false);\n\nexport { DrawerCollapsedContext };\n"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
import type { DrawerContentProps } from "./types.js";
|
|
3
|
+
/** Lists the drawer routes as rows of a `GtkListBox`; activating a row navigates to its route. */
|
|
4
|
+
declare const DrawerItemList: ({ state, navigation, descriptors }: DrawerContentProps) => ReactNode;
|
|
5
|
+
export { DrawerItemList };
|
|
6
|
+
//# sourceMappingURL=drawer-item-list.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer-item-list.d.ts","sourceRoot":"","sources":["../../src/drawer/drawer-item-list.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,kBAAkB,EAA6C,MAAM,YAAY,CAAC;AAgDhG,kGAAkG;AAClG,QAAA,MAAM,cAAc,GAAI,oCAAoC,kBAAkB,KAAG,SAgBhF,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as Gtk from "@gtkx/gi/gtk";
|
|
3
|
+
import { GtkBox, GtkImage, GtkLabel, GtkListBox } from "@gtkx/jsx/gtk";
|
|
4
|
+
import { CommonActions, DrawerActions } from "@react-navigation/core";
|
|
5
|
+
import { useCallback, useContext } from "react";
|
|
6
|
+
import { requireDescriptor } from "../shared/routes.js";
|
|
7
|
+
import { DrawerCollapsedContext } from "./drawer-collapsed-context.js";
|
|
8
|
+
const didNavigateToRow = (navigation, state, rowIndex) => {
|
|
9
|
+
const route = state.routes[rowIndex];
|
|
10
|
+
if (route === undefined) {
|
|
11
|
+
return false;
|
|
12
|
+
}
|
|
13
|
+
const event = navigation.emit({ type: "drawerItemPress", target: route.key, canPreventDefault: true });
|
|
14
|
+
if (event.defaultPrevented) {
|
|
15
|
+
return false;
|
|
16
|
+
}
|
|
17
|
+
navigation.dispatch({ ...CommonActions.navigate(route.name, route.params), target: state.key });
|
|
18
|
+
return true;
|
|
19
|
+
};
|
|
20
|
+
const useDrawerItemPress = (navigation, isCollapsed) => useCallback((row) => {
|
|
21
|
+
const state = navigation.getState();
|
|
22
|
+
if (!didNavigateToRow(navigation, state, row.getIndex())) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
if (isCollapsed) {
|
|
26
|
+
navigation.dispatch({ ...DrawerActions.closeDrawer(), target: state.key });
|
|
27
|
+
}
|
|
28
|
+
}, [navigation, isCollapsed]);
|
|
29
|
+
const DrawerItem = ({ descriptor }) => {
|
|
30
|
+
const { route, options } = descriptor;
|
|
31
|
+
return (_jsxs(GtkBox, { spacing: 12, children: [options.drawerIcon === undefined ? null : _jsx(GtkImage, { iconName: options.drawerIcon }), _jsx(GtkLabel, { label: options.drawerLabel ?? options.title ?? route.name, xalign: 0 })] }));
|
|
32
|
+
};
|
|
33
|
+
/** Lists the drawer routes as rows of a `GtkListBox`; activating a row navigates to its route. */
|
|
34
|
+
const DrawerItemList = ({ state, navigation, descriptors }) => {
|
|
35
|
+
const isCollapsed = useContext(DrawerCollapsedContext);
|
|
36
|
+
const onRowActivated = useDrawerItemPress(navigation, isCollapsed);
|
|
37
|
+
return (_jsx(GtkListBox, { cssClasses: ["navigation-sidebar"], selectedIndex: state.index, selectionMode: Gtk.SelectionMode.SINGLE, onRowActivated: onRowActivated, children: state.routes.map((route) => (_jsx(DrawerItem, { descriptor: requireDescriptor(descriptors, route.key) }, route.key))) }));
|
|
38
|
+
};
|
|
39
|
+
export { DrawerItemList };
|
|
40
|
+
//# sourceMappingURL=drawer-item-list.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer-item-list.js","sourceRoot":"","sources":["../../src/drawer/drawer-item-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { NavigationState } from \"@react-navigation/core\";\nimport type { ReactNode } from \"react\";\nimport * as Gtk from \"@gtkx/gi/gtk\";\nimport { GtkBox, GtkImage, GtkLabel, GtkListBox } from \"@gtkx/jsx/gtk\";\nimport { CommonActions, DrawerActions } from \"@react-navigation/core\";\nimport { useCallback, useContext } from \"react\";\nimport type { DrawerContentProps, DrawerDescriptor, DrawerNavigationHelpers } from \"./types.js\";\nimport { requireDescriptor } from \"../shared/routes.js\";\nimport { DrawerCollapsedContext } from \"./drawer-collapsed-context.js\";\n\ntype RowActivated = (row: Gtk.ListBoxRow) => void;\n\nconst didNavigateToRow = (navigation: DrawerNavigationHelpers, state: NavigationState, rowIndex: number): boolean => {\n const route = state.routes[rowIndex];\n\n if (route === undefined) {\n return false;\n }\n\n const event = navigation.emit({ type: \"drawerItemPress\", target: route.key, canPreventDefault: true });\n\n if (event.defaultPrevented) {\n return false;\n }\n\n navigation.dispatch({ ...CommonActions.navigate(route.name, route.params), target: state.key });\n\n return true;\n};\n\nconst useDrawerItemPress = (navigation: DrawerNavigationHelpers, isCollapsed: boolean): RowActivated =>\n useCallback((row: Gtk.ListBoxRow) => {\n const state = navigation.getState();\n\n if (!didNavigateToRow(navigation, state, row.getIndex())) {\n return;\n }\n\n if (isCollapsed) {\n navigation.dispatch({ ...DrawerActions.closeDrawer(), target: state.key });\n }\n }, [navigation, isCollapsed]);\n\nconst DrawerItem = ({ descriptor }: { descriptor: DrawerDescriptor }): ReactNode => {\n const { route, options } = descriptor;\n\n return (\n <GtkBox spacing={12}>\n {options.drawerIcon === undefined ? null : <GtkImage iconName={options.drawerIcon} />}\n <GtkLabel label={options.drawerLabel ?? options.title ?? route.name} xalign={0} />\n </GtkBox>\n );\n};\n\n/** Lists the drawer routes as rows of a `GtkListBox`; activating a row navigates to its route. */\nconst DrawerItemList = ({ state, navigation, descriptors }: DrawerContentProps): ReactNode => {\n const isCollapsed = useContext(DrawerCollapsedContext);\n const onRowActivated = useDrawerItemPress(navigation, isCollapsed);\n\n return (\n <GtkListBox\n cssClasses={[\"navigation-sidebar\"]}\n selectedIndex={state.index}\n selectionMode={Gtk.SelectionMode.SINGLE}\n onRowActivated={onRowActivated}\n >\n {state.routes.map((route) => (\n <DrawerItem key={route.key} descriptor={requireDescriptor(descriptors, route.key)} />\n ))}\n </GtkListBox>\n );\n};\n\nexport { DrawerItemList };\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { DrawerRouter } from "@react-navigation/routers";
|
|
2
|
+
type DrawerRouterFactory = typeof DrawerRouter;
|
|
3
|
+
declare const createDrawerRouter: (isCollapsed: () => boolean) => DrawerRouterFactory;
|
|
4
|
+
export { createDrawerRouter, type DrawerRouterFactory };
|
|
5
|
+
//# sourceMappingURL=drawer-router.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer-router.d.ts","sourceRoot":"","sources":["../../src/drawer/drawer-router.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAIzD,KAAK,mBAAmB,GAAG,OAAO,YAAY,CAAC;AAiF/C,QAAA,MAAM,kBAAkB,GAAI,aAAa,MAAM,OAAO,KAAG,mBACD,CAAC;AAEzD,OAAO,EAAE,kBAAkB,EAAE,KAAK,mBAAmB,EAAE,CAAC"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { DrawerRouter } from "@react-navigation/routers";
|
|
2
|
+
import { getDrawerStatus } from "./drawer-status.js";
|
|
3
|
+
const NAVIGATING_ACTIONS = new Set(["JUMP_TO", "NAVIGATE", "NAVIGATE_DEPRECATED"]);
|
|
4
|
+
const isSameRoutes = (left, right) => left.index === right.index &&
|
|
5
|
+
left.routes.length === right.routes.length &&
|
|
6
|
+
left.routes.every((route, index) => right.routes[index]?.key === route.key);
|
|
7
|
+
const reopenSidebar = (state) => {
|
|
8
|
+
if (state.default === "open") {
|
|
9
|
+
return { ...state, history: state.history.filter((entry) => entry.type !== "drawer") };
|
|
10
|
+
}
|
|
11
|
+
return { ...state, history: [...state.history, { type: "drawer", status: "open" }] };
|
|
12
|
+
};
|
|
13
|
+
const wasSidebarHidden = (before, after) => getDrawerStatus(before) === "open" && getDrawerStatus(after) === "closed";
|
|
14
|
+
const wasSidebarShown = (before, after) => getDrawerStatus(before) === "closed" && getDrawerStatus(after) === "open";
|
|
15
|
+
const keepSidebarShown = (before, after, isCollapsed) => !isCollapsed && wasSidebarHidden(before, after) ? reopenSidebar(after) : after;
|
|
16
|
+
const keepSidebarShownInResult = (before, after, isCollapsed) => after?.stale === false ? keepSidebarShown(before, after, isCollapsed) : after;
|
|
17
|
+
const shouldPassBackThrough = (state, after, isCollapsed) => !isCollapsed && after?.stale === false && isSameRoutes(state, after) && wasSidebarShown(state, after);
|
|
18
|
+
const withoutDrawerEntry = (state) => ({
|
|
19
|
+
...state,
|
|
20
|
+
history: state.history.filter((entry) => entry.type !== "drawer"),
|
|
21
|
+
});
|
|
22
|
+
const closedAgain = (state) => ({
|
|
23
|
+
...state,
|
|
24
|
+
history: [...state.history, { type: "drawer", status: "closed" }],
|
|
25
|
+
});
|
|
26
|
+
const backPastDrawer = (state, retry) => {
|
|
27
|
+
const after = retry(withoutDrawerEntry(state));
|
|
28
|
+
return after?.stale === false ? closedAgain(after) : after;
|
|
29
|
+
};
|
|
30
|
+
const resolveAction = ({ state, action, after, isCollapsed, retry }) => {
|
|
31
|
+
if (action.type === "GO_BACK") {
|
|
32
|
+
return shouldPassBackThrough(state, after, isCollapsed) ? backPastDrawer(state, retry) : after;
|
|
33
|
+
}
|
|
34
|
+
return NAVIGATING_ACTIONS.has(action.type) ? keepSidebarShownInResult(state, after, isCollapsed) : after;
|
|
35
|
+
};
|
|
36
|
+
const withShownSidebar = (router, isCollapsed) => ({
|
|
37
|
+
...router,
|
|
38
|
+
getStateForAction: (state, action, config) => resolveAction({
|
|
39
|
+
state,
|
|
40
|
+
action,
|
|
41
|
+
after: router.getStateForAction(state, action, config),
|
|
42
|
+
isCollapsed: isCollapsed(),
|
|
43
|
+
retry: (retried) => router.getStateForAction(retried, action, config),
|
|
44
|
+
}),
|
|
45
|
+
getStateForRouteFocus: (state, key) => keepSidebarShown(state, router.getStateForRouteFocus(state, key), isCollapsed()),
|
|
46
|
+
});
|
|
47
|
+
const createDrawerRouter = (isCollapsed) => (options) => withShownSidebar(DrawerRouter(options), isCollapsed);
|
|
48
|
+
export { createDrawerRouter };
|
|
49
|
+
//# sourceMappingURL=drawer-router.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer-router.js","sourceRoot":"","sources":["../../src/drawer/drawer-router.ts"],"names":[],"mappings":"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","sourcesContent":["import type { DrawerNavigationState, NavigationAction, ParamListBase, PartialState } from \"@react-navigation/core\";\nimport { DrawerRouter } from \"@react-navigation/routers\";\nimport { getDrawerStatus } from \"./drawer-status.js\";\n\ntype DrawerState = DrawerNavigationState<ParamListBase>;\ntype DrawerRouterFactory = typeof DrawerRouter;\ntype DrawerRouterInstance = ReturnType<DrawerRouterFactory>;\ntype StateResult = DrawerState | PartialState<DrawerState> | null;\ntype Retry = (state: DrawerState) => StateResult;\n\ntype ResolvedAction = {\n state: DrawerState;\n action: NavigationAction;\n after: StateResult;\n isCollapsed: boolean;\n retry: Retry;\n};\n\nconst NAVIGATING_ACTIONS = new Set([\"JUMP_TO\", \"NAVIGATE\", \"NAVIGATE_DEPRECATED\"]);\n\nconst isSameRoutes = (left: DrawerState, right: DrawerState): boolean =>\n left.index === right.index &&\n left.routes.length === right.routes.length &&\n left.routes.every((route, index) => right.routes[index]?.key === route.key);\n\nconst reopenSidebar = (state: DrawerState): DrawerState => {\n if (state.default === \"open\") {\n return { ...state, history: state.history.filter((entry) => entry.type !== \"drawer\") };\n }\n\n return { ...state, history: [...state.history, { type: \"drawer\", status: \"open\" }] };\n};\n\nconst wasSidebarHidden = (before: DrawerState, after: DrawerState): boolean =>\n getDrawerStatus(before) === \"open\" && getDrawerStatus(after) === \"closed\";\n\nconst wasSidebarShown = (before: DrawerState, after: DrawerState): boolean =>\n getDrawerStatus(before) === \"closed\" && getDrawerStatus(after) === \"open\";\n\nconst keepSidebarShown = (before: DrawerState, after: DrawerState, isCollapsed: boolean): DrawerState =>\n !isCollapsed && wasSidebarHidden(before, after) ? reopenSidebar(after) : after;\n\nconst keepSidebarShownInResult = (before: DrawerState, after: StateResult, isCollapsed: boolean): StateResult =>\n after?.stale === false ? keepSidebarShown(before, after, isCollapsed) : after;\n\nconst shouldPassBackThrough = (state: DrawerState, after: StateResult, isCollapsed: boolean): boolean =>\n !isCollapsed && after?.stale === false && isSameRoutes(state, after) && wasSidebarShown(state, after);\n\nconst withoutDrawerEntry = (state: DrawerState): DrawerState => ({\n ...state,\n history: state.history.filter((entry) => entry.type !== \"drawer\"),\n});\n\nconst closedAgain = (state: DrawerState): DrawerState => ({\n ...state,\n history: [...state.history, { type: \"drawer\", status: \"closed\" }],\n});\n\nconst backPastDrawer = (state: DrawerState, retry: Retry): StateResult => {\n const after = retry(withoutDrawerEntry(state));\n\n return after?.stale === false ? closedAgain(after) : after;\n};\n\nconst resolveAction = ({ state, action, after, isCollapsed, retry }: ResolvedAction): StateResult => {\n if (action.type === \"GO_BACK\") {\n return shouldPassBackThrough(state, after, isCollapsed) ? backPastDrawer(state, retry) : after;\n }\n\n return NAVIGATING_ACTIONS.has(action.type) ? keepSidebarShownInResult(state, after, isCollapsed) : after;\n};\n\nconst withShownSidebar = (router: DrawerRouterInstance, isCollapsed: () => boolean): DrawerRouterInstance => ({\n ...router,\n getStateForAction: (state, action, config) =>\n resolveAction({\n state,\n action,\n after: router.getStateForAction(state, action, config),\n isCollapsed: isCollapsed(),\n retry: (retried) => router.getStateForAction(retried, action, config),\n }),\n getStateForRouteFocus: (state, key) =>\n keepSidebarShown(state, router.getStateForRouteFocus(state, key), isCollapsed()),\n});\n\nconst createDrawerRouter = (isCollapsed: () => boolean): DrawerRouterFactory => (options) =>\n withShownSidebar(DrawerRouter(options), isCollapsed);\n\nexport { createDrawerRouter, type DrawerRouterFactory };\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer-status.d.ts","sourceRoot":"","sources":["../../src/drawer/drawer-status.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAO5E,QAAA,MAAM,eAAe,GAAI,OAAO,eAAe,KAAG,YASjD,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const isDrawerEntry = (entry) => typeof entry === "object" && entry !== null && "type" in entry && entry.type === "drawer";
|
|
2
|
+
const getDrawerStatus = (state) => {
|
|
3
|
+
const history = state.history ?? [];
|
|
4
|
+
const entry = history.findLast(isDrawerEntry);
|
|
5
|
+
if (entry !== undefined) {
|
|
6
|
+
return entry.status;
|
|
7
|
+
}
|
|
8
|
+
return "default" in state && state.default === "open" ? "open" : "closed";
|
|
9
|
+
};
|
|
10
|
+
export { getDrawerStatus };
|
|
11
|
+
//# sourceMappingURL=drawer-status.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer-status.js","sourceRoot":"","sources":["../../src/drawer/drawer-status.ts"],"names":[],"mappings":"AAIA,MAAM,aAAa,GAAG,CAAC,KAAc,EAA+B,EAAE,CAClE,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,MAAM,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC;AAE9F,MAAM,eAAe,GAAG,CAAC,KAAsB,EAAgB,EAAE;IAC7D,MAAM,OAAO,GAAuB,KAAK,CAAC,OAAO,IAAI,EAAE,CAAC;IACxD,MAAM,KAAK,GAAG,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;IAE9C,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACtB,OAAO,KAAK,CAAC,MAAM,CAAC;IACxB,CAAC;IAED,OAAO,SAAS,IAAI,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;AAC9E,CAAC,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import type { DrawerStatus, NavigationState } from \"@react-navigation/core\";\n\ntype DrawerHistoryEntry = { type: \"drawer\"; status: DrawerStatus };\n\nconst isDrawerEntry = (entry: unknown): entry is DrawerHistoryEntry =>\n typeof entry === \"object\" && entry !== null && \"type\" in entry && entry.type === \"drawer\";\n\nconst getDrawerStatus = (state: NavigationState): DrawerStatus => {\n const history: readonly unknown[] = state.history ?? [];\n const entry = history.findLast(isDrawerEntry);\n\n if (entry !== undefined) {\n return entry.status;\n }\n\n return \"default\" in state && state.default === \"open\" ? \"open\" : \"closed\";\n};\n\nexport { getDrawerStatus };\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { DrawerNavigationState, ParamListBase } from "@react-navigation/core";
|
|
2
|
+
import type { ReactNode } from "react";
|
|
3
|
+
import type { DrawerDescriptorMap, DrawerNavigationConfig, DrawerNavigationHelpers } from "./types.js";
|
|
4
|
+
type DrawerViewProps = DrawerNavigationConfig & {
|
|
5
|
+
state: DrawerNavigationState<ParamListBase>;
|
|
6
|
+
navigation: DrawerNavigationHelpers;
|
|
7
|
+
descriptors: DrawerDescriptorMap;
|
|
8
|
+
};
|
|
9
|
+
declare const DrawerView: ({ state, navigation, descriptors, drawerContent, ...config }: DrawerViewProps) => ReactNode;
|
|
10
|
+
export { DrawerView };
|
|
11
|
+
//# sourceMappingURL=drawer-view.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer-view.d.ts","sourceRoot":"","sources":["../../src/drawer/drawer-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACnF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYvC,OAAO,KAAK,EAGR,mBAAmB,EACnB,sBAAsB,EACtB,uBAAuB,EAC1B,MAAM,YAAY,CAAC;AAUpB,KAAK,eAAe,GAAG,sBAAsB,GAAG;IAC5C,KAAK,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IAC5C,UAAU,EAAE,uBAAuB,CAAC;IACpC,WAAW,EAAE,mBAAmB,CAAC;CACpC,CAAC;AAiGF,QAAA,MAAM,UAAU,GAAI,8DAA8D,eAAe,KAAG,SAsCnG,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import * as Gtk from "@gtkx/gi/gtk";
|
|
3
|
+
import { AdwHeaderBar, AdwOverlaySplitView, AdwToolbarView, AdwViewStack, AdwWindowTitle, } from "@gtkx/jsx/adw";
|
|
4
|
+
import { GtkButton, GtkScrolledWindow } from "@gtkx/jsx/gtk";
|
|
5
|
+
import { DrawerActions } from "@react-navigation/core";
|
|
6
|
+
import { useCallback, useEffect, useRef } from "react";
|
|
7
|
+
import { HeaderBar } from "../shared/header-bar.js";
|
|
8
|
+
import { getFocusedRoute, requireDescriptor } from "../shared/routes.js";
|
|
9
|
+
import { ScenePage } from "../shared/scene-page.js";
|
|
10
|
+
import { useLoadedRoutes } from "../shared/use-loaded-routes.js";
|
|
11
|
+
import { usePopToTopOnBlur } from "../shared/use-pop-to-top-on-blur.js";
|
|
12
|
+
import { DrawerCollapsedContext } from "./drawer-collapsed-context.js";
|
|
13
|
+
import { DrawerItemList } from "./drawer-item-list.js";
|
|
14
|
+
import { getDrawerStatus } from "./drawer-status.js";
|
|
15
|
+
const PACK_TYPES = { start: Gtk.PackType.START, end: Gtk.PackType.END };
|
|
16
|
+
const useSidebarSync = (navigation) => useCallback((isShown) => {
|
|
17
|
+
const current = navigation.getState();
|
|
18
|
+
const isOpen = getDrawerStatus(current) === "open";
|
|
19
|
+
if (isShown === null || isShown === isOpen) {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
const action = isShown ? DrawerActions.openDrawer() : DrawerActions.closeDrawer();
|
|
23
|
+
navigation.dispatch({ ...action, target: current.key });
|
|
24
|
+
}, [navigation]);
|
|
25
|
+
const useCloseOnNavigate = (state, navigation, isCollapsed) => {
|
|
26
|
+
const focusedKey = getFocusedRoute(state).key;
|
|
27
|
+
const previousKeyRef = useRef(focusedKey);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
const hasChanged = previousKeyRef.current !== focusedKey;
|
|
30
|
+
previousKeyRef.current = focusedKey;
|
|
31
|
+
if (hasChanged && isCollapsed && getDrawerStatus(navigation.getState()) === "open") {
|
|
32
|
+
navigation.dispatch({ ...DrawerActions.closeDrawer(), target: navigation.getState().key });
|
|
33
|
+
}
|
|
34
|
+
}, [focusedKey, isCollapsed, navigation]);
|
|
35
|
+
};
|
|
36
|
+
const DrawerContent = (props) => (_jsx(AdwToolbarView, { topBar: _jsx(AdwHeaderBar, {}), children: _jsx(GtkScrolledWindow, { hscrollbarPolicy: Gtk.PolicyType.NEVER, children: _jsx(DrawerItemList, { ...props }) }) }));
|
|
37
|
+
const DrawerToggle = ({ navigation }) => (_jsx(GtkButton, { iconName: "sidebar-show-symbolic", tooltipText: "Toggle Sidebar", accessibleLabel: "Toggle Sidebar", onClicked: () => {
|
|
38
|
+
navigation.dispatch(DrawerActions.toggleDrawer());
|
|
39
|
+
} }));
|
|
40
|
+
const DrawerHeader = ({ descriptor, navigation }) => {
|
|
41
|
+
const { route, options } = descriptor;
|
|
42
|
+
if (options.headerShown === false) {
|
|
43
|
+
return null;
|
|
44
|
+
}
|
|
45
|
+
if (options.header !== undefined) {
|
|
46
|
+
return _jsx(_Fragment, { children: options.header({ route, navigation: descriptor.navigation, options }) });
|
|
47
|
+
}
|
|
48
|
+
return (_jsx(HeaderBar, { options: options, start: _jsx(DrawerToggle, { navigation: navigation }), titleWidget: _jsx(AdwWindowTitle, { title: options.title ?? route.name }) }));
|
|
49
|
+
};
|
|
50
|
+
const DrawerPage = ({ descriptor, isLoaded }) => {
|
|
51
|
+
const { route, options } = descriptor;
|
|
52
|
+
return (_jsx(ScenePage, { name: route.key, title: options.title ?? route.name, isLoaded: isLoaded || options.lazy === false, render: () => descriptor.render() }));
|
|
53
|
+
};
|
|
54
|
+
const DrawerView = ({ state, navigation, descriptors, drawerContent, ...config }) => {
|
|
55
|
+
const { collapsed = false, sidebarPosition = "start", pinSidebar, minSidebarWidth, maxSidebarWidth } = config;
|
|
56
|
+
const focused = getFocusedRoute(state);
|
|
57
|
+
const descriptor = requireDescriptor(descriptors, focused.key);
|
|
58
|
+
const loaded = useLoadedRoutes(focused.key, state.preloadedRouteKeys);
|
|
59
|
+
const onShowSidebarChanged = useSidebarSync(navigation);
|
|
60
|
+
const contentProps = { state, navigation, descriptors };
|
|
61
|
+
const sidebar = drawerContent === undefined ? _jsx(DrawerContent, { ...contentProps }) : drawerContent(contentProps);
|
|
62
|
+
usePopToTopOnBlur(state, descriptors, navigation);
|
|
63
|
+
useCloseOnNavigate(state, navigation, collapsed);
|
|
64
|
+
return (_jsx(DrawerCollapsedContext, { value: collapsed, children: _jsx(AdwOverlaySplitView, { collapsed: collapsed, showSidebar: getDrawerStatus(state) === "open", sidebarPosition: PACK_TYPES[sidebarPosition], pinSidebar: pinSidebar, minSidebarWidth: minSidebarWidth, maxSidebarWidth: maxSidebarWidth, sidebarWidthFraction: config.sidebarWidthFraction, onNotifyShowSidebar: onShowSidebarChanged, sidebar: _jsx(_Fragment, { children: sidebar }), children: _jsx(AdwToolbarView, { topBar: _jsx(DrawerHeader, { descriptor: descriptor, navigation: navigation }), children: _jsx(AdwViewStack, { visibleChildName: focused.key, children: state.routes.map((route) => (_jsx(DrawerPage, { descriptor: requireDescriptor(descriptors, route.key), isLoaded: loaded.has(route.key) }, route.key))) }) }) }) }));
|
|
65
|
+
};
|
|
66
|
+
export { DrawerView };
|
|
67
|
+
//# sourceMappingURL=drawer-view.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer-view.js","sourceRoot":"","sources":["../../src/drawer/drawer-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { DrawerNavigationState, ParamListBase } from \"@react-navigation/core\";\nimport type { ReactNode } from \"react\";\nimport * as Gtk from \"@gtkx/gi/gtk\";\nimport {\n AdwHeaderBar,\n AdwOverlaySplitView,\n AdwToolbarView,\n AdwViewStack,\n AdwWindowTitle,\n} from \"@gtkx/jsx/adw\";\nimport { GtkButton, GtkScrolledWindow } from \"@gtkx/jsx/gtk\";\nimport { DrawerActions } from \"@react-navigation/core\";\nimport { useCallback, useEffect, useRef } from \"react\";\nimport type {\n DrawerContentProps,\n DrawerDescriptor,\n DrawerDescriptorMap,\n DrawerNavigationConfig,\n DrawerNavigationHelpers,\n} from \"./types.js\";\nimport { HeaderBar } from \"../shared/header-bar.js\";\nimport { getFocusedRoute, requireDescriptor } from \"../shared/routes.js\";\nimport { ScenePage } from \"../shared/scene-page.js\";\nimport { useLoadedRoutes } from \"../shared/use-loaded-routes.js\";\nimport { usePopToTopOnBlur } from \"../shared/use-pop-to-top-on-blur.js\";\nimport { DrawerCollapsedContext } from \"./drawer-collapsed-context.js\";\nimport { DrawerItemList } from \"./drawer-item-list.js\";\nimport { getDrawerStatus } from \"./drawer-status.js\";\n\ntype DrawerViewProps = DrawerNavigationConfig & {\n state: DrawerNavigationState<ParamListBase>;\n navigation: DrawerNavigationHelpers;\n descriptors: DrawerDescriptorMap;\n};\n\ntype DrawerHeaderProps = {\n descriptor: DrawerDescriptor;\n navigation: DrawerNavigationHelpers;\n};\n\ntype DrawerPageProps = {\n descriptor: DrawerDescriptor;\n isLoaded: boolean;\n};\n\nconst PACK_TYPES = { start: Gtk.PackType.START, end: Gtk.PackType.END } as const;\n\nconst useSidebarSync = (navigation: DrawerNavigationHelpers): ((isShown: boolean | null) => void) =>\n useCallback((isShown: boolean | null) => {\n const current = navigation.getState();\n const isOpen = getDrawerStatus(current) === \"open\";\n\n if (isShown === null || isShown === isOpen) {\n return;\n }\n\n const action = isShown ? DrawerActions.openDrawer() : DrawerActions.closeDrawer();\n navigation.dispatch({ ...action, target: current.key });\n }, [navigation]);\n\nconst useCloseOnNavigate = (\n state: DrawerNavigationState<ParamListBase>,\n navigation: DrawerNavigationHelpers,\n isCollapsed: boolean,\n): void => {\n const focusedKey = getFocusedRoute(state).key;\n const previousKeyRef = useRef(focusedKey);\n\n useEffect(() => {\n const hasChanged = previousKeyRef.current !== focusedKey;\n previousKeyRef.current = focusedKey;\n\n if (hasChanged && isCollapsed && getDrawerStatus(navigation.getState()) === \"open\") {\n navigation.dispatch({ ...DrawerActions.closeDrawer(), target: navigation.getState().key });\n }\n }, [focusedKey, isCollapsed, navigation]);\n};\n\nconst DrawerContent = (props: DrawerContentProps): ReactNode => (\n <AdwToolbarView topBar={<AdwHeaderBar />}>\n <GtkScrolledWindow hscrollbarPolicy={Gtk.PolicyType.NEVER}>\n <DrawerItemList {...props} />\n </GtkScrolledWindow>\n </AdwToolbarView>\n);\n\nconst DrawerToggle = ({ navigation }: { navigation: DrawerNavigationHelpers }): ReactNode => (\n <GtkButton\n iconName=\"sidebar-show-symbolic\"\n tooltipText=\"Toggle Sidebar\"\n accessibleLabel=\"Toggle Sidebar\"\n onClicked={() => {\n navigation.dispatch(DrawerActions.toggleDrawer());\n }}\n />\n);\n\nconst DrawerHeader = ({ descriptor, navigation }: DrawerHeaderProps): ReactNode => {\n const { route, options } = descriptor;\n\n if (options.headerShown === false) {\n return null;\n }\n\n if (options.header !== undefined) {\n return <>{options.header({ route, navigation: descriptor.navigation, options })}</>;\n }\n\n return (\n <HeaderBar\n options={options}\n start={<DrawerToggle navigation={navigation} />}\n titleWidget={<AdwWindowTitle title={options.title ?? route.name} />}\n />\n );\n};\n\nconst DrawerPage = ({ descriptor, isLoaded }: DrawerPageProps): ReactNode => {\n const { route, options } = descriptor;\n\n return (\n <ScenePage\n name={route.key}\n title={options.title ?? route.name}\n isLoaded={isLoaded || options.lazy === false}\n render={() => descriptor.render()}\n />\n );\n};\n\nconst DrawerView = ({ state, navigation, descriptors, drawerContent, ...config }: DrawerViewProps): ReactNode => {\n const { collapsed = false, sidebarPosition = \"start\", pinSidebar, minSidebarWidth, maxSidebarWidth } = config;\n const focused = getFocusedRoute(state);\n const descriptor = requireDescriptor(descriptors, focused.key);\n const loaded = useLoadedRoutes(focused.key, state.preloadedRouteKeys);\n const onShowSidebarChanged = useSidebarSync(navigation);\n const contentProps = { state, navigation, descriptors };\n const sidebar = drawerContent === undefined ? <DrawerContent {...contentProps} /> : drawerContent(contentProps);\n usePopToTopOnBlur(state, descriptors, navigation);\n useCloseOnNavigate(state, navigation, collapsed);\n\n return (\n <DrawerCollapsedContext value={collapsed}>\n <AdwOverlaySplitView\n collapsed={collapsed}\n showSidebar={getDrawerStatus(state) === \"open\"}\n sidebarPosition={PACK_TYPES[sidebarPosition]}\n pinSidebar={pinSidebar}\n minSidebarWidth={minSidebarWidth}\n maxSidebarWidth={maxSidebarWidth}\n sidebarWidthFraction={config.sidebarWidthFraction}\n onNotifyShowSidebar={onShowSidebarChanged}\n sidebar={<>{sidebar}</>}\n >\n <AdwToolbarView topBar={<DrawerHeader descriptor={descriptor} navigation={navigation} />}>\n <AdwViewStack visibleChildName={focused.key}>\n {state.routes.map((route) => (\n <DrawerPage\n key={route.key}\n descriptor={requireDescriptor(descriptors, route.key)}\n isLoaded={loaded.has(route.key)}\n />\n ))}\n </AdwViewStack>\n </AdwToolbarView>\n </AdwOverlaySplitView>\n </DrawerCollapsedContext>\n );\n};\n\nexport { DrawerView };\n"]}
|