Skip to content

Commit 47b1639

Browse files
mkszeppmkszepp
authored
Convert addon to gts (#1005)
* Convert addon to gts * update import to gts * fix export * Fix lint * Minor typo fixes & remove unnecessary template role
1 parent ea9f441 commit 47b1639

13 files changed

Lines changed: 345 additions & 298 deletions

ember-basic-dropdown/src/components/basic-dropdown-content.ts renamed to ember-basic-dropdown/src/components/basic-dropdown-content.gts

Lines changed: 101 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,34 +10,45 @@ import {
1010
import hasMoved from '../utils/has-moved.ts';
1111
import { isTesting } from '@embroider/macros';
1212
import { modifier } from 'ember-modifier';
13-
import type { Dropdown, TRootEventType } from './basic-dropdown.ts';
13+
import { element } from 'ember-element-helper';
14+
import { or } from 'ember-truth-helpers';
15+
import style from 'ember-style-modifier';
16+
import { on } from '@ember/modifier';
17+
import { fn } from '@ember/helper';
18+
import { hash } from '@ember/helper';
19+
import type {
20+
Dropdown,
21+
TRootEventType,
22+
HorizontalPosition,
23+
VerticalPosition,
24+
} from '../types.ts';
1425

1526
export interface BasicDropdownContentSignature {
16-
Element: Element;
27+
Element: HTMLElement;
1728
Args: {
1829
animationEnabled?: boolean;
1930
transitioningInClass?: string;
2031
transitionedInClass?: string;
2132
transitioningOutClass?: string;
2233
isTouchDevice?: boolean;
2334
destination?: string;
24-
destinationElement?: HTMLElement;
35+
destinationElement?: HTMLElement | null;
2536
dropdown?: Dropdown;
2637
renderInPlace?: boolean;
27-
preventScroll?: boolean;
38+
preventScroll?: boolean | undefined;
2839
rootEventType?: TRootEventType;
2940
top?: string | undefined;
3041
left?: string | undefined;
3142
right?: string | undefined;
3243
width?: string | undefined;
3344
height?: string | undefined;
34-
otherStyles?: Record<string, string>;
35-
hPosition?: string;
36-
vPosition?: string;
45+
otherStyles?: Record<string, string | number | undefined>;
46+
hPosition?: HorizontalPosition | null;
47+
vPosition?: VerticalPosition | null;
3748
dir?: string;
3849
defaultClass?: string;
3950
overlay?: boolean;
40-
htmlTag?: string;
51+
htmlTag?: keyof HTMLElementTagNameMap;
4152
onFocusIn?: (dropdown?: Dropdown, event?: FocusEvent) => void;
4253
onFocusOut?: (dropdown?: Dropdown, event?: FocusEvent) => void;
4354
onMouseEnter?: (dropdown?: Dropdown, event?: MouseEvent) => void;
@@ -514,12 +525,94 @@ export default class BasicDropdownContent extends Component<BasicDropdownContent
514525
el.addEventListener('scroll', this.repositionBound);
515526
});
516527
}
528+
517529
removeScrollEvents(): void {
518530
window.removeEventListener('scroll', this.repositionBound);
519531
this.scrollableAncestors.forEach((el) => {
520532
el.removeEventListener('scroll', this.repositionBound);
521533
});
522534
}
535+
536+
<template>
537+
{{#if @dropdown.isOpen}}
538+
<div
539+
class="ember-basic-dropdown-content-wormhole-origin"
540+
{{this.registerDropdownContentWormhole}}
541+
>
542+
{{#if @renderInPlace}}
543+
{{#if @overlay}}
544+
<div class="ember-basic-dropdown-overlay"></div>
545+
{{/if}}
546+
547+
{{#let (element (or @htmlTag "div")) as |OptionalTag|}}
548+
<OptionalTag
549+
id={{this.dropdownId}}
550+
class="ember-basic-dropdown-content ember-basic-dropdown-content--{{@hPosition}}
551+
ember-basic-dropdown-content--{{@vPosition}}
552+
{{this.animationClass}}{{if
553+
@renderInPlace
554+
' ember-basic-dropdown-content--in-place'
555+
}}
556+
{{@defaultClass}}"
557+
dir={{@dir}}
558+
...attributes
559+
{{style @otherStyles this.positionStyles}}
560+
{{this.respondToEvents}}
561+
{{this.initiallyReposition}}
562+
{{this.observeMutations}}
563+
{{this.animateInAndOut}}
564+
{{on "focusin" (fn (or @onFocusIn this.noop) @dropdown)}}
565+
{{on "focusout" (fn (or @onFocusOut this.noop) @dropdown)}}
566+
{{on "mouseenter" (fn (or @onMouseEnter this.noop) @dropdown)}}
567+
{{on "mouseleave" (fn (or @onMouseLeave this.noop) @dropdown)}}
568+
{{! V1 compatibility - See #498 }}
569+
>
570+
{{yield}}
571+
</OptionalTag>
572+
{{/let}}
573+
{{else if this.destinationElement}}
574+
{{#in-element this.destinationElement insertBefore=null}}
575+
{{#if @overlay}}
576+
<div class="ember-basic-dropdown-overlay"></div>
577+
{{/if}}
578+
579+
{{#let (element (or @htmlTag "div")) as |OptionalTag|}}
580+
<OptionalTag
581+
id={{this.dropdownId}}
582+
class="ember-basic-dropdown-content ember-basic-dropdown-content--{{@hPosition}}
583+
ember-basic-dropdown-content--{{@vPosition}}
584+
{{this.animationClass}}{{if
585+
@renderInPlace
586+
' ember-basic-dropdown-content--in-place'
587+
}}
588+
{{@defaultClass}}"
589+
dir={{@dir}}
590+
...attributes
591+
{{style @otherStyles this.positionStyles}}
592+
{{this.respondToEvents}}
593+
{{this.initiallyReposition}}
594+
{{this.observeMutations}}
595+
{{this.animateInAndOut}}
596+
{{on "focusin" (fn (or @onFocusIn this.noop) @dropdown)}}
597+
{{on "focusout" (fn (or @onFocusOut this.noop) @dropdown)}}
598+
{{on "mouseenter" (fn (or @onMouseEnter this.noop) @dropdown)}}
599+
{{on "mouseleave" (fn (or @onMouseLeave this.noop) @dropdown)}}
600+
{{! V1 compatibility - See #498 }}
601+
>
602+
{{yield}}
603+
</OptionalTag>
604+
{{/let}}
605+
{{/in-element}}
606+
{{/if}}
607+
</div>
608+
{{else}}
609+
<div
610+
id={{this.dropdownId}}
611+
class="ember-basic-dropdown-content-placeholder"
612+
{{style (hash display="none")}}
613+
></div>
614+
{{/if}}
615+
</template>
523616
}
524617

525618
function containsRelevantMutation(nodeList: NodeList): boolean {

‎ember-basic-dropdown/src/components/basic-dropdown-content.hbs‎

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎ember-basic-dropdown/src/components/basic-dropdown-trigger.gts‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import Component from '@glimmer/component';
2+
import { action } from '@ember/object';
3+
import { element } from 'ember-element-helper';
4+
import { or } from 'ember-truth-helpers';
5+
import { concat } from '@ember/helper';
6+
import basicDropdownTriggerModifier from '../modifiers/basic-dropdown-trigger.ts';
7+
import { on } from '@ember/modifier';
8+
import { fn } from '@ember/helper';
9+
import type { Dropdown } from './basic-dropdown';
10+
import type { HorizontalPosition, VerticalPosition } from '../types.ts';
11+
12+
export interface BasicDropdownTriggerSignature {
13+
Element: HTMLElement;
14+
Args: {
15+
dropdown?: Dropdown;
16+
eventType?: 'click' | 'mousedown';
17+
stopPropagation?: boolean;
18+
vPosition?: VerticalPosition | null;
19+
hPosition?: HorizontalPosition | null;
20+
defaultClass?: string;
21+
renderInPlace?: boolean;
22+
htmlTag?: keyof HTMLElementTagNameMap;
23+
onBlur?: (dropdown?: Dropdown, event?: FocusEvent) => void;
24+
onClick?: (dropdown?: Dropdown, event?: MouseEvent) => void;
25+
onFocus?: (dropdown?: Dropdown, event?: FocusEvent) => void;
26+
onFocusIn?: (dropdown?: Dropdown, event?: FocusEvent) => void;
27+
onFocusOut?: (dropdown?: Dropdown, event?: FocusEvent) => void;
28+
onKeyDown?: (dropdown?: Dropdown, event?: KeyboardEvent) => void;
29+
onMouseDown?: (dropdown?: Dropdown, event?: MouseEvent) => void;
30+
onMouseEnter?: (dropdown?: Dropdown, event?: MouseEvent) => void;
31+
onMouseLeave?: (dropdown?: Dropdown, event?: MouseEvent) => void;
32+
onTouchEnd?: (dropdown?: Dropdown, event?: TouchEvent) => void;
33+
};
34+
Blocks: {
35+
default: [];
36+
};
37+
}
38+
39+
export default class BasicDropdownTrigger extends Component<BasicDropdownTriggerSignature> {
40+
// Actions
41+
/**
42+
* Allows similar behavior to `ember-composable-helpers`' `optional` helper.
43+
* Avoids adding extra dependencies.
44+
* Can be removed when the template `V1` compatibility event handlers are removed.
45+
*
46+
* @see https://github.com/cibernox/ember-basic-dropdown/issues/498
47+
* @memberof BasicDropdownContent
48+
*/
49+
noop(): void {}
50+
51+
@action
52+
disableDocumentTextSelect(disable: boolean) {
53+
if (disable) {
54+
document.body.classList.add('ember-basic-dropdown-text-select-disabled');
55+
} else {
56+
document.body.classList.remove(
57+
'ember-basic-dropdown-text-select-disabled',
58+
);
59+
}
60+
}
61+
62+
<template>
63+
{{#if @dropdown}}
64+
{{#let (element (or @htmlTag "div")) as |OptionalTag|}}
65+
{{! template-lint-disable no-pointer-down-event-binding }}
66+
<OptionalTag
67+
class="ember-basic-dropdown-trigger
68+
{{if @renderInPlace ' ember-basic-dropdown-trigger--in-place'}}
69+
{{if
70+
@hPosition
71+
(concat ' ember-basic-dropdown-trigger--' @hPosition)
72+
}}
73+
{{if
74+
@vPosition
75+
(concat ' ember-basic-dropdown-trigger--' @vPosition)
76+
}}
77+
{{@defaultClass}}"
78+
{{basicDropdownTriggerModifier
79+
dropdown=@dropdown
80+
eventType=@eventType
81+
stopPropagation=@stopPropagation
82+
}}
83+
tabindex={{unless @dropdown.disabled "0"}}
84+
...attributes
85+
{{on "mousedown" (fn this.disableDocumentTextSelect true)}}
86+
{{on "mouseup" (fn this.disableDocumentTextSelect false)}}
87+
{{! V1 compatibility - See #498 }}
88+
{{on "keydown" (fn (or @onKeyDown this.noop) @dropdown)}}
89+
{{on "mousedown" (fn (or @onMouseDown this.noop) @dropdown)}}
90+
{{on "touchend" (fn (or @onTouchEnd this.noop) @dropdown)}}
91+
{{on "click" (fn (or @onClick this.noop) @dropdown)}}
92+
{{on "mouseenter" (fn (or @onMouseEnter this.noop) @dropdown)}}
93+
{{on "mouseleave" (fn (or @onMouseLeave this.noop) @dropdown)}}
94+
{{on "focus" (fn (or @onFocus this.noop) @dropdown)}}
95+
{{on "blur" (fn (or @onBlur this.noop) @dropdown)}}
96+
{{on "focusin" (fn (or @onFocusIn this.noop) @dropdown)}}
97+
{{on "focusout" (fn (or @onFocusOut this.noop) @dropdown)}}
98+
>
99+
{{yield}}
100+
</OptionalTag>
101+
{{/let}}
102+
{{/if}}
103+
</template>
104+
}

‎ember-basic-dropdown/src/components/basic-dropdown-trigger.hbs‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

0 commit comments

Comments
 (0)