Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/chops/chops-timestamp/chops-timestamp.js b/static_src/elements/chops/chops-timestamp/chops-timestamp.js
new file mode 100644
index 0000000..b7f157f
--- /dev/null
+++ b/static_src/elements/chops/chops-timestamp/chops-timestamp.js
@@ -0,0 +1,93 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html} from 'lit-element';
+
+import {standardTime, relativeTime} from './chops-timestamp-helpers.js';
+
+/**
+ * `<chops-timestamp>`
+ *
+ * This element shows a time in a human readable form.
+ *
+ * @customElement
+ */
+export class ChopsTimestamp extends LitElement {
+ /** @override */
+ render() {
+ return html`
+ ${this._displayedTime}
+ `;
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ /** The data for the time which can be in any format readable by
+ * Date.parse.
+ */
+ timestamp: {type: String},
+ /** When true, a shorter version of the date will be displayed. */
+ short: {type: Boolean},
+ /**
+ * The Date object, which is stored in UTC, to be converted to a string.
+ */
+ _date: {type: Object},
+ };
+ }
+
+ /**
+ * @return {string} Human-readable timestamp.
+ */
+ get _displayedTime() {
+ const date = this._date;
+ const short = this.short;
+ // TODO(zhangtiff): Add logic to dynamically re-compute relative time
+ // based on set intervals.
+ if (!date) return;
+ if (short) {
+ return relativeTime(date);
+ }
+ return standardTime(date);
+ }
+
+ /** @override */
+ update(changedProperties) {
+ if (changedProperties.has('timestamp')) {
+ this._date = this._parseTimestamp(this.timestamp);
+ this.setAttribute('title', standardTime(this._date));
+ }
+ super.update(changedProperties);
+ }
+
+ /**
+ * Turns a timestamp string into a native JavaScript Date Object.
+ * @param {string} timestamp Timestamp string in either an ISO format or
+ * Unix timestamp format. If Unix time, the function expects the time in
+ * seconds, not milliseconds.
+ * @return {Date}
+ */
+ _parseTimestamp(timestamp) {
+ if (!timestamp) return;
+
+ let unixTimeMs = 0;
+ // Make sure to do Date.parse before Number.parseInt because parseInt
+ // will parse numbers within a string.
+ if (/^\d+$/.test(timestamp)) {
+ // Check if a string contains only digits before guessing it's
+ // unix time. This is necessary because Number.parseInt will parse
+ // number strings that contain non-numbers.
+ unixTimeMs = Number.parseInt(timestamp) * 1000;
+ } else {
+ // Date.parse will parse strings with only numbers as though those
+ // strings were truncated ISO formatted strings.
+ unixTimeMs = Date.parse(timestamp);
+ if (Number.isNaN(unixTimeMs)) {
+ throw new Error('Timestamp is in an invalid format.');
+ }
+ }
+ return new Date(unixTimeMs);
+ }
+}
+customElements.define('chops-timestamp', ChopsTimestamp);