@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
82 lines • 4.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const PropertyFieldTermPickerHost_1 = require("./PropertyFieldTermPickerHost");
const TermSet_1 = tslib_1.__importDefault(require("./TermSet"));
const PropertyFieldTermPickerHost_module_scss_1 = tslib_1.__importDefault(require("./PropertyFieldTermPickerHost.module.scss"));
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
const Spinner_1 = require("@fluentui/react/lib/Spinner");
/**
* Term group component
*/
class TermGroup extends React.Component {
constructor(props) {
super(props);
this.state = {
expanded: false,
loaded: !!(props.group.TermSets && props.group.TermSets._Child_Items_)
};
// Check if the term group has to be automatically opened
const selectedTermsInGroup = this.props.activeNodes.filter(node => node.termGroup === this.props.group.Id);
if (selectedTermsInGroup.length > 0) {
this._loadTermSets(true).then(() => { }).catch(() => { });
}
this._handleClick = this._handleClick.bind(this);
this._autoExpand = this._autoExpand.bind(this);
}
/**
* Handle the click event: collapse or expand
*/
_handleClick() {
const isExpanded = this.state.expanded; // current state
this.setState({
expanded: !isExpanded
});
if (!isExpanded) {
this._loadTermSets().then(() => { }).catch(() => { });
}
}
/**
* Function to auto expand the termset
*/
_autoExpand() {
this.setState({
expanded: true
});
}
_loadTermSets(autoExpand) {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
if (this.state.loaded) {
return;
}
const termSets = yield this.props.termsService.getGroupTermSets(this.props.group);
//
// NOTE: the next line is kinda incorrect from React perspective as we're modifying props.
// But it is done to avoid redux usage or reimplementing the whole logic
//
this.props.group.TermSets = termSets;
this.setState({
loaded: true,
expanded: typeof autoExpand !== 'undefined' ? autoExpand : this.state.expanded
});
});
}
render() {
// Specify the inline styling to show or hide the termsets
const styleProps = {
display: this.state.expanded ? 'block' : 'none'
};
return (React.createElement("div", null,
React.createElement("div", { className: `${PropertyFieldTermPickerHost_module_scss_1.default.listItem}`, onClick: this._handleClick },
React.createElement("img", { src: this.state.expanded ? PropertyFieldTermPickerHost_1.EXPANDED_IMG : PropertyFieldTermPickerHost_1.COLLAPSED_IMG, alt: strings.TermPickerExpandNode, title: strings.TermPickerExpandNode }),
React.createElement("img", { src: PropertyFieldTermPickerHost_1.GROUP_IMG, title: strings.TermPickerMenuGroup, alt: strings.TermPickerMenuGroup }),
" ",
this.props.group.Name),
React.createElement("div", { style: styleProps }, this.state.loaded ? this.props.group.TermSets._Child_Items_.map(termset => {
return React.createElement(TermSet_1.default, { key: termset.Id, termset: termset, termGroup: this.props.group.Id, termstore: this.props.termstore, termsService: this.props.termsService, autoExpand: this._autoExpand, activeNodes: this.props.activeNodes, changedCallback: this.props.changedCallback, multiSelection: this.props.multiSelection, isTermSetSelectable: this.props.isTermSetSelectable, areTermsSelectable: this.props.areTermsSelectable, areTermsHidden: this.props.areTermsHidden, disabledTermIds: this.props.disabledTermIds, anchorId: this.props.anchorId });
}) : React.createElement(Spinner_1.Spinner, { size: Spinner_1.SpinnerSize.medium }))));
}
}
exports.default = TermGroup;
//# sourceMappingURL=TermGroup.js.map