feat(table-header): custom icon components (#489)

* feat(custom-icons): base files

* fix(column-base): sort icon displayed with sortable:false

* feat(dummy): cookbook for custom-sort-icon

* loosen ember-one-way-controls version requirement

* yarn.lock updates

* [BUGFIX release]: Added check for target column is droppable (#496)

* [chore]: Update ember-truth-helpers to latest version. (#497)

* [BUGFIX release]: Ensure the drop target remains properly identified (#418)

* fix(feedback): iconComponent comments, iconComponent test

* fix(feedback-v2): iconComponent comments, iconComponent test

addon/mixins/table-header.js

@@ -106,6 +106,15 @@ export default Mixin.create({
    */
   iconDescending: '',
 
+  /**
+   * Custom sorting component name to use instead of the default `<i class="lt-sort-icon"></i>` template.
+   * See `iconSortable`, `iconAsending`, or `iconDescending`.
+   * @property iconComponent
+   * @type {String}
+   * @default false
+   */
+  iconComponent: null,
+
   /**
    * ID of main table component. Used to generate divs for ember-wormhole
    * @type {String}
@@ -117,8 +126,8 @@ export default Mixin.create({
   subColumns: computed.readOnly('table.visibleSubColumns'),
   columns: computed.readOnly('table.visibleColumns'),
 
-  sortIcons: computed('iconSortable', 'iconAscending', 'iconDescending', function() {
-    return this.getProperties(['iconSortable', 'iconAscending', 'iconDescending']);
+  sortIcons: computed('iconSortable', 'iconAscending', 'iconDescending', 'iconComponent', function() {
+    return this.getProperties(['iconSortable', 'iconAscending', 'iconDescending', 'iconComponent']);
   }).readOnly(),
 
   init() {

addon/templates/components/columns/base.hbs

@@ -2,7 +2,9 @@
   {{component column.component column=column table=table tableActions=tableActions extra=extra sortIcons=sortIcons}}
 {{else}}
   {{label}}
-  {{#if sortIconProperty}}
+  {{#if (and sortIcons.iconComponent sortIconProperty)}}
+    {{component sortIcons.iconComponent sortIcons=sortIcons sortIconProperty=sortIconProperty}}
+  {{else if sortIconProperty}}
     <i class="lt-sort-icon {{get sortIcons sortIconProperty}}"></i>
   {{/if}}
 {{/if}}

tests/dummy/app/components/cookbook/custom-sort-icon-table.js

@@ -0,0 +1,34 @@
+// BEGIN-SNIPPET custom-sort-icon-table
+import Component from '@ember/component';
+import TableCommon from '../../mixins/table-common';
+import { computed } from '@ember/object';
+
+export default Component.extend(TableCommon, {
+  columns: computed(function() {
+    return [{
+      label: 'Avatar',
+      valuePath: 'avatar',
+      width: '60px',
+      sortable: false,
+      cellComponent: 'user-avatar'
+    }, {
+      label: 'First Name',
+      valuePath: 'firstName',
+      width: '150px'
+    }, {
+      label: 'Last Name',
+      valuePath: 'lastName',
+      width: '150px'
+    }, {
+      label: 'Address',
+      valuePath: 'address'
+    }, {
+      label: 'State',
+      valuePath: 'state'
+    }, {
+      label: 'Country',
+      valuePath: 'country'
+    }];
+  })
+});
+// END-SNIPPET

tests/dummy/app/components/materialize-icon.js

@@ -0,0 +1,9 @@
+// BEGIN-SNIPPET materialize-icon
+import Component from '@ember/component';
+import layout from '../templates/components/materialize-icon';
+
+export default Component.extend({
+  tagName: 'span',
+  layout
+});
+// END-SNIPPET

tests/dummy/app/index.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,500,300,100|Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="{{rootURL}}assets/dummy.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 
     {{content-for "head-footer"}}
   </head>

tests/dummy/app/router.js

@@ -28,6 +28,7 @@ Router.map(function() {
     this.route('custom-row');
     this.route('table-actions');
     this.route('horizontal-scrolling');
+    this.route('custom-sort-icon');
   });
 });
 

tests/dummy/app/routes/cookbook/custom-sort-icon.js

@@ -0,0 +1 @@
+export { default } from '../table-route';

tests/dummy/app/templates/application.hbs

@@ -71,6 +71,9 @@
             {{#link-to 'cookbook.pagination' tagName="li"}}
               {{link-to 'Pagination' 'cookbook.pagination'}}
             {{/link-to}}
+            {{#link-to 'cookbook.custom-sort-icon' tagName="li"}}
+              {{link-to 'Custom Sort Icon' 'cookbook.custom-sort-icon'}}
+            {{/link-to}}
           </ul>
         {{/link-to}}
         <li><a href="docs">Documentation</a></li>

tests/dummy/app/templates/components/cookbook/custom-sort-icon-table.hbs

@@ -0,0 +1,26 @@
+{{!-- BEGIN-SNIPPET custom-sort-icon-table --}}
+{{#light-table table height='65vh' as |t|}}
+
+  {{t.head
+    onColumnClick=(action 'onColumnClick')
+    iconSortable='unfold_more'
+    iconAscending='keyboard_arrow_up'
+    iconDescending='keyboard_arrow_down'
+    iconComponent='materialize-icon'
+    fixed=true
+  }}
+
+  {{#t.body
+    canSelect=false
+    onScrolledToBottom=(action 'onScrolledToBottom')
+    as |body|
+  }}
+    {{#if isLoading}}
+      {{#body.loader}}
+        {{table-loader}}
+      {{/body.loader}}
+    {{/if}}
+  {{/t.body}}
+
+{{/light-table}}
+{{!-- END-SNIPPET --}}

tests/dummy/app/templates/components/materialize-icon.hbs

@@ -0,0 +1,3 @@
+{{!-- BEGIN-SNIPPET materialize-icon --}}
+<i class="lt-sort-icon material-icons" style="height:0px;">{{get sortIcons sortIconProperty}}</i>
+{{!-- END-SNIPPET --}}

tests/dummy/app/templates/cookbook/custom-sort-icon.hbs

@@ -0,0 +1,12 @@
+{{#code-panel
+  title="Custom Sort Icon"
+  snippets=(array
+    "custom-sort-icon-table.js"
+    "table-common.js"
+    "custom-sort-icon-table.hbs"
+    "user-avatar.hbs"
+    "table-loader.hbs"
+    "materialize-icon.hbs"
+)}}
+  {{cookbook/custom-sort-icon-table model=model}}
+{{/code-panel}}

tests/integration/components/lt-head-test.js

@@ -4,6 +4,8 @@ import hbs from 'htmlbars-inline-precompile';
 import Table from 'ember-light-table';
 import Columns, { GroupedColumns } from '../../helpers/table-columns';
 import hasClass from '../../helpers/has-class';
+import Component from '@ember/component';
+import { isPresent } from '@ember/utils';
 
 moduleForComponent('lt-head', 'Integration | Component | lt head', {
   integration: true
@@ -92,6 +94,39 @@ test('render sort icons', function(assert) {
   assert.notOk(hasClass(sortIcon, 'fa-sort-asc'));
 });
 
+test('custom iconComponent has arguments', function(assert) {
+  const sortableColumns = Columns.filter((column) => {
+    return column.sortable !== false;
+  });
+
+  assert.expect(6 * sortableColumns.length);
+  const iconSortable = 'unfold_more';
+  const iconAscending = 'fa-sort-asc';
+  const iconDescending = 'fa-sort-desc';
+  const iconComponent = 'custom-icon-component';
+
+  this.setProperties({
+    iconSortable,
+    iconAscending,
+    iconDescending,
+    iconComponent,
+    table: new Table(Columns)
+  });
+  this.register(`component:${iconComponent}`, Component.extend({
+    init() {
+      this._super(...arguments);
+      assert.ok(isPresent(this.get('sortIconProperty')));
+      assert.ok(isPresent(this.get('sortIcons')));
+      assert.equal(this.get('sortIcons.iconSortable'), iconSortable);
+      assert.equal(this.get('sortIcons.iconAscending'), iconAscending);
+      assert.equal(this.get('sortIcons.iconDescending'), iconDescending);
+      assert.equal(this.get('sortIcons.iconComponent'), iconComponent);
+    }
+  }));
+
+  this.render(hbs`{{lt-head table=table renderInPlace=true iconSortable=iconSortable iconAscending=iconAscending iconDescending=iconDescending iconComponent=iconComponent}}`);
+}),
+
 test('double click', function(assert) {
   this.set('table', new Table(Columns));
   this.on('onColumnDoubleClick', (column) => {