office-ui-fabric-react/lib-es2015/components/pickers/examples/TagPicker.Basic.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { autobind } from '../../../Utilities';
import { TagPicker } from 'office-ui-fabric-react/lib/components/pickers/TagPicker/TagPicker';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import * as exampleStylesImport from '../../../common/_exampleStyles.scss';
var exampleStyles = exampleStylesImport;
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 TagPickerBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(TagPickerBasicExample, _super);
    function TagPickerBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            isPickerDisabled: false
        };
        return _this;
    }
    TagPickerBasicExample.prototype.render = function () {
        return (React.createElement("div", null,
            React.createElement(Checkbox, { className: exampleStyles.exampleCheckbox, label: 'Disable Tag Picker', checked: this.state.isPickerDisabled, onChange: this._onDisabledButtonClick }),
            React.createElement(TagPicker, { ref: 'tagPicker', onResolveSuggestions: this._onFilterChanged, getTextFromItem: this._getTextFromItem, pickerSuggestionsProps: {
                    suggestionsHeaderText: 'Suggested Tags',
                    noResultsFoundText: 'No Color Tags Found'
                }, itemLimit: 2, disabled: this.state.isPickerDisabled, inputProps: {
                    onBlur: function (ev) { return console.log('onBlur called'); },
                    onFocus: function (ev) { return console.log('onFocus called'); },
                    'aria-label': 'Tag Picker'
                } })));
    };
    TagPickerBasicExample.prototype._getTextFromItem = function (item) {
        return item.name;
    };
    TagPickerBasicExample.prototype._onDisabledButtonClick = function () {
        this.setState({
            isPickerDisabled: !this.state.isPickerDisabled
        });
    };
    TagPickerBasicExample.prototype._onFilterChanged = function (filterText, tagList) {
        var _this = this;
        return filterText ? _testTags.filter(function (tag) { return tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0; }).filter(function (item) { return !_this._listContainsDocument(item, tagList); }) : [];
    };
    TagPickerBasicExample.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;
    };
    tslib_1.__decorate([
        autobind
    ], TagPickerBasicExample.prototype, "_onDisabledButtonClick", null);
    tslib_1.__decorate([
        autobind
    ], TagPickerBasicExample.prototype, "_onFilterChanged", null);
    return TagPickerBasicExample;
}(React.Component));
export { TagPickerBasicExample };
//# sourceMappingURL=TagPicker.Basic.Example.js.map