archivalo-oss/replayweb.page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix missed rename, and improve types (#276)

Browse Source 
Fixes a missed rename, in `src/item-index.ts`: I'd renamed `coll` to
`item` but missed updating it in the `update` method's
`changedProperties` map.

This PR fixes that, and adds better typing to all of the instances of
`changedProperties` by using
[`PropertyValues<this>`](https://lit.dev/docs/components/lifecycle/#typescript-types-for-changedproperties),
and implementing class properties for missing Lit properties.
This commit is contained in:
Emma Segal-Grossman
2024-01-05 18:32:22 -08:00
committed by GitHub
parent 3bee02bd89
commit a40471128f
15 changed files with 229 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/sorter.ts
+23 -55
View File
@@ -1,26 +1,28 @@
import { LitElement, html, css } from "lit";
import { LitElement, html, css, type PropertyValues } from "lit";
import { wrapCss } from "./misc";
import fasSortDown from "@fortawesome/fontawesome-free/svgs/solid/sort-down.svg";
import fasSortUp from "@fortawesome/fontawesome-free/svgs/solid/sort-up.svg";
// ===========================================================================
class Sorter extends LitElement {
class Sorter<T = unknown> extends LitElement {
sortedData: T[];
data: T[];
pageResults: number;
numResults: number;
sortKey: string | null;
sortDesc: boolean | null;
sortKeys: { key: string; name: string }[] = [];
constructor() {
super();
// @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
this.sortedData = [];
// @ts-expect-error - TS2339 - Property 'data' does not exist on type 'Sorter'.
this.data = [];
// @ts-expect-error - TS2339 - Property 'pageResults' does not exist on type 'Sorter'.
this.pageResults = 0;
// @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'.
this.numResults = 0;
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
this.sortKey = null;
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
this.sortDesc = null;
}
@@ -42,31 +44,25 @@ class Sorter extends LitElement {
if (this.id) {
const sortKey = localStorage.getItem(`${this.id}:sortKey`);
if (sortKey !== null) {
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
this.sortKey = sortKey;
}
const sortDesc = localStorage.getItem(`${this.id}:sortDesc`);
if (sortDesc !== null) {
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
this.sortDesc = sortDesc === "1";
}
}
}
updated(changedProperties) {
updated(changedProperties: PropertyValues<this>) {
const keyChanged = changedProperties.has("sortKey");
const descChanged = changedProperties.has("sortDesc");
const dataChanged = changedProperties.has("data");
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
if (keyChanged && this.sortKey !== null) {
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
localStorage.setItem(`${this.id}:sortKey`, this.sortKey);
}
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
if (descChanged && this.sortDesc !== null) {
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
localStorage.setItem(`${this.id}:sortDesc`, this.sortDesc ? "1" : "0");
}
@@ -76,28 +72,20 @@ class Sorter extends LitElement {
}
sortData() {
// @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? | TS2339 - Property 'data' does not exist on type 'Sorter'.
this.sortedData = [...this.data];
// @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'. | TS2339 - Property 'pageResults' does not exist on type 'Sorter'.
this.numResults = this.pageResults;
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
if (this.sortKey === "") {
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
if ((this.sortKey == null || this.sortKey) === "") {
if (this.sortDesc) {
// @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
this.sortedData.reverse();
}
} else {
// @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
this.sortedData.sort((first, second) => {
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
if (first[this.sortKey] === second[this.sortKey]) {
if (first[this.sortKey!] === second[this.sortKey!]) {
return 0;
}
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
return this.sortDesc == first[this.sortKey] < second[this.sortKey]
return this.sortDesc == first[this.sortKey!] < second[this.sortKey!]
? 1
: -1;
});
@@ -108,27 +96,20 @@ class Sorter extends LitElement {
sendSortChanged() {
const detail = {
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
sortKey: this.sortKey,
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
sortDesc: this.sortDesc,
// @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'.
sortedData: this.numResults
? // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? | TS2339 - Property 'numResults' does not exist on type 'Sorter'.
this.sortedData.slice(0, this.numResults)
: // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
this.sortedData,
? this.sortedData.slice(0, this.numResults)
: this.sortedData,
};
this.dispatchEvent(new CustomEvent("sort-changed", { detail }));
}
getMore(more = 100) {
// @ts-expect-error - TS2339 - Property 'pageResults' does not exist on type 'Sorter'. | TS2339 - Property 'numResults' does not exist on type 'Sorter'. | TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
if (this.pageResults && this.numResults >= this.sortedData.length) {
return;
}
// @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'.
this.numResults += more;
this.sendSortChanged();
}
@@ -149,37 +130,24 @@ class Sorter extends LitElement {
return html`
<div class="select is-small">
<select id="sort-select" @change=${(e) =>
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
(this.sortKey = e.currentTarget.value)}>
${
// @ts-expect-error - TS2339 - Property 'sortKeys' does not exist on type 'Sorter'.
this.sortKeys.map(
(sort) => html`
<option
value="${sort.key}"
?selected="${
// @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
sort.key === this.sortKey
}"
>
Sort By: ${sort.name}
</option>
`,
)
}
${this.sortKeys.map(
(sort) => html`
<option value="${sort.key}" ?selected="${sort.key === this.sortKey}">
Sort By: ${sort.name}
</option>
`,
)}
</select>
</div>
<button @click=${() =>
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. | TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
(this.sortDesc = !this.sortDesc)} class="button is-small">
<span>Order:</span>
<span class="is-sr-only">${
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
this.sortDesc ? "Ascending" : "Descending"
}</span>
<span class="icon"><fa-icon aria-hidden="true" .svg=${
// @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
this.sortDesc ? fasSortUp : fasSortDown
}></span>
</button>`;