@workday/canvas-kit-react/dist/es6/collection/lib/useSelectionListModel.js

The parent module that contains all Workday Canvas Kit React components

import React from 'react';
import { createModelHook } from '@workday/canvas-kit-react/common';
import { useCursorListModel } from './useCursorListModel';
export const isSelected = (id, { selectedIds, unselectedIds }) => {
    if (selectedIds === 'all') {
        return !unselectedIds.includes(id);
    }
    return selectedIds.includes(id);
};
export const singleSelectionManager = {
    select(id) {
        return { selectedIds: [id], unselectedIds: [] };
    },
};
export const multiSelectionManager = {
    select(id, { selectedIds, unselectedIds }) {
        if (selectedIds === 'all') {
            // If we have all selected, start adding/removing from `unselectedIds`
            const existingKey = unselectedIds.includes(id);
            return {
                selectedIds: 'all',
                unselectedIds: existingKey
                    ? unselectedIds.filter(key => key !== id)
                    : unselectedIds.concat(id),
            };
        }
        else {
            const existingKey = selectedIds.includes(id);
            return {
                selectedIds: existingKey ? selectedIds.filter(key => key !== id) : selectedIds.concat(id),
                unselectedIds: [],
            };
        }
    },
};
export const useSelectionListModel = createModelHook({
    defaultConfig: {
        ...useCursorListModel.defaultConfig,
        initialSelectedIds: [],
        initialUnselectedIds: [],
        selection: singleSelectionManager,
    },
    requiredConfig: useCursorListModel.requiredConfig,
    contextOverride: useCursorListModel.Context,
})(config => {
    const cursor = useCursorListModel(config);
    const [selectedIds, setSelectedIds] = React.useState(config.initialSelectedIds);
    const [unselectedIds, setUnselectedIds] = React.useState(config.initialUnselectedIds);
    const selection = config.selection;
    const state = { ...cursor.state, selectedIds, unselectedIds };
    const events = {
        ...cursor.events,
        /** Select a specific item by its identifier. */
        select(data) {
            const { selectedIds, unselectedIds } = selection.select(data.id, state);
            setSelectedIds(selectedIds);
            setUnselectedIds(unselectedIds);
        },
        /**
         * Select all items. This will set `selectedIds` to `'all'` and remove all `unselectedIds`.
         * This is especially useful for virtual lists where not all items are loaded in memory.
         */
        selectAll() {
            setSelectedIds('all');
        },
        /**
         * Unselect all items.
         */
        unselectAll() {
            setSelectedIds([]);
        },
        /**
         * Should be used with care and can be used to keep a model in sync with external controlled
         * inputs.
         */
        setSelectedIds(ids) {
            setSelectedIds(ids);
        },
        /**
         * The `remove` event can be called by Behavior Hooks based on user interaction. The `onRemove`
         * can be added to the model config to signal the user wishes to remove the item in the list.
         * The `remove` event requires the dynamic API where `items` are passed to the model. It is up
         * to you to remove the item from the list. Focus redirection should be automatically managed,
         * if necessary.
         */
        remove(data) {
            // nothing to do here. It is a signal event
        },
    };
    return { ...cursor, state, events, selection };
});