@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
105 lines • 5.72 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Label_1 = require("@fluentui/react/lib/Label");
const SearchBox_1 = require("@fluentui/react/lib/SearchBox");
const Spinner_1 = require("@fluentui/react/lib/Spinner");
const strings = tslib_1.__importStar(require("PropertyControlStrings"));
const icons_1 = require("@uifabric/icons");
const Utilities_1 = require("@fluentui/react/lib/Utilities");
const telemetry = tslib_1.__importStar(require("../../common/telemetry"));
const TeamsSearchService_1 = tslib_1.__importDefault(require("../../services/TeamsSearchService"));
const FieldErrorMessage_1 = tslib_1.__importDefault(require("../errorMessage/FieldErrorMessage"));
const PropertyFieldTeamPickerHost_module_scss_1 = tslib_1.__importDefault(require("./PropertyFieldTeamPickerHost.module.scss"));
const PropertyFieldTeamPickerListItem_1 = require("./PropertyFieldTeamPickerListItem/PropertyFieldTeamPickerListItem");
class PropertyFieldTeamPickerHost extends React.Component {
constructor(props) {
super(props);
this.onSearchFieldChange = (newValue) => tslib_1.__awaiter(this, void 0, void 0, function* () {
if (newValue && newValue.length > 2) {
this.setState({ isLoading: true });
try {
const teams = yield this.teamsService.searchTeams(this.props.context, newValue);
this.setState({ teamSearchResults: teams });
}
catch (error) {
this.setState({ errorMessage: error instanceof Error ? error.message : String(error) });
}
finally {
this.setState({ isLoading: false });
}
}
else {
this.setState({ teamSearchResults: [] });
}
});
this.handleCheckboxChange = (team, checked) => {
let selectedTeams = [...this.state.selectedTeams];
if (checked) {
if (this.props.multiSelect) {
selectedTeams.push(team);
}
else {
selectedTeams = [team];
}
}
else {
if (this.props.multiSelect) {
selectedTeams.splice(selectedTeams.indexOf(team), 1);
}
else {
selectedTeams = [];
}
}
this.props.onPropertyChange(this.props.targetProperty, this.state.selectedTeams, selectedTeams);
// Trigger the apply button
if (typeof this.props.onChange !== 'undefined' && this.props.onChange !== null) {
this.props.onChange(this.props.targetProperty, selectedTeams);
}
this.setState({ selectedTeams });
};
(0, icons_1.initializeIcons)();
telemetry.track('PropertyFieldTeamPicker', {
disabled: props.disabled
});
this.state = {
isLoading: false,
selectedTeams: props.initialTeams || [],
teamSearchResults: [],
errorMessage: null
};
this.async = new Utilities_1.Async(this);
this.teamsService = new TeamsSearchService_1.default();
}
/**
* componentWillUnmount lifecycle hook
*/
componentWillUnmount() {
this.async.dispose();
}
render() {
const { isLoading, teamSearchResults, selectedTeams } = this.state;
return (React.createElement("div", null,
this.props.label && React.createElement(Label_1.Label, null, this.props.label),
React.createElement(SearchBox_1.SearchBox, { placeholder: strings.TeamPickerSearchBoxPlaceholder, onChanged: this.async.debounce(this.onSearchFieldChange, this.props.deferredValidationTime) }),
isLoading &&
React.createElement(Spinner_1.Spinner, { size: Spinner_1.SpinnerSize.medium }),
!isLoading && teamSearchResults &&
React.createElement("div", null,
teamSearchResults.length > 0 &&
React.createElement("ul", { className: PropertyFieldTeamPickerHost_module_scss_1.default.siteList }, teamSearchResults.map((team) => React.createElement(PropertyFieldTeamPickerListItem_1.PropertyFieldTeamPickerListItem, { key: team.id, checked: selectedTeams.filter(s => s.id === team.id).length > 0, handleCheckboxChange: this.handleCheckboxChange, team: team }))),
teamSearchResults.length === 0 &&
React.createElement(Label_1.Label, null, strings.TeamPickerNoResults)),
selectedTeams && selectedTeams.length > 0 &&
React.createElement("div", null,
React.createElement(Label_1.Label, { className: PropertyFieldTeamPickerHost_module_scss_1.default.bold },
selectedTeams.length,
" ",
strings.TeamPickerSitesChosen),
React.createElement("ul", { className: PropertyFieldTeamPickerHost_module_scss_1.default.siteList }, selectedTeams.map((team) => React.createElement(PropertyFieldTeamPickerListItem_1.PropertyFieldTeamPickerListItem, { key: team.id, checked: selectedTeams.filter(s => s.id === team.id).length > 0, handleCheckboxChange: this.handleCheckboxChange, team: team })))),
React.createElement(FieldErrorMessage_1.default, { errorMessage: this.state.errorMessage })));
}
}
exports.default = PropertyFieldTeamPickerHost;
//# sourceMappingURL=PropertyFieldTeamPickerHost.js.map