office-ui-fabric-react/lib/components/pickers/Suggestions/Suggestions.js

Reusable React components for building experiences for Office 365.

"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 stylesImport = require("./Suggestions.scss");
var styles = stylesImport;
var SuggestionsItem = (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 = (function (_super) {
    tslib_1.__extends(Suggestions, _super);
    function Suggestions(suggestionsProps) {
        var _this = _super.call(this, suggestionsProps) || this;
        _this.SuggestionsItemOfProperType = SuggestionsItem;
        return _this;
    }
    Suggestions.prototype.componentDidUpdate = function () {
        this.scrollSelected();
    };
    Suggestions.prototype.render = function () {
        var _a = this.props, 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;
        var noResults = function () {
            return noResultsFoundText ?
                React.createElement("div", { role: 'alert', className: Utilities_1.css('ms-Suggestions-none', styles.suggestionsNone) }, noResultsFoundText) : null;
        };
        var headerText = isMostRecentlyUsedVisible && mostRecentlyUsedHeaderText ? mostRecentlyUsedHeaderText : null;
        var footerTitle = (suggestions.length >= resultsMaximumNumber) ? resultsFooterFull : resultsFooter;
        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),
            isLoading && (React.createElement(Spinner_1.Spinner, { className: Utilities_1.css('ms-Suggestions-spinner', styles.suggestionsSpinner), label: loadingText })),
            (!suggestions || !suggestions.length) && !isLoading ?
                (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.searchMoreButton), iconProps: { iconName: 'Search' }, onClick: this._getMoreResults, onKeyDown: this._onKeyDown }, 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)));
    };
    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, suggestions = _a.suggestions, onRenderSuggestion = _a.onRenderSuggestion, suggestionsItemClassName = _a.suggestionsItemClassName, resultsMaximumNumber = _a.resultsMaximumNumber, showRemoveButtons = _a.showRemoveButtons;
        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: 'menu' }, 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: 'menuitem' },
                React.createElement(TypedSuggestionsItem, { id: 'sug-item' + index, suggestionModel: suggestion, RenderSuggestion: onRenderSuggestion, onClick: function (ev) { _this.props.onSuggestionClick(ev, suggestion.item, index); }, className: suggestionsItemClassName, showRemoveButton: showRemoveButtons, onRemoveItem: function (ev) {
                        var onSuggestionRemove = _this.props.onSuggestionRemove;
                        onSuggestionRemove(ev, suggestion.item, index);
                        ev.stopPropagation();
                    } }));
        })));
    };
    Suggestions.prototype._getMoreResults = function () {
        if (this.props.onGetMoreResults) {
            this.props.onGetMoreResults();
        }
    };
    Suggestions.prototype._onKeyDown = function (ev) {
        if ((ev.keyCode === 38 /* up */ || ev.keyCode === 40 /* down */) && typeof this.props.refocusSuggestions === 'function') {
            this.props.refocusSuggestions(ev.keyCode);
        }
    };
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Suggestions.prototype, "_getMoreResults", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Suggestions.prototype, "_onKeyDown", null);
    return Suggestions;
}(Utilities_1.BaseComponent));
exports.Suggestions = Suggestions;
//# sourceMappingURL=Suggestions.js.map