From 909f8b2069ab20fbf15d87561867bd6be789582e Mon Sep 17 00:00:00 2001 From: denis Date: Mon, 28 Jan 2019 01:02:33 +0100 Subject: [PATCH] Fix jQuery compatibility Linting `unified-signatures` for dropdown --- types/bootstrap/v3/bootstrap-tests.ts | 33 +++++++++++- types/bootstrap/v3/index.d.ts | 73 +++++++++++++++------------ 2 files changed, 71 insertions(+), 35 deletions(-) diff --git a/types/bootstrap/v3/bootstrap-tests.ts b/types/bootstrap/v3/bootstrap-tests.ts index 7711b5792d..e834903867 100644 --- a/types/bootstrap/v3/bootstrap-tests.ts +++ b/types/bootstrap/v3/bootstrap-tests.ts @@ -1,11 +1,21 @@ declare let aHtmlElement: HTMLElement; +// -------------------------------------------------------------------------------------- +// jQuery backward compatibility +// -------------------------------------------------------------------------------------- + +$(".dropdown").on("affixed.bs.affix", (e) => { + e.stopPropagation(); +}); + // -------------------------------------------------------------------------------------- // Modal // -------------------------------------------------------------------------------------- +// $ExpectType JQuery $(".modal").modal(); +// $ExpectType JQuery $(".modal").modal("show"); $(".modal").modal("toggle"); @@ -27,8 +37,10 @@ $(".modal").modal({ // Dropdown // -------------------------------------------------------------------------------------- +// $ExpectType JQuery $(".dropdown").dropdown(); +// $ExpectType JQuery $(".dropdown").dropdown("toggle"); $(".dropdown").on("show.bs.dropdown", (e) => { @@ -39,8 +51,10 @@ $(".dropdown").on("show.bs.dropdown", (e) => { // Scrollspy // -------------------------------------------------------------------------------------- +// $ExpectType JQuery $(".navbar").scrollspy(); +// $ExpectType JQuery $(".navbar").scrollspy("refresh"); $(".navbar").scrollspy({ @@ -48,7 +62,7 @@ $(".navbar").scrollspy({ offset: 10, }); -$('.navbar').on("activate.bs.scrollspy", () => { +$(".navbar").on("activate.bs.scrollspy", () => { // do something... }); @@ -56,8 +70,10 @@ $('.navbar').on("activate.bs.scrollspy", () => { // Togglable tabs // -------------------------------------------------------------------------------------- +// $ExpectType JQuery $(".tab").tab(); +// $ExpectType JQuery $(".tab").tab("show"); $(".tab").on("shown.bs.tab", (e) => { @@ -69,8 +85,10 @@ $(".tab").on("shown.bs.tab", (e) => { // Tooltip // -------------------------------------------------------------------------------------- +// $ExpectType JQuery $(".tooltip").tooltip(); +// $ExpectType JQuery $(".tooltip").tooltip("show"); $(".tooltip").tooltip({ @@ -129,8 +147,10 @@ $(".tooltip").on("hidden.bs.tooltip", () => { // Popover // -------------------------------------------------------------------------------------- +// $ExpectType JQuery $(".popover").popover(); +// $ExpectType JQuery $(".popover").popover("show"); $(".popover").popover({ @@ -186,8 +206,10 @@ $(".popover").on("hidden.bs.popover", () => { // Alert // -------------------------------------------------------------------------------------- +// $ExpectType JQuery $(".alert").alert(); +// $ExpectType JQuery $(".alert").alert("close"); $(".alert").on("closed.bs.alert", () => { @@ -198,6 +220,7 @@ $(".alert").on("closed.bs.alert", () => { // Button // -------------------------------------------------------------------------------------- +// $ExpectType JQuery $(".btn").button("toggle"); $(".btn").button("reset"); @@ -208,8 +231,10 @@ $(".btn").button("Swaps text to any data defined text state."); // Collapse // -------------------------------------------------------------------------------------- +// $ExpectType JQuery $(".collapse").collapse(); +// $ExpectType JQuery $(".collapse").collapse("toggle"); $(".collapse").collapse({ @@ -225,8 +250,10 @@ $(".collapse").on("hidden.bs.collapse", () => { // Carousel // -------------------------------------------------------------------------------------- +// $ExpectType JQuery $(".carousel").carousel(); +// $ExpectType JQuery $(".carousel").carousel("cycle"); $(".carousel").carousel(200); @@ -246,7 +273,7 @@ $(".carousel").carousel({ pause: null, }); -$('#myCarousel').on('slide.bs.carousel', (e) => { +$("#myCarousel").on("slide.bs.carousel", (e) => { const dir: "left" | "right" = e.direction; aHtmlElement = e.relatedTarget; }); @@ -255,8 +282,10 @@ $('#myCarousel').on('slide.bs.carousel', (e) => { // Affix // -------------------------------------------------------------------------------------- +// $ExpectType JQuery $(".affix").affix(); +// $ExpectType JQuery $(".affix").affix("checkPosition"); $(".affix").affix({ diff --git a/types/bootstrap/v3/index.d.ts b/types/bootstrap/v3/index.d.ts index 45dee67370..d3b80a0529 100644 --- a/types/bootstrap/v3/index.d.ts +++ b/types/bootstrap/v3/index.d.ts @@ -7,6 +7,16 @@ /// +// -------------------------------------------------------------------------- +// For jQuery v1 and v2 backward compatibility +// -------------------------------------------------------------------------- + +/** + * Same as jQuery v3 `JQuery.EventHandlerBase`. + */ +type JQueryEventHandlerBase = + (this: TContext, t: T, ...args: any[]) => void | false; + // -------------------------------------------------------------------------- // Some Types and Interfaces // -------------------------------------------------------------------------- @@ -265,7 +275,7 @@ interface AffixOptions { // Events // -------------------------------------------------------------------------------------- -interface CarouselEventHandler extends JQuery.TriggeredEvent { +interface CarouselEventHandler extends JQueryEventObject { /** * The direction in which the carousel is sliding. */ @@ -277,14 +287,14 @@ interface CarouselEventHandler extends JQuery.TriggeredEvent extends JQuery.TriggeredEvent { +interface DropdownsEventHandler extends JQueryEventObject { /** * The toggling anchor element. */ relatedTarget: HTMLElement; } -interface TapEventHandler extends JQuery.TriggeredEvent { +interface TapEventHandler extends JQueryEventObject { /** * * For `show.bs.tab` and `shown.bs.tab`, is the new active tab. * * For `hide.bs.tab`, is the current active tab. @@ -314,7 +324,7 @@ type TooltipEvent = "show.bs.tooltip" | "shown.bs.tooltip" | "hide.bs.tooltip" | // jQuery // -------------------------------------------------------------------------------------- -interface JQuery { +interface JQuery { /** * Call a method on the modal element: * * `toggle` – Manually toggles a modal. @@ -325,22 +335,19 @@ interface JQuery { * * Returns to the caller before the modal has actually been shown or hidden (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). */ - modal(action: "toggle" | "show" | "hide" | "handleUpdate"): JQuery; + modal(action: "toggle" | "show" | "hide" | "handleUpdate"): this; /** * Activates a content as a modal. */ - modal(options?: ModalOptions): JQuery; + modal(options?: ModalOptions): this; /** - * Toggles the dropdown menu of a given navbar or tabbed navigation. - */ - dropdown(action: "toggle"): JQuery; - /** - * Toggle contextual overlays for displaying lists of links. - * + * If no _method_ is specified, toggle contextual overlays for displaying lists of links. * The data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element. + * + * When _method_ `toggle` is specified, toggles the dropdown menu of a given navbar or tabbed navigation. */ - dropdown(): this; + dropdown(action?: "toggle"): this; // tslint:disable:jsdoc-format /** @@ -353,11 +360,11 @@ $('[data-spy="scroll"]').each(function () { ``` */ // tslint:enable:jsdoc-format - scrollspy(action: "refresh"): JQuery; + scrollspy(action: "refresh"): this; /** * Add scrollspy behavior to a topbar navigation. */ - scrollspy(options?: ScrollSpyOptions): JQuery; + scrollspy(options?: ScrollSpyOptions): this; /** * If no _method_ is specified, activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM. @@ -367,7 +374,7 @@ $('[data-spy="scroll"]').each(function () { * * Returns to the caller before the tab pane has actually been shown (i.e. before the `shown.bs.tab` event occurs). */ - tab(action?: "show"): JQuery; + tab(action?: "show"): this; /** * Call a method on the tooltip element: @@ -380,11 +387,11 @@ $('[data-spy="scroll"]').each(function () { * Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). * This is considered a "manual" triggering of the tooltip. */ - tooltip(action: "show" | "hide" | "toggle" | "destroy"): JQuery; + tooltip(action: "show" | "hide" | "toggle" | "destroy"): this; /** * Attaches a tooltip handler to an element collection. */ - tooltip(options?: TooltipOptions): JQuery; + tooltip(options?: TooltipOptions): this; /** * Call a method on the popover element: @@ -397,11 +404,11 @@ $('[data-spy="scroll"]').each(function () { * Returns to the caller before the popover has actually been shown or hidden (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). * This is considered a "manual" triggering of the popover. */ - popover(action: "show" | "hide" | "toggle" | "destroy"): JQuery; + popover(action: "show" | "hide" | "toggle" | "destroy"): this; /** * Initializes popovers for an element collection. */ - popover(options?: PopoverOptions): JQuery; + popover(options?: PopoverOptions): this; /** * If no _method_ is specified, makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. @@ -410,7 +417,7 @@ $('[data-spy="scroll"]').each(function () { * When _method_ `close` is specified, closes an alert by removing it from the DOM. If the `.fade` and `.in` classes are present on the element, * the alert will fade out before it is removed. */ - alert(action?: "close"): JQuery; + alert(action?: "close"): this; /** * Call a method on the button element: @@ -418,7 +425,7 @@ $('[data-spy="scroll"]').each(function () { * * `reset` – Resets button state: swaps text to original text. This method is asynchronous and returns before the resetting has actually completed. * * _string_ – Swaps text to any data defined text state. */ - button(action: "toggle" | "reset" | string): JQuery; + button(action: "toggle" | "reset" | string): this; /** * Call a method on the collapsible element: @@ -428,11 +435,11 @@ $('[data-spy="scroll"]').each(function () { * * Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs). */ - collapse(action: "toggle" | "show" | "hide"): JQuery; + collapse(action: "toggle" | "show" | "hide"): this; /** * Activates a content as a collapsible element. */ - collapse(options?: CollapseOptions): JQuery; + collapse(options?: CollapseOptions): this; /** * Call a method on the carousel element: @@ -444,33 +451,33 @@ $('[data-spy="scroll"]').each(function () { * * Returns to the caller before the target item has been shown (i.e. before the `slid.bs.carousel` event occurs). */ - carousel(action: "cycle" | "pause" | number | "prev" | "next"): JQuery; + carousel(action: "cycle" | "pause" | number | "prev" | "next"): this; /** * Initializes the carousel and starts cycling through items. */ - carousel(options?: CarouselOptions): JQuery; + carousel(options?: CarouselOptions): this; /** * Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. * The `.affix`, `.affix-top`, and `.affix-bottom` classes are added to or removed from the affixed content according to the new state. * This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content. */ - affix(action: "checkPosition"): JQuery; + affix(action: "checkPosition"): this; /** * Activates your content as affixed content. */ - affix(options?: AffixOptions): JQuery; + affix(options?: AffixOptions): this; - on(events: CarouselEvent, handler: JQuery.EventHandlerBase>): this; - on(events: DropdownEvent, handler: JQuery.EventHandlerBase>): this; - on(events: TapEvent, handler: JQuery.EventHandlerBase>): this; + on(events: CarouselEvent, handler: JQueryEventHandlerBase): this; + on(events: DropdownEvent, handler: JQueryEventHandlerBase): this; + on(events: TapEvent, handler: JQueryEventHandlerBase): this; on( events: AffixEvent | AlertEvent | CollapseEvent | PopoverEvent | ScrollspyEvent | TooltipEvent, - handler: JQuery.EventHandler + handler: JQueryEventHandlerBase ): this; /** @deprecated */ - emulateTransitionEnd(duration: number): JQuery; + emulateTransitionEnd(duration: number): this; } // --------------------------------------------------------------------------------------