ItemsMultiSelectMixin

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 as items. If the nth element of items is selected, the nth element of selectedFlags will be true.
• selectedItems state member. This is an array containing the subset of items which are currently selected.
• internal.toggleSelectedFlag method that can be used to toggle the selectedFlags 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.