From 10916fa82ae16a79bb19241fff1525bc3270c3d2 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Fri, 20 Nov 2020 08:17:34 -0600
Subject: [PATCH] Convert ha-relative-time to TypeScript/LitElement (#7709)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 src/components/ha-relative-time.js | 66 ---------------------------
 src/components/ha-relative-time.ts | 72 ++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 66 deletions(-)
 delete mode 100644 src/components/ha-relative-time.js
 create mode 100644 src/components/ha-relative-time.ts

diff --git a/src/components/ha-relative-time.js b/src/components/ha-relative-time.js
deleted file mode 100644
index 58d787ebb5..0000000000
--- a/src/components/ha-relative-time.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import { dom } from "@polymer/polymer/lib/legacy/polymer.dom";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import relativeTime from "../common/datetime/relative_time";
-import LocalizeMixin from "../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HaRelativeTime extends LocalizeMixin(PolymerElement) {
-  static get properties() {
-    return {
-      hass: Object,
-      datetime: {
-        type: String,
-        observer: "datetimeChanged",
-      },
-
-      datetimeObj: {
-        type: Object,
-        observer: "datetimeObjChanged",
-      },
-
-      parsedDateTime: Object,
-    };
-  }
-
-  constructor() {
-    super();
-    this.updateRelative = this.updateRelative.bind(this);
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    // update every 60 seconds
-    this.updateInterval = setInterval(this.updateRelative, 60000);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    clearInterval(this.updateInterval);
-  }
-
-  datetimeChanged(newVal) {
-    this.parsedDateTime = newVal ? new Date(newVal) : null;
-
-    this.updateRelative();
-  }
-
-  datetimeObjChanged(newVal) {
-    this.parsedDateTime = newVal;
-
-    this.updateRelative();
-  }
-
-  updateRelative() {
-    const root = dom(this);
-    if (!this.parsedDateTime) {
-      root.innerHTML = this.localize("ui.components.relative_time.never");
-    } else {
-      root.innerHTML = relativeTime(this.parsedDateTime, this.localize);
-    }
-  }
-}
-
-customElements.define("ha-relative-time", HaRelativeTime);
diff --git a/src/components/ha-relative-time.ts b/src/components/ha-relative-time.ts
new file mode 100644
index 0000000000..1bd6e39afc
--- /dev/null
+++ b/src/components/ha-relative-time.ts
@@ -0,0 +1,72 @@
+import {
+  customElement,
+  UpdatingElement,
+  property,
+  PropertyValues,
+} from "lit-element";
+
+import relativeTime from "../common/datetime/relative_time";
+
+import type { HomeAssistant } from "../types";
+
+@customElement("ha-relative-time")
+class HaRelativeTime extends UpdatingElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public datetime?: string;
+
+  private _interval?: number;
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._clearInterval();
+  }
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    if (this.datetime) {
+      this._startInterval();
+    }
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this._updateRelative();
+  }
+
+  protected update(changedProps: PropertyValues) {
+    super.update(changedProps);
+    this._updateRelative();
+  }
+
+  private _clearInterval(): void {
+    if (this._interval) {
+      window.clearInterval(this._interval);
+      this._interval = undefined;
+    }
+  }
+
+  private _startInterval(): void {
+    this._clearInterval();
+
+    // update every 60 seconds
+    this._interval = window.setInterval(() => this._updateRelative(), 60000);
+  }
+
+  private _updateRelative(): void {
+    if (!this.datetime) {
+      this.innerHTML = this.hass.localize("ui.components.relative_time.never");
+    } else {
+      this.innerHTML = relativeTime(
+        new Date(this.datetime),
+        this.hass.localize
+      );
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-relative-time": HaRelativeTime;
+  }
+}