remove usage of did insert / update

1024pix · Apr 18, 2024 · 77c8caf · 77c8caf
1 parent 7182932
commit 77c8caf
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 86 deletions.
diff --git a/addon/common/add-dynamic-style-tag.js b/addon/common/add-dynamic-style-tag.js
diff --git a/addon/components/pix-filterable-and-searchable-select.hbs b/addon/components/pix-filterable-and-searchable-select.hbs
@@ -28,7 +28,6 @@
       <:default as |option|>{{option.label}}</:default>
     </PixMultiSelect>
     <PixSelect
-      {{did-insert this.setSelectWidth}}
       @id={{this.pixSelectId}}
       @placeholder={{@placeholder}}
       @value={{@value}}

diff --git a/addon/components/pix-filterable-and-searchable-select.js b/addon/components/pix-filterable-and-searchable-select.js
@@ -1,14 +1,36 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
-import { createClass } from '../common/add-dynamic-style-tag';
 
 export default class PixFilterableAndSearchableSelect extends Component {
+  @service elementHelper;
   @tracked selectedCategories = [];
-  mainId = 'pix-pfass-' + guidFor(this);
-  pixSelectId = 'pix-pfass-select-' + guidFor(this);
-  pixMultiSelectId = 'pix-pfass-multi-select-' + guidFor(this);
+
+  constructor(...args) {
+    super(...args);
+    this.mainId = 'pix-pfass-' + guidFor(this);
+    this.pixSelectId = 'pix-pfass-select-' + guidFor(this);
+    this.pixMultiSelectId = 'pix-pfass-multi-select-' + guidFor(this);
+
+    this.elementHelper.waitForElement(this.pixSelectId).then((element) => {
+      const baseFontRemRatio = Number(
+        getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
+      );
+
+      const multiSelectWidth = document
+        .getElementById(this.pixMultiSelectId)
+        .getBoundingClientRect().width;
+
+      const selectWidth = Math.ceil(multiSelectWidth / baseFontRemRatio);
+
+      const className = `sizing-select-${this.pixSelectId}`;
+      this.elementHelper.createClass(`.${className}`, `width: calc(100% - ${selectWidth}rem);`);
+
+      element.className = element.className + ' ' + className;
+    });
+  }
 
   @action
   selectCategories(categories) {
@@ -47,22 +69,4 @@ export default class PixFilterableAndSearchableSelect extends Component {
 
     return selectableOptions;
   }
-
-  @action
-  setSelectWidth(element) {
-    const baseFontRemRatio = Number(
-      getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
-    );
-
-    const multiSelectWidth = document
-      .getElementById(this.pixMultiSelectId)
-      .getBoundingClientRect().width;
-
-    const selectWidth = Math.ceil(multiSelectWidth / baseFontRemRatio);
-
-    const className = `sizing-select-${this.pixSelectId}`;
-    createClass(`.${className}`, `width: calc(100% - ${selectWidth}rem);`);
-
-    element.className = element.className + ' ' + className;
-  }
 }
diff --git a/addon/components/pix-pagination.hbs b/addon/components/pix-pagination.hbs
@@ -1,4 +1,4 @@
-<footer class={{this.isCondensed}} {{did-update this.checkCurrentPageAgainstPageCount @pagination}}>
+<footer class={{this.isCondensed}}>
   <section class="pix-pagination__size">
     <span class="pagination-size__label">{{this.beforeResultsPerPage}}</span>
     <PixSelect

diff --git a/addon/components/pix-pagination.js b/addon/components/pix-pagination.js
@@ -60,7 +60,14 @@ export default class PixPagination extends Component {
   }
 
   get currentPage() {
-    return this.args.pagination ? this.args.pagination.page : 1;
+    const currentPage = this.args.pagination ? this.args.pagination.page : 1;
+    const pageCount = this.args.pagination.pageCount;
+
+    if (currentPage > pageCount) {
+      this.router.replaceWith({ queryParams: { pageNumber: pageCount } });
+    }
+
+    return currentPage;
   }
 
   get pageCount() {
@@ -118,13 +125,4 @@ export default class PixPagination extends Component {
   goToPreviousPage() {
     this.router.replaceWith({ queryParams: { pageNumber: this.previousPage } });
   }
-
-  @action
-  checkCurrentPageAgainstPageCount() {
-    const pageCount = this.args.pagination.pageCount;
-    if (pageCount === 0) return;
-    if (this.currentPage > pageCount) {
-      this.router.replaceWith({ queryParams: { pageNumber: pageCount } });
-    }
-  }
 }
diff --git a/addon/components/pix-select.hbs b/addon/components/pix-select.hbs
@@ -4,7 +4,6 @@
   {{on-click-outside this.hideDropdown}}
   {{on-arrow-down-up-action this.listId this.showDropdown this.isExpanded}}
   {{on-escape-action this.hideDropdown this.selectId}}
-  {{did-insert this.setSelectWidth}}
   {{on "keydown" this.lockTab}}
   ...attributes
 >
@@ -47,7 +46,6 @@
       <div
         {{popover}}
         class="pix-select__dropdown{{unless this.isExpanded ' pix-select__dropdown--closed'}}"
-        id={{this.dropDownId}}
         {{on "transitionend" this.focus}}
       >
         {{#if @isSearchable}}

diff --git a/addon/components/pix-select.js b/addon/components/pix-select.js
@@ -1,30 +1,47 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
-import { createClass } from '../common/add-dynamic-style-tag';
 
 export default class PixSelect extends Component {
+  @service elementHelper;
   @tracked isExpanded = false;
   @tracked searchValue = null;
-  searchId = 'search-input-' + guidFor(this);
 
   constructor(...args) {
     super(...args);
 
     const categories = [];
+
+    this.searchId = 'search-input-' + guidFor(this);
+    this.selectId = this.args.id ? this.args.id : 'select-' + guidFor(this);
+    this.listId = `listbox-${this.selectId}`;
+
     this.args.options.forEach((element) => {
       if (!categories.includes(element.category) && element.category !== undefined) {
         categories.push(element.category);
       }
     });
-
     this.displayCategory = categories.length > 0;
-  }
 
-  get selectId() {
-    if (this.args.id) return this.args.id;
-    return 'select-' + guidFor(this);
+    this.elementHelper.waitForElement(this.selectId).then((elementList) => {
+      if (!this.args.isComputeWidthDisabled) {
+        const baseFontRemRatio = Number(
+          getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
+        );
+        const checkIconWidth = 1.125 * baseFontRemRatio;
+        const listWidth = elementList.getBoundingClientRect().width;
+        const selectWidth = (listWidth + checkIconWidth) / baseFontRemRatio;
+
+        const className = `sizing-select-${this.selectId}`;
+        this.elementHelper.createClass(`.${className}`, `width: ${selectWidth}rem;`);
+
+        const element = document.getElementById(`container-${this.selectId}`);
+
+        element.className = element.className + ' ' + className;
+      }
+    });
   }
 
   get displayDefaultOption() {
@@ -51,14 +68,6 @@ export default class PixSelect extends Component {
     return this.isExpanded ? 'true' : 'false';
   }
 
-  get listId() {
-    return `listbox-${this.selectId}`;
-  }
-
-  get dropDownId() {
-    return `dropdown-${this.selectId}`;
-  }
-
   get placeholder() {
     if (!this.args.value) return this.args.placeholder;
     const option = this.args.options.find((option) => option.value === this.args.value);
@@ -155,23 +164,4 @@ export default class PixSelect extends Component {
       }
     }
   }
-
-  @action
-  setSelectWidth() {
-    if (!this.args.isComputeWidthDisabled) {
-      const baseFontRemRatio = Number(
-        getComputedStyle(document.querySelector('html')).fontSize.match(/\d+(\.\d+)?/)[0],
-      );
-      const checkIconWidth = 1.125 * baseFontRemRatio;
-      const listWidth = document.getElementById(this.listId).getBoundingClientRect().width;
-      const selectWidth = (listWidth + checkIconWidth) / baseFontRemRatio;
-
-      const className = `sizing-select-${this.selectId}`;
-      createClass(`.${className}`, `width: ${selectWidth}rem;`);
-
-      const element = document.getElementById(`container-${this.selectId}`);
-
-      element.className = element.className + ' ' + className;
-    }
-  }
 }
diff --git a/app/services/element-helper.js b/app/services/element-helper.js
@@ -0,0 +1,32 @@
+import Service from '@ember/service';
+
+export default class ElementService extends Service {
+  waitForElement(id) {
+    return new Promise((resolve) => {
+      if (document.getElementById(id)) {
+        return resolve(document.getElementById(id));
+      }
+
+      const observer = new MutationObserver(() => {
+        if (document.getElementById(id)) {
+          resolve(document.getElementById(id));
+          observer.disconnect();
+        }
+      });
+
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+    });
+  }
+
+  createClass(name, rules) {
+    var style = document.createElement('style');
+    style.type = 'text/css';
+    document.getElementsByTagName('head')[0].appendChild(style);
+
+    if (!(style.sheet || {}).insertRule) (style.styleSheet || style.sheet).addRule(name, rules);
+    else style.sheet.insertRule(name + '{' + rules + '}', 0);
+  }
+}
diff --git a/tests/integration/components/pix-filterable-and-searchable-select-test.js b/tests/integration/components/pix-filterable-and-searchable-select-test.js
@@ -256,7 +256,7 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
     const screen = await render(hbs`<PixFilterableAndSearchableSelect
   @placeholder={{this.placeholder}}
   @options={{this.options}}
-  @value={{'2'}}
+  @value='2'
   @onChange={{this.onChange}}
   @categoriesId={{this.categoriesId}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
@@ -286,7 +286,7 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
       const screen = await render(hbs`<PixFilterableAndSearchableSelect
   @placeholder={{this.placeholder}}
   @options={{this.options}}
-  @value={{'2'}}
+  @value='2'
   @onChange={{this.onChange}}
   @categoriesId={{this.categoriesId}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
@@ -314,7 +314,7 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
   @subLabel={{this.subLabel}}
   @placeholder={{this.placeholder}}
   @options={{this.options}}
-  @value={{'2'}}
+  @value='2'
   @onChange={{this.onChange}}
   @categoriesId={{this.categoriesId}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
@@ -339,7 +339,7 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
       const screen = await render(hbs`<PixFilterableAndSearchableSelect
   @placeholder={{this.placeholder}}
   @options={{this.options}}
-  @value={{'2'}}
+  @value='2'
   @onChange={{this.onChange}}
   @categoriesId={{this.categoriesId}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
@@ -369,7 +369,7 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
     const screen = await render(hbs`<PixFilterableAndSearchableSelect
   @placeholder={{this.placeholder}}
   @options={{this.options}}
-  @value={{'2'}}
+  @value='2'
   @onChange={{this.onChange}}
   @categoriesId={{this.categoriesId}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}

diff --git a/tests/integration/components/pix-select-test.js b/tests/integration/components/pix-select-test.js
@@ -144,7 +144,7 @@ module('Integration | Component | PixSelect', function (hooks) {
       test('it should display list, focus selected element on arrow up press', async function (assert) {
         // given
         const screen =
-          await render(hbs`<PixSelect @options={{this.options}} @value={{'3'}} @placeholder={{this.placeholder}}><:label
+          await render(hbs`<PixSelect @options={{this.options}} @value='3' @placeholder={{this.placeholder}}><:label
   >{{this.label}}</:label></PixSelect>`);
 
         // when
@@ -164,7 +164,7 @@ module('Integration | Component | PixSelect', function (hooks) {
       test('it should display list, focus selected element on arrow down press', async function (assert) {
         // given
         const screen =
-          await render(hbs`<PixSelect @options={{this.options}} @value={{'2'}} @placeholder={{this.placeholder}}><:label
+          await render(hbs`<PixSelect @options={{this.options}} @value='2' @placeholder={{this.placeholder}}><:label
   >{{this.label}}</:label></PixSelect>`);
 
         // when
@@ -184,7 +184,7 @@ module('Integration | Component | PixSelect', function (hooks) {
       test('it should display list, focus selected element on space press', async function (assert) {
         // given
         const screen =
-          await render(hbs`<PixSelect @options={{this.options}} @value={{'1'}} @placeholder={{this.placeholder}}><:label
+          await render(hbs`<PixSelect @options={{this.options}} @value='1' @placeholder={{this.placeholder}}><:label
   >{{this.label}}</:label></PixSelect>`);
 
         // when