shlomiassaf / ngx-modialog

Modal / Dialog for Angular
http://shlomiassaf.github.io/ngx-modialog
MIT License
686 stars 241 forks source link

function supportsKey should behave the same way whenever keyboard config value is 'null' or 'undefined' #412

Open Romanchuk opened 6 years ago

Romanchuk commented 6 years ago

That is what i do on dialog creation to workaround it:

if (dialogRef.context.keyboard === undefined) {
        dialogRef.context.keyboard = [27];
    }
ModalOverlay.prototype.documentKeypress = function (event) {
        // check that this modal is the last in the stack.
        if (!this.dialogRef.overlay.isTopMost(this.dialogRef))
            return;
        if (supportsKey(event.keyCode, /** @type {?} */ (this.dialogRef.context.keyboard))) {
            this.dialogRef.dismiss();
        }
    };
function supportsKey(keyCode, config) {
    if (!Array.isArray(config))
        return config === null ? false : true;
    return config.indexOf(keyCode) > -1;
}

Code sample:

import { combineLatest } from 'rxjs/operator/combineLatest';
import { Injectable } from '@angular/core';

import {
  ContainerContent,
  Overlay,
  DialogRef,
  Modal as Modal_,
  CSSBackdrop,
  PromiseCompleter
} from 'ngx-modialog';

import { LimeModalContainer } from './modal-container.component';

import { OneButtonPresetBuilder } from './presets/one-button-preset';
import { TwoButtonPresetBuilder, PromptPresetBuilder } from './presets/two-button-preset';

@Injectable()
export class Modal extends Modal_ {
  constructor(overlay: Overlay) {
    super(overlay);
  }

  alert(): OneButtonPresetBuilder {
    return new OneButtonPresetBuilder(this, <any>{isBlocking: false});
  }

  prompt(): PromptPresetBuilder {
    return new PromptPresetBuilder(this, <any>{isBlocking: true, keyboard: null});
  }

  confirm(): TwoButtonPresetBuilder {
    return new TwoButtonPresetBuilder(this, <any>{isBlocking: true, keyboard: null});
  }

  protected create(dialogRef: DialogRef<any>, content: ContainerContent): DialogRef<any> {

    const backdropRef = this.createBackdrop(dialogRef, CSSBackdrop);
    const containerRef = this.createContainer(dialogRef, LimeModalContainer, content);

    let overlay = dialogRef.overlayRef.instance;
    let backdrop = backdropRef.instance;
    let container = containerRef.instance;

    dialogRef.inElement ? overlay.insideElement() : overlay.fullscreen();

    if (containerRef.location.nativeElement) {
      containerRef.location.nativeElement.focus();
    }

    if (dialogRef.context.keyboard === undefined) {
        dialogRef.context.keyboard = [27];
    }

    return dialogRef;
  }
}
shlomiassaf commented 6 years ago

This is a breaking change and a specific behavior for your specific use case.

If I do this change, someone else will say, I want the default behavior to be "any key opens..."

This is why I don't think it should change.

When you want to cancel keyboard completely set it to null.

You can easily build a service that wraps the modal service and set's this value for you instead of doing it every time.