packages/angular/common/src/overlays/modal.ts - main - githubmirror/ionic-framework

packages/angular/common/src/overlays/modal.ts
150 строк4 KB
Maria Hutt
feat(modal): add drag events for sheet and card modals (#30962)
04 мар 2026, 22:53
04 мар 2026, 22:53d29ac71
import {
  ChangeDetectorRef,
  ContentChild,
  Directive,
  ElementRef,
  EventEmitter,
  NgZone,
  TemplateRef,
} from '@angular/core';
import type { Components, ModalBreakpointChangeEventDetail, ModalDragEventDetail } from '@ionic/core/components';

import { ProxyCmp, proxyOutputs } from '../utils/proxy';

export declare interface IonModal extends Components.IonModal {
  /**
   * Emitted after the modal has presented.
   **/
  ionModalDidPresent: EventEmitter<CustomEvent>;
  /**
   * Emitted before the modal has presented.
   */
  ionModalWillPresent: EventEmitter<CustomEvent>;
  /**
   * Emitted before the modal has dismissed.
   */
  ionModalWillDismiss: EventEmitter<CustomEvent>;
  /**
   * Emitted after the modal has dismissed.
   */
  ionModalDidDismiss: EventEmitter<CustomEvent>;
  /**
   * Emitted after the modal breakpoint has changed.
   */
  ionBreakpointDidChange: EventEmitter<CustomEvent<ModalBreakpointChangeEventDetail>>;
  /**
   * Emitted when the sheet or card modal has started being dragged.
   */
  ionDragStart: EventEmitter<void>;
  /**
   * Emitted while the sheet or card modal is being dragged.
   */
  ionDragMove: EventEmitter<CustomEvent<ModalDragEventDetail>>;
  /**
   * Emitted when the sheet or card modal has finished being dragged.
   */
  ionDragEnd: EventEmitter<CustomEvent<ModalDragEventDetail>>;
  /**
   * Emitted after the modal has presented. Shorthand for ionModalDidPresent.
   */
  didPresent: EventEmitter<CustomEvent>;
  /**
   * Emitted before the modal has presented. Shorthand for ionModalWillPresent.
   */
  willPresent: EventEmitter<CustomEvent>;
  /**
   * Emitted before the modal has dismissed. Shorthand for ionModalWillDismiss.
   */
  willDismiss: EventEmitter<CustomEvent>;
  /**
   * Emitted after the modal has dismissed. Shorthand for ionModalDidDismiss.
   */
  didDismiss: EventEmitter<CustomEvent>;
}

const MODAL_INPUTS = [
  'animated',
  'keepContentsMounted',
  'backdropBreakpoint',
  'backdropDismiss',
  'breakpoints',
  'canDismiss',
  'cssClass',
  'enterAnimation',
  'expandToScroll',
  'event',
  'focusTrap',
  'handle',
  'handleBehavior',
  'initialBreakpoint',
  'isOpen',
  'keyboardClose',
  'leaveAnimation',
  'mode',
  'presentingElement',
  'showBackdrop',
  'translucent',
  'trigger',
];

const MODAL_METHODS = [
  'present',
  'dismiss',
  'onDidDismiss',
  'onWillDismiss',
  'setCurrentBreakpoint',
  'getCurrentBreakpoint',
];

@ProxyCmp({
  inputs: MODAL_INPUTS,
  methods: MODAL_METHODS,
})
/**
 * @Component extends from @Directive
 * so by defining the inputs here we
 * do not need to re-define them for the
 * lazy loaded popover.
 */
@Directive({
  selector: 'ion-modal',
  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
  inputs: MODAL_INPUTS,
})

// eslint-disable-next-line @angular-eslint/directive-class-suffix
export class IonModal {
  // TODO(FW-2827): type
  @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;

  isCmpOpen = false;

  protected el: HTMLElement;

  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
    this.el = r.nativeElement;

    this.el.addEventListener('ionMount', () => {
      this.isCmpOpen = true;
      c.detectChanges();
    });
    this.el.addEventListener('didDismiss', () => {
      this.isCmpOpen = false;
      c.detectChanges();
    });
    proxyOutputs(this, this.el, [
      'ionModalDidPresent',
      'ionModalWillPresent',
      'ionModalWillDismiss',
      'ionModalDidDismiss',
      'ionBreakpointDidChange',
      'didPresent',
      'willPresent',
      'willDismiss',
      'didDismiss',
      'ionDragStart',
      'ionDragMove',
      'ionDragEnd',
    ]);
  }
}