@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
256 lines • 11.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
exports.useFloatingSuggestionItems = function (floatingSuggestionItems, footerSuggestionItems, headerSuggestionItems, focusSuggestionIndex, focusFooterIndex, focusHeaderIndex, isSuggestionsVisible, initialQueryString) {
var _a = React.useState(focusSuggestionIndex || -1), focusItemIndex = _a[0], setFocusItemIndex = _a[1];
var _b = React.useState(floatingSuggestionItems), suggestionItems = _b[0], setSuggestionItems = _b[1];
var _c = React.useState(focusFooterIndex || -1), footerItemIndex = _c[0], setFooterItemIndex = _c[1];
var _d = React.useState(footerSuggestionItems), footerItems = _d[0], setFooterItems = _d[1];
var _e = React.useState(focusHeaderIndex || -1), headerItemIndex = _e[0], setHeaderItemIndex = _e[1];
var _f = React.useState(headerSuggestionItems), headerItems = _f[0], setHeaderItems = _f[1];
var _g = React.useState(isSuggestionsVisible || false), isSuggestionsShown = _g[0], setIsSuggestionsShown = _g[1];
var _h = React.useState(initialQueryString || ''), queryString = _h[0], setQueryString = _h[1];
React.useEffect(function () {
setSuggestionItems(floatingSuggestionItems);
// If we have a query string and suggestions, set the first one as selected
if (queryString !== '' && floatingSuggestionItems && floatingSuggestionItems.length > 0) {
setFocusItemIndex(0);
setHeaderItemIndex(-1);
setFooterItemIndex(-1);
}
// Otherwise clear the selection
else {
clearPickerSelectedIndex();
}
}, [floatingSuggestionItems, queryString]);
var headerFooterItemsHaveExecute = function (items) {
var haveExecute = false;
items.forEach(function (item) {
if (item.onExecute !== undefined) {
haveExecute = true;
}
});
return haveExecute;
};
var hasSelectableFooters = footerItems ? headerFooterItemsHaveExecute(footerItems) : false;
var hasSelectableHeaders = headerItems ? headerFooterItemsHaveExecute(headerItems) : false;
var getNextSelectableHeaderOrFooter = function (items, itemIndex) {
var nextIndex = -1;
if (items) {
var i = itemIndex + 1;
while (i < items.length) {
if (items[i].onExecute && items[i].shouldShow()) {
nextIndex = i;
i = items.length;
}
i++;
}
}
return nextIndex;
};
var getPreviousSelectableHeaderOrFooter = function (items, itemIndex) {
var nextIndex = -1;
if (items) {
var i = itemIndex !== -1 ? itemIndex - 1 : items.length - 1;
while (i > -1) {
if (items[i].onExecute && items[i].shouldShow()) {
nextIndex = i;
i = -1;
}
i--;
}
}
return nextIndex;
};
var showPicker = function (show) {
clearPickerSelectedIndex();
setIsSuggestionsShown(show);
};
var selectNextSuggestion = function () {
// We're currently selected on a header
if (headerItemIndex > -1) {
// First, try and find another header
var nextHeaderIndex = getNextSelectableHeaderOrFooter(headerItems, headerItemIndex);
if (nextHeaderIndex !== -1) {
setHeaderItemIndex(nextHeaderIndex);
}
else {
// select the first suggestion item
setHeaderItemIndex(-1);
if (suggestionItems && suggestionItems.length > 0) {
// select the first suggestion item
setFocusItemIndex(0);
}
else if (hasSelectableFooters) {
setFooterItemIndex(getNextSelectableHeaderOrFooter(footerItems, footerItemIndex));
}
}
}
// We're currently selected on a selected item
else if (focusItemIndex > -1) {
// If we're at the end of the list
if (focusItemIndex === suggestionItems.length - 1) {
if (hasSelectableFooters) {
setFooterItemIndex(getNextSelectableHeaderOrFooter(footerItems, footerItemIndex));
setFocusItemIndex(-1);
}
else if (hasSelectableHeaders) {
setHeaderItemIndex(getNextSelectableHeaderOrFooter(headerItems, headerItemIndex));
setFocusItemIndex(-1);
}
else {
setFocusItemIndex(0);
}
}
else {
setFocusItemIndex(focusItemIndex + 1);
}
}
// We're currently selected on a footer
else if (footerItemIndex > -1) {
// First, try and find another footer
var nextFooterIndex = getNextSelectableHeaderOrFooter(footerItems, footerItemIndex);
if (nextFooterIndex !== -1) {
setFooterItemIndex(nextFooterIndex);
}
else {
setFooterItemIndex(-1);
if (hasSelectableHeaders) {
setHeaderItemIndex(getNextSelectableHeaderOrFooter(headerItems, headerItemIndex));
}
else if (suggestionItems && suggestionItems.length > 0) {
// select the first suggestion item
setFocusItemIndex(0);
}
}
}
// else, we have no items selected, so select the first one available
else {
if (hasSelectableHeaders) {
setHeaderItemIndex(getNextSelectableHeaderOrFooter(headerItems, headerItemIndex));
}
else if (suggestionItems && suggestionItems.length > 0) {
// select the first suggestion item
setFocusItemIndex(0);
}
else if (hasSelectableFooters) {
setFooterItemIndex(getNextSelectableHeaderOrFooter(footerItems, footerItemIndex));
}
// else, we stay in the state with nothing selected
}
};
var selectPreviousSuggestion = function () {
// We're currently selected on a footer
if (footerItemIndex > -1) {
// First, try and find another footer
var previousFooterIndex = getPreviousSelectableHeaderOrFooter(footerItems, footerItemIndex);
if (previousFooterIndex !== -1) {
setFooterItemIndex(previousFooterIndex);
}
else {
setFooterItemIndex(-1);
if (suggestionItems && suggestionItems.length > 0) {
// select the first suggestion item
setFocusItemIndex(suggestionItems.length - 1);
}
else if (hasSelectableHeaders) {
setHeaderItemIndex(getPreviousSelectableHeaderOrFooter(headerItems, headerItemIndex));
}
}
}
// We're currently selected on a selected item
else if (focusItemIndex > -1) {
// If we're at the beginning of the list
if (focusItemIndex === 0) {
setFocusItemIndex(-1);
if (hasSelectableHeaders) {
setHeaderItemIndex(getPreviousSelectableHeaderOrFooter(headerItems, headerItemIndex));
}
else if (hasSelectableFooters) {
setFooterItemIndex(getPreviousSelectableHeaderOrFooter(footerItems, footerItemIndex));
}
else {
setFocusItemIndex(suggestionItems.length - 1);
}
}
else {
setFocusItemIndex(focusItemIndex - 1);
}
}
// We're currently selected on a header
else if (headerItemIndex > -1) {
// First, try and find another header
var nextHeaderIndex = getPreviousSelectableHeaderOrFooter(headerItems, headerItemIndex);
if (nextHeaderIndex !== -1) {
setHeaderItemIndex(nextHeaderIndex);
}
else {
// select the first suggestion item
setHeaderItemIndex(-1);
if (hasSelectableFooters) {
setFooterItemIndex(getPreviousSelectableHeaderOrFooter(footerItems, footerItemIndex));
}
else if (suggestionItems && suggestionItems.length > 0) {
// select the first suggestion item
setFocusItemIndex(suggestionItems.length - 1);
}
}
}
// else, we have no items selected, so select the last one available
else {
if (hasSelectableFooters) {
setFooterItemIndex(getPreviousSelectableHeaderOrFooter(footerItems, footerItemIndex));
}
else if (suggestionItems && suggestionItems.length > 0) {
// select the last suggestion item
setFocusItemIndex(suggestionItems.length - 1);
}
else if (hasSelectableHeaders) {
setHeaderItemIndex(getPreviousSelectableHeaderOrFooter(headerItems, headerItemIndex));
}
// else, we stay in the state with nothing selected
}
};
var getFocusedSuggestion = function () {
return suggestionItems[focusItemIndex];
};
var hasSuggestionSelected = function () {
return focusItemIndex !== -1 && focusItemIndex < suggestionItems.length;
};
var removeSuggestion = function (index) {
var currentSuggestions = tslib_1.__spreadArrays(suggestionItems);
var updatedSuggestions = currentSuggestions.splice(index, 1);
setSuggestionItems(updatedSuggestions);
};
var clearPickerSelectedIndex = function () {
setFocusItemIndex(-1);
setFooterItemIndex(-1);
setHeaderItemIndex(-1);
};
return {
focusItemIndex: focusItemIndex,
setFocusItemIndex: setFocusItemIndex,
suggestionItems: suggestionItems,
setSuggestionItems: setSuggestionItems,
footerItemIndex: footerItemIndex,
setFooterItemIndex: setFooterItemIndex,
footerItems: footerItems,
setFooterItems: setFooterItems,
headerItemIndex: headerItemIndex,
setHeaderItemIndex: setHeaderItemIndex,
headerItems: headerItems,
setHeaderItems: setHeaderItems,
isSuggestionsShown: isSuggestionsShown,
showPicker: showPicker,
selectNextSuggestion: selectNextSuggestion,
selectPreviousSuggestion: selectPreviousSuggestion,
getFocusedSuggestion: getFocusedSuggestion,
hasSuggestionSelected: hasSuggestionSelected,
removeSuggestion: removeSuggestion,
clearPickerSelectedIndex: clearPickerSelectedIndex,
queryString: queryString,
setQueryString: setQueryString,
};
};
//# sourceMappingURL=useFloatingSuggestionItems.js.map