diff --git a/src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx b/src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx index 5567b78d7..19d963ea4 100644 --- a/src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx +++ b/src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx @@ -168,7 +168,11 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps): JSX.Ele return terms; } + let searchFilter: string = null; + async function onResolveSuggestions(filter: string, selectedItems?: ITermInfo[]): Promise { + + searchFilter = filter; if (filter === '') { return []; } @@ -213,6 +217,7 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps): JSX.Ele term={term} termStoreInfo={currentTermStoreInfo} languageTag={currentLanguageTag} + searchFilter={searchFilter} {...itemProps} /> ); diff --git a/src/controls/modernTaxonomyPicker/termItem/TermItemSuggestion.tsx b/src/controls/modernTaxonomyPicker/termItem/TermItemSuggestion.tsx index f4ae951e4..09d9b4e44 100644 --- a/src/controls/modernTaxonomyPicker/termItem/TermItemSuggestion.tsx +++ b/src/controls/modernTaxonomyPicker/termItem/TermItemSuggestion.tsx @@ -9,6 +9,7 @@ export interface ITermItemSuggestionProps extends ISuggestionItemProps { term: ITermInfo; languageTag?: string; termStoreInfo?: ITermStoreInfo; + searchFilter?: string; onLoadParentLabel?: (termId: Guid) => Promise; } @@ -27,21 +28,34 @@ export function TermItemSuggestion(props: ITermItemSuggestionProps): } }, []); - let labels: { - name: string; - isDefault: boolean; - languageTag: string; - }[]; + const filterLabels = (isDefault: boolean, nameFilter?: (name: string) => boolean): { + name: string; + isDefault: boolean; + languageTag: string; + }[] => { - if (props.languageTag && props.termStoreInfo) { - labels = props.term.labels.filter((name) => name.languageTag === props.languageTag && name.isDefault); - if (labels.length === 0) { - labels = props.term.labels.filter((name) => name.languageTag === props.termStoreInfo.defaultLanguageTag && name.isDefault); + nameFilter = nameFilter || (() => true); + + if (props.languageTag && props.termStoreInfo) { + let labels = props.term.labels.filter((name) => name.languageTag === props.languageTag && name.isDefault === isDefault && nameFilter(name.name)); + if (labels.length === 0) { + labels = props.term.labels.filter((name) => name.languageTag === props.termStoreInfo.defaultLanguageTag && name.isDefault === isDefault && nameFilter(name.name)); + } + return labels; + } + else { + return props.term.labels.filter((name) => name.isDefault === isDefault && nameFilter(name.name)); } } - else { - labels = props.term.labels.filter((name) => name.isDefault); - } + + const labels = filterLabels(true); + const synonyms = props.searchFilter ? filterLabels(false, (name) => { + const prefix = props.searchFilter!; + if (prefix.length > name.length) + return false; + const compareTo = name.substring(0, prefix.length); + return compareTo.localeCompare(prefix, undefined, { sensitivity: 'base' }) === 0; + }) : []; return (
@@ -49,6 +63,9 @@ export function TermItemSuggestion(props: ITermItemSuggestionProps): {parentLabel !== "" &&
{`${strings.ModernTaxonomyPickerSuggestionInLabel} ${parentLabel}`}
} + {synonyms.length > 0 &&
    + {synonyms.map((synonym) =>
  • {synonym.name.substring(0, props.searchFilter!.length)}{synonym.name.substring(props.searchFilter!.length)}
  • )} +
}
); } diff --git a/src/controls/modernTaxonomyPicker/termItem/TermItemSuggestions.module.scss b/src/controls/modernTaxonomyPicker/termItem/TermItemSuggestions.module.scss index a0cb72004..a2e4fe7c8 100644 --- a/src/controls/modernTaxonomyPicker/termItem/TermItemSuggestions.module.scss +++ b/src/controls/modernTaxonomyPicker/termItem/TermItemSuggestions.module.scss @@ -1,13 +1,25 @@ @import '~@fluentui/react/dist/sass/References.scss'; -html[dir='ltr'] .termSuggestionContainer +html[dir='ltr'] { - text-align: left; + .termSuggestionContainer + { + text-align: left; + } + .termSynonymList { + padding-left: 0; + } } -html[dir='rtl'] .termSuggestionContainer +html[dir='rtl'] { - text-align: right; + .termSuggestionContainer + { + text-align: right; + } + .termSynonymList { + padding-right: 0; + } } .termSuggestionContainer @@ -17,10 +29,34 @@ html[dir='rtl'] .termSuggestionContainer padding-right: 12px; padding-bottom: 7px; - .termSuggestionPath + .termSuggestionPath, + .termSynonymList { font-size: 12px; color: #666666; } + .termSynonymList + { + color: #605e5c; + font-size: var(--ms-fonts-medium-fontSize, 14px); + list-style: none; + margin-block-start: 2px; + margin-top: 2px; + > li + { + &::before + { + content: '•'; + font-size: 11px; + padding-left: 4px; + } + + > span.synonymPrefix + { + font-weight: 600; + } + } + } + }