@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
62 lines • 3.62 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var _SelectedItemsList = function (props, ref) {
var dragDropEvents = props.dragDropEvents, dragDropHelper = props.dragDropHelper, selectedItems = props.selectedItems, defaultSelectedItems = props.defaultSelectedItems, replaceItem = props.replaceItem;
var _a = React.useState(selectedItems || defaultSelectedItems || []), items = _a[0], setItems = _a[1];
var renderedItems = React.useMemo(function () { return items; }, [items]);
var didMountRef = React.useRef(false);
React.useEffect(function () {
// block first call of the hook and forward each consecutive one
// We do this so that if defaultSelectedItems are set, they don't get overwritten
if (didMountRef.current) {
setItems(selectedItems || []);
}
else {
didMountRef.current = true;
}
}, [selectedItems]);
var removeItems = function (itemsToRemove) {
var _a, _b;
// Intentionally not using .filter here as we want to only remove a specific
// item in case of duplicates of same item.
var updatedItems = tslib_1.__spreadArrays(items);
itemsToRemove.forEach(function (item) {
var index = updatedItems.indexOf(item);
updatedItems.splice(index, 1);
});
setItems(updatedItems);
(_b = (_a = props).onItemsRemoved) === null || _b === void 0 ? void 0 : _b.call(_a, itemsToRemove);
};
var _replaceItem = React.useCallback(function (newItem, index) {
var _a;
var newItemsArray = !Array.isArray(newItem) ? [newItem] : newItem;
if (index >= 0) {
var newItems = tslib_1.__spreadArrays(items);
newItems.splice.apply(newItems, tslib_1.__spreadArrays([index, 1], newItemsArray));
setItems(newItems);
(_a = replaceItem) === null || _a === void 0 ? void 0 : _a(newItem, index);
}
}, [items, replaceItem]);
var onRemoveItemCallbacks = React.useMemo(function () {
// create callbacks ahead of time with memo.
// (hooks have to be called in the same order)
return items.map(function (item) { return function () { return removeItems([item]); }; });
},
// TODO: consider whether dependency on removeItems should be added
// (removeItems would likely need to be wrapped in useCallback)
// eslint-disable-next-line react-hooks/exhaustive-deps
[items]);
var SelectedItem = props.onRenderItem;
return (React.createElement(React.Fragment, null, items.length > 0 && (React.createElement("div", { role: 'list' }, SelectedItem &&
renderedItems.map(function (item, index) {
var _a;
return (React.createElement(SelectedItem, { item: item, index: index,
// To keep react from complaining for duplicate elements with the same key
// we will append the index to the key so that we have unique key for each item
key: item.key !== undefined ? item.key + '_' + index : index, selected: (_a = props.focusedItemIndices) === null || _a === void 0 ? void 0 : _a.includes(index), removeButtonAriaLabel: props.removeButtonAriaLabel, onRemoveItem: onRemoveItemCallbacks[index], onItemChange: _replaceItem, dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, createGenericItem: props.createGenericItem }));
})))));
};
exports.SelectedItemsList = React.forwardRef(_SelectedItemsList);
//# sourceMappingURL=SelectedItemsList.js.map