Migrate from Polymer to Lit
Also remove the extra bind-value attribute for the input
tag and instead use the revision object to get the current
ref.
Change-Id: Iee2cd78206fc6a0188b21357fa9a70dd803c692c
diff --git a/ref-copy/plugin.js b/ref-copy/plugin.js
index 6e3adc1..d406da0 100644
--- a/ref-copy/plugin.js
+++ b/ref-copy/plugin.js
@@ -12,9 +12,9 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-import './ref-copy';
+import {REF_COPY} from './ref-copy';
Gerrit.install(plugin => {
plugin.registerCustomComponent(
- 'change-metadata-item', 'ref-copy');
+ 'change-metadata-item', REF_COPY);
});
diff --git a/ref-copy/ref-copy.js b/ref-copy/ref-copy.js
index 4ced2bd..46fc39f 100644
--- a/ref-copy/ref-copy.js
+++ b/ref-copy/ref-copy.js
@@ -12,40 +12,71 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-import {htmlTemplate} from './ref-copy_html';
+import {css, html, LitElement} from 'lit';
const COPY_TIMEOUT_MS = 1000;
-class RefCopy extends Polymer.Element {
-
- static get is() { return 'ref-copy'; }
-
- static get template() { return htmlTemplate; }
-
+export const REF_COPY = 'ref-copy';
+class RefCopy extends LitElement {
static get properties() {
return {
- revision: Object,
+ revision: {type: Object}
};
}
+ static get styles() {
+ return css`
+ .text {
+ min-width: 8em;
+ padding: var(--spacing-l);
+ text-transform: none;
+ }
+ `;
+ }
+
+ render() {
+ return html`
+ <div class="text">
+ <iron-input
+ bind-value="${this.revision.ref}"
+ readonly>
+ <input
+ id="input"
+ is="iron-input"
+ type="text"
+ @click="${this._handleInputTap}"
+ readonly/>
+ </iron-input>
+ <gr-button
+ id="button"
+ link
+ class="copyToClipboard"
+ @click="${this._copyToClipboard}">
+ copy
+ </gr-button>
+ </div>`;
+ }
+
_handleInputTap(e) {
e.preventDefault();
- Polymer.dom(e).rootTarget.select();
+ const rootTarget = e.composedPath()[0];
+ rootTarget.select();
}
_copyToClipboard(e) {
- const ref = this.$.input.value;
+ const ref = this.revision.ref;
const copyBtn = e.target;
if (ref) {
navigator.clipboard.writeText(ref).then(() => {
copyBtn.innerText = 'done';
setTimeout(() => {
- copyBtn.innerText = 'copy'}, COPY_TIMEOUT_MS);
- }).catch(err => {
- console.log('Failed to copy ref to clipboard', err);
- })
+ copyBtn.innerText = 'copy'
+ }, COPY_TIMEOUT_MS);
+ }).catch(err => {
+ console.log('Failed to copy ref to clipboard', err);
+ })
}
}
}
-customElements.define(RefCopy.is, RefCopy);
+customElements.define(REF_COPY, RefCopy);
diff --git a/ref-copy/ref-copy_html.js b/ref-copy/ref-copy_html.js
deleted file mode 100644
index d39c9e2..0000000
--- a/ref-copy/ref-copy_html.js
+++ /dev/null
@@ -1,43 +0,0 @@
-// Copyright (C) 2021 The Android Open Source Project
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-export const htmlTemplate = Polymer.html`
-<style>
- .text {
- min-width: 8em;
- padding: var(--spacing-l);
- text-transform: none;
- }
-</style>
-<div class="text">
- <iron-input
- bind-value="{{revision.ref}}"
- readonly>
- <input
- id="input"
- is="iron-input"
- type="text"
- on-tap="_handleInputTap"
- bind-value="{{revision.ref}}"
- readonly/>
- </iron-input>
- <gr-button
- id="button"
- link
- class="copyToClipboard"
- on-tap="_copyToClipboard">
- copy
- </gr-button>
-</div>
-<gr-js-api-interface id="jsAPI"></gr-js-api-interface>`;
