Merge pull request #28 from AdamWard1995/fix_selection

Make selection behaviour match ember-frost-list

addon/components/frost-fixed-table.js

@@ -16,6 +16,7 @@ export default Component.extend({
 
   // == Keyword Properties ====================================================
 
+  classNameBindings: ['_isShiftDown:shift-down'],
   layout,
 
   // == PropTypes =============================================================
@@ -32,6 +33,7 @@ export default Component.extend({
     onSelectionChange: PropTypes.func,
 
     // state
+    _isShiftDown: PropTypes.bool,
     _itemComparator: PropTypes.func,
 
     _rangeState: PropTypes.shape({
@@ -421,10 +423,26 @@ export default Component.extend({
     }
   },
 
+  setShift (event) {
+    if (!this.isDestroyed) {
+      this.set('_isShiftDown', event.shiftKey)
+    }
+  },
+
   // == DOM Events ============================================================
 
   // == Lifecycle Hooks =======================================================
 
+  init () {
+    this._super(...arguments)
+    this._keyHandler = this.setShift.bind(this)
+    $(document).on(`keyup.${this.elementId} keydown.${this.elementId}`, this._keyHandler)
+  },
+
+  willDestroy () {
+    $(document).off(`keyup.${this.elementId} keydown.${this.elementId}`, this._keyHandler)
+  },
+
   /**
    * Set up synced scrolling as well as calculating padding for middle sections
    */
@@ -454,8 +472,10 @@ export default Component.extend({
       this.onCallback({action, args, col, row})
     },
 
-    _clickRow (row) {
-      this.$(`${this.get('_bodyLeftSelector')} .frost-table-row`).eq(row).trigger('click')
+    _clickRow (row, event) {
+      const leftSectionRow = this.$(`${this.get('_bodyLeftSelector')} .frost-table-row`).eq(row)
+      event.target = leftSectionRow[0]
+      leftSectionRow.trigger(event)
     },
 
     _select ({isRangeSelect, isSpecificSelect, item}) {

addon/components/frost-table-row.js

@@ -3,14 +3,14 @@
  */
 
 import Ember from 'ember'
-const {isEmpty} = Ember
+const {ViewUtils, isEmpty} = Ember
+const {isSimpleClick} = ViewUtils
 import computed, {readOnly} from 'ember-computed-decorators'
 import {Component} from 'ember-frost-core'
 import {ColumnPropType, ItemPropType} from 'ember-frost-table/typedefs'
 import {PropTypes} from 'ember-prop-types'
 
 import layout from '../templates/components/frost-table-row'
-import {click} from '../utils/selection'
 
 export default Component.extend({
   // == Dependencies ==========================================================
@@ -64,7 +64,20 @@ export default Component.extend({
   // == DOM Events ============================================================
 
   click (event) {
-    click(event, this.onSelect, this.get('item'))
+    const isRangeSelect = event.shiftKey
+    const isSpecificSelect = false
+
+    // Only process simple clicks or clicks with the acceptable modifiers
+    if (isSimpleClick(event) || isRangeSelect) {
+      event.preventDefault()
+      event.stopPropagation()
+
+      this.onSelect({
+        isRangeSelect,
+        isSpecificSelect,
+        item: this.get('item')
+      })
+    }
   },
 
   // == Lifecycle Hooks =======================================================

addon/components/frost-table.js

@@ -1,3 +1,4 @@
+/* global $ */
 /**
  * Component definition for the frost-table component
  */
@@ -118,6 +119,17 @@ export default Component.extend({
 
   // == Lifecycle Hooks =======================================================
 
+  init () {
+    this._super(...arguments)
+    this._keyHandler = this.setShift.bind(this)
+    $(document).on(`keyup.${this.elementId} keydown.${this.elementId}`, this._keyHandler)
+  },
+
+  willDestroyElement () {
+    this._super(...arguments)
+    $(document).off(`keyup.${this.elementId} keydown.${this.elementId}`, this._keyHandler)
+  },
+
   didRender () {
     const selectable = this.get('_isSelectable')
     let totalWidth = 0

app/styles/ember-frost-table/_frost-fixed-table.scss

@@ -142,4 +142,9 @@ $frost-fixed-table-selected-cell-border-width: 1px;
     flex: 1 0 auto;
     vertical-align: middle;
   }
+
+  &.shift-down {
+    // Range select doesn't select text
+    user-select: none;
+  }
 }

tests/helpers/selection.js

@@ -0,0 +1,40 @@
+/* global $ */
+import {expect} from 'chai'
+import {$hook} from 'ember-hook'
+
+function createRangeSelectEvent () {
+  const e = $.Event('click')
+  e.shiftKey = true
+  return e
+}
+
+export function assertRowsSelected (rowHook, ...rowNumbers) {
+  const rows = $hook(rowHook)
+  let remainingRows = rows
+  for (let rowNumber of rowNumbers) {
+    const row = rows.eq(rowNumber)
+    expect(row).to.have.class('is-selected')
+    remainingRows = remainingRows.not(row)
+  }
+
+  // ensure remaining rows aren't selected
+  expect(remainingRows).to.not.have.class('is-selected')
+}
+
+export function rowBodyRangeSelect (rowHook, row1, row2) {
+  $hook(rowHook, {row: row1}).trigger(createRangeSelectEvent())
+  $hook(rowHook, {row: row2}).trigger(createRangeSelectEvent())
+}
+
+export function rowBodySingleSelect (rowHook, row) {
+  $hook(rowHook, {row}).click()
+}
+
+export function rowCheckboxRangeSelect (rowHook, row1, row2) {
+  $hook(`${rowHook}-selectionCell`, {row: row1}).trigger(createRangeSelectEvent())
+  $hook(`${rowHook}-selectionCell`, {row: row2}).trigger(createRangeSelectEvent())
+}
+
+export function rowCheckboxSingleSelect (rowHook, row) {
+  $hook(`${rowHook}-selectionCell`, {row}).click()
+}