@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
121 lines • 4.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
exports.useSelectedItems = function (selection, selectedItems) {
var _a = React.useState(selectedItems || []), items = _a[0], setSelectedItems = _a[1];
React.useEffect(function () {
if (selectedItems !== undefined) {
selection.setItems(selectedItems);
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps -- we want to do this once
[]);
React.useEffect(function () {
setSelectedItems(selectedItems ? selectedItems : []);
}, [selectedItems]);
var addItems = React.useCallback(function (itemsToAdd) {
var newItems = items.concat(itemsToAdd);
setSelectedItems(newItems);
selection.setItems(newItems);
}, [items, selection]);
var dropItemsAt = React.useCallback(function (insertIndex, itemsToAdd, indicesToRemove) {
var currentItems = tslib_1.__spreadArrays(items);
var updatedItems = [];
for (var i = 0; i < currentItems.length; i++) {
var item = currentItems[i];
// If this is the insert before index, insert the dragged items, then the current item
if (i === insertIndex) {
itemsToAdd.forEach(function (draggedItem) {
updatedItems.push(draggedItem);
});
}
if (!indicesToRemove.includes(i)) {
// only insert items into the new list that are not being dragged
updatedItems.push(item);
}
}
// if the insert index is at the end, add them now
if (insertIndex === currentItems.length) {
itemsToAdd.forEach(function (draggedItem) {
updatedItems.push(draggedItem);
});
}
setSelectedItems(updatedItems);
selection.setItems(updatedItems);
}, [items, selection]);
var removeItemAt = React.useCallback(function (index) {
var currentItems = tslib_1.__spreadArrays(items);
var updatedItems = currentItems.slice(0, index).concat(currentItems.slice(index + 1));
setSelectedItems(updatedItems);
selection.setItems(updatedItems);
}, [items, selection]);
var removeItem = React.useCallback(function (item) {
var currentItems = tslib_1.__spreadArrays(items);
var index = currentItems.indexOf(item);
removeItemAt(index);
}, [items, removeItemAt]);
var replaceItem = React.useCallback(function (itemToReplace, itemsToReplaceWith) {
var currentItems = tslib_1.__spreadArrays(items);
var index = items.indexOf(itemToReplace);
if (index > -1) {
var updatedItems = currentItems
.slice(0, index)
.concat(itemsToReplaceWith)
.concat(currentItems.slice(index + 1));
setSelectedItems(updatedItems);
selection.setItems(updatedItems);
}
}, [items, selection]);
var removeItems = React.useCallback(function (itemsToRemove) {
var currentItems = tslib_1.__spreadArrays(items);
var updatedItems = currentItems;
// Intentionally not using .filter here as we want to only remove a specific
// item in case of duplicates of same item.
itemsToRemove.forEach(function (item) {
var index = updatedItems.indexOf(item);
updatedItems.splice(index, 1);
});
setSelectedItems(updatedItems);
selection.setItems(updatedItems);
}, [items, selection]);
var hasSelectedItems = React.useCallback(function () {
if (items.length && selection.getSelectedCount() > 0) {
return true;
}
else {
return false;
}
}, [items.length, selection]);
var getSelectedItems = React.useCallback(function () {
if (hasSelectedItems()) {
return selection.getSelection();
}
else {
return [];
}
}, [hasSelectedItems, selection]);
var removeSelectedItems = React.useCallback(function () {
removeItems(getSelectedItems());
}, [removeItems, getSelectedItems]);
var unselectAll = React.useCallback(function () {
if (hasSelectedItems()) {
selection.setAllSelected(false);
}
}, [hasSelectedItems, selection]);
return {
selectedItems: items,
setSelectedItems: setSelectedItems,
addItems: addItems,
dropItemsAt: dropItemsAt,
removeItemAt: removeItemAt,
removeItem: removeItem,
replaceItem: replaceItem,
removeItems: removeItems,
removeSelectedItems: removeSelectedItems,
getSelectedItems: getSelectedItems,
hasSelectedItems: hasSelectedItems,
unselectAll: unselectAll,
};
};
//# sourceMappingURL=useSelectedItems.js.map