multi-list-selection
v0.1.1
Published
Library for managing selections across multiple lists
Downloads
4
Readme
multi-list-selection
Library for managing selections across multiple lists
Installation
npm install [--save] multi-list-selection
Usage
new MultiListSelection(lists[, equalityPredicate])
Constructs a new MultiListSelection instance
lists
- an array of lists, each lists an array of itemsequalityPredicate
- an optional function used to compare item equality when lists are updated (to maintain selected items). Reference equality is default.
Prototype methods:
getSelectedItem()
Returns currently selected items
selectItem(item)
Selects item provided. Uses equalityPredicate
to find item in lists if provided
getListAtIndex(listIndex)
Returns list at provided listIndex
selectListAtIndex(listIndex)
Sets the list at listIndex
as selected
getSelectedListIndex()
Returns index of selected lists
moveListSelection(steps)
Takes a number of steps and jumps that many lists forward (steps > 0) or backwards (steps < 0), wrapping around at beginning/end
moveItemSelection(steps)
Takes a number of steps and jumps that many items forward (steps > 0) or backwards (steps < 0), wrapping around at beginning/end
updateLists(newLists)
Updates the lists to be lists provided. The library maintains the selected items for each list, even if its location has changed within the list. Uses equalityPredicate
if provided, otherwise checks reference equality between items on old and new lists.
- newLists - new versions of the lists initially provided to the constructor
Examples
mls = new MultiListSelection([
['a', 'b', 'c'],
['d', 'e'],
['f', 'g', 'h']
])
mls.getSelectedItem() // 'a'
Selecting an item:
Uses equalityPredicate
if provided
mls.selectItem('b')
mls.selectItem('g')
Getting and selecting a list:
mls.getListAtIndex(1) // ['d', 'e']
mls.selectListAtIndex(1)
mls.getSelectedListIndex() // 1
Each list has it's own selected item (initially the first item).
mls.selectListAtIndex(0)
mls.getSelectedItem() // 'b'
mls.selectListAtIndex(2)
mls.getSelectedItem() // 'g'
Navigating between lists:
moveListSelection(steps)
takes a number of steps and jumps that many lists forward (steps > 0) or backwards (steps < 0), wrapping around at beginning/end
mls = new MultiListSelection([
['list at index 0'],
['list at index 1'],
['list at index 2']
])
mls.selectListAtIndex(1) // starting with list at index 1
mls.moveListSelection(1) // moves forward to list at index 2
mls.moveListSelection(1) // wraps to move forward to list at index 0
mls.selectListAtIndex(1) // starting with list at index 1
mls.moveListSelection(-1) // moves back to list at index 0
mls.moveListSelection(-1) // wraps to move back to list at index 2
mls.selectListAtIndex(1) // starting with list at index 1
mls.moveListSelection(2) // moves forward two lists and wraps to list at index 0
mls.selectListAtIndex(1) // starting with list at index 1
mls.moveListSelection(-2) // moves back two lists and wraps to list at index 2
Navigating between items:
moveItemSelection(steps)
takes a number of steps and jumps that many items forward (steps > 0) or backwards (steps < 0), wrapping around at beginning/end
const mls = new MultiListSelection([
['a', 'b'],
['c', 'd']
])
mls.selectItem('a')
mls.moveItemSelection(1) // selects 'b'
mls.moveItemSelection(-1) // selects 'a'
mls.moveItemSelection(2) // selects 'c'
mls.moveItemSelection(-2) // selects 'a'
mls.moveItemSelection(-1) // wraps around to selects 'd'
mls.moveItemSelection(1) // wraps around to selects 'a'
Updating lists:
const mls = new MultiListSelection([
['a', 'b'],
['c', 'd']
])
mls.updateLists([
['a'],
['b', 'c', 'd']
])
The library maintains the selected items for each list, even if its location has changed within the list.
If the selected list item is no longer in the list, the item in its location will be selected. If there is no item in present at that location, the last item in the list will be selected.
If the focused list is empty upon update, the first item in the next list will be set as selected. If that list is empty as well, then the last item in the previous list will be selected.
See test cases in test
folder for more details on this behavior.
Checking for equality during update:
By default the library using reference equality but you can provide an equalityPredicate
const equalityPredicate = (a, b) => a.toUpperCase() === b.toUpperCase()
const mls = new MultiListSelection([
['a', 'b', 'c']
], equalityPredicate)
mls.selectItem('b')
mls.updateLists([
['Z', 'A', 'B', 'C']
])
mls.getSelectedItem() // 'B'