convert tfoot/row/cell to glimmer

miguelcobain · Feb 4, 2021 · 08a968a · 08a968a
1 parent ca47d88
commit 08a968a
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 70 deletions.
diff --git a/addon/components/yeti-table/tfoot.js b/addon/components/yeti-table/tfoot.js
@@ -1,6 +1,6 @@
-import { tagName } from '@ember-decorators/component';
 import { deprecate } from '@ember/application/deprecations';
-import Component from '@ember/component';
+
+import Component from '@glimmer/component';
 
 /**
   Renders a `<tfoot>` element and yields the row component.
@@ -17,25 +17,22 @@ import Component from '@ember/component';
   @yield {object} footer
   @yield {Component} footer.row
 */
-@tagName('')
 class TFoot extends Component {
-  theme;
-
-  parent;
-
-  columns;
-
-  init() {
-    super.init(...arguments);
+  constructor() {
+    super(...arguments);
 
-    deprecate('The yielded `foot` component has been deprecated. Please use `tfoot` instead.', !this.shouldDeprecate, {
-      id: 'ember-yeti-table:foot-component',
-      until: '2.0.0',
-      for: 'ember-yeti-table',
-      since: {
-        enable: '1.4.0'
+    deprecate(
+      'The yielded `foot` component has been deprecated. Please use `tfoot` instead.',
+      !this.args.shouldDeprecate,
+      {
+        id: 'ember-yeti-table:foot-component',
+        until: '2.0.0',
+        for: 'ember-yeti-table',
+        since: {
+          enable: '1.4.0'
+        }
       }
-    });
+    );
   }
 }
 

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);
   }
 }