Convert gr-confirm-move-dialog to typescript

The change converts the following files to typescript:

* elements/change/gr-confirm-move-dialog/gr-confirm-move-dialog.ts

Change-Id: I4577850d18f118ff888d9f50840d11243d605250
This commit is contained in:
Milutin Kristofic
2020-08-21 20:10:49 +02:00
parent d095388845
commit b99dff91cf
3 changed files with 96 additions and 65 deletions

View File

@@ -14,28 +14,35 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import '../../../styles/shared-styles.js'; import '../../../styles/shared-styles';
import '../../shared/gr-autocomplete/gr-autocomplete.js'; import '../../shared/gr-autocomplete/gr-autocomplete';
import '../../shared/gr-dialog/gr-dialog.js'; import '../../shared/gr-dialog/gr-dialog';
import '../../shared/gr-rest-api-interface/gr-rest-api-interface.js'; import '../../shared/gr-rest-api-interface/gr-rest-api-interface';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js'; import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js'; import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
import {PolymerElement} from '@polymer/polymer/polymer-element.js'; import {PolymerElement} from '@polymer/polymer/polymer-element';
import {htmlTemplate} from './gr-confirm-move-dialog_html.js'; import {htmlTemplate} from './gr-confirm-move-dialog_html';
import {KeyboardShortcutMixin} from '../../../mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin.js'; import {KeyboardShortcutMixin} from '../../../mixins/keyboard-shortcut-mixin/keyboard-shortcut-mixin';
import {customElement, property} from '@polymer/decorators';
import {GrRestApiInterface} from '../../shared/gr-rest-api-interface/gr-rest-api-interface';
import {RepoName, BranchName} from '../../../types/common';
import {AutoCompleteSuggestion} from '../../shared/gr-autocomplete/gr-autocomplete';
const SUGGESTIONS_LIMIT = 15; const SUGGESTIONS_LIMIT = 15;
/** export interface GrConfirmMoveDialog {
* @extends PolymerElement $: {
*/ restAPI: GrRestApiInterface;
class GrConfirmMoveDialog extends KeyboardShortcutMixin( };
GestureEventListeners( }
LegacyElementMixin( @customElement('gr-confirm-move-dialog')
PolymerElement))) { export class GrConfirmMoveDialog extends KeyboardShortcutMixin(
static get template() { return htmlTemplate; } GestureEventListeners(LegacyElementMixin(PolymerElement))
) {
static get template() {
return htmlTemplate;
}
static get is() { return 'gr-confirm-move-dialog'; }
/** /**
* Fired when the confirm button is pressed. * Fired when the confirm button is pressed.
* *
@@ -48,19 +55,17 @@ class GrConfirmMoveDialog extends KeyboardShortcutMixin(
* @event cancel * @event cancel
*/ */
static get properties() { @property({type: String})
return { branch?: BranchName;
branch: String,
message: String, @property({type: String})
project: String, message?: string;
_query: {
type: Function, @property({type: String})
value() { project?: RepoName;
return this._getProjectBranchesSuggestions.bind(this);
}, @property({type: Object})
}, _query?: (_text?: string) => Promise<AutoCompleteSuggestion[]>;
};
}
get keyBindings() { get keyBindings() {
return { return {
@@ -68,44 +73,66 @@ class GrConfirmMoveDialog extends KeyboardShortcutMixin(
}; };
} }
_handleConfirmTap(e) { constructor() {
e.preventDefault(); super();
e.stopPropagation(); this._query = () => this._getProjectBranchesSuggestions();
this.dispatchEvent(new CustomEvent('confirm', {
composed: true, bubbles: false,
}));
} }
_handleCancelTap(e) { _handleConfirmTap(e: Event) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
this.dispatchEvent(new CustomEvent('cancel', { this.dispatchEvent(
composed: true, bubbles: false, new CustomEvent('confirm', {
})); composed: true,
bubbles: false,
})
);
} }
_getProjectBranchesSuggestions(input) { _handleCancelTap(e: Event) {
e.preventDefault();
e.stopPropagation();
this.dispatchEvent(
new CustomEvent('cancel', {
composed: true,
bubbles: false,
})
);
}
_getProjectBranchesSuggestions(
input?: string
): Promise<AutoCompleteSuggestion[]> {
if (!this.project) return Promise.reject(new Error('Missing project'));
if (!input) return Promise.reject(new Error('Missing input'));
if (input.startsWith('refs/heads/')) { if (input.startsWith('refs/heads/')) {
input = input.substring('refs/heads/'.length); input = input.substring('refs/heads/'.length);
} }
return this.$.restAPI.getRepoBranches( return this.$.restAPI
input, this.project, SUGGESTIONS_LIMIT).then(response => { .getRepoBranches(input, this.project, SUGGESTIONS_LIMIT)
const branches = []; .then(response => {
let branch; const branches: AutoCompleteSuggestion[] = [];
for (const key in response) { let branch;
if (!response.hasOwnProperty(key)) { continue; } if (response) {
if (response[key].ref.startsWith('refs/heads/')) { response.forEach(value => {
branch = response[key].ref.substring('refs/heads/'.length); if (value.ref.startsWith('refs/heads/')) {
} else { branch = value.ref.substring('refs/heads/'.length);
branch = response[key].ref; } else {
branch = value.ref;
}
branches.push({
name: branch,
});
});
} }
branches.push({
name: branch, return branches;
}); });
}
return branches;
});
} }
} }
customElements.define(GrConfirmMoveDialog.is, GrConfirmMoveDialog); declare global {
interface HTMLElementTagNameMap {
'gr-confirm-move-dialog': GrConfirmMoveDialog;
}
}

View File

@@ -35,7 +35,7 @@ suite('gr-confirm-move-dialog tests', () => {
}, },
]); ]);
} else { } else {
return Promise.resolve({}); return Promise.resolve(undefined);
} }
}, },
}); });

View File

@@ -51,7 +51,7 @@ declare global {
} }
} }
interface Suggestion { export interface AutoCompleteSuggestion {
name: string; name: string;
label?: string; label?: string;
value?: string; value?: string;
@@ -94,7 +94,8 @@ export class GrAutocomplete extends KeyboardShortcutMixin(
* *
*/ */
@property({type: Object}) @property({type: Object})
query: (_text?: string) => Promise<Suggestion[]> = () => Promise.resolve([]); query: (_text?: string) => Promise<AutoCompleteSuggestion[]> = () =>
Promise.resolve([]);
/** /**
* The number of characters that must be typed before suggestions are * The number of characters that must be typed before suggestions are
@@ -165,7 +166,7 @@ export class GrAutocomplete extends KeyboardShortcutMixin(
noDebounce = false; noDebounce = false;
@property({type: Array}) @property({type: Array})
_suggestions: Suggestion[] = []; _suggestions: AutoCompleteSuggestion[] = [];
@property({type: Array}) @property({type: Array})
_suggestionEls = []; _suggestionEls = [];
@@ -324,7 +325,7 @@ export class GrAutocomplete extends KeyboardShortcutMixin(
} }
@observe('_suggestions', '_focused') @observe('_suggestions', '_focused')
_maybeOpenDropdown(suggestions: Suggestion[], focused: boolean) { _maybeOpenDropdown(suggestions: AutoCompleteSuggestion[], focused: boolean) {
if (suggestions.length > 0 && focused) { if (suggestions.length > 0 && focused) {
return this.$.suggestions.open(); return this.$.suggestions.open();
} }
@@ -413,7 +414,10 @@ export class GrAutocomplete extends KeyboardShortcutMixin(
this._commit(_tabComplete); this._commit(_tabComplete);
} }
_updateValue(suggestion: HTMLElement | null, suggestions: Suggestion[]) { _updateValue(
suggestion: HTMLElement | null,
suggestions: AutoCompleteSuggestion[]
) {
if (!suggestion) { if (!suggestion) {
return; return;
} }