From bed86d743a8c53f8c2534ab7134907ca65fbcabf Mon Sep 17 00:00:00 2001 From: Marc Fallows Date: Wed, 21 Jun 2017 12:17:22 +1000 Subject: [PATCH 1/2] Update popper.js types to 1.10.2 --- types/popper.js/index.d.ts | 126 ++++++++++++++++++----------- types/popper.js/popper.js-tests.ts | 98 ++++++++++++++++++---- 2 files changed, 162 insertions(+), 62 deletions(-) diff --git a/types/popper.js/index.d.ts b/types/popper.js/index.d.ts index 96f93b3192..2ea6bd178b 100644 --- a/types/popper.js/index.d.ts +++ b/types/popper.js/index.d.ts @@ -1,71 +1,103 @@ -// Type definitions for popper.js 1.8 +// Type definitions for popper.js 1.10.2 // Project: https://github.com/FezVrasta/popper.js/ -// Definitions by: rhysd , joscha , seckardt +// Definitions by: rhysd , joscha , seckardt , marcfallows // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped declare namespace Popper { + type Position = 'top' | 'right' | 'bottom' | 'left'; + type Placement = 'auto-start' + | 'auto' + | 'auto-end' + | 'top-start' + | 'top' + | 'top-end' + | 'right-start' + | 'right' + | 'right-end' + | 'bottom-end' + | 'bottom' + | 'bottom-start' + | 'left-end' + | 'left' + | 'left-start'; interface PopperOptions { - placement?: string; - boundariesPadding?: number; - modifiers?: { - order?: number, - enabled?: boolean, - fn?: Function, - 'function'?: Function, - onLoad?: Function, - applyStyle?: { - gpuAcceleration?: boolean - }, - preventOverflow?: { - boundariesElement?: string | Element, - priority?: Array<'left' | 'right' | 'top' | 'bottom'> - }, - offset?: { - offset?: number | string - }, - flip?: { - behavior?: string | string[], - boundariesElement?: string | Element - }, - }; - modifiersIgnored?: string[]; + placement?: Placement; + eventsEnabled?: boolean; + modifiers?: Modifiers; removeOnDestroy?: boolean; - arrowElement?: string | Element; - onCreate?(data: Popper.Data): void; - onUpdate?(data: Popper.Data): void; + onCreate?(data: Data): void; + onUpdate?(data: Data): void; + } + type ModifierFn = (data: Data, options: Object) => Data; + interface BaseModifier { + order?: number; + enabled?: boolean; + fn?: ModifierFn; } class Modifiers { - applyStyle(data: Object): Object; - shift(data: Object): Object; - preventOverflow(data: Object): Object; - keepTogether(data: Object): Object; - flip(data: Object): Object; - offset(data: Object): Object; - arrow(data: Object): Object; + shift?: BaseModifier; + offset?: BaseModifier & { + offset?: number | string, + }; + preventOverflow?: BaseModifier & { + priority?: Position[], + padding?: number, + boundariesElement?: string | Element, + }; + keepTogether?: BaseModifier; + arrow?: BaseModifier & { + element?: string | Element, + }; + flip?: BaseModifier & { + behavior?: 'flip' | 'clockwise' | 'counterclockwise' | Position[], + padding?: number, + boundariesElement?: string | Element, + }; + inner?: BaseModifier; + hide?: BaseModifier; + applyStyle?: BaseModifier & { + onLoad?: Function, + gpuAcceleration?: boolean, + }; + } + interface Offset { + top: number; + left: number; + width: number; + height: number; } interface Data { - placement: string; + instance: Popper; + placement: Placement; + originalPlacement: Placement; + flipped: boolean; + hide: boolean; + arrowElement: Element; + styles: Object; + boundaries: Object; offsets: { - popper: { - position: string; - top: number; - left: number; - }; + popper: Offset, + reference: Offset, + arrow: { + top: number, + left: number, + }, }; } } declare class Popper { - modifiers: Popper.Modifiers; - placement: string; + static modifiers: Object[]; + static placements: Popper.Placement[]; + static Defaults: Popper.PopperOptions; constructor(reference: Element, popper: Element | Object, options?: Popper.PopperOptions); destroy(): void; update(): void; - parse(config: Object): Element; - runModifiers(data: Object, modifiers: string[], ends: Function): void; - isModifierRequired(): boolean; + scheduleUpdate(): void; + enableEventListeners(): void; + disableEventListeners(): void; } declare module 'popper.js' { diff --git a/types/popper.js/popper.js-tests.ts b/types/popper.js/popper.js-tests.ts index 143de99ccc..484e7b43ef 100644 --- a/types/popper.js/popper.js-tests.ts +++ b/types/popper.js/popper.js-tests.ts @@ -1,27 +1,89 @@ import Popper from 'popper.js'; var reference = document.querySelector('.my-button'); +var popper = document.querySelector('.my-popper'); +var boundary = document.querySelector('.my-boundary'); +var arrow = document.querySelector('.my-arrow'); + var thePopper = new Popper( - reference, { - content: 'My awesome popper!' - } + reference, + popper, ); thePopper.update(); +thePopper.scheduleUpdate(); thePopper.destroy(); +thePopper.enableEventListeners(); +thePopper.disableEventListeners(); -var options = { - placement: 'bottom', - offset: 0, - arrowElement: document.querySelector('.arrow'), - modifiersIgnored: ['applyStyle'], - } as Popper.PopperOptions; +Popper.modifiers.forEach(console.log.bind(console)); +Popper.placements.forEach(console.log.bind(console)); var thePopperWithOptions = new Popper( - reference, { - content: 'My awesome popper!', - }, options); + reference, + popper, + { + placement: 'bottom', + eventsEnabled: true, + removeOnDestroy: true, + modifiers: { + shift: { + enabled: true, + fn: (data) => data, + order: 100, + }, + offset: { + enabled: true, + fn: (data) => data, + order: 100, + offset: 0, + }, + preventOverflow: { + enabled: true, + fn: (data) => data, + order: 100, + priority: ['top', 'bottom'], + padding: 1, + boundariesElement: boundary, + }, + keepTogether: { + enabled: false, + fn: (data) => data, + order: 200, + }, + arrow: { + enabled: true, + fn: (data) => data, + order: 400, + element: arrow, + }, + flip: { + enabled: true, + fn: (data) => data, + order: 400, + behavior: ['top', 'right'], + padding: 5, + boundariesElement: boundary, + }, + inner: { + enabled: true, + fn: (data) => data, + order: 400, + }, + hide: { + enabled: true, + fn: (data) => data, + order: 400, + }, + applyStyle: { + enabled: true, + fn: (data) => data, + order: 400, + onLoad: () => 0, + }, + } + } +); -var popper = document.querySelector('.my-popper'); var anotherPopper = new Popper( reference, popper @@ -30,9 +92,15 @@ var anotherPopper = new Popper( var reference = document.querySelector('.my-button'); var popper = document.querySelector('.my-popper'); var anotherPopper = new Popper(reference, popper, { + modifiers: { + flip: { + behavior: 'clockwise' + } + }, onCreate: (data => console.log(data)), - onUpdate: ((data) => { + onUpdate: (data => { + data.instance.scheduleUpdate(); var p = data.offsets.popper; - console.log(`top: ${p.top}, left: ${p.left}`); + console.log(`top: ${p.top}, left: ${p.left}, width: ${p.width}, height: ${p.height}`); }) }); From 4de541a9fb00aaaa9bb1ef191256175ee957c67d Mon Sep 17 00:00:00 2001 From: Marc Fallows Date: Wed, 21 Jun 2017 12:24:16 +1000 Subject: [PATCH 2/2] version --- types/popper.js/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/types/popper.js/index.d.ts b/types/popper.js/index.d.ts index 2ea6bd178b..2af9ae2298 100644 --- a/types/popper.js/index.d.ts +++ b/types/popper.js/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for popper.js 1.10.2 +// Type definitions for popper.js 1.10 // Project: https://github.com/FezVrasta/popper.js/ // Definitions by: rhysd , joscha , seckardt , marcfallows // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped