@pixpilot/shadcn-ui 1.32.1 → 1.34.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/dist/Button.d.cts +2 -2
- package/dist/ButtonExtended.d.cts +2 -2
- package/dist/Card.d.cts +3 -3
- package/dist/ColorSelect.d.cts +2 -2
- package/dist/ContentCard.d.cts +2 -2
- package/dist/DatePicker.d.cts +2 -2
- package/dist/Rating.d.cts +3 -3
- package/dist/Select.d.cts +2 -2
- package/dist/confirmation-dialog/ConfirmationDialog.cjs +4 -4
- package/dist/confirmation-dialog/ConfirmationDialog.d.cts +1 -1
- package/dist/confirmation-dialog/ConfirmationDialog.d.ts +1 -2
- package/dist/confirmation-dialog/ConfirmationDialog.js +4 -3
- package/dist/confirmation-dialog/confirmation-dialogs.cjs +7 -6
- package/dist/confirmation-dialog/confirmation-dialogs.d.cts +6 -1
- package/dist/confirmation-dialog/confirmation-dialogs.d.ts +6 -1
- package/dist/confirmation-dialog/confirmation-dialogs.js +7 -5
- package/dist/confirmation-dialog/index.cjs +0 -1
- package/dist/confirmation-dialog/index.d.cts +1 -2
- package/dist/confirmation-dialog/index.d.ts +1 -2
- package/dist/confirmation-dialog/index.js +1 -2
- package/dist/dialog/Dialog.d.cts +5 -5
- package/dist/dialog/Dialog.d.ts +5 -5
- package/dist/{confirmation-dialog → dialog-provider}/DialogProvider.cjs +1 -1
- package/dist/{confirmation-dialog → dialog-provider}/DialogProvider.d.cts +1 -1
- package/dist/{confirmation-dialog → dialog-provider}/DialogProvider.d.ts +1 -1
- package/dist/{confirmation-dialog → dialog-provider}/DialogProvider.js +1 -1
- package/dist/dialog-provider/dialog-registry.cjs +100 -0
- package/dist/dialog-provider/dialog-registry.d.cts +150 -0
- package/dist/dialog-provider/dialog-registry.d.ts +150 -0
- package/dist/dialog-provider/dialog-registry.js +93 -0
- package/dist/dialog-provider/index.cjs +4 -0
- package/dist/dialog-provider/index.d.cts +4 -0
- package/dist/dialog-provider/index.d.ts +4 -0
- package/dist/dialog-provider/index.js +4 -0
- package/dist/dialog-provider/register-dialog.cjs +64 -0
- package/dist/dialog-provider/register-dialog.d.cts +98 -0
- package/dist/dialog-provider/register-dialog.d.ts +98 -0
- package/dist/dialog-provider/register-dialog.js +61 -0
- package/dist/dialog-provider/show-dialog.cjs +30 -0
- package/dist/dialog-provider/show-dialog.d.cts +24 -0
- package/dist/dialog-provider/show-dialog.d.ts +24 -0
- package/dist/dialog-provider/show-dialog.js +28 -0
- package/dist/file-upload/FileUpload.d.cts +2 -2
- package/dist/file-upload/FileUpload.d.ts +2 -2
- package/dist/file-upload-inline/FileUploadInline.d.cts +2 -2
- package/dist/file-upload-inline/FileUploadInline.d.ts +2 -2
- package/dist/file-upload-root/FileUploadRoot.d.cts +2 -2
- package/dist/file-upload-root/FileUploadRoot.d.ts +2 -2
- package/dist/index.cjs +14 -1
- package/dist/index.d.cts +7 -3
- package/dist/index.d.ts +7 -3
- package/dist/index.js +7 -3
- package/dist/input/Input.d.cts +2 -2
- package/dist/tags-input/TagsInput.d.cts +2 -2
- package/dist/tags-input/TagsInputInline.d.cts +2 -2
- package/dist/theme-toggle/ThemeModeDropdown.d.cts +2 -2
- package/dist/theme-toggle/ThemeModeSwitchInside.d.cts +2 -2
- package/dist/theme-toggle/ThemeModeSwitchOutside.d.cts +2 -2
- package/dist/theme-toggle/ThemeModeToggleButton.d.cts +2 -2
- package/package.json +1 -1
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { registerDialog } from "./register-dialog.js";
|
|
2
|
+
import { showDialog } from "./show-dialog.js";
|
|
3
|
+
import { ComponentType, FC } from "react";
|
|
4
|
+
import { NiceModalHocProps, useModal } from "@ebay/nice-modal-react";
|
|
5
|
+
|
|
6
|
+
//#region src/dialog-provider/dialog-registry.d.ts
|
|
7
|
+
declare const useDialog: typeof useModal;
|
|
8
|
+
interface CreatedDialog<TProps extends object> extends FC<TProps & NiceModalHocProps> {
|
|
9
|
+
show: <TResult = unknown>(props?: TProps) => Promise<TResult>;
|
|
10
|
+
hide: <TResult = unknown>() => Promise<TResult>;
|
|
11
|
+
remove: () => void;
|
|
12
|
+
}
|
|
13
|
+
declare function createDialog<TProps extends object>(component: ComponentType<TProps>): CreatedDialog<TProps>;
|
|
14
|
+
/**
|
|
15
|
+
* Hides a registered dialog by id.
|
|
16
|
+
*
|
|
17
|
+
* Use this when the caller only knows the dialog id. If you already have the
|
|
18
|
+
* controller returned by `dialog.register(...)`, prefer `controller.hide()`.
|
|
19
|
+
*
|
|
20
|
+
* @param id - Dialog id that was previously registered.
|
|
21
|
+
* @returns A promise from NiceModal that resolves after the hide action is
|
|
22
|
+
* dispatched.
|
|
23
|
+
*
|
|
24
|
+
* Usage:
|
|
25
|
+
* ```ts
|
|
26
|
+
* await hideDialog('project-dialog');
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
declare function hideDialog<TResult = unknown>(id: string): Promise<TResult>;
|
|
30
|
+
/**
|
|
31
|
+
* Removes a registered dialog instance from the NiceModal render tree by id.
|
|
32
|
+
*
|
|
33
|
+
* This does not unregister the dialog component; it only removes the mounted
|
|
34
|
+
* instance from the modal tree.
|
|
35
|
+
*
|
|
36
|
+
* @param id - Dialog id that was previously registered.
|
|
37
|
+
* Usage:
|
|
38
|
+
* ```ts
|
|
39
|
+
* removeDialog('project-dialog');
|
|
40
|
+
* ```
|
|
41
|
+
*/
|
|
42
|
+
declare function removeDialog(id: string): void;
|
|
43
|
+
/**
|
|
44
|
+
* Unregisters a dialog component by id.
|
|
45
|
+
*
|
|
46
|
+
* Use this when a registered dialog should no longer be available through
|
|
47
|
+
* `showDialog(...)` or `dialog.show(...)`.
|
|
48
|
+
*
|
|
49
|
+
* @param id - Dialog id that was previously registered.
|
|
50
|
+
* Usage:
|
|
51
|
+
* ```ts
|
|
52
|
+
* unregisterDialog('project-dialog');
|
|
53
|
+
* ```
|
|
54
|
+
*/
|
|
55
|
+
declare function unregisterDialog(id: string): void;
|
|
56
|
+
interface DialogRegistry {
|
|
57
|
+
/**
|
|
58
|
+
* Registers a dialog component and returns a typed controller.
|
|
59
|
+
*
|
|
60
|
+
* @returns A controller with `id`, `show`, `hide`, and `remove`.
|
|
61
|
+
*
|
|
62
|
+
* Usage:
|
|
63
|
+
* ```ts
|
|
64
|
+
* const projectDialog = dialog.register('project-dialog', ProjectDialog);
|
|
65
|
+
* ```
|
|
66
|
+
*/
|
|
67
|
+
register: typeof registerDialog;
|
|
68
|
+
/**
|
|
69
|
+
* Creates a custom NiceModal dialog component with controller helpers.
|
|
70
|
+
*
|
|
71
|
+
* Use this for dialogs that need to control `useDialog()` directly. For simple
|
|
72
|
+
* shadcn dialogs, prefer `dialog.register(...)`.
|
|
73
|
+
*
|
|
74
|
+
* Usage:
|
|
75
|
+
* ```ts
|
|
76
|
+
* const CustomDialog = dialog.create((props) => {
|
|
77
|
+
* const modal = dialog.useDialog();
|
|
78
|
+
* return <Dialog open={modal.visible} onOpenChange={(open) => !open && modal.hide()} />;
|
|
79
|
+
* });
|
|
80
|
+
*
|
|
81
|
+
* await CustomDialog.show({ projectId: 'project-1' });
|
|
82
|
+
* ```
|
|
83
|
+
*/
|
|
84
|
+
create: typeof createDialog;
|
|
85
|
+
/**
|
|
86
|
+
* Shows a registered dialog by id with generic props.
|
|
87
|
+
*
|
|
88
|
+
* @returns A promise resolved by the dialog component.
|
|
89
|
+
*
|
|
90
|
+
* Usage:
|
|
91
|
+
* ```ts
|
|
92
|
+
* await dialog.show('project-dialog', { projectId: 'project-1' });
|
|
93
|
+
* ```
|
|
94
|
+
*/
|
|
95
|
+
show: typeof showDialog;
|
|
96
|
+
/**
|
|
97
|
+
* Hides a registered dialog by id.
|
|
98
|
+
*
|
|
99
|
+
* @returns A promise from NiceModal after the hide action is dispatched.
|
|
100
|
+
*
|
|
101
|
+
* Usage:
|
|
102
|
+
* ```ts
|
|
103
|
+
* await dialog.hide('project-dialog');
|
|
104
|
+
* ```
|
|
105
|
+
*/
|
|
106
|
+
hide: typeof hideDialog;
|
|
107
|
+
/**
|
|
108
|
+
* Removes a registered dialog instance from the render tree by id.
|
|
109
|
+
*
|
|
110
|
+
* @returns Nothing.
|
|
111
|
+
*
|
|
112
|
+
* Usage:
|
|
113
|
+
* ```ts
|
|
114
|
+
* dialog.remove('project-dialog');
|
|
115
|
+
* ```
|
|
116
|
+
*/
|
|
117
|
+
remove: typeof removeDialog;
|
|
118
|
+
/**
|
|
119
|
+
* Unregisters a dialog component by id.
|
|
120
|
+
*
|
|
121
|
+
* @returns Nothing.
|
|
122
|
+
*
|
|
123
|
+
* Usage:
|
|
124
|
+
* ```ts
|
|
125
|
+
* dialog.unregister('project-dialog');
|
|
126
|
+
* ```
|
|
127
|
+
*/
|
|
128
|
+
unregister: typeof unregisterDialog;
|
|
129
|
+
useDialog: typeof useDialog;
|
|
130
|
+
}
|
|
131
|
+
/**
|
|
132
|
+
* Convenience registry facade for dialog operations.
|
|
133
|
+
*
|
|
134
|
+
* Use this when you prefer a single import with discoverable methods instead of
|
|
135
|
+
* importing `registerDialog`, `showDialog`, `hideDialog`, `removeDialog`, and
|
|
136
|
+
* `unregisterDialog` separately.
|
|
137
|
+
*
|
|
138
|
+
* @returns An object of dialog helper functions.
|
|
139
|
+
*
|
|
140
|
+
* Usage:
|
|
141
|
+
* ```ts
|
|
142
|
+
* const projectDialog = dialog.register('project-dialog', ProjectDialog);
|
|
143
|
+
* await projectDialog.show({ projectId: 'project-1' });
|
|
144
|
+
* await dialog.show('project-dialog', { projectId: 'project-2' });
|
|
145
|
+
* dialog.unregister('project-dialog');
|
|
146
|
+
* ```
|
|
147
|
+
*/
|
|
148
|
+
declare const dialog: DialogRegistry;
|
|
149
|
+
//#endregion
|
|
150
|
+
export { CreatedDialog, DialogRegistry, createDialog, dialog, hideDialog, removeDialog, unregisterDialog, useDialog };
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { registerDialog } from "./register-dialog.js";
|
|
2
|
+
import { showDialog } from "./show-dialog.js";
|
|
3
|
+
import NiceModal, { unregister, useModal } from "@ebay/nice-modal-react";
|
|
4
|
+
|
|
5
|
+
//#region src/dialog-provider/dialog-registry.ts
|
|
6
|
+
const useDialog = useModal;
|
|
7
|
+
function createDialog(component) {
|
|
8
|
+
const CreatedDialog = NiceModal.create(component);
|
|
9
|
+
return Object.assign(CreatedDialog, {
|
|
10
|
+
show: async (props) => NiceModal.show(CreatedDialog, props),
|
|
11
|
+
hide: async () => NiceModal.hide(CreatedDialog),
|
|
12
|
+
remove: () => {
|
|
13
|
+
NiceModal.remove(CreatedDialog);
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Hides a registered dialog by id.
|
|
19
|
+
*
|
|
20
|
+
* Use this when the caller only knows the dialog id. If you already have the
|
|
21
|
+
* controller returned by `dialog.register(...)`, prefer `controller.hide()`.
|
|
22
|
+
*
|
|
23
|
+
* @param id - Dialog id that was previously registered.
|
|
24
|
+
* @returns A promise from NiceModal that resolves after the hide action is
|
|
25
|
+
* dispatched.
|
|
26
|
+
*
|
|
27
|
+
* Usage:
|
|
28
|
+
* ```ts
|
|
29
|
+
* await hideDialog('project-dialog');
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
async function hideDialog(id) {
|
|
33
|
+
return NiceModal.hide(id);
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Removes a registered dialog instance from the NiceModal render tree by id.
|
|
37
|
+
*
|
|
38
|
+
* This does not unregister the dialog component; it only removes the mounted
|
|
39
|
+
* instance from the modal tree.
|
|
40
|
+
*
|
|
41
|
+
* @param id - Dialog id that was previously registered.
|
|
42
|
+
* Usage:
|
|
43
|
+
* ```ts
|
|
44
|
+
* removeDialog('project-dialog');
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
function removeDialog(id) {
|
|
48
|
+
NiceModal.remove(id);
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Unregisters a dialog component by id.
|
|
52
|
+
*
|
|
53
|
+
* Use this when a registered dialog should no longer be available through
|
|
54
|
+
* `showDialog(...)` or `dialog.show(...)`.
|
|
55
|
+
*
|
|
56
|
+
* @param id - Dialog id that was previously registered.
|
|
57
|
+
* Usage:
|
|
58
|
+
* ```ts
|
|
59
|
+
* unregisterDialog('project-dialog');
|
|
60
|
+
* ```
|
|
61
|
+
*/
|
|
62
|
+
function unregisterDialog(id) {
|
|
63
|
+
unregister(id);
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* Convenience registry facade for dialog operations.
|
|
67
|
+
*
|
|
68
|
+
* Use this when you prefer a single import with discoverable methods instead of
|
|
69
|
+
* importing `registerDialog`, `showDialog`, `hideDialog`, `removeDialog`, and
|
|
70
|
+
* `unregisterDialog` separately.
|
|
71
|
+
*
|
|
72
|
+
* @returns An object of dialog helper functions.
|
|
73
|
+
*
|
|
74
|
+
* Usage:
|
|
75
|
+
* ```ts
|
|
76
|
+
* const projectDialog = dialog.register('project-dialog', ProjectDialog);
|
|
77
|
+
* await projectDialog.show({ projectId: 'project-1' });
|
|
78
|
+
* await dialog.show('project-dialog', { projectId: 'project-2' });
|
|
79
|
+
* dialog.unregister('project-dialog');
|
|
80
|
+
* ```
|
|
81
|
+
*/
|
|
82
|
+
const dialog = {
|
|
83
|
+
create: createDialog,
|
|
84
|
+
hide: hideDialog,
|
|
85
|
+
register: registerDialog,
|
|
86
|
+
remove: removeDialog,
|
|
87
|
+
show: showDialog,
|
|
88
|
+
unregister: unregisterDialog,
|
|
89
|
+
useDialog
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
//#endregion
|
|
93
|
+
export { createDialog, dialog, hideDialog, removeDialog, unregisterDialog, useDialog };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { RegisteredDialog, RegisteredDialogInjectedProps, RegisteredDialogShowProps, registerDialog } from "./register-dialog.cjs";
|
|
2
|
+
import { ShowDialogProps, showDialog } from "./show-dialog.cjs";
|
|
3
|
+
import { CreatedDialog, DialogRegistry, createDialog, dialog, hideDialog, removeDialog, unregisterDialog, useDialog } from "./dialog-registry.cjs";
|
|
4
|
+
import { DialogProvider, DialogProviderProps } from "./DialogProvider.cjs";
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { RegisteredDialog, RegisteredDialogInjectedProps, RegisteredDialogShowProps, registerDialog } from "./register-dialog.js";
|
|
2
|
+
import { ShowDialogProps, showDialog } from "./show-dialog.js";
|
|
3
|
+
import { CreatedDialog, DialogRegistry, createDialog, dialog, hideDialog, removeDialog, unregisterDialog, useDialog } from "./dialog-registry.js";
|
|
4
|
+
import { DialogProvider, DialogProviderProps } from "./DialogProvider.js";
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { registerDialog } from "./register-dialog.js";
|
|
2
|
+
import { showDialog } from "./show-dialog.js";
|
|
3
|
+
import { createDialog, dialog, hideDialog, removeDialog, unregisterDialog, useDialog } from "./dialog-registry.js";
|
|
4
|
+
import { DialogProvider } from "./DialogProvider.js";
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
|
+
let react = require("react");
|
|
3
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
4
|
+
let __ebay_nice_modal_react = require("@ebay/nice-modal-react");
|
|
5
|
+
__ebay_nice_modal_react = require_rolldown_runtime.__toESM(__ebay_nice_modal_react);
|
|
6
|
+
|
|
7
|
+
//#region src/dialog-provider/register-dialog.ts
|
|
8
|
+
/**
|
|
9
|
+
* Registers a dialog component and returns a typed controller for it.
|
|
10
|
+
*
|
|
11
|
+
* Use this when a dialog has a known component and you want type-safe props for
|
|
12
|
+
* default values and `show(...)` calls. The component is wrapped with
|
|
13
|
+
* NiceModal automatically, and receives controlled `open` and `onOpenChange`
|
|
14
|
+
* props.
|
|
15
|
+
*
|
|
16
|
+
* @param id - Stable dialog id used by NiceModal and by generic `showDialog`.
|
|
17
|
+
* @param component - Dialog component. Use `dialog.create(...)` instead when a
|
|
18
|
+
* component needs custom NiceModal lifecycle behavior.
|
|
19
|
+
* @param defaultProps - Optional component props registered as defaults.
|
|
20
|
+
* @returns A controller with `id`, `show`, `hide`, and `remove` helpers.
|
|
21
|
+
*
|
|
22
|
+
* Usage:
|
|
23
|
+
* ```ts
|
|
24
|
+
* const projectDialog = registerDialog('project-dialog', ProjectDialog, {
|
|
25
|
+
* mode: 'edit',
|
|
26
|
+
* });
|
|
27
|
+
*
|
|
28
|
+
* await projectDialog.show({
|
|
29
|
+
* projectId: 'project-1',
|
|
30
|
+
* });
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
function registerDialog(id, component, defaultProps) {
|
|
34
|
+
const WrappedDialog = __ebay_nice_modal_react.default.create((props) => {
|
|
35
|
+
const modal = (0, __ebay_nice_modal_react.useModal)();
|
|
36
|
+
const { open: _open, onOpenChange,...componentProps } = props;
|
|
37
|
+
const Component = component;
|
|
38
|
+
const handleClose = (result) => {
|
|
39
|
+
modal.resolve(result);
|
|
40
|
+
modal.hide();
|
|
41
|
+
};
|
|
42
|
+
return react.default.createElement(Component, {
|
|
43
|
+
...componentProps,
|
|
44
|
+
open: modal.visible,
|
|
45
|
+
onOpenChange: (isOpen) => {
|
|
46
|
+
onOpenChange?.(isOpen);
|
|
47
|
+
if (!isOpen) handleClose("Closed");
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
WrappedDialog.displayName = `RegisteredDialog(${component.displayName ?? component.name ?? id})`;
|
|
52
|
+
__ebay_nice_modal_react.default.register(id, WrappedDialog, defaultProps);
|
|
53
|
+
return {
|
|
54
|
+
id,
|
|
55
|
+
show: async (props) => __ebay_nice_modal_react.default.show(id, props),
|
|
56
|
+
hide: async () => __ebay_nice_modal_react.default.hide(id),
|
|
57
|
+
remove: () => {
|
|
58
|
+
__ebay_nice_modal_react.default.remove(id);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
//#endregion
|
|
64
|
+
exports.registerDialog = registerDialog;
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { NiceModalHocProps } from "@ebay/nice-modal-react";
|
|
3
|
+
|
|
4
|
+
//#region src/dialog-provider/register-dialog.d.ts
|
|
5
|
+
type NiceModalInjectedKeys = keyof NiceModalHocProps;
|
|
6
|
+
type DialogInjectedKeys = 'open' | 'onOpenChange';
|
|
7
|
+
type RegisteredDialogInjectedKeys = NiceModalInjectedKeys | DialogInjectedKeys;
|
|
8
|
+
interface RegisteredDialogInjectedProps {
|
|
9
|
+
open?: boolean;
|
|
10
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
11
|
+
}
|
|
12
|
+
type Pretty<TValue> = { [TKey in keyof TValue]: TValue[TKey] } & {};
|
|
13
|
+
type OptionalRegisteredDialogProps<TProps extends object> = Pretty<Omit<TProps, Extract<keyof TProps, RegisteredDialogInjectedKeys>> & Partial<Pick<TProps, Extract<keyof TProps, RegisteredDialogInjectedKeys>>>>;
|
|
14
|
+
type DefaultedDialogProps<TProps extends object, TDefaultProps extends Partial<TProps>> = Pretty<Omit<TProps, keyof TDefaultProps> & Partial<Pick<TProps, Extract<keyof TProps, keyof TDefaultProps>>>>;
|
|
15
|
+
type EmptyDialogDefaultProps = Record<never, never>;
|
|
16
|
+
type RegisteredDialogShowProps<TProps extends object, TDefaultProps extends Partial<OptionalRegisteredDialogProps<TProps>> = EmptyDialogDefaultProps> = DefaultedDialogProps<OptionalRegisteredDialogProps<TProps>, TDefaultProps>;
|
|
17
|
+
interface RegisteredDialog<TProps extends object, TDefaultProps extends Partial<OptionalRegisteredDialogProps<TProps>> = EmptyDialogDefaultProps> {
|
|
18
|
+
/**
|
|
19
|
+
* The stable NiceModal id used to register, show, hide, and remove this dialog.
|
|
20
|
+
*
|
|
21
|
+
* Usage:
|
|
22
|
+
* ```ts
|
|
23
|
+
* const editProjectDialog = registerDialog('edit-project', EditProjectDialog);
|
|
24
|
+
* console.log(editProjectDialog.id);
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
27
|
+
id: string;
|
|
28
|
+
/**
|
|
29
|
+
* Opens the registered dialog and passes props to the component.
|
|
30
|
+
*
|
|
31
|
+
* Props are inferred from the registered component. Props supplied as
|
|
32
|
+
* `defaultProps` in `registerDialog` become optional when calling `show`.
|
|
33
|
+
*
|
|
34
|
+
* @returns A promise that resolves with the value passed to `modal.resolve(...)`
|
|
35
|
+
* inside the dialog component.
|
|
36
|
+
*
|
|
37
|
+
* Usage:
|
|
38
|
+
* ```ts
|
|
39
|
+
* const confirmed = await confirmDialog.show<boolean>({
|
|
40
|
+
* title: 'Delete project?',
|
|
41
|
+
* });
|
|
42
|
+
* ```
|
|
43
|
+
*/
|
|
44
|
+
show: <TResult = unknown>(props?: RegisteredDialogShowProps<TProps, TDefaultProps>) => Promise<TResult>;
|
|
45
|
+
/**
|
|
46
|
+
* Hides the registered dialog without resolving the `show` promise for you.
|
|
47
|
+
*
|
|
48
|
+
* @returns A promise from NiceModal that resolves after the hide action is
|
|
49
|
+
* dispatched.
|
|
50
|
+
*
|
|
51
|
+
* Usage:
|
|
52
|
+
* ```ts
|
|
53
|
+
* await editProjectDialog.hide();
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
56
|
+
hide: <TResult = unknown>() => Promise<TResult>;
|
|
57
|
+
/**
|
|
58
|
+
* Removes the registered dialog instance from the NiceModal render tree.
|
|
59
|
+
*
|
|
60
|
+
* The dialog id remains registered, so the same controller can show it again.
|
|
61
|
+
*
|
|
62
|
+
* @returns Nothing.
|
|
63
|
+
*
|
|
64
|
+
* Usage:
|
|
65
|
+
* ```ts
|
|
66
|
+
* editProjectDialog.remove();
|
|
67
|
+
* ```
|
|
68
|
+
*/
|
|
69
|
+
remove: () => void;
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* Registers a dialog component and returns a typed controller for it.
|
|
73
|
+
*
|
|
74
|
+
* Use this when a dialog has a known component and you want type-safe props for
|
|
75
|
+
* default values and `show(...)` calls. The component is wrapped with
|
|
76
|
+
* NiceModal automatically, and receives controlled `open` and `onOpenChange`
|
|
77
|
+
* props.
|
|
78
|
+
*
|
|
79
|
+
* @param id - Stable dialog id used by NiceModal and by generic `showDialog`.
|
|
80
|
+
* @param component - Dialog component. Use `dialog.create(...)` instead when a
|
|
81
|
+
* component needs custom NiceModal lifecycle behavior.
|
|
82
|
+
* @param defaultProps - Optional component props registered as defaults.
|
|
83
|
+
* @returns A controller with `id`, `show`, `hide`, and `remove` helpers.
|
|
84
|
+
*
|
|
85
|
+
* Usage:
|
|
86
|
+
* ```ts
|
|
87
|
+
* const projectDialog = registerDialog('project-dialog', ProjectDialog, {
|
|
88
|
+
* mode: 'edit',
|
|
89
|
+
* });
|
|
90
|
+
*
|
|
91
|
+
* await projectDialog.show({
|
|
92
|
+
* projectId: 'project-1',
|
|
93
|
+
* });
|
|
94
|
+
* ```
|
|
95
|
+
*/
|
|
96
|
+
declare function registerDialog<TProps extends object, TDefaultProps extends Partial<OptionalRegisteredDialogProps<TProps>> = EmptyDialogDefaultProps>(id: string, component: React.FC<TProps>, defaultProps?: TDefaultProps): RegisteredDialog<TProps, TDefaultProps>;
|
|
97
|
+
//#endregion
|
|
98
|
+
export { RegisteredDialog, RegisteredDialogInjectedProps, RegisteredDialogShowProps, registerDialog };
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { NiceModalHocProps } from "@ebay/nice-modal-react";
|
|
3
|
+
|
|
4
|
+
//#region src/dialog-provider/register-dialog.d.ts
|
|
5
|
+
type NiceModalInjectedKeys = keyof NiceModalHocProps;
|
|
6
|
+
type DialogInjectedKeys = 'open' | 'onOpenChange';
|
|
7
|
+
type RegisteredDialogInjectedKeys = NiceModalInjectedKeys | DialogInjectedKeys;
|
|
8
|
+
interface RegisteredDialogInjectedProps {
|
|
9
|
+
open?: boolean;
|
|
10
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
11
|
+
}
|
|
12
|
+
type Pretty<TValue> = { [TKey in keyof TValue]: TValue[TKey] } & {};
|
|
13
|
+
type OptionalRegisteredDialogProps<TProps extends object> = Pretty<Omit<TProps, Extract<keyof TProps, RegisteredDialogInjectedKeys>> & Partial<Pick<TProps, Extract<keyof TProps, RegisteredDialogInjectedKeys>>>>;
|
|
14
|
+
type DefaultedDialogProps<TProps extends object, TDefaultProps extends Partial<TProps>> = Pretty<Omit<TProps, keyof TDefaultProps> & Partial<Pick<TProps, Extract<keyof TProps, keyof TDefaultProps>>>>;
|
|
15
|
+
type EmptyDialogDefaultProps = Record<never, never>;
|
|
16
|
+
type RegisteredDialogShowProps<TProps extends object, TDefaultProps extends Partial<OptionalRegisteredDialogProps<TProps>> = EmptyDialogDefaultProps> = DefaultedDialogProps<OptionalRegisteredDialogProps<TProps>, TDefaultProps>;
|
|
17
|
+
interface RegisteredDialog<TProps extends object, TDefaultProps extends Partial<OptionalRegisteredDialogProps<TProps>> = EmptyDialogDefaultProps> {
|
|
18
|
+
/**
|
|
19
|
+
* The stable NiceModal id used to register, show, hide, and remove this dialog.
|
|
20
|
+
*
|
|
21
|
+
* Usage:
|
|
22
|
+
* ```ts
|
|
23
|
+
* const editProjectDialog = registerDialog('edit-project', EditProjectDialog);
|
|
24
|
+
* console.log(editProjectDialog.id);
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
27
|
+
id: string;
|
|
28
|
+
/**
|
|
29
|
+
* Opens the registered dialog and passes props to the component.
|
|
30
|
+
*
|
|
31
|
+
* Props are inferred from the registered component. Props supplied as
|
|
32
|
+
* `defaultProps` in `registerDialog` become optional when calling `show`.
|
|
33
|
+
*
|
|
34
|
+
* @returns A promise that resolves with the value passed to `modal.resolve(...)`
|
|
35
|
+
* inside the dialog component.
|
|
36
|
+
*
|
|
37
|
+
* Usage:
|
|
38
|
+
* ```ts
|
|
39
|
+
* const confirmed = await confirmDialog.show<boolean>({
|
|
40
|
+
* title: 'Delete project?',
|
|
41
|
+
* });
|
|
42
|
+
* ```
|
|
43
|
+
*/
|
|
44
|
+
show: <TResult = unknown>(props?: RegisteredDialogShowProps<TProps, TDefaultProps>) => Promise<TResult>;
|
|
45
|
+
/**
|
|
46
|
+
* Hides the registered dialog without resolving the `show` promise for you.
|
|
47
|
+
*
|
|
48
|
+
* @returns A promise from NiceModal that resolves after the hide action is
|
|
49
|
+
* dispatched.
|
|
50
|
+
*
|
|
51
|
+
* Usage:
|
|
52
|
+
* ```ts
|
|
53
|
+
* await editProjectDialog.hide();
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
56
|
+
hide: <TResult = unknown>() => Promise<TResult>;
|
|
57
|
+
/**
|
|
58
|
+
* Removes the registered dialog instance from the NiceModal render tree.
|
|
59
|
+
*
|
|
60
|
+
* The dialog id remains registered, so the same controller can show it again.
|
|
61
|
+
*
|
|
62
|
+
* @returns Nothing.
|
|
63
|
+
*
|
|
64
|
+
* Usage:
|
|
65
|
+
* ```ts
|
|
66
|
+
* editProjectDialog.remove();
|
|
67
|
+
* ```
|
|
68
|
+
*/
|
|
69
|
+
remove: () => void;
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* Registers a dialog component and returns a typed controller for it.
|
|
73
|
+
*
|
|
74
|
+
* Use this when a dialog has a known component and you want type-safe props for
|
|
75
|
+
* default values and `show(...)` calls. The component is wrapped with
|
|
76
|
+
* NiceModal automatically, and receives controlled `open` and `onOpenChange`
|
|
77
|
+
* props.
|
|
78
|
+
*
|
|
79
|
+
* @param id - Stable dialog id used by NiceModal and by generic `showDialog`.
|
|
80
|
+
* @param component - Dialog component. Use `dialog.create(...)` instead when a
|
|
81
|
+
* component needs custom NiceModal lifecycle behavior.
|
|
82
|
+
* @param defaultProps - Optional component props registered as defaults.
|
|
83
|
+
* @returns A controller with `id`, `show`, `hide`, and `remove` helpers.
|
|
84
|
+
*
|
|
85
|
+
* Usage:
|
|
86
|
+
* ```ts
|
|
87
|
+
* const projectDialog = registerDialog('project-dialog', ProjectDialog, {
|
|
88
|
+
* mode: 'edit',
|
|
89
|
+
* });
|
|
90
|
+
*
|
|
91
|
+
* await projectDialog.show({
|
|
92
|
+
* projectId: 'project-1',
|
|
93
|
+
* });
|
|
94
|
+
* ```
|
|
95
|
+
*/
|
|
96
|
+
declare function registerDialog<TProps extends object, TDefaultProps extends Partial<OptionalRegisteredDialogProps<TProps>> = EmptyDialogDefaultProps>(id: string, component: React.FC<TProps>, defaultProps?: TDefaultProps): RegisteredDialog<TProps, TDefaultProps>;
|
|
97
|
+
//#endregion
|
|
98
|
+
export { RegisteredDialog, RegisteredDialogInjectedProps, RegisteredDialogShowProps, registerDialog };
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import NiceModal, { useModal } from "@ebay/nice-modal-react";
|
|
3
|
+
|
|
4
|
+
//#region src/dialog-provider/register-dialog.ts
|
|
5
|
+
/**
|
|
6
|
+
* Registers a dialog component and returns a typed controller for it.
|
|
7
|
+
*
|
|
8
|
+
* Use this when a dialog has a known component and you want type-safe props for
|
|
9
|
+
* default values and `show(...)` calls. The component is wrapped with
|
|
10
|
+
* NiceModal automatically, and receives controlled `open` and `onOpenChange`
|
|
11
|
+
* props.
|
|
12
|
+
*
|
|
13
|
+
* @param id - Stable dialog id used by NiceModal and by generic `showDialog`.
|
|
14
|
+
* @param component - Dialog component. Use `dialog.create(...)` instead when a
|
|
15
|
+
* component needs custom NiceModal lifecycle behavior.
|
|
16
|
+
* @param defaultProps - Optional component props registered as defaults.
|
|
17
|
+
* @returns A controller with `id`, `show`, `hide`, and `remove` helpers.
|
|
18
|
+
*
|
|
19
|
+
* Usage:
|
|
20
|
+
* ```ts
|
|
21
|
+
* const projectDialog = registerDialog('project-dialog', ProjectDialog, {
|
|
22
|
+
* mode: 'edit',
|
|
23
|
+
* });
|
|
24
|
+
*
|
|
25
|
+
* await projectDialog.show({
|
|
26
|
+
* projectId: 'project-1',
|
|
27
|
+
* });
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
function registerDialog(id, component, defaultProps) {
|
|
31
|
+
const WrappedDialog = NiceModal.create((props) => {
|
|
32
|
+
const modal = useModal();
|
|
33
|
+
const { open: _open, onOpenChange,...componentProps } = props;
|
|
34
|
+
const Component = component;
|
|
35
|
+
const handleClose = (result) => {
|
|
36
|
+
modal.resolve(result);
|
|
37
|
+
modal.hide();
|
|
38
|
+
};
|
|
39
|
+
return React.createElement(Component, {
|
|
40
|
+
...componentProps,
|
|
41
|
+
open: modal.visible,
|
|
42
|
+
onOpenChange: (isOpen) => {
|
|
43
|
+
onOpenChange?.(isOpen);
|
|
44
|
+
if (!isOpen) handleClose("Closed");
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
WrappedDialog.displayName = `RegisteredDialog(${component.displayName ?? component.name ?? id})`;
|
|
49
|
+
NiceModal.register(id, WrappedDialog, defaultProps);
|
|
50
|
+
return {
|
|
51
|
+
id,
|
|
52
|
+
show: async (props) => NiceModal.show(id, props),
|
|
53
|
+
hide: async () => NiceModal.hide(id),
|
|
54
|
+
remove: () => {
|
|
55
|
+
NiceModal.remove(id);
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
//#endregion
|
|
61
|
+
export { registerDialog };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
|
+
let __ebay_nice_modal_react = require("@ebay/nice-modal-react");
|
|
3
|
+
__ebay_nice_modal_react = require_rolldown_runtime.__toESM(__ebay_nice_modal_react);
|
|
4
|
+
|
|
5
|
+
//#region src/dialog-provider/show-dialog.ts
|
|
6
|
+
/**
|
|
7
|
+
* Opens a registered dialog by id when the caller does not have its typed controller.
|
|
8
|
+
*
|
|
9
|
+
* This helper is intentionally generic: because it only receives a string id, it
|
|
10
|
+
* cannot infer the component prop type. Prefer `registerDialog(...).show(...)`
|
|
11
|
+
* when the dialog component is available in the same module.
|
|
12
|
+
*
|
|
13
|
+
* @param id - Dialog id that was previously registered with `registerDialog`.
|
|
14
|
+
* @param props - Optional props forwarded to the registered dialog component.
|
|
15
|
+
* @returns A promise that resolves with the value passed to `modal.resolve(...)`
|
|
16
|
+
* inside the dialog component.
|
|
17
|
+
*
|
|
18
|
+
* Usage:
|
|
19
|
+
* ```ts
|
|
20
|
+
* await showDialog('project-dialog', {
|
|
21
|
+
* projectId: 'project-1',
|
|
22
|
+
* });
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
async function showDialog(id, props) {
|
|
26
|
+
return __ebay_nice_modal_react.default.show(id, props);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
//#endregion
|
|
30
|
+
exports.showDialog = showDialog;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
//#region src/dialog-provider/show-dialog.d.ts
|
|
2
|
+
type ShowDialogProps = Record<string, unknown>;
|
|
3
|
+
/**
|
|
4
|
+
* Opens a registered dialog by id when the caller does not have its typed controller.
|
|
5
|
+
*
|
|
6
|
+
* This helper is intentionally generic: because it only receives a string id, it
|
|
7
|
+
* cannot infer the component prop type. Prefer `registerDialog(...).show(...)`
|
|
8
|
+
* when the dialog component is available in the same module.
|
|
9
|
+
*
|
|
10
|
+
* @param id - Dialog id that was previously registered with `registerDialog`.
|
|
11
|
+
* @param props - Optional props forwarded to the registered dialog component.
|
|
12
|
+
* @returns A promise that resolves with the value passed to `modal.resolve(...)`
|
|
13
|
+
* inside the dialog component.
|
|
14
|
+
*
|
|
15
|
+
* Usage:
|
|
16
|
+
* ```ts
|
|
17
|
+
* await showDialog('project-dialog', {
|
|
18
|
+
* projectId: 'project-1',
|
|
19
|
+
* });
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
declare function showDialog<TResult = unknown>(id: string, props?: ShowDialogProps): Promise<TResult>;
|
|
23
|
+
//#endregion
|
|
24
|
+
export { ShowDialogProps, showDialog };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
//#region src/dialog-provider/show-dialog.d.ts
|
|
2
|
+
type ShowDialogProps = Record<string, unknown>;
|
|
3
|
+
/**
|
|
4
|
+
* Opens a registered dialog by id when the caller does not have its typed controller.
|
|
5
|
+
*
|
|
6
|
+
* This helper is intentionally generic: because it only receives a string id, it
|
|
7
|
+
* cannot infer the component prop type. Prefer `registerDialog(...).show(...)`
|
|
8
|
+
* when the dialog component is available in the same module.
|
|
9
|
+
*
|
|
10
|
+
* @param id - Dialog id that was previously registered with `registerDialog`.
|
|
11
|
+
* @param props - Optional props forwarded to the registered dialog component.
|
|
12
|
+
* @returns A promise that resolves with the value passed to `modal.resolve(...)`
|
|
13
|
+
* inside the dialog component.
|
|
14
|
+
*
|
|
15
|
+
* Usage:
|
|
16
|
+
* ```ts
|
|
17
|
+
* await showDialog('project-dialog', {
|
|
18
|
+
* projectId: 'project-1',
|
|
19
|
+
* });
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
declare function showDialog<TResult = unknown>(id: string, props?: ShowDialogProps): Promise<TResult>;
|
|
23
|
+
//#endregion
|
|
24
|
+
export { ShowDialogProps, showDialog };
|