From ba98d94aa7d3e1d0d41fa791f91e8fd9e02ae909 Mon Sep 17 00:00:00 2001 From: Forrest Rosetti Date: Fri, 24 Feb 2017 09:33:58 -0800 Subject: [PATCH 1/2] Updated itemComparator shift clicks --- addon/components/frost-list.js | 7 +- addon/utils/selection.js | 12 +- .../integration/components/frost-list-test.js | 134 +++++++++--------- 3 files changed, 74 insertions(+), 79 deletions(-) diff --git a/addon/components/frost-list.js b/addon/components/frost-list.js index 55a6f89..f636c79 100644 --- a/addon/components/frost-list.js +++ b/addon/components/frost-list.js @@ -43,7 +43,6 @@ export default Component.extend({ ])), onSelectionChange: PropTypes.func, itemComparator: PropTypes.func, - basicClickDisabled: PropTypes.bool, // Options - sub-components pagination: PropTypes.EmberComponent, @@ -77,7 +76,6 @@ export default Component.extend({ // Options - general scrollTop: 0, itemComparator: (rhs, lhs) => { return rhs === lhs }, - basicClickDisabled: false, // Smoke and mirrors options alwaysUseDefaultHeight: false, @@ -172,12 +170,9 @@ export default Component.extend({ _select ({isRangeSelect, isSpecificSelect, item}) { const items = this.get('items') const itemComparator = this.get('itemComparator') - const basicClickDisabled = this.get('basicClickDisabled') const clonedSelectedItems = A(this.get('selectedItems').slice()) const _rangeState = this.get('_rangeState') - if (basicClickDisabled) { - isSpecificSelect = true - } + // Selects are proccessed in order of precedence: specific, range, basic if (isSpecificSelect) { selection.specific(clonedSelectedItems, item, _rangeState, itemComparator) diff --git a/addon/utils/selection.js b/addon/utils/selection.js index e7b97b5..328d466 100644 --- a/addon/utils/selection.js +++ b/addon/utils/selection.js @@ -30,7 +30,7 @@ export default { rangeState['anchor'] = item // New anchor, clear any previous endpoint - rangeState['endpoint'] = null + rangeState['endpoint'] = Ember.Object.create() } else { // Toggle the item selection @@ -43,10 +43,10 @@ export default { } // Set the range anchor if selected, otherwise clear the anchor - rangeState['anchor'] = isSelected ? item : null + rangeState['anchor'] = isSelected ? item : Ember.Object.create() // New or no anchor, clear any previous endpoint - rangeState['endpoint'] = null + rangeState['endpoint'] = Ember.Object.create() } }, @@ -71,7 +71,7 @@ export default { rangeState['anchor'] = item // New anchor, clear any previous endpoint - rangeState['endpoint'] = null + rangeState['endpoint'] = Ember.Object.create() // Add the anchor to the selected items selectedItems.pushObject(item) @@ -134,9 +134,9 @@ export default { const isSelected = !isCurrentlySelected // Set the range anchor if selected, otherwise clear the anchor - rangeState['anchor'] = isSelected ? item : null + rangeState['anchor'] = isSelected ? item : Ember.Object.create() // New or no anchor, clear any previous endpoint - rangeState['endpoint'] = null + rangeState['endpoint'] = Ember.Object.create() // Store the selection if (isSelected) { diff --git a/tests/integration/components/frost-list-test.js b/tests/integration/components/frost-list-test.js index c706fa6..dad74a3 100644 --- a/tests/integration/components/frost-list-test.js +++ b/tests/integration/components/frost-list-test.js @@ -123,7 +123,7 @@ describe(test.label, function () { }) }) - describe('supports pre selection with default itemComparator', function () { + describe('Supports pre selection with default itemComparator', function () { beforeEach(function () { const one = Ember.Object.create({isNotCompared: '0'}) const two = Ember.Object.create({isNotCompared: '1'}) @@ -151,7 +151,7 @@ describe(test.label, function () { }) }) - describe('supports pre selection with custom itemComparator', function () { + describe('Supports pre selection with custom itemComparator', function () { beforeEach(function () { const testItems = [ Ember.Object.create({id: '0'}), @@ -185,7 +185,7 @@ describe(test.label, function () { expect($hook('my-list-item-container', {index: 1}).hasClass('is-selected')).to.eql(false) }) - describe('when itemComparator set back to default', function () { + describe('When itemComparator is set back to default', function () { beforeEach(function () { this.render(hbs` {{frost-list @@ -206,7 +206,7 @@ describe(test.label, function () { }) }) - describe('supports basic and specific click', function () { + describe('Supports basic and specific click', function () { beforeEach(function () { const testItems = A([ Ember.Object.create({id: '0'}), @@ -232,7 +232,7 @@ describe(test.label, function () { return wait() }) - describe('when doing basic click', function () { + describe('When using basic click', function () { beforeEach(function () { $(hook('my-list-item', {index: 0})).click() return wait() @@ -246,7 +246,7 @@ describe(test.label, function () { expect($hook('my-list-item-container', {index: 1}).hasClass('is-selected')).to.eql(false) }) - describe('when doing basic click on previous selected item', function () { + describe('When using basic click on previous selected item', function () { beforeEach(function () { $(hook('my-list-item', {index: 0})).click() return wait() @@ -262,7 +262,7 @@ describe(test.label, function () { }) }) - describe('when doing basic click and all is selected', function () { + describe('When using basic click and all is selected', function () { beforeEach(function () { $(hook('my-list-selection', {index: 0})).click() $(hook('my-list-selection', {index: 1})).click() @@ -279,7 +279,7 @@ describe(test.label, function () { }) }) - describe('when doing specific click on one item', function () { + describe('When using specific click on one item', function () { beforeEach(function () { $hook('my-list-selection', {index: 0}).click() return wait() @@ -292,7 +292,7 @@ describe(test.label, function () { expect($hook('my-list-item-container', {index: 1}).hasClass('is-selected')).to.eql(false) }) - describe('when doing specific click to unselect previous item', function () { + describe('When using specific click to unselect previous item', function () { beforeEach(function () { $hook('my-list-selection', {index: 0}).click() return wait() @@ -307,7 +307,7 @@ describe(test.label, function () { }) }) - describe('when doing specific click on each item', function () { + describe('When using specific click on each item', function () { beforeEach(function () { $hook('my-list-selection', {index: 0}).click() $hook('my-list-selection', {index: 1}).click() @@ -321,7 +321,7 @@ describe(test.label, function () { expect($hook('my-list-item-container', {index: 1}).hasClass('is-selected')).to.eql(true) }) - describe('when doing specific click to unselect each items', function () { + describe('When using specific click to unselect each items', function () { beforeEach(function () { $hook('my-list-selection', {index: 0}).click() $hook('my-list-selection', {index: 1}).click() @@ -339,60 +339,7 @@ describe(test.label, function () { }) }) - describe('when setting basicClickDisabled=true and using basic clicks', function () { - beforeEach(function () { - const testItems = A([ - Ember.Object.create({id: '0'}), - Ember.Object.create({id: '1'}) - ]) - this.set('items', testItems) - const testSelectedItems = A([]) - this.set('selectedItems', testSelectedItems) - this.set('onSelectionChange', (selectedItems) => { - this.get('selectedItems').setObjects(selectedItems) - }) - this.render(hbs` - {{frost-list - basicClickDisabled=true - item=(component 'frost-list-item') - hook='my-list' - items=items - selectedItems=selectedItems - onSelectionChange=onSelectionChange - }} - `) - return wait() - }) - - describe('when selecting both items', function () { - beforeEach(function () { - $hook('my-list-item', {index: 0}).click() - $hook('my-list-item', {index: 1}).click() - return wait() - }) - it('item 0 is selected', function () { - expect($hook('my-list-item-container', {index: 0}).hasClass('is-selected')).to.eql(true) - }) - it('item 1 is selected', function () { - expect($hook('my-list-item-container', {index: 1}).hasClass('is-selected')).to.eql(true) - }) - - describe('when unselecting item 0', function () { - beforeEach(function () { - $hook('my-list-item', {index: 0}).click() - return wait() - }) - it('item 0 is not selected', function () { - expect($hook('my-list-item-container', {index: 0}).hasClass('is-selected')).to.eql(false) - }) - it('item 1 is selected', function () { - expect($hook('my-list-item-container', {index: 1}).hasClass('is-selected')).to.eql(true) - }) - }) - }) - }) - - describe('supports ranged based clicks', function () { + describe('Supports ranged based clicks', function () { beforeEach(function () { const testItems = A([ Ember.Object.create({id: '0'}), @@ -422,7 +369,7 @@ describe(test.label, function () { return wait() }) - describe('when doing shift click from item1-5', function () { + describe('When using shift click from item1-5', function () { beforeEach(function () { const clickEvent = $.Event('click') clickEvent.shiftKey = true @@ -455,8 +402,61 @@ describe(test.label, function () { expect($hook('my-list-item-container', {index: 6}).hasClass('is-selected')).to.eql(false) }) }) + + describe('When using custom itemComparator', function () { + beforeEach(function () { + this.set('itemComparator', (lhs, rhs) => { + return lhs.get('id') === rhs.get('id') + }) + this.render(hbs` + {{frost-list + item=(component 'frost-list-item') + hook='my-list' + items=items + selectedItems=selectedItems + onSelectionChange=onSelectionChange + itemComparator=itemComparator + }} + `) + return wait() + }) + + describe('When using shift click from item1-5', function () { + beforeEach(function () { + const clickEvent = $.Event('click') + clickEvent.shiftKey = true + const clickEvent2 = $.Event('click') + clickEvent2.shiftKey = true + $(hook('my-list-item', {index: 1})).trigger(clickEvent) + $(hook('my-list-item', {index: 5})).trigger(clickEvent2) + return wait() + }) + + it('item 0 is not selected', function () { + expect($hook('my-list-item-container', {index: 0}).hasClass('is-selected')).to.eql(false) + }) + it('item 1 is selected', function () { + expect($hook('my-list-item-container', {index: 1}).hasClass('is-selected')).to.eql(true) + }) + it('item 2 is selected', function () { + expect($hook('my-list-item-container', {index: 2}).hasClass('is-selected')).to.eql(true) + }) + it('item 3 is selected', function () { + expect($hook('my-list-item-container', {index: 3}).hasClass('is-selected')).to.eql(true) + }) + it('item 4 is selected', function () { + expect($hook('my-list-item-container', {index: 4}).hasClass('is-selected')).to.eql(true) + }) + it('item 5 is selected', function () { + expect($hook('my-list-item-container', {index: 5}).hasClass('is-selected')).to.eql(true) + }) + it('item 6 is not selected', function () { + expect($hook('my-list-item-container', {index: 6}).hasClass('is-selected')).to.eql(false) + }) + }) + }) }) - describe('supports item expansion', function () { + describe('Supports item expansion', function () { beforeEach(function () { const testItems = A([ Ember.Object.create({id: '0'}), From 9fa2ee23593672e1f3f10efcb1a8fc9d1c488994 Mon Sep 17 00:00:00 2001 From: Forrest Rosetti Date: Fri, 24 Feb 2017 09:36:00 -0800 Subject: [PATCH 2/2] Updated readme --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 8126f81..51cff95 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,6 @@ Detailed API and example usage can be found in the sample application in tests/d | `Sub Attribute` | `properties` | `array` | | Array of sortable attributes. eg. [{"label: "foo", "value": "bar"}], This is an attribute on frost-sort component.| | `Sub Attribute` | `onSort` | `action closure` | | callback functions user provided to handle sorting. This is an attribute on frost-sort component.| | `Attribute` | `itemComparator` | `action closure` | | callback functions user provided to handle custom item comparisons.| -| `Attribute` | `basicClickDisabled` | `boolean` | | Optional: set to true if you want to disable basic clicks, else false by default. Basic clicks select the item you clicked while deselecting everything else| ### Infinite scroll