@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
165 lines • 8.59 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Spinner_1 = require("@fluentui/react/lib/Spinner");
const Checkbox_1 = require("@fluentui/react/lib/Checkbox");
const ISPTermStorePickerService_1 = require("../../services/ISPTermStorePickerService");
const PropertyFieldTermPickerHost_1 = require("./PropertyFieldTermPickerHost");
const Term_1 = tslib_1.__importDefault(require("./Term"));
const PropertyFieldTermPickerHost_module_scss_1 = tslib_1.__importDefault(require("./PropertyFieldTermPickerHost.module.scss"));
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
/**
* Term set component
*/
class TermSet extends React.Component {
constructor(props) {
super(props);
/**
* The term set selection changed
*/
this.termSetSelectionChange = (ev, isChecked) => {
const { termset } = this.props;
this.props.changedCallback({
Id: ISPTermStorePickerService_1.TermStorePickerServiceHelper.cleanGuid(termset.Id),
Name: termset.Name,
PathOfTerm: "",
_ObjectType_: termset._ObjectType_,
_ObjectIdentity_: termset._ObjectIdentity_,
Description: termset.Description,
IsDeprecated: null,
IsAvailableForTagging: null,
IsRoot: null,
TermSet: termset
}, this.props.termGroup, isChecked);
};
this.state = {
expanded: false,
loaded: false,
terms: []
};
// Check if the termset has to be automatically opened
const selectedTermsInSet = this.props.activeNodes.filter(node => node.termSet === this.props.termset.Id);
if (selectedTermsInSet.length > 0) {
this._autoLoadTerms();
}
this._handleClick = this._handleClick.bind(this);
this._loadTerms = this._loadTerms.bind(this);
}
/**
* Autoload the terms of the term set
*/
_autoLoadTerms() {
this.props.autoExpand();
this._loadTerms(true).then(() => { }).catch(() => { });
}
/**
* Handle the click event: collapse or expand
*/
_handleClick() {
if (this.props.areTermsHidden) {
return;
}
this.setState({
expanded: !this.state.expanded
});
if (!this.state.expanded) {
this._loadTerms().then(() => { }).catch(() => { });
}
}
/**
* Load the terms for the current term set
*/
_loadTerms(autoExpand) {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
// Check if there are already terms loaded
if (!this.state.loaded) {
// Receive all the terms for the current term set
const terms = this.props.areTermsHidden
? null
: yield this.props.termsService.getAllTerms(this.props.termset);
if (terms !== null) {
if (this.props.anchorId) {
const anchorTerm = terms.filter(t => t.Id.toLocaleLowerCase() === this.props.anchorId.toLocaleLowerCase()).shift();
if (anchorTerm) {
const anchorTermPath = `${anchorTerm.PathOfTerm};`;
this._anchorName = anchorTerm.Name;
let anchorTerms = terms.filter(t => t.PathOfTerm.substring(0, anchorTermPath.length) === anchorTermPath && t.Id !== anchorTerm.Id);
anchorTerms = anchorTerms.map(term => {
term.PathDepth = term.PathDepth - anchorTerm.PathDepth;
return term;
});
this.setState({
terms: anchorTerms,
loaded: true,
expanded: typeof autoExpand !== 'undefined' ? autoExpand : this.state.expanded
});
}
else {
//just set terms
this.setState({
terms: terms,
loaded: true,
expanded: typeof autoExpand !== 'undefined' ? autoExpand : this.state.expanded
});
}
}
else {
this.setState({
terms: terms,
loaded: true,
expanded: typeof autoExpand !== 'undefined' ? autoExpand : this.state.expanded
});
}
}
else {
this.setState({
terms: [],
loaded: true
});
}
}
});
}
render() {
// Specify the inline styling to show or hide the termsets
const styleProps = {
display: this.state.expanded ? 'block' : 'none'
};
let termElm = React.createElement("div", null);
// Check if the terms have been loaded
if (this.state.expanded) {
if (this.state.loaded) {
if (this.state.terms.length > 0) {
termElm = (React.createElement("div", { style: styleProps }, this.state.terms.map(term => {
let disabled = false;
if (this.props.disabledTermIds && this.props.disabledTermIds.length > 0) {
// Check if the current term ID exists in the disabled term IDs array
disabled = this.props.disabledTermIds.indexOf(term.Id) !== -1;
}
return React.createElement(Term_1.default, { key: term.Id, term: term, termset: this.props.termset.Id, termGroup: this.props.termGroup, activeNodes: this.props.activeNodes, changedCallback: this.props.changedCallback, multiSelection: this.props.multiSelection, disabled: disabled, isTermSelectable: this.props.areTermsSelectable });
})));
}
else {
termElm = React.createElement("div", { className: `${PropertyFieldTermPickerHost_module_scss_1.default.listItem} ${PropertyFieldTermPickerHost_module_scss_1.default.term}` }, strings.TermPickerNoTerms);
}
}
else {
termElm = React.createElement(Spinner_1.Spinner, { size: Spinner_1.SpinnerSize.medium });
}
}
return (React.createElement("div", null,
React.createElement("div", { className: `${PropertyFieldTermPickerHost_module_scss_1.default.listItem} ${PropertyFieldTermPickerHost_module_scss_1.default.termset} ${this.props.isTermSetSelectable && !this.props.areTermsHidden && !this.props.anchorId ? PropertyFieldTermPickerHost_module_scss_1.default.termSetSelectable : ""}`, onClick: this._handleClick },
React.createElement("img", { className: `${this.props.areTermsHidden ? PropertyFieldTermPickerHost_module_scss_1.default.termsHidden : ""}`, src: this.state.expanded ? PropertyFieldTermPickerHost_1.EXPANDED_IMG : PropertyFieldTermPickerHost_1.COLLAPSED_IMG, alt: strings.TermPickerExpandTitle, title: strings.TermPickerExpandTitle }),
// Show the termset selection box
(this.props.isTermSetSelectable && !this.props.anchorId) &&
React.createElement(Checkbox_1.Checkbox, { className: PropertyFieldTermPickerHost_module_scss_1.default.termSetSelector, checked: this.props.activeNodes.filter(a => a.path === "" && a.termSet.indexOf(a.key) !== -1 && this.props.termset.Id.indexOf(a.key) !== -1).length >= 1, onChange: this.termSetSelectionChange }),
React.createElement("img", { src: this.props.anchorId ? PropertyFieldTermPickerHost_1.TERM_IMG : PropertyFieldTermPickerHost_1.TERMSET_IMG, alt: strings.TermPickerMenuTermSet, title: strings.TermPickerMenuTermSet }),
this.props.anchorId ?
this._anchorName :
this.props.termset.Name),
React.createElement("div", { style: styleProps }, termElm)));
}
}
exports.default = TermSet;
//# sourceMappingURL=TermSet.js.map