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