office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
90 lines • 4.58 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Announced", "office-ui-fabric-react/lib/Pickers", "office-ui-fabric-react/lib/Text", "office-ui-fabric-react/lib/Stack", "office-ui-fabric-react/lib/Utilities"], function (require, exports, tslib_1, React, Announced_1, Pickers_1, Text_1, Stack_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var _testTags = [
'black',
'blue',
'brown',
'cyan',
'green',
'magenta',
'mauve',
'orange',
'pink',
'purple',
'red',
'rose',
'violet',
'white',
'yellow'
].map(function (item) { return ({ key: item, name: item }); });
var AnnouncedSearchResultsExample = /** @class */ (function (_super) {
tslib_1.__extends(AnnouncedSearchResultsExample, _super);
function AnnouncedSearchResultsExample(props) {
var _this = _super.call(this, props) || this;
_this._getTextFromItem = function (item) {
return item.name;
};
_this._onFilterChanged = function (filterText, tagList) {
if (filterText && _this.state.emptyInput) {
_this.setState({ emptyInput: false });
}
else if (!filterText && !_this.state.emptyInput) {
_this.setState({ emptyInput: true });
}
var filteredTags = filterText
? _testTags
.filter(function (tag) { return tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0; })
.filter(function (tag) { return !_this._listContainsDocument(tag, tagList); })
: [];
if (filteredTags.length !== _this.state.numberOfSuggestions) {
_this.setState({ numberOfSuggestions: filteredTags.length });
}
return filteredTags;
};
_this._async = new Utilities_1.Async(_this);
_this.state = {
seconds: 0,
numberOfSuggestions: 0,
emptyInput: true
};
return _this;
}
AnnouncedSearchResultsExample.prototype.render = function () {
var stackTokens = { childrenGap: 10 };
return (React.createElement(Stack_1.Stack, { tokens: stackTokens },
React.createElement(Text_1.Text, null, "Turn on Narrator and type a letter or two into the TagPicker. This picker will filter added items from the search suggestions."),
this._renderAnnounced(),
React.createElement(Pickers_1.TagPicker, { onResolveSuggestions: this._onFilterChanged, getTextFromItem: this._getTextFromItem, pickerSuggestionsProps: {
suggestionsHeaderText: 'Suggested Tags',
noResultsFoundText: 'No Color Tags Found' // this alert handles the case when there are no suggestions available
}, inputProps: {
'aria-label': 'Tag Picker'
} })));
};
AnnouncedSearchResultsExample.prototype.componentDidMount = function () {
var _this = this;
this._async.setInterval(function () {
_this.setState({ seconds: _this.state.seconds + 1 });
}, 1000);
};
AnnouncedSearchResultsExample.prototype.componentWillUnmount = function () {
this._async.dispose();
};
AnnouncedSearchResultsExample.prototype._renderAnnounced = function () {
var _a = this.state, numberOfSuggestions = _a.numberOfSuggestions, emptyInput = _a.emptyInput;
if (!emptyInput) {
return (React.createElement(Announced_1.Announced, { message: numberOfSuggestions === 1 ? numberOfSuggestions + " Color Tag Found" : numberOfSuggestions + " Color Tags Found" }));
}
};
AnnouncedSearchResultsExample.prototype._listContainsDocument = function (tag, tagList) {
if (!tagList || !tagList.length || tagList.length === 0) {
return false;
}
return tagList.filter(function (compareTag) { return compareTag.key === tag.key; }).length > 0;
};
return AnnouncedSearchResultsExample;
}(React.Component));
exports.AnnouncedSearchResultsExample = AnnouncedSearchResultsExample;
});
//# sourceMappingURL=Announced.SearchResults.Example.js.map