@pnp/spfx-property-controls/lib-commonjs/propertyFields/sitePicker/PropertyFieldSitePickerHost.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 SPSiteSearchService_1 = tslib_1.__importDefault(require("../../services/SPSiteSearchService"));
const FieldErrorMessage_1 = tslib_1.__importDefault(require("../errorMessage/FieldErrorMessage"));
const telemetry = tslib_1.__importStar(require("../../common/telemetry"));
const Label_1 = require("@fluentui/react/lib/Label");
const SearchBox_1 = require("@fluentui/react/lib/SearchBox");
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
const Spinner_1 = require("@fluentui/react/lib/Spinner");
const PropertyFieldSitePickerListItem_1 = require("./PropertyFieldSitePickerListItem/PropertyFieldSitePickerListItem");
const PropertyFieldSitePickerHost_module_scss_1 = tslib_1.__importDefault(require("./PropertyFieldSitePickerHost.module.scss"));
const icons_1 = require("@uifabric/icons");
const Utilities_1 = require("@fluentui/react/lib/Utilities");
class PropertyFieldSitePickerHost extends React.Component {
    constructor(props) {
        super(props);
        this.onSearchFieldChange = (newValue) => tslib_1.__awaiter(this, void 0, void 0, function* () {
            if (!newValue) {
                this.setState({ siteSearchResults: [] });
                return;
            }
            this.setState({ isLoading: true });
            try {
                const { trimDuplicates, additionalQuery } = this.props;
                const sites = yield this.searchService.searchSites(this.props.context, newValue, !!trimDuplicates, additionalQuery);
                this.setState({ siteSearchResults: sites });
            }
            catch (error) {
                this.setState({ errorMessage: error instanceof Error ? error.message : String(error) });
            }
            finally {
                this.setState({ isLoading: false });
            }
        });
        this.handleCheckboxChange = (site, checked) => {
            let selectedSites = [...this.state.selectedSites];
            if (checked) {
                if (this.props.multiSelect) {
                    selectedSites.push(site);
                }
                else {
                    selectedSites = [site];
                }
            }
            else {
                if (this.props.multiSelect) {
                    selectedSites.splice(selectedSites.indexOf(site), 1);
                }
                else {
                    selectedSites = [];
                }
            }
            this.props.onPropertyChange(this.props.targetProperty, this.state.selectedSites, selectedSites);
            // Trigger the apply button
            if (typeof this.props.onChange !== 'undefined' && this.props.onChange !== null) {
                this.props.onChange(this.props.targetProperty, selectedSites);
            }
            this.setState({ selectedSites });
        };
        (0, icons_1.initializeIcons)();
        telemetry.track('PropertyFieldSitePicker', {
            disabled: props.disabled
        });
        this.state = {
            isLoading: false,
            selectedSites: props.initialSites || [],
            siteSearchResults: [],
            errorMessage: null
        };
        this.async = new Utilities_1.Async(this);
        this.searchService = new SPSiteSearchService_1.default();
    }
    /**
     * componentWillUnmount lifecycle hook
     */
    componentWillUnmount() {
        this.async.dispose();
    }
    render() {
        const { isLoading, siteSearchResults, selectedSites } = this.state;
        return (React.createElement("div", null,
            this.props.label && React.createElement(Label_1.Label, null, this.props.label),
            React.createElement(SearchBox_1.SearchBox, { disabled: this.props.disabled, placeholder: strings.SitePickerSearchBoxPlaceholder, onChanged: this.async.debounce(this.onSearchFieldChange, this.props.deferredValidationTime) }),
            isLoading &&
                React.createElement(Spinner_1.Spinner, { size: Spinner_1.SpinnerSize.medium }),
            !isLoading && siteSearchResults &&
                React.createElement("div", null,
                    siteSearchResults.length > 0 &&
                        React.createElement("ul", { className: PropertyFieldSitePickerHost_module_scss_1.default.siteList }, siteSearchResults.map((site) => React.createElement(PropertyFieldSitePickerListItem_1.PropertyFieldSitePickerListItem, { key: site.url, checked: selectedSites.filter(s => s.url === site.url).length > 0, handleCheckboxChange: this.handleCheckboxChange, site: site }))),
                    siteSearchResults.length === 0 &&
                        React.createElement(Label_1.Label, null, strings.SitePickerNoResults)),
            selectedSites && selectedSites.length > 0 &&
                React.createElement("div", null,
                    React.createElement(Label_1.Label, { className: PropertyFieldSitePickerHost_module_scss_1.default.bold },
                        selectedSites.length,
                        " ",
                        strings.SitePickerSitesChosen),
                    React.createElement("ul", { className: PropertyFieldSitePickerHost_module_scss_1.default.siteList }, selectedSites.map((site) => React.createElement(PropertyFieldSitePickerListItem_1.PropertyFieldSitePickerListItem, { key: site.url, checked: selectedSites.filter(s => s.url === site.url).length > 0, handleCheckboxChange: this.handleCheckboxChange, site: site })))),
            React.createElement(FieldErrorMessage_1.default, { errorMessage: this.state.errorMessage })));
    }
}
exports.default = PropertyFieldSitePickerHost;
//# sourceMappingURL=PropertyFieldSitePickerHost.js.map