BaseDialog class

Paquete:

@microsoft/sp-dialog

Clase base para implementar diálogos en SharePoint Framework. Esto proporciona una manera compatible de mostrar diálogos al usuario dentro de SharePoint Framework componentes.

Comentarios

Amplíe esta clase para crear diálogos para SharePoint Framework. Siguiendo las directrices de implementación, el marco puede asegurarse de que los diálogos se muestran de forma fácil de usar. Aunque esta clase controla el contenido del cuadro de diálogo mediante la implementación del método render, el marco puede decidir cuándo mostrar el cuadro de diálogo y cómo representar la superposición y el modal. La aplicación de la página también puede tener control sobre cómo permitir que se muestren los diálogos. Consulte la documentación de los métodos y propiedades individuales para obtener más información sobre cómo ampliar y usar esta clase.

Constructores

(constructor)(config)

Constructor de la BaseDialog clase .

Propiedades

domElement	Use esta propiedad para tener acceso al elemento contenedor proporcionado por el marco de trabajo para la representación.
isHidden	Si el cuadro de diálogo está oculto visualmente.
isOpen	Si el cuadro de diálogo está visualmente abierto. Esto devuelve true durante onBeforeOpen() porque hay un componente visual. Devuelve false cuando el cuadro de diálogo está oculto.
isSecondary	Si el cuadro de diálogo es secundario. Esto significa que hay otro cuadro de diálogo oculto detrás de este diálogo.
secondaryDialogProvider	Se permite que un cuadro de diálogo activo muestre un cuadro de diálogo secundario encima de sí mismo. Por diseño, solo se permiten dos capas de diálogos.

Métodos

close()	Cierre el cuadro de diálogo.
onAfterClose()	Se llama a este método después de cerrar visualmente el cuadro de diálogo y ofrece la oportunidad de realizar la limpieza.
onBeforeOpen()	Se llama a este método antes del método render y se puede invalidar para realizar preparativos para la representación. Durante la vida útil de este método, se muestra el indicador de carga. virtual
render()	Representa el contenido del cuadro de diálogo.
show(options)	Solicite al marco que muestre este cuadro de diálogo.

Detalles del constructor

(constructor)(config)

Constructor de la BaseDialog clase .

constructor(config?: IDialogConfiguration);

Parámetros

config

IDialogConfiguration

la configuración del cuadro de diálogo que afecta a cómo se muestra el cuadro de diálogo *

Comentarios

Es importante mantener el constructor ligero. Use onBeforeOpen() para realizar una inicialización de gran peso necesaria para representar el cuadro de diálogo, como asignaciones de recursos y llamadas asincrónicas, para capturar datos. Puede usar el constructor para establecer parámetros iniciales del cuadro de diálogo, como referencias a recursos de la aplicación. El motivo es que los diálogos suelen construirse sobre un evento de interfaz de usuario, por ejemplo, un clic en el botón, pero es posible que el cuadro de diálogo no siempre se muestre justo después de la construcción. Mantener el constructor ligero garantiza una experiencia de usuario fluida y evita realizar trabajos de eliminación en caso de que el cuadro de diálogo no se muestre más adelante, por ejemplo, si el marco lo rechaza. Otra ventaja de hacerlo es evitar pérdidas de memoria mediante la realización de todas las asignaciones y eliminaciones en eventos simétricos onBeforeOpen() y onAfterClose() . Si asigna recursos en el constructor, tiene una pérdida de memoria porque no hay ninguna garantía de que se llamará a onAfterClose() y onAfterClose() es su única oportunidad de eliminar.

Ejemplo:

  constructor(cacheReference: any) {
    super();

    this._cache = cacheReference; // This is okay. Keeping a reference to my internal cache.
    this._cache.refresh(); // This is bad practice.
    // If you need to refresh the cache (or fetch data) for rendering, do it in onBeforeOpen()

Detalles de las propiedades

domElement

Use esta propiedad para tener acceso al elemento contenedor proporcionado por el marco de trabajo para la representación.

protected get domElement(): HTMLElement;

Valor de propiedad

HTMLElement

Comentarios

Vea BaseDialog.render() para obtener más información sobre la representación.

isHidden

Si el cuadro de diálogo está oculto visualmente.

get isHidden(): boolean;

Valor de propiedad

boolean

Comentarios

Esto sucede cuando el cuadro de diálogo va detrás de un cuadro de diálogo secundario. Tenga en cuenta que esto es diferente de cerrado, ya que el cuadro de diálogo todavía tiene el permiso para mostrar y, finalmente, se mostrará. Esto devuelve false si el cuadro de diálogo está cerrado.

isOpen

Si el cuadro de diálogo está visualmente abierto. Esto devuelve true durante onBeforeOpen() porque hay un componente visual. Devuelve false cuando el cuadro de diálogo está oculto.

get isOpen(): boolean;

Valor de propiedad

boolean

isSecondary

Si el cuadro de diálogo es secundario. Esto significa que hay otro cuadro de diálogo oculto detrás de este diálogo.

get isSecondary(): boolean;

Valor de propiedad

boolean

secondaryDialogProvider

Se permite que un cuadro de diálogo activo muestre un cuadro de diálogo secundario encima de sí mismo. Por diseño, solo se permiten dos capas de diálogos.

get secondaryDialogProvider(): ISecondaryDialogProvider | undefined;

Valor de propiedad

ISecondaryDialogProvider | undefined

Comentarios

Los diálogos secundarios no tienen que esperar el permiso y se mostrarán o rechazarán inmediatamente. Todas las llamadas para mostrar un cuadro de diálogo secundario se rechazan mientras ya se muestra un cuadro de diálogo secundario. Esta propiedad puede ser indefinida si un cuadro de diálogo secundario no está disponible, es decir, el diálogo actual es secundario o el cuadro de diálogo no está activo.

Detalles del método

close()

Cierre el cuadro de diálogo.

close(): Promise<void>;

Devoluciones

Promise<void>

Una promesa que se resuelve cuando el cuadro de diálogo está cerrado visualmente o si ya se ha cerrado

Comentarios

Esto anulará el permiso para mostrar para este cuadro de diálogo. Cada cuadro de diálogo debe tener un mecanismo para cerrarse finalmente para evitar bloquear la interfaz de usuario. Si se llama a en un cuadro de diálogo inactivo, anulará la solicitud que se va a mostrar.

onAfterClose()

Se llama a este método después de cerrar visualmente el cuadro de diálogo y ofrece la oportunidad de realizar la limpieza.

protected onAfterClose(): void;

Devoluciones

void

Comentarios

El ciclo de vida del cuadro de diálogo se completa después del cierre y no debe haber recursos dentro del objeto. Aunque el cuadro de diálogo se pueda reactivar de nuevo para un nuevo ciclo de vida mediante el método show(), esto se considera un ciclo de vida completamente nuevo que debe reasignar sus propios recursos. Si hay algún recurso que le gustaría conservar durante varios ciclos de vida, considere la posibilidad de asignarlo fuera del objeto de diálogo y pasar su referencia al constructor de diálogo.

onBeforeOpen()

Se llama a este método antes del método render y se puede invalidar para realizar preparativos para la representación. Durante la vida útil de este método, se muestra el indicador de carga. virtual

protected onBeforeOpen(): Promise<void>;

Devoluciones

Promise<void>

Una promesa que se resuelve cuando se realizan las operaciones y el cuadro de diálogo está listo para representarse. Si se rechaza la promesa, el cuadro de diálogo no se representará y onAfterClose() no se llamará.

Comentarios

Todas las asignaciones de recursos en onBeforeOpen() deben eliminarse onAfterClose() correctamente para evitar la pérdida de memoria.

render()

Representa el contenido del cuadro de diálogo.

protected abstract render(): void;

Devoluciones

void

Comentarios

El render método debe implementarse para representar el contenido del cuadro de diálogo en el elemento contenedor proporcionado por el marco. Use this.domElement para acceder a este contenedor. El contenedor está dentro de un modal representado en el centro de la página sobre una superposición oscura.

Se llama al método render una vez después de crear y abrir el elemento modal. Se recomienda usar onBeforeOpen() para realizar operaciones que no sean de interfaz de usuario para la representación que pueden tardar mucho tiempo. Esto garantizará que el marco puede mostrar una interfaz de usuario fácil de usar, como un spinner, para que el usuario sepa que el cuadro de diálogo se está preparando. Si decide realizar la inicialización u otras operaciones costosas dentro del método de representación, asegúrese de tener una interfaz de usuario fácil de usar para que el usuario esté informado sobre el estado del cuadro de diálogo. De lo contrario, se muestra un elemento vacío al usuario, que es una práctica de experiencia de usuario incorrecta.

show(options)

Solicite al marco que muestre este cuadro de diálogo.

show(options?: IDialogShowOptions): Promise<void>;

Parámetros

options

IDialogShowOptions

Cuadro de diálogo que muestra las opciones. Vea IDialogShowOptions para obtener más información.

Devoluciones

Promise<void>

Una promesa que se resuelve una vez que el cuadro de diálogo se cierra correctamente (después de mostrarse). La promesa se rechaza si se rechaza o se anula la solicitud.