office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
1 lines • 1.44 kB
JavaScript
define([], function() { return "import * as React from 'react';\nimport {\n TagPicker\n} from '../../../../components/pickers/TagPicker/TagPicker';\n\nlet _testTags = [\n 'black',\n 'blue',\n 'brown',\n 'cyan',\n 'green',\n 'magenta',\n 'mauve',\n 'orange',\n 'pink',\n 'purple',\n 'red',\n 'rose',\n 'violet',\n 'white',\n 'yellow'\n].map(item => ({ key: item, name: item }));\n\nexport class TagPickerBasicExample extends React.Component<{}, {}> {\n\n public render() {\n return (\n <TagPicker\n onResolveSuggestions={ this._onFilterChanged.bind(this) }\n getTextFromItem= {(item: any) => { return item.name; } }\n pickerSuggestionsProps={\n {\n suggestionsHeaderText: 'Suggested Tags',\n noResultsFoundText: 'No Color Tags Found'\n }\n }\n />\n );\n }\n\n private _onFilterChanged(filterText: string, tagList: { key: string, name: string }[]) {\n return filterText ? _testTags.filter(tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0).filter(item => !this._listContainsDocument(item, tagList)) : [];\n }\n\n private _listContainsDocument(tag: { key: string, name: string }, tagList: { key: string, name: string }[]) {\n if (!tagList || !tagList.length || tagList.length === 0) {\n return false;\n }\n return tagList.filter(compareTag => compareTag.key === tag.key).length > 0;\n }\n}\n"; });