convert tfoot/row/cell to glimmer

miguelcobain · Feb 15, 2021 · b75a327 · b75a327
1 parent cdc6f6d
commit b75a327
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 61 deletions.
diff --git a/addon/components/yeti-table/tfoot.js b/addon/components/yeti-table/tfoot.js
@@ -1,5 +1,4 @@
-import { tagName } from '@ember-decorators/component';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 
 /**
   Renders a `<tfoot>` element and yields the row component.
@@ -16,13 +15,8 @@ import Component from '@ember/component';
   @yield {object} footer
   @yield {Component} footer.row
 */
-@tagName('')
-class TFoot extends Component {
-  theme;
 
-  parent;
-
-  columns;
-}
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
+class TFoot extends Component {}
 
 export default TFoot;
diff --git a/addon/components/yeti-table/tfoot/row.js b/addon/components/yeti-table/tfoot/row.js
@@ -1,6 +1,4 @@
-import { tagName } from '@ember-decorators/component';
-import { A } from '@ember/array';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 
 /**
   Renders a `<tr>` element and yields cell component.
@@ -17,34 +15,21 @@ import Component from '@ember/component';
   @yield {object} row
   @yield {Component} row.cell
 */
-@tagName('')
-class TFootRow extends Component {
-  theme;
-
-  parent;
-
-  columns;
-
-  cells = A();
 
+class TFootRow extends Component {
+  cells = [];
   registerCell(cell) {
-    let columns = this.get('columns');
-    let prop = cell.get('prop');
-
-    if (prop) {
-      let column = columns.findBy('prop', prop);
-      cell.set('column', column);
-    } else {
-      let index = this.get('cells.length');
-      let column = columns[index];
-      cell.set('column', column);
-    }
-
-    this.get('cells').addObject(cell);
+    let columns = this.args.columns;
+    let index = this.cells.length;
+    let column = columns[index];
+    this.cells.push(cell);
+    return column;
   }
 
   unregisterCell(cell) {
-    this.get('cells').removeObject(cell);
+    let cells = this.cells;
+    let index = cells.indexOf(cell);
+    cells.splice(index, 1);
   }
 }
 

diff --git a/addon/components/yeti-table/tfoot/row/cell.hbs b/addon/components/yeti-table/tfoot/row/cell.hbs
@@ -1,4 +1,4 @@
-{{#if this.visible}}
+{{#if this.column.visible}}
   <td class="{{@class}} {{@theme.tfootCell}}" ...attributes>
     {{yield}}
   </td>

diff --git a/addon/components/yeti-table/tfoot/row/cell.js b/addon/components/yeti-table/tfoot/row/cell.js
@@ -1,6 +1,4 @@
-import { tagName } from '@ember-decorators/component';
-import Component from '@ember/component';
-import { reads } from '@ember/object/computed';
+import Component from '@glimmer/component';
 
 /**
   Renders a `<td>` element and yields for the developer to supply content.
@@ -16,33 +14,19 @@ import { reads } from '@ember/object/computed';
   ```
 
  */
-@tagName('')
-class TFootCell extends Component {
-  theme;
-
-  parent;
 
-  /**
-   * Controls the visibility of the current cell. Keep in mind that this property
-   * won't just hide the column using css. The DOM for the column will be removed.
-   * Defaults to the `visible` argument of the corresponding column.
-   */
-  @reads('column.visible')
-  visible;
+class TFootCell extends Component {
+  column;
 
-  init() {
-    super.init(...arguments);
+  constructor() {
+    super(...arguments);
 
-    if (this.get('parent')) {
-      this.get('parent').registerCell(this);
-    }
+    this.column = this.args.parent?.registerCell(this);
   }
 
-  willDestroyElement() {
-    super.willDestroyElement(...arguments);
-    if (this.get('parent')) {
-      this.get('parent').unregisterCell(this);
-    }
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.args.parent?.unregisterCell(this);
   }
 }