/// import { IReadonlyObservableArray, IReadonlyObservableValue } from '../../Core/Observable'; import { IIconProps } from '../../Icon'; import { IPillProps } from '../../Pill'; import { ISuggestionItemProps } from '../../SuggestionsList'; export interface ISelectedTagProps extends IPillProps { /** * Content to show in the pill when selected. */ content: string; } export interface ITagPickerProps { /** * Callback to determine if two tags are identical. */ areTagsEqual: (first: T, second: T) => boolean; /** * Aria label */ ariaLabel?: string; /** * Callback which converts one of the tag items to a pill. */ convertItemToPill: (item: T, index: number) => ISelectedTagProps; /** * Callback to create a default item from a search string. */ createDefaultItem?: (searchString: string) => T | undefined; /** * Text to show when the search does not show any suggestions */ noResultsFoundText: string; /** * Callback when focus has left the TagPicker. */ onBlur?: () => void; /** * Callback when the user clicks or focuses on an empty text field. This can be used to show an MRU list */ onEmptyInputFocus?: () => void; /** * Callback for when the right arrow key is pressed inside the tag picker. */ onSuggestionExpanded?: (tag: T) => void; /** * Callback when the text value of the input tag has changed. This callback should change the suggestions and suggestionsLoading values appropriately. */ onSearchChanged: (searchValue: string) => void; /** * Callback when a tag is chosen. Unless the tag is not valid, the consumer should update the suggestions list. */ onTagAdded: (tag: T) => void; /** * Callback when a tag is removed. Unless the tag is not valid, the consumer should update the suggestions list. */ onTagRemoved: (tag: T) => void; /** * Callback when a group of tags is removed. Unless the tag is not valid, the consumer should update the suggestions list. If this is not * specified, then the user cannot select multiple tags for deletion. */ onTagsRemoved?: (tags: T[]) => void; /** * Placeholder text to show when the input has no text and there are no selected tags */ placeholderText?: string; /** * Icon props to show at the beginning of the picker control when there is nothing selected */ prefixIconProps?: IIconProps; /** * Callback to render the suggestion row for a given suggestion. */ renderSuggestionItem: (itemProps: ISuggestionItemProps) => JSX.Element; /** * List of tags currently selected by the user. This prop is 100% controlled * by the consumer. onTagAdded/onTagRemoved/onTagsRemoved must also be implemented in order to * work properly. If this value is a an item, the prop must be * updated to cause the Tag Picker to re-render. If this value is an * ObservableValue, then changing its value will cause the Tag Picker * to re-render. */ selectedTags: IReadonlyObservableArray | T[]; /** * List of suggestions for the given search value. This prop is 100% controlled * by the consumer. onSearchChanged must also be implemented in order to * work properly. If this value is a an item, the prop must be * updated to cause the Tag Picker to re-render. If this value is an * ObservableValue, then changing its value will cause the Tag Picker * to re-render. */ suggestions: IReadonlyObservableArray | T[]; /** * boolean indicating if the control is waiting to generate its suggestions list. This prop is 100% controlled * by the consumer. onSearchChanged must also be implemented in order to * work properly. If this value is a an T, the prop must be * updated to cause the Tag Picker to re-render. If this value is an * ObservableValue, then changing its value will cause the Tag Picker */ suggestionsLoading: IReadonlyObservableValue | boolean; /** * String to show when results are loading */ suggestionsLoadingText?: string; }