Fix template problems with gr-textarea
Change-Id: I897cb105eb93c59449f16cfa1b766d0a27a60086
diff --git a/polygerrit-ui/app/BUILD b/polygerrit-ui/app/BUILD
index 5f9c3c5..3c9faf8 100644
--- a/polygerrit-ui/app/BUILD
+++ b/polygerrit-ui/app/BUILD
@@ -132,7 +132,6 @@
"elements/shared/gr-labeled-autocomplete/gr-labeled-autocomplete_html.ts",
"elements/shared/gr-list-view/gr-list-view_html.ts",
"elements/shared/gr-repo-branch-picker/gr-repo-branch-picker_html.ts",
- "elements/shared/gr-textarea/gr-textarea_html.ts",
]
# Transform templates into a .ts files.
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.ts b/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.ts
index 73d1bf0..4d2aee7 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.ts
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.ts
@@ -39,7 +39,7 @@
}
}
-interface Item {
+export interface Item {
dataValue?: string;
name?: string;
text?: string;
@@ -47,6 +47,11 @@
value?: string;
}
+export interface ItemSelectedEvent {
+ trigger: string;
+ selected: HTMLElement | null;
+}
+
@customElement('gr-autocomplete-dropdown')
export class GrAutocompleteDropdown extends IronFitMixin(
KeyboardShortcutMixin(PolymerElement),
@@ -155,7 +160,7 @@
e.preventDefault();
e.stopPropagation();
this.dispatchEvent(
- new CustomEvent('item-selected', {
+ new CustomEvent<ItemSelectedEvent>('item-selected', {
detail: {
trigger: 'tab',
selected: this.cursor.target,
@@ -170,7 +175,7 @@
e.preventDefault();
e.stopPropagation();
this.dispatchEvent(
- new CustomEvent('item-selected', {
+ new CustomEvent<ItemSelectedEvent>('item-selected', {
detail: {
trigger: 'enter',
selected: this.cursor.target,
@@ -189,7 +194,7 @@
_handleClickItem(e: Event) {
e.preventDefault();
e.stopPropagation();
- let selected = e.target! as Element;
+ let selected = e.target! as HTMLElement;
while (!selected.classList.contains('autocompleteOption')) {
if (!selected || selected === this) {
return;
@@ -197,7 +202,7 @@
selected = selected.parentElement!;
}
this.dispatchEvent(
- new CustomEvent('item-selected', {
+ new CustomEvent<ItemSelectedEvent>('item-selected', {
detail: {
trigger: 'click',
selected,
diff --git a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts
index a747ac4..4b6eceb 100644
--- a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts
+++ b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts
@@ -28,7 +28,11 @@
import {customElement, property} from '@polymer/decorators';
import {ReportingService} from '../../../services/gr-reporting/gr-reporting';
import {IronAutogrowTextareaElement} from '@polymer/iron-autogrow-textarea/iron-autogrow-textarea';
-import {GrAutocompleteDropdown} from '../gr-autocomplete-dropdown/gr-autocomplete-dropdown';
+import {
+ GrAutocompleteDropdown,
+ Item,
+ ItemSelectedEvent,
+} from '../gr-autocomplete-dropdown/gr-autocomplete-dropdown';
const MAX_ITEMS_DROPDOWN = 10;
@@ -56,11 +60,8 @@
{value: '😜', match: 'winking tongue ;)'},
];
-interface EmojiSuggestion {
- value: string;
+interface EmojiSuggestion extends Item {
match: string;
- dataValue?: string;
- text?: string;
}
interface ValueChangeEvent {
@@ -76,6 +77,13 @@
};
}
+declare global {
+ interface HTMLElementEventMap {
+ 'item-selected': CustomEvent<ItemSelectedEvent>;
+ 'bind-value-changed': CustomEvent<ValueChangeEvent>;
+ }
+}
+
@customElement('gr-textarea')
export class GrTextarea extends KeyboardShortcutMixin(PolymerElement) {
static get template() {
@@ -85,8 +93,8 @@
/**
* @event bind-value-changed
*/
- @property({type: Boolean})
- autocomplete?: boolean;
+ @property({type: String})
+ autocomplete?: string;
@property({type: Boolean})
disabled?: boolean;
@@ -101,7 +109,7 @@
placeholder?: string;
@property({type: String, notify: true, observer: '_handleTextChanged'})
- text?: string;
+ text = '';
@property({type: Boolean})
hideBorder = false;
@@ -125,10 +133,10 @@
_hideEmojiAutocomplete = true;
@property({type: Number})
- _index?: number;
+ _index: number | null = null;
@property({type: Array})
- _suggestions?: EmojiSuggestion[];
+ _suggestions: EmojiSuggestion[] = [];
@property({type: Number})
readonly _verticalOffset = 20;
@@ -242,8 +250,10 @@
this._setEmoji(this.$.emojiSuggestions.getCurrentText());
}
- _handleEmojiSelect(e: CustomEvent) {
- this._setEmoji(e.detail.selected.dataset['value']);
+ _handleEmojiSelect(e: CustomEvent<ItemSelectedEvent>) {
+ if (e.detail.selected?.dataset['value']) {
+ this._setEmoji(e.detail.selected?.dataset['value']);
+ }
}
_setEmoji(text: string) {
@@ -369,7 +379,7 @@
const suggestions = [];
for (const suggestion of matchedSuggestions) {
suggestion.dataValue = suggestion.value;
- suggestion.text = suggestion.value + ' ' + suggestion.match;
+ suggestion.text = `${suggestion.value} ${suggestion.match}`;
suggestions.push(suggestion);
}
this.set('_suggestions', suggestions);
