@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
281 lines • 18.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModernTaxonomyPicker = ModernTaxonomyPicker;
var tslib_1 = require("tslib");
var sp_core_library_1 = require("@microsoft/sp-core-library");
var sp_1 = require("@pnp/sp");
var react_hooks_1 = require("@uifabric/react-hooks");
var strings = tslib_1.__importStar(require("ControlStrings"));
var Button_1 = require("@fluentui/react/lib/Button");
var Label_1 = require("@fluentui/react/lib/Label");
var Panel_1 = require("@fluentui/react/lib/Panel");
var Stack_1 = require("@fluentui/react/lib/Stack");
var Tooltip_1 = require("@fluentui/react/lib/Tooltip");
var React = tslib_1.__importStar(require("react"));
var react_1 = require("react");
var SPTaxonomyService_1 = require("../../services/SPTaxonomyService");
var ModernTaxonomyPicker_module_scss_1 = tslib_1.__importDefault(require("./ModernTaxonomyPicker.module.scss"));
var ModernTermPicker_1 = require("./modernTermPicker/ModernTermPicker");
var taxonomyPanelContents_1 = require("./taxonomyPanelContents");
var TermItem_1 = require("./termItem/TermItem");
var TermItemSuggestion_1 = require("./termItem/TermItemSuggestion");
function ModernTaxonomyPicker(props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
var taxonomyService = (0, react_1.useMemo)(function () { return new SPTaxonomyService_1.SPTaxonomyService(props.context); }, [props.context]);
var _q = React.useState(false), panelIsOpen = _q[0], setPanelIsOpen = _q[1];
var initialLoadComplete = React.useRef(false);
var _r = React.useState([]), selectedOptions = _r[0], setSelectedOptions = _r[1];
var _s = React.useState([]), selectedPanelOptions = _s[0], setSelectedPanelOptions = _s[1];
var _t = React.useState(), currentTermStoreInfo = _t[0], setCurrentTermStoreInfo = _t[1];
var _u = React.useState(), currentTermSetInfo = _u[0], setCurrentTermSetInfo = _u[1];
var _v = React.useState(), currentAnchorTermInfo = _v[0], setCurrentAnchorTermInfo = _v[1];
var _w = React.useState(""), currentLanguageTag = _w[0], setCurrentLanguageTag = _w[1];
React.useEffect(function () {
sp_1.sp.setup({ pageContext: props.context.pageContext });
taxonomyService.getTermStoreInfo()
.then(function (termStoreInfo) {
setCurrentTermStoreInfo(termStoreInfo);
var languageTag = props.context.pageContext.cultureInfo.currentUICultureName !== '' && termStoreInfo.languageTags.includes(props.context.pageContext.cultureInfo.currentUICultureName) ?
props.context.pageContext.cultureInfo.currentUICultureName :
termStoreInfo.defaultLanguageTag;
setCurrentLanguageTag(languageTag);
setSelectedOptions(Array.isArray(props.initialValues) ?
props.initialValues.map(function (term) { return tslib_1.__assign(tslib_1.__assign({}, term), { languageTag: languageTag, termStoreInfo: termStoreInfo }); }) :
[]);
initialLoadComplete.current = true;
})
.catch(function () {
// no-op;
});
taxonomyService.getTermSetInfo(sp_core_library_1.Guid.parse(props.termSetId))
.then(function (termSetInfo) {
setCurrentTermSetInfo(termSetInfo);
})
.catch(function () {
// no-op;
});
if (props.anchorTermId && props.anchorTermId !== sp_core_library_1.Guid.empty.toString()) {
taxonomyService.getTermById(sp_core_library_1.Guid.parse(props.termSetId), props.anchorTermId ? sp_core_library_1.Guid.parse(props.anchorTermId) : sp_core_library_1.Guid.empty)
.then(function (anchorTermInfo) {
setCurrentAnchorTermInfo(anchorTermInfo);
})
.catch(function () {
// no-op;
});
}
}, []);
React.useEffect(function () {
if (props.onChange && initialLoadComplete.current) {
props.onChange(selectedOptions);
}
}, [selectedOptions]);
function onOpenPanel() {
if (props.disabled === true) {
return;
}
setSelectedPanelOptions(selectedOptions);
setPanelIsOpen(true);
}
function onClosePanel() {
setSelectedPanelOptions([]);
setPanelIsOpen(false);
}
function onApply() {
if (props.isPathRendered) {
addParentInformationToTerms(tslib_1.__spreadArray([], selectedPanelOptions, true))
.then(function (selectedTermsWithPath) {
setSelectedOptions(selectedTermsWithPath);
})
.catch(function () {
// no-op;
});
}
else {
setSelectedOptions(tslib_1.__spreadArray([], selectedPanelOptions, true));
}
onClosePanel();
}
function getParentTree(term) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var currentParent, fullTerm, _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
currentParent = term.parent;
if (!!currentParent) return [3 /*break*/, 2];
return [4 /*yield*/, taxonomyService.getTermById(sp_core_library_1.Guid.parse(props.termSetId), sp_core_library_1.Guid.parse(term.id))];
case 1:
fullTerm = _b.sent();
currentParent = fullTerm.parent;
_b.label = 2;
case 2:
if (!!currentParent) return [3 /*break*/, 3];
return [2 /*return*/, undefined];
case 3:
_a = currentParent;
return [4 /*yield*/, getParentTree(currentParent)];
case 4:
_a.parent = _b.sent();
return [2 /*return*/, currentParent];
}
});
});
}
function addParentInformationToTerms(terms) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var _i, terms_1, term, termParent;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
_i = 0, terms_1 = terms;
_a.label = 1;
case 1:
if (!(_i < terms_1.length)) return [3 /*break*/, 4];
term = terms_1[_i];
return [4 /*yield*/, getParentTree(term)];
case 2:
termParent = _a.sent();
term.parent = termParent;
_a.label = 3;
case 3:
_i++;
return [3 /*break*/, 1];
case 4: return [2 /*return*/, terms];
}
});
});
}
var searchFilter = null;
function onResolveSuggestions(filter, selectedItems) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var filteredTerms, filteredTermsWithoutSelectedItems, filteredTermsAndAvailable;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
searchFilter = filter;
if (filter === '') {
return [2 /*return*/, []];
}
return [4 /*yield*/, taxonomyService.searchTerm(sp_core_library_1.Guid.parse(props.termSetId), filter, currentLanguageTag, props.anchorTermId ? sp_core_library_1.Guid.parse(props.anchorTermId) : sp_core_library_1.Guid.empty, props.allowSelectingChildren)];
case 1:
filteredTerms = _a.sent();
filteredTermsWithoutSelectedItems = filteredTerms.filter(function (term) {
if (!selectedItems || selectedItems.length === 0) {
return true;
}
return selectedItems.every(function (item) { return item.id !== term.id; });
});
filteredTermsAndAvailable = filteredTermsWithoutSelectedItems
.filter(function (term) {
return term.isAvailableForTagging
.filter(function (t) { return t.setId === props.termSetId; })[0].isAvailable;
});
return [2 /*return*/, filteredTermsAndAvailable];
}
});
});
}
function onLoadParentLabel(termId) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var termInfo, labelsWithMatchingLanguageTag, termSetNames;
var _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, taxonomyService.getTermById(sp_core_library_1.Guid.parse(props.termSetId), termId)];
case 1:
termInfo = _b.sent();
if (termInfo.parent) {
labelsWithMatchingLanguageTag = termInfo.parent.labels.filter(function (termLabel) { return (termLabel.languageTag === currentLanguageTag); });
if (labelsWithMatchingLanguageTag.length === 0) {
labelsWithMatchingLanguageTag = termInfo.parent.labels.filter(function (termLabel) { return (termLabel.languageTag === currentTermStoreInfo.defaultLanguageTag); });
}
return [2 /*return*/, (_a = labelsWithMatchingLanguageTag[0]) === null || _a === void 0 ? void 0 : _a.name];
}
else {
termSetNames = currentTermSetInfo.localizedNames.filter(function (name) { return name.languageTag === currentLanguageTag; });
if (termSetNames.length === 0) {
termSetNames = currentTermSetInfo.localizedNames.filter(function (name) { return name.languageTag === currentTermStoreInfo.defaultLanguageTag; });
}
return [2 /*return*/, termSetNames[0].name];
}
return [2 /*return*/];
}
});
});
}
function onRenderSuggestionsItem(term, itemProps) {
return (React.createElement(TermItemSuggestion_1.TermItemSuggestion, tslib_1.__assign({ onLoadParentLabel: onLoadParentLabel, term: term, termStoreInfo: currentTermStoreInfo, languageTag: currentLanguageTag, searchFilter: searchFilter }, itemProps)));
}
function getLabelsForCurrentLanguage(item) {
var labels = item.labels.filter(function (name) { return name.languageTag === currentLanguageTag && name.isDefault; });
if (labels.length === 0) {
labels = item.labels.filter(function (name) { return name.languageTag === currentTermStoreInfo.defaultLanguageTag && name.isDefault; });
}
return labels;
}
function onRenderItem(itemProps) {
var termItemProps = itemProps;
var labels = getLabelsForCurrentLanguage(itemProps.item);
var fullParentPrefixes = [labels[0].name];
if (props.isPathRendered) {
var currentTermProps = itemProps.item;
while (currentTermProps.parent !== undefined) {
var currentParentLabels = getLabelsForCurrentLanguage(currentTermProps.parent);
fullParentPrefixes.push(currentParentLabels[0].name);
currentTermProps = currentTermProps.parent;
}
fullParentPrefixes = fullParentPrefixes.reverse();
}
return labels.length > 0 ? (React.createElement(TermItem_1.TermItem, tslib_1.__assign({ languageTag: currentLanguageTag, termStoreInfo: currentTermStoreInfo, name: fullParentPrefixes.join(":") }, termItemProps), fullParentPrefixes.join(":"))) : null;
}
function onTermPickerChange(itms) {
if (itms && props.isPathRendered) {
addParentInformationToTerms(itms)
.then(function (itmsWithPath) {
setSelectedOptions(itmsWithPath || []);
setSelectedPanelOptions(itmsWithPath || []);
})
.catch(function () {
//no-op;
});
}
else {
setSelectedOptions(itms || []);
setSelectedPanelOptions(itms || []);
}
}
function getTextFromItem(termInfo) {
var _a;
var labelsWithMatchingLanguageTag = termInfo.labels.filter(function (termLabel) { return (termLabel.languageTag === currentLanguageTag); });
if (labelsWithMatchingLanguageTag.length === 0) {
labelsWithMatchingLanguageTag = termInfo.labels.filter(function (termLabel) { return (termLabel.languageTag === currentTermStoreInfo.defaultLanguageTag); });
}
return (_a = labelsWithMatchingLanguageTag[0]) === null || _a === void 0 ? void 0 : _a.name;
}
var calloutProps = { gapSpace: 0 };
var tooltipId = (0, react_hooks_1.useId)('tooltip');
var hostStyles = { root: { display: 'inline-block' } };
var addTermButtonStyles = { rootHovered: { backgroundColor: 'inherit' }, rootPressed: { backgroundColor: 'inherit' } };
var termPickerStyles = { input: { minheight: 34 }, text: { minheight: 34 } };
return (React.createElement("div", { className: ModernTaxonomyPicker_module_scss_1.default.modernTaxonomyPicker },
props.label && React.createElement(Label_1.Label, { required: props.required }, props.label),
React.createElement("div", { className: ModernTaxonomyPicker_module_scss_1.default.termField },
React.createElement("div", { className: ModernTaxonomyPicker_module_scss_1.default.termFieldInput },
React.createElement(ModernTermPicker_1.ModernTermPicker, tslib_1.__assign({}, props.termPickerProps, { removeButtonAriaLabel: strings.ModernTaxonomyPickerRemoveButtonText, onResolveSuggestions: (_b = (_a = props.termPickerProps) === null || _a === void 0 ? void 0 : _a.onResolveSuggestions) !== null && _b !== void 0 ? _b : onResolveSuggestions, itemLimit: props.allowMultipleSelections ? undefined : 1, selectedItems: selectedOptions, disabled: props.disabled, styles: (_d = (_c = props.termPickerProps) === null || _c === void 0 ? void 0 : _c.styles) !== null && _d !== void 0 ? _d : termPickerStyles, onChange: onTermPickerChange, getTextFromItem: getTextFromItem, pickerSuggestionsProps: (_f = (_e = props.termPickerProps) === null || _e === void 0 ? void 0 : _e.pickerSuggestionsProps) !== null && _f !== void 0 ? _f : { noResultsFoundText: strings.ModernTaxonomyPickerNoResultsFound }, inputProps: (_h = (_g = props.termPickerProps) === null || _g === void 0 ? void 0 : _g.inputProps) !== null && _h !== void 0 ? _h : {
'aria-label': props.placeHolder || strings.ModernTaxonomyPickerDefaultPlaceHolder,
placeholder: props.placeHolder || strings.ModernTaxonomyPickerDefaultPlaceHolder
}, onRenderSuggestionsItem: (_j = props.onRenderSuggestionsItem) !== null && _j !== void 0 ? _j : onRenderSuggestionsItem, onRenderItem: (_k = props.onRenderItem) !== null && _k !== void 0 ? _k : onRenderItem, themeVariant: props.themeVariant }))),
React.createElement("div", { className: ModernTaxonomyPicker_module_scss_1.default.termFieldButton },
React.createElement(Tooltip_1.TooltipHost, { content: strings.ModernTaxonomyPickerAddTagButtonTooltip, id: tooltipId, calloutProps: calloutProps, styles: hostStyles },
React.createElement(Button_1.IconButton, { disabled: props.disabled, styles: addTermButtonStyles, iconProps: { iconName: 'Tag' }, onClick: onOpenPanel, "aria-describedby": tooltipId })))),
React.createElement(Panel_1.Panel, { isOpen: panelIsOpen, hasCloseButton: true, closeButtonAriaLabel: strings.ModernTaxonomyPickerPanelCloseButtonText, onDismiss: onClosePanel, isLightDismiss: props.isLightDismiss, isBlocking: props.isBlocking, type: props.customPanelWidth ? Panel_1.PanelType.custom : Panel_1.PanelType.medium, customWidth: props.customPanelWidth ? "".concat(props.customPanelWidth, "px") : undefined, headerText: props.panelTitle, onRenderFooterContent: function () {
var horizontalGapStackTokens = {
childrenGap: 10,
};
return (React.createElement(Stack_1.Stack, { horizontal: true, disableShrink: true, tokens: horizontalGapStackTokens },
React.createElement(Button_1.PrimaryButton, { text: strings.ModernTaxonomyPickerApplyButtonText, value: 'Apply', onClick: onApply }),
React.createElement(Button_1.DefaultButton, { text: strings.ModernTaxonomyPickerCancelButtonText, value: 'Cancel', onClick: onClosePanel })));
} }, props.termSetId && (React.createElement("div", { key: props.termSetId },
React.createElement(taxonomyPanelContents_1.TaxonomyPanelContents, { allowMultipleSelections: props.allowMultipleSelections, onResolveSuggestions: (_m = (_l = props.termPickerProps) === null || _l === void 0 ? void 0 : _l.onResolveSuggestions) !== null && _m !== void 0 ? _m : onResolveSuggestions, onLoadMoreData: taxonomyService.getTerms, anchorTermInfo: currentAnchorTermInfo, termSetInfo: currentTermSetInfo, termStoreInfo: currentTermStoreInfo, pageSize: 50, selectedPanelOptions: selectedPanelOptions, setSelectedPanelOptions: setSelectedPanelOptions, placeHolder: props.placeHolder || strings.ModernTaxonomyPickerDefaultPlaceHolder, onRenderSuggestionsItem: (_o = props.onRenderSuggestionsItem) !== null && _o !== void 0 ? _o : onRenderSuggestionsItem, onRenderItem: (_p = props.onRenderItem) !== null && _p !== void 0 ? _p : onRenderItem, getTextFromItem: getTextFromItem, languageTag: currentLanguageTag, themeVariant: props.themeVariant, termPickerProps: props.termPickerProps, onRenderActionButton: props.onRenderActionButton, allowSelectingChildren: props.allowSelectingChildren }))))));
}
//# sourceMappingURL=ModernTaxonomyPicker.js.map