@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
60 lines • 6.15 kB
JavaScript
define(["require", "exports", "react", "../../../Utilities", "../FloatingSuggestionsItem/FloatingSuggestionsItem", "./FloatingSuggestionsList.styles", "../FloatingSuggestionsHeaderFooterItem/FloatingSuggestionsHeaderFooterItem"], function (require, exports, React, Utilities_1, FloatingSuggestionsItem_1, FloatingSuggestionsList_styles_1, FloatingSuggestionsHeaderFooterItem_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var getClassNames = Utilities_1.classNamesFunction();
exports.FloatingSuggestionsList = function (props) {
var classNames = getClassNames(FloatingSuggestionsList_styles_1.getStyles);
var className = props.className, suggestionItems = props.suggestionItems, onRenderNoResultFound = props.onRenderNoResultFound, ariaLabel = props.ariaLabel, noResultsFoundText = props.noResultsFoundText;
var hasNoSuggestions = !suggestionItems || !suggestionItems.length;
var noResults = function () {
return noResultsFoundText ? React.createElement("div", { className: classNames.noSuggestions }, noResultsFoundText) : null;
};
var renderHeader = function () {
var onRenderHeader = props.onRenderHeader, suggestionsHeaderText = props.suggestionsHeaderText, headerItemsProps = props.headerItemsProps, selectedHeaderIndex = props.selectedHeaderIndex, suggestionsHeaderContainerAriaLabel = props.suggestionsHeaderContainerAriaLabel;
if (headerItemsProps) {
return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-headerContainer', classNames.suggestionsContainer), id: "suggestionHeader-list", role: "list", "aria-label": suggestionsHeaderContainerAriaLabel }, headerItemsProps.map(function (headerItemProps, index) {
var isSelected = selectedHeaderIndex !== -1 && selectedHeaderIndex === index;
return headerItemProps.shouldShow() ? (React.createElement("div", { id: 'sug-header' + index, key: 'sug-header' + index, role: "listitem", "aria-label": headerItemProps.ariaLabel },
React.createElement(FloatingSuggestionsHeaderFooterItem_1.FloatingSuggestionsHeaderFooterItem, { id: 'sug-header-item' + index, isSelected: isSelected, renderItem: headerItemProps.renderItem, onExecute: headerItemProps.onExecute, className: headerItemProps.className }))) : null;
})));
}
if (onRenderHeader) {
return onRenderHeader(suggestionItems);
}
return suggestionsHeaderText ? React.createElement("div", { className: classNames.title }, suggestionsHeaderText) : null;
};
var renderFooter = function () {
var onRenderFooter = props.onRenderFooter, footerItemsProps = props.footerItemsProps, selectedFooterIndex = props.selectedFooterIndex, suggestionsFooterContainerAriaLabel = props.suggestionsFooterContainerAriaLabel;
if (footerItemsProps) {
return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-footerContainer', classNames.suggestionsContainer), id: "suggestionFooter-list", role: "list", "aria-label": suggestionsFooterContainerAriaLabel }, footerItemsProps.map(function (footerItemProps, index) {
var isSelected = selectedFooterIndex !== -1 && selectedFooterIndex === index;
return footerItemProps.shouldShow() ? (React.createElement("div", { id: 'sug-footer' + index, key: 'sug-footer' + index, role: "listitem", "aria-label": footerItemProps.ariaLabel },
React.createElement(FloatingSuggestionsHeaderFooterItem_1.FloatingSuggestionsHeaderFooterItem, { id: 'sug-footer-item' + index, isSelected: isSelected, renderItem: footerItemProps.renderItem, onExecute: footerItemProps.onExecute, className: footerItemProps.className }))) : null;
})));
}
if (onRenderFooter) {
return onRenderFooter(suggestionItems);
}
return null;
};
var renderSuggestions = function () {
if (suggestionItems.length === 0) {
return null;
}
var onRenderItem = props.onRenderItem, suggestionsItemClassName = props.suggestionsItemClassName, removeItemAriaLabel = props.removeItemAriaLabel, showSuggestionRemoveButton = props.showSuggestionRemoveButton, suggestionsContainerAriaLabel = props.suggestionsContainerAriaLabel, onSuggestionRemove = props.onSuggestionRemove, onItemClick = props.onItemClick, selectedSuggestionIndex = props.selectedSuggestionIndex, pickerWidth = props.pickerWidth;
return (React.createElement("div", { className: classNames.suggestionsContainer, role: "list", "aria-label": suggestionsContainerAriaLabel }, suggestionItems.map(function (suggestionItem, index) { return (React.createElement("div", { key: "FloatingSuggestionsItemKey-" + index, id: "FloatingSuggestionsItemId-" + index, role: "listitem", "aria-label": suggestionItem.ariaLabel, style: {
width: pickerWidth ? pickerWidth : 'auto',
} },
React.createElement(FloatingSuggestionsItem_1.FloatingSuggestionsItemMemo, { item: suggestionItem.item, onClick: onItemClick, isSelected: index === selectedSuggestionIndex, onRemoveItem: onSuggestionRemove, onRenderSuggestion: onRenderItem, className: suggestionsItemClassName, removeButtonAriaLabel: removeItemAriaLabel, showRemoveButton: suggestionItem.showRemoveButton || showSuggestionRemoveButton, displayText: suggestionItem.displayText, key: suggestionItem.key, id: suggestionItem.id }))); })));
};
return (React.createElement("div", { className: Utilities_1.css(classNames.root, className ? className : ''), "aria-label": ariaLabel },
renderHeader(),
hasNoSuggestions
? onRenderNoResultFound
? onRenderNoResultFound(undefined, noResults)
: noResults()
: renderSuggestions(),
renderFooter()));
};
});
//# sourceMappingURL=FloatingSuggestionsList.js.map