[semantic-ui-modal] Add type definitions (#16943)

This commit is contained in:
Leonard Thieu 2017-06-04 17:01:38 -04:00 committed by Mohamed Hegazy
parent 277b8a1629
commit d18c243d4e
5 changed files with 468 additions and 0 deletions

286
types/semantic-ui-modal/global.d.ts vendored Normal file
View File

@ -0,0 +1,286 @@
interface JQuery {
modal: SemanticUI.Modal;
}
declare namespace SemanticUI {
interface Modal {
settings: ModalSettings;
/**
* Shows the modal
*/
(behavior: 'show'): JQuery;
/**
* Hides the modal
*/
(behavior: 'hide'): JQuery;
/**
* Toggles the modal
*/
(behavior: 'toggle'): JQuery;
/**
* Refreshes centering of modal on page
*/
(behavior: 'refresh'): JQuery;
/**
* Shows associated page dimmer
*/
(behavior: 'show dimmer'): JQuery;
/**
* Hides associated page dimmer
*/
(behavior: 'hide dimmer'): JQuery;
/**
* Hides all modals not selected modal in a dimmer
*/
(behavior: 'hide others'): JQuery;
/**
* Hides all visible modals in the same dimmer
*/
(behavior: 'hide all'): JQuery;
/**
* Caches current modal size
*/
(behavior: 'cache sizes'): JQuery;
/**
* Returns whether the modal can fit on the page
*/
(behavior: 'can fit'): boolean;
/**
* Returns whether the modal is active
*/
(behavior: 'is active'): boolean;
/**
* Sets modal to active
*/
(behavior: 'set active'): JQuery;
(behavior: 'attach events', selector: string | JQuery, event?: string): JQuery;
(behavior: 'destroy'): JQuery;
<K extends keyof ModalSettings>(behavior: 'setting', name: K, value?: undefined): ModalSettings[K];
<K extends keyof ModalSettings>(behavior: 'setting', name: K, value: ModalSettings[K]): JQuery;
(behavior: 'setting', value: ModalSettings.Param): JQuery;
(settings?: ModalSettings.Param): JQuery;
}
/**
* @see {@link http://semantic-ui.com/modules/modal.html#/settings}
*/
interface ModalSettings extends Pick<ModalSettings._Impl, keyof ModalSettings._Impl> { }
namespace ModalSettings {
type Param = ModalSettings | object;
interface _Impl {
// region Modal Settings
/**
* If set to false will prevent the modal from being moved to inside the dimmer
*
* @default true
*/
detachable: boolean;
/**
* When true, the first form input inside the modal will receive focus when shown. Set this to false to prevent this behavior.
*
* @default true
*/
autofocus: boolean;
/**
* Whether any change in modal DOM should automatically refresh cached positions
*
* @default false
*/
observeChanges: boolean;
/**
* If set to true will not close other visible modals when opening a new one
*
* @default false
*/
allowMultiple: boolean;
/**
* Whether to automatically bind keyboard shortcuts
*
* @default true
*/
keyboardShortcuts: boolean;
/**
* A vertical offset to allow for content outside of modal, for example a close button, to be centered.
*
* @default 0
*/
offset: number;
/**
* Selector or jquery object specifying the area to dim
*
* @default 'body'
*/
context: string | JQuery;
/**
* Setting to false will not allow you to close the modal by clicking on the dimmer
*
* @default true
*/
closable: boolean;
/**
* You can specify custom settings to extend UI dimmer
*
* @see {@link http://semantic-ui.com/modules/dimmer.html}
*/
dimmerSettings: DimmerSettings;
/**
* Named transition to use when animating menu in and out, full list can be found in ui transitions docs.
*
* @default 'scale'
* @see {@link http://semantic-ui.com/modules/transition.html}
*/
transition: string;
/**
* Duration of animation
*
* @default 400
*/
duration: number;
/**
* Whether additional animations should queue
*
* @default false
*/
queue: boolean;
// endregion
// region Callbacks
/**
* Is called when a modal starts to show.
*/
onShow(this: JQuery): void;
/**
* Is called after a modal has finished showing animating.
*/
onVisible(this: JQuery): void;
/**
* Is called after a modal starts to hide. If the function returns false, the modal will not hide.
*/
onHide(this: JQuery, $element: JQuery): false | void;
/**
* Is called after a modal has finished hiding animation.
*/
onHidden(this: JQuery): void;
/**
* Is called after a positive, approve or ok button is pressed. If the function returns false, the modal will not hide.
*/
onApprove(this: JQuery, $element: JQuery): false | void;
/**
* Is called after a negative, deny or cancel button is pressed. If the function returns false the modal will not hide.
*/
onDeny(this: JQuery, $element: JQuery): false | void;
// endregion
// region DOM Settings
selector: Modal.SelectorSettings;
className: Modal.ClassNameSettings;
// endregion
// region Debug Settings
error: Modal.ErrorSettings;
// endregion
// region Component Settings
// region DOM Settings
/**
* Event namespace. Makes sure module teardown does not effect other events attached to an element.
*/
namespace: string;
// endregion
// region Debug Settings
/**
* Name used in log statements
*/
name: string;
/**
* Silences all console output including error messages, regardless of other debug settings.
*/
silent: boolean;
/**
* Debug output to console
*/
debug: boolean;
/**
* Show console.table output with performance metrics
*/
performance: boolean;
/**
* Debug output includes all internal behaviors
*/
verbose: boolean;
// endregion
// endregion
}
}
namespace Modal {
interface SelectorSettings extends Pick<SelectorSettings._Impl, keyof SelectorSettings._Impl> { }
namespace SelectorSettings {
type Param = SelectorSettings | object;
interface _Impl {
/**
* @default '.close, .actions .button'
*/
close: string;
/**
* @default '.actions .positive, .actions .approve, .actions .ok'
*/
approve: string;
/**
* @default '.actions .negative, .actions .deny, .actions .cancel'
*/
deny: string;
}
}
interface ClassNameSettings extends Pick<ClassNameSettings._Impl, keyof ClassNameSettings._Impl> { }
namespace ClassNameSettings {
type Param = ClassNameSettings | object;
interface _Impl {
/**
* @default 'active'
*/
active: string;
/**
* @default 'scrolling'
*/
scrolling: string;
}
}
interface ErrorSettings extends Pick<ErrorSettings._Impl, keyof ErrorSettings._Impl> { }
namespace ErrorSettings {
type Param = ErrorSettings | object;
interface _Impl {
/**
* @default 'The method you called is not defined.'
*/
method: string;
}
}
}
}

12
types/semantic-ui-modal/index.d.ts vendored Normal file
View File

@ -0,0 +1,12 @@
// Type definitions for semantic-ui-modal 2.2
// Project: http://www.semantic-ui.com
// Definitions by: Leonard Thieu <https://github.com/leonard-thieu>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.2
/// <reference types="jquery" />
/// <reference types="semantic-ui-dimmer" />
/// <reference path="global.d.ts" />
declare const modal: SemanticUI.Modal;
export = modal;

View File

@ -0,0 +1,139 @@
function test_modal_static() {
$.fn.modal.settings.error.method = 'method';
$.fn.modal.settings.namespace = 'namespace';
$.fn.modal.settings.name = 'name';
$.fn.modal.settings.silent = false;
$.fn.modal.settings.debug = true;
$.fn.modal.settings.performance = true;
$.fn.modal.settings.verbose = true;
}
function test_modal() {
const selector = '.ui.modal';
$(selector).modal('show') === $();
$(selector).modal('hide') === $();
$(selector).modal('toggle') === $();
$(selector).modal('refresh') === $();
$(selector).modal('show dimmer') === $();
$(selector).modal('hide dimmer') === $();
$(selector).modal('hide others') === $();
$(selector).modal('hide all') === $();
$(selector).modal('cache sizes') === $();
$(selector).modal('can fit') === true;
$(selector).modal('is active') === true;
$(selector).modal('set active') === $();
$(selector).modal('attach events', 'selector', 'blur') === $();
$(selector).modal('destroy') === $();
$(selector).modal('setting', 'debug', undefined) === false;
$(selector).modal('setting', 'debug') === false;
$(selector).modal('setting', 'debug', true) === $();
$(selector).modal('setting', {
namespace: 'namespace',
name: 'name',
silent: false,
debug: true,
performance: true,
verbose: true
}) === $();
$(selector).modal({
detachable: true,
autofocus: false,
observeChanges: true,
allowMultiple: false,
keyboardShortcuts: true,
offset: 10,
context: $(),
closable: false,
dimmerSettings: {
opacity: 1,
variation: 'variation',
dimmerName: 'dimmerName',
closable: true,
on: 'click',
useCSS: true,
duration: {
show: 200,
hide: 300
},
transition: 'fade',
onShow() {
this === $();
},
onHide() {
this === $();
},
onChange() {
this === $();
},
selector: {
dimmable: '.dimmable',
dimmer: '.dimmer',
content: '.content'
},
template: {
dimmer() {
return $();
}
},
className: {
active: 'active',
dimmable: 'dimmable',
dimmed: 'dimmed',
disabled: 'disabled',
pageDimmer: 'pageDimmer',
hide: 'hide',
show: 'show',
transition: 'transition'
},
error: {
method: 'method'
}
},
transition: 'scale',
duration: 400,
queue: true,
onShow() {
this === $();
},
onVisible() {
this === $();
},
onHide($element) {
this === $();
$element === $();
return false;
},
onHidden() {
this === $();
},
onApprove($element) {
this === $();
$element === $();
return false;
},
onDeny($element) {
this === $();
$element === $();
return false;
},
selector: {
close: 'close',
approve: 'approve',
deny: 'deny'
},
className: {
active: 'active',
scrolling: 'scrolling'
},
error: {
method: 'method'
}
}) === $();
$(selector).modal() === $();
}
import modal = require('semantic-ui-modal');
function test_module() {
$.fn.modal = modal;
}

View File

@ -0,0 +1,24 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": [
"es6",
"dom"
],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"baseUrl": "../",
"typeRoots": [
"../"
],
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true
},
"files": [
"index.d.ts",
"global.d.ts",
"semantic-ui-modal-tests.ts"
]
}

View File

@ -0,0 +1,7 @@
{
"extends": "dtslint/dt.json",
"rules": {
"no-empty-interface": false,
"unified-signatures": false
}
}