@material/web
Version:
Material web components
86 lines (85 loc) • 2.63 kB
TypeScript
/**
* @license
* Copyright 2023 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
/**
* Add a hook for an event that is called after the event is dispatched and
* propagates to other event listeners.
*
* This is useful for behaviors that need to check if an event is canceled.
*
* The callback is invoked synchronously, which allows for better integration
* with synchronous platform APIs (like `<form>` or `<label>` clicking).
*
* Note: `setupDispatchHooks()` must be called on the element before adding any
* other event listeners. Call it in the constructor of an element or
* controller.
*
* @example
* ```ts
* class MyControl extends LitElement {
* constructor() {
* super();
* setupDispatchHooks(this, 'click');
* this.addEventListener('click', event => {
* afterDispatch(event, () => {
* if (event.defaultPrevented) {
* return
* }
*
* // ... perform logic
* });
* });
* }
* }
* ```
*
* @example
* ```ts
* class MyController implements ReactiveController {
* constructor(host: ReactiveElement) {
* // setupDispatchHooks() may be called multiple times for the same
* // element and events, making it safe for multiple controllers to use it.
* setupDispatchHooks(host, 'click');
* host.addEventListener('click', event => {
* afterDispatch(event, () => {
* if (event.defaultPrevented) {
* return;
* }
*
* // ... perform logic
* });
* });
* }
* }
* ```
*
* @param event The event to add a hook to.
* @param callback A hook that is called after the event finishes dispatching.
*/
export declare function afterDispatch(event: Event, callback: () => void): void;
/**
* Sets up an element to add dispatch hooks to given event types. This must be
* called before adding any event listeners that need to use dispatch hooks
* like `afterDispatch()`.
*
* This function is safe to call multiple times with the same element or event
* types. Call it in the constructor of elements, mixins, and controllers to
* ensure it is set up before external listeners.
*
* @example
* ```ts
* class MyControl extends LitElement {
* constructor() {
* super();
* setupDispatchHooks(this, 'click');
* this.addEventListener('click', this.listenerUsingAfterDispatch);
* }
* }
* ```
*
* @param element The element to set up event dispatch hooks for.
* @param eventTypes The event types to add dispatch hooks to.
*/
export declare function setupDispatchHooks(element: Element, ...eventTypes: [string, ...string[]]): void;