@linzjs/windows 9.5.1 → 9.5.3
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 +644 -2
- package/dist/common/uuid.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -25,7 +25,7 @@ const result = await showModal(TestModal, { props... })
|
|
|
25
25
|
|
|
26
26
|
## Features
|
|
27
27
|
- Async HTML dialog based Modals.
|
|
28
|
-
- Draggable and resizeable, pop-in/out Panels/Windows.
|
|
28
|
+
- Draggable and resizeable, pop-in/out Panels/Windows.
|
|
29
29
|
|
|
30
30
|
## Install
|
|
31
31
|
```
|
|
@@ -48,4 +48,646 @@ localStorage.setItem("@linzjs/windows.debugEnabled", "true");
|
|
|
48
48
|
npm run storybook
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## Components
|
|
54
|
+
|
|
55
|
+
### Modal (LuiModalAsync)
|
|
56
|
+
|
|
57
|
+
Promise-based async modals using the HTML `<dialog>` element. Show a modal, await the result, and continue.
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
**Setup** — wrap your app with the context provider once at the root:
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
import { LuiModalAsyncContextProvider } from '@linzjs/windows';
|
|
65
|
+
|
|
66
|
+
export const App = () => (
|
|
67
|
+
<LuiModalAsyncContextProvider>
|
|
68
|
+
<div>...the rest of your app...</div>
|
|
69
|
+
</LuiModalAsyncContextProvider>
|
|
70
|
+
);
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
**Define a modal component** — extend your props with `LuiModalAsyncCallback<RESULT_TYPE>` to declare the return type and receive `resolve`:
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
import React, { ReactElement } from 'react';
|
|
77
|
+
import {
|
|
78
|
+
LuiModalAsync,
|
|
79
|
+
LuiModalAsyncButtonContinue,
|
|
80
|
+
LuiModalAsyncButtonDismiss,
|
|
81
|
+
LuiModalAsyncButtonGroup,
|
|
82
|
+
LuiModalAsyncCallback,
|
|
83
|
+
LuiModalAsyncContent,
|
|
84
|
+
LuiModalAsyncHeader,
|
|
85
|
+
LuiModalAsyncMain,
|
|
86
|
+
} from '@linzjs/windows';
|
|
87
|
+
|
|
88
|
+
// The modal returns a number (or undefined if dismissed/escaped)
|
|
89
|
+
interface TestModalProps extends LuiModalAsyncCallback<number> {
|
|
90
|
+
text: string;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
const TestModal = ({ text, resolve }: TestModalProps): ReactElement => {
|
|
94
|
+
const doSomething = () => {
|
|
95
|
+
resolve(10); // close modal and return 10
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<LuiModalAsync closeOnOverlayClick={false}>
|
|
100
|
+
<LuiModalAsyncMain>
|
|
101
|
+
<LuiModalAsyncHeader title={'Generic modal'} onHelpClick={() => alert('help link')} />
|
|
102
|
+
<LuiModalAsyncContent>{text}</LuiModalAsyncContent>
|
|
103
|
+
</LuiModalAsyncMain>
|
|
104
|
+
<LuiModalAsyncButtonGroup>
|
|
105
|
+
<LuiModalAsyncButtonDismiss autofocus={true}>Dismiss</LuiModalAsyncButtonDismiss>
|
|
106
|
+
<LuiModalAsyncButtonContinue level={'tertiary'} onClick={doSomething}>
|
|
107
|
+
Continue onClick
|
|
108
|
+
</LuiModalAsyncButtonContinue>
|
|
109
|
+
<LuiModalAsyncButtonContinue value={10}>Continue resolve value</LuiModalAsyncButtonContinue>
|
|
110
|
+
</LuiModalAsyncButtonGroup>
|
|
111
|
+
</LuiModalAsync>
|
|
112
|
+
);
|
|
113
|
+
};
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
**Invoke the modal** — use `useShowAsyncModal`, await the result:
|
|
117
|
+
|
|
118
|
+
```tsx
|
|
119
|
+
import { useShowAsyncModal } from '@linzjs/windows';
|
|
120
|
+
|
|
121
|
+
export const TestModalUsage = () => {
|
|
122
|
+
// modalOwnerRef is only required if you have popout windows
|
|
123
|
+
const { showModal, modalOwnerRef } = useShowAsyncModal();
|
|
124
|
+
|
|
125
|
+
const showModalHandler = async () => {
|
|
126
|
+
const result = await showModal(
|
|
127
|
+
TestModal,
|
|
128
|
+
{ text: "I'm generic modal content" },
|
|
129
|
+
{ showOnAllWindows: true },
|
|
130
|
+
);
|
|
131
|
+
|
|
132
|
+
if (!result) return alert('Modal closed');
|
|
133
|
+
alert(`Modal result is: ${String(result)}`);
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
// Add modalOwnerRef so that modals work in popout windows
|
|
137
|
+
return (
|
|
138
|
+
<div ref={modalOwnerRef}>
|
|
139
|
+
<button onClick={() => void showModalHandler()}>Click to show the modal</button>
|
|
140
|
+
</div>
|
|
141
|
+
);
|
|
142
|
+
};
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
---
|
|
146
|
+
|
|
147
|
+
### Prefab Modal
|
|
148
|
+
|
|
149
|
+
Pre-built modals for common use cases: `outline`, `info`, `warning`, `error`, `success`, `progress`, and `blocked`.
|
|
150
|
+
|
|
151
|
+
| Outline | Info | Warning | Error |
|
|
152
|
+
|---------|------|---------|-------|
|
|
153
|
+
|  |  |  |  |
|
|
154
|
+
|
|
155
|
+
| Success | Progress | Blocked | Custom buttons |
|
|
156
|
+
|---------|----------|---------|----------------|
|
|
157
|
+
|  |  |  |  |
|
|
158
|
+
|
|
159
|
+
**Setup** — same `LuiModalAsyncContextProvider` as above.
|
|
160
|
+
|
|
161
|
+
**Invoke** — use `useLuiModalPrefab`:
|
|
162
|
+
|
|
163
|
+
```tsx
|
|
164
|
+
import { useLuiModalPrefab, LuiModalDontShowSessionRemove } from '@linzjs/windows';
|
|
165
|
+
|
|
166
|
+
export const PrefabModalUsage = () => {
|
|
167
|
+
const { modalOwnerRef, showPrefabModal } = useLuiModalPrefab();
|
|
168
|
+
|
|
169
|
+
return (
|
|
170
|
+
<div ref={modalOwnerRef} style={{ display: 'flex', gap: 10 }}>
|
|
171
|
+
{/* Info */}
|
|
172
|
+
<button
|
|
173
|
+
onClick={() =>
|
|
174
|
+
void showPrefabModal({
|
|
175
|
+
level: 'info',
|
|
176
|
+
title: 'You are a fantastic person',
|
|
177
|
+
children: 'Keep it up!',
|
|
178
|
+
})
|
|
179
|
+
}
|
|
180
|
+
>
|
|
181
|
+
Info
|
|
182
|
+
</button>
|
|
183
|
+
|
|
184
|
+
{/* Warning with custom buttons */}
|
|
185
|
+
<button
|
|
186
|
+
onClick={() =>
|
|
187
|
+
void showPrefabModal<'delete'>({
|
|
188
|
+
level: 'warning',
|
|
189
|
+
title: 'You are about to make changes',
|
|
190
|
+
children: 'Are you sure that you want to make these changes?',
|
|
191
|
+
helpLink: 'https://www.example.com/help',
|
|
192
|
+
buttons: [
|
|
193
|
+
{ title: 'Cancel', icon: 'ic_navigate_before', value: undefined },
|
|
194
|
+
{ title: 'Delete the world!', icon: 'ic_delete_solid', value: 'delete', level: 'error' },
|
|
195
|
+
],
|
|
196
|
+
}).then((result) => {
|
|
197
|
+
alert('Warning result: ' + result);
|
|
198
|
+
})
|
|
199
|
+
}
|
|
200
|
+
>
|
|
201
|
+
Warning
|
|
202
|
+
</button>
|
|
203
|
+
|
|
204
|
+
{/* Warning with "don't show again" */}
|
|
205
|
+
<button
|
|
206
|
+
onClick={() =>
|
|
207
|
+
void showPrefabModal({
|
|
208
|
+
level: 'warning',
|
|
209
|
+
title: 'Warning',
|
|
210
|
+
children: 'This message can be suppressed.',
|
|
211
|
+
dontShowAgainSessionKey: 'userId_surveyId_modalId',
|
|
212
|
+
buttons: [{ title: 'Dismiss', default: true }],
|
|
213
|
+
})
|
|
214
|
+
}
|
|
215
|
+
>
|
|
216
|
+
Warning + Don't show again
|
|
217
|
+
</button>
|
|
218
|
+
|
|
219
|
+
{/* Error */}
|
|
220
|
+
<button
|
|
221
|
+
onClick={() =>
|
|
222
|
+
void showPrefabModal({
|
|
223
|
+
level: 'error',
|
|
224
|
+
title: 'Something is not right',
|
|
225
|
+
children: 'Maybe stop doing that',
|
|
226
|
+
onHelpClick: () => {},
|
|
227
|
+
})
|
|
228
|
+
}
|
|
229
|
+
>
|
|
230
|
+
Error
|
|
231
|
+
</button>
|
|
232
|
+
|
|
233
|
+
{/* Success */}
|
|
234
|
+
<button
|
|
235
|
+
onClick={() =>
|
|
236
|
+
void showPrefabModal({
|
|
237
|
+
level: 'success',
|
|
238
|
+
title: 'You are a success',
|
|
239
|
+
children: 'Keep succeeding!',
|
|
240
|
+
onHelpClick: () => {},
|
|
241
|
+
})
|
|
242
|
+
}
|
|
243
|
+
>
|
|
244
|
+
Success
|
|
245
|
+
</button>
|
|
246
|
+
|
|
247
|
+
{/* Progress — polledCloseCondition closes the modal automatically */}
|
|
248
|
+
<button
|
|
249
|
+
onClick={() => {
|
|
250
|
+
let done = false;
|
|
251
|
+
setTimeout(() => (done = true), 5000);
|
|
252
|
+
void showPrefabModal({
|
|
253
|
+
level: 'progress',
|
|
254
|
+
title: 'Signing in progress',
|
|
255
|
+
children: 'This modal will close in 5 seconds unless cancelled.',
|
|
256
|
+
buttons: [{ title: 'Cancel', value: true }],
|
|
257
|
+
polledCloseCondition: () => done,
|
|
258
|
+
}).then((result) => {
|
|
259
|
+
alert(result === true ? 'Cancelled' : 'Timed-out');
|
|
260
|
+
});
|
|
261
|
+
}}
|
|
262
|
+
>
|
|
263
|
+
Progress
|
|
264
|
+
</button>
|
|
265
|
+
|
|
266
|
+
{/* Blocked */}
|
|
267
|
+
<button
|
|
268
|
+
onClick={() =>
|
|
269
|
+
void showPrefabModal({
|
|
270
|
+
level: 'blocked',
|
|
271
|
+
title: 'Plan Generation blocked',
|
|
272
|
+
children: "This CSD is being used by 'Joe Bloggs'. Please close Plan Generation.",
|
|
273
|
+
buttons: [{ title: 'Return to Survey Capture' }],
|
|
274
|
+
})
|
|
275
|
+
}
|
|
276
|
+
>
|
|
277
|
+
Blocked
|
|
278
|
+
</button>
|
|
279
|
+
</div>
|
|
280
|
+
);
|
|
281
|
+
};
|
|
282
|
+
```
|
|
283
|
+
|
|
284
|
+
To clear a "don't show again" session key programmatically:
|
|
285
|
+
```tsx
|
|
286
|
+
import { LuiModalDontShowSessionRemove } from '@linzjs/windows';
|
|
287
|
+
|
|
288
|
+
LuiModalDontShowSessionRemove('userId_surveyId_modalId');
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
---
|
|
292
|
+
|
|
293
|
+
### Upload Modal
|
|
294
|
+
|
|
295
|
+
A prefab modal for file upload interactions.
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
**Setup** — same `LuiModalAsyncContextProvider` as above.
|
|
300
|
+
|
|
301
|
+
**Invoke** — use `useLuiModalUpload`:
|
|
302
|
+
|
|
303
|
+
```tsx
|
|
304
|
+
import { useLuiModalUpload } from '@linzjs/windows';
|
|
305
|
+
|
|
306
|
+
export const ModalUploadUsage = () => {
|
|
307
|
+
const { modalOwnerRef, showUploadModal } = useLuiModalUpload();
|
|
308
|
+
|
|
309
|
+
return (
|
|
310
|
+
<div ref={modalOwnerRef}>
|
|
311
|
+
<button
|
|
312
|
+
onClick={() =>
|
|
313
|
+
void showUploadModal({
|
|
314
|
+
title: 'Add georeferenced image',
|
|
315
|
+
content: 'Once your image has been uploaded, place markers to align the image to the spatial view.',
|
|
316
|
+
width: 480,
|
|
317
|
+
fileDescription: 'image',
|
|
318
|
+
fileFormatText: 'Format: jpg, jpeg, png',
|
|
319
|
+
acceptedExtensions: ['jpg', 'jpeg', 'png'],
|
|
320
|
+
customFileErrorMessage: 'Incorrect file format!',
|
|
321
|
+
}).then((file) => {
|
|
322
|
+
console.log(file);
|
|
323
|
+
})
|
|
324
|
+
}
|
|
325
|
+
>
|
|
326
|
+
Upload Image...
|
|
327
|
+
</button>
|
|
328
|
+
</div>
|
|
329
|
+
);
|
|
330
|
+
};
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
---
|
|
334
|
+
|
|
335
|
+
### Panel
|
|
336
|
+
|
|
337
|
+
Draggable, resizeable, pop-in/pop-out panel windows. Panels are opened imperatively via `OpenPanelButton` or `openPanel`.
|
|
338
|
+
|
|
339
|
+
|
|
340
|
+
|
|
341
|
+
**Setup** — wrap your app with the context provider once at the root:
|
|
342
|
+
|
|
343
|
+
```tsx
|
|
344
|
+
import { PanelsContextProvider } from '@linzjs/windows';
|
|
345
|
+
|
|
346
|
+
export const App = () => (
|
|
347
|
+
<PanelsContextProvider baseZIndex={500}>
|
|
348
|
+
<div>...the rest of your app...</div>
|
|
349
|
+
</PanelsContextProvider>
|
|
350
|
+
);
|
|
351
|
+
```
|
|
352
|
+
|
|
353
|
+
**Define a panel component:**
|
|
354
|
+
|
|
355
|
+
```tsx
|
|
356
|
+
import { Panel, PanelContent, PanelHeader } from '@linzjs/windows';
|
|
357
|
+
|
|
358
|
+
export const ShowPanelComponent = ({ data }: { data: number }) => (
|
|
359
|
+
<Panel title={`Panel demo ${data}`} size={{ width: 640, height: 'auto' }}>
|
|
360
|
+
<PanelHeader
|
|
361
|
+
helpUrl={'#help'}
|
|
362
|
+
icon={'ic_add_adopt'}
|
|
363
|
+
onHelpClick={() => alert('Help!')}
|
|
364
|
+
/>
|
|
365
|
+
<PanelContent>
|
|
366
|
+
{/* panel body content */}
|
|
367
|
+
</PanelContent>
|
|
368
|
+
</Panel>
|
|
369
|
+
);
|
|
370
|
+
|
|
371
|
+
// Panel as modal (disables popout, uses fixed height)
|
|
372
|
+
export const ShowPanelModalComponent = ({ data }: { data: number }) => (
|
|
373
|
+
<Panel title={`Panel demo ${data}`} size={{ width: 640, height: 400 }} modal={true}>
|
|
374
|
+
<PanelHeader icon={'ic_add_adopt'} disablePopout={true} />
|
|
375
|
+
<PanelContent>
|
|
376
|
+
{/* panel body content */}
|
|
377
|
+
</PanelContent>
|
|
378
|
+
</Panel>
|
|
379
|
+
);
|
|
380
|
+
```
|
|
381
|
+
|
|
382
|
+
**Open panels** — use `OpenPanelButton` or the `openPanel` function:
|
|
383
|
+
|
|
384
|
+
```tsx
|
|
385
|
+
import { OpenPanelButton } from '@linzjs/windows';
|
|
386
|
+
|
|
387
|
+
export const TestShowPanel = () => (
|
|
388
|
+
<div style={{ display: 'flex', gap: 8 }}>
|
|
389
|
+
{/* uniqueId prevents duplicate panels */}
|
|
390
|
+
<OpenPanelButton
|
|
391
|
+
buttonText={'Panel 1'}
|
|
392
|
+
testId={'panel1'}
|
|
393
|
+
componentFn={() => <ShowPanelComponent data={1} />}
|
|
394
|
+
uniqueId="panel1"
|
|
395
|
+
/>
|
|
396
|
+
<OpenPanelButton
|
|
397
|
+
buttonText={'Panel 2'}
|
|
398
|
+
testId={'panel2'}
|
|
399
|
+
componentFn={() => <ShowPanelComponent data={2} />}
|
|
400
|
+
uniqueId="panel2"
|
|
401
|
+
/>
|
|
402
|
+
<OpenPanelButton
|
|
403
|
+
buttonText={'Panel as a Modal'}
|
|
404
|
+
componentFn={() => <ShowPanelModalComponent data={3} />}
|
|
405
|
+
/>
|
|
406
|
+
{/* Panel with dynamic bounds — recalculated on resize */}
|
|
407
|
+
<OpenPanelButton
|
|
408
|
+
buttonText={'Dynamic bounds panel'}
|
|
409
|
+
componentFn={() => (
|
|
410
|
+
<ShowPanelModalComponent
|
|
411
|
+
data={3}
|
|
412
|
+
resizeable={false}
|
|
413
|
+
dynamicBounds={() => ({
|
|
414
|
+
x: window.innerWidth / 3,
|
|
415
|
+
y: window.innerHeight / 4,
|
|
416
|
+
height: 'auto',
|
|
417
|
+
width: window.innerWidth * 0.4,
|
|
418
|
+
})}
|
|
419
|
+
/>
|
|
420
|
+
)}
|
|
421
|
+
/>
|
|
422
|
+
</div>
|
|
423
|
+
);
|
|
424
|
+
```
|
|
425
|
+
|
|
426
|
+
**Panel props:**
|
|
427
|
+
|
|
428
|
+
| Prop | Type | Description |
|
|
429
|
+
|------|------|-------------|
|
|
430
|
+
| `title` | `string` | Panel title bar text |
|
|
431
|
+
| `size` | `{ width: number, height: number \| 'auto' }` | Initial panel size |
|
|
432
|
+
| `modal` | `boolean` | Disable dragging and popout, center on screen |
|
|
433
|
+
| `resizeable` | `boolean` | Allow user resizing (default `true`) |
|
|
434
|
+
| `maxHeight` | `number` | Maximum height in px |
|
|
435
|
+
| `maxWidth` | `number` | Maximum width in px |
|
|
436
|
+
| `minHeight` | `number` | Minimum height in px |
|
|
437
|
+
| `minWidth` | `number` | Minimum width in px |
|
|
438
|
+
| `dynamicBounds` | `() => { x, y, width, height }` | Callback to recalculate position/size dynamically |
|
|
439
|
+
|
|
440
|
+
**Saving panel state** — pass `panelStateOptions` to `PanelsContextProvider` or `OpenPanelButton`:
|
|
441
|
+
|
|
442
|
+
```tsx
|
|
443
|
+
<OpenPanelButton
|
|
444
|
+
buttonText={'Panel'}
|
|
445
|
+
componentFn={() => <ShowPanelComponent data={1} />}
|
|
446
|
+
panelStateOptions={{
|
|
447
|
+
saveStateIn: 'localStorage',
|
|
448
|
+
saveStateKey: 'userId',
|
|
449
|
+
}}
|
|
450
|
+
/>
|
|
451
|
+
```
|
|
452
|
+
|
|
453
|
+
---
|
|
454
|
+
|
|
455
|
+
### Panel with Docking
|
|
456
|
+
|
|
457
|
+
Panels can dock into a designated `PanelDock` area. Add `dockTo` to `PanelHeader` and place a `PanelDock` in your layout.
|
|
458
|
+
|
|
459
|
+
```tsx
|
|
460
|
+
import { OpenPanelButton, Panel, PanelContent, PanelDock, PanelHeader } from '@linzjs/windows';
|
|
461
|
+
import { useState } from 'react';
|
|
462
|
+
|
|
463
|
+
// Panel that can dock to the left side
|
|
464
|
+
export const DockablePanel = ({ data }: { data: number }) => (
|
|
465
|
+
<Panel title={`Panel demo ${data}`} size={{ width: 640, height: 400 }}>
|
|
466
|
+
<PanelHeader dockTo={'leftSide'} />
|
|
467
|
+
<PanelContent>
|
|
468
|
+
{/* panel body content */}
|
|
469
|
+
</PanelContent>
|
|
470
|
+
</Panel>
|
|
471
|
+
);
|
|
472
|
+
|
|
473
|
+
export const TestShowPanel = () => {
|
|
474
|
+
const [visible, setVisible] = useState(true);
|
|
475
|
+
return (
|
|
476
|
+
<>
|
|
477
|
+
<div style={{ display: 'flex', gap: 8 }}>
|
|
478
|
+
<OpenPanelButton buttonText={'panel'} componentFn={() => <DockablePanel data={1} />} />
|
|
479
|
+
<button onClick={() => setVisible(!visible)}>Toggle dock visible</button>
|
|
480
|
+
</div>
|
|
481
|
+
{/* The panel docks into this area when the user clicks the dock button */}
|
|
482
|
+
{visible && <PanelDock id={'leftSide'}>The Panel will dock in here</PanelDock>}
|
|
483
|
+
</>
|
|
484
|
+
);
|
|
485
|
+
};
|
|
486
|
+
```
|
|
487
|
+
|
|
488
|
+
---
|
|
489
|
+
|
|
490
|
+
### Tabbed Panel
|
|
491
|
+
|
|
492
|
+
Panels support tabs via the `@linzjs/lui` `LuiTabs` components. Wrap the `Panel` in `LuiTabs` and use `LuiTabsGroup`/`LuiTabsPanelSwitch` in the header.
|
|
493
|
+
|
|
494
|
+
|
|
495
|
+
|
|
496
|
+
```tsx
|
|
497
|
+
import { LuiTabs, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch } from '@linzjs/lui';
|
|
498
|
+
import { OpenPanelButton, Panel, PanelContent, PanelHeader } from '@linzjs/windows';
|
|
499
|
+
|
|
500
|
+
export const TabbedPanelComponent = ({ data }: { data: number }) => (
|
|
501
|
+
<LuiTabs defaultPanel="africa">
|
|
502
|
+
<Panel title={`Panel demo ${data}`} size={{ width: 640, height: 400 }}>
|
|
503
|
+
<PanelHeader
|
|
504
|
+
icon={'ic_send'}
|
|
505
|
+
onHelpClick={() => alert('Help!!!')}
|
|
506
|
+
extraLeft={
|
|
507
|
+
<LuiTabsGroup ariaLabel="Animals">
|
|
508
|
+
<LuiTabsPanelSwitch targetPanel="africa">Africa</LuiTabsPanelSwitch>
|
|
509
|
+
<LuiTabsPanelSwitch targetPanel="asia">Asia</LuiTabsPanelSwitch>
|
|
510
|
+
</LuiTabsGroup>
|
|
511
|
+
}
|
|
512
|
+
/>
|
|
513
|
+
<PanelContent>
|
|
514
|
+
<LuiTabsPanel panel="africa">
|
|
515
|
+
<h2>African Countries</h2>
|
|
516
|
+
</LuiTabsPanel>
|
|
517
|
+
<LuiTabsPanel panel="asia">
|
|
518
|
+
<h2>Asian Countries</h2>
|
|
519
|
+
</LuiTabsPanel>
|
|
520
|
+
</PanelContent>
|
|
521
|
+
</Panel>
|
|
522
|
+
</LuiTabs>
|
|
523
|
+
);
|
|
524
|
+
|
|
525
|
+
export const TestShowTabbedPanel = () => (
|
|
526
|
+
<>
|
|
527
|
+
<OpenPanelButton buttonText={'TestPanel 1'} componentFn={() => <TabbedPanelComponent data={1} />} />
|
|
528
|
+
<OpenPanelButton buttonText={'TestPanel 2'} componentFn={() => <TabbedPanelComponent data={2} />} />
|
|
529
|
+
</>
|
|
530
|
+
);
|
|
531
|
+
```
|
|
532
|
+
|
|
533
|
+
---
|
|
534
|
+
|
|
535
|
+
### Panel with Global Modal
|
|
536
|
+
|
|
537
|
+
When a modal is shown from inside a panel that has been popped out into a separate window, use `showOnAllWindows: true` to ensure the modal appears in the correct window.
|
|
538
|
+
|
|
539
|
+
```tsx
|
|
540
|
+
import { useLuiModalPrefab, OpenPanelButton, Panel, PanelContent, PanelHeader } from '@linzjs/windows';
|
|
541
|
+
|
|
542
|
+
// showOnAllWindows ensures the modal appears even in popped-out windows
|
|
543
|
+
const PanelContents = () => {
|
|
544
|
+
const { showPrefabModal } = useLuiModalPrefab();
|
|
545
|
+
|
|
546
|
+
return (
|
|
547
|
+
<div>
|
|
548
|
+
<button
|
|
549
|
+
onClick={() =>
|
|
550
|
+
void showPrefabModal({
|
|
551
|
+
showOnAllWindows: true,
|
|
552
|
+
level: 'info',
|
|
553
|
+
title: 'You are a fantastic person',
|
|
554
|
+
children: 'Keep it up!',
|
|
555
|
+
})
|
|
556
|
+
}
|
|
557
|
+
>
|
|
558
|
+
Show modal
|
|
559
|
+
</button>
|
|
560
|
+
</div>
|
|
561
|
+
);
|
|
562
|
+
};
|
|
563
|
+
|
|
564
|
+
export const TestShowPanelWithGlobalModal = () => (
|
|
565
|
+
<>
|
|
566
|
+
<OpenPanelButton buttonText={'TestPanel 1'} componentFn={() => (
|
|
567
|
+
<Panel title={'Panel demo 1'} size={{ width: 640, height: 400 }}>
|
|
568
|
+
<PanelHeader icon={'ic_send'} onHelpClick={() => alert('Help!!!')} />
|
|
569
|
+
<PanelContent><PanelContents /></PanelContent>
|
|
570
|
+
</Panel>
|
|
571
|
+
)} />
|
|
572
|
+
</>
|
|
573
|
+
);
|
|
574
|
+
```
|
|
575
|
+
|
|
576
|
+
---
|
|
577
|
+
|
|
578
|
+
### Ribbon
|
|
579
|
+
|
|
580
|
+
A toolbar ribbon with buttons, sliders, menus, and separators. Supports horizontal and vertical orientations.
|
|
581
|
+
|
|
582
|
+
**Setup** — requires both `LuiModalAsyncContextProvider` and `PanelsContextProvider`:
|
|
583
|
+
|
|
584
|
+
```tsx
|
|
585
|
+
import {
|
|
586
|
+
RibbonButton,
|
|
587
|
+
RibbonButtonLink,
|
|
588
|
+
RibbonButtonOpenPanel,
|
|
589
|
+
RibbonButtonSlider,
|
|
590
|
+
RibbonContainer,
|
|
591
|
+
RibbonSeparator,
|
|
592
|
+
RibbonMenu,
|
|
593
|
+
RibbonMenuOption,
|
|
594
|
+
RibbonMenuSeparator,
|
|
595
|
+
Panel,
|
|
596
|
+
PanelContent,
|
|
597
|
+
PanelHeader,
|
|
598
|
+
} from '@linzjs/windows';
|
|
599
|
+
import { useState } from 'react';
|
|
600
|
+
|
|
601
|
+
export const TestRibbonPanel = () => {
|
|
602
|
+
const [selectedItem, setSelectedItem] = useState('ic_add_rectangle');
|
|
603
|
+
const [loading, setLoading] = useState(false);
|
|
604
|
+
const [processing, setProcessing] = useState(false);
|
|
605
|
+
|
|
606
|
+
return (
|
|
607
|
+
<>
|
|
608
|
+
<button onClick={() => setLoading(!loading)}>Toggle loading</button>
|
|
609
|
+
<button onClick={() => setProcessing(!processing)}>Toggle processing</button>
|
|
610
|
+
|
|
611
|
+
{/* Horizontal ribbon */}
|
|
612
|
+
<RibbonContainer style={{ position: 'absolute', left: 220, top: 120 }}>
|
|
613
|
+
|
|
614
|
+
{/* Button that opens a panel — disabled state */}
|
|
615
|
+
<RibbonButtonOpenPanel
|
|
616
|
+
disabled
|
|
617
|
+
title={'Marks'}
|
|
618
|
+
icon={'ic_marks'}
|
|
619
|
+
componentFn={() => <Panel title="Marks" size={{ width: 640, height: 400 }}><PanelHeader /><PanelContent /></Panel>}
|
|
620
|
+
loading={loading}
|
|
621
|
+
/>
|
|
622
|
+
|
|
623
|
+
<RibbonSeparator />
|
|
624
|
+
|
|
625
|
+
{/* Button that opens a panel — with processing indicator */}
|
|
626
|
+
<RibbonButtonOpenPanel
|
|
627
|
+
title={'Vectors'}
|
|
628
|
+
icon={'ic_line_irregular'}
|
|
629
|
+
componentFn={() => <Panel title="Vectors" size={{ width: 640, height: 400 }}><PanelHeader /><PanelContent /></Panel>}
|
|
630
|
+
loading={loading}
|
|
631
|
+
processing={processing}
|
|
632
|
+
processingMessage={'Validating...'}
|
|
633
|
+
/>
|
|
634
|
+
|
|
635
|
+
{/* Slider button — opens a sub-panel of options below */}
|
|
636
|
+
<RibbonButtonSlider title={selectedItem} icon={selectedItem} alignment={'down'} loading={loading}>
|
|
637
|
+
<RibbonContainer orientation={'vertical'}>
|
|
638
|
+
<RibbonButton
|
|
639
|
+
title={'Rectangle'}
|
|
640
|
+
icon={'ic_add_rectangle'}
|
|
641
|
+
selected={selectedItem === 'ic_add_rectangle'}
|
|
642
|
+
onClick={() => setSelectedItem('ic_add_rectangle')}
|
|
643
|
+
/>
|
|
644
|
+
<RibbonButton
|
|
645
|
+
title={'Other'}
|
|
646
|
+
icon={'ic_polygon_selection'}
|
|
647
|
+
selected={selectedItem === 'ic_polygon_selection'}
|
|
648
|
+
onClick={() => setSelectedItem('ic_polygon_selection')}
|
|
649
|
+
/>
|
|
650
|
+
</RibbonContainer>
|
|
651
|
+
</RibbonButtonSlider>
|
|
652
|
+
|
|
653
|
+
{/* Slider button — dropdown menu with autoClose */}
|
|
654
|
+
<RibbonButtonSlider title={'Other'} icon={'ic_more_vert'} alignment={'down'} autoClose={true} loading={loading}>
|
|
655
|
+
<RibbonMenu>
|
|
656
|
+
<RibbonMenuOption icon={'ic_define_nonprimary_diagram_circle'}>Circle</RibbonMenuOption>
|
|
657
|
+
<RibbonMenuOption icon={'ic_define_nonprimary_diagram_rectangle'} disabled={true}>Rectangle</RibbonMenuOption>
|
|
658
|
+
<RibbonMenuSeparator />
|
|
659
|
+
<RibbonMenuOption>Item 3</RibbonMenuOption>
|
|
660
|
+
<RibbonMenuSeparator />
|
|
661
|
+
<RibbonMenuOption icon={'ic_clear'}>Cancel</RibbonMenuOption>
|
|
662
|
+
</RibbonMenu>
|
|
663
|
+
</RibbonButtonSlider>
|
|
664
|
+
</RibbonContainer>
|
|
665
|
+
|
|
666
|
+
{/* Vertical ribbon */}
|
|
667
|
+
<RibbonContainer orientation={'vertical'} style={{ position: 'absolute', left: 220, top: 180 }}>
|
|
668
|
+
<RibbonButtonOpenPanel
|
|
669
|
+
title={'Vectors'}
|
|
670
|
+
icon={'ic_timeline'}
|
|
671
|
+
componentFn={() => <Panel title="Vectors" size={{ width: 640, height: 400 }}><PanelHeader /><PanelContent /></Panel>}
|
|
672
|
+
loading={loading}
|
|
673
|
+
/>
|
|
674
|
+
{/* Slider opens to the right */}
|
|
675
|
+
<RibbonButtonSlider title={selectedItem} icon={selectedItem} alignment={'right'} loading={loading}>
|
|
676
|
+
<RibbonContainer>
|
|
677
|
+
<RibbonButton
|
|
678
|
+
title={'Rectangle'}
|
|
679
|
+
icon={'ic_add_rectangle'}
|
|
680
|
+
selected={selectedItem === 'ic_add_rectangle'}
|
|
681
|
+
onClick={() => setSelectedItem('ic_add_rectangle')}
|
|
682
|
+
/>
|
|
683
|
+
</RibbonContainer>
|
|
684
|
+
</RibbonButtonSlider>
|
|
685
|
+
{/* External link button */}
|
|
686
|
+
<RibbonButtonLink href={'https://example.com/'} icon={'ic_link'} loading={loading} />
|
|
687
|
+
</RibbonContainer>
|
|
688
|
+
</>
|
|
689
|
+
);
|
|
690
|
+
};
|
|
691
|
+
```
|
|
692
|
+
|
|
693
|
+
**`RibbonButtonSlider` alignment options:** `'down'` | `'up'` | `'left'` | `'right'` | `'left-up'` | `'right-up'` | `'right-center'`
|
package/dist/common/uuid.ts
CHANGED