react-zeugma 6.3.0 → 6.4.0
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 +133 -157
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +69 -52
- package/dist/index.d.ts +69 -52
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/{types-Diujkc-H.d.cts → types-B9LrYapR.d.cts} +109 -131
- package/dist/{types-Diujkc-H.d.ts → types-B9LrYapR.d.ts} +109 -131
- package/dist/utils.cjs +1 -1
- package/dist/utils.cjs.map +1 -1
- package/dist/utils.d.cts +17 -10
- package/dist/utils.d.ts +17 -10
- package/dist/utils.js +1 -1
- package/dist/utils.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -40,7 +40,7 @@ npm install react-zeugma
|
|
|
40
40
|
Import the core components and configure the layout state inside your React application using the `useZeugma` hook.
|
|
41
41
|
|
|
42
42
|
```tsx
|
|
43
|
-
import { useZeugma, Zeugma, PaneTree, Pane,
|
|
43
|
+
import { useZeugma, Zeugma, PaneTree, Pane, TreeNode } from 'react-zeugma'
|
|
44
44
|
|
|
45
45
|
const initialLayout: TreeNode = {
|
|
46
46
|
type: 'split',
|
|
@@ -59,32 +59,27 @@ const initialLayout: TreeNode = {
|
|
|
59
59
|
function MyPane({ id }: { id: string }) {
|
|
60
60
|
return (
|
|
61
61
|
<Pane id={id}>
|
|
62
|
-
|
|
63
|
-
<
|
|
64
|
-
<
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<div className="flex-1 p-4 text-sm text-zinc-400">Content for {id}</div>
|
|
73
|
-
</div>
|
|
74
|
-
)}
|
|
62
|
+
<div className="h-full flex flex-col bg-[#18181b]">
|
|
63
|
+
<Pane.DragHandle>
|
|
64
|
+
<div className="px-3 py-2 bg-[#27272a] border-b border-[#3f3f46] flex items-center justify-between cursor-grab">
|
|
65
|
+
<span className="text-xs uppercase text-zinc-300 font-bold">{id}</span>
|
|
66
|
+
</div>
|
|
67
|
+
</Pane.DragHandle>
|
|
68
|
+
<Pane.Content className="flex-1 p-4 text-sm text-zinc-400">
|
|
69
|
+
{(tab) => <div>Content for {tab.id}</div>}
|
|
70
|
+
</Pane.Content>
|
|
71
|
+
</div>
|
|
75
72
|
</Pane>
|
|
76
73
|
)
|
|
77
74
|
}
|
|
78
75
|
|
|
79
76
|
export default function Dashboard() {
|
|
80
|
-
const
|
|
77
|
+
const controller = useZeugma({ initialLayout })
|
|
81
78
|
|
|
82
79
|
return (
|
|
83
|
-
<
|
|
84
|
-
<
|
|
85
|
-
|
|
86
|
-
</div>
|
|
87
|
-
</Zeugma>
|
|
80
|
+
<div className="w-screen h-screen">
|
|
81
|
+
<Zeugma controller={controller} renderPane={(id) => <MyPane id={id} />} />
|
|
82
|
+
</div>
|
|
88
83
|
)
|
|
89
84
|
}
|
|
90
85
|
```
|
|
@@ -95,125 +90,119 @@ export default function Dashboard() {
|
|
|
95
90
|
|
|
96
91
|
### `<Zeugma>`
|
|
97
92
|
|
|
98
|
-
The context provider that sets up the drag-and-drop state machine, monitors active drags, and registers layout change notifications. It
|
|
99
|
-
|
|
100
|
-
| Prop
|
|
101
|
-
|
|
|
102
|
-
|
|
|
103
|
-
| `renderPane`
|
|
104
|
-
| `classNames`
|
|
105
|
-
| `renderDragOverlay`
|
|
106
|
-
| `
|
|
93
|
+
The context provider that sets up the drag-and-drop state machine, monitors active drags, and registers layout change notifications. It accepts a `controller` prop explicitly and takes all configuration settings and lifecycle callbacks.
|
|
94
|
+
|
|
95
|
+
| Prop | Type | Required | Description |
|
|
96
|
+
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------- |
|
|
97
|
+
| `controller` | `ZeugmaController` | Yes | The Zeugma controller object returned by `useZeugma(options)`. |
|
|
98
|
+
| `renderPane` | `(paneId: string) => ReactNode` | Yes | Renderer function lookup that returns a `<Pane>` structure. |
|
|
99
|
+
| `classNames` | `ZeugmaClassNames` | No | Custom classes for overriding pane, resizer, and drop preview overlays. |
|
|
100
|
+
| `renderDragOverlay` | `(active: DragOverlayActiveItem) => ReactNode` | No | Renders a custom cursor-following drag preview overlay. |
|
|
101
|
+
| `resizerSize` | `number` | No | Thickness of the split resizer bars in pixels. Defaults to `4`. |
|
|
102
|
+
| `dragActivationDistance` | `number` | No | Minimum pointer drag distance (in pixels) required to activate dragging (defaults to `8`). |
|
|
103
|
+
| `snapThreshold` | `number` | No | Threshold in pixels to snap layout resizers to adjacent edges (defaults to `8`). |
|
|
104
|
+
| `minSplitPercentage` | `number` | No | Minimum resizing limit percentage (defaults to `5`). |
|
|
105
|
+
| `maxSplitPercentage` | `number` | No | Maximum resizing limit percentage (defaults to `95`). |
|
|
106
|
+
| `enableDragToDismiss` | `boolean` | No | If true, enables the drag-out-to-dismiss gesture to close widgets (defaults to `false`). |
|
|
107
|
+
| `dismissThreshold` | `number` | No | Distance in pixels outside container bounds required to trigger dismissal (defaults to `60`). |
|
|
108
|
+
| `onRemove` | `(paneId: string) => void` | No | Callback triggered when a pane is removed. |
|
|
109
|
+
| `onDragStart` | `(activeId: string) => void` | No | Callback triggered when dragging starts. |
|
|
110
|
+
| `onDragEnd` | `(activeId: string, overId: string \| null, dropAction: { type: 'split' \| 'move'; direction?: SplitDirection; position?: string } \| null) => void` | No | Callback triggered when dragging ends. |
|
|
111
|
+
| `onResizeStart` | `(currentNode: SplitNode) => void` | No | Callback triggered when resizing starts. |
|
|
112
|
+
| `onResize` | `(currentNode: SplitNode, percentage: number) => void` | No | Callback triggered during resizing. |
|
|
113
|
+
| `onResizeEnd` | `(currentNode: SplitNode, percentage: number) => void` | No | Callback triggered when resizing ends. |
|
|
114
|
+
| `onDismissIntentChange` | `(paneId: string \| null) => void` | No | Callback triggered when drag-out intent changes. |
|
|
107
115
|
|
|
108
116
|
### `useZeugma(options)`
|
|
109
117
|
|
|
110
|
-
A custom state hook that initializes and manages the
|
|
111
|
-
|
|
112
|
-
| Option
|
|
113
|
-
|
|
|
114
|
-
| `initialLayout`
|
|
115
|
-
| `layout`
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
120
|
-
| `snapThreshold` | `number` | `8` | Threshold in pixels to snap layout resizers to adjacent edges. |
|
|
121
|
-
| `minSplitPercentage` | `number` | `5` | Minimum resizing limit percentage. |
|
|
122
|
-
| `maxSplitPercentage` | `number` | `95` | Maximum resizing limit percentage. |
|
|
123
|
-
| `enableDragToDismiss` | `boolean` | `false` | If true, enables the drag-out-to-dismiss gesture to close widgets. |
|
|
124
|
-
| `dismissThreshold` | `number` | `60` | Distance in pixels outside container bounds required to trigger dismissal. |
|
|
125
|
-
| `onRemove` | `(paneId: string) => void` | — | Callback triggered when a pane is removed. |
|
|
126
|
-
| `onDragStart` | `(activeId: string) => void` | — | Callback triggered when dragging starts. |
|
|
127
|
-
| `onDragEnd` | `(activeId: string, overId: string \| null, dropAction: { type: 'split' \| 'move'; direction?: SplitDirection; position?: string } \| null) => void` | — | Callback triggered when dragging ends, with drop target and action details. |
|
|
128
|
-
| `onResizeStart` | `(currentNode: SplitNode) => void` | — | Callback triggered when resizing starts. |
|
|
129
|
-
| `onResize` | `(currentNode: SplitNode, percentage: number) => void` | — | Callback triggered during resizing. |
|
|
130
|
-
| `onResizeEnd` | `(currentNode: SplitNode, percentage: number) => void` | — | Callback triggered when resizing ends. |
|
|
131
|
-
| `onDismissIntentChange` | `(paneId: string \| null) => void` | — | Callback triggered when drag-out intent changes. |
|
|
118
|
+
A custom state hook that initializes and manages the layout tree, locked state, and fullscreen mode.
|
|
119
|
+
|
|
120
|
+
| Option | Type | Default | Description |
|
|
121
|
+
| -------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
|
|
122
|
+
| `initialLayout` | `TreeNode \| null` | — | Initial layout tree structure for uncontrolled mode. Only used on initial mount. |
|
|
123
|
+
| `layout` | `TreeNode \| null` | — | Controlled layout tree structure. If provided, the hook runs in controlled mode and synchronizes with it. |
|
|
124
|
+
| `onChange` | `(newLayout: TreeNode \| null) => void` | — | Callback triggered when the layout changes. |
|
|
125
|
+
| `fullscreenPaneId` | `string \| null` | — | Controlled fullscreen pane ID. Pass `null` for no fullscreen pane. |
|
|
126
|
+
| `onFullscreenChange` | `(paneId: string \| null) => void` | — | Callback triggered when a pane is toggled to/from fullscreen mode. |
|
|
127
|
+
| `locked` | `boolean` | `false` | If true, layout resizes and drags are disabled. |
|
|
132
128
|
|
|
133
129
|
### `useZeugmaContext()`
|
|
134
130
|
|
|
135
131
|
A custom React context hook that returns the unified layout controller properties and state actions. Must be used within a `<Zeugma>` provider component.
|
|
136
132
|
|
|
137
|
-
Provides direct access to the current layout state (e.g., `layout`, `
|
|
133
|
+
Provides direct access to the current layout state (e.g., `layout`, `locked`), state setters (e.g., `setLocked`), queries (e.g., `findTabById`, `findPaneContainingTab`, `findPaneById`), and mutation actions (e.g., `addTab`, `removePane`, `selectTab`, etc.).
|
|
138
134
|
|
|
139
135
|
```ts
|
|
140
|
-
const { layout,
|
|
136
|
+
const { layout, locked, findTabById, setLocked, removePane } = useZeugmaContext()
|
|
141
137
|
```
|
|
142
138
|
|
|
143
139
|
### `<PaneTree>`
|
|
144
140
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
| Prop | Type | Required | Description |
|
|
148
|
-
| ------------- | ------------------ | -------- | ------------------------------------------------------------------- |
|
|
149
|
-
| `tree` | `TreeNode \| null` | No | Custom subtree to render. Defaults to the provider's root `layout`. |
|
|
150
|
-
| `resizerSize` | `number` | No | Thickness of the split resizer bars in pixels. Defaults to `4`. |
|
|
141
|
+
An internal component that recursively renders the split nodes and pane nodes. It is automatically managed and rendered internally by `<Zeugma>`, so consumers do not need to import or render it manually. Configuration options like `resizerSize` and `snapThreshold` are passed directly as props to `<Zeugma>` instead.
|
|
151
142
|
|
|
152
143
|
### `<Pane id>`
|
|
153
144
|
|
|
154
|
-
Wraps the individual pane components inside the renderer.
|
|
155
|
-
|
|
156
|
-
| Prop | Type | Required | Description |
|
|
157
|
-
| ---------- | --------------------------------------- | -------- | ---------------------------------------------------------------------- |
|
|
158
|
-
| `id` | `string` | Yes | The unique ID corresponding to a `PaneNode`'s `paneId`. |
|
|
159
|
-
| `children` | `(props: PaneRenderProps) => ReactNode` | Yes | Render prop function. |
|
|
160
|
-
| `style` | `React.CSSProperties` | No | Optional inline CSS styles applied to the pane outer container. |
|
|
161
|
-
| `locked` | `boolean` | No | Optional override to lock this specific pane (disables drag and drop). |
|
|
162
|
-
|
|
163
|
-
#### Render Props: `PaneRenderProps`
|
|
164
|
-
|
|
165
|
-
| Parameter | Type | Description |
|
|
166
|
-
| ------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
|
|
167
|
-
| `isDragging` | `boolean` | `true` if the pane is actively being dragged. |
|
|
168
|
-
| `isFullscreen` | `boolean` | `true` if the pane currently occupies the fullscreen view. |
|
|
169
|
-
| `toggleFullscreen` | `() => void` | Toggles the pane to and from fullscreen/zoomed mode. |
|
|
170
|
-
| `remove` | `() => void` | Removes this pane (and its active tab) from the layout tree. |
|
|
171
|
-
| `metadata` | `Record<string, unknown> \| undefined` | The metadata values associated with the active tab. |
|
|
172
|
-
| `updateMetadata` | `(updater: (current: Record<string, unknown> \| undefined) => Record<string, unknown> \| undefined) => void` | Updates metadata of the active tab via an updater function. |
|
|
173
|
-
| `locked` | `boolean` | `true` if this specific pane or the dashboard globally is locked. |
|
|
174
|
-
| `tabs` | `string[]` | The array of tab IDs in this pane. |
|
|
175
|
-
| `activeTabId` | `string` | The currently active tab ID. |
|
|
176
|
-
| `selectTab` | `(tabId: string) => void` | Selects a specific tab to make it active. |
|
|
177
|
-
| `removeTab` | `(tabId: string) => void` | Removes/closes a specific tab. |
|
|
178
|
-
| `tabsMetadata` | `Record<string, Record<string, unknown>> \| undefined` | Metadata values associated with all tabs in this pane. |
|
|
179
|
-
| `updateTabMetadata` | `(tabId: string, updater: (current: Record<string, unknown> \| undefined) => Record<string, unknown> \| undefined) => void` | Updates the metadata of a specific tab. |
|
|
180
|
-
| `renderActiveTab` | `() => ReactNode` | Renders the portal placeholder for the currently active tab in the pane. |
|
|
145
|
+
Wraps the individual pane components inside the renderer. It acts as a context provider and container. Any pane state or handlers should be accessed via `usePaneContext()` or compound sub-components.
|
|
181
146
|
|
|
182
|
-
|
|
147
|
+
| Prop | Type | Required | Description |
|
|
148
|
+
| ---------- | --------------------- | -------- | ----------------------------------------------------------------------- |
|
|
149
|
+
| `id` | `string` | Yes | The unique ID corresponding to a `PaneNode`'s `paneId`. |
|
|
150
|
+
| `children` | `React.ReactNode` | Yes | Children components inside the pane (e.g. tabs, drag handles, content). |
|
|
151
|
+
| `style` | `React.CSSProperties` | No | Optional inline CSS styles applied to the pane outer container. |
|
|
152
|
+
| `locked` | `boolean` | No | Optional override to lock this specific pane (disables drag and drop). |
|
|
183
153
|
|
|
184
|
-
|
|
154
|
+
#### Compound Sub-components
|
|
185
155
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
| `removeTab` | `(id: string) => void` | Yes | Callback when a tab is closed/removed. |
|
|
194
|
-
| `classNames` | `{ container?: string; tab?: string \| ((tabId: string) => string) }` | No | Custom class names for the container and individual tab items. |
|
|
195
|
-
| `styles` | `{ container?: CSSProperties; tab?: CSSProperties \| ((tabId: string) => CSSProperties) }` | No | Custom inline CSS styles for the container and individual tab items. |
|
|
196
|
-
| `renderTab` | `(props: { tabId: string; activeTabId: string; isDragging: boolean; isOver: boolean; metadata?: Record<string, unknown>; selectTab: (id: string) => void; removeTab: (id: string) => void }) => ReactNode` | Yes | Render prop function called for each tab item. |
|
|
156
|
+
- **`<Pane.Content>`**: Renders the portal target for the active tab content.
|
|
157
|
+
- `children` can be a callback function `(tab: TabDetails) => React.ReactNode` or static `React.ReactNode`.
|
|
158
|
+
- Accepts `className` and `style` props.
|
|
159
|
+
- **`<Pane.DragHandle>`**: Defines the interactive drag region.
|
|
160
|
+
- **`<Pane.Tabs>`**: Renders the list of tab items for the pane.
|
|
161
|
+
- **`<Pane.Tab>`**: Renders an individual tab item.
|
|
162
|
+
- **`<Pane.Controls>`**: A headless wrapper for pane control buttons (fullscreen, close, etc.).
|
|
197
163
|
|
|
198
|
-
|
|
164
|
+
#### Hook: `usePaneContext()`
|
|
199
165
|
|
|
200
|
-
|
|
166
|
+
Provides direct access to the pane's state and action handlers from within any child component of `<Pane>`. Returns `PaneContextValue` which extends `PaneRenderProps`:
|
|
201
167
|
|
|
202
168
|
```ts
|
|
203
|
-
const {
|
|
204
|
-
|
|
169
|
+
const { id, isDragging, isFullscreen, toggleFullscreen, remove, tabs, activeTabId } =
|
|
170
|
+
usePaneContext()
|
|
205
171
|
```
|
|
206
172
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
|
210
|
-
|
|
|
211
|
-
| `isDragging`
|
|
212
|
-
| `
|
|
213
|
-
| `
|
|
214
|
-
| `
|
|
215
|
-
| `
|
|
216
|
-
| `
|
|
173
|
+
#### Pane Context Value: `PaneRenderProps`
|
|
174
|
+
|
|
175
|
+
| Parameter | Type | Description |
|
|
176
|
+
| ------------------- | --------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
|
|
177
|
+
| `isDragging` | `boolean` | `true` if the pane is actively being dragged. |
|
|
178
|
+
| `isFullscreen` | `boolean` | `true` if the pane currently occupies the fullscreen view. |
|
|
179
|
+
| `toggleFullscreen` | `() => void` | Toggles the pane to and from fullscreen/zoomed mode. |
|
|
180
|
+
| `remove` | `() => void` | Removes this pane (and its active tab) from the layout tree. |
|
|
181
|
+
| `metadata` | `Record<string, unknown> \| undefined` | The metadata values associated with the active tab. |
|
|
182
|
+
| `updateMetadata` | `(updater: (current: Record<string, unknown> \| undefined) => Record<string, unknown> \| undefined) => void` | Updates metadata of the active tab via an updater function. |
|
|
183
|
+
| `locked` | `boolean` | `true` if this specific pane or the dashboard globally is locked. |
|
|
184
|
+
| `tabs` | `string[]` | The array of tab IDs in this pane. |
|
|
185
|
+
| `activeTabId` | `string` | The currently active tab ID. |
|
|
186
|
+
| `selectTab` | `(tabId: string) => void` | Selects a specific tab to make it active. |
|
|
187
|
+
| `removeTab` | `(tabId: string) => void` | Removes/closes a specific tab. |
|
|
188
|
+
| `tabsMetadata` | `Record<string, Record<string, unknown>> \| undefined` | Metadata values associated with all tabs in this pane. |
|
|
189
|
+
| `updateTabMetadata` | `(tabId: string, updater: (current: Record<string, unknown> \| undefined) => Record<string, unknown> \| undefined) => void` | Updates the metadata of a specific tab. |
|
|
190
|
+
|
|
191
|
+
### `<Tabs>`
|
|
192
|
+
|
|
193
|
+
A helper component that renders a list of tab items for a pane, wrapping the internal drag-and-drop tab logic.
|
|
194
|
+
|
|
195
|
+
| Prop | Type | Required | Description |
|
|
196
|
+
| :------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | :------------------------------------------------------------------- |
|
|
197
|
+
| `tabs` | `string[]` | Yes | The list of tab IDs in this pane. |
|
|
198
|
+
| `activeTabId` | `string` | Yes | The currently active tab ID. |
|
|
199
|
+
| `locked` | `boolean` | No | Whether dragging/reordering tabs is disabled (defaults to `false`). |
|
|
200
|
+
| `tabsMetadata` | `Record<string, Record<string, any>>` | No | Metadata associated with each tab. |
|
|
201
|
+
| `selectTab` | `(id: string) => void` | Yes | Callback when a tab is selected. |
|
|
202
|
+
| `removeTab` | `(id: string) => void` | Yes | Callback when a tab is closed/removed. |
|
|
203
|
+
| `classNames` | `{ container?: string; tab?: string \| ((tabId: string) => string) }` | No | Custom class names for the container and individual tab items. |
|
|
204
|
+
| `styles` | `{ container?: CSSProperties; tab?: CSSProperties \| ((tabId: string) => CSSProperties) }` | No | Custom inline CSS styles for the container and individual tab items. |
|
|
205
|
+
| `renderTab` | `(props: { tabId: string; activeTabId: string; isDragging: boolean; isOver: boolean; metadata?: Record<string, unknown>; onSelect: () => void; onRemove: () => void }) => ReactNode` | Yes | Render prop function called for each tab item. |
|
|
217
206
|
|
|
218
207
|
### `<DragHandle>`
|
|
219
208
|
|
|
@@ -378,10 +367,10 @@ export interface TabDetails {
|
|
|
378
367
|
|
|
379
368
|
### Component Props
|
|
380
369
|
|
|
381
|
-
|
|
370
|
+
```ts
|
|
382
371
|
export interface PaneProps {
|
|
383
372
|
id: string
|
|
384
|
-
children:
|
|
373
|
+
children: React.ReactNode
|
|
385
374
|
style?: React.CSSProperties
|
|
386
375
|
locked?: boolean
|
|
387
376
|
}
|
|
@@ -405,8 +394,8 @@ export interface TabsProps {
|
|
|
405
394
|
isDragging: boolean
|
|
406
395
|
isOver: boolean
|
|
407
396
|
metadata?: Record<string, unknown>
|
|
408
|
-
|
|
409
|
-
|
|
397
|
+
onSelect: () => void
|
|
398
|
+
onRemove: () => void
|
|
410
399
|
}) => React.ReactNode
|
|
411
400
|
classNames?: {
|
|
412
401
|
container?: string
|
|
@@ -417,6 +406,7 @@ export interface TabsProps {
|
|
|
417
406
|
tab?: React.CSSProperties | ((tabId: string) => React.CSSProperties)
|
|
418
407
|
}
|
|
419
408
|
}
|
|
409
|
+
```
|
|
420
410
|
|
|
421
411
|
### Render Props
|
|
422
412
|
|
|
@@ -440,71 +430,57 @@ export interface PaneRenderProps {
|
|
|
440
430
|
tabId: string,
|
|
441
431
|
updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined,
|
|
442
432
|
) => void
|
|
443
|
-
renderActiveTab: () => ReactNode
|
|
444
433
|
}
|
|
445
434
|
|
|
446
|
-
export interface TabContextValue {
|
|
447
|
-
tabId: string
|
|
448
|
-
isActive: boolean
|
|
449
|
-
isDragging: boolean
|
|
450
|
-
isOver: boolean
|
|
451
|
-
metadata?: Record<string, unknown>
|
|
452
|
-
locked: boolean
|
|
453
|
-
selectTab: () => void
|
|
454
|
-
removeTab: () => void
|
|
455
435
|
}
|
|
456
|
-
|
|
436
|
+
```
|
|
457
437
|
|
|
458
438
|
### Controller & Context
|
|
459
439
|
|
|
460
440
|
```ts
|
|
461
|
-
export interface
|
|
462
|
-
|
|
463
|
-
export interface ZeugmaController {
|
|
464
|
-
// State
|
|
441
|
+
export interface ZeugmaState {
|
|
465
442
|
layout: TreeNode | null
|
|
466
|
-
setLayout: Dispatch<SetStateAction<TreeNode | null>>
|
|
467
443
|
fullscreenPaneId: string | null
|
|
468
|
-
setFullscreenPaneId: (paneId: string | null) => void
|
|
469
444
|
locked: boolean
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
// DnD state
|
|
473
|
-
activeId: string | null
|
|
474
|
-
activeType: 'pane' | 'tab' | null
|
|
475
|
-
dismissIntentId: string | null
|
|
445
|
+
}
|
|
476
446
|
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
enableDragToDismiss: boolean
|
|
483
|
-
dismissThreshold: number
|
|
447
|
+
export interface ZeugmaStateSetters {
|
|
448
|
+
setLayout: Dispatch<SetStateAction<TreeNode | null>>
|
|
449
|
+
setFullscreenPaneId: (paneId: string | null) => void
|
|
450
|
+
setLocked: Dispatch<SetStateAction<boolean>>
|
|
451
|
+
}
|
|
484
452
|
|
|
485
|
-
|
|
453
|
+
export interface ZeugmaActions {
|
|
486
454
|
removePane: (paneId: string) => void
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
455
|
+
addTab: (tabId: string, targetPaneId?: string, metadata?: Record<string, unknown>) => void
|
|
456
|
+
updateMetadata: (
|
|
457
|
+
id: string,
|
|
458
|
+
updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined,
|
|
459
|
+
) => void
|
|
490
460
|
updatePaneLock: (paneId: string, locked: boolean) => void
|
|
491
461
|
selectTab: (paneId: string, tabId: string) => void
|
|
492
462
|
mergeTab: (draggedTabId: string, targetPaneId: string) => void
|
|
493
463
|
removeTab: (tabId: string) => void
|
|
494
|
-
splitPane: (
|
|
464
|
+
splitPane: (
|
|
465
|
+
targetId: string,
|
|
466
|
+
direction: SplitDirection,
|
|
467
|
+
splitType: 'left' | 'right' | 'top' | 'bottom',
|
|
468
|
+
paneToAdd: string,
|
|
469
|
+
) => void
|
|
495
470
|
updateSplitPercentage: (currentNode: SplitNode, percentage: number) => void
|
|
496
471
|
moveTab: (draggedTabId: string, targetTabId: string, position?: 'before' | 'after') => void
|
|
472
|
+
}
|
|
497
473
|
|
|
498
|
-
|
|
474
|
+
export interface ZeugmaQueries {
|
|
499
475
|
findPaneById: (paneId: string) => PaneNode | null
|
|
500
476
|
findPaneContainingTab: (tabId: string) => PaneNode | null
|
|
501
477
|
findTabById: (tabId: string) => TabDetails | null
|
|
478
|
+
getTabMetadata: (tabId: string) => Record<string, unknown> | undefined
|
|
479
|
+
getActiveTabMetadata: (paneId: string) => Record<string, unknown> | undefined
|
|
502
480
|
}
|
|
503
481
|
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
// plus the renderPane and classNames configuration.
|
|
507
|
-
export interface ZeugmaContextValue extends ZeugmaStateValue, ZeugmaActionsValue {}
|
|
482
|
+
export interface ZeugmaController
|
|
483
|
+
extends ZeugmaState, ZeugmaStateSetters, ZeugmaActions, ZeugmaQueries {}
|
|
508
484
|
```
|
|
509
485
|
|
|
510
486
|
### Computed Layout Types (from `react-zeugma/utils`)
|