Overview
Purpose: Tracks multiple selection state for a list-like element.
This mixin works in the middle of the Elix render pipeline:
events → methods ➞ setState → render DOM → post-render
Expects the component to provide:
items
state member, e.g., via ContentItemsMixin.
Provides the component with:
selectedFlags
state member. This is an array of boolean values the same dimensions asitems
. If the nth element ofitems
is selected, the nth element ofselectedFlags
will be true.selectedItems
state member. This is an array containing the subset ofitems
which are currently selected.internal.toggleSelectedFlag
method that can be used to toggle theselectedFlags
value for a specific index.
Usage
import ContentItemsMixin from "elix/src/base/ContentItemsMixin.js";
import ItemsMultiSelectMixin from "elix/src/base/ItemsMultiSelectMixin.js";
class MyElement extends ContentItemsMixin(ItemsMultiSelectMixin(HTMLElement)) {}
This mixin is designed to be used in conjunction with MultiSelectToggleMixin, which provides mouse and keyboard means of toggling the selected state of the current item.
This mixin is often used with MultiSelectAPIMixin, but the two mixins are provided separately to give you control over whether you want to publicly expose a multi-select API on your list-like component.
API
Used by classes MultiSelectListBox and PlainMultiSelectListBox.
[internal.toggle Selected Flag](index, toggle) method
Toggle the element of the selectedItemFlags
array with the given index.
If the toggle
parameter is omitted, the indicated flag is flipped. If a
boolean value is supplied for toggle
, the flag is set to that value.
Parameters:
- index:
number
– the index into theselectedItemFlags
array - toggle:
boolean
– if supplied, the value to set the flag to