@pnp/spfx-property-controls/lib-commonjs/propertyFields/iconPicker/PropertyFieldIconPickerHost.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 Button_1 = require("@fluentui/react/lib/Button");
const telemetry = tslib_1.__importStar(require("../../common/telemetry"));
const Dialog_1 = require("@fluentui/react/lib/Dialog");
const Panel_1 = require("@fluentui/react/lib/Panel");
const Label_1 = require("@fluentui/react/lib/Label");
const GeneralHelper_1 = require("../../helpers/GeneralHelper");
const IconSelector_1 = require("../../common/iconSelector/IconSelector");
class PropertyFieldIconPickerHost extends React.Component {
    constructor(props) {
        super(props);
        this.closePanel = () => {
            this.setState({
                currentIcon: this.props.currentIcon,
                isPanelOpen: false
            });
        };
        this.iconPickerOnClick = () => {
            this.setState({
                isPanelOpen: true
            });
        };
        this.iconOnClick = (iconName) => {
            if (this.props.onChanged) {
                if (typeof this.props.onChanged !== 'undefined' && this.props.onChanged !== null) {
                    this.props.onChange(this.props.targetProperty, iconName);
                }
            }
            this.setState({
                currentIcon: iconName
            });
        };
        this.confirmSelection = () => {
            if (this.props.onSave) {
                this.props.onSave(this.state.currentIcon);
                (0, GeneralHelper_1.setPropertyValue)(this.props.properties, this.props.targetProperty, this.state.currentIcon);
                this.props.onPropertyChange(this.props.targetProperty, this.props.currentIcon, this.state.currentIcon);
                if (typeof this.props.onChange !== 'undefined' && this.props.onChange !== null) {
                    this.props.onChange(this.props.targetProperty, this.state.currentIcon);
                }
            }
            this.setState({
                isPanelOpen: false
            });
        };
        telemetry.track('PropertyFieldIconPicker', {
            disabled: props.disabled
        });
        this.state = {
            currentIcon: this.props.currentIcon || null,
            isPanelOpen: false
        };
    }
    componentDidUpdate(prevProps, prevState) {
        if (prevProps.currentIcon !== this.props.currentIcon) {
            this.setState({
                currentIcon: this.props.currentIcon
            });
        }
    }
    render() {
        const { buttonLabel, buttonClassName, disabled, panelClassName, label } = this.props;
        let renderOption = this.props.renderOption;
        const iconProps = { iconName: this.props.currentIcon };
        renderOption = renderOption === undefined ? 'panel' : renderOption;
        return React.createElement("div", null,
            label && label.length > 0 && React.createElement(Label_1.Label, null, label),
            React.createElement(Button_1.PrimaryButton, { text: buttonLabel, onClick: this.iconPickerOnClick, className: buttonClassName, disabled: disabled, iconProps: iconProps, "data-automation-id": `icon-picker-open` }),
            React.createElement(IconSelector_1.IconSelector, { renderOption: renderOption, currentIcon: this.state.currentIcon, panelClassName: panelClassName, panelType: Panel_1.PanelType.medium, dialogType: Dialog_1.DialogType.normal, isOpen: this.state.isPanelOpen, onChange: this.iconOnClick, onDismiss: this.closePanel, onSave: this.confirmSelection }));
    }
}
exports.default = PropertyFieldIconPickerHost;
//# sourceMappingURL=PropertyFieldIconPickerHost.js.map