@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
142 lines • 7.12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TermBasePicker = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Icon_1 = require("@fluentui/react/lib/Icon");
const Pickers_1 = require("@fluentui/react/lib/Pickers");
const PropertyFieldTermPickerHost_module_scss_1 = tslib_1.__importDefault(require("./PropertyFieldTermPickerHost.module.scss"));
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
const ISPTermStorePickerService_1 = require("../../services/ISPTermStorePickerService");
class TermBasePicker extends Pickers_1.BasePicker {
}
exports.TermBasePicker = TermBasePicker;
class TermPicker extends React.Component {
/**
* Constructor method
*/
constructor(props) {
super(props);
this.onRenderItem = this.onRenderItem.bind(this);
this.onRenderSuggestionsItem = this.onRenderSuggestionsItem.bind(this);
this.onFilterChanged = this.onFilterChanged.bind(this);
this.onGetTextFromItem = this.onGetTextFromItem.bind(this);
this.state = {
terms: this.props.value
};
}
/**
* UNSAFE_componentWillReceiveProps method
*/
UNSAFE_componentWillReceiveProps(nextProps) {
// check to see if props is different to avoid re-rendering
const newKeys = nextProps.value.map(a => a.key);
const currentKeys = this.state.terms.map(a => a.key);
newKeys.sort();
currentKeys.sort();
if (newKeys.join(',') !== currentKeys.join(',')) {
this.setState({ terms: nextProps.value });
}
}
/**
* Renders the item in the picker
*/
onRenderItem(term) {
return (React.createElement("div", { className: PropertyFieldTermPickerHost_module_scss_1.default.pickedTermRoot, key: term.index, "data-selection-index": term.index, "data-is-focusable": !term.disabled && true },
React.createElement("span", { className: PropertyFieldTermPickerHost_module_scss_1.default.pickedTermText }, term.item.name),
!term.disabled &&
React.createElement("span", { className: PropertyFieldTermPickerHost_module_scss_1.default.pickedTermCloseIcon, onClick: term.onRemoveItem },
React.createElement(Icon_1.Icon, { iconName: "Cancel", "aria-hidden": "true" }))));
}
/**
* Renders the suggestions in the picker
*/
onRenderSuggestionsItem(term) {
let termParent = term.termSetName;
let termTitle = `${term.name} [${term.termSetName}]`;
if (term.path.indexOf(";") !== -1) {
const splitPath = term.path.split(";");
termParent = splitPath[splitPath.length - 2];
splitPath.pop();
termTitle = `${term.name} [${term.termSetName}:${splitPath.join(':')}]`;
}
return (React.createElement("div", { className: PropertyFieldTermPickerHost_module_scss_1.default.termSuggestion, title: termTitle },
React.createElement("div", null, term.name),
// Check if term or term set is fetched
term.termSet.indexOf(term.key) !== -1 ? (React.createElement("div", { className: PropertyFieldTermPickerHost_module_scss_1.default.termSuggestionSubTitle }, strings.TermPickerTermSetLabel)) : (React.createElement("div", { className: PropertyFieldTermPickerHost_module_scss_1.default.termSuggestionSubTitle },
" ",
strings.TermPickerInLabel,
" ",
termParent))));
}
/**
* When Filter Changes a new search for suggestions
*/
onFilterChanged(filterText, tagList) {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
const { allowMultipleSelections, isTermSetSelectable, disabledTermIds } = this.props;
// Only allow to select other tags if multi-selection is enabled
if (filterText !== "" && (allowMultipleSelections || tagList.length === 0)) {
const { termsService } = this.props;
const terms = yield termsService.searchTermsByName(filterText);
// Check if the termset can be selected
if (isTermSetSelectable) {
// Retrieve the current termset
const termSets = yield termsService.getTermSets();
// Check if termset was retrieved and if it contains the filter value
if (termSets && termSets.length > 0) {
for (const termSet of termSets) {
if (termSet.Name.toLowerCase().indexOf(filterText.toLowerCase()) === 0) {
// Add the termset to the suggestion list
terms.push({
key: ISPTermStorePickerService_1.TermStorePickerServiceHelper.cleanGuid(termSet.Id),
name: termSet.Name,
path: "",
termSet: termSet.Id,
termGroup: termSet.Group
});
}
}
}
}
// Filter out the terms which are already set
const filteredTerms = [];
for (const term of terms) {
let canBePicked = true;
// Check if the term is in the disabled list
if (disabledTermIds && disabledTermIds.length > 0) {
if (disabledTermIds.indexOf(term.key) !== -1) {
canBePicked = false;
}
}
// Check if the term can be used
if (canBePicked) {
// Only retrieve the terms which are not yet tagged
if (tagList.filter(tag => tag.key === term.key).length === 0) {
filteredTerms.push(term);
}
}
}
return filteredTerms;
}
else {
return Promise.resolve([]);
}
});
}
/**
* gets the text from an item
*/
onGetTextFromItem(item) {
return item.name;
}
/**
* Render method
*/
render() {
return (React.createElement("div", null,
React.createElement(TermBasePicker, { disabled: this.props.disabled, onResolveSuggestions: this.onFilterChanged, onRenderSuggestionsItem: this.onRenderSuggestionsItem, getTextFromItem: this.onGetTextFromItem, onRenderItem: this.onRenderItem, defaultSelectedItems: this.props.value, selectedItems: this.state.terms, itemLimit: !this.props.allowMultipleSelections ? 1 : undefined, onChange: this.props.onChanged, resolveDelay: this.props.resolveDelay, className: PropertyFieldTermPickerHost_module_scss_1.default.termBasePicker })));
}
}
exports.default = TermPicker;
//# sourceMappingURL=TermPicker.js.map