office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
288 lines • 18.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../../Utilities");
var Button_1 = require("../../../Button");
var Spinner_1 = require("../../../Spinner");
var Suggestions_types_1 = require("./Suggestions.types");
var SuggestionsItem_1 = require("./SuggestionsItem");
var SuggestionsItem_styles_1 = require("./SuggestionsItem.styles");
var stylesImport = require("./Suggestions.scss");
var legacyStyles = stylesImport;
var getClassNames = Utilities_1.classNamesFunction();
var StyledSuggestionsItem = Utilities_1.styled(SuggestionsItem_1.SuggestionsItem, SuggestionsItem_styles_1.getStyles, undefined, { scope: 'SuggestionItem' });
/**
* {@docCategory Pickers}
*/
var Suggestions = /** @class */ (function (_super) {
tslib_1.__extends(Suggestions, _super);
function Suggestions(suggestionsProps) {
var _this = _super.call(this, suggestionsProps) || this;
_this._forceResolveButton = React.createRef();
_this._searchForMoreButton = React.createRef();
_this._selectedElement = React.createRef();
/**
* Returns true if the event was handled, false otherwise
*/
_this.tryHandleKeyDown = function (keyCode, currentSuggestionIndex) {
var isEventHandled = false;
var newSelectedActionType = null;
var currentSelectedAction = _this.state.selectedActionType;
var suggestionLength = _this.props.suggestions.length;
if (keyCode === Utilities_1.KeyCodes.down) {
switch (currentSelectedAction) {
case Suggestions_types_1.SuggestionActionType.forceResolve:
if (suggestionLength > 0) {
_this._refocusOnSuggestions(keyCode);
newSelectedActionType = Suggestions_types_1.SuggestionActionType.none;
}
else if (_this._searchForMoreButton.current) {
newSelectedActionType = Suggestions_types_1.SuggestionActionType.searchMore;
}
else {
newSelectedActionType = Suggestions_types_1.SuggestionActionType.forceResolve;
}
break;
case Suggestions_types_1.SuggestionActionType.searchMore:
if (_this._forceResolveButton.current) {
newSelectedActionType = Suggestions_types_1.SuggestionActionType.forceResolve;
}
else if (suggestionLength > 0) {
_this._refocusOnSuggestions(keyCode);
newSelectedActionType = Suggestions_types_1.SuggestionActionType.none;
}
else {
newSelectedActionType = Suggestions_types_1.SuggestionActionType.searchMore;
}
break;
case Suggestions_types_1.SuggestionActionType.none:
if (currentSuggestionIndex === -1 && _this._forceResolveButton.current) {
newSelectedActionType = Suggestions_types_1.SuggestionActionType.forceResolve;
}
break;
}
}
else if (keyCode === Utilities_1.KeyCodes.up) {
switch (currentSelectedAction) {
case Suggestions_types_1.SuggestionActionType.forceResolve:
if (_this._searchForMoreButton.current) {
newSelectedActionType = Suggestions_types_1.SuggestionActionType.searchMore;
}
else if (suggestionLength > 0) {
_this._refocusOnSuggestions(keyCode);
newSelectedActionType = Suggestions_types_1.SuggestionActionType.none;
}
break;
case Suggestions_types_1.SuggestionActionType.searchMore:
if (suggestionLength > 0) {
_this._refocusOnSuggestions(keyCode);
newSelectedActionType = Suggestions_types_1.SuggestionActionType.none;
}
else if (_this._forceResolveButton.current) {
newSelectedActionType = Suggestions_types_1.SuggestionActionType.forceResolve;
}
break;
case Suggestions_types_1.SuggestionActionType.none:
if (currentSuggestionIndex === -1 && _this._searchForMoreButton.current) {
newSelectedActionType = Suggestions_types_1.SuggestionActionType.searchMore;
}
break;
}
}
if (newSelectedActionType !== null) {
_this.setState({ selectedActionType: newSelectedActionType });
isEventHandled = true;
}
return isEventHandled;
};
_this._getMoreResults = function () {
if (_this.props.onGetMoreResults) {
_this.props.onGetMoreResults();
}
};
_this._forceResolve = function () {
if (_this.props.createGenericItem) {
_this.props.createGenericItem();
}
};
_this._shouldShowForceResolve = function () {
return _this.props.showForceResolve ? _this.props.showForceResolve() : false;
};
_this._onClickTypedSuggestionsItem = function (item, index) {
return function (ev) {
_this.props.onSuggestionClick(ev, item, index);
};
};
_this._refocusOnSuggestions = function (keyCode) {
if (typeof _this.props.refocusSuggestions === 'function') {
_this.props.refocusSuggestions(keyCode);
}
};
_this._onRemoveTypedSuggestionsItem = function (item, index) {
return function (ev) {
var onSuggestionRemove = _this.props.onSuggestionRemove;
onSuggestionRemove(ev, item, index);
ev.stopPropagation();
};
};
_this.state = {
selectedActionType: Suggestions_types_1.SuggestionActionType.none
};
return _this;
}
Suggestions.prototype.componentDidMount = function () {
this.scrollSelected();
this.activeSelectedElement = this._selectedElement ? this._selectedElement.current : null;
};
Suggestions.prototype.componentDidUpdate = function () {
// Only scroll to selected element if the selected element has changed. Otherwise do nothing.
// This prevents some odd behavior where scrolling the active element out of view and clicking on a selected element
// will trigger a focus event and not give the clicked element the click.
if (this._selectedElement.current && this.activeSelectedElement !== this._selectedElement.current) {
this.scrollSelected();
this.activeSelectedElement = this._selectedElement.current;
}
};
Suggestions.prototype.render = function () {
var _a, _b;
var _this = this;
var _c = this.props, forceResolveText = _c.forceResolveText, mostRecentlyUsedHeaderText = _c.mostRecentlyUsedHeaderText, searchForMoreText = _c.searchForMoreText, className = _c.className, moreSuggestionsAvailable = _c.moreSuggestionsAvailable, noResultsFoundText = _c.noResultsFoundText, suggestions = _c.suggestions, isLoading = _c.isLoading, isSearching = _c.isSearching, loadingText = _c.loadingText, onRenderNoResultFound = _c.onRenderNoResultFound, searchingText = _c.searchingText, isMostRecentlyUsedVisible = _c.isMostRecentlyUsedVisible, resultsMaximumNumber = _c.resultsMaximumNumber, resultsFooterFull = _c.resultsFooterFull, resultsFooter = _c.resultsFooter, _d = _c.isResultsFooterVisible, isResultsFooterVisible = _d === void 0 ? true : _d, suggestionsAvailableAlertText = _c.suggestionsAvailableAlertText, suggestionsHeaderText = _c.suggestionsHeaderText, suggestionsClassName = _c.suggestionsClassName, theme = _c.theme, styles = _c.styles;
// TODO
// Clean this up by leaving only the first part after removing support for SASS.
// Currently we can not remove the SASS styles from Suggestions class because it
// might be used by consumers separately from pickers extending from BasePicker
// and have not used the new 'styles' prop. Because it's expecting a type parameter,
// we can not use the 'styled' function without adding some helpers which can break
// downstream consumers who did not use the new helpers.
// We check for 'styles' prop which is going to be injected by the 'styled' HOC
// in BasePicker when the typed Suggestions class is ready to be rendered. If the check
// passes we can use the CSS-in-JS styles. If the check fails (ex: custom picker),
// then we just use the old SASS styles instead.
this._classNames = styles
? getClassNames(styles, {
theme: theme,
className: className,
suggestionsClassName: suggestionsClassName,
forceResolveButtonSelected: this.state.selectedActionType === Suggestions_types_1.SuggestionActionType.forceResolve,
searchForMoreButtonSelected: this.state.selectedActionType === Suggestions_types_1.SuggestionActionType.searchMore
})
: {
root: Utilities_1.css('ms-Suggestions', className, legacyStyles.root),
title: Utilities_1.css('ms-Suggestions-title', legacyStyles.suggestionsTitle),
searchForMoreButton: Utilities_1.css('ms-SearchMore-button', legacyStyles.actionButton, (_a = {},
_a['is-selected ' + legacyStyles.buttonSelected] = this.state.selectedActionType === Suggestions_types_1.SuggestionActionType.searchMore,
_a)),
forceResolveButton: Utilities_1.css('ms-forceResolve-button', legacyStyles.actionButton, (_b = {},
_b['is-selected ' + legacyStyles.buttonSelected] = this.state.selectedActionType === Suggestions_types_1.SuggestionActionType.forceResolve,
_b)),
suggestionsAvailable: Utilities_1.css('ms-Suggestions-suggestionsAvailable', legacyStyles.suggestionsAvailable),
suggestionsContainer: Utilities_1.css('ms-Suggestions-container', legacyStyles.suggestionsContainer, suggestionsClassName),
noSuggestions: Utilities_1.css('ms-Suggestions-none', legacyStyles.suggestionsNone)
};
var spinnerStyles = this._classNames.subComponentStyles
? this._classNames.subComponentStyles.spinner
: undefined;
// TODO: cleanup after refactor of pickers to composition pattern and remove SASS support.
var spinnerClassNameOrStyles = styles
? { styles: spinnerStyles }
: { className: Utilities_1.css('ms-Suggestions-spinner', legacyStyles.suggestionsSpinner) };
var noResults = function () {
return noResultsFoundText ? (React.createElement("div", { role: "alert", className: _this._classNames.noSuggestions }, noResultsFoundText)) : null;
};
// MostRecently Used text should supercede the header text if it's there and available.
var headerText = suggestionsHeaderText;
if (isMostRecentlyUsedVisible && mostRecentlyUsedHeaderText) {
headerText = mostRecentlyUsedHeaderText;
}
var footerTitle = undefined;
if (isResultsFooterVisible) {
footerTitle = suggestions.length >= resultsMaximumNumber ? resultsFooterFull : resultsFooter;
}
var hasNoSuggestions = (!suggestions || !suggestions.length) && !isLoading;
return (React.createElement("div", { className: this._classNames.root },
headerText ? React.createElement("div", { className: this._classNames.title }, headerText) : null,
forceResolveText && this._shouldShowForceResolve() && (React.createElement(Button_1.CommandButton, { componentRef: this._forceResolveButton, className: this._classNames.forceResolveButton, onClick: this._forceResolve }, forceResolveText)),
isLoading && React.createElement(Spinner_1.Spinner, tslib_1.__assign({}, spinnerClassNameOrStyles, { label: loadingText })),
hasNoSuggestions ? (onRenderNoResultFound ? onRenderNoResultFound(undefined, noResults) : noResults()) : this._renderSuggestions(),
searchForMoreText && moreSuggestionsAvailable && (React.createElement(Button_1.CommandButton, { componentRef: this._searchForMoreButton, className: this._classNames.searchForMoreButton, iconProps: { iconName: 'Search' }, onClick: this._getMoreResults }, searchForMoreText)),
isSearching ? React.createElement(Spinner_1.Spinner, tslib_1.__assign({}, spinnerClassNameOrStyles, { label: searchingText })) : null,
footerTitle && !moreSuggestionsAvailable && !isMostRecentlyUsedVisible && !isSearching ? (React.createElement("div", { className: this._classNames.title }, footerTitle(this.props))) : null,
React.createElement("span", { role: "alert", "aria-live": "polite", className: this._classNames.suggestionsAvailable }, !isLoading && !isSearching && suggestions && suggestions.length > 0 && suggestionsAvailableAlertText
? suggestionsAvailableAlertText
: null)));
};
Suggestions.prototype.hasSuggestedAction = function () {
return this._searchForMoreButton.current !== undefined || this._forceResolveButton.current !== undefined;
};
Suggestions.prototype.hasSuggestedActionSelected = function () {
return this.state.selectedActionType !== Suggestions_types_1.SuggestionActionType.none;
};
Suggestions.prototype.executeSelectedAction = function () {
switch (this.state.selectedActionType) {
case Suggestions_types_1.SuggestionActionType.forceResolve:
this._forceResolve();
break;
case Suggestions_types_1.SuggestionActionType.searchMore:
this._getMoreResults();
break;
}
};
Suggestions.prototype.focusAboveSuggestions = function () {
if (this._forceResolveButton.current) {
this.setState({ selectedActionType: Suggestions_types_1.SuggestionActionType.forceResolve });
}
else if (this._searchForMoreButton.current) {
this.setState({ selectedActionType: Suggestions_types_1.SuggestionActionType.searchMore });
}
};
Suggestions.prototype.focusBelowSuggestions = function () {
if (this._searchForMoreButton.current) {
this.setState({ selectedActionType: Suggestions_types_1.SuggestionActionType.searchMore });
}
else if (this._forceResolveButton.current) {
this.setState({ selectedActionType: Suggestions_types_1.SuggestionActionType.forceResolve });
}
};
Suggestions.prototype.focusSearchForMoreButton = function () {
if (this._searchForMoreButton.current) {
this._searchForMoreButton.current.focus();
}
};
// TODO get the element to scroll into view properly regardless of direction.
Suggestions.prototype.scrollSelected = function () {
if (this._selectedElement.current && this._selectedElement.current.scrollIntoView !== undefined) {
this._selectedElement.current.scrollIntoView(false);
}
};
Suggestions.prototype._renderSuggestions = function () {
var _this = this;
var _a = this.props, onRenderSuggestion = _a.onRenderSuggestion, removeSuggestionAriaLabel = _a.removeSuggestionAriaLabel, suggestionsItemClassName = _a.suggestionsItemClassName, resultsMaximumNumber = _a.resultsMaximumNumber, showRemoveButtons = _a.showRemoveButtons, suggestionsContainerAriaLabel = _a.suggestionsContainerAriaLabel, suggestionsListId = _a.suggestionsListId;
var suggestions = this.props.suggestions;
var StyledTypedSuggestionsItem = StyledSuggestionsItem;
var selectedIndex = -1;
suggestions.some(function (element, index) {
if (element.selected) {
selectedIndex = index;
return true;
}
return false;
});
if (resultsMaximumNumber) {
suggestions =
selectedIndex >= resultsMaximumNumber
? suggestions.slice(selectedIndex - resultsMaximumNumber + 1, selectedIndex + 1)
: suggestions.slice(0, resultsMaximumNumber);
}
if (suggestions.length === 0) {
return null;
}
return (React.createElement("div", { className: this._classNames.suggestionsContainer, id: suggestionsListId, role: "listbox", "aria-label": suggestionsContainerAriaLabel }, suggestions.map(function (suggestion, index) { return (React.createElement("div", { ref: suggestion.selected ? _this._selectedElement : undefined,
// tslint:disable-next-line:no-string-literal
key: suggestion.item['key'] ? suggestion.item['key'] : index, id: 'sug-' + index, "aria-selected": suggestion.selected, role: "option", "aria-label": suggestion.ariaLabel },
React.createElement(StyledTypedSuggestionsItem, { suggestionModel: suggestion, RenderSuggestion: onRenderSuggestion, onClick: _this._onClickTypedSuggestionsItem(suggestion.item, index), className: suggestionsItemClassName, showRemoveButton: showRemoveButtons, removeButtonAriaLabel: removeSuggestionAriaLabel, onRemoveItem: _this._onRemoveTypedSuggestionsItem(suggestion.item, index) }))); })));
};
return Suggestions;
}(Utilities_1.BaseComponent));
exports.Suggestions = Suggestions;
//# sourceMappingURL=Suggestions.js.map