@gtkx/components 1.0.0-rc.2 → 1.0.0-rc.4
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 +4 -5
- package/dist/adw/combo-row.d.ts +12 -0
- package/dist/adw/combo-row.d.ts.map +1 -0
- package/dist/adw/combo-row.js +14 -0
- package/dist/adw/combo-row.js.map +1 -0
- package/dist/adw/index.d.ts +2 -1
- package/dist/adw/index.d.ts.map +1 -1
- package/dist/adw/index.js +1 -0
- package/dist/adw/index.js.map +1 -1
- package/dist/adw/types.d.ts +11 -3
- package/dist/adw/types.d.ts.map +1 -1
- package/dist/adw/types.js.map +1 -1
- package/dist/column-view.d.ts.map +1 -1
- package/dist/column-view.js +4 -4
- package/dist/column-view.js.map +1 -1
- package/dist/drop-down.d.ts +4 -5
- package/dist/drop-down.d.ts.map +1 -1
- package/dist/drop-down.js +5 -112
- package/dist/drop-down.js.map +1 -1
- package/dist/grid-view.js +1 -1
- package/dist/grid-view.js.map +1 -1
- package/dist/index.d.ts +1 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/dist/internal/cells.d.ts +3 -3
- package/dist/internal/cells.d.ts.map +1 -1
- package/dist/internal/cells.js.map +1 -1
- package/dist/internal/collection-index.d.ts +5 -5
- package/dist/internal/collection-index.d.ts.map +1 -1
- package/dist/internal/collection-index.js +3 -3
- package/dist/internal/collection-index.js.map +1 -1
- package/dist/internal/collection-model.d.ts.map +1 -1
- package/dist/internal/collection-model.js +2 -5
- package/dist/internal/collection-model.js.map +1 -1
- package/dist/internal/collection.d.ts +2 -2
- package/dist/internal/collection.d.ts.map +1 -1
- package/dist/internal/collection.js.map +1 -1
- package/dist/internal/drop-down.d.ts +16 -0
- package/dist/internal/drop-down.d.ts.map +1 -0
- package/dist/internal/drop-down.js +110 -0
- package/dist/internal/drop-down.js.map +1 -0
- package/dist/internal/expansion.d.ts +1 -1
- package/dist/internal/expansion.d.ts.map +1 -1
- package/dist/internal/expansion.js +3 -4
- package/dist/internal/expansion.js.map +1 -1
- package/dist/internal/selection.d.ts +1 -0
- package/dist/internal/selection.d.ts.map +1 -1
- package/dist/internal/selection.js +1 -0
- package/dist/internal/selection.js.map +1 -1
- package/dist/internal/use-collection.d.ts +5 -6
- package/dist/internal/use-collection.d.ts.map +1 -1
- package/dist/internal/use-collection.js +10 -18
- package/dist/internal/use-collection.js.map +1 -1
- package/dist/types.d.ts +70 -48
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js.map +1 -1
- package/package.json +7 -7
- package/src/adw/combo-row.tsx +21 -0
- package/src/adw/index.ts +8 -1
- package/src/adw/types.ts +17 -3
- package/src/column-view.tsx +13 -13
- package/src/drop-down.tsx +10 -195
- package/src/grid-view.tsx +1 -1
- package/src/index.ts +7 -12
- package/src/internal/cells.tsx +12 -12
- package/src/internal/collection-index.ts +16 -16
- package/src/internal/collection-model.ts +2 -5
- package/src/internal/collection.ts +2 -2
- package/src/internal/drop-down.tsx +186 -0
- package/src/internal/expansion.ts +5 -6
- package/src/internal/selection.tsx +3 -0
- package/src/internal/use-collection.tsx +16 -29
- package/src/types.ts +83 -66
- package/dist/size-group.d.ts +0 -12
- package/dist/size-group.d.ts.map +0 -1
- package/dist/size-group.js +0 -41
- package/dist/size-group.js.map +0 -1
- package/src/size-group.tsx +0 -77
package/README.md
CHANGED
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
<p align="center">
|
|
8
8
|
The React framework for Linux.<br />
|
|
9
|
-
|
|
9
|
+
Write native Linux applications with React and TypeScript.
|
|
10
|
+
Built on the GNOME stack and standard web tooling.
|
|
10
11
|
</p>
|
|
11
12
|
|
|
12
13
|
<p align="center">
|
|
@@ -20,15 +21,13 @@
|
|
|
20
21
|
|
|
21
22
|
<p align="center">
|
|
22
23
|
<a href="https://gtkx.dev">Homepage</a> ·
|
|
23
|
-
<a href="https://gtkx.dev/guide/
|
|
24
|
+
<a href="https://gtkx.dev/guide/getting-started">Documentation</a> ·
|
|
24
25
|
<a href="https://github.com/gtkx-org/gtkx/tree/main/examples">Examples</a> ·
|
|
25
26
|
<a href="https://github.com/gtkx-org/gtkx/blob/main/CONTRIBUTING.md">Contributing</a>
|
|
26
27
|
</p>
|
|
27
28
|
|
|
28
29
|
---
|
|
29
30
|
|
|
30
|
-
GTKX generates fully typed bindings for the entire GTK4 and Adwaita surface directly from GObject-Introspection. On top of those bindings you get the React programming model: components and hooks driving GObject instances, with Fast Refresh while you develop.
|
|
31
|
-
|
|
32
31
|
<p align="center">
|
|
33
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." />
|
|
34
33
|
</p>
|
|
@@ -109,7 +108,7 @@ React Native and similar frameworks hide the native toolkit so one API can run e
|
|
|
109
108
|
|
|
110
109
|
### Why Node.js, and why generated bindings
|
|
111
110
|
|
|
112
|
-
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 [
|
|
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 the comparison in full.
|
|
113
112
|
|
|
114
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.
|
|
115
114
|
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
import type { ComboRowProps } from "./types.js";
|
|
3
|
+
/** Call signature of {@link ComboRow}, generic in the item and section value types. */
|
|
4
|
+
type ComboRowComponent = <T = unknown, S = unknown>(props: ComboRowProps<T, S>) => ReactNode;
|
|
5
|
+
/**
|
|
6
|
+
* Renders an `Adw.ComboRow` backed by a collection model, presenting the same choice as a
|
|
7
|
+
* `DropDown` in the shape of a preferences row, with customizable renderers for the row
|
|
8
|
+
* display, popup rows, and popup section headers, and controlled selection.
|
|
9
|
+
*/
|
|
10
|
+
declare const ComboRow: ComboRowComponent;
|
|
11
|
+
export { ComboRow };
|
|
12
|
+
//# sourceMappingURL=combo-row.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"combo-row.d.ts","sourceRoot":"","sources":["../../src/adw/combo-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,uFAAuF;AACvF,KAAK,iBAAiB,GAAG,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC;AAE7F;;;;GAIG;AACH,QAAA,MAAM,QAAQ,EAAE,iBAAqD,CAAC;AAMtE,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { AdwComboRow } from "@gtkx/jsx/adw";
|
|
3
|
+
import { DropDownBase } from "../internal/drop-down.js";
|
|
4
|
+
/**
|
|
5
|
+
* Renders an `Adw.ComboRow` backed by a collection model, presenting the same choice as a
|
|
6
|
+
* `DropDown` in the shape of a preferences row, with customizable renderers for the row
|
|
7
|
+
* display, popup rows, and popup section headers, and controlled selection.
|
|
8
|
+
*/
|
|
9
|
+
const ComboRow = ComboRowImpl;
|
|
10
|
+
function ComboRowImpl(props) {
|
|
11
|
+
return _jsx(DropDownBase, { ...props, component: AdwComboRow });
|
|
12
|
+
}
|
|
13
|
+
export { ComboRow };
|
|
14
|
+
//# sourceMappingURL=combo-row.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"combo-row.js","sourceRoot":"","sources":["../../src/adw/combo-row.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKxD;;;;GAIG;AACH,MAAM,QAAQ,GAAsB,YAAiC,CAAC;AAEtE,SAAS,YAAY,CAAC,KAAwB;IAC1C,OAAO,KAAC,YAAY,OAAK,KAAK,EAAE,SAAS,EAAE,WAAW,GAAI,CAAC;AAC/D,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import type { ReactNode } from \"react\";\nimport { AdwComboRow } from \"@gtkx/jsx/adw\";\nimport type { DropDownBaseProps } from \"../internal/drop-down.js\";\nimport type { ComboRowProps } from \"./types.js\";\nimport { DropDownBase } from \"../internal/drop-down.js\";\n\n/** Call signature of {@link ComboRow}, generic in the item and section value types. */\ntype ComboRowComponent = <T = unknown, S = unknown>(props: ComboRowProps<T, S>) => ReactNode;\n\n/**\n * Renders an `Adw.ComboRow` backed by a collection model, presenting the same choice as a\n * `DropDown` in the shape of a preferences row, with customizable renderers for the row\n * display, popup rows, and popup section headers, and controlled selection.\n */\nconst ComboRow: ComboRowComponent = ComboRowImpl as ComboRowComponent;\n\nfunction ComboRowImpl(props: DropDownBaseProps): ReactNode {\n return <DropDownBase {...props} component={AdwComboRow} />;\n}\n\nexport { ComboRow };\n"]}
|
package/dist/adw/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export { ComboRow } from "./combo-row.js";
|
|
1
2
|
export { ToastProvider, useToast, useToastOverlay } from "./toast.js";
|
|
2
|
-
export type { ToastController, ToastOptions, ToastOverlayController, ToastProviderProps } from "./types.js";
|
|
3
|
+
export type { ComboRowProps, ToastController, ToastOptions, ToastOverlayController, ToastProviderProps, } from "./types.js";
|
|
3
4
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/adw/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/adw/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACtE,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/adw/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACtE,YAAY,EACR,aAAa,EACb,eAAe,EACf,YAAY,EACZ,sBAAsB,EACtB,kBAAkB,GACrB,MAAM,YAAY,CAAC"}
|
package/dist/adw/index.js
CHANGED
package/dist/adw/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/adw/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { ToastProvider, useToast, useToastOverlay } from \"./toast.js\";\nexport type {
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/adw/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { ComboRow } from \"./combo-row.js\";\nexport { ToastProvider, useToast, useToastOverlay } from \"./toast.js\";\nexport type {\n ComboRowProps,\n ToastController,\n ToastOptions,\n ToastOverlayController,\n ToastProviderProps,\n} from \"./types.js\";\n"]}
|
package/dist/adw/types.d.ts
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
import type * as Adw from "@gtkx/gi/adw";
|
|
2
|
-
import type { AdwToastProps } from "@gtkx/jsx/adw";
|
|
2
|
+
import type { AdwComboRowProps, AdwToastProps } from "@gtkx/jsx/adw";
|
|
3
3
|
import type { ReactNode, RefObject } from "react";
|
|
4
|
+
import type { DropDownWidgetProps } from "../types.js";
|
|
5
|
+
/**
|
|
6
|
+
* Props for {@link ComboRow}. Combines the underlying Adw.ComboRow props with the declarative
|
|
7
|
+
* collection props: flat items or grouped sections, controlled single selection, and renderers
|
|
8
|
+
* for the row display, popup rows, and popup section headers.
|
|
9
|
+
*/
|
|
10
|
+
type ComboRowProps<T = unknown, S = unknown> = DropDownWidgetProps<AdwComboRowProps, T, S>;
|
|
4
11
|
/**
|
|
5
12
|
* Describes a toast raised through {@link useToast}: the construct-time properties of an
|
|
6
13
|
* `Adw.Toast` plus its `button-clicked` and `dismissed` handlers.
|
|
@@ -10,7 +17,7 @@ type ToastOptions = Adw.ToastConstructorProps & Pick<AdwToastProps, "onButtonCli
|
|
|
10
17
|
type ToastController = {
|
|
11
18
|
/** Builds a toast, shows it through the overlay, and returns it. */
|
|
12
19
|
show: (options?: ToastOptions) => Adw.Toast;
|
|
13
|
-
/** Dismisses a single toast, typically one returned by
|
|
20
|
+
/** Dismisses a single toast, typically one returned by `ToastController.show`. */
|
|
14
21
|
dismiss: (toast: Adw.Toast) => void;
|
|
15
22
|
};
|
|
16
23
|
/** Imperative controls for the overlay as a whole, returned by {@link useToastOverlay}. */
|
|
@@ -22,7 +29,8 @@ type ToastOverlayController = {
|
|
|
22
29
|
type ToastProviderProps = {
|
|
23
30
|
/** Ref also given to the `AdwToastOverlay` the toasts appear over. */
|
|
24
31
|
overlayRef: RefObject<Adw.ToastOverlay | null>;
|
|
32
|
+
/** Subtree whose `useToast` and `useToastOverlay` calls target that overlay. */
|
|
25
33
|
children?: ReactNode | undefined;
|
|
26
34
|
};
|
|
27
|
-
export { type ToastOptions, type ToastController, type ToastOverlayController, type ToastProviderProps };
|
|
35
|
+
export { type ComboRowProps, type ToastOptions, type ToastController, type ToastOverlayController, type ToastProviderProps, };
|
|
28
36
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/adw/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/adw/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,GAAG,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/adw/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,GAAG,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEvD;;;;GAIG;AACH,KAAK,aAAa,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,IAAI,mBAAmB,CAAC,gBAAgB,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAC3F;;;GAGG;AACH,KAAK,YAAY,GAAG,GAAG,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,EAAE,iBAAiB,GAAG,aAAa,CAAC,CAAC;AAEvG,+EAA+E;AAC/E,KAAK,eAAe,GAAG;IACnB,oEAAoE;IACpE,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,YAAY,KAAK,GAAG,CAAC,KAAK,CAAC;IAC5C,kFAAkF;IAClF,OAAO,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,2FAA2F;AAC3F,KAAK,sBAAsB,GAAG;IAC1B,sDAAsD;IACtD,UAAU,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,uCAAuC;AACvC,KAAK,kBAAkB,GAAG;IACtB,sEAAsE;IACtE,UAAU,EAAE,SAAS,CAAC,GAAG,CAAC,YAAY,GAAG,IAAI,CAAC,CAAC;IAC/C,gFAAgF;IAChF,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACpC,CAAC;AAEF,OAAO,EACH,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,GAC1B,CAAC"}
|
package/dist/adw/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/adw/types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/adw/types.ts"],"names":[],"mappings":"AAuCA,OAAO,EAMN,CAAC","sourcesContent":["import type * as Adw from \"@gtkx/gi/adw\";\nimport type { AdwComboRowProps, AdwToastProps } from \"@gtkx/jsx/adw\";\nimport type { ReactNode, RefObject } from \"react\";\nimport type { DropDownWidgetProps } from \"../types.js\";\n\n/**\n * Props for {@link ComboRow}. Combines the underlying Adw.ComboRow props with the declarative\n * collection props: flat items or grouped sections, controlled single selection, and renderers\n * for the row display, popup rows, and popup section headers.\n */\ntype ComboRowProps<T = unknown, S = unknown> = DropDownWidgetProps<AdwComboRowProps, T, S>;\n/**\n * Describes a toast raised through {@link useToast}: the construct-time properties of an\n * `Adw.Toast` plus its `button-clicked` and `dismissed` handlers.\n */\ntype ToastOptions = Adw.ToastConstructorProps & Pick<AdwToastProps, \"onButtonClicked\" | \"onDismissed\">;\n\n/** Imperative controls for individual toasts, returned by {@link useToast}. */\ntype ToastController = {\n /** Builds a toast, shows it through the overlay, and returns it. */\n show: (options?: ToastOptions) => Adw.Toast;\n /** Dismisses a single toast, typically one returned by `ToastController.show`. */\n dismiss: (toast: Adw.Toast) => void;\n};\n\n/** Imperative controls for the overlay as a whole, returned by {@link useToastOverlay}. */\ntype ToastOverlayController = {\n /** Dismisses the shown toast and every queued one. */\n dismissAll: () => void;\n};\n\n/** Props for {@link ToastProvider}. */\ntype ToastProviderProps = {\n /** Ref also given to the `AdwToastOverlay` the toasts appear over. */\n overlayRef: RefObject<Adw.ToastOverlay | null>;\n /** Subtree whose `useToast` and `useToastOverlay` calls target that overlay. */\n children?: ReactNode | undefined;\n};\n\nexport {\n type ComboRowProps,\n type ToastOptions,\n type ToastController,\n type ToastOverlayController,\n type ToastProviderProps,\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"column-view.d.ts","sourceRoot":"","sources":["../src/column-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"column-view.d.ts","sourceRoot":"","sources":["../src/column-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAQlD,OAAO,KAAK,EAAoB,eAAe,EAAE,MAAM,YAAY,CAAC;AAiKpE;;;;GAIG;AACH,iBAAS,UAAU,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,SAAS,CA6BrF;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
package/dist/column-view.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import * as Gtk from "@gtkx/gi/gtk";
|
|
3
3
|
import { GtkColumnView, GtkColumnViewColumn, GtkCustomSorter, GtkSignalListItemFactory } from "@gtkx/jsx/gtk";
|
|
4
|
-
import {
|
|
4
|
+
import { useSignal } from "@gtkx/react";
|
|
5
5
|
import { omit } from "@gtkx/utils";
|
|
6
6
|
import { useLayoutEffect, useRef } from "react";
|
|
7
7
|
import { HeaderPortals, ItemPortals, useHeaderCells, useItemCells } from "./internal/cells.js";
|
|
@@ -68,7 +68,7 @@ const syncSort = (sorting, view, sortColumn, sortOrder) => {
|
|
|
68
68
|
};
|
|
69
69
|
const useColumnSorting = (view, sort, columns) => {
|
|
70
70
|
const sorting = useRef(false);
|
|
71
|
-
const sorter =
|
|
71
|
+
const sorter = view?.getSorter() ?? null;
|
|
72
72
|
const columnSorter = sorter instanceof Gtk.ColumnViewSorter ? sorter : null;
|
|
73
73
|
useSignal(columnSorter, "changed", () => {
|
|
74
74
|
emitSortChanged(columnSorter, sorting, sort);
|
|
@@ -80,8 +80,8 @@ const useColumnSorting = (view, sort, columns) => {
|
|
|
80
80
|
};
|
|
81
81
|
const ColumnCells = ({ column, collection, expandedIds, size }) => {
|
|
82
82
|
const cells = useItemCells(size);
|
|
83
|
-
const rest = omit(column, ["id", "renderCell", "
|
|
84
|
-
return (_jsxs(_Fragment, { children: [_jsx(GtkColumnViewColumn, { id: column.id, factory: _jsx(GtkSignalListItemFactory, { ...cells.handlers }), sorter: column.
|
|
83
|
+
const rest = omit(column, ["id", "renderCell", "isSortable"]);
|
|
84
|
+
return (_jsxs(_Fragment, { children: [_jsx(GtkColumnViewColumn, { id: column.id, factory: _jsx(GtkSignalListItemFactory, { ...cells.handlers }), sorter: column.isSortable === true ? _jsx(GtkCustomSorter, {}) : null, ...rest }), _jsx(ItemPortals, { store: cells, render: column.renderCell, collection: collection, expandedIds: expandedIds })] }));
|
|
85
85
|
};
|
|
86
86
|
const ColumnList = ({ columns, collection, expandedIds, size }) => columns.map((column) => (_jsx(ColumnCells, { column: column, collection: collection, expandedIds: expandedIds, size: size }, column.id)));
|
|
87
87
|
/**
|
package/dist/column-view.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"column-view.js","sourceRoot":"","sources":["../src/column-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode } from \"react\";\nimport * as Gtk from \"@gtkx/gi/gtk\";\nimport { GtkColumnView, GtkColumnViewColumn, GtkCustomSorter, GtkSignalListItemFactory } from \"@gtkx/jsx/gtk\";\nimport { useProperty, useSignal } from \"@gtkx/react\";\nimport { omit } from \"@gtkx/utils\";\nimport { useLayoutEffect, useRef } from \"react\";\nimport type { CellSize } from \"./internal/cells.js\";\nimport type { Collection } from \"./internal/collection.js\";\nimport type { Column, ColumnViewProps } from \"./types.js\";\nimport { HeaderPortals, ItemPortals, useHeaderCells, useItemCells } from \"./internal/cells.js\";\nimport { useCollection } from \"./internal/use-collection.js\";\nimport { useWidgetRef } from \"./internal/use-widget-ref.js\";\n\ntype SortProps = {\n sortColumn?: string | null | undefined;\n sortOrder?: Gtk.SortType | null | undefined;\n onSortChanged?: ((column: string | null, order: Gtk.SortType) => void) | null | undefined;\n};\n\ntype SortTarget = { view: Gtk.ColumnView; column: Gtk.ColumnViewColumn | null };\n\ntype ColumnCellsProps = {\n column: Column<never>;\n collection: Collection;\n expandedIds: string[] | null | undefined;\n size: CellSize;\n};\n\ntype ColumnListProps = Omit<ColumnCellsProps, \"column\"> & {\n columns: Column<never>[];\n};\n\nconst COLUMN_VIEW_PROPS = [\n \"items\",\n \"sections\",\n \"renderHeader\",\n \"columns\",\n \"selectedIds\",\n \"onSelectionChanged\",\n \"selectionMode\",\n \"expandedIds\",\n \"onExpandedChange\",\n \"sortColumn\",\n \"sortOrder\",\n \"onSortChanged\",\n \"estimatedItemHeight\",\n \"children\",\n \"ref\",\n] as const satisfies (keyof ColumnViewProps)[];\n\nconst columnById = (view: Gtk.ColumnView, id: string): Gtk.ColumnViewColumn | null => {\n const columns = view.getColumns();\n\n for (let index = 0; index < columns.getNItems(); index++) {\n const column = columns.getItem(index);\n\n if (column instanceof Gtk.ColumnViewColumn && column.getId() === id) {\n return column;\n }\n }\n\n return null;\n};\n\nconst getSortTarget = (view: Gtk.ColumnView | null, sortColumn: string | null | undefined): SortTarget | null => {\n if (view === null || sortColumn === undefined) {\n return null;\n }\n\n if (sortColumn === null) {\n return { view, column: null };\n }\n\n const column = columnById(view, sortColumn);\n\n return column === null ? null : { view, column };\n};\n\nconst applySort = (\n sorting: { current: boolean },\n view: Gtk.ColumnView,\n column: Gtk.ColumnViewColumn | null,\n order: Gtk.SortType | null | undefined,\n): void => {\n sorting.current = true;\n\n try {\n view.sortByColumn(column, order ?? Gtk.SortType.ASCENDING);\n } finally {\n sorting.current = false;\n }\n};\n\nconst emitSortChanged = (\n sorter: Gtk.ColumnViewSorter | null,\n sorting: { current: boolean },\n sort: SortProps,\n): void => {\n if (sorter === null || sorting.current) {\n return;\n }\n\n sort.onSortChanged?.(sorter.getPrimarySortColumn()?.getId() ?? null, sorter.getPrimarySortOrder());\n};\n\nconst syncSort = (\n sorting: { current: boolean },\n view: Gtk.ColumnView | null,\n sortColumn: string | null | undefined,\n sortOrder: Gtk.SortType | null | undefined,\n): void => {\n const target = getSortTarget(view, sortColumn);\n\n if (target === null) {\n return;\n }\n\n applySort(sorting, target.view, target.column, sortOrder);\n};\n\nconst useColumnSorting = (view: Gtk.ColumnView | null, sort: SortProps, columns: Column<never>[]): void => {\n const sorting = useRef(false);\n const sorter = useProperty(view, \"sorter\");\n const columnSorter = sorter instanceof Gtk.ColumnViewSorter ? sorter : null;\n\n useSignal(columnSorter, \"changed\", (): void => {\n emitSortChanged(columnSorter, sorting, sort);\n });\n\n const { sortColumn, sortOrder } = sort;\n\n useLayoutEffect(() => {\n syncSort(sorting, view, sortColumn, sortOrder);\n }, [view, sortColumn, sortOrder, columns]);\n};\n\nconst ColumnCells = ({ column, collection, expandedIds, size }: ColumnCellsProps): ReactNode => {\n const cells = useItemCells(size);\n const rest = omit(column, [\"id\", \"renderCell\", \"sortable\"]);\n\n return (\n <>\n <GtkColumnViewColumn\n id={column.id}\n factory={<GtkSignalListItemFactory {...cells.handlers} />}\n sorter={column.sortable === true ? <GtkCustomSorter /> : null}\n {...rest}\n />\n <ItemPortals\n store={cells}\n render={column.renderCell}\n collection={collection}\n expandedIds={expandedIds}\n />\n </>\n );\n};\n\nconst ColumnList = ({ columns, collection, expandedIds, size }: ColumnListProps): ReactNode =>\n columns.map((column) => (\n <ColumnCells\n key={column.id}\n column={column}\n collection={collection}\n expandedIds={expandedIds}\n size={size}\n />\n ));\n\n/**\n * Renders a Gtk.ColumnView from declarative items or sections and a columns array,\n * with controlled selection, expansion, and sorting, per-column header menus, and\n * section header rendering.\n */\nfunction ColumnView<T = unknown, S = unknown>(props: ColumnViewProps<T, S>): ReactNode {\n const { renderHeader, columns, expandedIds, sortColumn, sortOrder, onSortChanged, estimatedItemHeight, ref } =\n props;\n\n const rest = omit(props, COLUMN_VIEW_PROPS);\n const [view, refCallback] = useWidgetRef<Gtk.ColumnView>(ref);\n const size = { width: -1, height: estimatedItemHeight ?? -1 };\n const { collection, selection } = useCollection(props);\n const headerCells = useHeaderCells(size);\n const columnList = columns as Column<never>[];\n useColumnSorting(view, { sortColumn, sortOrder, onSortChanged }, columnList);\n\n return (\n <>\n <GtkColumnView\n ref={refCallback}\n model={selection}\n {...(renderHeader != null && {\n headerFactory: <GtkSignalListItemFactory {...headerCells.handlers} />,\n })}\n {...rest}\n >\n <ColumnList columns={columnList} collection={collection} expandedIds={expandedIds} size={size} />\n </GtkColumnView>\n {renderHeader != null && (\n <HeaderPortals store={headerCells} render={renderHeader} collection={collection} />\n )}\n </>\n );\n}\n\nexport { ColumnView };\n"]}
|
|
1
|
+
{"version":3,"file":"column-view.js","sourceRoot":"","sources":["../src/column-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode, RefObject } from \"react\";\nimport * as Gtk from \"@gtkx/gi/gtk\";\nimport { GtkColumnView, GtkColumnViewColumn, GtkCustomSorter, GtkSignalListItemFactory } from \"@gtkx/jsx/gtk\";\nimport { useSignal } from \"@gtkx/react\";\nimport { omit } from \"@gtkx/utils\";\nimport { useLayoutEffect, useRef } from \"react\";\nimport type { CellSize } from \"./internal/cells.js\";\nimport type { Collection } from \"./internal/collection.js\";\nimport type { ColumnViewColumn, ColumnViewProps } from \"./types.js\";\nimport { HeaderPortals, ItemPortals, useHeaderCells, useItemCells } from \"./internal/cells.js\";\nimport { useCollection } from \"./internal/use-collection.js\";\nimport { useWidgetRef } from \"./internal/use-widget-ref.js\";\n\ntype SortProps = {\n sortColumn?: string | null | undefined;\n sortOrder?: Gtk.SortType | null | undefined;\n onSortChanged?: ((column: string | null, order: Gtk.SortType) => void) | null | undefined;\n};\n\ntype SortTarget = { view: Gtk.ColumnView; column: Gtk.ColumnViewColumn | null };\n\ntype ColumnCellsProps = {\n column: ColumnViewColumn<never>;\n collection: Collection;\n expandedIds: string[] | null | undefined;\n size: CellSize;\n};\n\ntype ColumnListProps = Omit<ColumnCellsProps, \"column\"> & {\n columns: ColumnViewColumn<never>[];\n};\n\nconst COLUMN_VIEW_PROPS = [\n \"items\",\n \"sections\",\n \"renderHeader\",\n \"columns\",\n \"selectedIds\",\n \"onSelectionChanged\",\n \"selectionMode\",\n \"expandedIds\",\n \"onExpandedChange\",\n \"sortColumn\",\n \"sortOrder\",\n \"onSortChanged\",\n \"estimatedItemHeight\",\n \"children\",\n \"ref\",\n] as const satisfies (keyof ColumnViewProps)[];\n\nconst columnById = (view: Gtk.ColumnView, id: string): Gtk.ColumnViewColumn | null => {\n const columns = view.getColumns();\n\n for (let index = 0; index < columns.getNItems(); index++) {\n const column = columns.getItem(index);\n\n if (column instanceof Gtk.ColumnViewColumn && column.getId() === id) {\n return column;\n }\n }\n\n return null;\n};\n\nconst getSortTarget = (view: Gtk.ColumnView | null, sortColumn: string | null | undefined): SortTarget | null => {\n if (view === null || sortColumn === undefined) {\n return null;\n }\n\n if (sortColumn === null) {\n return { view, column: null };\n }\n\n const column = columnById(view, sortColumn);\n\n return column === null ? null : { view, column };\n};\n\nconst applySort = (\n sorting: RefObject<boolean>,\n view: Gtk.ColumnView,\n column: Gtk.ColumnViewColumn | null,\n order: Gtk.SortType | null | undefined,\n): void => {\n sorting.current = true;\n\n try {\n view.sortByColumn(column, order ?? Gtk.SortType.ASCENDING);\n } finally {\n sorting.current = false;\n }\n};\n\nconst emitSortChanged = (\n sorter: Gtk.ColumnViewSorter | null,\n sorting: RefObject<boolean>,\n sort: SortProps,\n): void => {\n if (sorter === null || sorting.current) {\n return;\n }\n\n sort.onSortChanged?.(sorter.getPrimarySortColumn()?.getId() ?? null, sorter.getPrimarySortOrder());\n};\n\nconst syncSort = (\n sorting: RefObject<boolean>,\n view: Gtk.ColumnView | null,\n sortColumn: string | null | undefined,\n sortOrder: Gtk.SortType | null | undefined,\n): void => {\n const target = getSortTarget(view, sortColumn);\n\n if (target === null) {\n return;\n }\n\n applySort(sorting, target.view, target.column, sortOrder);\n};\n\nconst useColumnSorting = (view: Gtk.ColumnView | null, sort: SortProps, columns: ColumnViewColumn<never>[]): void => {\n const sorting = useRef(false);\n const sorter = view?.getSorter() ?? null;\n const columnSorter = sorter instanceof Gtk.ColumnViewSorter ? sorter : null;\n\n useSignal(columnSorter, \"changed\", (): void => {\n emitSortChanged(columnSorter, sorting, sort);\n });\n\n const { sortColumn, sortOrder } = sort;\n\n useLayoutEffect(() => {\n syncSort(sorting, view, sortColumn, sortOrder);\n }, [view, sortColumn, sortOrder, columns]);\n};\n\nconst ColumnCells = ({ column, collection, expandedIds, size }: ColumnCellsProps): ReactNode => {\n const cells = useItemCells(size);\n const rest = omit(column, [\"id\", \"renderCell\", \"isSortable\"]);\n\n return (\n <>\n <GtkColumnViewColumn\n id={column.id}\n factory={<GtkSignalListItemFactory {...cells.handlers} />}\n sorter={column.isSortable === true ? <GtkCustomSorter /> : null}\n {...rest}\n />\n <ItemPortals\n store={cells}\n render={column.renderCell}\n collection={collection}\n expandedIds={expandedIds}\n />\n </>\n );\n};\n\nconst ColumnList = ({ columns, collection, expandedIds, size }: ColumnListProps): ReactNode =>\n columns.map((column) => (\n <ColumnCells\n key={column.id}\n column={column}\n collection={collection}\n expandedIds={expandedIds}\n size={size}\n />\n ));\n\n/**\n * Renders a Gtk.ColumnView from declarative items or sections and a columns array,\n * with controlled selection, expansion, and sorting, per-column header menus, and\n * section header rendering.\n */\nfunction ColumnView<T = unknown, S = unknown>(props: ColumnViewProps<T, S>): ReactNode {\n const { renderHeader, columns, expandedIds, sortColumn, sortOrder, onSortChanged, estimatedItemHeight, ref } =\n props;\n\n const rest = omit(props, COLUMN_VIEW_PROPS);\n const [view, refCallback] = useWidgetRef<Gtk.ColumnView>(ref);\n const size = { width: -1, height: estimatedItemHeight ?? -1 };\n const { collection, selection } = useCollection(props);\n const headerCells = useHeaderCells(size);\n const columnList = columns as ColumnViewColumn<never>[];\n useColumnSorting(view, { sortColumn, sortOrder, onSortChanged }, columnList);\n\n return (\n <>\n <GtkColumnView\n ref={refCallback}\n model={selection}\n {...(renderHeader != null && {\n headerFactory: <GtkSignalListItemFactory {...headerCells.handlers} />,\n })}\n {...rest}\n >\n <ColumnList columns={columnList} collection={collection} expandedIds={expandedIds} size={size} />\n </GtkColumnView>\n {renderHeader != null && (\n <HeaderPortals store={headerCells} render={renderHeader} collection={collection} />\n )}\n </>\n );\n}\n\nexport { ColumnView };\n"]}
|
package/dist/drop-down.d.ts
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import { GtkDropDown } from "@gtkx/jsx/gtk";
|
|
1
|
+
import type { ReactNode } from "react";
|
|
3
2
|
import type { DropDownProps } from "./types.js";
|
|
4
|
-
|
|
3
|
+
/** Call signature of {@link DropDown}, generic in the item and section value types. */
|
|
4
|
+
type DropDownComponent = <T = unknown, S = unknown>(props: DropDownProps<T, S>) => ReactNode;
|
|
5
5
|
/**
|
|
6
|
-
* Renders a
|
|
6
|
+
* Renders a `Gtk.DropDown` backed by a collection model, with customizable renderers for the
|
|
7
7
|
* collapsed display, popup rows, and popup section headers, and controlled selection.
|
|
8
|
-
* The backing widget defaults to GtkDropDown and is swappable through `component`.
|
|
9
8
|
*/
|
|
10
9
|
declare const DropDown: DropDownComponent;
|
|
11
10
|
export { DropDown };
|
package/dist/drop-down.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drop-down.d.ts","sourceRoot":"","sources":["../src/drop-down.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"drop-down.d.ts","sourceRoot":"","sources":["../src/drop-down.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,uFAAuF;AACvF,KAAK,iBAAiB,GAAG,CAAC,CAAC,GAAG,OAAO,EAAE,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC;AAE7F;;;GAGG;AACH,QAAA,MAAM,QAAQ,EAAE,iBAAqD,CAAC;AAMtE,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
package/dist/drop-down.js
CHANGED
|
@@ -1,120 +1,13 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
2
|
-
import { GtkDropDown
|
|
3
|
-
import {
|
|
4
|
-
import { omit } from "@gtkx/utils";
|
|
5
|
-
import { useEffectEvent, useLayoutEffect, useRef } from "react";
|
|
6
|
-
import { HeaderPortals, ItemPortals, useHeaderCells, useItemCells } from "./internal/cells.js";
|
|
7
|
-
import { useCollectionData } from "./internal/use-collection.js";
|
|
8
|
-
import { useWidgetRef } from "./internal/use-widget-ref.js";
|
|
9
|
-
const DROP_DOWN_PROPS = [
|
|
10
|
-
"component",
|
|
11
|
-
"items",
|
|
12
|
-
"sections",
|
|
13
|
-
"selectedId",
|
|
14
|
-
"onSelectionChanged",
|
|
15
|
-
"renderItem",
|
|
16
|
-
"renderListItem",
|
|
17
|
-
"renderHeader",
|
|
18
|
-
"ref",
|
|
19
|
-
];
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { GtkDropDown } from "@gtkx/jsx/gtk";
|
|
3
|
+
import { DropDownBase } from "./internal/drop-down.js";
|
|
20
4
|
/**
|
|
21
|
-
* Renders a
|
|
5
|
+
* Renders a `Gtk.DropDown` backed by a collection model, with customizable renderers for the
|
|
22
6
|
* collapsed display, popup rows, and popup section headers, and controlled selection.
|
|
23
|
-
* The backing widget defaults to GtkDropDown and is swappable through `component`.
|
|
24
7
|
*/
|
|
25
8
|
const DropDown = DropDownImpl;
|
|
26
|
-
const describeValue = (value) => {
|
|
27
|
-
if (typeof value === "string") {
|
|
28
|
-
return value;
|
|
29
|
-
}
|
|
30
|
-
try {
|
|
31
|
-
return JSON.stringify(value);
|
|
32
|
-
}
|
|
33
|
-
catch {
|
|
34
|
-
return String(value);
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
const defaultItemContent = (value) => value == null ? null : _jsx(GtkLabel, { children: describeValue(value) });
|
|
38
|
-
const defaultRenderItem = ({ item }) => defaultItemContent(item);
|
|
39
|
-
const faceRenderer = (props) => props.renderItem ?? defaultRenderItem;
|
|
40
|
-
const listRenderer = (props) => props.renderListItem ?? props.renderItem ?? defaultRenderItem;
|
|
41
|
-
const resolvePosition = (widget, collection, selectedId) => {
|
|
42
|
-
const requested = selectedId == null ? -1 : collection.positionFor(selectedId);
|
|
43
|
-
return requested >= 0 ? requested : widget.getSelected();
|
|
44
|
-
};
|
|
45
|
-
const updateKnownSelection = (tracker, effectiveId, selectedId) => {
|
|
46
|
-
const { known, onSelectionChanged } = tracker;
|
|
47
|
-
const expectedId = selectedId ?? known.current;
|
|
48
|
-
const isNew = effectiveId !== known.current;
|
|
49
|
-
known.current = effectiveId;
|
|
50
|
-
if (expectedId !== null && effectiveId !== expectedId && isNew) {
|
|
51
|
-
onSelectionChanged?.(effectiveId);
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
const reportKnownSelection = (tracker, id) => {
|
|
55
|
-
const { known, onSelectionChanged } = tracker;
|
|
56
|
-
if (id === null || id === known.current) {
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
known.current = id;
|
|
60
|
-
onSelectionChanged?.(id);
|
|
61
|
-
};
|
|
62
|
-
const reportSelectedNotify = (options, tracker, applying) => {
|
|
63
|
-
const { widget, collection } = options;
|
|
64
|
-
if (widget === null || applying.current) {
|
|
65
|
-
return;
|
|
66
|
-
}
|
|
67
|
-
reportKnownSelection(tracker, collection.idAt(widget.getSelected()));
|
|
68
|
-
};
|
|
69
|
-
const applySelectedPosition = (widget, position, applying) => {
|
|
70
|
-
applying.current = true;
|
|
71
|
-
try {
|
|
72
|
-
widget.selected = position;
|
|
73
|
-
}
|
|
74
|
-
finally {
|
|
75
|
-
applying.current = false;
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
const useDropDownSelection = (options) => {
|
|
79
|
-
const { widget, collection, applying } = options;
|
|
80
|
-
const { selectedId } = options.props;
|
|
81
|
-
const known = useRef(null);
|
|
82
|
-
const syncKnownSelection = useEffectEvent((position) => {
|
|
83
|
-
const effectiveId = collection.idAt(position);
|
|
84
|
-
if (effectiveId === null) {
|
|
85
|
-
known.current = null;
|
|
86
|
-
return;
|
|
87
|
-
}
|
|
88
|
-
const { onSelectionChanged } = options.props;
|
|
89
|
-
updateKnownSelection({ known, onSelectionChanged }, effectiveId, selectedId);
|
|
90
|
-
});
|
|
91
|
-
useLayoutEffect(() => {
|
|
92
|
-
if (widget === null) {
|
|
93
|
-
return;
|
|
94
|
-
}
|
|
95
|
-
const position = resolvePosition(widget, collection, selectedId);
|
|
96
|
-
applySelectedPosition(widget, position, applying);
|
|
97
|
-
syncKnownSelection(position);
|
|
98
|
-
}, [widget, collection, selectedId, applying]);
|
|
99
|
-
useSignal(widget, "notify::selected", () => {
|
|
100
|
-
reportSelectedNotify(options, { known, onSelectionChanged: options.props.onSelectionChanged }, applying);
|
|
101
|
-
});
|
|
102
|
-
};
|
|
103
9
|
function DropDownImpl(props) {
|
|
104
|
-
|
|
105
|
-
const rest = omit(props, DROP_DOWN_PROPS);
|
|
106
|
-
const [widget, refCallback] = useWidgetRef(ref);
|
|
107
|
-
const applying = useRef(false);
|
|
108
|
-
const collection = useCollectionData({ items, sections, applying });
|
|
109
|
-
const faceCells = useItemCells({ width: -1, height: -1 });
|
|
110
|
-
const listCells = useItemCells({ width: -1, height: -1 });
|
|
111
|
-
const headerCells = useHeaderCells({ width: -1, height: -1 });
|
|
112
|
-
useDropDownSelection({ widget, collection, applying, props });
|
|
113
|
-
const Component = component ?? GtkDropDown;
|
|
114
|
-
const hasHeader = typeof renderHeader === "function";
|
|
115
|
-
return (_jsxs(_Fragment, { children: [_jsx(Component, { ref: refCallback, model: collection.model, factory: _jsx(GtkSignalListItemFactory, { ...faceCells.handlers }), ...(renderListItem != null && {
|
|
116
|
-
listFactory: _jsx(GtkSignalListItemFactory, { ...listCells.handlers }),
|
|
117
|
-
}), ...(hasHeader && { headerFactory: _jsx(GtkSignalListItemFactory, { ...headerCells.handlers }) }), ...rest }), _jsx(ItemPortals, { store: faceCells, render: faceRenderer(props), collection: collection }), renderListItem != null && (_jsx(ItemPortals, { store: listCells, render: listRenderer(props), collection: collection })), hasHeader && _jsx(HeaderPortals, { store: headerCells, render: renderHeader, collection: collection })] }));
|
|
10
|
+
return _jsx(DropDownBase, { ...props, component: GtkDropDown });
|
|
118
11
|
}
|
|
119
12
|
export { DropDown };
|
|
120
13
|
//# sourceMappingURL=drop-down.js.map
|
package/dist/drop-down.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drop-down.js","sourceRoot":"","sources":["../src/drop-down.tsx"],"names":[],"mappings":"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","sourcesContent":["import type * as GObject from \"@gtkx/gi/gobject\";\nimport type { ElementType, ReactNode, Ref, RefObject } from \"react\";\nimport { GtkDropDown, GtkLabel, GtkSignalListItemFactory } from \"@gtkx/jsx/gtk\";\nimport { useSignal } from \"@gtkx/react\";\nimport { omit } from \"@gtkx/utils\";\nimport { useEffectEvent, useLayoutEffect, useRef } from \"react\";\nimport type { Collection } from \"./internal/collection.js\";\nimport type { DropDownProps, ItemRenderer, RenderItemArgs } from \"./types.js\";\nimport { HeaderPortals, ItemPortals, useHeaderCells, useItemCells } from \"./internal/cells.js\";\nimport { useCollectionData } from \"./internal/use-collection.js\";\nimport { useWidgetRef } from \"./internal/use-widget-ref.js\";\n\ntype SelectableWidget = GObject.Object & { getSelected: () => number; selected: number };\n\ntype DropDownRuntimeProps = DropDownProps & {\n component?: ElementType | undefined;\n ref?: Ref<SelectableWidget | null> | undefined;\n} & Record<string, unknown>;\n\ntype SelectionOptions = {\n widget: SelectableWidget | null;\n collection: Collection;\n applying: RefObject<boolean>;\n props: DropDownRuntimeProps;\n};\n\ntype KnownSelection = {\n known: { current: string | null };\n onSelectionChanged: ((id: string) => void) | null | undefined;\n};\n\ntype DropDownComponent = <T = unknown, S = unknown, C extends ElementType = typeof GtkDropDown>(\n props: DropDownProps<T, S, C>,\n) => ReactNode;\n\nconst DROP_DOWN_PROPS: string[] = [\n \"component\",\n \"items\",\n \"sections\",\n \"selectedId\",\n \"onSelectionChanged\",\n \"renderItem\",\n \"renderListItem\",\n \"renderHeader\",\n \"ref\",\n];\n\n/**\n * Renders a drop-down backed by a collection model, with customizable renderers for the\n * collapsed display, popup rows, and popup section headers, and controlled selection.\n * The backing widget defaults to GtkDropDown and is swappable through `component`.\n */\nconst DropDown: DropDownComponent = DropDownImpl as DropDownComponent;\n\nconst describeValue = (value: unknown): string => {\n if (typeof value === \"string\") {\n return value;\n }\n\n try {\n return JSON.stringify(value);\n } catch {\n return String(value);\n }\n};\n\nconst defaultItemContent = (value: unknown): ReactNode =>\n value == null ? null : <GtkLabel>{describeValue(value)}</GtkLabel>;\n\nconst defaultRenderItem = ({ item }: RenderItemArgs<unknown>): ReactNode => defaultItemContent(item);\n\nconst faceRenderer = (props: DropDownRuntimeProps): ItemRenderer<never> =>\n props.renderItem ?? defaultRenderItem;\n\nconst listRenderer = (props: DropDownRuntimeProps): ItemRenderer<never> =>\n props.renderListItem ?? props.renderItem ?? defaultRenderItem;\n\nconst resolvePosition = (\n widget: SelectableWidget,\n collection: Collection,\n selectedId: string | null | undefined,\n): number => {\n const requested = selectedId == null ? -1 : collection.positionFor(selectedId);\n\n return requested >= 0 ? requested : widget.getSelected();\n};\n\nconst updateKnownSelection = (\n tracker: KnownSelection,\n effectiveId: string,\n selectedId: string | null | undefined,\n): void => {\n const { known, onSelectionChanged } = tracker;\n const expectedId = selectedId ?? known.current;\n const isNew = effectiveId !== known.current;\n known.current = effectiveId;\n\n if (expectedId !== null && effectiveId !== expectedId && isNew) {\n onSelectionChanged?.(effectiveId);\n }\n};\n\nconst reportKnownSelection = (tracker: KnownSelection, id: string | null): void => {\n const { known, onSelectionChanged } = tracker;\n\n if (id === null || id === known.current) {\n return;\n }\n\n known.current = id;\n onSelectionChanged?.(id);\n};\n\nconst reportSelectedNotify = (\n options: SelectionOptions,\n tracker: KnownSelection,\n applying: RefObject<boolean>,\n): void => {\n const { widget, collection } = options;\n\n if (widget === null || applying.current) {\n return;\n }\n\n reportKnownSelection(tracker, collection.idAt(widget.getSelected()));\n};\n\nconst applySelectedPosition = (widget: SelectableWidget, position: number, applying: RefObject<boolean>): void => {\n applying.current = true;\n\n try {\n widget.selected = position;\n } finally {\n applying.current = false;\n }\n};\n\nconst useDropDownSelection = (options: SelectionOptions): void => {\n const { widget, collection, applying } = options;\n const { selectedId } = options.props;\n const known = useRef<string | null>(null);\n\n const syncKnownSelection = useEffectEvent((position: number): void => {\n const effectiveId = collection.idAt(position);\n\n if (effectiveId === null) {\n known.current = null;\n\n return;\n }\n\n const { onSelectionChanged } = options.props;\n updateKnownSelection({ known, onSelectionChanged }, effectiveId, selectedId);\n });\n\n useLayoutEffect(() => {\n if (widget === null) {\n return;\n }\n\n const position = resolvePosition(widget, collection, selectedId);\n applySelectedPosition(widget, position, applying);\n syncKnownSelection(position);\n }, [widget, collection, selectedId, applying]);\n\n useSignal(widget, \"notify::selected\", (): void => {\n reportSelectedNotify(options, { known, onSelectionChanged: options.props.onSelectionChanged }, applying);\n });\n};\n\nfunction DropDownImpl(props: DropDownRuntimeProps): ReactNode {\n const { component, items, sections, renderListItem, renderHeader, ref } = props;\n const rest = omit(props, DROP_DOWN_PROPS);\n const [widget, refCallback] = useWidgetRef<SelectableWidget>(ref);\n const applying = useRef(false);\n const collection = useCollectionData({ items, sections, applying });\n const faceCells = useItemCells({ width: -1, height: -1 });\n const listCells = useItemCells({ width: -1, height: -1 });\n const headerCells = useHeaderCells({ width: -1, height: -1 });\n useDropDownSelection({ widget, collection, applying, props });\n const Component = component ?? GtkDropDown;\n const hasHeader = typeof renderHeader === \"function\";\n\n return (\n <>\n <Component\n ref={refCallback}\n model={collection.model}\n factory={<GtkSignalListItemFactory {...faceCells.handlers} />}\n {...(renderListItem != null && {\n listFactory: <GtkSignalListItemFactory {...listCells.handlers} />,\n })}\n {...(hasHeader && { headerFactory: <GtkSignalListItemFactory {...headerCells.handlers} /> })}\n {...rest}\n />\n <ItemPortals store={faceCells} render={faceRenderer(props)} collection={collection} />\n {renderListItem != null && (\n <ItemPortals store={listCells} render={listRenderer(props)} collection={collection} />\n )}\n {hasHeader && <HeaderPortals store={headerCells} render={renderHeader} collection={collection} />}\n </>\n );\n}\n\nexport { DropDown };\n"]}
|
|
1
|
+
{"version":3,"file":"drop-down.js","sourceRoot":"","sources":["../src/drop-down.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAKvD;;;GAGG;AACH,MAAM,QAAQ,GAAsB,YAAiC,CAAC;AAEtE,SAAS,YAAY,CAAC,KAAwB;IAC1C,OAAO,KAAC,YAAY,OAAK,KAAK,EAAE,SAAS,EAAE,WAAW,GAAI,CAAC;AAC/D,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import type { ReactNode } from \"react\";\nimport { GtkDropDown } from \"@gtkx/jsx/gtk\";\nimport type { DropDownBaseProps } from \"./internal/drop-down.js\";\nimport type { DropDownProps } from \"./types.js\";\nimport { DropDownBase } from \"./internal/drop-down.js\";\n\n/** Call signature of {@link DropDown}, generic in the item and section value types. */\ntype DropDownComponent = <T = unknown, S = unknown>(props: DropDownProps<T, S>) => ReactNode;\n\n/**\n * Renders a `Gtk.DropDown` backed by a collection model, with customizable renderers for the\n * collapsed display, popup rows, and popup section headers, and controlled selection.\n */\nconst DropDown: DropDownComponent = DropDownImpl as DropDownComponent;\n\nfunction DropDownImpl(props: DropDownBaseProps): ReactNode {\n return <DropDownBase {...props} component={GtkDropDown} />;\n}\n\nexport { DropDown };\n"]}
|
package/dist/grid-view.js
CHANGED
|
@@ -20,7 +20,7 @@ function GridView(props) {
|
|
|
20
20
|
const { renderItem, estimatedItemHeight, estimatedItemWidth } = props;
|
|
21
21
|
const rest = omit(props, GRID_VIEW_PROPS);
|
|
22
22
|
const size = { width: estimatedItemWidth ?? -1, height: estimatedItemHeight ?? -1 };
|
|
23
|
-
const { collection, selection } = useCollection({ ...props,
|
|
23
|
+
const { collection, selection } = useCollection({ ...props, isFlat: true });
|
|
24
24
|
const itemCells = useItemCells(size);
|
|
25
25
|
return (_jsxs(_Fragment, { children: [_jsx(GtkGridView, { model: selection, factory: _jsx(GtkSignalListItemFactory, { ...itemCells.handlers }), ...rest }), _jsx(ItemPortals, { store: itemCells, render: renderItem, collection: collection })] }));
|
|
26
26
|
}
|
package/dist/grid-view.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-view.js","sourceRoot":"","sources":["../src/grid-view.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,eAAe,GAAG;IACpB,OAAO;IACP,YAAY;IACZ,aAAa;IACb,oBAAoB;IACpB,eAAe;IACf,qBAAqB;IACrB,oBAAoB;CACoB,CAAC;AAE7C;;;GAGG;AACH,SAAS,QAAQ,CAAc,KAAuB;IAClD,MAAM,EAAE,UAAU,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC;IACtE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,EAAE,KAAK,EAAE,kBAAkB,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,mBAAmB,IAAI,CAAC,CAAC,EAAE,CAAC;IACpF,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"grid-view.js","sourceRoot":"","sources":["../src/grid-view.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,MAAM,eAAe,GAAG;IACpB,OAAO;IACP,YAAY;IACZ,aAAa;IACb,oBAAoB;IACpB,eAAe;IACf,qBAAqB;IACrB,oBAAoB;CACoB,CAAC;AAE7C;;;GAGG;AACH,SAAS,QAAQ,CAAc,KAAuB;IAClD,MAAM,EAAE,UAAU,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC;IACtE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,EAAE,KAAK,EAAE,kBAAkB,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,mBAAmB,IAAI,CAAC,CAAC,EAAE,CAAC;IACpF,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5E,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,OAAO,CACH,8BACI,KAAC,WAAW,IAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,KAAC,wBAAwB,OAAK,SAAS,CAAC,QAAQ,GAAI,KAAM,IAAI,GAAI,EAC1G,KAAC,WAAW,IAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,GAAI,IAC9E,CACN,CAAC;AACN,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import type { ReactNode } from \"react\";\nimport { GtkGridView, GtkSignalListItemFactory } from \"@gtkx/jsx/gtk\";\nimport { omit } from \"@gtkx/utils\";\nimport type { GridViewProps } from \"./types.js\";\nimport { ItemPortals, useItemCells } from \"./internal/cells.js\";\nimport { useCollection } from \"./internal/use-collection.js\";\n\nconst GRID_VIEW_PROPS = [\n \"items\",\n \"renderItem\",\n \"selectedIds\",\n \"onSelectionChanged\",\n \"selectionMode\",\n \"estimatedItemHeight\",\n \"estimatedItemWidth\",\n] as const satisfies (keyof GridViewProps)[];\n\n/**\n * Renders a Gtk.GridView of uniform cells from declarative items, with per-cell\n * rendering, controlled selection, and estimated item sizing.\n */\nfunction GridView<T = unknown>(props: GridViewProps<T>): ReactNode {\n const { renderItem, estimatedItemHeight, estimatedItemWidth } = props;\n const rest = omit(props, GRID_VIEW_PROPS);\n const size = { width: estimatedItemWidth ?? -1, height: estimatedItemHeight ?? -1 };\n const { collection, selection } = useCollection({ ...props, isFlat: true });\n const itemCells = useItemCells(size);\n\n return (\n <>\n <GtkGridView model={selection} factory={<GtkSignalListItemFactory {...itemCells.handlers} />} {...rest} />\n <ItemPortals store={itemCells} render={renderItem} collection={collection} />\n </>\n );\n}\n\nexport { GridView };\n"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,5 @@ export { ColumnView } from "./column-view.js";
|
|
|
2
2
|
export { DropDown } from "./drop-down.js";
|
|
3
3
|
export { GridView } from "./grid-view.js";
|
|
4
4
|
export { ListView } from "./list-view.js";
|
|
5
|
-
export {
|
|
6
|
-
export type { ChildProps, Column, ColumnViewProps, DropDownProps, GridViewProps, HeaderRenderer, Item, ItemRenderer, ListViewProps, RenderHeaderArgs, RenderItemArgs, Section, SizeGroupChildProps, SizeGroupProps, WidgetProps, } from "./types.js";
|
|
5
|
+
export type { ColumnViewColumn, ColumnViewProps, DropDownProps, GridViewProps, ListItem, ListItemRenderArgs, ListItemRenderer, ListSection, ListSectionRenderArgs, ListSectionRenderer, ListViewProps, } from "./types.js";
|
|
7
6
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EACR,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,aAAa,EACb,QAAQ,EACR,kBAAkB,EAClB,gBAAgB,EAChB,WAAW,EACX,qBAAqB,EACrB,mBAAmB,EACnB,aAAa,GAChB,MAAM,YAAY,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { ColumnView } from \"./column-view.js\";\nexport { DropDown } from \"./drop-down.js\";\nexport { GridView } from \"./grid-view.js\";\nexport { ListView } from \"./list-view.js\";\nexport type {\n ColumnViewColumn,\n ColumnViewProps,\n DropDownProps,\n GridViewProps,\n ListItem,\n ListItemRenderArgs,\n ListItemRenderer,\n ListSection,\n ListSectionRenderArgs,\n ListSectionRenderer,\n ListViewProps,\n} from \"./types.js\";\n"]}
|
package/dist/internal/cells.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type * as GObject from "@gtkx/gi/gobject";
|
|
2
2
|
import type { ReactNode } from "react";
|
|
3
3
|
import * as Gtk from "@gtkx/gi/gtk";
|
|
4
|
-
import type {
|
|
4
|
+
import type { ListItemRenderer, ListSectionRenderer } from "../types.js";
|
|
5
5
|
import type { Collection } from "./collection.js";
|
|
6
6
|
type CellSize = {
|
|
7
7
|
width: number;
|
|
@@ -33,13 +33,13 @@ type CellStore<C extends CellHost> = {
|
|
|
33
33
|
};
|
|
34
34
|
type ItemPortalsProps = {
|
|
35
35
|
store: CellStore<Gtk.ListItem>;
|
|
36
|
-
render:
|
|
36
|
+
render: ListItemRenderer<never>;
|
|
37
37
|
collection: Collection;
|
|
38
38
|
expandedIds?: string[] | null | undefined;
|
|
39
39
|
};
|
|
40
40
|
type HeaderPortalsProps = {
|
|
41
41
|
store: CellStore<Gtk.ListHeader>;
|
|
42
|
-
render:
|
|
42
|
+
render: ListSectionRenderer<never>;
|
|
43
43
|
collection: Collection;
|
|
44
44
|
};
|
|
45
45
|
declare function useItemCells(size: CellSize): CellStore<Gtk.ListItem>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cells.d.ts","sourceRoot":"","sources":["../../src/internal/cells.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,OAAO,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,GAAG,MAAM,cAAc,CAAC;AAIpC,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"cells.d.ts","sourceRoot":"","sources":["../../src/internal/cells.tsx"],"names":[],"mappings":"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"}
|