Files TS: Convert table_list.js to TS

Bug: b:289003444
Change-Id: I12b4bf185cc297f67d0e5f51d2121c5ec4ee531f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4983370
Reviewed-by: Wenbo Jie <wenbojie@chromium.org>
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1216785}

ui/file_manager/file_manager/foreground/js/ui/BUILD.gn

@@ -327,7 +327,6 @@ js_library("file_table_list") {
     ":file_tap_handler",
     ":list_selection_model",
     "table:table",
-    "table:table_list",
     "//ash/webui/common/resources:assert",
     "//ui/file_manager/file_manager/common/js:file_type",
     "//ui/file_manager/file_manager/externs:entry_location",

ui/file_manager/file_manager/foreground/js/ui/list.ts

@@ -306,7 +306,7 @@ export class List extends HTMLUListElement {
   }
 
 
-  private batchCount_ = 0;
+  protected batchCount_ = 0;
 
   /**
    * When making a lot of updates to the list, the code could be wrapped in

ui/file_manager/file_manager/foreground/js/ui/table/BUILD.gn

@@ -10,7 +10,6 @@ group("js_modules") {
     ":table_column",
     ":table_column_model",
     ":table_header",
-    ":table_list",
     ":table_splitter",
   ]
 }
@@ -27,7 +26,6 @@ js_library("table") {
     ":table_column",
     ":table_column_model",
     ":table_header",
-    ":table_list",
     "//ash/webui/common/resources:cr_deprecated",
     "//ui/file_manager/file_manager/common/js:array_data_model",
     "//ui/file_manager/file_manager/foreground/js/ui:list_single_selection_model",
@@ -49,10 +47,6 @@ js_library("table_header") {
   ]
 }
 
-js_library("table_list") {
-  deps = [ "//ash/webui/common/resources:cr_deprecated" ]
-}
-
 js_library("table_splitter") {
   deps = [
     "//ash/webui/common/resources:cr_deprecated",

ui/file_manager/file_manager/foreground/js/ui/table/table_list.js → ui/file_manager/file_manager/foreground/js/ui/table/table_list.ts

@@ -6,8 +6,7 @@
  * @fileoverview This extends List for use in the table.
  */
 
-import {getPropertyDescriptor} from 'chrome://resources/ash/common/cr_deprecated.js';
-
+import {decorate, jsSetter} from '../../../../common/js/cr_ui.js';
 import {List} from '../list.js';
 import {ListItem} from '../list_item.js';
 
@@ -18,24 +17,16 @@ import {Table} from './table.js';
  * Creates a new table list element.
  */
 export class TableList extends List {
+  private table_: Table|null;
+
   constructor() {
     super();
 
-    /** @private @type {?Table} */
-    this.table_ = null;
+    throw new Error('It should use the decorate method');
   }
 
-  // @ts-ignore: error TS7006: Parameter 'el' implicitly has an 'any' type.
-  static decorate(el) {
-    // @ts-ignore: error TS2339: Property 'decorate' does not exist on type
-    // 'typeof List'.
-    if (List.decorate) {
-      // @ts-ignore: error TS2339: Property 'decorate' does not exist on type
-      // 'typeof List'.
-      List.decorate(el);
-    }
-
-    el.__proto__ = TableList.prototype;
+  static override decorate(el: HTMLElement) {
+    decorate(el, TableList);
     el.className = 'list';
   }
 
@@ -48,8 +39,6 @@ export class TableList extends List {
       return;
     }
     if (this.updateScrollbars_()) {
-      // @ts-ignore: error TS2339: Property 'redraw' does not exist on type
-      // 'List'.
       List.prototype.redraw.call(this);
     }  // Redraw items only.
     this.resizeCells_();
@@ -58,22 +47,18 @@ export class TableList extends List {
   /**
    * Updates width of cells.
    */
-  resizeCells_() {
-    // @ts-ignore: error TS2531: Object is possibly 'null'.
-    const cm = this.table_.columnModel;
+  private resizeCells_() {
+    const cm = this.table_!.columnModel;
     for (let row = this.firstElementChild; row; row = row.nextElementSibling) {
       if (row.tagName != 'LI') {
         continue;
       }
 
       for (let i = 0; i < cm.size; i++) {
-        // @ts-ignore: error TS2339: Property 'style' does not exist on type
-        // 'Element'.
-        row.children[i].style.width = cm.getWidth(i) + 'px';
+        const child = row.children[i]! as HTMLElement;
+        child.style.width = cm.getWidth(i) + 'px';
       }
-      // @ts-ignore: error TS2339: Property 'style' does not exist on type
-      // 'Element'.
-      row.style.width = cm.totalWidth + 'px';
+      (row as HTMLElement).style.width = cm.totalWidth + 'px';
     }
     if (this.afterFiller_) {
       this.afterFiller_.style.width = cm.totalWidth + 'px';
@@ -82,47 +67,36 @@ export class TableList extends List {
 
   /**
    * Redraws the viewport.
-   * @override
    */
-  redraw() {
-    // @ts-ignore: error TS2339: Property 'batchCount_' does not exist on type
-    // 'TableList'.
+  override redraw() {
     if (this.batchCount_ != 0) {
       return;
     }
     this.updateScrollbars_();
 
-    // @ts-ignore: error TS2339: Property 'redraw' does not exist on type
-    // 'List'.
     List.prototype.redraw.call(this);
     this.resizeCells_();
   }
 
   /**
    * Returns the height of after filler in the list.
-   * @param {number} lastIndex The index of item past the last in viewport.
-   * @return {number} The height of after filler.
-   * @override
+   * @param lastIndex The index of item past the last in viewport.
+   * @return The height of after filler.
    */
-  // @ts-ignore: error TS4122: This member cannot have a JSDoc comment with an
-  // '@override' tag because it is not declared in the base class 'List'.
-  getAfterFillerHeight(lastIndex) {
+  override getAfterFillerHeight(lastIndex: number): number {
     // If the list is empty set height to 1 to show horizontal
     // scroll bar.
     return lastIndex == 0 ?
         1 :
-        // @ts-ignore: error TS2339: Property 'getAfterFillerHeight' does not
-        // exist on type 'List'.
         List.prototype.getAfterFillerHeight.call(this, lastIndex);
   }
 
   /**
    * Shows or hides vertical and horizontal scroll bars in the list.
-   * @return {boolean} True if horizontal scroll bar changed.
+   * @return True if horizontal scroll bar changed.
    */
-  updateScrollbars_() {
-    // @ts-ignore: error TS2531: Object is possibly 'null'.
-    const cm = this.table_.columnModel;
+  private updateScrollbars_(): boolean {
+    const cm = this.table_!.columnModel;
     const style = this.style;
     if (!cm || cm.size == 0) {
       if (style.overflow != 'hidden') {
@@ -161,10 +135,10 @@ export class TableList extends List {
 
   /**
    * Shows or hides vertical scroll bar.
-   * @param {boolean} show True to show.
-   * @return {boolean} True if visibility changed.
+   * @param show True to show.
+   * @return True if visibility changed.
    */
-  showVerticalScrollBar_(show) {
+  private showVerticalScrollBar_(show: boolean): boolean {
     const style = this.style;
     if (show && style.overflowY == 'scroll') {
       return false;
@@ -177,63 +151,56 @@ export class TableList extends List {
   }
 
   /**
-   * @param {number} visibleHeight Height in pixels.
-   * @return {boolean} True if all rows could be accomodiated in
+   * @param visibleHeight Height in pixels.
+   * @return True if all rows could be accomodiated in
    *                   visibleHeight pixels.
    */
-  areAllItemsVisible_(visibleHeight) {
+  private areAllItemsVisible_(visibleHeight: number): boolean {
     if (!this.dataModel || this.dataModel.length == 0) {
       return true;
     }
-    // @ts-ignore: error TS2339: Property 'getItemTop' does not exist on type
-    // 'TableList'.
     return this.getItemTop(this.dataModel.length) <= visibleHeight;
   }
 
   /**
    * Creates a new list item.
-   * @param {*} dataItem The value to use for the item.
-   * @return {!ListItem} The newly created list item.
-   * @override
+   * @param dataItem The value to use for the item.
+   * @return The newly created list item.
    */
-  createItem(dataItem) {
-    return /** @type {!ListItem} */ (
-        // @ts-ignore: error TS2345: Argument of type 'Table | null' is not
-        // assignable to parameter of type 'Table'.
-        this.table_.getRenderFunction().call(null, dataItem, this.table_));
+  override createItem(dataItem: unknown): ListItem {
+    return this.table_!.getRenderFunction().call(
+               null, dataItem, this.table_!) as ListItem;
   }
 
   /**
    * Determines whether a full redraw is required.
-   * @return {boolean}
    */
-  needsFullRedraw_() {
-    // @ts-ignore: error TS2531: Object is possibly 'null'.
-    const cm = this.table_.columnModel;
-    const row = this.firstElementChild;
+  private needsFullRedraw_(): boolean {
+    const cm = this.table_!.columnModel;
+    const row = this.firstElementChild as HTMLElement;
     // If the number of columns in the model has changed, a full redraw is
     // needed.
-    // @ts-ignore: error TS18047: 'row' is possibly 'null'.
     if (row.children.length != cm.size) {
       return true;
     }
     // If the column visibility has changed, a full redraw is required.
     for (let i = 0; i < cm.size; ++i) {
-      // @ts-ignore: error TS2339: Property 'hidden' does not exist on type
-      // 'Element'.
-      if (cm.isVisible(i) == row.children[i].hidden) {
+      const child = row.children[i]! as HTMLElement;
+      if (cm.isVisible(i) == child.hidden) {
         return true;
       }
     }
     return false;
   }
-}
 
   /**
    * The table associated with the list.
-   * @type {Element}
    */
-// @ts-ignore: error TS2565: Property 'table' is used before being assigned.
-TableList.prototype.table;
-Object.defineProperty(
-    TableList.prototype, 'table', getPropertyDescriptor('table'));
+  get table(): Table|null {
+    return this.table_;
+  }
+
+  set table(value: Table) {
+    jsSetter(this, 'table', value);
+  }
+}

ui/file_manager/file_names.gni

@@ -182,14 +182,15 @@ static_js_files = [
   "file_manager/foreground/js/ui/table/table_column.js",
   "file_manager/foreground/js/ui/table/table_column_model.js",
   "file_manager/foreground/js/ui/table/table_header.js",
-  "file_manager/foreground/js/ui/table/table_list.js",
   "file_manager/foreground/js/ui/table/table_splitter.js",
   "file_manager/foreground/js/ui/tree.js",
 ]
 
 # END: static_js_files.
 
 ts_files = [
+  "file_manager/foreground/js/ui/table/table_list.ts",
+
   # Common.
   "file_manager/common/js/api.ts",
   "file_manager/common/js/app_util.ts",