From cb0c8560aa362e4bc4c826826a9bae6cefa216c4 Mon Sep 17 00:00:00 2001 From: Frank Tan Date: Fri, 5 Jan 2018 12:45:45 -0500 Subject: [PATCH] ember-modal-dialog: Add types (#22685) --- .../ember-modal-dialog-tests.ts | 27 ++++++ types/ember-modal-dialog/index.d.ts | 93 +++++++++++++++++++ types/ember-modal-dialog/tsconfig.json | 24 +++++ types/ember-modal-dialog/tslint.json | 8 ++ 4 files changed, 152 insertions(+) create mode 100644 types/ember-modal-dialog/ember-modal-dialog-tests.ts create mode 100644 types/ember-modal-dialog/index.d.ts create mode 100644 types/ember-modal-dialog/tsconfig.json create mode 100644 types/ember-modal-dialog/tslint.json diff --git a/types/ember-modal-dialog/ember-modal-dialog-tests.ts b/types/ember-modal-dialog/ember-modal-dialog-tests.ts new file mode 100644 index 0000000000..06ab7fd241 --- /dev/null +++ b/types/ember-modal-dialog/ember-modal-dialog-tests.ts @@ -0,0 +1,27 @@ +import ModalDialog from 'ember-modal-dialog/components/modal-dialog'; + +class MyDialog extends ModalDialog { + // https://www.npmjs.com/package/ember-modal-dialog#configurable-properties + testProperties() { + this.hasOverlay; // $ExpectType boolean + this.translucentOverlay; // $ExpectType boolean + this.onClose(); + this.onClickOverlay(); + this.clickOutsideToClose; // $ExpectType boolean + this.renderInPlace; // $ExpectType boolean + this.overlayPosition; // $ExpectType "parent" | "sibling" + this.containerClass; // $ExpectType string + this.containerClassNames; // $ExpectType string[] + this.overlayClass; // $ExpectType string + this.overlayClassNames; // $ExpectType string[] + this.wrapperClass; // $ExpectType string + this.wrapperClassNames; // $ExpectType string[] + this.animatable; // $ExpectType boolean + } +} + +class MyOtherDialog extends ModalDialog.extend({ + testProperties() { + this.hasOverlay; // $ExpectType boolean + } +}) {} diff --git a/types/ember-modal-dialog/index.d.ts b/types/ember-modal-dialog/index.d.ts new file mode 100644 index 0000000000..b9b356e988 --- /dev/null +++ b/types/ember-modal-dialog/index.d.ts @@ -0,0 +1,93 @@ +// Type definitions for ember-modal-dialog 2.4 +// Project: https://github.com/yapplabs/ember-modal-dialog#readme +// Definitions by: Frank Tan +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.4 + +declare module 'ember-modal-dialog/components/modal-dialog' { + import Ember from 'ember'; + + // https://github.com/yapplabs/ember-modal-dialog/blob/v2.4.1/addon/components/modal-dialog.js#L28 + // https://www.npmjs.com/package/ember-modal-dialog#configurable-properties + export default class ModalDialog extends Ember.Component { + /** + * Toggles presence of overlay div in DOM + */ + hasOverlay: boolean; + /** + * Indicates translucence of overlay, toggles presence of translucent CSS + * selector + */ + translucentOverlay: boolean; + /** + * The action handler for the dialog's onClose action. This action triggers + * when the user clicks the modal overlay. + */ + onClose: () => void; + /** + * An action to be called when the overlay is clicked. If this action is + * specified, clicking the overlay will invoke it instead of onClose. + */ + onClickOverlay: () => void; + /** + * Indicates whether clicking outside a modal without an overlay should + * close the modal. Useful if your modal isn't the focus of interaction, and + * you want hover effects to still work outside the modal. + */ + clickOutsideToClose: boolean; + /** + * A boolean, when true renders the modal without wormholing or tethering, + * useful for including a modal in a style guide + */ + renderInPlace: boolean; + /** + * either 'parent' or 'sibling', to control whether the overlay div is + * rendered as a parent element of the container div or as a sibling to it + * (default: 'parent') + */ + overlayPosition: 'parent' | 'sibling'; + /** + * CSS class name(s) to append to container divs. Set this from template. + */ + containerClass: string; + /** + * CSS class names to append to container divs. This is a concatenated + * property, so it does not replace the default container class + * (default: 'ember-modal-dialog'. If you subclass this component, you may + * define this in your subclass.) + */ + containerClassNames: string[]; + /** + * CSS class name(s) to append to overlay divs. Set this from template. + */ + overlayClass: string; + /** + * CSS class names to append to overlay divs. This is a concatenated + * property, so it does not replace the default overlay class + * (default: 'ember-modal-overlay'. If you subclass this component, you may + * define this in your subclass.) + */ + overlayClassNames: string[]; + /** + * CSS class name(s) to append to wrapper divs. Set this from template. + */ + wrapperClass: string; + /** + * CSS class names to append to wrapper divs. This is a concatenated + * property, so it does not replace the default container class + * (default: 'ember-modal-wrapper'. If you subclass this component, you may + * define this in your subclass.) + */ + wrapperClassNames: string[]; + /** + * A boolean, when true makes modal animatable using liquid-fire + * (requires liquid-wormhole to be installed, and for tethering situations + * liquid-tether. Having these optional dependencies installed and NOT + * explicitly specifying animatable is deprecated in 2.x and is equivalent + * to animatable=false for backwards compatibility. As of 3.x, the implicit + * default will be animatable=true when the optional + * liquid-wormhole/liquid-tether dependency is present. + */ + animatable: boolean; + } +} diff --git a/types/ember-modal-dialog/tsconfig.json b/types/ember-modal-dialog/tsconfig.json new file mode 100644 index 0000000000..8834a9ae3d --- /dev/null +++ b/types/ember-modal-dialog/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": false, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "ember-modal-dialog-tests.ts" + ] +} diff --git a/types/ember-modal-dialog/tslint.json b/types/ember-modal-dialog/tslint.json new file mode 100644 index 0000000000..f55a9ded82 --- /dev/null +++ b/types/ember-modal-dialog/tslint.json @@ -0,0 +1,8 @@ +{ + "extends": "dtslint/dt.json", + "rules": { + "no-single-declare-module": false, + "no-declare-current-package": false, + "strict-export-declare-modifiers": false + } +}