com.phloxui
Version:
PhloxUI Ng2+ Framework
123 lines (122 loc) • 6.73 kB
TypeScript
import { DialogModel, ComponentDialogModel } from './model/models';
import { PhloxAppInfoService } from '../service/PhloxAppInfoService.service';
import { NeedFocusService } from '../service/NeedFocusService.service';
/**
* <p style="text-indent: 2em;">
* A <code>singleton</code> UI component controlling <code>application</code> pop-up dialog logic. This dialog is a <code>modal</code> dialog, saying that,
* when it is displayed, all user's UI actions will be blocked and the user will be forced to focus on this dialog. When the user completes the interaction
* with this dialog, for example, clicking on "OK" button, this dialog will be hidden and the user can resume normal UI operations. Normally, you <b>should
* NOT</b> directly access this component instance but you could control it via <b>[[DialogService]]</b>.
* </p>
* <p style="text-indent: 2em;">
* Please note that there is a dialog <code>display queue</code> operating behind the scenes. This <code>display queue</code> is a <code>FIFO</code> queue
* keeping all dialog models ([[DialogModel]]) --which are automatically generated and kept in the queue when <code><i>show...Dialog</i></code> methods are called--
* but those dialog models cannot be displayed suddenly. For example, if there already is a dialog being displayed currently, but, there is also someone else
* calling <code><i>show...Dialog</i></code> method simultaneously, the dialog model generated from the later <code><i>show...Dialog</i></code> method will
* not be showed suddenly. Nevertheless, it'll be showed immediately when the first dialog is closed. For this mechanism, the dialog model can be firstly kept
* in the queue, then, it will be showed and removed from the queue when its preceding dialog is closed.
* </p>
* <p style="text-indent: 2em;">
* If you want to implement your own <b>custom dialog</b>, you should do it using <code>component dialog</code> rather than building it all up from scratches. The only thing
* which you need to do is just implementing the component being displayed inside the dialog body. All other mechanisms, such as dialog <code>display queue</code>
* listed above, should be left to be handled by the framework or by this class. For more information about building custom dialog, please see [[showComponentDialog]].
* </p>
*
* @author shiorin, tee4cute
* @see [[DialogService]]
*/
export declare class PhloxDialog {
static readonly TYPE_NAME: string;
static readonly CONFIRM_DIALOG: string;
static readonly MESSAGE_DIALOG: string;
static readonly COMPONENT_DIALOG: string;
private dialogQueue;
private dialogClass;
private dialogResolverQueue;
private confirmDialog;
private messageDialog;
private componentDialog;
private currentModel;
private currentResolver;
private phloxAppInfo;
private needFocusService;
private _show;
private show;
constructor(phloxAppService: PhloxAppInfoService, needFocusService: NeedFocusService);
private showNextDialog();
private getI18NMessage(key);
private getResolverWrapper(model, resolve, reject);
getDialogWidth(): string;
getDialogHeight(): string;
private getDialogResult(dialogType);
private _showDialog();
/**
* <p style="text-indent: 1em;">
* Show current dialog described by the <code><b>[[currentModel]]</b></code>. This usually be the last model generated by
* the last <code><i>show...Dialog</i></code> method call.
* </p>
*/
showDialog(): void;
/**
* <p style="text-indent: 1em;">
* Hide the current showing dialog and show the next dialog in the queue (if any).
* </p>
*/
hideDialog(): void;
/**
* <p style="text-indent: 1em;">
* Display a confirmation dialog on the screen.
* </p>
*
* @param title The dialog title text.
* @param message The dialog message which will be displayed in the dialog body.
* @param showCancelBtn To display the <code>CANCEL</code> button or not. By default, the confirmation dialog will contain only
* <code>YES</code> and <code>NO</code> button.
* @param width The css <code>"width"</code> style value governing dialog width e.g. <code>100px</code>, <code>50pt</code>.
* @param height The css <code>"height"</code> style value governing dialog height e.g. <code>100px</code>, <code>50pt</code>.
*
* @return The <code>promise</code> which will be resolved when this dialog is closed. The resolving result will be the value
* returned from [[ConfirmDialog.getDialogResult]] method.
*
* @see [[ConfirmDialog]]
*/
showConfirmDialog(title: string, message: string, showCancelBtn: boolean, width?: string, height?: string): Promise<any>;
/**
* <p style="text-indent: 1em;">
* Display a message dialog on the screen.
* </p>
*
* @param title The dialog title text.
* @param message The dialog message which will be displayed in the dialog body.
* @param width The css <code>"width"</code> style value governing dialog width e.g. <code>100px</code>, <code>50pt</code>.
* @param height The css <code>"height"</code> style value governing dialog height e.g. <code>100px</code>, <code>50pt</code>.
*
* @return The <code>promise</code> which will be resolved when this dialog is closed. The resolving result will be the value
* returned from [[MessageDialog.getDialogResult]] method (which always returns <code>true</code>).
*
* @see [[MessageDialog]]
*/
showMessageDialog(title: string, message: string, width?: string, height?: string): Promise<any>;
/**
* <p style="text-indent: 1em;">
* Display a component dialog on the screen. A component dialog is a dialog allowing you to display your own custom dialog by specifying
* a <code>component type</code> being displayed as its body. That <code>component type</code> must be a class which is an instance of
* [[IDialogController]].
* </p>
*
* @param componentDialogModel A dialog model being displayed.
*
* @return The <code>promise</code> which will be resolved when this dialog is closed. The resolving result will be the value returned
* from [[IDialogController.getDialogResult]] method.
*
* @see [[ComponentDialog]]
*/
showComponentDialog(componentDialogModel: ComponentDialogModel): Promise<any>;
isShow(): boolean;
getCurrentModel(): DialogModel;
getDialogClass(): string[];
}
export * from './dialog.internal/ConfirmDialog.component';
export * from './dialog.internal/MessageDialog.component';
export * from './dialog.internal/ComponentDialog.component';
export * from './dialog.internal/IDialog';