-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add a common class to be used when dealing with selection logic #2562
Merged
Merged
Changes from all commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
e9fedb9
feat: add a common class to be used when dealing with selection logic
crisbeto e3a87d7
Merge branch 'master' into selection-model
crisbeto 6bcc644
Refactor and simplify based on the feedback.
crisbeto af1352e
Merge branch 'selection-model' of https://github.com/crisbeto/materia…
crisbeto 382dac8
Rename private method.
crisbeto e82403d
Move the clearing logic to _select and shuffle the method order.
crisbeto 70e4768
Rename private methods.
crisbeto File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,172 @@ | ||
import {SelectionModel} from './selection'; | ||
|
||
|
||
describe('SelectionModel', () => { | ||
describe('single selection', () => { | ||
let model: SelectionModel<any>; | ||
|
||
beforeEach(() => model = new SelectionModel()); | ||
|
||
it('should be able to select a single value', () => { | ||
model.select(1); | ||
|
||
expect(model.selected.length).toBe(1); | ||
expect(model.isSelected(1)).toBe(true); | ||
}); | ||
|
||
it('should deselect the previously selected value', () => { | ||
model.select(1); | ||
model.select(2); | ||
|
||
expect(model.isSelected(1)).toBe(false); | ||
expect(model.isSelected(2)).toBe(true); | ||
}); | ||
|
||
it('should only preselect one value', () => { | ||
model = new SelectionModel(false, [1, 2]); | ||
|
||
expect(model.selected.length).toBe(1); | ||
expect(model.isSelected(1)).toBe(true); | ||
expect(model.isSelected(2)).toBe(false); | ||
}); | ||
}); | ||
|
||
describe('multiple selection', () => { | ||
let model: SelectionModel<any>; | ||
|
||
beforeEach(() => model = new SelectionModel(true)); | ||
|
||
it('should be able to select multiple options at the same time', () => { | ||
model.select(1); | ||
model.select(2); | ||
|
||
expect(model.selected.length).toBe(2); | ||
expect(model.isSelected(1)).toBe(true); | ||
expect(model.isSelected(2)).toBe(true); | ||
}); | ||
|
||
it('should be able to preselect multiple options', () => { | ||
model = new SelectionModel(true, [1, 2]); | ||
|
||
expect(model.selected.length).toBe(2); | ||
expect(model.isSelected(1)).toBe(true); | ||
expect(model.isSelected(2)).toBe(true); | ||
}); | ||
}); | ||
|
||
describe('onChange event', () => { | ||
it('should return both the added and removed values', () => { | ||
let model = new SelectionModel(); | ||
let spy = jasmine.createSpy('SelectionModel change event'); | ||
|
||
model.select(1); | ||
|
||
model.onChange.subscribe(spy); | ||
|
||
model.select(2); | ||
|
||
let event = spy.calls.mostRecent().args[0]; | ||
|
||
expect(spy).toHaveBeenCalled(); | ||
expect(event.removed).toEqual([1]); | ||
expect(event.added).toEqual([2]); | ||
}); | ||
|
||
describe('selection', () => { | ||
let model: SelectionModel<any>; | ||
let spy: jasmine.Spy; | ||
|
||
beforeEach(() => { | ||
model = new SelectionModel(true); | ||
spy = jasmine.createSpy('SelectionModel change event'); | ||
|
||
model.onChange.subscribe(spy); | ||
}); | ||
|
||
it('should emit an event when a value is selected', () => { | ||
model.select(1); | ||
|
||
let event = spy.calls.mostRecent().args[0]; | ||
|
||
expect(spy).toHaveBeenCalled(); | ||
expect(event.added).toEqual([1]); | ||
expect(event.removed).toEqual([]); | ||
}); | ||
|
||
it('should not emit multiple events for the same value', () => { | ||
model.select(1); | ||
model.select(1); | ||
|
||
expect(spy).toHaveBeenCalledTimes(1); | ||
}); | ||
|
||
it('should not emit an event when preselecting values', () => { | ||
model = new SelectionModel(false, [1]); | ||
spy = jasmine.createSpy('SelectionModel initial change event'); | ||
model.onChange.subscribe(spy); | ||
|
||
expect(spy).not.toHaveBeenCalled(); | ||
}); | ||
}); | ||
|
||
describe('deselection', () => { | ||
let model: SelectionModel<any>; | ||
let spy: jasmine.Spy; | ||
|
||
beforeEach(() => { | ||
model = new SelectionModel(true, [1, 2, 3]); | ||
spy = jasmine.createSpy('SelectionModel change event'); | ||
|
||
model.onChange.subscribe(spy); | ||
}); | ||
|
||
it('should emit an event when a value is deselected', () => { | ||
model.deselect(1); | ||
|
||
let event = spy.calls.mostRecent().args[0]; | ||
|
||
expect(spy).toHaveBeenCalled(); | ||
expect(event.removed).toEqual([1]); | ||
}); | ||
|
||
it('should not emit an event when a non-selected value is deselected', () => { | ||
model.deselect(4); | ||
expect(spy).not.toHaveBeenCalled(); | ||
}); | ||
|
||
it('should emit a single event when clearing all of the selected options', () => { | ||
model.clear(); | ||
|
||
let event = spy.calls.mostRecent().args[0]; | ||
|
||
expect(spy).toHaveBeenCalledTimes(1); | ||
expect(event.removed).toEqual([1, 2, 3]); | ||
}); | ||
|
||
}); | ||
}); | ||
|
||
it('should be able to determine whether it is empty', () => { | ||
let model = new SelectionModel(); | ||
|
||
expect(model.isEmpty()).toBe(true); | ||
|
||
model.select(1); | ||
|
||
expect(model.isEmpty()).toBe(false); | ||
}); | ||
|
||
it('should be able to clear the selected options', () => { | ||
let model = new SelectionModel(true); | ||
|
||
model.select(1); | ||
model.select(2); | ||
|
||
expect(model.selected.length).toBe(2); | ||
|
||
model.clear(); | ||
|
||
expect(model.selected.length).toBe(0); | ||
expect(model.isEmpty()).toBe(true); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,130 @@ | ||
import {Subject} from 'rxjs/Subject'; | ||
|
||
|
||
/** | ||
* Class to be used to power selecting one or more options from a list. | ||
* @docs-private | ||
*/ | ||
export class SelectionModel<T> { | ||
/** Currently-selected values. */ | ||
private _selection: Set<T> = new Set(); | ||
|
||
/** Keeps track of the deselected options that haven't been emitted by the change event. */ | ||
private _deselectedToEmit: T[] = []; | ||
|
||
/** Keeps track of the selected option that haven't been emitted by the change event. */ | ||
private _selectedToEmit: T[] = []; | ||
|
||
/** Cache for the array value of the selected items. */ | ||
private _selected: T[]; | ||
|
||
/** Selected value(s). */ | ||
get selected(): T[] { | ||
if (!this._selected) { | ||
this._selected = Array.from(this._selection.values()); | ||
} | ||
|
||
return this._selected; | ||
} | ||
|
||
/** Event emitted when the value has changed. */ | ||
onChange: Subject<SelectionChange<T>> = new Subject(); | ||
|
||
constructor(private _isMulti = false, initiallySelectedValues?: T[]) { | ||
if (initiallySelectedValues) { | ||
if (_isMulti) { | ||
initiallySelectedValues.forEach(value => this._markSelected(value)); | ||
} else { | ||
this._markSelected(initiallySelectedValues[0]); | ||
} | ||
|
||
// Clear the array in order to avoid firing the change event for preselected values. | ||
this._selectedToEmit.length = 0; | ||
} | ||
} | ||
|
||
/** | ||
* Selects a value or an array of values. | ||
*/ | ||
select(value: T): void { | ||
this._markSelected(value); | ||
this._emitChangeEvent(); | ||
} | ||
|
||
/** | ||
* Deselects a value or an array of values. | ||
*/ | ||
deselect(value: T): void { | ||
this._unmarkSelected(value); | ||
this._emitChangeEvent(); | ||
} | ||
|
||
/** | ||
* Clears all of the selected values. | ||
*/ | ||
clear(): void { | ||
this._unmarkAll(); | ||
this._emitChangeEvent(); | ||
} | ||
|
||
/** | ||
* Determines whether a value is selected. | ||
*/ | ||
isSelected(value: T): boolean { | ||
return this._selection.has(value); | ||
} | ||
|
||
/** | ||
* Determines whether the model has a value. | ||
*/ | ||
isEmpty(): boolean { | ||
return this._selection.size === 0; | ||
} | ||
|
||
/** Emits a change event and clears the records of selected and deselected values. */ | ||
private _emitChangeEvent() { | ||
if (this._selectedToEmit.length || this._deselectedToEmit.length) { | ||
let eventData = new SelectionChange(this._selectedToEmit, this._deselectedToEmit); | ||
|
||
this.onChange.next(eventData); | ||
this._deselectedToEmit = []; | ||
this._selectedToEmit = []; | ||
this._selected = null; | ||
} | ||
} | ||
|
||
/** Selects a value. */ | ||
private _markSelected(value: T) { | ||
if (!this.isSelected(value)) { | ||
if (!this._isMulti) { | ||
this._unmarkAll(); | ||
} | ||
|
||
this._selection.add(value); | ||
this._selectedToEmit.push(value); | ||
} | ||
} | ||
|
||
/** Deselects a value. */ | ||
private _unmarkSelected(value: T) { | ||
if (this.isSelected(value)) { | ||
this._selection.delete(value); | ||
this._deselectedToEmit.push(value); | ||
} | ||
} | ||
|
||
/** Clears out the selected values. */ | ||
private _unmarkAll() { | ||
if (!this.isEmpty()) { | ||
this._selection.forEach(value => this._unmarkSelected(value)); | ||
} | ||
} | ||
} | ||
|
||
/** | ||
* Describes an event emitted when the value of a MdSelectionModel has changed. | ||
* @docs-private | ||
*/ | ||
export class SelectionChange<T> { | ||
constructor(public added?: T[], public removed?: T[]) { } | ||
} |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it's a bit confusing to have
select
and_select
methods that do different things. Maybe make the private one something like_markSelected
? (same for deselect and clear)There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd say it's probably better to move the clearing of the selected value to
_select
instead. That way the only difference is whether the event is emitted.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I still think, though, that having a
select
and_select
method is something we should avoid. It would be very easy to call the wrong one.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
_markSelected
makes sense, but should I rename_deselect
and_clear
in that case as well?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changed up the names so they're not easily confused with the public ones.