Skip to content

Commit 2ae2c6f

Browse files
patrikhellgrenpatrikhellgren
committed
Removed need for ITermInfoExt
1 parent 686764a commit 2ae2c6f

File tree

5 files changed

+54
-61
lines changed

5 files changed

+54
-61
lines changed

‎src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,7 @@ import { ITermInfo,
3333
} from '@pnp/sp/taxonomy';
3434
import { TermItemSuggestion } from './termItem/TermItemSuggestion';
3535
import { ModernTermPicker } from './modernTermPicker/ModernTermPicker';
36-
import { ITermInfoExt,
37-
ITermItemProps
38-
} from './modernTermPicker/ModernTermPicker.types';
36+
import { ITermItemProps } from './modernTermPicker/ModernTermPicker.types';
3937
import { TermItem } from './termItem/TermItem';
4038

4139
export interface IModernTaxonomyPickerProps {
@@ -50,16 +48,16 @@ export interface IModernTaxonomyPickerProps {
5048
required?: boolean;
5149
onChange?: (newValue?: ITermInfo[]) => void;
5250
onRenderItem?: (itemProps: ITermItemProps) => JSX.Element;
53-
onRenderSuggestionsItem?: (term: ITermInfoExt, itemProps: ISuggestionItemProps<ITermInfoExt>) => JSX.Element;
51+
onRenderSuggestionsItem?: (term: ITermInfo, itemProps: ISuggestionItemProps<ITermInfo>) => JSX.Element;
5452
placeHolder?: string;
5553
customPanelWidth?: number;
5654
}
5755

5856
export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
5957
const [taxonomyService] = React.useState(() => new SPTaxonomyService(props.context));
6058
const [panelIsOpen, setPanelIsOpen] = React.useState(false);
61-
const [selectedOptions, setSelectedOptions] = React.useState<ITermInfoExt[]>([]);
62-
const [selectedPanelOptions, setSelectedPanelOptions] = React.useState<ITermInfoExt[]>([]);
59+
const [selectedOptions, setSelectedOptions] = React.useState<ITermInfo[]>([]);
60+
const [selectedPanelOptions, setSelectedPanelOptions] = React.useState<ITermInfo[]>([]);
6361
const [currentTermStoreInfo, setCurrentTermStoreInfo] = React.useState<ITermStoreInfo>();
6462
const [currentTermSetInfo, setCurrentTermSetInfo] = React.useState<ITermSetInfo>();
6563
const [currentAnchorTermInfo, setCurrentAnchorTermInfo] = React.useState<ITermInfo>();
@@ -74,7 +72,7 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
7472
props.context.pageContext.cultureInfo.currentUICultureName :
7573
currentTermStoreInfo.defaultLanguageTag);
7674
setSelectedOptions(Object.prototype.toString.call(props.initialValues) === '[object Array]' ?
77-
props.initialValues.map(term => { return { ...term, languageTag: currentLanguageTag, termStoreInfo: currentTermStoreInfo } as ITermInfoExt;}) :
75+
props.initialValues.map(term => { return { ...term, languageTag: currentLanguageTag, termStoreInfo: currentTermStoreInfo } as ITermInfo;}) :
7876
[]);
7977
});
8078
taxonomyService.getTermSetInfo(Guid.parse(props.termSetId))
@@ -91,10 +89,7 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
9189

9290
React.useEffect(() => {
9391
if (props.onChange) {
94-
props.onChange(selectedOptions.map(termInfoExt => {
95-
const {languageTag, termStoreInfo, ...termInfo} = termInfoExt;
96-
return termInfo;
97-
}));
92+
props.onChange(selectedOptions);
9893
}
9994
}, [selectedOptions]);
10095

@@ -116,7 +111,7 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
116111
onClosePanel();
117112
}
118113

119-
async function onResolveSuggestions(filter: string, selectedItems?: ITermInfoExt[]): Promise<ITermInfoExt[]> {
114+
async function onResolveSuggestions(filter: string, selectedItems?: ITermInfo[]): Promise<ITermInfo[]> {
120115
if (filter === '') {
121116
return [];
122117
}
@@ -128,8 +123,7 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
128123
return selectedItems.every((item) => item.id !== term.id);
129124
});
130125
const filteredTermsAndAvailable = filteredTermsWithoutSelectedItems.filter((term) => term.isAvailableForTagging.filter((t) => t.setId === props.termSetId)[0].isAvailable);
131-
const filteredTermsAndAvailableAsExt = filteredTermsAndAvailable.map(term => { return { ...term, languageTag: currentLanguageTag, termStoreInfo: currentTermStoreInfo } as ITermInfoExt;});
132-
return filteredTermsAndAvailableAsExt;
126+
return filteredTermsAndAvailable;
133127
}
134128

135129
async function onLoadParentLabel(termId: Guid): Promise<string> {
@@ -150,7 +144,7 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
150144
}
151145
}
152146

153-
function onRenderSuggestionsItem(term: ITermInfoExt, itemProps: ISuggestionItemProps<ITermInfoExt>): JSX.Element {
147+
function onRenderSuggestionsItem(term: ITermInfo, itemProps: ISuggestionItemProps<ITermInfo>): JSX.Element {
154148
return (
155149
<TermItemSuggestion
156150
onLoadParentLabel={onLoadParentLabel}
@@ -173,7 +167,7 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
173167
) : null;
174168
}
175169

176-
function getTextFromItem(termInfo: ITermInfoExt): string {
170+
function getTextFromItem(termInfo: ITermInfo): string {
177171
let labelsWithMatchingLanguageTag = termInfo.labels.filter((termLabel) => (termLabel.languageTag === currentLanguageTag));
178172
if (labelsWithMatchingLanguageTag.length === 0) {
179173
labelsWithMatchingLanguageTag = termInfo.labels.filter((termLabel) => (termLabel.languageTag === currentTermStoreInfo.defaultLanguageTag));
@@ -199,7 +193,7 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
199193
selectedItems={selectedOptions}
200194
disabled={props.disabled}
201195
styles={tagPickerStyles}
202-
onChange={(itms?: ITermInfoExt[]) => {
196+
onChange={(itms?: ITermInfo[]) => {
203197
setSelectedOptions(itms || []);
204198
setSelectedPanelOptions(itms || []);
205199
}}

‎src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from "react";
22
import { BasePicker } from "office-ui-fabric-react/lib/components/pickers/BasePicker";
33
import { IModernTermPickerProps,
4-
ITermInfoExt,
54
ITermItemProps
65
} from "./ModernTermPicker.types";
76
import { TermItem } from "../termItem/TermItem";
@@ -14,9 +13,9 @@ import { initializeComponentRef,
1413
styled
1514
} from "office-ui-fabric-react/lib/Utilities";
1615
import { ISuggestionItemProps } from "office-ui-fabric-react/lib/components/pickers/Suggestions/SuggestionsItem.types";
17-
import { Guid } from "@microsoft/sp-core-library";
16+
import { ITermInfo } from "@pnp/sp/taxonomy";
1817

19-
export class ModernTermPickerBase extends BasePicker<ITermInfoExt, IModernTermPickerProps> {
18+
export class ModernTermPickerBase extends BasePicker<ITermInfo, IModernTermPickerProps> {
2019
public static defaultProps = {
2120
onRenderItem: (props: ITermItemProps) => {
2221
let labels = props.item.labels.filter((name) => name.languageTag === props.languageTag && name.isDefault);
@@ -28,11 +27,8 @@ export class ModernTermPickerBase extends BasePicker<ITermInfoExt, IModernTermPi
2827
<TermItem {...props}>{labels[0].name}</TermItem>
2928
) : null;
3029
},
31-
onRenderSuggestionsItem: (props: ITermInfoExt, itemProps: ISuggestionItemProps<ITermInfoExt>) => {
32-
const onLoadParentLabel = async (termId: Guid): Promise<string> => {
33-
return Promise.resolve("");
34-
};
35-
return <TermItemSuggestion term={props} languageTag={props.languageTag} onLoadParentLabel={onLoadParentLabel} termStoreInfo={props.termStoreInfo} {...itemProps} />;
30+
onRenderSuggestionsItem: (props: ITermInfo, itemProps: ISuggestionItemProps<ITermInfo>) => {
31+
return <TermItemSuggestion term={props} {...itemProps} />;
3632
},
3733
};
3834

‎src/controls/modernTaxonomyPicker/modernTermPicker/ModernTermPicker.types.ts

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,9 @@ import { IPickerItemProps } from "office-ui-fabric-react/lib/components/pickers/
44
import { IStyle, ITheme } from "office-ui-fabric-react/lib/Styling";
55
import { IStyleFunctionOrObject } from "office-ui-fabric-react/lib/Utilities";
66

7-
export interface ITermInfoExt extends ITermInfo {
8-
termStoreInfo: ITermStoreInfo;
9-
languageTag: string;
10-
key: string;
11-
}
12-
export interface IModernTermPickerProps extends IBasePickerProps<ITermInfoExt> {}
7+
export interface IModernTermPickerProps extends IBasePickerProps<ITermInfo> {}
138

14-
export interface ITermItemProps extends IPickerItemProps<ITermInfoExt> {
9+
export interface ITermItemProps extends IPickerItemProps<ITermInfo> {
1510
/** Additional CSS class(es) to apply to the TermItem root element. */
1611
className?: string;
1712

‎src/controls/modernTaxonomyPicker/taxonomyPanelContents/TaxonomyPanelContents.tsx

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -46,39 +46,38 @@ import { css } from '@uifabric/utilities/lib/css';
4646
import * as strings from 'ControlStrings';
4747
import { useForceUpdate } from '@uifabric/react-hooks';
4848
import { ModernTermPicker } from '../modernTermPicker/ModernTermPicker';
49-
import { ITermInfoExt } from '../modernTermPicker/ModernTermPicker.types';
5049

5150
export interface ITaxonomyFormProps {
5251
context: BaseComponentContext;
5352
allowMultipleSelections?: boolean;
5453
termSetId: Guid;
5554
pageSize: number;
56-
selectedPanelOptions: ITermInfoExt[];
57-
setSelectedPanelOptions: React.Dispatch<React.SetStateAction<ITermInfoExt[]>>;
58-
onResolveSuggestions: (filter: string, selectedItems?: ITermInfoExt[]) => ITermInfoExt[] | PromiseLike<ITermInfoExt[]>;
55+
selectedPanelOptions: ITermInfo[];
56+
setSelectedPanelOptions: React.Dispatch<React.SetStateAction<ITermInfo[]>>;
57+
onResolveSuggestions: (filter: string, selectedItems?: ITermInfo[]) => ITermInfo[] | PromiseLike<ITermInfo[]>;
5958
onLoadMoreData: (termSetId: Guid, parentTermId?: Guid, skiptoken?: string, hideDeprecatedTerms?: boolean, pageSize?: number) => Promise<{ value: ITermInfo[], skiptoken: string }>;
6059
anchorTermInfo: ITermInfo;
6160
termSetInfo: ITermSetInfo;
6261
termStoreInfo: ITermStoreInfo;
6362
placeHolder: string;
64-
onRenderSuggestionsItem?: (props: ITermInfoExt, itemProps: ISuggestionItemProps<ITermInfoExt>) => JSX.Element;
65-
onRenderItem?: (props: IPickerItemProps<ITermInfoExt>) => JSX.Element;
66-
getTextFromItem: (item: ITermInfoExt, currentValue?: string) => string;
63+
onRenderSuggestionsItem?: (props: ITermInfo, itemProps: ISuggestionItemProps<ITermInfo>) => JSX.Element;
64+
onRenderItem?: (props: IPickerItemProps<ITermInfo>) => JSX.Element;
65+
getTextFromItem: (item: ITermInfo, currentValue?: string) => string;
6766
languageTag: string;
6867
}
6968

7069
export function TaxonomyPanelContents(props: ITaxonomyFormProps): React.ReactElement<ITaxonomyFormProps> {
7170
const [groupsLoading, setGroupsLoading] = React.useState<string[]>([]);
7271
const [groups, setGroups] = React.useState<IGroup[]>([]);
73-
const [terms, setTerms] = React.useState<ITermInfoExt[]>(props.selectedPanelOptions?.length > 0 ? [...props.selectedPanelOptions] : []);
72+
const [terms, setTerms] = React.useState<ITermInfo[]>(props.selectedPanelOptions?.length > 0 ? [...props.selectedPanelOptions] : []);
7473

7574
const forceUpdate = useForceUpdate();
7675

7776
const selection = React.useMemo(() => {
7877
const s = new Selection({onSelectionChanged: () => {
7978
props.setSelectedPanelOptions((prevOptions) => [...selection.getSelection()]);
8079
forceUpdate();
81-
}, getKey: (term: ITermInfoExt) => term.id});
80+
}, getKey: (term: any) => term.id});
8281
s.setItems(terms);
8382
for (const selectedOption of props.selectedPanelOptions) {
8483
if (s.canSelectItem) {
@@ -141,8 +140,7 @@ export function TaxonomyPanelContents(props: ITaxonomyFormProps): React.ReactEle
141140
});
142141
setTerms((prevTerms) => {
143142
const nonExistingTerms = loadedTerms.value.filter((term) => prevTerms.every((prevTerm) => prevTerm.id !== term.id));
144-
const nonExistingTermsAsExt = nonExistingTerms.map(term => { return { ...term, languageTag: props.languageTag, termStoreInfo: props.termStoreInfo } as ITermInfoExt;});
145-
return [...prevTerms, ...nonExistingTermsAsExt];
143+
return [...prevTerms, ...nonExistingTerms];
146144
});
147145
rootGroup.children = grps;
148146
rootGroup.data.skiptoken = loadedTerms.skiptoken;
@@ -204,8 +202,7 @@ export function TaxonomyPanelContents(props: ITaxonomyFormProps): React.ReactEle
204202

205203
setTerms((prevTerms) => {
206204
const nonExistingTerms = loadedTerms.value.filter((term) => prevTerms.every((prevTerm) => prevTerm.id !== term.id));
207-
const nonExistingTermsAsExt = nonExistingTerms.map(term => { return { ...term, languageTag: props.languageTag, termStoreInfo: props.termStoreInfo } as ITermInfoExt;});
208-
return [...prevTerms, ...nonExistingTermsAsExt];
205+
return [...prevTerms, ...nonExistingTerms];
209206
});
210207

211208
group.children = grps;
@@ -384,8 +381,7 @@ export function TaxonomyPanelContents(props: ITaxonomyFormProps): React.ReactEle
384381
});
385382
setTerms((prevTerms) => {
386383
const nonExistingTerms = loadedTerms.value.filter((term) => prevTerms.every((prevTerm) => prevTerm.id !== term.id));
387-
const nonExistingTermsAsExt = nonExistingTerms.map(term => { return { ...term, languageTag: props.languageTag, termStoreInfo: props.termStoreInfo } as ITermInfoExt;});
388-
return [...prevTerms, ...nonExistingTermsAsExt];
384+
return [...prevTerms, ...nonExistingTerms];
389385
});
390386
footerProps.group.children = [...footerProps.group.children, ...grps];
391387
footerProps.group.data.skiptoken = loadedTerms.skiptoken;
@@ -413,7 +409,7 @@ export function TaxonomyPanelContents(props: ITaxonomyFormProps): React.ReactEle
413409
onRenderShowAll: onRenderShowAll,
414410
};
415411

416-
const onPickerChange = (items?: ITermInfoExt[]): void => {
412+
const onPickerChange = (items?: ITermInfo[]): void => {
417413
const itemsToAdd = items.filter((item) => terms.every((term) => term.id !== item.id));
418414
setTerms((prevTerms) => [...prevTerms, ...itemsToAdd]);
419415
selection.setItems([...selection.getItems(), ...itemsToAdd], true);

‎src/controls/modernTaxonomyPicker/termItem/TermItemSuggestion.tsx

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,46 @@ import { ISuggestionItemProps } from "office-ui-fabric-react";
33
import styles from './TermItemSuggestions.module.scss';
44
import * as strings from 'ControlStrings';
55
import { Guid } from "@microsoft/sp-core-library";
6-
import { ITermStoreInfo } from "@pnp/sp/taxonomy";
7-
import { ITermInfoExt } from "../modernTermPicker/ModernTermPicker.types";
6+
import { ITermInfo, ITermStoreInfo } from "@pnp/sp/taxonomy";
87

98
export interface ITermItemSuggestionProps<T> extends ISuggestionItemProps<T> {
10-
term: ITermInfoExt;
11-
languageTag: string;
12-
termStoreInfo: ITermStoreInfo;
13-
onLoadParentLabel: (termId: Guid) => Promise<string>;
9+
term: ITermInfo;
10+
languageTag?: string;
11+
termStoreInfo?: ITermStoreInfo;
12+
onLoadParentLabel?: (termId: Guid) => Promise<string>;
1413
}
1514

16-
export function TermItemSuggestion(props: ITermItemSuggestionProps<ITermInfoExt>): JSX.Element {
15+
export function TermItemSuggestion(props: ITermItemSuggestionProps<ITermInfo>): JSX.Element {
1716
const [parentLabel, setParentLabel] = React.useState<string>("");
1817

1918
useEffect(() => {
20-
props.onLoadParentLabel(Guid.parse(props.term.id.toString()))
19+
if (props.onLoadParentLabel) {
20+
props.onLoadParentLabel(Guid.parse(props.term.id.toString()))
2121
.then((localParentInfo) => {
2222
setParentLabel(localParentInfo);
2323
});
24+
}
2425
}, []);
2526

26-
let labels = props.term.labels.filter((name) => name.languageTag === props.languageTag && name.isDefault);
27-
if (labels.length === 0) {
28-
labels = props.term.labels.filter((name) => name.languageTag === props.termStoreInfo.defaultLanguageTag && name.isDefault);
27+
let labels: {
28+
name: string;
29+
isDefault: boolean;
30+
languageTag: string;
31+
}[];
32+
33+
if (props.languageTag && props.termStoreInfo) {
34+
labels = props.term.labels.filter((name) => name.languageTag === props.languageTag && name.isDefault);
35+
if (labels.length === 0) {
36+
labels = props.term.labels.filter((name) => name.languageTag === props.termStoreInfo.defaultLanguageTag && name.isDefault);
37+
}
38+
}
39+
else {
40+
labels = props.term.labels.filter((name) => name.isDefault);
2941
}
3042

3143
return (
32-
<div className={styles.termSuggestionContainer} title={labels[0].name}>
33-
{labels[0].name}
44+
<div className={styles.termSuggestionContainer} title={labels[0]?.name}>
45+
{labels[0]?.name}
3446
{parentLabel !== "" && <div>
3547
<span className={styles.termSuggestionPath}>{`${strings.ModernTaxonomyPickerSuggestionInLabel} ${parentLabel}`}</span>
3648
</div>}

0 commit comments

Comments
 (0)