@pnp/spfx-property-controls/lib-commonjs/propertyFields/editableComboBox/PropertyFieldEditableComboBoxHost.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 ComboBox_1 = require("@fluentui/react/lib/ComboBox");
const Label_1 = require("@fluentui/react/lib/Label");
const Icon_1 = require("@fluentui/react/lib/Icon");
const Tooltip_1 = require("@fluentui/react/lib/Tooltip");
const PropertyFieldEditableComboBoxHost_module_scss_1 = tslib_1.__importDefault(require("./PropertyFieldEditableComboBoxHost.module.scss"));
const telemetry = tslib_1.__importStar(require("../../common/telemetry"));
/**
 * @class PropertyFieldEditableComboBoxHost
 * @description Core JSX Element for displaying and managing an editable combo box
 */
class PropertyFieldEditableComboBoxHost extends React.Component {
    constructor(props, state) {
        super(props);
        this.logStyle = "background: crimson; padding: 5px; border-radius: 5px; color: white";
        this.box = React.createRef();
        telemetry.track('PropertyFieldEditableComboBox', {
            disabled: props.disabled
        });
        this.state = {
            options: props.options,
            selectedText: props.selectedText
        };
    }
    /**
     * @function optionChanged
     * @param event
     * @param option
     * @param index
     * @param value
     * @description Handles when the selected option has changed or whether a new option has been added
     */
    optionChanged(event, option, index, value) {
        //Determine if the option was selected or if a new value was added
        let txt;
        let wasAdded = false;
        if (option !== undefined) {
            //An option was selected
            txt = option.text;
            this.setState({ selectedText: txt });
        }
        else {
            //A new option was provided
            txt = value;
            //Add the new category to the list, if it is not undefined and then reload the list
            if (txt !== undefined && txt !== '') {
                //this.log(`${val} is being added to the list of categories...`);
                this.setState({
                    options: [...this.state.options, { key: txt, text: txt }]
                });
                this.setState({
                    selectedText: txt
                });
                wasAdded = true;
            }
            else if (txt === '') {
                this.setState({ selectedText: txt });
                //this.log(`Selected category state blanked out`);
            }
        }
        //this.log(`${val} was selected!`);
        this.props.onOptionChanged(txt, wasAdded);
    }
    /**
     * @function onKeyDown
     * @param event the keyboard event incoming
     * @description monitors the keystrokes to stop the user from exceeding the `maxFillInLength`
     */
    onKeyDown(event) {
        if (this.props.maxFillInLength !== undefined) {
            if (event.key.toLowerCase() !== 'backspace') {
                const text = event.target.value;
                if (text !== undefined && text !== null) {
                    if (text.length >= this.props.maxFillInLength) {
                        this.log(`Max character length hit!!! [${this.props.maxFillInLength.toString()}] : Stopping new characters.`);
                        event.preventDefault();
                    }
                }
            }
        }
    }
    /**
     * @function log
     * @param val the string to write out to the console
     * @description lightweight logging to the console, with just a little custom styling
     */
    log(val) {
        console.log(`%c>> ${val}`, this.logStyle);
    }
    /**
     * @function render
     * @description Renders out the Fluent UI `ComboBox` along with some labeling and tooltip components
     */
    render() {
        return (React.createElement(React.Fragment, null,
            React.createElement("div", { className: PropertyFieldEditableComboBoxHost_module_scss_1.default.catLabelContainer },
                React.createElement(Label_1.Label, null, this.props.label),
                (this.props.showTooltip ?
                    React.createElement(Tooltip_1.TooltipHost, { content: this.props.tooltipText, className: PropertyFieldEditableComboBoxHost_module_scss_1.default.tooltip },
                        React.createElement(Icon_1.FontIcon, { iconName: "Info", className: PropertyFieldEditableComboBoxHost_module_scss_1.default.fontIcon }))
                    : null)),
            React.createElement(ComboBox_1.ComboBox, { componentRef: this.box, onChange: (event, option, index, value) => this.optionChanged(event, option, index, value), text: this.state.selectedText, allowFreeform: true, autoComplete: "on", onKeyDown: (event) => this.onKeyDown(event), options: this.state.options, disabled: this.props.disabled })));
    }
}
exports.default = PropertyFieldEditableComboBoxHost;
//# sourceMappingURL=PropertyFieldEditableComboBoxHost.js.map