office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
265 lines • 16.9 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../../Utilities", "../../../Button", "../../../Spinner", "./Suggestions.scss"], function (require, exports, tslib_1, React, Utilities_1, Button_1, Spinner_1, stylesImport) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var SuggestionActionType;
(function (SuggestionActionType) {
SuggestionActionType[SuggestionActionType["none"] = 0] = "none";
SuggestionActionType[SuggestionActionType["forceResolve"] = 1] = "forceResolve";
SuggestionActionType[SuggestionActionType["searchMore"] = 2] = "searchMore";
})(SuggestionActionType = exports.SuggestionActionType || (exports.SuggestionActionType = {}));
var SuggestionsItem = /** @class */ (function (_super) {
tslib_1.__extends(SuggestionsItem, _super);
function SuggestionsItem() {
return _super !== null && _super.apply(this, arguments) || this;
}
SuggestionsItem.prototype.render = function () {
var _a = this.props, suggestionModel = _a.suggestionModel, RenderSuggestion = _a.RenderSuggestion, onClick = _a.onClick, className = _a.className, onRemoveItem = _a.onRemoveItem;
return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-item', styles.suggestionsItem, (_b = {},
_b['is-suggested ' + styles.suggestionsItemIsSuggested] = suggestionModel.selected,
_b), className) },
React.createElement(Button_1.CommandButton, { onClick: onClick, className: Utilities_1.css('ms-Suggestions-itemButton', styles.itemButton) }, RenderSuggestion(suggestionModel.item, this.props)),
this.props.showRemoveButton ? (React.createElement(Button_1.IconButton, { iconProps: { iconName: 'Cancel', style: { fontSize: '12px' } }, title: 'Remove', ariaLabel: 'Remove', onClick: onRemoveItem, className: Utilities_1.css('ms-Suggestions-closeButton', styles.closeButton) })) : (null)));
var _b;
};
return SuggestionsItem;
}(Utilities_1.BaseComponent));
exports.SuggestionsItem = SuggestionsItem;
var Suggestions = /** @class */ (function (_super) {
tslib_1.__extends(Suggestions, _super);
function Suggestions(suggestionsProps) {
var _this = _super.call(this, suggestionsProps) || this;
_this.SuggestionsItemOfProperType = SuggestionsItem;
_this.state = {
selectedActionType: SuggestionActionType.none,
};
return _this;
}
Suggestions.prototype.componentDidUpdate = function () {
this.scrollSelected();
};
Suggestions.prototype.render = function () {
var _a = this.props, forceResolveText = _a.forceResolveText, createGenericItem = _a.createGenericItem, showForceResolve = _a.showForceResolve, mostRecentlyUsedHeaderText = _a.mostRecentlyUsedHeaderText, searchForMoreText = _a.searchForMoreText, className = _a.className, moreSuggestionsAvailable = _a.moreSuggestionsAvailable, noResultsFoundText = _a.noResultsFoundText, suggestions = _a.suggestions, isLoading = _a.isLoading, isSearching = _a.isSearching, loadingText = _a.loadingText, onRenderNoResultFound = _a.onRenderNoResultFound, searchingText = _a.searchingText, isMostRecentlyUsedVisible = _a.isMostRecentlyUsedVisible, resultsMaximumNumber = _a.resultsMaximumNumber, resultsFooterFull = _a.resultsFooterFull, resultsFooter = _a.resultsFooter, suggestionsAvailableAlertText = _a.suggestionsAvailableAlertText, suggestionsHeaderText = _a.suggestionsHeaderText;
var noResults = function () {
return noResultsFoundText ?
(React.createElement("div", { role: 'alert', className: Utilities_1.css('ms-Suggestions-none', styles.suggestionsNone) }, 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 = (suggestions.length >= resultsMaximumNumber) ? resultsFooterFull : resultsFooter;
var hasNoSuggestions = (!suggestions || !suggestions.length) && !isLoading;
return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions', className ? className : '', styles.root) },
headerText ?
(React.createElement("div", { className: Utilities_1.css('ms-Suggestions-title', styles.suggestionsTitle) }, headerText)) : (null),
forceResolveText && this._shouldShowForceResolve() && (React.createElement(Button_1.CommandButton, { componentRef: this._resolveRef('_forceResolveButton'), className: Utilities_1.css('ms-forceResolve-button', styles.actionButton, (_b = {},
_b['is-selected ' + styles.buttonSelected] = this.state.selectedActionType === SuggestionActionType.forceResolve,
_b)), onClick: this._forceResolve }, forceResolveText)),
isLoading && (React.createElement(Spinner_1.Spinner, { className: Utilities_1.css('ms-Suggestions-spinner', styles.suggestionsSpinner), label: loadingText })),
hasNoSuggestions ?
(onRenderNoResultFound ? onRenderNoResultFound(undefined, noResults) : noResults()) :
this._renderSuggestions(),
searchForMoreText && moreSuggestionsAvailable && (React.createElement(Button_1.CommandButton, { componentRef: this._resolveRef('_searchForMoreButton'), className: Utilities_1.css('ms-SearchMore-button', styles.actionButton, (_c = {},
_c['is-selected ' + styles.buttonSelected] = this.state.selectedActionType === SuggestionActionType.searchMore,
_c)), iconProps: { iconName: 'Search' }, onClick: this._getMoreResults }, searchForMoreText)),
isSearching ?
(React.createElement(Spinner_1.Spinner, { className: Utilities_1.css('ms-Suggestions-spinner', styles.suggestionsSpinner), label: searchingText })) : (null),
!moreSuggestionsAvailable && !isMostRecentlyUsedVisible && !isSearching ?
(React.createElement("div", { className: Utilities_1.css('ms-Suggestions-title', styles.suggestionsTitle) }, footerTitle && footerTitle(this.props))) : (null),
(!isLoading && !isSearching && suggestions && suggestions.length > 0 && suggestionsAvailableAlertText) ?
(React.createElement("span", { role: 'alert', className: Utilities_1.css('ms-Suggestions-suggestionsAvailable', styles.suggestionsAvailable) }, suggestionsAvailableAlertText)) : (null)));
var _b, _c;
};
/**
* Returns true if the event was handled, false otherwise
*/
Suggestions.prototype.tryHandleKeyDown = function (keyCode, currentSuggestionIndex) {
var isEventHandled = false;
var newSelectedActionType = null;
var currentSelectedAction = this.state.selectedActionType;
var suggestionLength = this.props.suggestions.length;
if (keyCode === 40 /* down */) {
switch (currentSelectedAction) {
case SuggestionActionType.forceResolve:
if (suggestionLength > 0) {
this._refocusOnSuggestions(keyCode);
newSelectedActionType = SuggestionActionType.none;
}
else if (this._searchForMoreButton) {
newSelectedActionType = SuggestionActionType.searchMore;
}
else {
newSelectedActionType = SuggestionActionType.forceResolve;
}
break;
case SuggestionActionType.searchMore:
if (this._forceResolveButton) {
newSelectedActionType = SuggestionActionType.forceResolve;
}
else if (suggestionLength > 0) {
this._refocusOnSuggestions(keyCode);
newSelectedActionType = SuggestionActionType.none;
}
else {
newSelectedActionType = SuggestionActionType.searchMore;
}
break;
case SuggestionActionType.none:
if (currentSuggestionIndex === -1 && this._forceResolveButton) {
newSelectedActionType = SuggestionActionType.forceResolve;
}
break;
}
}
else if (keyCode === 38 /* up */) {
switch (currentSelectedAction) {
case SuggestionActionType.forceResolve:
if (this._searchForMoreButton) {
newSelectedActionType = SuggestionActionType.searchMore;
}
else if (suggestionLength > 0) {
this._refocusOnSuggestions(keyCode);
newSelectedActionType = SuggestionActionType.none;
}
break;
case SuggestionActionType.searchMore:
if (suggestionLength > 0) {
this._refocusOnSuggestions(keyCode);
newSelectedActionType = SuggestionActionType.none;
}
else if (this._forceResolveButton) {
newSelectedActionType = SuggestionActionType.forceResolve;
}
break;
case SuggestionActionType.none:
if (currentSuggestionIndex === -1 && this._searchForMoreButton) {
newSelectedActionType = SuggestionActionType.searchMore;
}
break;
}
}
if (newSelectedActionType !== null) {
this.setState({ selectedActionType: newSelectedActionType });
isEventHandled = true;
}
return isEventHandled;
};
Suggestions.prototype.hasSuggestedAction = function () {
return this._searchForMoreButton !== undefined || this._forceResolveButton !== undefined;
};
Suggestions.prototype.hasSuggestedActionSelected = function () {
return (this.state.selectedActionType !== SuggestionActionType.none);
};
Suggestions.prototype.executeSelectedAction = function () {
switch (this.state.selectedActionType) {
case SuggestionActionType.forceResolve:
this._forceResolve();
break;
case SuggestionActionType.searchMore:
this._getMoreResults();
break;
}
};
Suggestions.prototype.focusAboveSuggestions = function () {
var newSelectedActionType = null;
if (this._forceResolveButton) {
this.setState({ selectedActionType: SuggestionActionType.forceResolve });
}
else if (this._searchForMoreButton) {
this.setState({ selectedActionType: SuggestionActionType.searchMore });
}
};
Suggestions.prototype.focusBelowSuggestions = function () {
if (this._searchForMoreButton) {
this.setState({ selectedActionType: SuggestionActionType.searchMore });
}
else if (this._forceResolveButton) {
this.setState({ selectedActionType: SuggestionActionType.forceResolve });
}
};
Suggestions.prototype.focusSearchForMoreButton = function () {
if (this._searchForMoreButton) {
this._searchForMoreButton.focus();
}
};
// TODO get the element to scroll into view properly regardless of direction.
Suggestions.prototype.scrollSelected = function () {
if (this._selectedElement) {
this._selectedElement.scrollIntoView(false);
}
};
Suggestions.prototype._renderSuggestions = function () {
var _this = this;
var _a = this.props, onRenderSuggestion = _a.onRenderSuggestion, suggestionsItemClassName = _a.suggestionsItemClassName, resultsMaximumNumber = _a.resultsMaximumNumber, showRemoveButtons = _a.showRemoveButtons, suggestionsContainerAriaLabel = _a.suggestionsContainerAriaLabel;
var suggestions = this.props.suggestions;
var TypedSuggestionsItem = this.SuggestionsItemOfProperType;
if (resultsMaximumNumber) {
suggestions = suggestions.slice(0, resultsMaximumNumber);
}
return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-container', styles.suggestionsContainer), id: 'suggestion-list', role: 'list', "aria-label": suggestionsContainerAriaLabel }, suggestions.map(function (suggestion, index) {
return React.createElement("div", { ref: _this._resolveRef(suggestion.selected ? '_selectedElement' : ''),
// tslint:disable-next-line:no-string-literal
key: suggestion.item['key'] ? suggestion.item['key'] : index, id: 'sug-' + index, role: 'listitem', "aria-label": suggestion.ariaLabel },
React.createElement(TypedSuggestionsItem, { id: 'sug-item' + index, suggestionModel: suggestion, RenderSuggestion: onRenderSuggestion, onClick: _this._onClickTypedSuggestionsItem(suggestion.item, index), className: suggestionsItemClassName, showRemoveButton: showRemoveButtons, onRemoveItem: _this._onRemoveTypedSuggestionsItem(suggestion.item, index) }));
})));
};
Suggestions.prototype._getMoreResults = function () {
if (this.props.onGetMoreResults) {
this.props.onGetMoreResults();
}
};
Suggestions.prototype._forceResolve = function () {
if (this.props.createGenericItem) {
this.props.createGenericItem();
}
};
Suggestions.prototype._shouldShowForceResolve = function () {
return this.props.showForceResolve ? this.props.showForceResolve() : false;
};
Suggestions.prototype._onClickTypedSuggestionsItem = function (item, index) {
var _this = this;
return function (ev) {
_this.props.onSuggestionClick(ev, item, index);
};
};
Suggestions.prototype._refocusOnSuggestions = function (keyCode) {
if (typeof this.props.refocusSuggestions === 'function') {
this.props.refocusSuggestions(keyCode);
}
};
Suggestions.prototype._onRemoveTypedSuggestionsItem = function (item, index) {
var _this = this;
return function (ev) {
var onSuggestionRemove = _this.props.onSuggestionRemove;
onSuggestionRemove(ev, item, index);
ev.stopPropagation();
};
};
tslib_1.__decorate([
Utilities_1.autobind
], Suggestions.prototype, "tryHandleKeyDown", null);
tslib_1.__decorate([
Utilities_1.autobind
], Suggestions.prototype, "_getMoreResults", null);
tslib_1.__decorate([
Utilities_1.autobind
], Suggestions.prototype, "_forceResolve", null);
tslib_1.__decorate([
Utilities_1.autobind
], Suggestions.prototype, "_shouldShowForceResolve", null);
tslib_1.__decorate([
Utilities_1.autobind
], Suggestions.prototype, "_onClickTypedSuggestionsItem", null);
tslib_1.__decorate([
Utilities_1.autobind
], Suggestions.prototype, "_refocusOnSuggestions", null);
tslib_1.__decorate([
Utilities_1.autobind
], Suggestions.prototype, "_onRemoveTypedSuggestionsItem", null);
return Suggestions;
}(Utilities_1.BaseComponent));
exports.Suggestions = Suggestions;
});
//# sourceMappingURL=Suggestions.js.map