refactor: remove base class and modernize

alexdiliberto · Jul 29, 2019 · 8885d0f · 8885d0f
1 parent cdf7a10
commit 8885d0f
Show file tree

Hide file tree

Showing 34 changed files with 266 additions and 438 deletions.
diff --git a/addon/components/-private/base.js b/addon/components/-private/base.js
diff --git a/addon/components/t-add.js b/addon/components/t-add.js
@@ -1,7 +1,8 @@
-import BaseTransformiconComponent from './-private/base';
-import { computed, get } from '@ember/object';
-import { className, classNames, layout } from '@ember-decorators/component';
+import Component from '@ember/component';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
 import { alias } from '@ember/object/computed';
+import { layout, tagName } from '@ember-decorators/component';
 import template from '../templates/components/t-add';
 
 const DEFAULT_ANIMATION = 'minus';
@@ -12,27 +13,24 @@ const DEFAULT_ANIMATION = 'minus';
   PUBLIC
     * `animation` string - Set the add animation type (alias: `a`).
       * types - `minus` | `check`
-    * `is-added` boolean - Set initial open added state.
-    * `onclick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isAdded`, which is a boolean type indicating if the current state is pending add.
+    * `isAdded` boolean - Set initial open added state.
+    * `onClick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isAdded`, which is a boolean type indicating if the current state is pending add.
 
   ```hbs
   {{! These are functionally equivalent}}
   <TAdd />
   <TAdd @a='minus' />
   <TAdd @animation='minus' />
-  <TAdd @is-added={{false}} @animation='minus' />
+  <TAdd @isAdded={{false}} @animation='minus' />
   ```
 */
 @layout(template)
-@classNames('tcon-plus')
-export default class TAddComponent extends BaseTransformiconComponent {
-  label = 'add item';
-  initialState = 'is-added';
-
+@tagName('')
+export default class TAddComponent extends Component {
   /**
    * Animation CSS classname lookup table for the Add transformicon
    */
-  _animationTypeTable = {
+  animationTypeTable = {
     'minus': 'tcon-plus--minus',
     'check': 'tcon-plus--check'
   };
@@ -48,42 +46,22 @@ export default class TAddComponent extends BaseTransformiconComponent {
    * Flag to indicate the state of this transformicon
    * @type {boolean}
    */
-  // 'is-added' = false
+  isAdded = false;
 
   /**
    * Alias for {@link animation}
    * @type {string}
    */
   @alias('animation') a;
 
-  constructor() {
-    super(...arguments);
+  @action
+  clickHandler() {
+    this.toggleProperty('isAdded');
 
-    // NOTE: ESDoc does not currently support parsing a quoted and dasherized class field. Adding
-    // here from the constructor as a temporary workaround.
-    // https://github.com/esdoc/esdoc/issues/519#issuecomment-417895936
-    this['is-added'] = false;
-  }
+    if (this.onClick) {
+      assert(`[ember-transformicons] ${this.toString()} \`onClick\` action handler must be a valid closure action`, typeof this.onClick === 'function');
 
-  /**
-   * Get the CSS classname corresponding to the component's current {@link animation} type
-   * @type {string}
-   */
-  @className
-  @computed('animation')
-  get animationType() {
-    let anim = get(this, 'animation');
-    return get(this._animationTypeTable, anim);
-  }
-
-  /**
-   * Get the {@link transformClass} CSS classname representing the `is-added` toggled state
-   * for this transformicon
-   * @type {string|boolean}
-   */
-  @className
-  @computed('is-added')
-  get isAdded() {
-    return get(this, 'is-added') ? get(this, 'transformClass') : false;
+      this.onClick(this.isAdded);
+    }
   }
 }
diff --git a/addon/components/t-form.js b/addon/components/t-form.js
@@ -1,50 +1,39 @@
-import BaseTransformiconComponent from './-private/base';
-import { computed, get } from '@ember/object';
-import { className, classNames, layout } from '@ember-decorators/component';
+import Component from '@ember/component';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
+import { layout, tagName } from '@ember-decorators/component';
 import template from '../templates/components/t-form';
 
 /**
   Form Transformicon
 
   PUBLIC
-    * `is-searching` boolean - Set initial searching state.
-    * `onclick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isSearching`, which is a boolean type indicating if the current state is searching or not searching.
+    * `isSearching` boolean - Set initial searching state.
+    * `onClick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isSearching`, which is a boolean type indicating if the current state is searching or not searching.
 
   ```hbs
     {{! These are functionally equivalent}}
     <TForm />
-    <TForm @is-searching={{false}} />
+    <TForm @isSearching={{false}} />
   ```
 */
 @layout(template)
-@classNames('tcon-search--xcross')
-export default class TFormComponent extends BaseTransformiconComponent {
-  label = 'toggle search';
-  initialState = 'is-searching';
-
+@tagName('')
+export default class TFormComponent extends Component {
   /**
    * Flag to indicate the state of this transformicon
    * @type {boolean}
    */
-  // 'is-searching' = false;
+  isSearching = false;
 
-  constructor() {
-    super(...arguments);
+  @action
+  clickHandler() {
+    this.toggleProperty('isSearching');
 
-    // NOTE: ESDoc does not currently support parsing a quoted and dasherized class field. Adding
-    // here from the constructor as a temporary workaround.
-    // https://github.com/esdoc/esdoc/issues/519#issuecomment-417895936
-    this['is-searching'] = false;
-  }
+    if (this.onClick) {
+      assert(`[ember-transformicons] ${this.toString()} \`onClick\` action handler must be a valid closure action`, typeof this.onClick === 'function');
 
-  /**
-   * Get the {@link transformClass} CSS classname representing the `is-searching` toggled state
-   * for this transformicon
-   * @type {string|boolean}
-   */
-  @className
-  @computed('is-searching')
-  get isSearching() {
-    return get(this, 'is-searching') ? get(this, 'transformClass') : false;
+      this.onClick(this.isSearching);
+    }
   }
 }
diff --git a/addon/components/t-grid.js b/addon/components/t-grid.js
@@ -1,7 +1,8 @@
-import BaseTransformiconComponent from './-private/base';
-import { computed, get } from '@ember/object';
-import { className, classNames, layout } from '@ember-decorators/component';
+import Component from '@ember/component';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
 import { alias } from '@ember/object/computed';
+import { layout, tagName } from '@ember-decorators/component';
 import template from '../templates/components/t-grid';
 
 const DEFAULT_ANIMATION = 'rearrange';
@@ -12,26 +13,24 @@ const DEFAULT_ANIMATION = 'rearrange';
   PUBLIC - Optional parameters:
     * `animation` string - Set the grid animation type  (alias: `a`).
       * types - `rearrange` | `collapse`
-    * `is-open` boolean - Set initial open grid state.
-    * `onclick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isOpen`, which is a boolean type indicating if the current state is open or closed.
+    * `isOpen` boolean - Set initial open grid state.
+    * `onClick` closure action - The name of your consuming application's component/controller/route action to handle the transformicon click. Returned with 1 parameter `isOpen`, which is a boolean type indicating if the current state is open or closed.
 
   ```hbs
     {{! These are functionally equivalent}}
     <TGrid />
     <TGrid @a='rearrange' />
     <TGrid @animation='rearrange' />
-    <TGrid @is-open={{false}} @animation='rearrange' />
+    <TGrid @isOpen={{false}} @animation='rearrange' />
   ```
 */
 @layout(template)
-@classNames('tcon-grid')
-export default class TGridComponent extends BaseTransformiconComponent {
-  label = 'toggle grid';
-
+@tagName('')
+export default class TGridComponent extends Component {
   /**
    * Animation CSS classname lookup table for the Grid transformicon
    */
-  _animationTypeTable = {
+  animationTypeTable = {
     'rearrange': 'tcon-grid--rearrange',
     'collapse': 'tcon-grid--collapse'
   };
@@ -47,42 +46,22 @@ export default class TGridComponent extends BaseTransformiconComponent {
    * Flag to indicate the state of this transformicon
    * @type {boolean}
    */
-  // 'is-open' = false;
+  isOpen = false;
 
   /**
    * Alias for {@link animation}
    * @type {string}
    */
   @alias('animation') a;
 
-  constructor() {
-    super(...arguments);
+  @action
+  clickHandler() {
+    this.toggleProperty('isOpen');
 
-    // NOTE: ESDoc does not currently support parsing a quoted and dasherized class field. Adding
-    // here from the constructor as a temporary workaround.
-    // https://github.com/esdoc/esdoc/issues/519#issuecomment-417895936
-    this['is-open'] = false;
-  }
+    if (this.onClick) {
+      assert(`[ember-transformicons] ${this.toString()} \`onClick\` action handler must be a valid closure action`, typeof this.onClick === 'function');
 
-  /**
-   * Get the CSS classname corresponding to the component's current {@link animation} type
-   * @type {string}
-   */
-  @className
-  @computed('animation')
-  get animationType() {
-    let anim = get(this, 'animation');
-    return get(this._animationTypeTable, anim);
-  }
-
-  /**
-   * Get the {@link transformClass} CSS classname representing the `is-open` toggled state
-   * for this transformicon
-   * @type {string|boolean}
-   */
-  @className
-  @computed('is-open')
-  get isOpen() {
-    return get(this, 'is-open') ? get(this, 'transformClass') : false;
+      this.onClick(this.isOpen);
+    }
   }
 }
diff --git a/addon/components/t-loader.js b/addon/components/t-loader.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { attribute, classNames, layout, tagName } from '@ember-decorators/component';
+import { layout, tagName } from '@ember-decorators/component';
 import template from '../templates/components/t-loader';
 
 /**
@@ -10,8 +10,5 @@ import template from '../templates/components/t-loader';
   ```
 */
 @layout(template)
-@tagName('span')
-@classNames('tcon-loader--spinner360')
-export default class TLoaderComponent extends Component {
-  @attribute('aria-label') label = 'loading';
-}
+@tagName('')
+export default class TLoaderComponent extends Component {}