I am trying to use the FluentUI Tag picker on https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers for one of my projects
Being a newbie , I am experiencing challenges implementing this on SPFx.
Also googled a lot for examples , no luck
I would really appreciate if anyone could help me with its implementation or examples if any
Thanks in advance
Simple example:
import * as React from 'react';
import styles from './OfficeUispfx.module.scss';
import { IOfficeUispfxProps } from './IOfficeUispfxProps';
import { escape } from '@microsoft/sp-lodash-subset';
import {
TagPicker,
IBasePicker,
ITag,
IInputProps,
IBasePickerSuggestionsProps,
} from 'office-ui-fabric-react/lib/Pickers';
import { Toggle, IToggleStyles } from 'office-ui-fabric-react/lib/Toggle';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
import { useBoolean } from '@uifabric/react-hooks';
export default class OfficeUispfx extends React.Component<IOfficeUispfxProps, any> {
public render(): React.ReactElement<IOfficeUispfxProps> {
const rootClass = mergeStyles({
maxWidth: 500,
});
const toggleStyles: Partial<IToggleStyles> = { root: { margin: '10px 0' } };
const inputProps: IInputProps = {
onBlur: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onBlur called'),
onFocus: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onFocus called'),
'aria-label': 'Tag picker',
};
const pickerSuggestionsProps: IBasePickerSuggestionsProps = {
suggestionsHeaderText: 'Suggested tags',
noResultsFoundText: 'No color tags found',
};
const testTags: ITag[] = [
'black',
'blue',
'brown',
'cyan',
'green',
'magenta',
'mauve',
'orange',
'pink',
'purple',
'red',
'rose',
'violet',
'white',
'yellow',
].map(item => ({ key: item, name: item }));
const listContainsTagList = (tag: ITag, tagList?: ITag[]) => {
if (!tagList || !tagList.length || tagList.length === 0) {
return false;
}
return tagList.some(compareTag => compareTag.key === tag.key);
};
const filterSuggestedTags = (filterText: string, tagList: ITag[]): ITag[] => {
return filterText
? testTags.filter(
tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0 && !listContainsTagList(tag, tagList),
)
: [];
};
const filterSelectedTags = (filterText: string, tagList: ITag[]): ITag[] => {
return filterText ? testTags.filter(tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0) : [];
};
const getTextFromItem = (item: ITag) => item.name;
return (
<div className={ styles.officeUispfx }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<span className={ styles.title }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
<p className={ styles.description }>{escape(this.props.description)}</p>
<a href="https://aka.ms/spfx" className={ styles.button }>
<span className={ styles.label }>Learn more</span>
</a>
</div>
</div>
</div>
<TagPicker
removeButtonAriaLabel="Remove"
onResolveSuggestions={filterSuggestedTags}
getTextFromItem={getTextFromItem}
pickerSuggestionsProps={pickerSuggestionsProps}
itemLimit={2}
inputProps={inputProps}
/>
</div>
);
}
}
Test Result:
Another demo:
https://github.com/RaspeR87/sp-dev-fx-webparts/blob/master/speaker-webpart/src/webparts/speakerSubmission/components/SpeakerSubmission.tsx