Move gr-keyboard-shorcuts-dialog to typescript
Change-Id: Ia915ad0d73ad0b1d976cbb027e80854c72c127b5
diff --git a/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog.ts b/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog.ts
index 31fece5..33e720b 100644
--- a/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog.ts
+++ b/polygerrit-ui/app/elements/core/gr-keyboard-shortcuts-dialog/gr-keyboard-shortcuts-dialog.ts
@@ -14,35 +14,59 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import '../../shared/gr-button/gr-button.js';
-import '../gr-key-binding-display/gr-key-binding-display.js';
-import '../../../styles/shared-styles.js';
-import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';
-import {PolymerElement} from '@polymer/polymer/polymer-element.js';
-import {htmlTemplate} from './gr-keyboard-shortcuts-dialog_html.js';
-import {KeyboardShortcutMixin, ShortcutSection} from '../../../mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.js';
+import '../../shared/gr-button/gr-button';
+import '../gr-key-binding-display/gr-key-binding-display';
+import '../../../styles/shared-styles';
+import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
+import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
+import {PolymerElement} from '@polymer/polymer/polymer-element';
+import {htmlTemplate} from './gr-keyboard-shortcuts-dialog_html';
+import {
+ KeyboardShortcutMixin,
+ ShortcutSection,
+ ShortcutListener,
+ SectionView,
+} from '../../../mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin';
+import {property, customElement} from '@polymer/decorators';
-/**
- * @extends PolymerElement
- */
-class GrKeyboardShortcutsDialog extends KeyboardShortcutMixin(
- GestureEventListeners(
- LegacyElementMixin(PolymerElement))) {
- static get template() { return htmlTemplate; }
+declare global {
+ interface HTMLElementTagNameMap {
+ 'gr-keyboard-shortcuts-dialog': GrKeyboardShortcutsDialog;
+ }
+}
- static get is() { return 'gr-keyboard-shortcuts-dialog'; }
+interface SectionShortcut {
+ section: ShortcutSection;
+ shortcuts?: SectionView;
+}
+
+@customElement('gr-keyboard-shortcuts-dialog')
+export class GrKeyboardShortcutsDialog extends KeyboardShortcutMixin(
+ GestureEventListeners(LegacyElementMixin(PolymerElement))
+) {
+ static get template() {
+ return htmlTemplate;
+ }
+
/**
* Fired when the user presses the close button.
*
* @event close
*/
- static get properties() {
- return {
- _left: Array,
- _right: Array,
- };
+ @property({type: Array})
+ _left?: SectionShortcut[];
+
+ @property({type: Array})
+ _right?: SectionShortcut[];
+
+ private keyboardShortcutDirectoryListener: ShortcutListener;
+
+ constructor() {
+ super();
+ this.keyboardShortcutDirectoryListener = this._onDirectoryUpdated.bind(
+ this
+ );
}
/** @override */
@@ -54,30 +78,36 @@
/** @override */
attached() {
super.attached();
- this.keyboardShortcutDirectoryListener =
- this._onDirectoryUpdated.bind(this);
this.addKeyboardShortcutDirectoryListener(
- this.keyboardShortcutDirectoryListener);
+ this.keyboardShortcutDirectoryListener
+ );
}
/** @override */
detached() {
super.detached();
this.removeKeyboardShortcutDirectoryListener(
- this.keyboardShortcutDirectoryListener);
+ this.keyboardShortcutDirectoryListener
+ );
}
- _handleCloseTap(e) {
+ _handleCloseTap(e: MouseEvent) {
e.preventDefault();
e.stopPropagation();
- this.dispatchEvent(new CustomEvent('close', {
- composed: true, bubbles: false,
- }));
+ this.dispatchEvent(
+ new CustomEvent('close', {
+ composed: true,
+ bubbles: false,
+ })
+ );
}
- _onDirectoryUpdated(directory) {
- const left = [];
- const right = [];
+ _onDirectoryUpdated(directory?: Map<ShortcutSection, SectionView>) {
+ if (!directory) {
+ return;
+ }
+ const left = [] as SectionShortcut[];
+ const right = [] as SectionShortcut[];
if (directory.has(ShortcutSection.EVERYWHERE)) {
left.push({
@@ -125,6 +155,3 @@
this.set('_right', right);
}
}
-
-customElements.define(GrKeyboardShortcutsDialog.is,
- GrKeyboardShortcutsDialog);
diff --git a/polygerrit-ui/app/mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.ts b/polygerrit-ui/app/mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.ts
index 07d59b4..69db96d 100644
--- a/polygerrit-ui/app/mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.ts
+++ b/polygerrit-ui/app/mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.ts
@@ -204,7 +204,7 @@
TOGGLE_BLAME = 'TOGGLE_BLAME',
}
-type SectionView = Array<{binding: string[][]; text: string}>;
+export type SectionView = Array<{binding: string[][]; text: string}>;
/**
* The interface for listener for shortcut events.
@@ -1060,6 +1060,8 @@
modifierPressed(event: CustomKeyboardEvent): boolean;
isModifierPressed(event: CustomKeyboardEvent, modifier: Modifier): boolean;
getKeyboardEvent(e: CustomKeyboardEvent): CustomKeyboardEvent;
+ addKeyboardShortcutDirectoryListener(listener: ShortcutListener): void;
+ removeKeyboardShortcutDirectoryListener(listener: ShortcutListener): void;
}
export function _testOnly_getShortcutManagerInstance() {
