@pnp/spfx-property-controls/lib-commonjs/propertyFields/termPicker/Term.js

Reusable property pane controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Checkbox_1 = require("@fluentui/react/lib/Checkbox");
const PropertyFieldTermPickerHost_module_scss_1 = tslib_1.__importDefault(require("./PropertyFieldTermPickerHost.module.scss"));
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
const PropertyFieldTermPickerHost_1 = require("./PropertyFieldTermPickerHost");
/**
 * Term component
 * Renders a selectable term
 */
class Term extends React.Component {
    constructor(props) {
        super(props);
        // Check if current term is selected
        const active = this.props.activeNodes.filter(item => item.key === this.props.term.Id);
        this.state = {
            selected: active.length > 0
        };
        this._handleChange = this._handleChange.bind(this);
    }
    /**
     * Handle the checkbox change trigger
     */
    _handleChange(ev, isChecked) {
        this.setState({
            selected: isChecked
        });
        this.props.changedCallback(this.props.term, this.props.termGroup, isChecked);
    }
    /**
     * Lifecycle event hook when component retrieves new properties
     * @param nextProps
     */
    UNSAFE_componentWillReceiveProps(nextProps) {
        // If multi-selection is turned off, only a single term can be selected
        if (!this.props.multiSelection) {
            const active = nextProps.activeNodes.filter(item => item.key === this.props.term.Id);
            this.setState({
                selected: active.length > 0
            });
        }
    }
    /**
     * Get the right class name for the term
     */
    getClassName() {
        if (this.props.term.IsDeprecated) {
            return PropertyFieldTermPickerHost_module_scss_1.default.termDisabled;
        }
        if (!this.props.term.IsAvailableForTagging) {
            return PropertyFieldTermPickerHost_module_scss_1.default.termNoTagging;
        }
        return PropertyFieldTermPickerHost_module_scss_1.default.termEnabled;
    }
    render() {
        const styleProps = {
            marginLeft: `${(this.props.term.PathDepth * 30)}px`
        };
        return (React.createElement("div", { className: `${PropertyFieldTermPickerHost_module_scss_1.default.listItem} ${PropertyFieldTermPickerHost_module_scss_1.default.term}`, style: styleProps }, this.props.isTermSelectable ?
            React.createElement(Checkbox_1.Checkbox, { checked: this.state.selected, disabled: this.props.term.IsDeprecated || !this.props.term.IsAvailableForTagging || this.props.disabled, className: this.getClassName(), label: this.props.term.Name, onChange: this._handleChange }) :
            (React.createElement("div", null,
                React.createElement("img", { src: PropertyFieldTermPickerHost_1.TERM_IMG, alt: strings.TermPickerMenuTerm, title: strings.TermPickerMenuTerm }),
                " ",
                this.props.term.Name))));
    }
}
exports.default = Term;
//# sourceMappingURL=Term.js.map